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

Initial commit: Shadoll animated placeholder page

Browse Source
This commit is contained in:
sha
2025-12-27 22:47:31 +02:00
commit 04a55a2d49
13 changed files with 2112 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+81
View File
@@ -0,0 +1,81 @@
<!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">&times;</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>
<script src="js/app.js"></script>
</body>
</html>