92 lines
2.8 KiB
JavaScript
92 lines
2.8 KiB
JavaScript
// seasonals.js
|
|
class SeasonalThemes {
|
|
constructor() {
|
|
this.currentTheme = this.determineCurrentTheme();
|
|
this.loadTheme();
|
|
}
|
|
|
|
determineCurrentTheme() {
|
|
const date = new Date();
|
|
const month = date.getMonth();
|
|
|
|
// 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 ''; // Fallback (nothing)
|
|
}
|
|
|
|
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];
|
|
|
|
// load css dynamically
|
|
const link = document.createElement('link');
|
|
link.rel = 'stylesheet';
|
|
link.href = theme.css;
|
|
document.head.appendChild(link);
|
|
|
|
// 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
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
new SeasonalThemes();
|
|
}); |