Update index.html

index.html

@@ -49,6 +49,13 @@
             cursor: pointer;
         }
 
+        .controls input[type="color"] {
+          border: none;
+          padding: 0;
+          width: 40px;
+          height: 40px;
+        }
+
         .controls button {
             background-color: var(--color-active);
             color: var(--color-bg);
@@ -153,11 +160,18 @@
             <label for="seconds-input">Seconds:</label>
             <input type="number" id="seconds-input" value="0" min="0">
         </div>
+        <div>
+        <label for="active-dot-color">Active Dot Color:</label>
+        <input type="color" id="active-dot-color" value="#f39c12">
+    </div>
+    <div>
+        <label for="inactive-dot-color">Inactive Dot Color:</label>
+        <input type="color" id="inactive-dot-color" value="#555555">
+    </div>
         
         <button id="start-timer">Start Timer</button>
         <button id="pause">Pause</button>
         <button id="reset">Reset</button>
-        <div style="text-align:bottom;"> | </div>
         <button id="start-stopwatch">Start Stopwatch</button>
     </div>
 
@@ -273,6 +287,52 @@
                 }
             }
         }
+//ADDED
+        // Get references to the new color inputs
+const activeDotColorInput = document.getElementById('active-dot-color');
+const inactiveDotColorInput = document.getElementById('inactive-dot-color');
+
+// Function to update CSS variables for dot colors
+function updateDotColors() {
+    document.documentElement.style.setProperty('--color-active', activeDotColorInput.value);
+    document.documentElement.style.setProperty('--color-inactive', inactiveDotColorInput.value);
+
+    // Update all dots' colors immediately
+    const allDots = document.querySelectorAll('.dot');
+    allDots.forEach(dot => {
+        if (dot.classList.contains('active')) {
+            dot.style.backgroundColor = activeDotColorInput.value;
+        } else {
+            dot.style.backgroundColor = inactiveDotColorInput.value;
+        }
+    });
+}
+
+// Event listeners for color changes
+activeDotColorInput.addEventListener('input', updateDotColors);
+inactiveDotColorInput.addEventListener('input', updateDotColors);
+
+// Modify the updateGridRow function to use the new color system
+function updateGridRow(rows, previous, current, max) {
+    const start = Math.min(previous, current);
+    const end = Math.max(previous, current);
+
+    for (let i = start; i < end; i++) {
+        const rowIndex = Math.floor(i / (max / rows.length));
+        const dotIndex = i % (max / rows.length);
+        const dot = rows[rowIndex].children[dotIndex];
+        if (dot) {
+            dot.classList.remove('active', 'inactive');
+            dot.classList.add(i < current ? 'active' : 'inactive');
+            // Apply the color directly here for immediate visual feedback
+            dot.style.backgroundColor = i < current ? activeDotColorInput.value : inactiveDotColorInput.value;
+        }
+    }
+}
+
+// Initial update to set default colors
+updateDotColors();
+//ADDED STOP
 
 // Make sure the start function doesn't reset totalSeconds when resuming
 function start() {