Skip to content

Date shown in the theme selector #4

Merged
merged 1 commit into from
Nov 21, 2025
+59 −10
Merged

Date shown in the theme selector #4

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
69 changes: 59 additions & 10 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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">
Expand Down Expand Up @@ -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');
Expand All @@ -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();
});
});

Expand Down