Refactor theme options in test-site.html to enhance selection clarity and add new themes [skip ci]

This commit is contained in:
CodeDevMLH
2026-02-28 00:59:36 +01:00
parent 76006dc162
commit 8be17dae74

View File

@@ -235,41 +235,41 @@
<label for="theme-select">Theme:</label> <label for="theme-select">Theme:</label>
<select id="theme-select"> <select id="theme-select">
<option value="" selected disabled>— Select a theme —</option> <option value="" selected disabled>— Select a theme —</option>
<option value="autumn">Autumn</option>
<option value="birthday">Birthday</option>
<option value="carnival">Carnival (Confetti)</option>
<option value="cherryblossom">Cherryblossom</option>
<option value="christmas">Christmas</option>
<option value="earthday">Earth Day</option>
<option value="easter">Easter</option>
<option value="eid">Eid al-Fitr</option>
<option value="eurovision">Eurovision</option>
<option value="filmnoir">Film-Noir</option>
<option value="fireworks">Fireworks</option>
<option value="frost">Frost / Ice</option>
<option value="friday13">Friday the 13th</option>
<option value="halloween">Halloween</option>
<option value="hearts">Hearts</option>
<option value="marioday">Mario Day</option>
<option value="matrix">Matrix</option>
<option value="oktoberfest">Oktoberfest</option>
<option value="olympia">Olympia</option>
<option value="oscar">Oscar Awards</option>
<option value="pride">Pride</option>
<option value="rain">Rain</option>
<option value="resurrection">Resurrection</option>
<option value="santa">Santa</option>
<option value="snowfall">Snowfall</option> <option value="snowfall">Snowfall</option>
<option value="snowflakes">Snowflakes</option> <option value="snowflakes">Snowflakes</option>
<option value="snowstorm">Snowstorm</option> <option value="snowstorm">Snowstorm</option>
<option value="fireworks">Fireworks</option>
<option value="halloween">Halloween</option>
<option value="spooky">Spooky</option>
<option value="hearts">Hearts</option>
<option value="christmas">Christmas</option>
<option value="santa">Santa</option>
<option value="autumn">Autumn</option>
<option value="easter">Easter</option>
<option value="resurrection">Resurrection</option>
<option value="spring">Spring</option>
<option value="summer">Summer (Bubbles)</option>
<option value="carnival">Carnival (Confetti)</option>
<option value="cherryblossom">Cherryblossom</option>
<option value="earthday">Earth Day</option>
<option value="eurovision">Eurovision</option>
<option value="matrix">Matrix</option>
<option value="pride">Pride</option>
<option value="rain">Rain</option>
<option value="storm">Storm (⚠Epilepsy Warning⚠)</option>
<option value="frost">Frost / Ice</option>
<option value="filmnoir">Film-Noir</option>
<option value="oscar">Oscar Awards</option>
<option value="marioday">Mario Day</option>
<option value="starwars">Star Wars Day</option>
<option value="oktoberfest">Oktoberfest</option>
<option value="friday13">Friday the 13th</option>
<option value="eid">Eid al-Fitr</option>
<option value="sports">Sports</option>
<option value="olympia">Olympia</option>
<option value="space">Space / Sci-Fi</option> <option value="space">Space / Sci-Fi</option>
<option value="spooky">Spooky</option>
<option value="sports">Sports</option>
<option value="spring">Spring</option>
<option value="starwars">Star Wars Day</option>
<option value="storm">Storm (⚠Epilepsy Warning⚠)</option>
<option value="summer">Summer (Bubbles)</option>
<option value="underwater">Underwater</option> <option value="underwater">Underwater</option>
<option value="birthday">Birthday</option>
<option value="custom">⚙ Custom (Local Files)</option> <option value="custom">⚙ Custom (Local Files)</option>
</select> </select>
@@ -341,41 +341,41 @@
// ── Built-in theme map (local file paths for testing) ── // ── Built-in theme map (local file paths for testing) ──
const themes = { const themes = {
snowfall: { css: 'snowfall.css', js: 'snowfall.js', container: 'snowfall-container' },
snowflakes: { css: 'snowflakes.css', js: 'snowflakes.js', container: 'snowflakes' },
snowstorm: { css: 'snowstorm.css', js: 'snowstorm.js', container: 'snowstorm-container' },
fireworks: { css: 'fireworks.css', js: 'fireworks.js', container: 'fireworks' },
halloween: { css: 'halloween.css', js: 'halloween.js', container: 'halloween-container' },
spooky: { css: 'spooky.css', js: 'spooky.js', container: 'spooky-container' },
hearts: { css: 'hearts.css', js: 'hearts.js', container: 'hearts-container' },
christmas: { css: 'christmas.css', js: 'christmas.js', container: 'christmas-container' },
santa: { css: 'santa.css', js: 'santa.js', container: 'santa-container' },
autumn: { css: 'autumn.css', js: 'autumn.js', container: 'autumn-container' }, autumn: { css: 'autumn.css', js: 'autumn.js', container: 'autumn-container' },
easter: { css: 'easter.css', js: 'easter.js', container: 'easter-container' }, birthday: { css: 'birthday.css', js: 'birthday.js', container: 'birthday-container' },
resurrection: { css: 'resurrection.css', js: 'resurrection.js', container: 'resurrection-container' },
spring: { css: 'spring.css', js: 'spring.js', container: 'spring-container' },
summer: { css: 'summer.css', js: 'summer.js', container: 'summer-container' },
carnival: { css: 'carnival.css', js: 'carnival.js', container: 'carnival-container' }, carnival: { css: 'carnival.css', js: 'carnival.js', container: 'carnival-container' },
cherryblossom: { css: 'cherryblossom.css', js: 'cherryblossom.js', container: 'cherryblossom-container' }, cherryblossom:{ css: 'cherryblossom.css', js: 'cherryblossom.js',container: 'cherryblossom-container' },
christmas: { css: 'christmas.css', js: 'christmas.js', container: 'christmas-container' },
earthday: { css: 'earthday.css', js: 'earthday.js', container: 'earthday-container' }, earthday: { css: 'earthday.css', js: 'earthday.js', container: 'earthday-container' },
easter: { css: 'easter.css', js: 'easter.js', container: 'easter-container' },
eid: { css: 'eid.css', js: 'eid.js', container: 'eid-container' },
eurovision: { css: 'eurovision.css', js: 'eurovision.js', container: 'eurovision-container' }, eurovision: { css: 'eurovision.css', js: 'eurovision.js', container: 'eurovision-container' },
matrix: { css: 'matrix.css', js: 'matrix.js', container: 'matrix-container' }, filmnoir: { css: 'filmnoir.css', js: 'filmnoir.js', container: 'filmnoir-container' },
fireworks: { css: 'fireworks.css', js: 'fireworks.js', container: 'fireworks' },
frost: { css: 'frost.css', js: 'frost.js', container: 'frost-container' },
friday13: { css: 'friday13.css', js: 'friday13.js', container: 'friday13-container' },
halloween: { css: 'halloween.css', js: 'halloween.js', container: 'halloween-container' },
hearts: { css: 'hearts.css', js: 'hearts.js', container: 'hearts-container' },
marioday: { css: 'marioday.css', js: 'marioday.js', container: 'marioday-container' },
matrix: { css: 'matrix.css', js: 'matrix.js', container: 'matrix-container' },
oktoberfest: { css: 'oktoberfest.css', js: 'oktoberfest.js', container: 'oktoberfest-container' },
olympia: { css: 'olympia.css', js: 'olympia.js', container: 'olympia-container' },
oscar: { css: 'oscar.css', js: 'oscar.js', container: 'oscar-container' },
pride: { css: 'pride.css', js: 'pride.js', container: 'pride-container' }, pride: { css: 'pride.css', js: 'pride.js', container: 'pride-container' },
rain: { css: 'rain.css', js: 'rain.js', container: 'rain-container' }, rain: { css: 'rain.css', js: 'rain.js', container: 'rain-container' },
storm: { css: 'storm.css', js: 'storm.js', container: 'storm-container' }, resurrection: { css: 'resurrection.css', js: 'resurrection.js', container: 'resurrection-container' },
frost: { css: 'frost.css', js: 'frost.js', container: 'frost-container' }, santa: { css: 'santa.css', js: 'santa.js', container: 'santa-container' },
filmnoir: { css: 'filmnoir.css', js: 'filmnoir.js', container: 'filmnoir-container' }, snowfall: { css: 'snowfall.css', js: 'snowfall.js', container: 'snowfall-container' },
oscar: { css: 'oscar.css', js: 'oscar.js', container: 'oscar-container' }, snowflakes: { css: 'snowflakes.css', js: 'snowflakes.js', container: 'snowflakes' },
marioday: { css: 'marioday.css', js: 'marioday.js', container: 'marioday-container' }, snowstorm: { css: 'snowstorm.css', js: 'snowstorm.js', container: 'snowstorm-container' },
starwars: { css: 'starwars.css', js: 'starwars.js', container: 'starwars-container' },
oktoberfest: { css: 'oktoberfest.css', js: 'oktoberfest.js', container: 'oktoberfest-container' },
friday13: { css: 'friday13.css', js: 'friday13.js', container: 'friday13-container' },
eid: { css: 'eid.css', js: 'eid.js', container: 'eid-container' },
sports: { css: 'sports.css', js: 'sports.js', container: 'sports-container' },
olympia: { css: 'olympia.css', js: 'olympia.js', container: 'olympia-container' },
space: { css: 'space.css', js: 'space.js', container: 'space-container' }, space: { css: 'space.css', js: 'space.js', container: 'space-container' },
underwater: { css: 'underwater.css', js: 'underwater.js', container: 'underwater-container' }, spooky: { css: 'spooky.css', js: 'spooky.js', container: 'spooky-container' },
birthday: { css: 'birthday.css', js: 'birthday.js', container: 'birthday-container' } sports: { css: 'sports.css', js: 'sports.js', container: 'sports-container' },
spring: { css: 'spring.css', js: 'spring.js', container: 'spring-container' },
starwars: { css: 'starwars.css', js: 'starwars.js', container: 'starwars-container' },
storm: { css: 'storm.css', js: 'storm.js', container: 'storm-container' },
summer: { css: 'summer.css', js: 'summer.js', container: 'summer-container' },
underwater: { css: 'underwater.css', js: 'underwater.js', container: 'underwater-container' }
}; };
const select = document.getElementById('theme-select'); const select = document.getElementById('theme-select');