mirror of
https://github.com/shadoll/www.shadoll.git
synced 2026-08-28 03:28:32 +00:00
feat: enhance help system with toast notification highlighting and logo documentation
This commit is contained in:
+17
-5
@@ -2,7 +2,7 @@
|
||||
|
||||
All notable changes to the Shadoll Animated Placeholder project will be documented in this file.
|
||||
|
||||
## [2.0.0] - 2025-12-28
|
||||
## [1.2.0] - 2025-12-28
|
||||
|
||||
### Major New Features
|
||||
|
||||
@@ -63,15 +63,25 @@ All notable changes to the Shadoll Animated Placeholder project will be document
|
||||
- **Help System Improvements**:
|
||||
- Multiple help toggles: `H`, `?`, `/` keys
|
||||
- `ESC` key closes help window
|
||||
- Toast notifications moved to top
|
||||
- Toast notifications moved to top with higher z-index (1002)
|
||||
- Toast always appears above help window on mobile
|
||||
- Help button always at bottom-right corner
|
||||
- Removed duplicate/conflicting media query styles
|
||||
|
||||
- **Toast Notification Highlighting**:
|
||||
- Changed settings are highlighted in bold in toast messages
|
||||
- Provides clear visual feedback on what was modified
|
||||
- Uses HTML formatting for emphasis
|
||||
|
||||
- **Footer**: Added copyright notice at bottom center
|
||||
- Semi-transparent white text
|
||||
- Subtle shadow for visibility
|
||||
- Responsive sizing
|
||||
|
||||
- **Logo Documentation**: Added description of logo design
|
||||
- Logo represents "s" and "d" from "shadoll" word
|
||||
- Documented in README.md and CLAUDE.md
|
||||
|
||||
### Changed
|
||||
|
||||
- **Default Animation**: Changed from `tilt` to `mixed`
|
||||
@@ -89,10 +99,12 @@ All notable changes to the Shadoll Animated Placeholder project will be document
|
||||
|
||||
### Files Modified
|
||||
- [index.html](index.html) - Added palette param, footer, data-key attributes
|
||||
- [css/styles.css](css/styles.css) - 6 palettes, liquid glass styles, mobile fixes
|
||||
- [js/app.js](js/app.js) - Interactive controller, viewBox setup, palette cycling
|
||||
- [README.md](README.md) - Updated features and examples
|
||||
- [css/styles.css](css/styles.css) - 6 palettes, liquid glass styles, mobile fixes, toast z-index
|
||||
- [js/app.js](js/app.js) - Interactive controller, viewBox setup, palette cycling, toast highlighting
|
||||
- [README.md](README.md) - Updated features, examples, and logo description
|
||||
- [TODO.md](TODO.md) - Marked completed tasks
|
||||
- [USAGE.md](USAGE.md) - Updated with all new features and examples
|
||||
- [CLAUDE.md](CLAUDE.md) - Added logo design documentation and architectural decisions
|
||||
- [CHANGELOG.md](CHANGELOG.md) - This file
|
||||
|
||||
---
|
||||
|
||||
+1
-1
@@ -424,7 +424,7 @@ html, body {
|
||||
0 2px 8px rgba(0, 0, 0, 0.2),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.3),
|
||||
inset 0 -1px 0 rgba(0, 0, 0, 0.1);
|
||||
z-index: 999;
|
||||
z-index: 1002;
|
||||
opacity: 0;
|
||||
transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
|
||||
pointer-events: none;
|
||||
|
||||
@@ -57,9 +57,9 @@
|
||||
clearTimeout(toastTimeout);
|
||||
}
|
||||
|
||||
// Set toast content
|
||||
// Set toast content (support HTML for highlighting)
|
||||
elements.toastTitle.textContent = title;
|
||||
elements.toastMessage.textContent = message;
|
||||
elements.toastMessage.innerHTML = message;
|
||||
|
||||
// Show toast
|
||||
elements.toast.classList.add('show');
|
||||
@@ -403,7 +403,7 @@
|
||||
}
|
||||
|
||||
// ===== Apply All Configurations =====
|
||||
function applyConfiguration(config, showNotification = false) {
|
||||
function applyConfiguration(config, showNotification = false, changedKey = null) {
|
||||
console.log('Applying configuration:', config);
|
||||
|
||||
configureBackground(config);
|
||||
@@ -415,13 +415,6 @@
|
||||
if (showNotification) {
|
||||
const messages = [];
|
||||
|
||||
if (config.bg === 'static') {
|
||||
messages.push(`Background: Static ${config.gradient}`);
|
||||
} else {
|
||||
messages.push(`Background: Animated ${config.gradient}`);
|
||||
}
|
||||
|
||||
// Add palette info
|
||||
const paletteNames = {
|
||||
'default': 'Default',
|
||||
'blue-yellow': 'Blue-Yellow',
|
||||
@@ -430,17 +423,30 @@
|
||||
'fire': 'Fire',
|
||||
'nature': 'Nature'
|
||||
};
|
||||
messages.push(`Palette: ${paletteNames[config.palette] || config.palette}`);
|
||||
|
||||
// Background
|
||||
const bgText = config.bg === 'static' ? `Static ${config.gradient}` : `Animated ${config.gradient}`;
|
||||
const shouldHighlightBg = changedKey === 'bg' || changedKey === 'gradient';
|
||||
messages.push(shouldHighlightBg ? `<strong>Background: ${bgText}</strong>` : `Background: ${bgText}`);
|
||||
|
||||
// Palette
|
||||
const paletteText = paletteNames[config.palette] || config.palette;
|
||||
messages.push(changedKey === 'palette' ? `<strong>Palette: ${paletteText}</strong>` : `Palette: ${paletteText}`);
|
||||
|
||||
// Logo
|
||||
let logoText;
|
||||
if (config.logo === 'static') {
|
||||
messages.push('Logo: Static');
|
||||
logoText = 'Static';
|
||||
} else if (config.logo === 'animated') {
|
||||
messages.push(`Logo: Elements (${config.elementAnim})`);
|
||||
logoText = `Elements (${config.elementAnim})`;
|
||||
} else {
|
||||
messages.push(`Logo: Full (${config.logoAnim} + ${config.elementAnim})`);
|
||||
logoText = `Full (${config.logoAnim} + ${config.elementAnim})`;
|
||||
}
|
||||
const shouldHighlightLogo = changedKey === 'logo' || changedKey === 'logoAnim' || changedKey === 'elementAnim';
|
||||
messages.push(shouldHighlightLogo ? `<strong>Logo: ${logoText}</strong>` : `Logo: ${logoText}`);
|
||||
|
||||
messages.push(`Speed: ${config.speed}x`);
|
||||
// Speed
|
||||
messages.push(changedKey === 'speed' ? `<strong>Speed: ${config.speed}x</strong>` : `Speed: ${config.speed}x`);
|
||||
|
||||
showToast('Configuration Updated', messages.join(' • '));
|
||||
}
|
||||
@@ -463,58 +469,70 @@
|
||||
let currentConfig = getURLParams();
|
||||
|
||||
document.addEventListener('keydown', (e) => {
|
||||
let changedKey = null;
|
||||
|
||||
switch(e.key.toLowerCase()) {
|
||||
case 'b':
|
||||
// Toggle background animation
|
||||
currentConfig.bg = currentConfig.bg === 'animated' ? 'static' : 'animated';
|
||||
changedKey = 'bg';
|
||||
break;
|
||||
case 'g':
|
||||
// Cycle gradient types
|
||||
const gradients = ['linear', 'radial', 'conic'];
|
||||
const currentIndex = gradients.indexOf(currentConfig.gradient);
|
||||
currentConfig.gradient = gradients[(currentIndex + 1) % gradients.length];
|
||||
changedKey = 'gradient';
|
||||
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];
|
||||
changedKey = 'palette';
|
||||
break;
|
||||
case 'l':
|
||||
// Cycle logo animations
|
||||
const logoStates = ['static', 'animated', 'full'];
|
||||
const logoIndex = logoStates.indexOf(currentConfig.logo);
|
||||
currentConfig.logo = logoStates[(logoIndex + 1) % logoStates.length];
|
||||
changedKey = 'logo';
|
||||
break;
|
||||
case 'a':
|
||||
// Cycle logo body animations
|
||||
const logoAnims = ['shake', 'rotate', 'tilt', 'interactive', 'mixed', 'all'];
|
||||
const animIndex = logoAnims.indexOf(currentConfig.logoAnim);
|
||||
currentConfig.logoAnim = logoAnims[(animIndex + 1) % logoAnims.length];
|
||||
changedKey = 'logoAnim';
|
||||
break;
|
||||
case 'e':
|
||||
// Cycle element animations
|
||||
const elemAnims = ['neon', 'color', 'explosion', 'fly', 'all'];
|
||||
const elemIndex = elemAnims.indexOf(currentConfig.elementAnim);
|
||||
currentConfig.elementAnim = elemAnims[(elemIndex + 1) % elemAnims.length];
|
||||
changedKey = 'elementAnim';
|
||||
break;
|
||||
case '+':
|
||||
case '=':
|
||||
// Increase speed
|
||||
currentConfig.speed = Math.min(5, currentConfig.speed + 0.25);
|
||||
changedKey = 'speed';
|
||||
break;
|
||||
case '-':
|
||||
case '_':
|
||||
// Decrease speed
|
||||
currentConfig.speed = Math.max(0.1, currentConfig.speed - 0.25);
|
||||
changedKey = 'speed';
|
||||
break;
|
||||
case '0':
|
||||
// Reset speed to 1x
|
||||
currentConfig.speed = 1;
|
||||
changedKey = 'speed';
|
||||
break;
|
||||
case 'r':
|
||||
// Reset to defaults
|
||||
currentConfig = { ...DEFAULT_CONFIG };
|
||||
changedKey = 'reset';
|
||||
break;
|
||||
case 'h':
|
||||
case '?':
|
||||
@@ -526,7 +544,7 @@
|
||||
return;
|
||||
}
|
||||
|
||||
applyConfiguration(currentConfig, true); // Show toast notification
|
||||
applyConfiguration(currentConfig, true, changedKey); // Show toast notification with highlight
|
||||
updateURL(currentConfig);
|
||||
});
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user