161 lines
7.5 KiB
HTML
161 lines
7.5 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
<title>Pick'n'Play</title>
|
||
<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=Baloo+2:wght@400;500;600;700&family=Nunito:wght@400;600;700&display=swap" rel="stylesheet">
|
||
<link href="https://fonts.googleapis.com/css2?family=Noto+Color+Emoji&display=swap" rel="stylesheet">
|
||
<link rel="icon" type="image/x-icon" href="favicon.ico">
|
||
<link rel="stylesheet" href="styles.css">
|
||
<!-- Optional: set data-app-base if served from a subfolder (e.g., /vote) -->
|
||
<meta name="app-base" content="">
|
||
</head>
|
||
<body class="page">
|
||
<section class="card hidden" id="auth-card">
|
||
<div class="auth-logo">
|
||
<img src="logo.png" alt="Pick'n'Play logo" />
|
||
</div>
|
||
<div class="auth-title-row">
|
||
<h2 id="auth-title" data-i18n="auth.loginHeading">Log in</h2>
|
||
<div class="lang-switch" id="lang-switch-auth">
|
||
<button class="lang-button chip icon" type="button" aria-label="Language" title="Language">🌐</button>
|
||
<div class="lang-menu hidden">
|
||
<button type="button" data-lang="en" title="English" data-i18n-attr="title" class="flag-button">🇺🇸</button>
|
||
<button type="button" data-lang="de" title="Deutsch" data-i18n-attr="title" class="flag-button">🇩🇪</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<form id="login-form" class="stack auth-form" data-mode="login">
|
||
<label class="stack">
|
||
<span class="label" data-i18n="auth.username">Username</span>
|
||
<input id="login-username" name="username" maxlength="24" autocomplete="username" required />
|
||
</label>
|
||
<label class="stack">
|
||
<span class="label" data-i18n="auth.password">Password</span>
|
||
<input id="login-password" name="password" type="password" autocomplete="current-password" required />
|
||
</label>
|
||
<button type="submit" data-i18n="auth.loginSubmit">Log in</button>
|
||
</form>
|
||
<form id="register-form" class="stack auth-form hidden" data-mode="register">
|
||
<label class="stack">
|
||
<span class="label" data-i18n="auth.username">Username</span>
|
||
<input id="register-username" name="username" maxlength="24" autocomplete="username" required />
|
||
</label>
|
||
<label class="stack">
|
||
<span class="label" data-i18n="auth.password">Password</span>
|
||
<input id="register-password" name="password" type="password" autocomplete="new-password" required />
|
||
</label>
|
||
<label class="stack">
|
||
<span class="label" data-i18n="auth.displayName">Display name (shows to group)</span>
|
||
<input id="register-displayName" name="displayName" maxlength="16" required />
|
||
</label>
|
||
<label class="stack">
|
||
<span class="label" data-i18n="auth.adminKey">Admin key (optional)</span>
|
||
<input id="register-adminkey" name="adminKey" type="password" maxlength="128" />
|
||
</label>
|
||
<button type="submit" data-i18n="auth.registerSubmit">Create account</button>
|
||
</form>
|
||
<div class="stack">
|
||
<a class="auth-toggle-link link" id="auth-toggle" href="#" data-i18n="auth.switchToRegister">Need an account? Register</a>
|
||
</div>
|
||
</section>
|
||
|
||
<section>
|
||
<div class="status-bar">
|
||
<img src="logo.png" alt="Pick'n'Play logo" class="logo-mark">
|
||
<div class="status-left">
|
||
<span id="welcome-text" data-i18n="auth.welcome">Welcome!</span>
|
||
<a id="logout" href="#" class="link inline-link" data-i18n="auth.logout">Logout</a>
|
||
</div>
|
||
<div class="status-center">
|
||
<span id="phase-pill" data-i18n="phase.loading">Loading…</span>
|
||
<span class="counts" id="counts">—</span>
|
||
</div>
|
||
<div class="status-right">
|
||
<div class="lang-switch" id="lang-switch-status">
|
||
<button class="lang-button chip icon" type="button" aria-label="Language" title="Language">🌐</button>
|
||
<div class="lang-menu hidden">
|
||
<button type="button" data-lang="en" title="English" data-i18n-attr="title" class="flag-button">🇺🇸</button>
|
||
<button type="button" data-lang="de" title="Deutsch" data-i18n-attr="title" class="flag-button">🇩🇪</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<main class="grid">
|
||
<section id="actions-card">
|
||
<div id="suggest-view" class="phase-view hidden">
|
||
<div class="phase-header">
|
||
<div class="phase-text">
|
||
<h2 data-i18n="suggest.title">Suggest (up to 5)</h2>
|
||
<p class="hint" data-i18n="suggest.hint">Only you can see your suggestions until voting starts.</p>
|
||
</div>
|
||
<button id="open-suggest-modal" class="ghost" data-i18n="suggest.addButton">Suggest a game</button>
|
||
</div>
|
||
<div class="card subcard">
|
||
<h3 data-i18n="section.mySuggestions">Your suggestions</h3>
|
||
<div id="my-suggestions" class="card-grid"></div>
|
||
</div>
|
||
<div class="card subcard phase-nav" id="nav-suggest">
|
||
<div class="nav-text">
|
||
<strong data-i18n="nav.freezeTitle">Ready to reveal?</strong>
|
||
<p data-i18n="nav.freezeHint">Moving forward will freeze your suggestions. Titles become locked; only extra details stay editable.</p>
|
||
</div>
|
||
<div class="nav-actions">
|
||
<button id="nav-suggest-next" class="primary" data-i18n="nav.next">Next</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="vote-view" class="phase-view hidden">
|
||
<div class="phase-header">
|
||
<h2 id="vote-title" data-i18n="section.vote">Vote 0–10</h2>
|
||
</div>
|
||
<div id="vote-list" class="card-grid"></div>
|
||
<div class="card subcard phase-nav" id="nav-vote">
|
||
<div class="nav-text">
|
||
<p data-i18n="nav.voteHint">Cast votes for every game to unlock results.</p>
|
||
<span class="badge warning hidden" id="vote-missing" data-i18n="vote.missingWarn">You haven’t voted yet for all games.</span>
|
||
<span class="badge warning hidden" id="vote-wait-admin" data-i18n="vote.waitAdmin">Waiting for admin to unlock results.</span>
|
||
</div>
|
||
<div class="nav-actions">
|
||
<button id="nav-vote-prev" class="ghost" data-i18n="nav.prev">Back</button>
|
||
<button id="finalize-votes" class="secondary" type="button" data-i18n="vote.finalize">Finalize votes</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="results-view" class="phase-view hidden">
|
||
<div class="phase-header">
|
||
<h2 data-i18n="section.results">Results</h2>
|
||
</div>
|
||
<div id="results-list" class="card-grid results-grid"></div>
|
||
</div>
|
||
</section>
|
||
</main>
|
||
|
||
<button id="admin-toggle" class="admin-toggle" title="Admin tools" data-i18n="admin.tools" data-i18n-attr="title">•••</button>
|
||
<section class="card admin-panel hidden" id="admin-card">
|
||
<div class="panel-header">
|
||
<h3 data-i18n="admin.title">Admin</h3>
|
||
<button id="admin-close" class="ghost">✕</button>
|
||
</div>
|
||
<label class="stack toggle-row">
|
||
<input type="checkbox" id="results-open" />
|
||
<span data-i18n="admin.resultsOpenToggle">Allow results phase</span>
|
||
</label>
|
||
<div class="stack horizontal">
|
||
<button id="reset" class="danger" data-i18n="admin.reset">Reset (keep players)</button>
|
||
<button id="factory-reset" class="danger" data-i18n="admin.factoryReset">Factory reset</button>
|
||
</div>
|
||
</section>
|
||
|
||
<div id="toast" class="toast hidden"></div>
|
||
|
||
<script type="module" src="app.js"></script>
|
||
</body>
|
||
</html>
|