mirror of
https://github.com/shadoll/www.shadoll.git
synced 2026-08-28 03:28:32 +00:00
87 lines
4.4 KiB
HTML
87 lines
4.4 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<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="author" content="shadoll">
|
|
<title>shadoll</title>
|
|
<link rel="stylesheet" href="css/styles.css">
|
|
</head>
|
|
<body>
|
|
<div class="background" id="background"></div>
|
|
<div class="logo-container">
|
|
<svg xmlns="http://www.w3.org/2000/svg" id="logo" class="logo" viewBox="-745 -745 2000 2000">
|
|
<g id="shadoll_l" class="logo-element logo-element-l" fill="#222">
|
|
<path d="m286.7 401.2 61.9 60.2v-389.4l-62.4-60.6z" stroke="none" stroke-width="2" stroke-miterlimit="10"/>
|
|
</g>
|
|
<g id="shadoll_s" class="logo-element logo-element-s" fill="#dc2108">
|
|
<path class="s-path-1" d="m161.2 500 106.1-100.8-39-37.2-66.9 63.6z" stroke="none" stroke-width="2" stroke-miterlimit="10"/>
|
|
<path class="s-path-2" d="m275 174.3-113.8 108.9 113.8 108.9v-73.6l-37-35.3 37-36.3z" stroke="none" stroke-width="2" stroke-miterlimit="10"/>
|
|
</g>
|
|
</svg>
|
|
</div>
|
|
<div id="toast" class="toast">
|
|
<div class="toast-title" id="toast-title"></div>
|
|
<div class="toast-message" id="toast-message"></div>
|
|
</div>
|
|
|
|
<button id="help-button" class="help-button" aria-label="Show help">?</button>
|
|
|
|
<div id="help-window" class="help-window">
|
|
<div class="help-header">
|
|
<h2>Keyboard Controls</h2>
|
|
<button id="help-close" class="help-close" aria-label="Close help">×</button>
|
|
</div>
|
|
<div class="help-content">
|
|
<div class="help-section">
|
|
<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="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 class="help-section">
|
|
<h3>Logo Animations</h3>
|
|
<div class="help-item"><kbd data-key="l">L</kbd> Cycle logo states (static → animated → full)</div>
|
|
<div class="help-item"><kbd data-key="a">A</kbd> Cycle logo body animations (shake → rotate → tilt → interactive → mixed → all)</div>
|
|
<div class="help-item"><kbd data-key="e">E</kbd> Cycle element animations (neon → color → explosion → fly → all)</div>
|
|
</div>
|
|
|
|
<div class="help-section">
|
|
<h3>Animation Speed</h3>
|
|
<div class="help-item"><kbd data-key="+">+</kbd> Increase speed (+0.25x)</div>
|
|
<div class="help-item"><kbd data-key="-">-</kbd> Decrease speed (-0.25x)</div>
|
|
<div class="help-item"><kbd data-key="0">0</kbd> Reset speed to 1x</div>
|
|
</div>
|
|
|
|
<div class="help-section">
|
|
<h3>Other</h3>
|
|
<div class="help-item"><kbd data-key="r">R</kbd> Reset all to defaults</div>
|
|
<div class="help-item"><kbd data-key="h">H</kbd> or <kbd data-key="?">?</kbd> Toggle this help</div>
|
|
</div>
|
|
|
|
<div class="help-section help-section-url">
|
|
<h3>URL Parameters</h3>
|
|
<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><strong>bg:</strong> static | animated</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>logoAnim:</strong> shake | rotate | tilt | interactive | mixed | all</div>
|
|
<div><strong>elementAnim:</strong> neon | color | explosion | fly | all</div>
|
|
<div><strong>speed:</strong> 0.1 to 5 (default: 1)</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<footer class="footer">
|
|
<p>© shadoll</p>
|
|
</footer>
|
|
|
|
<script src="js/app.js"></script>
|
|
</body>
|
|
</html>
|