146 lines
4.3 KiB
HTML
146 lines
4.3 KiB
HTML
<!doctype html>
|
|
<html lang="de">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
<meta name="theme-color" content="#f8f3e7" />
|
|
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
|
|
<title>Imposter</title>
|
|
<link rel="stylesheet" href="styles.css" />
|
|
<link rel="manifest" href="manifest.json" />
|
|
<link rel="apple-touch-icon" href="apple-touch-icon.png" />
|
|
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
|
<link
|
|
href="https://fonts.googleapis.com/css2?family=Unbounded:wght@300;500;700&family=Space+Grotesk:wght@400;600&display=swap"
|
|
rel="stylesheet"
|
|
/>
|
|
</head>
|
|
<body>
|
|
<main class="app">
|
|
<section class="screen" id="setup">
|
|
<header class="hero">
|
|
<div class="hero__tag">Handy weiterreichen</div>
|
|
<h1>Imposter</h1>
|
|
<p>
|
|
Trage Spieler ein, starte die Runde, und zeige jedem sein
|
|
Wort oder "IMPOSTER". Danach findet ihr heraus, wer das Wort
|
|
nicht kennt.
|
|
</p>
|
|
</header>
|
|
<div class="card">
|
|
<h2>Spieler</h2>
|
|
<div class="input-row">
|
|
<input
|
|
id="player-input"
|
|
type="text"
|
|
placeholder="Name eingeben"
|
|
autocomplete="off"
|
|
/>
|
|
<button id="add-player" class="btn">Hinzufuegen</button>
|
|
</div>
|
|
<ul id="player-list" class="player-list"></ul>
|
|
<div class="actions">
|
|
<button id="clear-players" class="btn btn--ghost">
|
|
Liste leeren
|
|
</button>
|
|
<button id="start-game" class="btn btn--primary">
|
|
Runde starten
|
|
</button>
|
|
</div>
|
|
<p id="setup-hint" class="hint">Mindestens 3 Spieler.</p>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="screen hidden" id="round">
|
|
<div class="card">
|
|
<div class="round-header">
|
|
<div class="round-count" id="round-count">Spieler 1 / 1</div>
|
|
<button id="restart" class="btn btn--ghost">Neue Runde</button>
|
|
</div>
|
|
<div id="round-screen" class="pass-screen">
|
|
<h2>Phase 1: Zuweisung</h2>
|
|
<div class="player-chip" id="current-player">Spieler</div>
|
|
<div class="flip-card" id="reveal-card">
|
|
<div class="flip-card__inner">
|
|
<div class="flip-card__front">
|
|
<div class="reveal-label">Antippen zum Aufdecken</div>
|
|
</div>
|
|
<div class="flip-card__back">
|
|
<div class="reveal-label">Dein Hinweis</div>
|
|
<div class="reveal-word" id="reveal-word">WORT</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<p class="hint">
|
|
Tippe auf die Karte, um dein Wort zu sehen. Gib das Handy
|
|
danach weiter.
|
|
</p>
|
|
<div class="actions actions--end">
|
|
<button id="handoff" class="btn btn--primary btn--big">
|
|
Weitergeben
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="screen hidden" id="discussion">
|
|
<div class="card">
|
|
<div class="round-header">
|
|
<div class="round-count" id="discussion-count">
|
|
Diskussion 1 / 1
|
|
</div>
|
|
<button id="discussion-restart" class="btn btn--ghost">
|
|
Neue Runde
|
|
</button>
|
|
</div>
|
|
<div class="pass-screen">
|
|
<h2>Wer ist dran?</h2>
|
|
<div
|
|
class="player-chip player-chip--large"
|
|
id="discussion-player"
|
|
>
|
|
Spieler
|
|
</div>
|
|
<p class="hint">Gib das Handy weiter.</p>
|
|
<div class="actions">
|
|
<button id="imposter-found" class="btn btn--ghost">
|
|
Imposter gefunden
|
|
</button>
|
|
<button
|
|
id="discussion-next"
|
|
class="btn btn--primary btn--big"
|
|
>
|
|
Weitergeben
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="screen hidden" id="done">
|
|
<div class="card">
|
|
<h2>Runde beendet</h2>
|
|
<p>Optional: Neue Runde starten oder Spieler bearbeiten.</p>
|
|
<div class="actions">
|
|
<button id="edit-players" class="btn btn--ghost">
|
|
Spieler bearbeiten
|
|
</button>
|
|
<button id="play-again" class="btn btn--primary">
|
|
Neue Runde
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
|
|
<div class="update-banner hidden" id="update-banner">
|
|
Neue Version verfügbar
|
|
<button id="update-btn" class="btn btn--primary">Aktualisieren</button>
|
|
</div>
|
|
|
|
<script src="app.js"></script>
|
|
</body>
|
|
</html>
|