b95464670a
- Rendering von SVG-viewBox auf sauberes DOM-Modell (div#world > img) umgestellt:
behebt den Pinch-Fokus-Bug ("zoomt in die Ecke") auf Touch
- Szene fuellt jetzt bildschirmfuellend (Cover) mit eigener Cover-Klemmung statt
Letterbox-Balken (v.a. mobil im Hochformat)
- Tippen ueber Pointer-Events statt click (funktioniert auf Touch, wo panzoom das
synthetische click unterdrueckt); Mehrfinger/Pinch zaehlt nie als Tipp
- touch-action:none aufs Bild -> fluessiges Pinch-Zoom
- Objekte aufrecht (leichte Neigung) statt zufaellig gekippt + dezenter Tiefen-Verlauf
-> wirkt wie eine Szene statt "Haufen"
- Favicon: Fuss-Emoji
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
54 lines
1.8 KiB
HTML
54 lines
1.8 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="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='88'>🦶</text></svg>" />
|
||
<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">
|
||
<div id="world">
|
||
<img id="scene-img" alt="Wimmelbild" draggable="false" />
|
||
</div>
|
||
|
||
<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>
|