dune-weaver/templates/settings.html

{% extends "base.html" %} {% block title %}Settings - {{ app_name or 'Dune Weaver' }}{%
endblock %}

{% block additional_styles %}
/* Dark mode styles for settings page */
.dark .bg-white {
  background-color: #262626;
}
.dark .text-slate-900 {
  color: #ffffff;
}
.dark .text-slate-800 {
  color: #f8fafc;
}
.dark .text-slate-700 {
  color: #f1f5f9;
}
.dark .text-slate-600 {
  color: #e2e8f0;
}
.dark .text-slate-500 {
  color: #e2e8f0;
}

/* Label overrides for better visibility */
.dark label {
  color: #f1f5f9;
}
.dark .border-slate-200 {
  border-color: #404040;
}
.dark .border-slate-300 {
  border-color: #404040;
}
.dark .divide-slate-100 {
  border-color: #404040;
}
.dark .bg-slate-50 {
  background-color: #262626;
}
.dark .hover\:bg-slate-50:hover {
  background-color: #404040;
}
.dark .bg-slate-100 {
  background-color: #404040;
}
.dark .form-input,
.dark input[type="number"],
.dark input[type="text"],
.dark input[type="time"] {
  background-color: #1f1f1f;
  border-color: #404040;
  color: #e5e5e5;
}
.dark .form-input::placeholder {
  color: #9ca3af;
}
.dark .form-input:focus {
  border-color: #0c7ff2;
  ring-color: #0c7ff2;
}
.dark input[type="time"]::-webkit-calendar-picker-indicator {
  filter: invert(1);
}
.dark .form-select {
  background-color: #1f1f1f;
  border-color: #404040;
  color: #e5e5e5;
}
.dark .form-select:focus {
  border-color: #0c7ff2;
  ring-color: #0c7ff2;
}
.dark .focus\:ring-sky-500:focus {
  ring-color: #0c7ff2;
}
.dark .focus\:border-sky-500:focus {
  border-color: #0c7ff2;
}
.dark .hover\:text-gray-700:hover {
  color: #e5e5e5;
}
.dark .text-gray-400 {
  color: #9ca3af;
}

/* Autocomplete suggestions dark mode */
.dark #clearFromInSuggestions,
.dark #clearFromOutSuggestions {
  background-color: #262626;
  border-color: #404040;
}
.dark .suggestion-item {
  color: #e5e5e5;
}
.dark .suggestion-item:hover {
  background-color: #404040;
}
.dark .suggestion-item.selected {
  background-color: #0c7ff2;
  color: white;
}

/* Light mode autocomplete styles */
.suggestion-item {
  padding: 8px 12px;
  cursor: pointer;
  color: #1f2937;
  transition: background-color 0.15s;
}
.suggestion-item:hover {
  background-color: #f3f4f6;
}
.suggestion-item.selected {
  background-color: #0c7ff2;
  color: white;
}
.suggestion-item mark {
  background-color: #fef3c7;
  font-weight: 600;
}
.dark .suggestion-item mark {
  background-color: #92400e;
  color: #fef3c7;
}

/* Toggle switch styles */
.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  transition: .4s;
}

input:checked + .slider {
  background-color: #0c7ff2;
}

input:focus + .slider {
  box-shadow: 0 0 1px #0c7ff2;
}

input:checked + .slider:before {
  transform: translateX(26px);
}

.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}

/* Dark mode for switches */
.dark .slider {
  background-color: #404040;
}

.dark input:checked + .slider {
  background-color: #0c7ff2;
}

/* Spin animation for loading states */
@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.animate-spin {
  animation: spin 1s linear infinite;
}

/* Time slot specific styles */
.time-slot-item {
  background-color: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 16px;
  transition: all 0.15s;
}

.dark .time-slot-item {
  background-color: #1e293b;
  border-color: #475569;
}

.time-slot-item:hover {
  border-color: #cbd5e1;
}

.dark .time-slot-item:hover {
  border-color: #64748b;
}

/* Info box dark mode - grey theme */
.dark .bg-blue-50 {
  background-color: #1f1f1f;
}

.dark .border-blue-200 {
  border-color: #404040;
}

.dark .text-blue-600 {
  color: #e2e8f0;
}

.dark .text-blue-800 {
  color: #f1f5f9;
}

.dark .text-blue-700 {
  color: #e2e8f0;
}

/* Amber box dark mode - grey theme */
.dark .bg-amber-50 {
  background-color: #1f1f1f;
}

.dark .border-amber-200 {
  border-color: #404040;
}

.dark .text-amber-600 {
  color: #f1f5f9;
}
{% endblock %}

{% block content %}
<div class="layout-content-container flex flex-col w-full max-w-4xl gap-8 pt-2 pb-[75px]">
  <div
    class="flex flex-wrap justify-between items-center p-4 bg-white rounded-xl shadow-sm mt-2 sm:mt-8"
  >
    <h1
      class="text-slate-900 tracking-tight text-2xl sm:text-3xl font-bold leading-tight"
    >
      Settings
    </h1>
  </div>
  <section class="bg-white rounded-xl shadow-sm overflow-hidden">
    <h2
      class="text-slate-800 text-xl sm:text-2xl font-semibold leading-tight tracking-[-0.01em] px-6 py-4 border-b border-slate-200"
    >
      Device Connection
    </h2>
    <div class="divide-y divide-slate-100">
      <div
        class="flex items-center gap-4 px-6 py-5 hover:bg-slate-50 transition-colors"
      >
        <div
          class="text-slate-600 flex items-center justify-center rounded-lg bg-slate-100 shrink-0 size-12"
        >
          <span class="material-icons text-3xl">usb_off</span>
        </div>
        <div class="flex-1">
          <p class="text-slate-800 text-base font-medium leading-normal">
            Status
          </p>
          <p
            id="serialStatus"
            class="text-red-500 text-sm font-medium leading-normal"
          >
            Disconnected
          </p>
        </div>
        <button
          id="disconnectButton"
          class="text-xs font-medium text-slate-600 bg-red-100 hover:bg-red-200 text-red-700 px-3 py-1.5 rounded-md transition-colors"
          hidden
        >
          Disconnect
        </button>
      </div>
      <div id="portSelectionDiv" class="px-6 py-5 space-y-4">
        <label class="flex flex-col gap-1.5">
          <span class="text-slate-700 text-sm font-medium leading-normal"
            >Available Serial Ports</span
          >
          <div class="flex gap-3 items-center">
            <select
              id="portSelect"
              class="form-select flex-1 resize-none overflow-hidden rounded-lg text-slate-900 focus:outline-0 focus:ring-2 focus:ring-sky-500 border border-slate-300 bg-white focus:border-sky-500 h-10 placeholder:text-slate-400 px-4 text-base font-medium leading-normal transition-colors "
            >
              <option value="">Select a port...</option>
            </select>
            <button
              id="connectButton"
              class="flex items-center justify-center gap-2 min-w-[100px] cursor-pointer rounded-lg h-10 px-4 bg-sky-600 hover:bg-sky-700 text-white text-sm font-medium leading-normal tracking-[0.015em] transition-colors flex-shrink-0"
            >
              <span class="material-icons text-lg">cable</span>
              <span class="truncate">Connect</span>
            </button>
          </div>
          <p class="text-xs text-slate-500 mt-2">
            Select a port and click 'Connect' to establish a connection.
          </p>
        </label>
      </div>
    </div>
  </section>
  <!-- Homing Configuration Section -->
  <section id="homingSection" class="bg-white rounded-xl shadow-sm overflow-hidden">
    <h2
      class="text-slate-800 text-xl sm:text-2xl font-semibold leading-tight tracking-[-0.01em] px-6 py-4 border-b border-slate-200"
    >
      Homing Configuration
    </h2>
    <div class="px-6 py-5 space-y-6">
      <!-- Homing Mode Selection -->
      <div class="space-y-3">
        <label class="text-sm font-medium text-slate-700 flex items-center gap-2">
          <span class="material-icons text-slate-600 text-base">home</span>
          Homing Mode
        </label>

        <div class="space-y-3">
          <!-- Crash Homing Option -->
          <label class="flex items-start gap-3 p-3 border border-slate-300 rounded-lg cursor-pointer hover:bg-slate-50 transition-colors">
            <input
              type="radio"
              name="homingMode"
              value="0"
              id="homingModeCrash"
              class="mt-0.5 w-4 h-4 text-sky-600 focus:ring-sky-500"
            />
            <div class="flex-1">
              <div class="text-sm font-medium text-slate-700">Crash Homing</div>
              <div class="text-xs text-slate-500 mt-1">
                Y axis moves until physical stop, then theta and rho set to 0 (no x0 y0 command)
              </div>
            </div>
          </label>

          <!-- Sensor Homing Option -->
          <label class="flex items-start gap-3 p-3 border border-slate-300 rounded-lg cursor-pointer hover:bg-slate-50 transition-colors">
            <input
              type="radio"
              name="homingMode"
              value="1"
              id="homingModeSensor"
              class="mt-0.5 w-4 h-4 text-sky-600 focus:ring-sky-500"
            />
            <div class="flex-1">
              <div class="text-sm font-medium text-slate-700">Sensor Homing</div>
              <div class="text-xs text-slate-500 mt-1">
                Homes both X and Y axes using sensors
              </div>
            </div>
          </label>
        </div>
      </div>

      <!-- Compass Reference Point (Sensor mode only) -->
      <div id="compassOffsetContainer" class="space-y-2">
        <label for="angularOffsetInput" class="text-sm font-medium text-slate-700 flex items-center gap-2">
          <span class="material-icons text-slate-600 text-base">explore</span>
          Sensor offset (degrees) <span class="text-xs text-slate-400">(Sensor mode only)</span>
        </label>
        <input
          type="number"
          id="angularOffsetInput"
          min="0"
          max="360"
          step="0.1"
          value="0"
          class="w-full px-3 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-sky-500 focus:border-sky-500 text-sm"
          placeholder="0.0"
        />
        <p class="text-xs text-slate-500">
          Set the angle (in degrees) where your radial arm to be offset by. You want to choose a value here so that the radial arm will point East.
        </p>
      </div>

      <!-- Homing Info Box -->
      <div id="homingInfoBox" class="text-xs text-slate-600 bg-blue-50 border border-blue-200 rounded-lg p-3">
        <div class="flex items-start gap-2">
          <span class="material-icons text-blue-600 text-base">info</span>
          <div id="homingInfoContent">
            <p class="font-medium text-blue-800">Crash Homing Mode:</p>
            <ul class="mt-1 space-y-1 text-blue-700">
              <li>• Y axis moves -22mm (or -30mm for mini) until physical stop</li>
              <li>• Theta set to 0, rho set to 0</li>
              <li>• No x0 y0 command sent</li>
              <li>• No hardware sensors required</li>
            </ul>
          </div>
        </div>
      </div>

      <div class="flex justify-end">
        <button
          id="saveHomingConfig"
          class="flex items-center justify-center gap-2 min-w-[140px] cursor-pointer rounded-lg h-10 px-4 bg-sky-600 hover:bg-sky-700 text-white text-sm font-medium leading-normal tracking-[0.015em] transition-colors"
        >
          <span class="material-icons text-lg">save</span>
          <span class="truncate">Save Configuration</span>
        </button>
      </div>
    </div>
  </section>
  <section class="bg-white rounded-xl shadow-sm overflow-hidden">
    <h2
      class="text-slate-800 text-xl sm:text-2xl font-semibold leading-tight tracking-[-0.01em] px-6 py-4 border-b border-slate-200"
    >
      Application Settings
    </h2>
    <div class="px-6 py-5 space-y-6">
      <label class="flex flex-col gap-1.5">
        <span class="text-slate-700 text-sm font-medium leading-normal"
          >Application Name</span
        >
        <div class="flex gap-3 items-center">
          <div class="relative flex-1">
            <input
              id="appNameInput"
              class="form-input flex w-full min-w-0 resize-none overflow-hidden rounded-lg text-slate-900 focus:outline-0 focus:ring-2 focus:ring-sky-500 border border-slate-300 bg-white focus:border-sky-500 h-10 placeholder:text-slate-400 px-4 pr-10 text-base font-normal leading-normal transition-colors"
              placeholder="e.g., Dune Weaver"
              value="Dune Weaver"
            />
            <button
              type="button"
              onclick="document.getElementById('appNameInput').value='Dune Weaver';"
              class="absolute right-2 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-700"
              aria-label="Reset to default"
              title="Reset to default"
            >
              <span class="material-icons">restart_alt</span>
            </button>
          </div>
          <button
            id="saveAppName"
            class="flex items-center justify-center gap-2 min-w-[140px] cursor-pointer rounded-lg h-10 px-4 bg-sky-600 hover:bg-sky-700 text-white text-sm font-medium leading-normal tracking-[0.015em] transition-colors flex-shrink-0"
          >
            <span class="material-icons text-lg">save</span>
            <span class="truncate">Save Name</span>
          </button>
        </div>
        <p class="text-xs text-slate-500 mt-2">
          This name will appear in the browser tab and at the top of every page.
        </p>
      </label>
    </div>
  </section>
  <section class="bg-white rounded-xl shadow-sm overflow-hidden">
    <h2
      class="text-slate-800 text-xl sm:text-2xl font-semibold leading-tight tracking-[-0.01em] px-6 py-4 border-b border-slate-200"
    >
      Pattern Clearing
    </h2>
    <div class="px-6 py-5 space-y-6">
      <p class="text-sm text-slate-600">
        Customize the clearing behavior used when transitioning between patterns. Set custom patterns and speed to control how sand is distributed.
      </p>

      <!-- Clearing Speed Section -->
      <div class="bg-slate-50 rounded-lg p-4 space-y-4">
        <h3 class="text-slate-800 text-base font-semibold">Clearing Speed</h3>
        <p class="text-sm text-slate-600">
          Set a custom speed for clearing patterns. Leave empty to use the default pattern speed. This allows clearing patterns to run at a different speed than regular patterns.
        </p>
        <div class="flex flex-col gap-1.5">
          <label for="clearPatternSpeedInput" class="text-slate-700 text-sm font-medium leading-normal">
            Speed (steps per minute)
          </label>
          <div class="flex gap-3 items-center">
            <input
              id="clearPatternSpeedInput"
              type="number"
              min="50"
              max="2000"
              step="50"
              class="form-input flex-1 resize-none overflow-hidden rounded-lg text-slate-900 focus:outline-0 focus:ring-2 focus:ring-sky-500 border border-slate-300 bg-white focus:border-sky-500 h-10 placeholder:text-slate-400 px-4 text-base font-normal leading-normal transition-colors"
              placeholder="Default (use pattern speed)"
              value=""
            />
            <button
              id="saveClearSpeed"
              class="flex items-center justify-center gap-2 min-w-[120px] cursor-pointer rounded-lg h-10 px-4 bg-sky-600 hover:bg-sky-700 text-white text-sm font-medium leading-normal tracking-[0.015em] transition-colors"
            >
              <span class="material-icons text-lg">save</span>
              <span class="truncate">Save Speed</span>
            </button>
          </div>
          <div id="effectiveClearSpeed" class="text-xs text-slate-500 mt-1"></div>
        </div>
      </div>

      <!-- Custom Patterns Section -->
      <div class="bg-slate-50 rounded-lg p-4 space-y-4">
        <h3 class="text-slate-800 text-base font-semibold">Custom Clear Patterns</h3>
        <p class="text-sm text-slate-600">
          Choose specific patterns to use when clearing. Leave empty to use the default clearing behavior.
        </p>
        
        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
        <div class="flex flex-col gap-1.5">
          <label for="customClearFromInInput" class="text-slate-700 text-sm font-medium leading-normal">Clear From Center Pattern</label>
          <div class="relative">
            <input
              id="customClearFromInInput"
              type="text"
              class="form-input w-full resize-none overflow-hidden rounded-lg text-slate-900 focus:outline-0 focus:ring-2 focus:ring-sky-500 border border-slate-300 bg-white focus:border-sky-500 h-10 placeholder:text-slate-400 px-4 pr-10 text-base font-normal leading-normal transition-colors"
              placeholder="Type to search patterns or leave empty for default"
              autocomplete="off"
            />
            <button
              type="button"
              id="clearFromInClear"
              class="absolute right-2 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-700 dark:hover:text-gray-300 hidden"
              aria-label="Clear selection"
              title="Clear selection"
            >
              <span class="material-icons text-xl">close</span>
            </button>
            <div id="clearFromInSuggestions" class="absolute z-10 w-full mt-1 bg-white border border-slate-300 rounded-lg shadow-lg max-h-60 overflow-y-auto hidden"></div>
          </div>
          <p class="text-xs text-slate-500 mt-1">
            Pattern to use when clearing from the center outward.
          </p>
        </div>

        <div class="flex flex-col gap-1.5">
          <label for="customClearFromOutInput" class="text-slate-700 text-sm font-medium leading-normal">Clear From Perimeter Pattern</label>
          <div class="relative">
            <input
              id="customClearFromOutInput"
              type="text"
              class="form-input w-full resize-none overflow-hidden rounded-lg text-slate-900 focus:outline-0 focus:ring-2 focus:ring-sky-500 border border-slate-300 bg-white focus:border-sky-500 h-10 placeholder:text-slate-400 px-4 pr-10 text-base font-normal leading-normal transition-colors"
              placeholder="Type to search patterns or leave empty for default"
              autocomplete="off"
            />
            <button
              type="button"
              id="clearFromOutClear"
              class="absolute right-2 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-700 dark:hover:text-gray-300 hidden"
              aria-label="Clear selection"
              title="Clear selection"
            >
              <span class="material-icons text-xl">close</span>
            </button>
            <div id="clearFromOutSuggestions" class="absolute z-10 w-full mt-1 bg-white border border-slate-300 rounded-lg shadow-lg max-h-60 overflow-y-auto hidden"></div>
          </div>
          <p class="text-xs text-slate-500 mt-1">
            Pattern to use when clearing from the perimeter inward.
          </p>
        </div>
      </div>

        <div class="flex justify-end">
          <button
            id="saveClearPatterns"
            class="flex items-center justify-center gap-2 min-w-[140px] cursor-pointer rounded-lg h-10 px-4 bg-sky-600 hover:bg-sky-700 text-white text-sm font-medium leading-normal tracking-[0.015em] transition-colors"
          >
            <span class="material-icons text-lg">save</span>
            <span class="truncate">Save Patterns</span>
          </button>
        </div>
      </div>
    </div>
  </section>
  <section class="bg-white rounded-xl shadow-sm overflow-hidden">
    <h2
      class="text-slate-800 text-xl sm:text-2xl font-semibold leading-tight tracking-[-0.01em] px-6 py-4 border-b border-slate-200"
    >
      LED Controller Configuration
    </h2>
    <div class="px-6 py-5 space-y-6">
      <!-- LED Provider Selection -->
      <div class="flex flex-col gap-2">
        <span class="text-slate-700 text-sm font-medium leading-normal">LED Provider</span>
        <div class="flex gap-3">
          <label class="flex items-center gap-2 cursor-pointer">
            <input type="radio" name="ledProvider" value="none" id="ledProviderNone" class="w-4 h-4 text-sky-600 border-slate-300 focus:ring-sky-500">
            <span class="text-sm text-slate-700">None</span>
          </label>
          <label class="flex items-center gap-2 cursor-pointer">
            <input type="radio" name="ledProvider" value="wled" id="ledProviderWled" class="w-4 h-4 text-sky-600 border-slate-300 focus:ring-sky-500">
            <span class="text-sm text-slate-700">WLED</span>
          </label>
          <label class="flex items-center gap-2 cursor-pointer">
            <input type="radio" name="ledProvider" value="dw_leds" id="ledProviderDwLeds" class="w-4 h-4 text-sky-600 border-slate-300 focus:ring-sky-500">
            <span class="text-sm text-slate-700">DW LEDs (Local GPIO)</span>
          </label>
        </div>
        <p class="text-xs text-slate-500">
          Select your LED control system (settings are mutually exclusive)
        </p>
      </div>

      <!-- WLED Configuration (shown when WLED is selected) -->
      <div id="wledConfig" class="flex flex-col gap-4 hidden">
        <label class="flex flex-col gap-1.5">
          <span class="text-slate-700 text-sm font-medium leading-normal">WLED IP Address</span>
          <div class="relative flex-1">
            <input
              id="wledIpInput"
              class="form-input flex w-full min-w-0 resize-none overflow-hidden rounded-lg text-slate-900 focus:outline-0 focus:ring-2 focus:ring-sky-500 border border-slate-300 bg-white focus:border-sky-500 h-10 placeholder:text-slate-400 px-4 pr-10 text-base font-normal leading-normal transition-colors"
              placeholder="e.g., 192.168.1.100"
              value=""
            />
            <button
              type="button"
              onclick="document.getElementById('wledIpInput').value='';"
              class="absolute right-2 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-700"
              aria-label="Clear WLED IP"
            >
              <span class="material-icons">close</span>
            </button>
          </div>
          <p class="text-xs text-slate-500">
            Enter the IP address of your WLED controller
          </p>
        </label>
      </div>

      <!-- DW LEDs Configuration (shown when DW LEDs is selected) -->
      <div id="dwLedsConfig" class="flex flex-col gap-4 hidden">
        <div class="bg-blue-50 border border-blue-200 rounded-lg p-3">
          <div class="flex items-start gap-2">
            <span class="material-icons text-blue-600 text-base">info</span>
            <div class="text-xs text-blue-700">
              <p class="font-medium text-blue-800">Supported LED Strips</p>
              <p class="mt-1"><strong>RGB (3-channel):</strong> WS2811, WS2812, WS2812B, WS2813, WS2815 and other WS281x strips.</p>
              <p class="mt-1"><strong>RGBW (4-channel):</strong> SK6812, SK6812W and other RGBW strips with dedicated white channel.</p>
            </div>
          </div>
        </div>

        <label class="flex flex-col gap-1.5">
          <span class="text-slate-700 text-sm font-medium leading-normal">Number of LEDs</span>
          <input
            id="dwLedNumLeds"
            type="number"
            class="form-input flex w-full min-w-0 resize-none overflow-hidden rounded-lg text-slate-900 focus:outline-0 focus:ring-2 focus:ring-sky-500 border border-slate-300 bg-white focus:border-sky-500 h-10 placeholder:text-slate-400 px-4 text-base font-normal leading-normal transition-colors"
            placeholder="60"
            value="60"
            min="1"
            max="1000"
          />
          <p class="text-xs text-slate-500">
            Total number of LEDs in your WS281x strip
          </p>
        </label>
        <label class="flex flex-col gap-1.5">
          <span class="text-slate-700 text-sm font-medium leading-normal">GPIO Pin</span>
          <select
            id="dwLedGpioPin"
            class="form-select flex w-full min-w-0 resize-none overflow-hidden rounded-lg text-slate-900 focus:outline-0 focus:ring-2 focus:ring-sky-500 border border-slate-300 bg-white focus:border-sky-500 h-10 px-4 text-base font-normal leading-normal transition-colors"
          >
            <option value="12">GPIO 12 (PWM0)</option>
            <option value="13">GPIO 13 (PWM1)</option>
            <option value="18">GPIO 18 (PWM0)</option>
            <option value="19">GPIO 19 (PWM1)</option>
          </select>
          <p class="text-xs text-slate-500">
            Select a PWM-capable GPIO pin for WS281x timing
          </p>
        </label>
        <label class="flex flex-col gap-1.5">
          <span class="text-slate-700 text-sm font-medium leading-normal">Pixel Color Order</span>
          <select
            id="dwLedPixelOrder"
            class="form-select flex w-full min-w-0 resize-none overflow-hidden rounded-lg text-slate-900 focus:outline-0 focus:ring-2 focus:ring-sky-500 border border-slate-300 bg-white focus:border-sky-500 h-10 px-4 text-base font-normal leading-normal transition-colors"
          >
            <optgroup label="RGB Strips (3-channel)">
              <option value="GRB" selected>GRB - WS2812/WS2812B (most common)</option>
              <option value="RGB">RGB - WS2815/WS2811 and some variants</option>
              <option value="BGR">BGR - Some WS2811 variants</option>
              <option value="RBG">RBG - Rare variant</option>
              <option value="GBR">GBR - Rare variant</option>
              <option value="BRG">BRG - Rare variant</option>
            </optgroup>
            <optgroup label="RGBW Strips (4-channel)">
              <option value="GRBW">GRBW - SK6812 RGBW (most common)</option>
              <option value="RGBW">RGBW - SK6812 RGBW variant</option>
            </optgroup>
          </select>
          <p class="text-xs text-slate-500">
            Most WS2812B strips use GRB. SK6812 RGBW strips typically use GRBW. If colors appear wrong, try different orders.
          </p>
        </label>
      </div>

      <!-- Save Button -->
      <button
        id="saveLedConfig"
        class="flex items-center justify-center gap-2 w-full sm:w-auto cursor-pointer rounded-lg h-10 px-4 bg-sky-600 hover:bg-sky-700 text-white text-sm font-medium leading-normal tracking-[0.015em] transition-colors"
      >
        <span class="material-icons text-lg">save</span>
        <span class="truncate">Save LED Configuration</span>
      </button>
    </div>
  </section>

  <!-- Ball Tracking LED Section -->
  <section id="ballTrackingSection" class="bg-white rounded-xl shadow-sm overflow-hidden">
    <h2
      class="text-slate-800 text-xl sm:text-2xl font-semibold leading-tight tracking-[-0.01em] px-6 py-4 border-b border-slate-200"
    >
      Ball Tracking LEDs
    </h2>
    <div class="px-6 py-5 space-y-6">
      <!-- Info Box -->
      <div class="bg-blue-50 border border-blue-200 rounded-lg p-3">
        <div class="flex items-start gap-2">
          <span class="material-icons text-blue-600 text-base">info</span>
          <div class="text-xs text-blue-700">
            <p class="font-medium text-blue-800">Track Ball Position with LEDs</p>
            <p class="mt-1">Illuminate LEDs that follow the ball bearing's movement around the table in real-time. Requires DW LEDs (local GPIO) configuration.</p>
          </div>
        </div>
      </div>

      <!-- Enable Ball Tracking -->
      <div class="flex items-center justify-between">
        <div class="flex-1">
          <h3 class="text-slate-700 text-base font-medium leading-normal">Enable Ball Tracking</h3>
          <p class="text-xs text-slate-500 mt-1">
            Turn on LED tracking of ball bearing position
          </p>
        </div>
        <label class="switch">
          <input type="checkbox" id="ballTrackingEnabled">
          <span class="slider round"></span>
        </label>
      </div>

      <!-- Tracking Settings (shown when enabled) -->
      <div id="ballTrackingSettings" class="space-y-4" style="display: none;">
        <!-- Tracking Mode -->
        <label class="flex flex-col gap-1.5">
          <span class="text-slate-700 text-sm font-medium leading-normal">Tracking Mode</span>
          <select
            id="ballTrackingMode"
            class="form-select resize-none overflow-hidden rounded-lg text-slate-900 focus:outline-0 focus:ring-2 focus:ring-sky-500 border border-slate-300 bg-white focus:border-sky-500 h-10 px-4 text-base font-medium leading-normal transition-colors"
          >
            <option value="disabled">Disabled</option>
            <option value="playing_only">Only During Pattern Playback</option>
            <option value="enabled">Always On</option>
          </select>
          <p class="text-xs text-slate-500 mt-1">
            Control when ball tracking is active
          </p>
        </label>

        <!-- Calibration Button -->
        <div class="bg-amber-50 border border-amber-200 rounded-lg p-4">
          <h4 class="text-slate-800 text-sm font-medium flex items-center gap-2">
            <span class="material-icons text-amber-600 text-base">tune</span>
            LED Alignment Calibration
          </h4>
          <p class="text-xs text-slate-600 mt-1 mb-3">
            Calibrate which LED corresponds to the 0° position on your table
          </p>
          <button
            id="openCalibrationWizard"
            class="flex items-center justify-center gap-2 cursor-pointer rounded-lg h-10 px-4 bg-amber-600 hover:bg-amber-700 text-white text-sm font-medium leading-normal tracking-[0.015em] transition-colors"
          >
            <span class="material-icons text-lg">play_arrow</span>
            <span class="truncate">Start Calibration Wizard</span>
          </button>
        </div>

        <!-- Grid of Settings -->
        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
          <!-- LED Spread -->
          <label class="flex flex-col gap-1.5">
            <span class="text-slate-700 text-sm font-medium leading-normal">LED Spread</span>
            <input
              id="ballTrackingSpread"
              type="range"
              min="1"
              max="10"
              value="3"
              class="w-full h-2 bg-slate-200 rounded-lg appearance-none cursor-pointer"
            />
            <div class="flex justify-between text-xs text-slate-500">
              <span>1 LED</span>
              <span id="ballTrackingSpreadValue">3 LEDs</span>
              <span>10 LEDs</span>
            </div>
            <p class="text-xs text-slate-500">
              Number of adjacent LEDs to light up
            </p>
          </label>

          <!-- Look-back Delay -->
          <label class="flex flex-col gap-1.5">
            <span class="text-slate-700 text-sm font-medium leading-normal">Look-back Delay</span>
            <input
              id="ballTrackingLookback"
              type="range"
              min="0"
              max="15"
              value="5"
              class="w-full h-2 bg-slate-200 rounded-lg appearance-none cursor-pointer"
            />
            <div class="flex justify-between text-xs text-slate-500">
              <span>0</span>
              <span id="ballTrackingLookbackValue">5 coords</span>
              <span>15</span>
            </div>
            <p class="text-xs text-slate-500">
              Compensate for motion lag by tracking past position
            </p>
          </label>

          <!-- Brightness -->
          <label class="flex flex-col gap-1.5">
            <span class="text-slate-700 text-sm font-medium leading-normal">Brightness</span>
            <input
              id="ballTrackingBrightness"
              type="range"
              min="0"
              max="100"
              value="50"
              class="w-full h-2 bg-slate-200 rounded-lg appearance-none cursor-pointer"
            />
            <div class="flex justify-between text-xs text-slate-500">
              <span>0%</span>
              <span id="ballTrackingBrightnessValue">50%</span>
              <span>100%</span>
            </div>
          </label>

          <!-- Color Picker -->
          <label class="flex flex-col gap-1.5">
            <span class="text-slate-700 text-sm font-medium leading-normal">Tracking Color</span>
            <input
              id="ballTrackingColor"
              type="color"
              value="#ffffff"
              class="w-full h-10 rounded-lg cursor-pointer border border-slate-300"
            />
            <p class="text-xs text-slate-500">
              Color of tracking LEDs
            </p>
          </label>
        </div>

        <!-- Save Button -->
        <div class="flex justify-end">
          <button
            id="saveBallTrackingConfig"
            class="flex items-center justify-center gap-2 min-w-[140px] cursor-pointer rounded-lg h-10 px-4 bg-sky-600 hover:bg-sky-700 text-white text-sm font-medium leading-normal tracking-[0.015em] transition-colors"
          >
            <span class="material-icons text-lg">save</span>
            <span class="truncate">Save Settings</span>
          </button>
        </div>
      </div>
    </div>
  </section>

  <!-- Calibration Wizard Modal -->
  <div id="calibrationModal" class="fixed inset-0 bg-black bg-opacity-50 z-50 hidden flex items-center justify-center p-4">
    <div class="bg-white rounded-xl shadow-2xl max-w-2xl w-full max-h-[90vh] overflow-y-auto">
      <!-- Modal Header -->
      <div class="flex items-center justify-between px-6 py-4 border-b border-slate-200">
        <h3 class="text-slate-900 text-xl font-semibold">Ball Tracking Calibration</h3>
        <button id="closeCalibrationModal" class="text-slate-400 hover:text-slate-600">
          <span class="material-icons">close</span>
        </button>
      </div>

      <!-- Modal Content -->
      <div class="px-6 py-6">
        <!-- Step Indicator -->
        <div class="flex items-center justify-between mb-6">
          <div class="flex items-center gap-2">
            <div id="step1Indicator" class="flex items-center justify-center w-8 h-8 rounded-full bg-sky-600 text-white text-sm font-medium">1</div>
            <div class="w-16 h-1 bg-slate-200" id="line1"></div>
            <div id="step2Indicator" class="flex items-center justify-center w-8 h-8 rounded-full bg-slate-200 text-slate-500 text-sm font-medium">2</div>
            <div class="w-16 h-1 bg-slate-200" id="line2"></div>
            <div id="step3Indicator" class="flex items-center justify-center w-8 h-8 rounded-full bg-slate-200 text-slate-500 text-sm font-medium">3</div>
          </div>
        </div>

        <!-- Step 1: Move to Reference -->
        <div id="calibrationStep1" class="space-y-4">
          <h4 class="text-lg font-medium text-slate-800">Step 1: Move to Reference Position</h4>
          <p class="text-sm text-slate-600">
            We'll reset theta and move the ball to the reference position (0°, perimeter). This will help us identify which LED corresponds to the 0° position.
          </p>
          <button
            id="startCalibrationMove"
            class="flex items-center justify-center gap-2 w-full cursor-pointer rounded-lg h-12 px-4 bg-sky-600 hover:bg-sky-700 text-white text-base font-medium transition-colors"
          >
            <span class="material-icons text-xl">navigation</span>
            <span>Move Ball to Reference Position</span>
          </button>
          <div id="calibrationMoveStatus" class="hidden text-sm text-slate-600 text-center">
            <span class="inline-block animate-spin material-icons text-sky-600">refresh</span>
            Moving to reference position...
          </div>
        </div>

        <!-- Step 2: Identify LED -->
        <div id="calibrationStep2" class="space-y-4 hidden">
          <h4 class="text-lg font-medium text-slate-800">Step 2: Identify LED Position</h4>
          <p class="text-sm text-slate-600 mb-4">
            The ball is now at the 0° reference position (perimeter). Click on the LED that is at this position in the circular diagram below.
          </p>
          <!-- LED Circle Visualization -->
          <div class="flex justify-center my-6">
            <svg id="ledCircle" viewBox="0 0 400 400" class="w-full max-w-md">
              <!-- Circle representing LED strip -->
              <circle cx="200" cy="200" r="150" fill="none" stroke="#e2e8f0" stroke-width="2"/>
              <!-- 0° marker (East) -->
              <line x1="350" y1="200" x2="370" y2="200" stroke="#0c7ff2" stroke-width="3"/>
              <text x="380" y="205" fill="#0c7ff2" font-size="14" font-weight="bold">0°</text>
              <!-- LEDs will be added here by JavaScript -->
            </svg>
          </div>
          <p id="selectedLedInfo" class="text-sm text-center text-slate-600">
            No LED selected
          </p>
        </div>

        <!-- Step 3: Test Direction -->
        <div id="calibrationStep3" class="space-y-4 hidden">
          <h4 class="text-lg font-medium text-slate-800">Step 3: Test Direction</h4>
          <p class="text-sm text-slate-600 mb-4">
            We'll move the ball to 90° to test LED direction. Watch which way the LEDs move.
          </p>
          <button
            id="testDirection"
            class="flex items-center justify-center gap-2 w-full cursor-pointer rounded-lg h-12 px-4 bg-sky-600 hover:bg-sky-700 text-white text-base font-medium transition-colors"
          >
            <span class="material-icons text-xl">rotate_right</span>
            <span>Move to 90° and Test</span>
          </button>
          <div id="directionTestStatus" class="hidden text-sm text-slate-600 text-center">
            <span class="inline-block animate-spin material-icons text-sky-600">refresh</span>
            Testing direction...
          </div>
          <div id="directionQuestion" class="hidden space-y-4 mt-4">
            <p class="text-sm text-slate-700 font-medium text-center">Did the LED move clockwise?</p>
            <div class="grid grid-cols-2 gap-4">
              <button
                id="directionClockwise"
                class="flex items-center justify-center gap-2 cursor-pointer rounded-lg h-12 px-4 bg-green-600 hover:bg-green-700 text-white text-base font-medium transition-colors"
              >
                <span class="material-icons">check_circle</span>
                <span>Yes, Clockwise</span>
              </button>
              <button
                id="directionCounterClockwise"
                class="flex items-center justify-center gap-2 cursor-pointer rounded-lg h-12 px-4 bg-orange-600 hover:bg-orange-700 text-white text-base font-medium transition-colors"
              >
                <span class="material-icons">sync</span>
                <span>No, Reverse It</span>
              </button>
            </div>
          </div>
        </div>

        <!-- Completion -->
        <div id="calibrationComplete" class="space-y-4 hidden text-center">
          <div class="flex justify-center">
            <div class="w-20 h-20 rounded-full bg-green-100 flex items-center justify-center">
              <span class="material-icons text-green-600 text-5xl">check_circle</span>
            </div>
          </div>
          <h4 class="text-lg font-medium text-slate-800">Calibration Complete!</h4>
          <p class="text-sm text-slate-600">
            LED alignment has been calibrated. Ball tracking is now ready to use.
          </p>
          <div class="bg-slate-50 rounded-lg p-4 text-left">
            <p class="text-xs text-slate-600">
              <strong>LED Offset:</strong> <span id="finalLedOffset"></span><br>
              <strong>Direction:</strong> <span id="finalDirection"></span>
            </p>
          </div>
          <button
            id="closeCalibrationComplete"
            class="flex items-center justify-center gap-2 w-full cursor-pointer rounded-lg h-12 px-4 bg-sky-600 hover:bg-sky-700 text-white text-base font-medium transition-colors"
          >
            <span>Done</span>
          </button>
        </div>
      </div>
    </div>
  </div>

  <section class="bg-white rounded-xl shadow-sm overflow-hidden">
    <h2
      class="text-slate-800 text-xl sm:text-2xl font-semibold leading-tight tracking-[-0.01em] px-6 py-4 border-b border-slate-200"
    >
      Auto-play on Boot
    </h2>
    <div class="px-6 py-5 space-y-6">
      <div class="flex items-center justify-between">
        <div class="flex-1">
          <h3 class="text-slate-700 text-base font-medium leading-normal">Enable Auto-play on Boot</h3>
          <p class="text-xs text-slate-500 mt-1">
            Automatically start playing a selected playlist when the system boots up.
          </p>
        </div>
        <label class="switch">
          <input type="checkbox" id="auto_playModeToggle">
          <span class="slider round"></span>
        </label>
      </div>
      
      <div id="auto_playSettings" class="space-y-4" style="display: none;">
        <label class="flex flex-col gap-1.5">
          <span class="text-slate-700 text-sm font-medium leading-normal">Startup Playlist</span>
          <select
            id="auto_playPlaylistSelect"
            class="form-select flex-1 resize-none overflow-hidden rounded-lg text-slate-900 focus:outline-0 focus:ring-2 focus:ring-sky-500 border border-slate-300 bg-white focus:border-sky-500 h-10 placeholder:text-slate-400 px-4 text-base font-medium leading-normal transition-colors"
          >
            <option value="">Select a playlist...</option>
          </select>
          <p class="text-xs text-slate-500 mt-1">
            Choose which playlist to automatically play when the system starts.
          </p>
        </label>

        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
          <label class="flex flex-col gap-1.5">
            <span class="text-slate-700 text-sm font-medium leading-normal">Run Mode</span>
            <select
              id="auto_playRunModeSelect"
              class="form-select resize-none overflow-hidden rounded-lg text-slate-900 focus:outline-0 focus:ring-2 focus:ring-sky-500 border border-slate-300 bg-white focus:border-sky-500 h-10 placeholder:text-slate-400 px-4 text-base font-medium leading-normal transition-colors"
            >
              <option value="single">Single (play once)</option>
              <option value="loop">Loop (repeat forever)</option>
            </select>
            <p class="text-xs text-slate-500 mt-1">
              How to run the playlist when it finishes.
            </p>
          </label>

          <label class="flex flex-col gap-1.5">
            <span class="text-slate-700 text-sm font-medium leading-normal">Pause Between Patterns (seconds)</span>
            <input
              id="auto_playPauseTimeInput"
              type="number"
              min="0"
              step="0.5"
              class="form-input resize-none overflow-hidden rounded-lg text-slate-900 focus:outline-0 focus:ring-2 focus:ring-sky-500 border border-slate-300 bg-white focus:border-sky-500 h-10 placeholder:text-slate-400 px-4 text-base font-normal leading-normal transition-colors"
              placeholder="5.0"
            />
            <p class="text-xs text-slate-500 mt-1">
              Time to wait between each pattern (0 or more seconds).
            </p>
          </label>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
          <label class="flex flex-col gap-1.5">
            <span class="text-slate-700 text-sm font-medium leading-normal">Clear Pattern</span>
            <select
              id="auto_playClearPatternSelect"
              class="form-select resize-none overflow-hidden rounded-lg text-slate-900 focus:outline-0 focus:ring-2 focus:ring-sky-500 border border-slate-300 bg-white focus:border-sky-500 h-10 placeholder:text-slate-400 px-4 text-base font-medium leading-normal transition-colors"
            >
              <option value="none">None</option>
              <option value="adaptive">Adaptive</option>
              <option value="clear_from_in">Clear From Center</option>
              <option value="clear_from_out">Clear From Perimeter</option>
              <option value="clear_sideway">Clear Sideway</option>
              <option value="random">Random</option>
            </select>
            <p class="text-xs text-slate-500 mt-1">
              Pattern to run before each main pattern.
            </p>
          </label>

          <div class="flex items-center justify-between">
            <div class="flex-1">
              <h4 class="text-slate-700 text-sm font-medium leading-normal">Shuffle Playlist</h4>
              <p class="text-xs text-slate-500 mt-1">
                Randomize the order of patterns in the playlist.
              </p>
            </div>
            <label class="switch">
              <input type="checkbox" id="auto_playShuffleToggle">
              <span class="slider round"></span>
            </label>
          </div>
        </div>
      </div>
    </div>
  </section>
  <section class="bg-white rounded-xl shadow-sm overflow-hidden">
    <h2
      class="text-slate-800 text-xl sm:text-2xl font-semibold leading-tight tracking-[-0.01em] px-6 py-4 border-b border-slate-200"
    >
      Still Sands
    </h2>
    <div class="px-6 py-5 space-y-6">
      <div class="flex items-center justify-between">
        <div class="flex-1">
          <h3 class="text-slate-700 text-base font-medium leading-normal">Enable Still Sands</h3>
          <p class="text-xs text-slate-500 mt-1">
            Automatically bring the sands to rest during specified time periods.
          </p>
        </div>
        <label class="switch">
          <input type="checkbox" id="scheduledPauseToggle">
          <span class="slider round"></span>
        </label>
      </div>

      <div id="scheduledPauseSettings" class="space-y-4" style="display: none;">
        <!-- WLED Control Option -->
        <div class="bg-amber-50 rounded-lg p-4 border border-amber-200">
          <div class="flex items-center justify-between">
            <div class="flex-1">
              <h4 class="text-slate-800 text-sm font-medium flex items-center gap-2">
                <span class="material-icons text-amber-600 text-base">lightbulb</span>
                Control WLED Lights
              </h4>
              <p class="text-xs text-slate-600 mt-1">
                Turn off WLED lights during still periods for complete rest
              </p>
            </div>
            <label class="switch">
              <input type="checkbox" id="stillSandsWledControl">
              <span class="slider round"></span>
            </label>
          </div>
        </div>

        <div class="bg-slate-50 rounded-lg p-4 space-y-4">
          <div class="flex items-center justify-between">
            <h4 class="text-slate-800 text-base font-semibold">Still Periods</h4>
            <button
              id="addTimeSlotButton"
              class="flex items-center justify-center gap-2 cursor-pointer rounded-lg h-9 px-3 bg-sky-600 hover:bg-sky-700 text-white text-xs font-medium leading-normal tracking-[0.015em] transition-colors"
            >
              <span class="material-icons text-base">add</span>
              <span>Add Still Period</span>
            </button>
          </div>
          <p class="text-sm text-slate-600">
            Define time periods when the sands should rest in stillness. Patterns will resume automatically when still periods end.
          </p>

          <div id="timeSlotsContainer" class="space-y-3">
            <!-- Time slots will be dynamically added here -->
          </div>

          <div class="text-xs text-slate-500 bg-blue-50 border border-blue-200 rounded-lg p-3">
            <div class="flex items-start gap-2">
              <span class="material-icons text-blue-600 text-base">info</span>
              <div>
                <p class="font-medium text-blue-800">Important Notes:</p>
                <ul class="mt-1 space-y-1 text-blue-700">
                  <li>• Times are based on your system's local time zone</li>
                  <li>• Currently running patterns will pause immediately when entering a still period</li>
                  <li>• Patterns will resume automatically when exiting a still period</li>
                  <li>• Still periods that span midnight (e.g., 22:00 to 06:00) are supported</li>
                </ul>
              </div>
            </div>
          </div>
        </div>

        <div class="flex justify-end">
          <button
            id="savePauseSettings"
            class="flex items-center justify-center gap-2 min-w-[140px] cursor-pointer rounded-lg h-10 px-4 bg-sky-600 hover:bg-sky-700 text-white text-sm font-medium leading-normal tracking-[0.015em] transition-colors"
          >
            <span class="material-icons text-lg">save</span>
            <span class="truncate">Save Still Sands</span>
          </button>
        </div>
      </div>
    </div>
  </section>
  <section id="software-version-section" class="bg-white rounded-xl shadow-sm overflow-hidden">
    <h2
      class="text-slate-800 text-xl sm:text-2xl font-semibold leading-tight tracking-[-0.01em] px-6 py-4 border-b border-slate-200"
    >
      Software Version
    </h2>
    <div class="divide-y divide-slate-100">
      <div class="flex items-center gap-4 px-6 py-5">
        <div
          class="text-slate-600 flex items-center justify-center rounded-lg bg-slate-100 shrink-0 size-12"
        >
          <span class="material-icons text-3xl">terminal</span>
        </div>
        <div class="flex-1">
          <p class="text-slate-800 text-base font-medium leading-normal">
            Current Version
          </p>
          <p id="currentVersionText" class="text-slate-500 text-sm font-normal leading-normal">Loading...</p>
        </div>
      </div>
      <div class="flex items-center gap-4 px-6 py-5">
        <div
          class="text-slate-600 flex items-center justify-center rounded-lg bg-slate-100 shrink-0 size-12"
        >
          <span class="material-icons text-3xl">system_update</span>
        </div>
        <div class="flex-1">
          <p class="text-slate-800 text-base font-medium leading-normal">
            Latest Version
          </p>
          <p id="latestVersionText" class="text-slate-500 text-sm font-normal leading-normal">Checking...</p>
        </div>
        <button
          id="updateSoftware"
          class="flex items-center justify-center gap-1.5 min-w-[84px] cursor-pointer rounded-lg h-9 px-3 bg-gray-400 text-white text-xs font-medium leading-normal tracking-[0.015em] transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
          disabled
        >
          <span id="updateIcon" class="material-icons text-base">download</span>
          <span id="updateText" class="truncate">Update</span>
        </button>
      </div>
    </div>
  </section>
</div>
{% endblock %} {% block scripts %}
<script src="/static/js/settings.js"></script>
{% endblock %}