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

Dockerfile

@@ -1,6 +1,8 @@
 FROM nginx:alpine
 COPY default.conf /etc/nginx/conf.d/default.conf
 COPY ash.css /usr/share/nginx/html/ash.css
+COPY gruvbox.css /usr/share/nginx/html/gruvbox.css
+COPY config.js /usr/share/nginx/html/config.js
 COPY index.html /usr/share/nginx/html/index.html
 COPY noise.png /usr/share/nginx/html/noise.png
 EXPOSE 58881

config.js

@@ -0,0 +1,12 @@
+/* Application configuration
+ * debug      - Show debug panel (0/1)
+ * theme      - Color palette: 'ash' or 'gruvbox'
+ * units      - Measurement units: 'metric' or 'imperial'
+ * language   - UI language: 'de' or 'en'
+ */
+window.CONFIG = {
+    debug: 1,
+    theme: 'ash',
+    units: 'metric',
+    language: 'de'
+};

gruvbox.css

@@ -0,0 +1,77 @@
+/* Gruvbox color theme - alternative to Ash */
+
+:root {
+    /* Base surfaces (dark) */
+    --black: #1d2021;
+    --black-light: #282828;
+    --black-dark: #1d2021;
+
+    --dark: #282828;
+    --dark-light: #32302f;
+    --dark-dark: #1d2021;
+
+    --gray-darker: #3c3836;
+    --gray-darker-light: #45403d;
+    --gray-darker-dark: #32302f;
+
+    --gray-dark: #504945;
+    --gray-dark-light: #5a524c;
+    --gray-dark-dark: #3c3836;
+
+    --gray: #7c6f64;
+    --gray-light: #928374;
+    --gray-dark: #504945;
+
+    --gray-light: #928374;
+    --gray-light-light: #a89984;
+    --gray-light-dark: #7c6f64;
+
+    --stone: #a89984;
+    --stone-light: #bdae93;
+    --stone-dark: #928374;
+
+    --icon: #bdae93;
+    --icon-light: #d5c4a1;
+    --icon-dark: #a89984;
+
+    --bone: #ebdbb2;
+    --bone-light: #fbf1c7;
+    --bone-dark: #d5c4a1;
+
+    --chalk: #fbf1c7;
+    --chalk-light: #f9f5d7;
+    --chalk-dark: #ebdbb2;
+
+    /* Accent colors */
+    --orange: #fe8019;
+    --orange-light: #fea848;
+    --orange-dark: #d65d0e;
+
+    --yellow: #fabd2f;
+    --yellow-light: #fac74b;
+    --yellow-dark: #d79921;
+
+    --red: #fb4934;
+    --red-light: #fb6e54;
+    --red-dark: #cc241d;
+
+    --brown: #b16286;
+    --brown-light: #c6789c;
+    --brown-dark: #8f3f71;
+
+    --pink: #d3869b;
+    --pink-light: #e0a3b1;
+    --pink-dark: #b16286;
+
+    --green: #b8bb26;
+    --green-light: #c8d337;
+    --green-dark: #98971a;
+
+    --blue: #83a598;
+    --blue-light: #a0b8b0;
+    --blue-dark: #458588;
+
+    --purple: #b16286;
+    --purple-light: #c6789c;
+    --purple-dark: #8f3f71;
+}

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();