simplify color picker interface

static/js/led-control.js

@@ -129,33 +129,6 @@ async function initializeDWLedsControls() {
         }
     });
 
-    // Color picker - update display when color changes
-    const colorPicker = document.getElementById('dw-leds-color');
-    const colorHexDisplay = document.getElementById('dw-leds-color-hex');
-
-    colorPicker?.addEventListener('input', (e) => {
-        if (colorHexDisplay) {
-            colorHexDisplay.textContent = e.target.value.toUpperCase();
-        }
-    });
-
-    // Color picker - apply button
-    document.getElementById('dw-leds-set-color')?.addEventListener('click', async () => {
-        await applyColor(colorPicker.value);
-    });
-
-    // Quick color buttons
-    document.querySelectorAll('.dw-leds-quick-color').forEach(button => {
-        button.addEventListener('click', async () => {
-            const hexColor = button.getAttribute('data-color');
-            await applyColor(hexColor);
-
-            // Update color picker and hex display to match
-            if (colorPicker) colorPicker.value = hexColor;
-            if (colorHexDisplay) colorHexDisplay.textContent = hexColor.toUpperCase();
-        });
-    });
-
     // Effect color pickers - apply immediately on change
     document.querySelectorAll('.effect-color-picker').forEach(picker => {
         picker.addEventListener('change', async () => {
@@ -566,37 +539,6 @@ function updateIdleTimeoutRemainingDisplay(remainingMinutes) {
     }
 }
 
-// Helper function to apply color
-async function applyColor(hexColor) {
-    try {
-        // Convert hex to RGB
-        const r = parseInt(hexColor.slice(1, 3), 16);
-        const g = parseInt(hexColor.slice(3, 5), 16);
-        const b = parseInt(hexColor.slice(5, 7), 16);
-
-        const response = await fetch('/api/dw_leds/color', {
-            method: 'POST',
-            headers: { 'Content-Type': 'application/json' },
-            body: JSON.stringify({ r, g, b })
-        });
-
-        if (!response.ok) throw new Error(`HTTP ${response.status}`);
-        const data = await response.json();
-
-        if (data.connected) {
-            showStatus(`Color set to ${hexColor.toUpperCase()}`, 'success');
-            // Update power button state if backend auto-powered on
-            if (data.power_on !== undefined) {
-                updatePowerButtonUI(data.power_on);
-            }
-        } else {
-            showStatus(data.error || 'Failed to set color', 'error');
-        }
-    } catch (error) {
-        showStatus(`Failed to set color: ${error.message}`, 'error');
-    }
-}
-
 // Helper function to apply all effect colors
 async function applyAllColors(hexColor1, hexColor2, hexColor3) {
     try {

templates/led.html

@@ -40,10 +40,6 @@
 .dark input[type="range"] {
   background-color: #404040;
 }
-.dark input[type="color"] {
-  background-color: #262626;
-  border-color: #404040;
-}
 .dark select,
 .dark .form-select {
   background-color: #1f1f1f;
@@ -55,11 +51,6 @@
   color: #e5e5e5;
 }
 
-/* Quick color buttons - ensure they remain visible */
-.dark .quick-color {
-  border-color: #525252;
-}
-
 /* Status messages - keep backgrounds but adjust borders */
 .dark .bg-green-50 {
   background-color: #14532d;
@@ -166,38 +157,6 @@
         </div>
       </div>
 
-      <!-- Color Control -->
-      <div class="flex flex-col gap-3">
-        <h3 class="text-slate-800 text-base font-semibold">Color Picker</h3>
-        <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
-          <div class="flex items-center gap-3">
-            <input type="color" id="dw-leds-color" value="#ff0000" class="w-20 h-20 rounded-lg border-2 border-slate-300 cursor-pointer">
-            <div class="flex flex-col gap-1">
-              <span id="dw-leds-color-hex" class="text-sm font-mono font-semibold text-slate-700">#FF0000</span>
-              <button id="dw-leds-set-color" class="flex items-center justify-center gap-2 rounded-lg bg-blue-600 px-3 py-2 text-sm font-semibold text-white shadow-md hover:bg-blue-700 transition-colors duration-150 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-offset-2">
-                <span class="material-icons text-base">palette</span>
-                <span>Apply</span>
-              </button>
-            </div>
-          </div>
-
-          <!-- Quick Colors -->
-          <div class="flex flex-col gap-2">
-            <span class="text-sm font-medium text-slate-600">Quick Colors</span>
-            <div class="grid grid-cols-4 gap-2">
-              <button class="dw-leds-quick-color h-10 rounded-lg border-2 border-slate-300 hover:scale-105 transition-transform" data-color="#ff0000" style="background-color: #ff0000;" title="Red"></button>
-              <button class="dw-leds-quick-color h-10 rounded-lg border-2 border-slate-300 hover:scale-105 transition-transform" data-color="#00ff00" style="background-color: #00ff00;" title="Green"></button>
-              <button class="dw-leds-quick-color h-10 rounded-lg border-2 border-slate-300 hover:scale-105 transition-transform" data-color="#0000ff" style="background-color: #0000ff;" title="Blue"></button>
-              <button class="dw-leds-quick-color h-10 rounded-lg border-2 border-slate-300 hover:scale-105 transition-transform" data-color="#ffff00" style="background-color: #ffff00;" title="Yellow"></button>
-              <button class="dw-leds-quick-color h-10 rounded-lg border-2 border-slate-300 hover:scale-105 transition-transform" data-color="#ff00ff" style="background-color: #ff00ff;" title="Magenta"></button>
-              <button class="dw-leds-quick-color h-10 rounded-lg border-2 border-slate-300 hover:scale-105 transition-transform" data-color="#00ffff" style="background-color: #00ffff;" title="Cyan"></button>
-              <button class="dw-leds-quick-color h-10 rounded-lg border-2 border-slate-300 hover:scale-105 transition-transform" data-color="#ff8000" style="background-color: #ff8000;" title="Orange"></button>
-              <button class="dw-leds-quick-color h-10 rounded-lg border-2 border-slate-300 hover:scale-105 transition-transform" data-color="#ffffff" style="background-color: #ffffff;" title="White"></button>
-            </div>
-          </div>
-        </div>
-      </div>
-
       <!-- Effects and Palettes -->
       <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
         <div class="flex flex-col gap-3">