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> </head>
<body> <body>
<div class="status-bar"> <div class="status-bar">
<span class="status-dot"></span> <div class="name-bar">
<span id="phase-pill">Loading…</span> <label for="name-input" class="label">Name</label>
<span class="counts" id="counts">—</span> <input id="name-input" maxlength="64" placeholder="Pick a name" />
</div> <button id="save-name" class="ghost">Save</button>
<div class="name-bar"> <span class="hint warning hidden" id="name-warning">Name required</span>
<label for="name-input" class="label">Name</label> </div>
<input id="name-input" maxlength="64" placeholder="Pick a name" /> <div class="phase-bar">
<button id="save-name" class="ghost">Save</button> <span class="status-dot"></span>
<span class="hint warning hidden" id="name-warning">Name required</span> <span id="phase-pill">Loading…</span>
<span class="counts" id="counts">—</span>
</div>
</div> </div>
<main class="grid"> <main class="grid">
<section class="card" id="actions-card"> <section id="actions-card">
<div id="suggest-view" class="phase-view hidden"> <div id="suggest-view" class="phase-view hidden">
<div class="card subcard"> <div class="card">
<h2>Suggest (up to 3)</h2> <h2>Suggest (up to 3)</h2>
<p class="hint">Only you can see your suggestions until Reveal.</p> <p class="hint">Only you can see your suggestions until Reveal.</p>
<form id="suggest-form" class="stack"> <form id="suggest-form" class="stack">

22
wwwroot/styles.css
View File

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