init

public/main.js

@@ -0,0 +1,48 @@
+const editModalEl = document.getElementById('editModal');
+const editModal = new bootstrap.Modal(editModalEl);
+
+const modalIndex = document.getElementById('modal-index');
+const modalInitial = document.getElementById('modal-initial');
+const modalUsed = document.getElementById('modal-used');
+const modalColor = document.getElementById('modal-color');
+const adjustAmount = document.getElementById('adjust-amount');
+const adjustOperation = document.getElementById('adjust-operation');
+const applyAdjustmentBtn = document.getElementById('apply-adjustment');
+
+function openModal(index) {
+  fetch('/api/spool/' + index)
+    .then(res => res.json())
+    .then(spool => {
+      modalIndex.value = index;
+      modalInitial.value = spool.initial;
+      modalUsed.value = spool.used.toFixed(1);
+      modalColor.value = spool.color;
+      adjustAmount.value = '';
+      adjustOperation.value = 'add';
+      editModal.show();
+    });
+}
+
+// Apply + or - adjustment on Used field
+applyAdjustmentBtn.addEventListener('click', () => {
+  let amount = parseFloat(adjustAmount.value);
+  if (isNaN(amount) || amount <= 0) {
+    alert('Please enter a positive number to adjust.');
+    return;
+  }
+
+  let usedVal = parseFloat(modalUsed.value) || 0;
+
+  if (adjustOperation.value === 'add') {
+    usedVal += amount;
+  } else {
+    usedVal -= amount;
+    if (usedVal < 0) usedVal = 0;
+  }
+
+  modalUsed.value = usedVal.toFixed(1);
+  adjustAmount.value = '';
+});
+
+// Attach openModal to window so inline onclick works:
+window.openModal = openModal;

public/styles.css

@@ -0,0 +1,26 @@
+body {
+  background-color: #121212;
+  color: #fff;
+  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+}
+
+.spool-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  grid-template-rows: 1fr 1fr;
+  gap: 1rem;
+  width: 100%;
+  max-width: 600px;
+  aspect-ratio: 1 / 1;
+}
+
+.spool-card {
+  width: 100%;
+  height: 100%;
+  transition: box-shadow 0.3s ease;
+  overflow: hidden;
+}
+
+.spool-card:hover {
+  box-shadow: 0 0 15px 4px rgba(255, 255, 255, 0.3);
+}