From 28c282f72ef44241a3b1b46cc81f3cc1921460e0 Mon Sep 17 00:00:00 2001 From: Ole Kristian Hoel Date: Fri, 21 Nov 2025 14:20:50 +0100 Subject: [PATCH] Date shown in the theme selector --- index.html | 69 ++++++++++++++++++++++++++++++++++++++++++++++-------- 1 file changed, 59 insertions(+), 10 deletions(-) diff --git a/index.html b/index.html index 45306b8..0ca3d55 100644 --- 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 @@
- - +
+ + +
+
@@ -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(); }); });