107 lines
3.8 KiB
HTML
107 lines
3.8 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="it">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>🎰 ELSA GAMBLING — Assegnazione Stanze</title>
|
|
|
|
<!-- Font: Orbitron (LED/tech), Anton & Bebas (display) -->
|
|
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
|
<link
|
|
href="https://fonts.googleapis.com/css2?family=Anton&family=Bebas+Neue&family=Orbitron:wght@500;700;900&display=swap"
|
|
rel="stylesheet"
|
|
/>
|
|
|
|
<link rel="stylesheet" href="styles.css" />
|
|
</head>
|
|
<body>
|
|
<!-- Sfondo 3D: pioggia di monete (three.js) -->
|
|
<canvas id="bg3d"></canvas>
|
|
<!-- Coriandoli (canvas-confetti) sopra a tutto -->
|
|
<canvas id="confetti"></canvas>
|
|
|
|
<div id="app">
|
|
<header class="topbar">
|
|
<div class="brand">
|
|
<span class="brand-emoji">🎰</span>
|
|
<span class="brand-text neon-pink">ELSA</span>
|
|
<span class="brand-text neon-gold">GAMBLING</span>
|
|
<span class="brand-emoji">🎰</span>
|
|
</div>
|
|
<div class="hud">
|
|
<div class="hud-box">
|
|
<span class="hud-label">GIRO</span>
|
|
<span id="progress" class="hud-value">0 / 0</span>
|
|
</div>
|
|
<div class="hud-box">
|
|
<span class="hud-label">I TUOI GETTONI</span>
|
|
<span id="balance" class="hud-value led">100</span>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<main class="stage">
|
|
<!-- Colonna sinistra: tabellone stanze -->
|
|
<aside class="panel rooms-panel">
|
|
<h2 class="panel-title">🏠 STANZE</h2>
|
|
<div id="rooms-board" class="rooms-board"></div>
|
|
</aside>
|
|
|
|
<!-- Centro: slot machine -->
|
|
<section class="machine">
|
|
<div class="marquee" id="marquee"></div>
|
|
|
|
<div class="now-playing">
|
|
<span class="np-label">SUL PALCO</span>
|
|
<span id="player-name" class="np-name">—</span>
|
|
</div>
|
|
|
|
<div class="slot">
|
|
<div class="slot-side left"></div>
|
|
<div class="reel-window">
|
|
<div class="payline"></div>
|
|
<div id="reel" class="reel-strip"></div>
|
|
<div class="reel-fade top"></div>
|
|
<div class="reel-fade bottom"></div>
|
|
</div>
|
|
<div class="slot-side right">
|
|
<div class="lever" id="lever"><div class="lever-knob"></div></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="mc" class="mc-line">Benvenuti alla lotteria delle stanze 🎲</div>
|
|
|
|
<div class="controls">
|
|
<button id="btn-primary" class="btn btn-gold">START 🎰</button>
|
|
<button id="btn-auto" class="btn btn-ghost">AUTO ▶</button>
|
|
<button id="btn-reroll" class="btn btn-ghost">RE-ROLL 🎲</button>
|
|
<button id="btn-sound" class="btn btn-ghost">🔊</button>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Colonna destra: scommesse + leaderboard + log -->
|
|
<aside class="panel bet-panel">
|
|
<h2 class="panel-title">💰 SCOMMESSE</h2>
|
|
<div id="odds" class="odds"></div>
|
|
|
|
<h2 class="panel-title">🏆 CLASSIFICA</h2>
|
|
<div id="leaderboard" class="leaderboard"></div>
|
|
|
|
<h2 class="panel-title">📢 CRONACA</h2>
|
|
<div id="log" class="log"></div>
|
|
</aside>
|
|
</main>
|
|
</div>
|
|
|
|
<!-- Librerie via CDN (funzionano anche aprendo il file in locale, serve rete) -->
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/canvas-confetti@1.9.4/dist/confetti.browser.min.js"></script>
|
|
|
|
<!-- Codice app -->
|
|
<script src="data.js"></script>
|
|
<script src="matching.js"></script>
|
|
<script src="app.js"></script>
|
|
</body>
|
|
</html>
|