Initial commit: fuesse.sexy — Where's the Feet
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>
This commit is contained in:
52
public/index.html
Normal file
52
public/index.html
Normal file
@@ -0,0 +1,52 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user