1a9710ec88
Wimmel-Suchspiel: finde 3 versteckte Fuesse in einer randvollen Szene. - Node/Express-Server generiert Szenen prozedural aus einer gemeinsamen Library (library/props = Deko, library/feet = Fuesse); Spezial-Level (emoji) unter scenes/ - Serverseitige Trefferpruefung (nicht per DOM austrickbar) - Frontend rendert die Szene als ein Bild -> fluessiges Zoom/Pan (panzoom) - Dark Mode, kein Start-Screen, Installationsskript + Deploy-Doku (Proxmox LXC) Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
53 lines
1.7 KiB
HTML
53 lines
1.7 KiB
HTML
<meta charset="utf-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
|
||
<title>fuesse.sexy — finde die Füße</title>
|
||
<link rel="stylesheet" href="/css/style.css" />
|
||
|
||
<div id="game">
|
||
<!-- "Gesucht"-Leiste -->
|
||
<header id="legend">
|
||
<div class="legend-label">
|
||
<span class="brand">fuesse<span class="brand-dot">.</span>sexy</span>
|
||
<span class="legend-sub">Finde diese Füße:</span>
|
||
</div>
|
||
<div id="legend-items"></div>
|
||
<div id="legend-counter" class="legend-counter">0 / 3</div>
|
||
</header>
|
||
|
||
<!-- Die "Karte" (Wimmelbild) -->
|
||
<main id="stage">
|
||
<svg id="scene-svg" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid meet">
|
||
<g id="scene-layer"></g>
|
||
</svg>
|
||
|
||
<div id="category-name" class="category-name"></div>
|
||
|
||
<!-- Zoom-Steuerung -->
|
||
<div id="controls">
|
||
<button id="zoom-in" title="Reinzoomen" aria-label="Reinzoomen">+</button>
|
||
<button id="zoom-out" title="Rauszoomen" aria-label="Rauszoomen">−</button>
|
||
<button id="reset-view" title="Ansicht zurücksetzen" aria-label="Ansicht zurücksetzen">⟲</button>
|
||
</div>
|
||
|
||
<!-- Lade-Spinner -->
|
||
<div id="loading" class="hidden">
|
||
<div class="spinner"></div>
|
||
</div>
|
||
|
||
<!-- Treffer/Daneben-Feedback -->
|
||
<div id="toast"></div>
|
||
</main>
|
||
|
||
<!-- Gewinn-Overlay -->
|
||
<div id="win-overlay" class="hidden">
|
||
<div class="win-card">
|
||
<div class="win-emoji">🦶🎉</div>
|
||
<h2>Alle Füße gefunden!</h2>
|
||
<button id="next-scene">Weiter →</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<script src="/vendor/panzoom.min.js"></script>
|
||
<script type="module" src="/js/app.js"></script>
|