mirror of
https://github.com/shadoll/www.shadoll.git
synced 2026-08-28 19:43:26 +00:00
86 lines
4.1 KiB
HTML
86 lines
4.1 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">
|
|
<!-- Logo centered at origin (0,0) in a 2000x2000 viewBox that extends from -745 to 1255 in both directions -->
|
|
<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>B</kbd> Toggle background animation (static ↔ animated)</div>
|
|
<div class="help-item"><kbd>G</kbd> Cycle gradient types (linear → radial → conic)</div>
|
|
</div>
|
|
|
|
<div class="help-section">
|
|
<h3>Logo Animations</h3>
|
|
<div class="help-item"><kbd>L</kbd> Cycle logo states (static → animated → full)</div>
|
|
<div class="help-item"><kbd>A</kbd> Cycle logo body animations (shake → rotate → tilt → all)</div>
|
|
<div class="help-item"><kbd>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>+</kbd> Increase speed (+0.25x)</div>
|
|
<div class="help-item"><kbd>-</kbd> Decrease speed (-0.25x)</div>
|
|
<div class="help-item"><kbd>0</kbd> Reset speed to 1x</div>
|
|
</div>
|
|
|
|
<div class="help-section">
|
|
<h3>Other</h3>
|
|
<div class="help-item"><kbd>R</kbd> Reset all to defaults</div>
|
|
<div class="help-item"><kbd>H</kbd> or <kbd>?</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&logo=full&logoAnim=all&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>logo:</strong> static | animated | full</div>
|
|
<div><strong>logoAnim:</strong> shake | rotate | tilt | 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>
|