Turn the user dashboard into a menu-driven layout with a deposit QR
Deposito/Bet/Prelievo are now separate panels behind a top nav instead
of one long scroll of cards, and the Deposito panel renders the
deposit address as a QR code (via GET /qr/{address}) alongside the
existing copy-to-clipboard address box.
Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
Claude Sonnet 5
+83
-31
@@ -118,6 +118,26 @@
|
||||
|
||||
.icon { width: 16px; height: 16px; flex-shrink: 0; }
|
||||
|
||||
nav.menu { display: flex; gap: 4px; margin-bottom: 16px; }
|
||||
nav.menu button.nav-item {
|
||||
flex: 1; width: auto; margin-top: 0; min-height: 56px; padding: 8px 4px;
|
||||
flex-direction: column; gap: 4px; font-size: 0.8rem; font-weight: 600;
|
||||
background: var(--color-surface); color: var(--color-muted-foreground);
|
||||
border: 1px solid var(--color-border); border-radius: 10px;
|
||||
}
|
||||
nav.menu button.nav-item .icon { width: 20px; height: 20px; }
|
||||
nav.menu button.nav-item.active {
|
||||
background: var(--color-primary); color: var(--color-on-primary); border-color: var(--color-primary);
|
||||
}
|
||||
nav.menu button.nav-item:hover { filter: none; border-color: var(--color-ring); }
|
||||
nav.menu button.nav-item.active:hover { filter: brightness(0.94); }
|
||||
|
||||
.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 img { width: 200px; height: 200px; image-rendering: pixelated; }
|
||||
|
||||
.hidden { display: none !important; }
|
||||
|
||||
#toast-container {
|
||||
@@ -178,43 +198,67 @@
|
||||
</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>
|
||||
<nav class="menu" aria-label="Sezioni">
|
||||
<button class="nav-item active" id="nav-deposit" onclick="switchPanel('deposit')">
|
||||
<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>
|
||||
Deposito
|
||||
</button>
|
||||
<button class="nav-item" id="nav-bet" onclick="switchPanel('bet')">
|
||||
<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="6" width="20" height="12" rx="2"/><path d="M6 12h.01M12 12h.01M18 12h.01"/></svg>
|
||||
Bet
|
||||
</button>
|
||||
<button class="nav-item" id="nav-withdraw" onclick="switchPanel('withdraw')">
|
||||
<svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 19V5M5 12l7-7 7 7"/></svg>
|
||||
Prelievo
|
||||
</button>
|
||||
</nav>
|
||||
|
||||
<div class="dash-panel active" id="panel-deposit">
|
||||
<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 class="qr-box">
|
||||
<img id="dash-qr" alt="QR code dell'indirizzo di deposito">
|
||||
</div>
|
||||
</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 class="dash-panel" id="panel-bet">
|
||||
<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>
|
||||
|
||||
<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 class="dash-panel" id="panel-withdraw">
|
||||
<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>
|
||||
</div>
|
||||
|
||||
</section>
|
||||
@@ -265,11 +309,19 @@ function switchTab(name) {
|
||||
document.getElementById('panel-register').classList.toggle('active', name === 'register');
|
||||
}
|
||||
|
||||
function switchPanel(name) {
|
||||
for (const key of ['deposit', 'bet', 'withdraw']) {
|
||||
document.getElementById('nav-' + key).classList.toggle('active', key === name);
|
||||
document.getElementById('panel-' + key).classList.toggle('active', key === name);
|
||||
}
|
||||
}
|
||||
|
||||
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;
|
||||
document.getElementById('dash-qr').src = '/qr/' + encodeURIComponent(address);
|
||||
refreshMe();
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user