diff --git a/seasonals copy.js b/seasonals copy.js index 3f01cf3..009d896 100644 --- a/seasonals copy.js +++ b/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 diff --git a/seasonals.js b/seasonals.js index 2f13464..1d73f13 100644 --- a/seasonals.js +++ b/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 diff --git a/seasonalsAIO.js b/seasonalsAIO.js new file mode 100644 index 0000000..3c9a0d4 --- /dev/null +++ b/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(); +}); \ No newline at end of file