116 lines
4.6 KiB
HTML
116 lines
4.6 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
<title>CoopGameChooser</title>
|
||
<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>
|
||
<section class="card hidden" id="auth-card">
|
||
<div class="stack horizontal">
|
||
<button class="ghost active" data-auth-tab="login" type="button">Log in</button>
|
||
<button class="ghost" data-auth-tab="register" type="button">Register</button>
|
||
</div>
|
||
<form id="login-form" class="stack auth-form" data-mode="login">
|
||
<input id="login-username" name="username" maxlength="64" placeholder="Username" autocomplete="username" required />
|
||
<input id="login-password" name="password" type="password" placeholder="Password" autocomplete="current-password" required />
|
||
<button type="submit">Log in</button>
|
||
</form>
|
||
<form id="register-form" class="stack auth-form hidden" data-mode="register">
|
||
<input id="register-username" name="username" maxlength="64" placeholder="Username" autocomplete="username" required />
|
||
<input id="register-password" name="password" type="password" placeholder="Password" autocomplete="new-password" required />
|
||
<input id="register-displayName" name="displayName" maxlength="64" placeholder="Display name (shows to group)" />
|
||
<button type="submit">Create account</button>
|
||
</form>
|
||
</section>
|
||
|
||
<div class="status-bar">
|
||
<div class="name-bar">
|
||
<label for="name-input" class="label">Name</label>
|
||
<input id="name-input" maxlength="64" placeholder="Pick a name" />
|
||
<button id="save-name" class="ghost">Save</button>
|
||
<button id="logout" class="ghost">Logout</button>
|
||
<span class="hint warning hidden" id="name-warning">Name required</span>
|
||
</div>
|
||
<div class="phase-bar">
|
||
<span class="status-dot"></span>
|
||
<span id="phase-pill">Loading…</span>
|
||
<span class="counts" id="counts">—</span>
|
||
</div>
|
||
</div>
|
||
|
||
<main class="grid">
|
||
<section id="actions-card">
|
||
<div id="suggest-view" class="phase-view hidden">
|
||
<div class="card">
|
||
<h2>Suggest (up to 3)</h2>
|
||
<p class="hint">Only you can see your suggestions until Reveal.</p>
|
||
<form id="suggest-form" class="stack">
|
||
<input name="name" required maxlength="100" placeholder="Game name *" />
|
||
<input name="genre" maxlength="50" placeholder="Genre" />
|
||
<textarea name="description" maxlength="500" placeholder="Short description"></textarea>
|
||
<div class="stack horizontal">
|
||
<input name="screenshotUrl" maxlength="2048" placeholder="Screenshot URL" />
|
||
<input name="youtubeUrl" maxlength="2048" placeholder="YouTube URL" />
|
||
<input name="gameUrl" maxlength="2048" placeholder="Game website URL" />
|
||
</div>
|
||
<button type="submit">Submit</button>
|
||
</form>
|
||
</div>
|
||
<div class="card subcard">
|
||
<h3>Your suggestions</h3>
|
||
<div id="my-suggestions" class="card-grid"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="reveal-view" class="phase-view hidden">
|
||
<h2>All Suggestions</h2>
|
||
<div id="all-suggestions" class="card-grid"></div>
|
||
</div>
|
||
|
||
<div id="vote-view" class="phase-view hidden">
|
||
<h2>Vote 0–10</h2>
|
||
<div id="vote-list" class="card-grid"></div>
|
||
</div>
|
||
|
||
<div id="results-view" class="phase-view hidden">
|
||
<h2>Results</h2>
|
||
<div id="results-list" class="card-grid results-grid"></div>
|
||
</div>
|
||
</section>
|
||
</main>
|
||
|
||
<button id="admin-toggle" class="admin-toggle" title="Admin tools">•••</button>
|
||
<section class="card admin-panel hidden" id="admin-card">
|
||
<div class="panel-header">
|
||
<h3>Admin</h3>
|
||
<button id="admin-close" class="ghost">✕</button>
|
||
</div>
|
||
<label class="stack">
|
||
<span class="label">Admin key</span>
|
||
<input id="admin-key" type="password" placeholder="X-Admin-Key" />
|
||
</label>
|
||
<div class="stack horizontal">
|
||
<select id="phase-select">
|
||
<option>Suggest</option>
|
||
<option>Reveal</option>
|
||
<option>Vote</option>
|
||
<option>Results</option>
|
||
</select>
|
||
<button id="set-phase">Set phase</button>
|
||
</div>
|
||
<div class="stack horizontal">
|
||
<button id="reset" class="danger">Reset (keep players)</button>
|
||
<button id="factory-reset" class="danger">Factory reset</button>
|
||
</div>
|
||
</section>
|
||
|
||
<div id="toast" class="toast hidden"></div>
|
||
|
||
<script type="module" src="app.js"></script>
|
||
</body>
|
||
</html>
|