ecdbd2ee0d
- Treffer-Toleranz: Ziel wird geometrisch + bevorzugt getroffen, auch wenn verdeckt - Zwei Ranglisten: Hall of Fame (Allzeit-Top-5) + Heute (Top-10) - Anti-Cheat: server-autoritative Sessions (start/hit), Score = Server-Zahl, Mindestabstand gegen Auto-Klicker, Deckelung nach Spielzeit; Score ohne Session -> 400 - CLI (server/admin.js): list / delete <name> / clear-today / clear-all - Zwei Betriebsmodi per CLI (live, ohne Neustart): public (/ = Spiel) und private (/ gesperrt, Spiel unter geheimem /pfad) + "not allowed to play"-Seite - Board-Icons von Emojis auf echte SVG-Icons, Board heisst "Hall of Fame" Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
83 lines
3.8 KiB
HTML
83 lines
3.8 KiB
HTML
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
|
|
<title>füsse.sexy — WANTED!</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="app">
|
|
<!-- ===== Startseite ===== -->
|
|
<section id="home">
|
|
<div class="home-inner">
|
|
<h1 class="brand">füsse<span class="brand-dot">.</span>sexy</h1>
|
|
<p class="tagline"><b>WANTED!</b> — schnapp dir den gesuchten Fuß, bevor die Zeit abläuft.</p>
|
|
<button id="play-btn" class="big-btn">▶ Spielen</button>
|
|
|
|
<div class="boards">
|
|
<div class="board">
|
|
<h2><svg class="ico" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M8 21h8"/><path d="M12 17v4"/><path d="M7 4h10v5a5 5 0 0 1-10 0V4Z"/><path d="M7 6H4v1a3 3 0 0 0 3 3"/><path d="M17 6h3v1a3 3 0 0 1-3 3"/></svg> Hall of Fame</h2>
|
|
<ol id="lb-alltime" class="leaderboard"></ol>
|
|
</div>
|
|
<div class="board">
|
|
<h2><svg class="ico" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="18" rx="2"/><path d="M3 9h18M8 2v4M16 2v4"/></svg> Heute</h2>
|
|
<ol id="lb-today" class="leaderboard"></ol>
|
|
</div>
|
|
</div>
|
|
|
|
<button id="change-name" class="link-btn">Name ändern</button>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ===== Spiel ===== -->
|
|
<section id="game" class="hidden">
|
|
<header id="hud">
|
|
<div class="wanted-poster">
|
|
<div class="wanted-title">WANTED</div>
|
|
<div class="wanted-foot"><img id="wanted-img" alt="gesuchter Fuß" draggable="false" /></div>
|
|
<div class="wanted-reward">schnapp ihn!</div>
|
|
</div>
|
|
<div id="hud-right">
|
|
<div class="score-box">Score <span id="score">0</span></div>
|
|
<div id="timer-wrap"><div id="timer-bar"></div></div>
|
|
</div>
|
|
</header>
|
|
|
|
<main id="field"></main>
|
|
<div id="feedback"></div>
|
|
</section>
|
|
|
|
<!-- ===== Game Over ===== -->
|
|
<div id="gameover" class="hidden">
|
|
<div class="go-card">
|
|
<div class="go-emoji">🦶⏱️</div>
|
|
<h2>Zeit um!</h2>
|
|
<p class="go-score">Score: <span id="final-score">0</span></p>
|
|
|
|
<div id="name-ask" class="hidden">
|
|
<label for="name-input">Dein Name für die Rangliste:</label>
|
|
<div class="name-row">
|
|
<input id="name-input" maxlength="20" placeholder="Name" autocomplete="off" />
|
|
<button id="save-score" class="big-btn small">OK</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="boards tight">
|
|
<div class="board">
|
|
<h2><svg class="ico" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M8 21h8"/><path d="M12 17v4"/><path d="M7 4h10v5a5 5 0 0 1-10 0V4Z"/><path d="M7 6H4v1a3 3 0 0 0 3 3"/><path d="M17 6h3v1a3 3 0 0 1-3 3"/></svg> Hall of Fame</h2>
|
|
<ol id="go-alltime" class="leaderboard"></ol>
|
|
</div>
|
|
<div class="board">
|
|
<h2><svg class="ico" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="18" rx="2"/><path d="M3 9h18M8 2v4M16 2v4"/></svg> Heute</h2>
|
|
<ol id="go-today" class="leaderboard"></ol>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="go-actions">
|
|
<button id="play-again" class="big-btn">▶ Nochmal</button>
|
|
<button id="to-home" class="link-btn">Startseite</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script type="module" src="/js/app.js"></script>
|