Add Spooky theme: replace Legacy Halloween with Spooky options and implement related CSS and JavaScript for visual effects

This commit is contained in:
CodeDevMLH
2026-02-25 00:22:24 +01:00
parent 082120b70b
commit 2bbf13c044
6 changed files with 321 additions and 26 deletions

View File

@@ -87,7 +87,7 @@
<option value="oktoberfest">Oktoberfest</option>
<option value="friday13">Friday the 13th</option>
<option value="eid">Eid al-Fitr</option>
<option value="legacyhalloween">Legacy Halloween</option>
<option value="spooky">Spooky</option>
</select>
<div class="fieldDescription">The season to display if automation is disabled or no "Auto Selection" rule matches the current date.</div>
</div>
@@ -371,19 +371,35 @@
<hr style="max-width: 800px; margin: 1em 0;">
<details>
<summary>Legacy Halloween</summary>
<summary>Spooky Theme</summary>
<div class="checkboxContainer checkboxContainer-withDescription">
<label class="emby-checkbox-label">
<input id="EnableLegacyHalloween" name="EnableLegacyHalloween" type="checkbox" is="emby-checkbox" />
<span>Enable Legacy Halloween Seasonal</span>
<input id="EnableSpooky" name="EnableSpooky" type="checkbox" is="emby-checkbox" />
<span>Enable Spooky Seasonal</span>
</label>
<div class="fieldDescription">Enable the classic Halloween theme (only floating symbols, no fog/spiders).</div>
<div class="fieldDescription">Enable the Spooky Halloween theme (floating, swaying symbols).</div>
</div>
<div class="inputContainer">
<label class="inputLabel" for="LegacyHalloweenCount">Symbol Count</label>
<input is="emby-input" type="number" id="LegacyHalloweenCount" name="LegacyHalloweenCount" />
<label class="inputLabel" for="SpookyCount">Symbol Count</label>
<input is="emby-input" type="number" id="SpookyCount" name="SpookyCount" />
<div class="fieldDescription">Number of floating symbols.</div>
</div>
<div class="inputContainer">
<label class="inputLabel" for="SpookySize">Symbol Size</label>
<input is="emby-input" type="number" id="SpookySize" name="SpookySize" />
<div class="fieldDescription">Size of the floating symbols in pixels (default 30).</div>
</div>
<div class="checkboxContainer">
<label class="emby-checkbox-label">
<input id="EnableSpookySway" name="EnableSpookySway" type="checkbox" is="emby-checkbox" />
<span>Enable Swaying Motion</span>
</label>
</div>
<div class="inputContainer">
<label class="inputLabel" for="SpookyGlowSize">Glow Size</label>
<input is="emby-input" type="number" id="SpookyGlowSize" name="SpookyGlowSize" />
<div class="fieldDescription">Size of the glow effect in pixels (0 to disable, default 5).</div>
</div>
</details>
<hr style="max-width: 800px; margin: 1em 0;">
@@ -1623,8 +1639,8 @@
// Eid
document.querySelector('#EidSymbolCount').value = config.Eid.SymbolCount || 25;
// Legacy Halloween
document.querySelector('#LegacyHalloweenSymbolCount').value = config.LegacyHalloween.SymbolCount || 25;
// Spooky Theme
document.querySelector('#SpookyCount').value = config.Spooky.SymbolCount || 25;
// Sports
document.querySelector('#EnableSports').checked = config.Sports.EnableSports || false;
@@ -1779,9 +1795,12 @@
document.querySelector('#PrideHeartSize').value = config.Pride.HeartSize;
document.querySelector('#PrideColorHeader').checked = config.Pride.ColorHeader;
// Legacy Halloween
document.querySelector('#EnableLegacyHalloween').checked = config.LegacyHalloween.EnableLegacyHalloween !== undefined ? config.LegacyHalloween.EnableLegacyHalloween : true;
document.querySelector('#LegacyHalloweenCount').value = config.LegacyHalloween.SymbolCount !== undefined ? config.LegacyHalloween.SymbolCount : 25;
// Spooky Theme
document.querySelector('#EnableSpooky').checked = config.Spooky.EnableSpooky !== undefined ? config.Spooky.EnableSpooky : true;
document.querySelector('#SpookyCount').value = config.Spooky.SymbolCount !== undefined ? config.Spooky.SymbolCount : 25;
document.querySelector('#SpookySize').value = config.Spooky.SpookySize !== undefined ? config.Spooky.SpookySize : 30;
document.querySelector('#EnableSpookySway').checked = config.Spooky.EnableSpookySway !== undefined ? config.Spooky.EnableSpookySway : true;
document.querySelector('#SpookyGlowSize').value = config.Spooky.SpookyGlowSize !== undefined ? config.Spooky.SpookyGlowSize : 5;
// Rain
document.querySelector('#EnableRain').checked = config.Rain.EnableRain;
@@ -1965,9 +1984,12 @@
config.Resurrection.EnableRandomSymbolsMobile = document.querySelector('#EnableRandomResurrectionMobile').checked;
config.Resurrection.EnableDifferentDuration = document.querySelector('#EnableDifferentDurationResurrection').checked;
// Legacy Halloween
config.LegacyHalloween.EnableLegacyHalloween = document.querySelector('#EnableLegacyHalloween').checked;
config.LegacyHalloween.SymbolCount = parseInt(document.querySelector('#LegacyHalloweenCount').value);
// Spooky Theme
config.Spooky.EnableSpooky = document.querySelector('#EnableSpooky').checked;
config.Spooky.SymbolCount = parseInt(document.querySelector('#SpookyCount').value);
config.Spooky.SpookySize = parseInt(document.querySelector('#SpookySize').value);
config.Spooky.EnableSpookySway = document.querySelector('#EnableSpookySway').checked;
config.Spooky.SpookyGlowSize = parseInt(document.querySelector('#SpookyGlowSize').value);
// Spring
config.Spring.EnableSpring = document.querySelector('#EnableSpring').checked;