Refactor theme options in test-site.html to enhance selection clarity and add new themes [skip ci]
This commit is contained in:
@@ -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');
|
||||||
|
|||||||
Reference in New Issue
Block a user