diff --git a/css/styles.css b/css/styles.css index aa031a7..2c31f60 100644 --- a/css/styles.css +++ b/css/styles.css @@ -1,6 +1,6 @@ /* ===== CSS Custom Properties ===== */ :root { - /* Gradient colors */ + /* Default palette - Purple/Pink/Blue */ --gradient-color-1: #667eea; --gradient-color-2: #764ba2; --gradient-color-3: #f093fb; @@ -17,6 +17,56 @@ --explosion-duration: calc(3s / var(--speed-multiplier)); } +/* ===== Color Palettes ===== */ + +/* Default: Purple/Pink/Blue */ +.palette--default { + --gradient-color-1: #667eea; + --gradient-color-2: #764ba2; + --gradient-color-3: #f093fb; + --gradient-color-4: #4facfe; +} + +/* Blue/Yellow - Ocean Sunset */ +.palette--blue-yellow { + --gradient-color-1: #1e3c72; + --gradient-color-2: #2a5298; + --gradient-color-3: #f4d03f; + --gradient-color-4: #16a085; +} + +/* Dark - Deep Space */ +.palette--dark { + --gradient-color-1: #0f2027; + --gradient-color-2: #203a43; + --gradient-color-3: #2c5364; + --gradient-color-4: #0a0e27; +} + +/* Light - Pastel Dream */ +.palette--light { + --gradient-color-1: #ffecd2; + --gradient-color-2: #fcb69f; + --gradient-color-3: #ff9a9e; + --gradient-color-4: #fad0c4; +} + +/* Fire - Red/Orange/Yellow */ +.palette--fire { + --gradient-color-1: #ff0844; + --gradient-color-2: #ffb199; + --gradient-color-3: #ff6a00; + --gradient-color-4: #ee0979; +} + +/* Nature - Green/Teal */ +.palette--nature { + --gradient-color-1: #11998e; + --gradient-color-2: #38ef7d; + --gradient-color-3: #20E2D7; + --gradient-color-4: #29ffc6; +} + /* ===== Reset & Base Styles ===== */ * { margin: 0; @@ -668,8 +718,8 @@ html, body { /* ===== Responsive Design ===== */ @media (max-width: 768px) { .logo { - width: 60vmin; - height: 60vmin; + width: 80vmin; + height: 80vmin; } .toast { @@ -726,8 +776,8 @@ html, body { @media (max-width: 480px) { .logo { - width: 70vmin; - height: 70vmin; + width: 90vmin; + height: 90vmin; } .toast { diff --git a/index.html b/index.html index dfc5f3c..d565947 100644 --- a/index.html +++ b/index.html @@ -4,8 +4,8 @@ - - Shadoll + + shadoll @@ -38,6 +38,7 @@

Background

B Toggle background animation (static ↔ animated)
G Cycle gradient types (linear → radial → conic)
+
P Cycle color palettes (default → blue-yellow → dark → light → fire → nature)
@@ -62,10 +63,11 @@

URL Parameters

-
?bg=animated&gradient=linear&logo=full&logoAnim=all&elementAnim=neon&speed=1.5
+
?bg=animated&gradient=linear&palette=default&logo=full&logoAnim=mixed&elementAnim=neon&speed=1.5
bg: static | animated
gradient: linear | radial | conic
+
palette: default | blue-yellow | dark | light | fire | nature
logo: static | animated | full
logoAnim: shake | rotate | tilt | interactive | mixed | all
elementAnim: neon | color | explosion | fly | all
diff --git a/js/app.js b/js/app.js index 2f23b4e..b6cc315 100644 --- a/js/app.js +++ b/js/app.js @@ -10,6 +10,7 @@ const DEFAULT_CONFIG = { bg: 'animated', // static | animated gradient: 'linear', // linear | radial | conic + palette: 'default', // default | blue-yellow | dark | light | fire | nature logo: 'full', // static | animated | full logoAnim: 'mixed', // shake | rotate | tilt | interactive | mixed | all elementAnim: 'neon', // neon | color | explosion | fly | all @@ -23,6 +24,7 @@ return { bg: params.get('bg') || DEFAULT_CONFIG.bg, gradient: params.get('gradient') || DEFAULT_CONFIG.gradient, + palette: params.get('palette') || DEFAULT_CONFIG.palette, logo: params.get('logo') || DEFAULT_CONFIG.logo, logoAnim: params.get('logoAnim') || DEFAULT_CONFIG.logoAnim, elementAnim: params.get('elementAnim') || DEFAULT_CONFIG.elementAnim, @@ -116,11 +118,14 @@ // ===== Background Configuration ===== function configureBackground(config) { - const { bg, gradient } = config; + const { bg, gradient, palette } = config; // Remove all background classes elements.background.className = 'background'; + // Apply color palette + elements.background.classList.add(`palette--${palette}`); + // Apply gradient type elements.background.classList.add(`background--${gradient}`); @@ -416,6 +421,17 @@ messages.push(`Background: Animated ${config.gradient}`); } + // Add palette info + const paletteNames = { + 'default': 'Default', + 'blue-yellow': 'Blue-Yellow', + 'dark': 'Dark', + 'light': 'Light', + 'fire': 'Fire', + 'nature': 'Nature' + }; + messages.push(`Palette: ${paletteNames[config.palette] || config.palette}`); + if (config.logo === 'static') { messages.push('Logo: Static'); } else if (config.logo === 'animated') { @@ -458,6 +474,12 @@ const currentIndex = gradients.indexOf(currentConfig.gradient); currentConfig.gradient = gradients[(currentIndex + 1) % gradients.length]; break; + case 'p': + // Cycle color palettes + const palettes = ['default', 'blue-yellow', 'dark', 'light', 'fire', 'nature']; + const paletteIndex = palettes.indexOf(currentConfig.palette); + currentConfig.palette = palettes[(paletteIndex + 1) % palettes.length]; + break; case 'l': // Cycle logo animations const logoStates = ['static', 'animated', 'full'];