From 8c659e2be580315640e9a7abfcaff78742878d56 Mon Sep 17 00:00:00 2001
From: Davide Grilli <davide.grilli@outlook.com>
Date: Tue, 21 Jul 2026 10:46:55 +0200
Subject: [PATCH] Redesign the test/admin UIs and drop the on-page log panel
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

New visual system from the ui-ux-pro-max skill (gold/purple accents,
Fira Sans + Fira Code, light mode, WCAG AA contrast): card layout,
tabbed login/register, loading states on every button, and toast
feedback instead of a raw request/response JSON dump. The dump is gone
from both pages — diagnosing an error now means reading logs/app.log,
not staring at the page.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
---
 app/static/admin.html | 209 ++++++++++++++++++------
 app/static/index.html | 366 ++++++++++++++++++++++++++++++++++--------
 2 files changed, 451 insertions(+), 124 deletions(-)
diff --git a/app/static/admin.html b/app/static/admin.html
index e692dfc..104bee3 100644
--- a/app/static/admin.html
+++ b/app/static/admin.html
@@ -2,51 +2,157 @@
 <html lang="it">
 <head>
 <meta charset="utf-8">
-<title>PLM Lottery - Admin</title>
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>PLM Lottery — Admin</title>
 <style>
-  body { font-family: system-ui, sans-serif; max-width: 640px; margin: 40px auto; padding: 0 16px; color: #222; }
-  h1 { font-size: 1.4rem; }
-  section { border: 1px solid #ddd; border-radius: 8px; padding: 16px; margin-bottom: 16px; }
-  label { display: block; margin-top: 8px; font-size: 0.9rem; color: #555; }
-  input { width: 100%; padding: 6px; margin-top: 2px; box-sizing: border-box; }
-  button { margin-top: 12px; padding: 8px 14px; cursor: pointer; }
-  pre { background: #f5f5f5; padding: 10px; border-radius: 6px; overflow-x: auto; white-space: pre-wrap; word-break: break-all; }
-  .hidden { display: none; }
+  @import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@500;600&family=Fira+Sans:wght@400;500;600;700&display=swap');
+
+  :root {
+    --color-background: #F8FAFC;
+    --color-surface: #FFFFFF;
+    --color-foreground: #0F172A;
+    --color-muted-foreground: #64748B;
+    --color-border: #E2E8F0;
+    --color-primary: #F59E0B;
+    --color-on-primary: #0F172A;
+    --color-destructive: #DC2626;
+    --color-destructive-bg: #FEF2F2;
+    --color-success: #16A34A;
+    --color-success-bg: #F0FDF4;
+    --color-ring: #F59E0B;
+    --radius: 12px;
+  }
+
+  * { box-sizing: border-box; }
+
+  body {
+    font-family: 'Fira Sans', system-ui, sans-serif;
+    background: var(--color-background);
+    color: var(--color-foreground);
+    max-width: 480px;
+    margin: 0 auto;
+    padding: 32px 20px 80px;
+    line-height: 1.5;
+  }
+
+  .mono { font-family: 'Fira Code', monospace; }
+
+  header { margin-bottom: 24px; }
+  header h1 { font-size: 1.375rem; font-weight: 700; margin: 0; letter-spacing: -0.01em; }
+  header p { color: var(--color-muted-foreground); font-size: 0.9rem; margin: 4px 0 0; }
+
+  .card {
+    background: var(--color-surface);
+    border: 1px solid var(--color-border);
+    border-radius: var(--radius);
+    padding: 20px;
+    margin-bottom: 16px;
+  }
+
+  .card .hint { color: var(--color-muted-foreground); font-size: 0.85rem; margin: 0 0 14px; }
+
+  label { display: block; font-size: 0.85rem; font-weight: 500; color: var(--color-muted-foreground); margin-top: 12px; 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);
+    color: var(--color-foreground); transition: border-color 150ms, box-shadow 150ms;
+  }
+  input:focus {
+    outline: none; border-color: var(--color-ring);
+    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-ring) 25%, transparent);
+  }
+
+  button {
+    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
+    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;
+  }
+  button:hover { filter: brightness(0.94); }
+  button:active { transform: scale(0.98); }
+  button:disabled { opacity: 0.6; cursor: default; }
+  button:focus-visible { outline: 2px solid var(--color-ring); outline-offset: 2px; }
+
+  button.secondary {
+    background: var(--color-background); color: var(--color-foreground);
+    border: 1px solid var(--color-border);
+  }
+
+  .hidden { display: none !important; }
+
+  #toast-container {
+    position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%);
+    display: flex; flex-direction: column; gap: 8px; z-index: 100; width: calc(100% - 40px); max-width: 440px;
+  }
+  .toast {
+    padding: 12px 14px; border-radius: 8px; font-size: 0.85rem; font-weight: 500;
+    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.12);
+    animation: toast-in 200ms ease-out;
+  }
+  .toast.success { background: var(--color-success-bg); color: var(--color-success); }
+  .toast.error { background: var(--color-destructive-bg); color: var(--color-destructive); }
+  @keyframes toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
+
+  @media (prefers-reduced-motion: reduce) {
+    * { animation: none !important; transition: none !important; }
+  }
 </style>
 </head>
 <body>
 
-<h1>PLM Lottery - Pannello Admin</h1>
+<header>
+  <h1>PLM Lottery — Admin</h1>
+  <p>Configurazione operativa del round</p>
+</header>
 
-<section>
-  <p style="font-size:0.85rem;color:#555;margin-top:0">
-    Configurazione operativa (indirizzo fee, importo bet), salvata nel database e modificabile in
-    qualsiasi momento senza riavviare il server. Serve il token admin (variabile <code>ADMIN_TOKEN</code>
-    nel file <code>.env</code> del server).
+<div class="card">
+  <p class="hint">
+    Salvata nel database, modificabile in qualsiasi momento senza riavviare il server.
+    Serve il token admin (<code>ADMIN_TOKEN</code> nel <code>.env</code> del server).
   </p>
 
-  <label>Admin token</label>
+  <label for="admin-token">Admin token</label>
   <input id="admin-token" type="password" placeholder="valore di ADMIN_TOKEN">
 
-  <button onclick="adminLoad()">Carica configurazione attuale</button>
+  <button class="secondary" onclick="adminLoad()" id="load-btn">Carica configurazione attuale</button>
 
   <div id="admin-form" class="hidden">
-    <label>Fee address (dove finisce il 30% di ogni round)</label>
-    <input id="admin-fee-address" placeholder="plm1q...">
-    <label>Bet amount (PLM)</label>
-    <input id="admin-bet-amount" placeholder="es. 10 per 10 PLM">
-    <button onclick="adminSave()">Salva</button>
-    <div id="admin-status" style="margin-top:8px;font-size:0.9rem"></div>
+    <label for="admin-fee-address">Fee address (dove finisce il 30% di ogni round)</label>
+    <input id="admin-fee-address" class="mono" placeholder="plm1q...">
+    <label for="admin-bet-amount">Bet amount (PLM)</label>
+    <input id="admin-bet-amount" inputmode="decimal" placeholder="es. 10">
+    <button onclick="adminSave()" id="save-btn">Salva</button>
   </div>
-</section>
+</div>
 
-<h3>Log</h3>
-<pre id="log"></pre>
+<div id="toast-container" aria-live="polite"></div>
 
 <script>
-function log(obj) {
-  const el = document.getElementById('log');
-  el.textContent = JSON.stringify(obj, null, 2) + "\n\n" + el.textContent;
+const SATS_PER_PLM = 100000000;
+
+function toast(message, type) {
+  const container = document.getElementById('toast-container');
+  const el = document.createElement('div');
+  el.className = 'toast ' + type;
+  el.textContent = message;
+  container.appendChild(el);
+  setTimeout(() => el.remove(), 4000);
+}
+
+async function withLoading(button, label, fn) {
+  const original = button.textContent;
+  button.disabled = true;
+  button.textContent = label;
+  try {
+    await fn();
+  } finally {
+    button.disabled = false;
+    button.textContent = original;
+  }
 }
 
 async function callAdmin(method, path, body) {
@@ -54,41 +160,38 @@ async function callAdmin(method, path, body) {
   const headers = { 'Content-Type': 'application/json', 'X-Admin-Token': adminToken };
   const res = await fetch(path, { method, headers, body: body ? JSON.stringify(body) : undefined });
   const data = await res.json().catch(() => ({}));
-  log({ request: method + ' ' + path, status: res.status, response: data });
   if (!res.ok) throw new Error(data.detail || res.statusText);
   return data;
 }
 
-function adminStatus(msg, ok) {
-  const el = document.getElementById('admin-status');
-  el.textContent = msg;
-  el.style.color = ok ? '#2a7a2a' : '#a02020';
-}
-
-const SATS_PER_PLM = 100000000;
-
 async function adminLoad() {
-  try {
-    const data = await callAdmin('GET', '/admin/config');
-    document.getElementById('admin-fee-address').value = data.fee_address;
-    document.getElementById('admin-bet-amount').value = data.bet_amount_sats / SATS_PER_PLM;
-    document.getElementById('admin-form').classList.remove('hidden');
-    adminStatus('Configurazione caricata.', true);
-  } catch (e) {
-    adminStatus('Errore: token admin non valido o server non raggiungibile.', false);
-  }
+  const btn = document.getElementById('load-btn');
+  await withLoading(btn, 'Caricamento…', async () => {
+    try {
+      const data = await callAdmin('GET', '/admin/config');
+      document.getElementById('admin-fee-address').value = data.fee_address;
+      document.getElementById('admin-bet-amount').value = data.bet_amount_sats / SATS_PER_PLM;
+      document.getElementById('admin-form').classList.remove('hidden');
+      toast('Configurazione caricata.', 'success');
+    } catch (e) {
+      toast('Errore: ' + e.message, 'error');
+    }
+  });
 }
 
 async function adminSave() {
+  const btn = document.getElementById('save-btn');
   const feeAddress = document.getElementById('admin-fee-address').value;
   const betAmountPlm = parseFloat(document.getElementById('admin-bet-amount').value);
   const betAmountSats = Math.round(betAmountPlm * SATS_PER_PLM);
-  try {
-    await callAdmin('PUT', '/admin/config', { fee_address: feeAddress, bet_amount_sats: betAmountSats });
-    adminStatus('Salvato.', true);
-  } catch (e) {
-    adminStatus('Errore nel salvataggio: ' + e.message, false);
-  }
+  await withLoading(btn, 'Salvataggio…', async () => {
+    try {
+      await callAdmin('PUT', '/admin/config', { fee_address: feeAddress, bet_amount_sats: betAmountSats });
+      toast('Configurazione salvata.', 'success');
+    } catch (e) {
+      toast('Errore nel salvataggio: ' + e.message, 'error');
+    }
+  });
 }
 </script>
 
diff --git a/app/static/index.html b/app/static/index.html
index a5924a5..2f2ad71 100644
--- a/app/static/index.html
+++ b/app/static/index.html
@@ -2,78 +2,251 @@
 <html lang="it">
 <head>
 <meta charset="utf-8">
-<title>PLM Lottery - Test UI</title>
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>PLM Lottery — Test</title>
 <style>
-  body { font-family: system-ui, sans-serif; max-width: 640px; margin: 40px auto; padding: 0 16px; color: #222; }
-  h1 { font-size: 1.4rem; }
-  section { border: 1px solid #ddd; border-radius: 8px; padding: 16px; margin-bottom: 16px; }
-  label { display: block; margin-top: 8px; font-size: 0.9rem; color: #555; }
-  input { width: 100%; padding: 6px; margin-top: 2px; box-sizing: border-box; }
-  button { margin-top: 12px; padding: 8px 14px; cursor: pointer; }
-  .row { display: flex; gap: 8px; }
-  .row > div { flex: 1; }
-  pre { background: #f5f5f5; padding: 10px; border-radius: 6px; overflow-x: auto; white-space: pre-wrap; word-break: break-all; }
-  .hidden { display: none; }
-  .addr { font-family: monospace; background: #f0f0f0; padding: 4px 6px; border-radius: 4px; }
-  .balance { font-size: 1.6rem; font-weight: 600; }
+  @import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@500;600&family=Fira+Sans:wght@400;500;600;700&display=swap');
+
+  :root {
+    --color-background: #F8FAFC;
+    --color-surface: #FFFFFF;
+    --color-foreground: #0F172A;
+    --color-muted-foreground: #64748B;
+    --color-border: #E2E8F0;
+    --color-primary: #F59E0B;
+    --color-on-primary: #0F172A;
+    --color-accent: #7C3AED;
+    --color-destructive: #DC2626;
+    --color-destructive-bg: #FEF2F2;
+    --color-success: #16A34A;
+    --color-success-bg: #F0FDF4;
+    --color-ring: #F59E0B;
+    --radius: 12px;
+  }
+
+  * { box-sizing: border-box; }
+
+  body {
+    font-family: 'Fira Sans', system-ui, sans-serif;
+    background: var(--color-background);
+    color: var(--color-foreground);
+    max-width: 480px;
+    margin: 0 auto;
+    padding: 32px 20px 80px;
+    line-height: 1.5;
+  }
+
+  .mono { font-family: 'Fira Code', monospace; }
+
+  header { margin-bottom: 24px; }
+  header h1 { font-size: 1.375rem; font-weight: 700; margin: 0; letter-spacing: -0.01em; }
+  header p { color: var(--color-muted-foreground); font-size: 0.9rem; margin: 4px 0 0; }
+
+  .card {
+    background: var(--color-surface);
+    border: 1px solid var(--color-border);
+    border-radius: var(--radius);
+    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; }
+
+  .tabs { display: flex; gap: 4px; margin-bottom: 16px; border-bottom: 1px solid var(--color-border); }
+  .tab {
+    flex: 1; text-align: center; padding: 10px 0; font-weight: 600; font-size: 0.9rem;
+    color: var(--color-muted-foreground); cursor: pointer; border-bottom: 2px solid transparent;
+    margin-bottom: -1px; transition: color 150ms, border-color 150ms;
+  }
+  .tab.active { color: var(--color-foreground); border-bottom-color: var(--color-primary); }
+  .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: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);
+    color: var(--color-foreground); transition: border-color 150ms, box-shadow 150ms;
+  }
+  input:focus {
+    outline: none; border-color: var(--color-ring);
+    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-ring) 25%, transparent);
+  }
+
+  button {
+    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
+    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;
+  }
+  button:hover { filter: brightness(0.94); }
+  button:active { transform: scale(0.98); }
+  button:disabled { opacity: 0.6; cursor: default; }
+  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);
+  }
+
+  button.link {
+    width: auto; margin-top: 0; padding: 0; min-height: auto;
+    background: none; color: var(--color-muted-foreground); font-weight: 500;
+    font-size: 0.85rem; text-decoration: underline;
+  }
+  button.link:hover { filter: none; color: var(--color-foreground); }
+
+  .account-bar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
+  .account-bar .name { font-weight: 600; }
+
+  .row-between { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
+
+  .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;
+  }
+
+  .balance-value { font-size: 2rem; font-weight: 700; }
+  .balance-unit { color: var(--color-muted-foreground); font-size: 1rem; font-weight: 500; }
+
+  .icon { width: 16px; height: 16px; flex-shrink: 0; }
+
+  .hidden { display: none !important; }
+
+  #toast-container {
+    position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%);
+    display: flex; flex-direction: column; gap: 8px; z-index: 100; width: calc(100% - 40px); max-width: 440px;
+  }
+  .toast {
+    display: flex; align-items: flex-start; gap: 8px;
+    padding: 12px 14px; border-radius: 8px; font-size: 0.85rem; font-weight: 500;
+    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.12);
+    animation: toast-in 200ms ease-out;
+  }
+  .toast.success { background: var(--color-success-bg); color: var(--color-success); }
+  .toast.error { background: var(--color-destructive-bg); color: var(--color-destructive); }
+  @keyframes toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
+
+  @media (prefers-reduced-motion: reduce) {
+    * { animation: none !important; transition: none !important; }
+  }
 </style>
 </head>
 <body>
 
-<h1>PLM Lottery - Test UI</h1>
+<header>
+  <h1>PLM Lottery</h1>
+  <p>Dashboard di test — mainnet reale</p>
+</header>
 
-<section id="auth-section">
-  <div class="row">
-    <div>
-      <h3>Registrati</h3>
-      <label>Username</label>
-      <input id="reg-username">
-      <label>Password</label>
-      <input id="reg-password" type="password">
-      <button onclick="register()">Registra</button>
-    </div>
-    <div>
-      <h3>Login</h3>
-      <label>Username</label>
-      <input id="login-username">
-      <label>Password</label>
-      <input id="login-password" type="password">
-      <button onclick="login()">Login</button>
-    </div>
+<section id="auth-section" class="card">
+  <div class="tabs">
+    <div class="tab active" id="tab-login" onclick="switchTab('login')">Login</div>
+    <div class="tab" id="tab-register" onclick="switchTab('register')">Registrati</div>
+  </div>
+
+  <div class="tab-panel active" id="panel-login">
+    <label for="login-username">Username</label>
+    <input id="login-username" autocomplete="username">
+    <label for="login-password">Password</label>
+    <input id="login-password" type="password" autocomplete="current-password">
+    <button onclick="login()" id="login-btn">Accedi</button>
+  </div>
+
+  <div class="tab-panel" id="panel-register">
+    <label for="reg-username">Username</label>
+    <input id="reg-username" autocomplete="username">
+    <label for="reg-password">Password</label>
+    <input id="reg-password" type="password" autocomplete="new-password">
+    <button onclick="register()" id="register-btn">Crea account</button>
   </div>
 </section>
 
 <section id="dashboard-section" class="hidden">
-  <h3>Account: <span id="dash-username"></span> <button onclick="logout()" style="float:right">Logout</button></h3>
-  <div>Indirizzo di deposito / vincite:</div>
-  <div class="addr" id="dash-address"></div>
-  <div style="margin-top:12px">Saldo interno:</div>
-  <div class="balance"><span id="dash-balance">-</span> PLM <button onclick="refreshMe()">Aggiorna</button></div>
 
-  <hr>
-  <h3>Bet</h3>
-  <button onclick="placeBet()">Piazza bet (10 PLM)</button>
+  <div class="card">
+    <div class="account-bar">
+      <span class="name" id="dash-username"></span>
+      <button class="link" onclick="logout()">Esci</button>
+    </div>
+  </div>
+
+  <div class="card">
+    <h2>Saldo interno</h2>
+    <p class="hint">Aggiornato dopo 1 conferma sulla rete</p>
+    <div class="row-between">
+      <div><span class="balance-value mono" id="dash-balance">—</span> <span class="balance-unit">PLM</span></div>
+      <button class="secondary" onclick="refreshMe()" id="refresh-btn" aria-label="Aggiorna saldo">
+        <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12a9 9 0 1 1-2.64-6.36M21 3v6h-6"/></svg>
+        Aggiorna
+      </button>
+    </div>
+  </div>
+
+  <div class="card">
+    <h2>Indirizzo di deposito</h2>
+    <p class="hint">È anche l'indirizzo su cui ricevi eventuali vincite</p>
+    <div class="address-box">
+      <span class="mono" id="dash-address"></span>
+      <button class="secondary" onclick="copyAddress()" aria-label="Copia indirizzo">
+        <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="13" height="13" rx="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg>
+      </button>
+    </div>
+  </div>
+
+  <div class="card">
+    <h2>Bet</h2>
+    <p class="hint">Ingresso fisso al round corrente</p>
+    <button onclick="placeBet()" id="bet-btn">Piazza bet (10 PLM)</button>
+  </div>
+
+  <div class="card">
+    <h2>Withdrawal</h2>
+    <p class="hint">Invia fondi a un indirizzo PLM esterno</p>
+    <label for="wd-address">Indirizzo esterno</label>
+    <input id="wd-address" class="mono" placeholder="plm1q...">
+    <label for="wd-amount">Importo (PLM)</label>
+    <input id="wd-amount" inputmode="decimal" placeholder="es. 2">
+    <button onclick="withdraw()" id="withdraw-btn">Preleva</button>
+  </div>
 
-  <hr>
-  <h3>Withdrawal</h3>
-  <label>Indirizzo esterno</label>
-  <input id="wd-address" placeholder="plm1q...">
-  <label>Importo (PLM)</label>
-  <input id="wd-amount" placeholder="es. 2 per 2 PLM">
-  <button onclick="withdraw()">Preleva</button>
 </section>
 
-<h3>Log</h3>
-<pre id="log"></pre>
+<div id="toast-container" aria-live="polite"></div>
 
 <script>
+const SATS_PER_PLM = 100000000;
+
 let token = localStorage.getItem('plm_token');
 let username = localStorage.getItem('plm_username');
 let address = localStorage.getItem('plm_address');
 
-function log(obj) {
-  const el = document.getElementById('log');
-  el.textContent = JSON.stringify(obj, null, 2) + "\n\n" + el.textContent;
+function toast(message, type) {
+  const container = document.getElementById('toast-container');
+  const el = document.createElement('div');
+  el.className = 'toast ' + type;
+  el.textContent = message;
+  container.appendChild(el);
+  setTimeout(() => el.remove(), 4000);
+}
+
+async function withLoading(button, label, fn) {
+  const original = button.textContent;
+  button.disabled = true;
+  button.textContent = label;
+  try {
+    await fn();
+  } finally {
+    button.disabled = false;
+    button.textContent = original;
+  }
 }
 
 async function call(method, path, body) {
@@ -81,11 +254,17 @@ async function call(method, path, body) {
   if (token) headers['Authorization'] = 'Bearer ' + token;
   const res = await fetch(path, { method, headers, body: body ? JSON.stringify(body) : undefined });
   const data = await res.json().catch(() => ({}));
-  log({ request: method + ' ' + path, status: res.status, response: data });
   if (!res.ok) throw new Error(data.detail || res.statusText);
   return data;
 }
 
+function switchTab(name) {
+  document.getElementById('tab-login').classList.toggle('active', name === 'login');
+  document.getElementById('tab-register').classList.toggle('active', name === 'register');
+  document.getElementById('panel-login').classList.toggle('active', name === 'login');
+  document.getElementById('panel-register').classList.toggle('active', name === 'register');
+}
+
 function showDashboard() {
   document.getElementById('auth-section').classList.add('hidden');
   document.getElementById('dashboard-section').classList.remove('hidden');
@@ -94,26 +273,43 @@ function showDashboard() {
   refreshMe();
 }
 
-async function register() {
-  const u = document.getElementById('reg-username').value;
-  const p = document.getElementById('reg-password').value;
-  const data = await call('POST', '/auth/register', { username: u, password: p });
+function persistSession(data, u) {
   token = data.access_token; username = u; address = data.address;
   localStorage.setItem('plm_token', token);
   localStorage.setItem('plm_username', username);
   localStorage.setItem('plm_address', address);
-  showDashboard();
+}
+
+async function register() {
+  const btn = document.getElementById('register-btn');
+  const u = document.getElementById('reg-username').value;
+  const p = document.getElementById('reg-password').value;
+  await withLoading(btn, 'Creazione…', async () => {
+    try {
+      const data = await call('POST', '/auth/register', { username: u, password: p });
+      persistSession(data, u);
+      toast('Account creato.', 'success');
+      showDashboard();
+    } catch (e) {
+      toast(e.message, 'error');
+    }
+  });
 }
 
 async function login() {
+  const btn = document.getElementById('login-btn');
   const u = document.getElementById('login-username').value;
   const p = document.getElementById('login-password').value;
-  const data = await call('POST', '/auth/login', { username: u, password: p });
-  token = data.access_token; username = u; address = data.address;
-  localStorage.setItem('plm_token', token);
-  localStorage.setItem('plm_username', username);
-  localStorage.setItem('plm_address', address);
-  showDashboard();
+  await withLoading(btn, 'Accesso…', async () => {
+    try {
+      const data = await call('POST', '/auth/login', { username: u, password: p });
+      persistSession(data, u);
+      toast('Accesso riuscito.', 'success');
+      showDashboard();
+    } catch (e) {
+      toast(e.message, 'error');
+    }
+  });
 }
 
 function logout() {
@@ -123,25 +319,53 @@ function logout() {
   document.getElementById('auth-section').classList.remove('hidden');
 }
 
-const SATS_PER_PLM = 100000000;
+async function copyAddress() {
+  try {
+    await navigator.clipboard.writeText(address);
+    toast('Indirizzo copiato.', 'success');
+  } catch (e) {
+    toast('Impossibile copiare automaticamente.', 'error');
+  }
+}
 
 async function refreshMe() {
-  try {
-    const data = await call('GET', '/users/me');
-    document.getElementById('dash-balance').textContent = data.balance_sats / SATS_PER_PLM;
-  } catch (e) {}
+  const btn = document.getElementById('refresh-btn');
+  await withLoading(btn, '…', async () => {
+    try {
+      const data = await call('GET', '/users/me');
+      document.getElementById('dash-balance').textContent = data.balance_sats / SATS_PER_PLM;
+    } catch (e) {
+      toast(e.message, 'error');
+    }
+  });
 }
 
 async function placeBet() {
-  try { await call('POST', '/bets', {}); } catch (e) {}
+  const btn = document.getElementById('bet-btn');
+  await withLoading(btn, 'Invio bet…', async () => {
+    try {
+      const data = await call('POST', '/bets', {});
+      toast('Bet piazzata sul round #' + data.round_id + '.', 'success');
+    } catch (e) {
+      toast(e.message, 'error');
+    }
+  });
   refreshMe();
 }
 
 async function withdraw() {
+  const btn = document.getElementById('withdraw-btn');
   const ext = document.getElementById('wd-address').value;
   const amtPlm = parseFloat(document.getElementById('wd-amount').value);
   const amtSats = Math.round(amtPlm * SATS_PER_PLM);
-  try { await call('POST', '/withdrawals', { external_address: ext, amount_sats: amtSats }); } catch (e) {}
+  await withLoading(btn, 'Invio…', async () => {
+    try {
+      await call('POST', '/withdrawals', { external_address: ext, amount_sats: amtSats });
+      toast('Withdrawal inviato.', 'success');
+    } catch (e) {
+      toast(e.message, 'error');
+    }
+  });
   refreshMe();
 }
 
