71 lines
2.4 KiB
HTML
71 lines
2.4 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="board">
|
|
<h2>🏆 Rangliste</h2>
|
|
<ol id="leaderboard" class="leaderboard"></ol>
|
|
</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="board tight">
|
|
<h2>🏆 Rangliste</h2>
|
|
<ol id="go-leaderboard" class="leaderboard"></ol>
|
|
</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>
|