first rel

seasonals copy.js

@@ -19,11 +19,11 @@ document.addEventListener('DOMContentLoaded', () => {
     };
 
     // Dynamisch Klasse des "seasonals"-Divs ändern
-    const seasonalDiv = document.querySelector('.seasonals');
+    const seasonalDiv = document.querySelector('.seasonals-container');
     if (seasonalDiv) {
         seasonalDiv.className = currentTheme; // Setzt die Klasse auf z. B. "snowflakes"
     } else {
-        console.error('Kein Element mit der Klasse "seasonals" gefunden.');
+        console.error('Kein Element mit der Klasse "seasonals-container" gefunden.');
     }
 
     // Prüfen, ob das aktuelle Theme verfügbar ist

seasonals.js

@@ -9,48 +9,81 @@ class SeasonalThemes {
         const date = new Date();
         const month = date.getMonth();
 
-        // Beispielhafte Theme-Zuordnung
+        // theme logic
-        if (month === 11 || month === 0 || month === 1) return 'winter'; // Dezember, Januar, Februar
+        if (month === 11 || month === 0 || month === 1) return 'winter'; // december, january, february
         if (month >= 2 && month <= 4) return 'spring';
         if (month >= 5 && month <= 7) return 'summer';
         if (month >= 8 && month <= 10) return 'autumn';
 
-        return 'winter'; // Fallback
+        return ''; // Fallback (nothing)
     }
 
-loadTheme() {
+    loadTheme() {
-    const themeConfigs = {
+        const themeConfigs = {
-        winter: {
+            snowflakes: {
-            css: 'snowflakes.css',
+                css: 'snowflakes.css',
-            js: 'snowflakes.js',
+                js: 'snowflakes.js',
-            containerClass: 'snowflakes'
+                containerClass: 'snowflakes'
-        },
+            },
-        summer: {
+            snowfall: {
-            css: 'beach.css',
+                js: 'snowfall.js',
-            js: 'beach.js',
+                containerClass: 'snowfall'
-            containerClass: 'beach'
+            },
-        },
+            snowstorm: {
-        // ... andere Themes
+                css: 'snowstorm.css',
-    };
+                js: 'snowstorm.js',
+                containerClass: 'snowstorm'
+            },
+            fireworks: {
+                css: 'fireworks.css',
+                js: 'fireworks.js',
+                containerClass: 'fireworks'
+            },
+            haloween: {
+                css: 'haloween.css',
+                js: 'haloween.js',
+                containerClass: 'haloween'
+            },
+            summer: {
+                css: 'summer.css',
+                js: 'summer.js',
+                containerClass: 'summer'
+            },
+            autumn: {
+                css: 'autumn.css',
+                js: 'autumn.js',
+                containerClass: 'autumn'
+            },
+            spring: {
+                css: 'spring.css',
+                js: 'spring.js',
+                containerClass: 'spring'
+            },
+        };
 
-    const theme = themeConfigs[this.currentTheme];
+        const theme = themeConfigs[this.currentTheme];
 
-    // CSS dynamisch laden
+        // load css dynamically
-    const link = document.createElement('link');
+        const link = document.createElement('link');
-    link.rel = 'stylesheet';
+        link.rel = 'stylesheet';
-    link.href = theme.css;
+        link.href = theme.css;
-    document.head.appendChild(link);
+        document.head.appendChild(link);
 
-    // JavaScript dynamisch laden
+        // load js dynamically
-    const script = document.createElement('script');
+        const script = document.createElement('script');
-    script.src = theme.js;
+        script.src = theme.js;
-    document.body.appendChild(script);
+        document.body.appendChild(script);
 
-    // Themen-Container hinzufügen mit dynamischer Klasse
+        // add container class with dynamic theme class
-    const container = document.createElement('div');
+        // const container = document.createElement('div');
-    container.className = `seasonals ${theme.containerClass}`;
+        // container.className = `seasonals ${theme.containerClass}`;
-    document.body.appendChild(container);
+        // document.body.appendChild(container);
-}
+
+        // reclassify existing container
+        const container = document.querySelector('.seasonals-container');
+        container.className = `${theme.containerClass}`;
+        // container.className = theme.containerClass;
+    }
 }
 
 // Initialisierung beim Laden der Seite

seasonalsAIO.js

@@ -0,0 +1,116 @@
+// theme-configs.js
+
+const automateThemeSelection = false;    // Set to false to disable automatic theme selection based on the current month
+const defaultTheme = 'snowfall';          // The theme to use if automatic theme selection is disabled
+
+// theme configurations
+const themeConfigs = {
+    snowflakes: {
+        css: 'snowflakes.css',
+        js: 'snowflakes.js',
+        containerClass: 'snowflakes'
+    },
+    snowfall: {
+        js: 'snowfall.js',
+        containerClass: 'snowfall'
+    },
+    snowstorm: {
+        css: 'snowstorm.css',
+        js: 'snowstorm.js',
+        containerClass: 'snowstorm'
+    },
+    fireworks: {
+        css: 'fireworks.css',
+        js: 'fireworks.js',
+        containerClass: 'fireworks'
+    },
+    haloween: {
+        css: 'haloween.css',
+        js: 'haloween.js',
+        containerClass: 'haloween'
+    },
+    summer: {
+        css: 'summer.css',
+        js: 'summer.js',
+        containerClass: 'summer'
+    },
+    autumn: {
+        css: 'autumn.css',
+        js: 'autumn.js',
+        containerClass: 'autumn'
+    },
+    spring: {
+        css: 'spring.css',
+        js: 'spring.js',
+        containerClass: 'spring'
+    },
+};
+
+// determine current theme based on the current month
+function determineCurrentTheme() {
+    const date = new Date();
+    const month = date.getMonth();
+
+    if (month === 11 || month === 0 || month === 1) return 'snowfall'; // december, january, february
+    if (month >= 2 && month <= 4) return 'spring';
+    if (month >= 5 && month <= 7) return 'summer';
+    if (month >= 8 && month <= 10) return 'autumn';
+
+    return ''; // Fallback (nothing)
+}
+
+// load theme csss
+function loadThemeCSS(cssPath) {
+    const link = document.createElement('link');
+    link.rel = 'stylesheet';
+    link.href = cssPath;
+    document.head.appendChild(link);
+    console.log(`CSS file "${cssPath}" loaded.`);
+}
+
+// load theme js
+function loadThemeJS(jsPath) {
+    const script = document.createElement('script');
+    script.src = jsPath;
+    document.body.appendChild(script);
+    console.log(`JS file "${jsPath}" loaded.`);
+}
+
+// update theme container class name
+function updateThemeContainer(containerClass) {
+    const container = document.querySelector('.seasonal-container');
+    if (!container) {
+        console.error('No element with the class "seasonal-container" found.');
+        return;
+    }
+    container.className = containerClass;
+}
+
+// initialize theme
+function initializeTheme() {
+    if (!automateThemeSelection) {
+        const currentTheme = defaultTheme;
+    } else {
+        const currentTheme = determineCurrentTheme();
+    }
+
+    const theme = themeConfigs[currentTheme];
+
+    if (!theme) {
+        console.error(`Theme "${currentTheme}" not found.`);
+        return;
+    }
+
+    if (theme.css) loadThemeCSS(theme.css);
+    if (theme.js) loadThemeJS(theme.js);
+
+    updateThemeContainer(theme.containerClass);
+
+    console.log(`Theme "${currentTheme}" loaded.`);
+}
+
+
+//document.addEventListener('DOMContentLoaded', initializeTheme);
+document.addEventListener('DOMContentLoaded', () => {
+    initializeTheme();
+});