davideandClaude Sonnet 5
8c659e2be5
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>
377 lines
13 KiB
HTML
377 lines
13 KiB
HTML
<!doctype html>
|
|
<html lang="it">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>PLM Lottery — Test</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');
|
|
|
|
: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>
|
|
|
|
<header>
|
|
<h1>PLM Lottery</h1>
|
|
<p>Dashboard di test — mainnet reale</p>
|
|
</header>
|
|
|
|
<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">
|
|
|
|
<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>
|
|
|
|
</section>
|
|
|
|
<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 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) {
|
|
const headers = { 'Content-Type': 'application/json' };
|
|
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(() => ({}));
|
|
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');
|
|
document.getElementById('dash-username').textContent = username;
|
|
document.getElementById('dash-address').textContent = address;
|
|
refreshMe();
|
|
}
|
|
|
|
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);
|
|
}
|
|
|
|
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;
|
|
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() {
|
|
localStorage.clear();
|
|
token = username = address = null;
|
|
document.getElementById('dashboard-section').classList.add('hidden');
|
|
document.getElementById('auth-section').classList.remove('hidden');
|
|
}
|
|
|
|
async function copyAddress() {
|
|
try {
|
|
await navigator.clipboard.writeText(address);
|
|
toast('Indirizzo copiato.', 'success');
|
|
} catch (e) {
|
|
toast('Impossibile copiare automaticamente.', 'error');
|
|
}
|
|
}
|
|
|
|
async function refreshMe() {
|
|
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() {
|
|
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);
|
|
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();
|
|
}
|
|
|
|
if (token) showDashboard();
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|