Add config.js, gruvbox.css, debug panel dropdowns

index.html

@@ -4,7 +4,16 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Vanta Clouds</title>
-    <link rel="stylesheet" href="ash.css">
+    <script src="config.js"></script>
+    <script>
+        (function() {
+            var theme = (window.CONFIG && window.CONFIG.theme) || 'ash';
+            var themeMap = { ash: 'ash.css', gruvbox: 'gruvbox.css' };
+            var css = document.getElementById('theme-css');
+            if (css) css.href = themeMap[theme] || themeMap.ash;
+        })();
+    </script>
+    <link id="theme-css" rel="stylesheet" href="ash.css">
     <script src="https://cdn.jsdelivr.net/npm/suncalc@1.9.0/suncalc.js"></script>
     <style>
         html, body { margin: 0; padding: 0; overflow: hidden; width: 100%; height: 100%; font-family: monospace; }
@@ -52,6 +61,20 @@
         .debug-content.collapsed {
             display: none;
         }
+        .debug-controls {
+            display: flex;
+            gap: 5px;
+            margin-bottom: 8px;
+        }
+        .debug-select {
+            background: var(--dark);
+            color: var(--bone);
+            border: 1px solid var(--border);
+            border-radius: 2px;
+            padding: 2px 4px;
+            font-family: monospace;
+            font-size: 0.9em;
+        }
         .debug-section {
             font-size: 1em;
             color: var(--icon);
@@ -284,8 +307,22 @@
 <body>
     <div id="vanta"></div>
     <div id="debug-panel">
-        <div class="debug-title expanded" onclick="toggleDebugPanel()"><span>DEBUG - Palette: Ash</span><span class="debug-title-toggle" id="debug-toggle-icon">▼</span></div>
+        <div class="debug-title expanded" onclick="toggleDebugPanel()"><span>DEBUG - Palette: <span id="dbg-palette-name">Ash</span></span><span class="debug-title-toggle" id="debug-toggle-icon">▼</span></div>
         <div id="debug-content" class="debug-content">
+            <div class="debug-controls">
+                <select id="dbg-theme-select" class="debug-select" onchange="setDebugTheme(this.value)">
+                    <option value="ash">Ash</option>
+                    <option value="gruvbox">Gruvbox</option>
+                </select>
+                <select id="dbg-units-select" class="debug-select" onchange="setDebugUnits(this.value)">
+                    <option value="metric">°C, km/h</option>
+                    <option value="imperial">°F, mph</option>
+                </select>
+                <select id="dbg-language-select" class="debug-select" onchange="setDebugLanguage(this.value)">
+                    <option value="de">DE</option>
+                    <option value="en">EN</option>
+                </select>
+            </div>
             <div class="debug-row"><span class="debug-label">Time:</span> <span id="dbg-time">--</span></div>
             <div class="debug-row"><span class="debug-label">Day%:</span> <span id="dbg-day">--</span></div>
             <div class="debug-row"><span class="debug-label">Weather:</span> <span id="dbg-weather">--</span></div>
@@ -1151,6 +1188,22 @@ var weatherThemes = {
             }
         }
 
+        function setDebugTheme(theme) {
+            var themeMap = { ash: 'ash.css', gruvbox: 'gruvbox.css' };
+            var css = document.getElementById('theme-css');
+            if (css && themeMap[theme]) css.href = themeMap[theme];
+            document.getElementById('dbg-palette-name').textContent = theme.charAt(0).toUpperCase() + theme.slice(1);
+            window.CONFIG.theme = theme;
+        }
+
+        function setDebugUnits(units) {
+            window.CONFIG.units = units;
+        }
+
+        function setDebugLanguage(lang) {
+            window.CONFIG.language = lang;
+        }
+
         function updateDebug(t, palette, vantaColors, themeName, realDayProgress) {
             var now = new Date();
             var hh = now.getHours(), mm = now.getMinutes(), ss = now.getSeconds();