From a3deeff4871f66e42326e5885e4b5586801f3015 Mon Sep 17 00:00:00 2001
From: Richard Zink <Richard Zink>
Date: Wed, 7 Oct 2026 10:00:16 +0200
Subject: [PATCH] Add debug panel with weather, theme, colors and transition
 info

---
 index.html | 124 +++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 124 insertions(+)

diff --git a/index.html b/index.html
index 60bdc6f..14c703d 100644
--- a/index.html
+++ b/index.html
@@ -8,6 +8,65 @@
     <style>
         html, body { margin: 0; padding: 0; overflow: hidden; width: 100%; height: 100%; font-family: monospace; }
         #vanta { width: 100vw; height: 100vh; position: fixed; top: 0; left: 0; }
+        #debug-panel {
+            position: fixed;
+            bottom: 2vh;
+            left: 2vh;
+            width: 260px;
+            background: rgba(28, 27, 31, 0.85);
+            border: 1px solid rgba(230, 223, 209, 0.3);
+            border-radius: 0.6vh;
+            padding: 1vh 1vw;
+            color: #e6dfd1;
+            font-family: monospace;
+            font-size: 10px;
+            line-height: 1.4;
+            z-index: 9999;
+        }
+        .debug-title {
+            font-size: 12px;
+            font-weight: bold;
+            color: #e0914f;
+            border-bottom: 1px solid rgba(230, 223, 209, 0.3);
+            padding-bottom: 4px;
+            margin-bottom: 6px;
+        }
+        .debug-section {
+            font-size: 10px;
+            color: #b0a89a;
+            margin-top: 6px;
+            margin-bottom: 2px;
+        }
+        .debug-row {
+            display: flex;
+            align-items: center;
+            gap: 6px;
+            padding: 1px 0;
+        }
+        .debug-label {
+            color: #b0a89a;
+            min-width: 80px;
+        }
+        .libel {
+            color: #b0a89a;
+            min-width: 50px;
+        }
+        .hex {
+            color: #e6dfd1;
+            font-size: 10px;
+            font-family: monospace;
+        }
+        .swatch {
+            width: 14px;
+            height: 14px;
+            border: 1px solid #999187;
+            border-radius: 2px;
+        }
+        @media (orientation: portrait) and (max-width: 700px) {
+            #debug-panel {
+                display: none;
+            }
+        }
         #info-panel {
             position: fixed;
             top: 2vh;
@@ -158,6 +217,31 @@
 </head>
 <body>
     <div id="vanta"></div>
+    <div id="debug-panel">
+        <div class="debug-title">DEBUG</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>
+        <div class="debug-row"><span class="debug-label">Theme:</span> <span id="dbg-theme">--</span></div>
+        <div class="debug-row"><span class="debug-label">Speed:</span> <span id="dbg-speed">--</span></div>
+        <div class="debug-row"><span class="debug-label">Transition:</span> <span id="dbg-trans">--</span></div>
+        <div class="debug-section">Effective theme</div>
+        <div class="debug-row"><span class="libel">sky</span> <div class="swatch" id="dbg-t-sky"></div> <span class="hex" id="dbg-h-sky">--</span></div>
+        <div class="debug-row"><span class="libel">cloud</span> <div class="swatch" id="dbg-t-cloud"></div> <span class="hex" id="dbg-h-cloud">--</span></div>
+        <div class="debug-row"><span class="libel">shadow</span> <div class="swatch" id="dbg-t-cloudShadow"></div> <span class="hex" id="dbg-h-cloudShadow">--</span></div>
+        <div class="debug-row"><span class="libel">sun</span> <div class="swatch" id="dbg-t-sun"></div> <span class="hex" id="dbg-h-sun">--</span></div>
+        <div class="debug-row"><span class="libel">glare</span> <div class="swatch" id="dbg-t-sunGlare"></div> <span class="hex" id="dbg-h-sunGlare">--</span></div>
+        <div class="debug-row"><span class="libel">light</span> <div class="swatch" id="dbg-t-sunLight"></div> <span class="hex" id="dbg-h-sunLight">--</span></div>
+        <div class="debug-row"><span class="libel">bg</span> <div class="swatch" id="dbg-t-bg"></div> <span class="hex" id="dbg-h-bg">--</span></div>
+        <div class="debug-section">Vanta colors</div>
+        <div class="debug-row"><span class="libel">sky</span> <div class="swatch" id="dbg-v-sky"></div> <span class="hex" id="dbg-vh-sky">--</span></div>
+        <div class="debug-row"><span class="libel">cloud</span> <div class="swatch" id="dbg-v-cloud"></div> <span class="hex" id="dbg-vh-cloud">--</span></div>
+        <div class="debug-row"><span class="libel">shadow</span> <div class="swatch" id="dbg-v-cloudShadow"></div> <span class="hex" id="dbg-vh-cloudShadow">--</span></div>
+        <div class="debug-row"><span class="libel">sun</span> <div class="swatch" id="dbg-v-sun"></div> <span class="hex" id="dbg-vh-sun">--</span></div>
+        <div class="debug-row"><span class="libel">glare</span> <div class="swatch" id="dbg-v-sunGlare"></div> <span class="hex" id="dbg-vh-sunGlare">--</span></div>
+        <div class="debug-row"><span class="libel">light</span> <div class="swatch" id="dbg-v-sunLight"></div> <span class="hex" id="dbg-vh-sunLight">--</span></div>
+        <div class="debug-row"><span class="libel">bg</span> <div class="swatch" id="dbg-v-bg"></div> <span class="hex" id="dbg-vh-bg">--</span></div>
+    </div>
     <div id="info-panel">
         <svg id="analog-clock" viewBox="0 0 280 280">
             <!-- Clock face -->
@@ -869,6 +953,45 @@ var weatherThemes = {
             return (now.getTime() - startOfDay.getTime()) / 86400000;
         }
 
+        function updateDebug(t, palette, vantaColors, themeName) {
+            var now = new Date();
+            var hh = now.getHours(), mm = now.getMinutes(), ss = now.getSeconds();
+            document.getElementById('dbg-time').textContent =
+                (hh < 10 ? '0' : '') + hh + ':' + (mm < 10 ? '0' : '') + mm + ':' + (ss < 10 ? '0' : '') + ss;
+            document.getElementById('dbg-day').textContent = (t * 100).toFixed(1) + '%';
+            document.getElementById('dbg-weather').textContent =
+                currentWeatherCode + ' (' + (weatherThemes[themeName] ? themeName : '?') + ')';
+            document.getElementById('dbg-theme').textContent = themeName || '-';
+            document.getElementById('dbg-speed').textContent = currentThemeSpeed.toFixed(2);
+
+            var elapsed = Date.now() - transitionStartTime;
+            var transPct = targetThemeColors ? Math.min(100, (elapsed / TRANSITION_DURATION) * 100) : 100;
+            document.getElementById('dbg-trans').textContent = transPct.toFixed(0) + '%';
+
+            var themeColors = getEffectiveThemeColors();
+            if (themeColors) {
+                var keys = ['skyColor', 'cloudColor', 'cloudShadowColor', 'sunColor', 'sunGlareColor', 'sunlightColor', 'backgroundColor'];
+                var keyMap = {skyColor: 'sky', cloudColor: 'cloud', cloudShadowColor: 'cloudShadow', sunColor: 'sun', sunGlareColor: 'sunGlare', sunlightColor: 'sunLight', backgroundColor: 'bg'};
+                for (var i = 0; i < keys.length; i++) {
+                    var k = keys[i];
+                    var kk = keyMap[k];
+                    var c = themeColors[k];
+                    document.getElementById('dbg-t-' + kk).style.backgroundColor = '#' + ('00000' + c.toString(16)).slice(-6);
+                    document.getElementById('dbg-h-' + kk).textContent = '#' + ('00000' + c.toString(16)).slice(-6);
+                }
+            }
+
+            if (vantaColors) {
+                var vKeys = ['sky', 'cloud', 'cloudShadow', 'sun', 'sunGlare', 'sunLight', 'bg'];
+                for (var j = 0; j < vKeys.length; j++) {
+                    var vk = vKeys[j];
+                    var vc = vantaColors[vk];
+                    document.getElementById('dbg-v-' + vk).style.backgroundColor = '#' + ('00000' + vc.toString(16)).slice(-6);
+                    document.getElementById('dbg-vh-' + vk).textContent = '#' + ('00000' + vc.toString(16)).slice(-6);
+                }
+            }
+        }
+
         function animate() {
             var t = getCurrentDayProgress();
             var c = getColor(t);
@@ -884,6 +1007,7 @@ var weatherThemes = {
                 speed: currentThemeSpeed
             });
             document.body.style.backgroundColor = '#' + ('00000' + c.bg.toString(16)).slice(-6);
+            updateDebug(t, null, c, currentWeatherThemeName);
             requestAnimationFrame(animate);
         }