xTr1m/GameList
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

UX overhaul: card layout, admin overlay, status bar, and phase-safe inputs

Browse Source
This commit is contained in:
Frank Tovar
2026-01-28 15:37:11 +01:00
parent 16e7067902
commit abd0720821
3 changed files with 230 additions and 108 deletions
Download Patch File Download Diff File Expand all files Collapse all files

97
wwwroot/index.html
View File

@@ -7,34 +7,29 @@
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header class="hero">
<div>
<h1>CoopGameChooser</h1>
<p class="subtitle">Blind suggestions, blind votes, quick decision.</p>
</div>
<div class="phase-pill" id="phase-pill">Loading…</div>
</header>
<div class="status-bar">
<span class="status-dot"></span>
<span id="phase-pill">Loading…</span>
<span class="counts" id="counts">—</span>
</div>
<main class="grid">
<section class="card" id="identity-card">
<h2>Your Name</h2>
<label class="stack">
<span class="label">Display name</span>
<input id="name-input" maxlength="64" placeholder="Pick a name" />
</label>
<button id="save-name">Save</button>
<p class="hint" id="player-id"></p>
</section>
<section class="card" id="phase-card">
<h2>Current Phase</h2>
<p id="phase-description">Loading…</p>
<p class="hint" id="counts"></p>
</section>
<section class="card" id="actions-card">
<div id="suggest-view" class="phase-view hidden">
<h2>Suggest (up to 3)</h2>
<div class="split">
<div>
<h2>Suggest (up to 3)</h2>
<p class="hint">Only you can see your suggestions until Reveal.</p>
</div>
<div class="name-box">
<label class="stack">
<span class="label">Your name</span>
<input id="name-input" maxlength="64" placeholder="Pick a name" />
</label>
<button id="save-name" class="ghost">Save</button>
<p class="hint" id="player-id"></p>
</div>
</div>
<form id="suggest-form" class="stack">
<input name="name" required maxlength="100" placeholder="Game name *" />
<input name="genre" maxlength="50" placeholder="Genre" />
@@ -45,47 +40,51 @@
</div>
<button type="submit">Submit</button>
</form>
<ul id="my-suggestions" class="list"></ul>
<div id="my-suggestions" class="card-grid"></div>
</div>
<div id="reveal-view" class="phase-view hidden">
<h2>All Suggestions</h2>
<ul id="all-suggestions" class="list"></ul>
<div id="all-suggestions" class="card-grid"></div>
</div>
<div id="vote-view" class="phase-view hidden">
<h2>Vote 0–10</h2>
<ul id="vote-list" class="list"></ul>
<div id="vote-list" class="card-grid"></div>
</div>
<div id="results-view" class="phase-view hidden">
<h2>Results</h2>
<ol id="results-list" class="list"></ol>
</div>
</section>
<section class="card" id="admin-card">
<h2>Admin</h2>
<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 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 src="app.js"></script>