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

Adjusted name ux

Browse Source
This commit is contained in:
Frank Tovar
2026-01-28 16:54:52 +01:00
parent 5b1c9eb7e3
commit e6b341d837
2 changed files with 26 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
wwwroot/index.html
View File

@@ -8,21 +8,23 @@
</head>
<body>
<div class="status-bar">
<span class="status-dot"></span>
<span id="phase-pill">Loading…</span>
<span class="counts" id="counts">—</span>
</div>
<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>
<span class="hint warning hidden" id="name-warning">Name required</span>
<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>
<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 class="card" id="actions-card">
<section id="actions-card">
<div id="suggest-view" class="phase-view hidden">
<div class="card subcard">
<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">

22
wwwroot/styles.css
View File

@@ -10,10 +10,8 @@ body {
}
.status-bar {
display: flex;
display: block;
align-items: center;
gap: 10px;
padding: 10px 12px;
background: rgba(15, 23, 42, 0.8);
border: 1px solid #1f2937;
border-radius: 10px;
@@ -31,18 +29,20 @@ body {
.counts {
color: #9ca3af;
font-size: 13px;
margin-left: 12px;
}
.name-bar {
.phase-bar {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 12px;
margin-top: 8px;
background: rgba(15, 23, 42, 0.8);
border: 1px solid #1f2937;
border-radius: 10px;
box-shadow: 0 6px 16px rgba(0,0,0,0.2);
}
.name-bar {
display: flex;
gap: 10px;
padding: 10px 12px;
align-items: center;
}
.name-bar input { width: 180px; }
.name-bar .hint { margin: 0; }
@@ -139,6 +139,10 @@ button.ghost {
min-height: 220px;
}
.subcard {
margin-top: 16px;
}
.card-visual {
height: 200px;
background: linear-gradient(135deg, #1d4ed8, #22c55e);