From 881816976761ccc815cafdbd7e2ca5c411f5884e Mon Sep 17 00:00:00 2001 From: Kenneth Hendricks <50819541+kenhendricks00@users.noreply.github.com> Date: Sun, 5 Oct 2025 17:44:51 -0400 Subject: [PATCH] Halloween Theme Update --- src/pub/index.html | 148 +++++++++++++++++++++++++++++++++++-- src/pub/settings-page.html | 89 +++++++++++++++++++++- src/pub/warning-page.html | 135 ++++++++++++++++++++++++++++++++- 3 files changed, 361 insertions(+), 11 deletions(-) diff --git a/src/pub/index.html b/src/pub/index.html index ec25225..8f4a9f7 100644 --- a/src/pub/index.html +++ b/src/pub/index.html @@ -15,7 +15,7 @@ --text-color: #848a94; --text-color-light: #e8e8e8; --accent-color: #c4b5fd; - --link-color: #78b3e2; + --link-color: #ff7518; /* Halloween orange */ --hover-bg: rgba(255, 255, 255, 0.1); } @@ -38,6 +38,7 @@ min-width: 300px; max-width: 320px; /* Limit the width to make it more compact */ position: relative; /* For absolute positioning of settings button */ + overflow: hidden; /* Prevent horizontal scrolling */ } .header { @@ -51,12 +52,10 @@ .title h1 { font-size: 24px; - background: -webkit-linear-gradient( - 120deg, - var(--accent-color) 30%, - var(--link-color) - ); + /* Halloween gradient: Purple to Orange */ + background: -webkit-linear-gradient(120deg, #6a0dad 30%, #ff7518); -webkit-background-clip: text; + background-clip: text; -webkit-text-fill-color: transparent; margin: 0; padding: 10px; @@ -167,9 +166,146 @@ .status-image.active { transform: scale(1.1); } + + /* Floating Halloween Icons */ + .floating-icon { + position: absolute; + width: 30px; + height: 30px; + opacity: 0.1; /* Lower opacity for a subtle effect */ + pointer-events: none; /* Makes them unclickable */ + filter: grayscale(100%) brightness(0.7); /* Black and white filter */ + animation: float 8s ease-in-out infinite, rotate 5s linear infinite; + } + + /* Adjusted positions to stay within popup bounds */ + .icon1 { + top: 15%; + left: 15%; + animation-delay: 0s; + transform: rotate(10deg); + } + .icon2 { + top: 25%; + left: 65%; + animation-delay: 1s; + transform: rotate(-15deg); + } + .icon3 { + top: 45%; + left: 35%; + animation-delay: 2s; + transform: rotate(25deg); + } + .icon4 { + top: 65%; + left: 10%; + animation-delay: 3s; + transform: rotate(-30deg); + } + .icon5 { + top: 75%; + left: 70%; + animation-delay: 4s; + transform: rotate(15deg); + } + .icon6 { + top: 20%; + left: 45%; + animation-delay: 5s; + transform: rotate(-10deg); + } + .icon7 { + top: 55%; + left: 20%; + animation-delay: 6s; + transform: rotate(5deg); + } + .icon8 { + top: 35%; + left: 75%; + animation-delay: 7s; + transform: rotate(-20deg); + } + + /* Reduced floating movement to stay within bounds */ + @keyframes float { + 0%, + 100% { + transform: translateY(0) translateX(0); + } + 50% { + transform: translateY(-8px) translateX(5px); + } + } + + /* Continuous rotation effect */ + @keyframes rotate { + 0% { + transform: rotate(0deg); + } + 100% { + transform: rotate(360deg); + } + } + + /* Halloween-colored links */ + #footer a, + #feedback a { + color: #ff7518; + text-decoration: none; + } + + #footer a:hover, + #feedback a:hover { + text-decoration: underline; + } + + + Ghost Icon + Pumpkin Icon + Skull Icon + Zombie Icon + Ghost Icon + Pumpkin Icon + Skull Icon + Zombie Icon +

FMHY SafeGuard

diff --git a/src/pub/settings-page.html b/src/pub/settings-page.html index bda5e1f..d1f76f9 100644 --- a/src/pub/settings-page.html +++ b/src/pub/settings-page.html @@ -16,8 +16,8 @@ --card-bg: rgba(255, 255, 255, 0.05); --text-primary: #e8e8e8; --text-secondary: #848a94; - --accent-purple: #c4b5fd; - --accent-blue: #7bc5e4; + --accent-purple: #6a0dad; /* Halloween purple */ + --accent-blue: #ff7518; /* Halloween orange */ --toggle-bg: #374151; --section-border: rgba(255, 255, 255, 0.1); } @@ -55,6 +55,7 @@ font-size: 1.75rem; font-weight: 700; margin-bottom: 1.5rem; + /* Halloween gradient: Purple to Orange */ background: linear-gradient( 120deg, var(--accent-purple) 30%, @@ -269,6 +270,67 @@ } } + /* Subtle Halloween Icons for Settings Page */ + .floating-icon { + position: fixed; + width: 35px; + height: 35px; + opacity: 0.06; /* Very subtle for settings page */ + pointer-events: none; + filter: grayscale(100%) brightness(0.5); + animation: float 12s ease-in-out infinite, rotate 8s linear infinite; + z-index: 1; + } + + /* Minimal icon positions - only 4 icons for settings */ + .settings-icon1 { + top: 8%; + left: 8%; + animation-delay: 0s; + transform: rotate(20deg); + } + .settings-icon2 { + top: 12%; + right: 12%; + animation-delay: 3s; + transform: rotate(-25deg); + } + .settings-icon3 { + bottom: 15%; + left: 15%; + animation-delay: 6s; + transform: rotate(15deg); + } + .settings-icon4 { + bottom: 20%; + right: 20%; + animation-delay: 9s; + transform: rotate(-18deg); + } + + /* Gentle floating animations for settings */ + @keyframes float { + 0%, + 100% { + transform: translateY(0) translateX(0); + } + 33% { + transform: translateY(-12px) translateX(8px); + } + 66% { + transform: translateY(6px) translateX(-6px); + } + } + + @keyframes rotate { + 0% { + transform: rotate(0deg); + } + 100% { + transform: rotate(360deg); + } + } + .toggle-switch { position: relative; display: inline-block; @@ -491,6 +553,29 @@ + + + Ghost Icon + Pumpkin Icon + Skull Icon + Zombie Icon +

FMHY SafeGuard Settings

diff --git a/src/pub/warning-page.html b/src/pub/warning-page.html index 8c7c536..20d0d7e 100644 --- a/src/pub/warning-page.html +++ b/src/pub/warning-page.html @@ -16,8 +16,8 @@ --background: rgb(26, 26, 26); --text-primary: #e8e8e8; --text-secondary: #848a94; - --accent-purple: #c4b5fd; - --accent-blue: #7bc5e4; + --accent-purple: #6a0dad; /* Halloween purple */ + --accent-blue: #ff7518; /* Halloween orange */ --danger: #ff4444; --card-bg: rgba(255, 255, 255, 0.05); } @@ -60,6 +60,7 @@ font-size: 2rem; font-weight: 700; margin-bottom: 0.5rem; + /* Halloween gradient: Purple to Orange */ background: linear-gradient( 120deg, var(--accent-purple) 30%, @@ -138,7 +139,7 @@ } .footer a { - color: var(--accent-blue); + color: var(--accent-blue); /* Halloween orange */ text-decoration: none; } @@ -167,9 +168,137 @@ width: 100%; } } + + /* Floating Halloween Icons */ + .floating-icon { + position: fixed; + width: 40px; + height: 40px; + opacity: 0.08; /* Even more subtle for full-page */ + pointer-events: none; + filter: grayscale(100%) brightness(0.6); + animation: float 10s ease-in-out infinite, rotate 6s linear infinite; + z-index: 1; + } + + /* Halloween icon positions for full page */ + .icon1 { + top: 5%; + left: 10%; + animation-delay: 0s; + transform: rotate(15deg); + } + .icon2 { + top: 15%; + right: 15%; + animation-delay: 1.5s; + transform: rotate(-20deg); + } + .icon3 { + top: 40%; + left: 5%; + animation-delay: 3s; + transform: rotate(30deg); + } + .icon4 { + top: 60%; + right: 10%; + animation-delay: 4.5s; + transform: rotate(-10deg); + } + .icon5 { + bottom: 20%; + left: 20%; + animation-delay: 6s; + transform: rotate(25deg); + } + .icon6 { + bottom: 10%; + right: 25%; + animation-delay: 7.5s; + transform: rotate(-15deg); + } + .icon7 { + top: 25%; + left: 50%; + animation-delay: 9s; + transform: rotate(5deg); + } + .icon8 { + bottom: 40%; + right: 50%; + animation-delay: 2s; + transform: rotate(-25deg); + } + + /* Halloween floating animations */ + @keyframes float { + 0%, + 100% { + transform: translateY(0) translateX(0); + } + 33% { + transform: translateY(-15px) translateX(10px); + } + 66% { + transform: translateY(5px) translateX(-8px); + } + } + + @keyframes rotate { + 0% { + transform: rotate(0deg); + } + 100% { + transform: rotate(360deg); + } + } + + + Ghost Icon + Pumpkin Icon + Skull Icon + Zombie Icon + Ghost Icon + Pumpkin Icon + Skull Icon + Zombie Icon +

FMHY SafeGuard