https://pastein.ru/t/8wN
Загрузка данных
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dice Arena — Меньше 12</title>
<!-- Шрифты и иконки -->
<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=Manrope:wght@400;500;600;700;800&family=Unbounded:wght@500;700;900&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css">
<link rel="stylesheet" href="style.css">
<!-- Конфетти -->
<script src="https://cdn.jsdelivr.net/npm/canvas-confetti@1.9.3/dist/confetti.browser.min.js" defer></script>
<script src="script.js" defer></script>
</head>
<body>
<!-- Живой фон -->
<div class="bg">
<div class="blob b1"></div>
<div class="blob b2"></div>
<div class="blob b3"></div>
<div class="grain"></div>
</div>
<main class="app">
<header class="top">
<div class="brand">
<div class="brand-mark"><i class="fa-solid fa-dice"></i></div>
<div>
<h1>Dice Arena</h1>
<p class="subtitle">Набери больше соперника, но строго меньше 12</p>
</div>
</div>
<div class="top-actions">
<button class="icon-btn" id="sound-btn" title="Звук"></button>
<button class="icon-btn" id="rules-btn" title="Правила"><i class="fa-solid fa-circle-question"></i></button>
</div>
</header>
<!-- Экран авторизации -->
<section id="auth-screen" class="card auth reveal">
<h2>Вход на арену</h2>
<p class="muted">Новый ник — аккаунт создастся автоматически</p>
<form id="auth-form" autocomplete="off">
<label class="field">
<span>Имя игрока</span>
<div class="field-box">
<i class="fa-solid fa-user"></i>
<input id="username" type="text" placeholder="Никнейм" maxlength="16" required>
</div>
</label>
<label class="field">
<span>Пароль</span>
<div class="field-box">
<i class="fa-solid fa-lock"></i>
<input id="password" type="password" placeholder="••••••" required>
<button type="button" class="eye" id="toggle-pass"><i class="fa-solid fa-eye"></i></button>
</div>
</label>
<button type="submit" class="btn btn-gold wide">Войти <i class="fa-solid fa-arrow-right"></i></button>
</form>
<p class="hint"><i class="fa-solid fa-shield-halved"></i> Пароль хранится только в виде SHA-256 хэша в вашем браузере</p>
</section>
<!-- Игровой экран -->
<section id="game-screen" class="hidden">
<div class="bar card">
<div class="user">
<div class="avatar" id="avatar">A</div>
<div>
<span class="muted small">Игрок</span>
<strong id="current-user">—</strong>
</div>
</div>
<div class="stats">
<div class="stat"><span class="stat-val" id="total-player-wins">0</span><span class="stat-lbl">Ваши победы</span></div>
<div class="stat"><span class="stat-val clay" id="total-computer-wins">0</span><span class="stat-lbl">Победы ИИ</span></div>
<div class="stat"><span class="stat-val sage" id="streak">0</span><span class="stat-lbl">Серия</span></div>
</div>
<button class="btn btn-ghost" id="logout-btn"><i class="fa-solid fa-arrow-right-from-bracket"></i><span>Выйти</span></button>
</div>
<div class="table">
<div class="zone card player active" id="player-zone">
<div class="zone-head"><i class="fa-solid fa-user"></i> Вы <span class="turn-pill">ваш ход</span></div>
<div class="sum" id="player-sum">0</div>
<div class="meter"><div class="meter-fill" id="player-meter"></div><span class="meter-limit"></span></div>
<div class="chips" id="player-dice"></div>
<div class="attempts">Бросков осталось: <b id="player-attempts">3</b></div>
</div>
<div class="dice-stage">
<div class="dice-box" id="dice-box">
<div class="dice-shadow"></div>
<div class="dice-hop">
<div class="dice-wrap"><div class="cube" id="cube"></div></div>
</div>
</div>
<div class="round-num">Раунд <b id="round-num">1</b></div>
</div>
<div class="zone card computer" id="computer-zone">
<div class="zone-head"><i class="fa-solid fa-robot"></i> Компьютер <span class="turn-pill">думает…</span></div>
<div class="sum" id="computer-sum">0</div>
<div class="meter"><div class="meter-fill" id="computer-meter"></div><span class="meter-limit"></span></div>
<div class="chips" id="computer-dice"></div>
<div class="attempts">Бросков осталось: <b id="computer-attempts">3</b></div>
</div>
</div>
<div class="controls">
<button id="roll-btn" class="btn btn-gold"><i class="fa-solid fa-dice"></i> Бросить <kbd>Space</kbd></button>
<button id="stop-btn" class="btn btn-outline" disabled><i class="fa-solid fa-hand"></i> Пас <kbd>Enter</kbd></button>
<button id="next-round-btn" class="btn btn-sage hidden"><i class="fa-solid fa-rotate-right"></i> Следующий раунд <kbd>Enter</kbd></button>
</div>
<div class="log card" id="round-log">
<p class="system-msg">Арена готова. Сделайте первый бросок!</p>
</div>
<div class="bottom-grid">
<div class="card panel">
<h3><i class="fa-solid fa-clock-rotate-left"></i> История раундов</h3>
<ul class="history" id="history"></ul>
</div>
<div class="card panel">
<h3><i class="fa-solid fa-trophy"></i> Таблица лидеров</h3>
<ol class="leaders" id="leaderboard"></ol>
</div>
</div>
</section>
<footer>Dice Arena · удача любит смелых, но не жадных</footer>
</main>
<!-- Правила -->
<div class="modal hidden" id="rules-modal">
<div class="modal-card card">
<button class="icon-btn close" id="rules-close"><i class="fa-solid fa-xmark"></i></button>
<h2>Правила</h2>
<ol class="rules">
<li>У каждого до <b>3 бросков</b> кубика за раунд.</li>
<li>Сумма <b>12 и больше</b> — мгновенный проигрыш.</li>
<li>Остановиться можно в любой момент кнопкой «Пас».</li>
<li>Потом бросает компьютер. У кого сумма больше, тот и победил.</li>
</ol>
<p class="muted small">Space — бросок, Enter — пас или следующий раунд, Esc — закрыть</p>
</div>
</div>
<div class="toasts" id="toasts"></div>
</body>
</html>
