first rel

seasonals.js

@@ -9,48 +9,81 @@ class SeasonalThemes {
         const date = new Date();
         const month = date.getMonth();
 
-        // Beispielhafte Theme-Zuordnung
-        if (month === 11 || month === 0 || month === 1) return 'winter'; // Dezember, Januar, Februar
+        // theme logic
+        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() {
-    const themeConfigs = {
-        winter: {
-            css: 'snowflakes.css',
-            js: 'snowflakes.js',
-            containerClass: 'snowflakes'
-        },
-        summer: {
-            css: 'beach.css',
-            js: 'beach.js',
-            containerClass: 'beach'
-        },
-        // ... andere Themes
-    };
+    loadTheme() {
+        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'
+            },
+        };
 
-    const theme = themeConfigs[this.currentTheme];
-    
-    // CSS dynamisch laden
-    const link = document.createElement('link');
-    link.rel = 'stylesheet';
-    link.href = theme.css;
-    document.head.appendChild(link);
+        const theme = themeConfigs[this.currentTheme];
 
-    // JavaScript dynamisch laden
-    const script = document.createElement('script');
-    script.src = theme.js;
-    document.body.appendChild(script);
+        // load css dynamically
+        const link = document.createElement('link');
+        link.rel = 'stylesheet';
+        link.href = theme.css;
+        document.head.appendChild(link);
 
-    // Themen-Container hinzufügen mit dynamischer Klasse
-    const container = document.createElement('div');
-    container.className = `seasonals ${theme.containerClass}`;
-    document.body.appendChild(container);
-}
+        // load js dynamically
+        const script = document.createElement('script');
+        script.src = theme.js;
+        document.body.appendChild(script);
+
+        // add container class with dynamic theme class
+        // const container = document.createElement('div');
+        // container.className = `seasonals ${theme.containerClass}`;
+        // 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