@@ -1280,6 +1360,39 @@
second: 'linear-gradient(to bottom, #ffd700, #ffed4e, #ffd700)' // Gold
}
},
+ saami: {
+ /*
+ Sámi theme by on@ntnu.no
+ */
+ dateRange: { startMonth: 1, startDay: 1, endMonth: 1, endDay: 28 }, // Feb 1-28
+ clockFace: 'clock-face-saami.png',
+ clockFaceScale: 'cover',
+ background: 'saami-background_16-9.png',
+ backgroundSize: 'cover',
+ backgroundRepeat: 'no-repeat',
+ backgroundPosition: 'center',
+ backgroundAttachment: 'fixed',
+ textColor: '#d7ffa6',
+ centerDotColor: '#d7ffa6',
+ centerDotBorder: '#FFF',
+ handColors: {
+ hour: '#FFF',
+ minute: '#FFF',
+ second: '#FF3300'
+ },
+ clockContainer: {
+ background: 'rgba(0, 0, 0, 0.15)',
+ backdropFilter: 'blur(0px)',
+ borderRadius: '20px',
+ border: '1px solid rgba(215, 255, 166, 0.5)',
+ boxShadow: '0 8px 32px rgba(215, 255, 166, 0.3)'
+ },
+ cityNames: {
+ trondheim: 'Tråante',
+ alesund: 'Ålesund',
+ gjovik: 'Gjøvik'
+ }
+ },
default: {
clockFace: 'clock-face.png',
clockFaceScale: 'cover',
@@ -1299,6 +1412,13 @@
};
function getCurrentTheme() {
+ // Check if user has manually selected a theme
+ const selectedTheme = localStorage.getItem('selectedTheme');
+ if (selectedTheme && selectedTheme !== 'auto') {
+ return themes[selectedTheme] || themes.default;
+ }
+
+ // Otherwise use date-based automatic theme selection
const today = new Date();
const month = today.getMonth(); // 0-11
const day = today.getDate();
@@ -1362,6 +1482,45 @@
element.style.boxShadow = handGlow;
});
+ // Apply clock container styling if specified in theme
+ const defaultContainerStyles = {
+ background: 'rgba(255, 255, 255, 0.1)',
+ backdropFilter: 'blur(10px)',
+ borderRadius: '20px',
+ padding: '30px',
+ boxShadow: '0 8px 32px rgba(31, 38, 135, 0.37)',
+ border: '1px solid rgba(255, 255, 255, 0.18)'
+ };
+
+ const containerStyles = theme.clockContainer || {};
+ document.querySelectorAll('.clock-container').forEach(element => {
+ // Apply each style, using theme value if provided, otherwise use default
+ element.style.background = containerStyles.background || defaultContainerStyles.background;
+ element.style.backdropFilter = containerStyles.backdropFilter || defaultContainerStyles.backdropFilter;
+ element.style.borderRadius = containerStyles.borderRadius || defaultContainerStyles.borderRadius;
+ element.style.padding = containerStyles.padding || defaultContainerStyles.padding;
+ element.style.boxShadow = containerStyles.boxShadow || defaultContainerStyles.boxShadow;
+ element.style.border = containerStyles.border || defaultContainerStyles.border;
+ });
+
+ // Apply city name overrides if specified in theme
+ if (theme.cityNames) {
+ Object.keys(theme.cityNames).forEach(cityKey => {
+ const cityNameElement = document.querySelector(`#clock-${cityKey}`).closest('.clock-container').querySelector('.city-name');
+ if (cityNameElement) {
+ cityNameElement.textContent = theme.cityNames[cityKey];
+ }
+ });
+ } else {
+ // Reset to default city names if no override
+ Object.keys(clocks).forEach(cityKey => {
+ const cityNameElement = document.querySelector(`#clock-${cityKey}`).closest('.clock-container').querySelector('.city-name');
+ if (cityNameElement) {
+ cityNameElement.textContent = clocks[cityKey].cityName.toUpperCase();
+ }
+ });
+ }
+
// Update CSS for clock face image (pseudo-element)
const existingStyle = document.getElementById('theme-style');
if (existingStyle) {
@@ -1384,6 +1543,31 @@
// Check for theme change every hour
setInterval(applyTheme, 1000 * 60 * 60);
+ // Initialize theme dropdown
+ document.addEventListener('DOMContentLoaded', function() {
+ const themeDropdown = document.getElementById('theme-dropdown');
+ const themeSelector = document.querySelector('.theme-selector');
+
+ // Check if mode=test is in the URL
+ const urlParams = new URLSearchParams(window.location.search);
+ const mode = urlParams.get('mode');
+
+ if (mode === 'test') {
+ themeSelector.classList.add('visible');
+ }
+
+ // Load saved theme preference
+ const savedTheme = localStorage.getItem('selectedTheme') || 'auto';
+ themeDropdown.value = savedTheme;
+
+ // Handle theme selection
+ themeDropdown.addEventListener('change', function() {
+ const selectedTheme = this.value;
+ localStorage.setItem('selectedTheme', selectedTheme);
+ applyTheme();
+ });
+ });
+
// Initialize weather effects with default values first
initializeWeather();
diff --git a/saami-background_16-9.png b/saami-background_16-9.png
new file mode 100644
index 0000000..dc1dfb1
Binary files /dev/null and b/saami-background_16-9.png differ