Date shown in the theme selector (#4)

hoel · Nov 21, 2025 · f9d224a · f9d224a
1 parent 96ae291
commit f9d224a
Showing 1 changed file with 59 additions and 10 deletions.
diff --git a/index.html b/index.html
@@ -48,13 +48,27 @@
             border: 1px solid rgba(255, 255, 255, 0.18);
             z-index: 1000;
             display: flex;
-            align-items: center;
+            flex-direction: column;
             gap: 10px;
             opacity: 0;
             pointer-events: none;
             transition: opacity 0.3s ease;
         }
 
+        .theme-selector-row {
+            display: flex;
+            align-items: center;
+            gap: 10px;
+        }
+
+        .theme-date-range {
+            color: rgba(255, 255, 255, 0.9);
+            font-size: 0.85rem;
+            text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
+            font-style: italic;
+            text-align: center;
+        }
+
         .theme-selector label {
             color: white;
             font-weight: bold;
@@ -626,15 +640,18 @@
 <body>
     <div class="theme-trigger-area"></div>
     <div class="theme-selector">
-        <label for="theme-dropdown">Theme:</label>
-        <select id="theme-dropdown">
-            <option value="auto">Auto (Date-based)</option>
-            <option value="default">Default</option>
-            <option value="halloween">Halloween</option>
-            <option value="movember">Movember</option>
-            <option value="christmas">Christmas</option>
-            <option value="saami">Sámi</option>
-        </select>
+        <div class="theme-selector-row">
+            <label for="theme-dropdown">Theme:</label>
+            <select id="theme-dropdown">
+                <option value="auto">Auto (Date-based)</option>
+                <option value="default">Default</option>
+                <option value="halloween">Halloween</option>
+                <option value="movember">Movember</option>
+                <option value="christmas">Christmas</option>
+                <option value="saami">Sámi</option>
+            </select>
+        </div>
+        <div class="theme-date-range" id="theme-date-info"></div>
     </div>
 
     <div class="clocks-container">
@@ -1579,6 +1596,34 @@
         // Check for theme change every hour
         setInterval(applyTheme, 1000 * 60 * 60);
 
+        // Function to update theme date range display
+        function updateThemeDateInfo() {
+            const themeDropdown = document.getElementById('theme-dropdown');
+            const dateInfoElement = document.getElementById('theme-date-info');
+            const selectedThemeKey = themeDropdown.value;
+
+            if (selectedThemeKey === 'auto') {
+                dateInfoElement.textContent = 'Basert på dato';
+                return;
+            }
+
+            const theme = themes[selectedThemeKey];
+            if (!theme.dateRange) {
+                dateInfoElement.textContent = 'Resten av året';
+                return;
+            }
+
+            const monthNames = ['jan', 'feb', 'mar', 'apr', 'mai', 'jun', 
+                               'jul', 'aug', 'sep', 'okt', 'nov', 'des'];
+
+            const startMonth = monthNames[theme.dateRange.startMonth];
+            const endMonth = monthNames[theme.dateRange.endMonth];
+            const startDay = theme.dateRange.startDay;
+            const endDay = theme.dateRange.endDay;
+
+            dateInfoElement.textContent = `${startDay}. ${startMonth} - ${endDay}. ${endMonth}`;
+        }
+
         // Initialize theme dropdown
         document.addEventListener('DOMContentLoaded', function() {
             const themeDropdown = document.getElementById('theme-dropdown');
@@ -1587,11 +1632,15 @@
             const savedTheme = localStorage.getItem('selectedTheme') || 'auto';
             themeDropdown.value = savedTheme;
 
+            // Update date info on load
+            updateThemeDateInfo();
+
             // Handle theme selection
             themeDropdown.addEventListener('change', function() {
                 const selectedTheme = this.value;
                 localStorage.setItem('selectedTheme', selectedTheme);
                 applyTheme();
+                updateThemeDateInfo();
             });
         });