davide/plm-lottery
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

Redesign the user dashboard with a modern fintech-style layout

Browse Source 
Restructures app/static/index.html's visual design without touching any JS
logic or element IDs:

- Typography switched to IBM Plex Sans (financial/trustworthy pairing),
  Fira Code kept for addresses and numeric mono values.
- Design tokens extended with elevation shadows, an inset-surface color,
  and a scaled border-radius system; cards/buttons get subtle depth instead
  of flat borders.
- Navigation goes adaptive: a native-app-style fixed bottom tab bar on
  mobile (thumb-reachable), promoted back to an inline tab strip once the
  viewport is wide enough (>=720px) to fit one comfortably under the header.
- Top bar decluttered: balance shown as a highlighted pill (icon + value),
  Guida/Segnala un bug/Esci condensed into icon buttons with tooltips and
  aria-labels instead of full-text links.
- Round-status card gets a subtle gradient "hero" treatment to read as the
  central live widget of the dashboard.
- Content width now adapts from 480px (mobile) to 620px (>=720px) instead
  of staying phone-narrow on desktop; safe-area insets reserved for the
  fixed bottom bar and toast stack.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
davide
2026-07-22 14:50:17 +02:00
co-authored by Claude Sonnet 5
parent 2b645f5e37
commit 1acb6c3b16
1 changed files with 157 additions and 61 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/static/index.html
+157 -61
View File
@@ -5,48 +5,68 @@
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>PLM Lottery</title>
<style>
@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@500;600&family=Fira+Sans:wght@400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@500;600&family=IBM+Plex+Sans:wght@400;500;600;700&display=swap');
:root {
--color-background: #F8FAFC;
--color-surface: #FFFFFF;
--color-surface-inset: #F1F5F9;
--color-foreground: #0F172A;
--color-muted-foreground: #64748B;
--color-border: #E2E8F0;
--color-primary: #F59E0B;
--color-on-primary: #0F172A;
--color-secondary: #FBBF24;
--color-accent: #7C3AED;
--color-destructive: #DC2626;
--color-destructive-bg: #FEF2F2;
--color-success: #16A34A;
--color-success-bg: #F0FDF4;
--color-ring: #F59E0B;
--radius: 12px;
--radius-sm: 8px;
--radius: 14px;
--radius-lg: 20px;
--shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.05);
--shadow-md: 0 8px 24px -8px rgba(15, 23, 42, 0.14);
--content-width: 480px;
--nav-bottom-height: 68px;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
font-family: 'Fira Sans', system-ui, sans-serif;
font-family: 'IBM Plex Sans', system-ui, sans-serif;
background: var(--color-background);
color: var(--color-foreground);
line-height: 1.5;
-webkit-font-smoothing: antialiased;
}
.app-shell { max-width: 480px; margin: 0 auto; padding: 24px 20px 80px; }
.app-shell { max-width: var(--content-width); margin: 0 auto; padding: 20px 20px 32px; }
.mono { font-family: 'Fira Code', monospace; }
.mono { font-family: 'Fira Code', ui-monospace, monospace; }
h1, h2, h3 { font-family: inherit; letter-spacing: -0.01em; }
.section-label {
font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
color: var(--color-muted-foreground); margin: 0 2px 10px;
}
.card {
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius);
box-shadow: var(--shadow-sm);
padding: 20px;
margin-bottom: 16px;
}
.card h2 { font-size: 1rem; font-weight: 600; margin: 0 0 4px; }
.card .hint { color: var(--color-muted-foreground); font-size: 0.85rem; margin: 0 0 14px; }
.card .hint { color: var(--color-muted-foreground); font-size: 0.85rem; margin: 0 0 14px; line-height: 1.45; }
.card .hint:last-child { margin-bottom: 0; }
.tabs { display: flex; gap: 4px; margin-bottom: 16px; border-bottom: 1px solid var(--color-border); }
.tab {
@@ -58,12 +78,12 @@
.tab-panel { display: none; }
.tab-panel.active { display: block; }
label { display: block; font-size: 0.85rem; font-weight: 500; color: var(--color-muted-foreground); margin-top: 12px; margin-bottom: 6px; }
label { display: block; font-size: 0.85rem; font-weight: 500; color: var(--color-muted-foreground); margin-top: 14px; margin-bottom: 6px; }
label:first-child { margin-top: 0; }
input {
width: 100%; padding: 10px 12px; font-size: 0.95rem; font-family: inherit;
border: 1px solid var(--color-border); border-radius: 8px; background: var(--color-surface);
width: 100%; min-height: 44px; padding: 10px 12px; font-size: 0.95rem; font-family: inherit;
border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-surface);
color: var(--color-foreground); transition: border-color 150ms, box-shadow 150ms;
}
input:focus {
@@ -76,66 +96,119 @@
min-height: 44px; padding: 0 18px; margin-top: 16px; width: 100%;
font-family: inherit; font-size: 0.95rem; font-weight: 600;
background: var(--color-primary); color: var(--color-on-primary);
border: none; border-radius: 8px; cursor: pointer;
transition: filter 150ms, transform 150ms;
border: none; border-radius: var(--radius-sm); cursor: pointer;
box-shadow: var(--shadow-sm);
transition: filter 150ms, transform 150ms, box-shadow 150ms;
}
button:hover { filter: brightness(0.94); }
button:hover { filter: brightness(0.96); box-shadow: var(--shadow-md); }
button:active { transform: scale(0.98); }
button:disabled { opacity: 0.6; cursor: default; }
button:disabled { opacity: 0.6; cursor: default; box-shadow: none; }
button:focus-visible { outline: 2px solid var(--color-ring); outline-offset: 2px; }
button.secondary {
width: auto; margin-top: 0; padding: 0 12px; min-height: 36px;
background: var(--color-background); color: var(--color-foreground);
border: 1px solid var(--color-border);
width: auto; margin-top: 0; padding: 0 12px; min-height: 40px;
background: var(--color-surface-inset); color: var(--color-foreground);
border: 1px solid var(--color-border); box-shadow: none;
}
button.secondary:hover { filter: none; background: var(--color-border); box-shadow: none; }
button.link, a.link {
width: auto; margin-top: 0; padding: 0; min-height: auto;
width: auto; min-height: 44px; margin-top: 0; padding: 0 2px;
display: inline-flex; align-items: center;
background: none; color: var(--color-muted-foreground); font-weight: 500;
font-size: 0.85rem; text-decoration: underline;
font-size: 0.82rem; box-shadow: none; text-decoration: none;
}
button.link:hover, a.link:hover { filter: none; color: var(--color-foreground); }
button.link:hover, a.link:hover { filter: none; color: var(--color-foreground); box-shadow: none; }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
/* --- sticky app navbar: identity row + section tabs, shown only when logged in --- */
.app-navbar {
position: sticky; top: 0; z-index: 20;
background: color-mix(in srgb, var(--color-surface) 92%, transparent);
backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
border-bottom: 1px solid var(--color-border); margin-bottom: 20px;
}
/* --- app navbar: brand/balance row (sticky top) + section nav (bottom tab bar on
mobile, promoted back to an inline tab strip once there's room — see the
min-width breakpoint below), shown only when logged in --- */
.app-navbar-top {
max-width: 480px; margin: 0 auto; padding: 12px 20px 8px;
position: sticky; top: 0; z-index: 20;
background: color-mix(in srgb, var(--color-surface) 90%, transparent);
backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
border-bottom: 1px solid var(--color-border);
}
.app-navbar-top-inner {
max-width: var(--content-width); margin: 0 auto; padding: 12px 20px;
display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.app-navbar-top .brand { font-weight: 700; font-size: 1rem; letter-spacing: -0.01em; }
.app-navbar-account { display: flex; align-items: center; gap: 10px; }
.app-navbar-account .name { font-weight: 600; font-size: 0.85rem; }
.app-navbar-account .navbar-balance { font-weight: 600; font-size: 0.85rem; color: var(--color-primary); white-space: nowrap; }
.app-navbar-top .brand { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 1rem; letter-spacing: -0.01em; }
.app-navbar-top .brand-mark {
width: 26px; height: 26px; border-radius: 8px; flex-shrink: 0;
background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
display: flex; align-items: center; justify-content: center;
color: var(--color-on-primary); font-weight: 800; font-size: 0.8rem;
}
.app-navbar-account { display: flex; align-items: center; gap: 6px; }
.app-navbar-account .navbar-username { display: none; font-weight: 600; font-size: 0.85rem; margin-right: 2px; }
@media (min-width: 420px) { .app-navbar-account .navbar-username { display: inline; } }
.app-navbar-account .navbar-balance {
display: inline-flex; align-items: center; gap: 5px;
font-weight: 700; font-size: 0.85rem; white-space: nowrap;
background: color-mix(in srgb, var(--color-primary) 14%, transparent);
border: 1px solid color-mix(in srgb, var(--color-primary) 30%, transparent);
color: color-mix(in srgb, var(--color-primary) 70%, var(--color-foreground));
padding: 6px 10px; border-radius: 999px;
}
.app-navbar-account .icon-link {
width: 36px; height: 36px; min-height: 36px; padding: 0; margin: 0; border-radius: 999px;
justify-content: center;
}
.app-navbar-account .icon-link:hover { background: var(--color-surface-inset); }
.app-navbar-account .icon-link .icon { width: 18px; height: 18px; }
.app-navbar-tabs { max-width: 480px; margin: 0 auto; padding: 0 12px; display: flex; }
/* Bottom tab bar on narrow (mobile) viewports — thumb-reachable, app-like. */
.app-navbar-tabs {
position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
max-width: var(--content-width); margin: 0 auto;
background: color-mix(in srgb, var(--color-surface) 94%, transparent);
backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
border-top: 1px solid var(--color-border);
box-shadow: 0 -8px 24px -12px rgba(15, 23, 42, 0.18);
display: flex; padding: 4px 8px calc(4px + env(safe-area-inset-bottom, 0px));
}
.app-navbar-tabs button.navbar-tab {
flex: 1; width: auto; min-height: auto; margin-top: 0; padding: 8px 4px 10px;
display: flex; flex-direction: column; align-items: center; gap: 3px;
font-size: 0.72rem; font-weight: 600; font-family: inherit; cursor: pointer;
background: none; color: var(--color-muted-foreground);
border: none; border-bottom: 2px solid transparent; margin-bottom: -1px;
transition: color 150ms, border-color 150ms;
flex: 1; width: auto; min-height: 56px; margin-top: 0; padding: 8px 4px;
display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
font-size: 0.68rem; font-weight: 600; font-family: inherit; cursor: pointer;
background: none; color: var(--color-muted-foreground); box-shadow: none;
border: none; border-radius: var(--radius-sm);
transition: color 150ms, background 150ms;
}
.app-navbar-tabs button.navbar-tab .icon { width: 20px; height: 20px; }
.app-navbar-tabs button.navbar-tab.active { color: var(--color-primary); }
.app-navbar-tabs button.navbar-tab.active .icon { color: var(--color-primary); }
.app-navbar-tabs button.navbar-tab:hover { filter: none; color: var(--color-foreground); background: var(--color-surface-inset); }
.app-navbar-tabs button.navbar-tab.active:hover { color: var(--color-primary); background: none; }
/* Reserve room so fixed content never sits under the bottom bar or the
iOS/Android home-indicator safe area. */
.app-shell { padding-bottom: calc(var(--nav-bottom-height) + env(safe-area-inset-bottom, 0px) + 20px); }
@media (min-width: 720px) {
:root { --content-width: 620px; }
/* Promote the bottom tab bar back to an ordinary inline strip once there's
enough width for it to sit comfortably under the top bar instead of
floating over thumb-reach real estate. */
.app-navbar-tabs {
position: static; box-shadow: none; border-top: none;
border-bottom: 1px solid var(--color-border);
padding: 4px 12px; gap: 4px;
}
.app-navbar-tabs button.navbar-tab { flex-direction: row; min-height: 44px; font-size: 0.85rem; }
.app-shell { padding-bottom: 40px; }
}
.app-navbar-tabs button.navbar-tab .icon { width: 18px; height: 18px; }
.app-navbar-tabs button.navbar-tab.active { color: var(--color-primary); border-bottom-color: var(--color-primary); }
.app-navbar-tabs button.navbar-tab:hover { filter: none; color: var(--color-foreground); }
.app-navbar-tabs button.navbar-tab.active:hover { color: var(--color-primary); }
.address-box {
display: flex; align-items: center; justify-content: space-between; gap: 8px;
background: var(--color-background); border: 1px solid var(--color-border);
border-radius: 8px; padding: 10px 12px; font-size: 0.85rem; word-break: break-all;
background: var(--color-surface-inset); border: 1px solid var(--color-border);
border-radius: var(--radius-sm); padding: 10px 12px; font-size: 0.85rem; word-break: break-all;
}
.balance-value { font-size: 2rem; font-weight: 700; }
.balance-value { font-size: 2rem; font-weight: 700; letter-spacing: -0.02em; }
.balance-unit { color: var(--color-muted-foreground); font-size: 1rem; font-weight: 500; }
.icon { width: 16px; height: 16px; flex-shrink: 0; }
@@ -143,7 +216,7 @@
.dash-panel { display: none; }
.dash-panel.active { display: block; }
.qr-box { display: flex; justify-content: center; padding: 16px; background: #fff; border: 1px solid var(--color-border); border-radius: 10px; margin-top: 14px; }
.qr-box { display: flex; justify-content: center; padding: 16px; background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-sm); margin-top: 14px; }
.qr-box img { width: 200px; height: 200px; image-rendering: pixelated; }
.hidden { display: none !important; }
@@ -162,12 +235,14 @@
.draw-result.lose { color: var(--color-muted-foreground); }
#toast-container {
position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%);
position: fixed; left: 50%; transform: translateX(-50%);
bottom: calc(var(--nav-bottom-height) + env(safe-area-inset-bottom, 0px) + 12px);
display: flex; flex-direction: column; gap: 8px; z-index: 100; width: calc(100% - 40px); max-width: 440px;
}
@media (min-width: 720px) { #toast-container { bottom: 20px; } }
.toast {
display: flex; align-items: flex-start; gap: 8px;
padding: 12px 14px; border-radius: 8px; font-size: 0.85rem; font-weight: 500;
padding: 12px 14px; border-radius: var(--radius-sm); font-size: 0.85rem; font-weight: 500;
box-shadow: 0 4px 12px rgba(15, 23, 42, 0.12);
animation: toast-in 200ms ease-out;
}
@@ -199,7 +274,7 @@
padding: 4px 10px; border-radius: 999px; margin-bottom: 14px;
}
.hero h1 {
font-size: 1.75rem; font-weight: 700; letter-spacing: -0.02em; margin: 0 0 8px;
font-size: 1.85rem; font-weight: 700; letter-spacing: -0.02em; margin: 0 0 8px;
background: linear-gradient(135deg, var(--color-foreground), var(--color-accent) 120%);
-webkit-background-clip: text; background-clip: text; color: transparent;
}
@@ -208,9 +283,10 @@
.hero-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 22px 0; }
.hero-step {
background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius);
padding: 14px 8px; transition: transform 150ms, border-color 150ms;
box-shadow: var(--shadow-sm);
padding: 14px 8px; transition: transform 150ms, border-color 150ms, box-shadow 150ms;
}
.hero-step:hover { transform: translateY(-2px); border-color: var(--color-ring); }
.hero-step:hover { transform: translateY(-2px); border-color: var(--color-ring); box-shadow: var(--shadow-md); }
.hero-step .step-icon {
width: 32px; height: 32px; margin: 0 auto 8px; border-radius: 999px;
background: color-mix(in srgb, var(--color-primary) 14%, transparent); color: var(--color-primary);
@@ -228,6 +304,15 @@
}
.trust-pill .icon { width: 13px; height: 13px; color: var(--color-success); flex-shrink: 0; }
/* --- round status: a "hero" ticket-style card, always visible above the panels --- */
.card.round-card {
background:
radial-gradient(320px circle at 100% 0%, color-mix(in srgb, var(--color-accent) 10%, transparent), transparent 70%),
var(--color-surface);
border-color: color-mix(in srgb, var(--color-primary) 25%, var(--color-border));
}
.round-card .hint { margin: 0; }
/* --- glowing card while a round is drawing --- */
.card.drawing-glow {
border-color: color-mix(in srgb, var(--color-primary) 55%, var(--color-border));
@@ -250,7 +335,7 @@
/* --- network / lottery status strip, shown on every screen --- */
.chain-bar {
display: flex; align-items: center; justify-content: space-between; gap: 10px;
font-size: 0.78rem; padding: 10px 2px 16px; margin-bottom: 8px;
font-size: 0.78rem; padding: 12px 2px 16px; margin-bottom: 4px;
border-bottom: 1px solid var(--color-border);
}
.chain-status-pill { display: inline-flex; align-items: center; gap: 7px; font-weight: 600; color: var(--color-foreground); }
@@ -289,15 +374,26 @@
</head>
<body>
<nav class="app-navbar hidden" id="app-navbar" aria-label="Sezioni">
<nav class="hidden" id="app-navbar" aria-label="Sezioni">
<div class="app-navbar-top">
<span class="brand">PLM Lottery</span>
<div class="app-navbar-account">
<span class="name" id="dash-username"></span>
<span class="navbar-balance mono" id="navbar-balance">— PLM</span>
<a class="link" href="/guida" target="_blank" rel="noopener">Guida</a>
<a class="link" href="https://github.com/REPLACE_ME/plm-lottery/issues/new" target="_blank" rel="noopener">Segnala un bug</a>
<button class="link" onclick="logout()">Esci</button>
<div class="app-navbar-top-inner">
<span class="brand"><span class="brand-mark">P</span> PLM Lottery</span>
<div class="app-navbar-account">
<span class="navbar-username" id="dash-username"></span>
<span class="navbar-balance mono">
<svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="7" width="20" height="14" rx="2"/><path d="M16 21V5a2 2 0 0 0-2-2H6a2 2 0 0 0-2 2v16"/></svg>
<span id="navbar-balance">— PLM</span>
</span>
<a class="link icon-link" href="/guida" target="_blank" rel="noopener" title="Guida" aria-label="Apri la guida utente">
<svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 2-3 4"/><path d="M12 17h.01"/></svg>
</a>
<a class="link icon-link" href="https://github.com/REPLACE_ME/plm-lottery/issues/new" target="_blank" rel="noopener" title="Segnala un bug" aria-label="Segnala un bug su GitHub">
<svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M8 2v3M16 2v3M12 12v-2a2 2 0 1 1 2 2h-2Z"/><rect x="6" y="10" width="12" height="10" rx="4"/><path d="M6 15H3M21 15h-3M9 20v-3M15 20v-3"/></svg>
</a>
<button class="link icon-link" onclick="logout()" title="Esci" aria-label="Esci dall'account">
<svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/><path d="M16 17l5-5-5-5M21 12H9"/></svg>
</button>
</div>
</div>
</div>
<div class="app-navbar-tabs">
@@ -391,7 +487,7 @@
<section id="dashboard-section" class="hidden">
<div class="card" id="round-card">
<div class="card round-card" id="round-card">
<div class="row-between" id="round-normal-row">
<h2 id="round-title">Round —</h2>
<span class="mono" id="round-timer" style="font-size:1.1rem;font-weight:700">--:--</span>