From 8be17dae74fc29208b84e8810a7451c78fd0e4e6 Mon Sep 17 00:00:00 2001
From: CodeDevMLH <145071728+CodeDevMLH@users.noreply.github.com>
Date: Sat, 28 Feb 2026 00:59:36 +0100
Subject: [PATCH] Refactor theme options in test-site.html to enhance selection
 clarity and add new themes [skip ci]

---
 Jellyfin.Plugin.Seasonals/Web/test-site.html | 116 +++++++++----------
 1 file changed, 58 insertions(+), 58 deletions(-)

diff --git a/Jellyfin.Plugin.Seasonals/Web/test-site.html b/Jellyfin.Plugin.Seasonals/Web/test-site.html
index 884d377..14aaa60 100644
--- a/Jellyfin.Plugin.Seasonals/Web/test-site.html
+++ b/Jellyfin.Plugin.Seasonals/Web/test-site.html
@@ -235,41 +235,41 @@
         <label for="theme-select">Theme:</label>
         <select id="theme-select">
             <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="snowflakes">Snowflakes</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="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="birthday">Birthday</option>
             <option value="custom">⚙ Custom (Local Files)</option>
         </select>
 
@@ -341,41 +341,41 @@
 
         // ── Built-in theme map (local file paths for testing) ──
         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' },
-            easter:       { css: 'easter.css',        js: 'easter.js',       container: 'easter-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' },
+            birthday:     { css: 'birthday.css',      js: 'birthday.js',     container: 'birthday-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' },
+            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' },
-            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' },
             rain:         { css: 'rain.css',          js: 'rain.js',         container: 'rain-container' },
-            storm:        { css: 'storm.css',         js: 'storm.js',        container: 'storm-container' },
-            frost:        { css: 'frost.css',         js: 'frost.js',        container: 'frost-container' },
-            filmnoir:     { css: 'filmnoir.css',      js: 'filmnoir.js',     container: 'filmnoir-container' },
-            oscar:        { css: 'oscar.css',         js: 'oscar.js',        container: 'oscar-container' },
-            marioday:     { css: 'marioday.css',      js: 'marioday.js',     container: 'marioday-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' },
+            resurrection: { css: 'resurrection.css',  js: 'resurrection.js', container: 'resurrection-container' },
+            santa:        { css: 'santa.css',         js: 'santa.js',        container: 'santa-container' },
+            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' },
             space:        { css: 'space.css',         js: 'space.js',        container: 'space-container' },
-            underwater:   { css: 'underwater.css',    js: 'underwater.js',   container: 'underwater-container' },
-            birthday:     { css: 'birthday.css',      js: 'birthday.js',     container: 'birthday-container' }
+            spooky:       { css: 'spooky.css',        js: 'spooky.js',       container: 'spooky-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');