From 1acb6c3b16200165f76fe60d2aa81bac0d0c7af9 Mon Sep 17 00:00:00 2001
From: Davide Grilli <davide.grilli@outlook.com>
Date: Wed, 22 Jul 2026 14:50:17 +0200
Subject: [PATCH] Redesign the user dashboard with a modern fintech-style
 layout

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>
---
 app/static/index.html | 218 ++++++++++++++++++++++++++++++------------
 1 file changed, 157 insertions(+), 61 deletions(-)

diff --git a/app/static/index.html b/app/static/index.html
index fac63fc..8ab5cf7 100644
--- a/app/static/index.html
+++ b/app/static/index.html
@@ -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>