github-personal/www.shadoll
1
0
Fork 0
mirror of https://github.com/shadoll/www.shadoll.git synced 2026-08-28 03:28:32 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: add multiple color palettes and update configuration for palette cycling

Browse Source
This commit is contained in:
sha
2025-12-28 04:38:45 +02:00
parent c3e092e305
commit 30c2411daf
3 changed files with 83 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files
css/styles.css
+55 -5
View File
@@ -1,6 +1,6 @@
/* ===== CSS Custom Properties ===== */ /* ===== CSS Custom Properties ===== */
:root { :root {
/* Gradient colors */ /* Default palette - Purple/Pink/Blue */
--gradient-color-1: #667eea; --gradient-color-1: #667eea;
--gradient-color-2: #764ba2; --gradient-color-2: #764ba2;
--gradient-color-3: #f093fb; --gradient-color-3: #f093fb;
@@ -17,6 +17,56 @@
--explosion-duration: calc(3s / var(--speed-multiplier)); --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 ===== */ /* ===== Reset & Base Styles ===== */
* { * {
margin: 0; margin: 0;
@@ -668,8 +718,8 @@ html, body {
/* ===== Responsive Design ===== */ /* ===== Responsive Design ===== */
@media (max-width: 768px) { @media (max-width: 768px) {
.logo { .logo {
width: 60vmin; width: 80vmin;
height: 60vmin; height: 80vmin;
} }
.toast { .toast {
@@ -726,8 +776,8 @@ html, body {
@media (max-width: 480px) { @media (max-width: 480px) {
.logo { .logo {
width: 70vmin; width: 90vmin;
height: 70vmin; height: 90vmin;
} }
.toast { .toast {
index.html
+5 -3
View File
@@ -4,8 +4,8 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Shadoll - Animated placeholder page with dynamic gradients and logo animations"> <meta name="description" content="Shadoll - Animated placeholder page with dynamic gradients and logo animations">
<meta name="author" content="Shadoll"> <meta name="author" content="shadoll">
<title>Shadoll</title> <title>shadoll</title>
<link rel="stylesheet" href="css/styles.css"> <link rel="stylesheet" href="css/styles.css">
</head> </head>
<body> <body>
@@ -38,6 +38,7 @@
<h3>Background</h3> <h3>Background</h3>
<div class="help-item"><kbd data-key="b">B</kbd> Toggle background animation (static ↔ animated)</div> <div class="help-item"><kbd data-key="b">B</kbd> Toggle background animation (static ↔ animated)</div>
<div class="help-item"><kbd data-key="g">G</kbd> Cycle gradient types (linear → radial → conic)</div> <div class="help-item"><kbd data-key="g">G</kbd> Cycle gradient types (linear → radial → conic)</div>
<div class="help-item"><kbd data-key="p">P</kbd> Cycle color palettes (default → blue-yellow → dark → light → fire → nature)</div>
</div> </div>
<div class="help-section"> <div class="help-section">
@@ -62,10 +63,11 @@
<div class="help-section help-section-url"> <div class="help-section help-section-url">
<h3>URL Parameters</h3> <h3>URL Parameters</h3>
<div class="help-code">?bg=animated&gradient=linear&logo=full&logoAnim=all&elementAnim=neon&speed=1.5</div> <div class="help-code">?bg=animated&gradient=linear&palette=default&logo=full&logoAnim=mixed&elementAnim=neon&speed=1.5</div>
<div class="help-params"> <div class="help-params">
<div><strong>bg:</strong> static | animated</div> <div><strong>bg:</strong> static | animated</div>
<div><strong>gradient:</strong> linear | radial | conic</div> <div><strong>gradient:</strong> linear | radial | conic</div>
<div><strong>palette:</strong> default | blue-yellow | dark | light | fire | nature</div>
<div><strong>logo:</strong> static | animated | full</div> <div><strong>logo:</strong> static | animated | full</div>
<div><strong>logoAnim:</strong> shake | rotate | tilt | interactive | mixed | all</div> <div><strong>logoAnim:</strong> shake | rotate | tilt | interactive | mixed | all</div>
<div><strong>elementAnim:</strong> neon | color | explosion | fly | all</div> <div><strong>elementAnim:</strong> neon | color | explosion | fly | all</div>
js/app.js
+23 -1
View File
@@ -10,6 +10,7 @@
const DEFAULT_CONFIG = { const DEFAULT_CONFIG = {
bg: 'animated', // static | animated bg: 'animated', // static | animated
gradient: 'linear', // linear | radial | conic gradient: 'linear', // linear | radial | conic
palette: 'default', // default | blue-yellow | dark | light | fire | nature
logo: 'full', // static | animated | full logo: 'full', // static | animated | full
logoAnim: 'mixed', // shake | rotate | tilt | interactive | mixed | all logoAnim: 'mixed', // shake | rotate | tilt | interactive | mixed | all
elementAnim: 'neon', // neon | color | explosion | fly | all elementAnim: 'neon', // neon | color | explosion | fly | all
@@ -23,6 +24,7 @@
return { return {
bg: params.get('bg') || DEFAULT_CONFIG.bg, bg: params.get('bg') || DEFAULT_CONFIG.bg,
gradient: params.get('gradient') || DEFAULT_CONFIG.gradient, gradient: params.get('gradient') || DEFAULT_CONFIG.gradient,
palette: params.get('palette') || DEFAULT_CONFIG.palette,
logo: params.get('logo') || DEFAULT_CONFIG.logo, logo: params.get('logo') || DEFAULT_CONFIG.logo,
logoAnim: params.get('logoAnim') || DEFAULT_CONFIG.logoAnim, logoAnim: params.get('logoAnim') || DEFAULT_CONFIG.logoAnim,
elementAnim: params.get('elementAnim') || DEFAULT_CONFIG.elementAnim, elementAnim: params.get('elementAnim') || DEFAULT_CONFIG.elementAnim,
@@ -116,11 +118,14 @@
// ===== Background Configuration ===== // ===== Background Configuration =====
function configureBackground(config) { function configureBackground(config) {
const { bg, gradient } = config; const { bg, gradient, palette } = config;
// Remove all background classes // Remove all background classes
elements.background.className = 'background'; elements.background.className = 'background';
// Apply color palette
elements.background.classList.add(`palette--${palette}`);
// Apply gradient type // Apply gradient type
elements.background.classList.add(`background--${gradient}`); elements.background.classList.add(`background--${gradient}`);
@@ -416,6 +421,17 @@
messages.push(`Background: Animated ${config.gradient}`); 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') { if (config.logo === 'static') {
messages.push('Logo: Static'); messages.push('Logo: Static');
} else if (config.logo === 'animated') { } else if (config.logo === 'animated') {
@@ -458,6 +474,12 @@
const currentIndex = gradients.indexOf(currentConfig.gradient); const currentIndex = gradients.indexOf(currentConfig.gradient);
currentConfig.gradient = gradients[(currentIndex + 1) % gradients.length]; currentConfig.gradient = gradients[(currentIndex + 1) % gradients.length];
break; 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': case 'l':
// Cycle logo animations // Cycle logo animations
const logoStates = ['static', 'animated', 'full']; const logoStates = ['static', 'animated', 'full'];