141 lines
5.8 KiB
HTML
141 lines
5.8 KiB
HTML
<!doctype html>
|
|
<html lang="ru">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width,initial-scale=1,viewport-fit=cover">
|
|
<meta name="theme-color" content="#171512">
|
|
<title>Chess Party</title>
|
|
<meta name="description" content="Chess Party — шахматы против ИИ и с друзьями.">
|
|
<link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Ctext y='52' font-size='52'%3E♞%3C/text%3E%3C/svg%3E">
|
|
<link rel="stylesheet" href="/styles.css">
|
|
</head>
|
|
<body>
|
|
<main class="app">
|
|
<header class="topbar">
|
|
<div>
|
|
<div class="eyebrow">CHESS PARTY</div>
|
|
<h1>Шахматы</h1>
|
|
</div>
|
|
<div class="top-actions">
|
|
<button id="newGameBtn" class="btn primary">Новая игра</button>
|
|
<button id="flipBtn" class="btn">Повернуть</button>
|
|
</div>
|
|
</header>
|
|
|
|
<section class="home" id="homeView">
|
|
<div class="hero">
|
|
<div>
|
|
<span class="pill">Без лишних зависимостей</span>
|
|
<h2>Играй спокойно.<br>Ходы всегда на виду.</h2>
|
|
<p>Корректные подсказки фигур, последний ход, материал, история и стабильная ориентация доски.</p>
|
|
</div>
|
|
<div class="home-grid">
|
|
<button class="mode-card" data-mode="ai">
|
|
<strong>🤖 Против ИИ</strong>
|
|
<span>Локальная партия без сервера.</span>
|
|
</button>
|
|
<button class="mode-card" data-mode="party">
|
|
<strong>👥 Party</strong>
|
|
<span>Создай комнату или подключись к другу.</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="panel party-panel hidden" id="partySetup">
|
|
<h3>Party</h3>
|
|
<div class="form-row">
|
|
<label>Имя<input id="nameInput" maxlength="24" placeholder="Guest"></label>
|
|
<label>Контроль времени
|
|
<select id="timeControl">
|
|
<option value="none">Без часов</option>
|
|
<option value="1+0">1 + 0</option>
|
|
<option value="3+0">3 + 0</option>
|
|
<option value="3+2">3 + 2</option>
|
|
<option value="5+0">5 + 0</option>
|
|
<option value="5+3">5 + 3</option>
|
|
<option value="10+0" selected>10 + 0</option>
|
|
<option value="15+10">15 + 10</option>
|
|
<option value="30+0">30 + 0</option>
|
|
<option value="30+20">30 + 20</option>
|
|
</select>
|
|
</label>
|
|
</div>
|
|
<div class="form-row">
|
|
<button id="createPartyBtn" class="btn primary">Создать комнату</button>
|
|
<input id="partyCodeInput" maxlength="6" placeholder="Код комнаты">
|
|
<button id="joinPartyBtn" class="btn">Войти</button>
|
|
</div>
|
|
<p id="setupError" class="error"></p>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="game hidden" id="gameView">
|
|
<div class="game-layout">
|
|
<aside class="side-panel left-panel">
|
|
<div class="player-row">
|
|
<div class="avatar">♟</div>
|
|
<div><strong id="blackName">Чёрные</strong><span id="blackMeta">—</span></div>
|
|
<div id="blackClock" class="clock">—</div>
|
|
</div>
|
|
|
|
<div class="board-wrap">
|
|
<div id="board" class="board" aria-label="Шахматная доска"></div>
|
|
</div>
|
|
|
|
<div class="player-row">
|
|
<div class="avatar">♙</div>
|
|
<div><strong id="whiteName">Белые</strong><span id="whiteMeta">—</span></div>
|
|
<div id="whiteClock" class="clock">—</div>
|
|
</div>
|
|
</aside>
|
|
|
|
<aside class="right-column">
|
|
<div class="panel status-panel">
|
|
<div class="panel-title"><span>Партия</span><span id="turnBadge" class="pill">Ход белых</span></div>
|
|
<div id="gameStatus" class="status">Выберите фигуру.</div>
|
|
<div id="material" class="material"></div>
|
|
</div>
|
|
|
|
<div class="panel controls">
|
|
<button id="resignBtn" class="btn danger">Сдаться</button>
|
|
<button id="drawBtn" class="btn">Предложить ничью</button>
|
|
<button id="rematchBtn" class="btn primary">Реванш</button>
|
|
<button id="backHomeBtn" class="btn">Выйти</button>
|
|
</div>
|
|
|
|
<div class="panel moves-panel">
|
|
<div class="panel-title"><span>Ходы</span><span id="moveCount">0</span></div>
|
|
<div id="movesList" class="moves-list"></div>
|
|
</div>
|
|
|
|
<div class="panel chat-panel hidden" id="chatPanel">
|
|
<div class="panel-title">Чат</div>
|
|
<div id="chatMessages" class="chat-messages"></div>
|
|
<form id="chatForm" class="chat-form">
|
|
<input id="chatInput" maxlength="300" autocomplete="off" placeholder="Сообщение…">
|
|
<button class="btn primary" type="submit">→</button>
|
|
</form>
|
|
</div>
|
|
</aside>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
|
|
<div id="promotionModal" class="modal hidden">
|
|
<div class="modal-card">
|
|
<h3>Превращение пешки</h3>
|
|
<div class="promotion-grid">
|
|
<button data-promotion="q">♛<span>Ферзь</span></button>
|
|
<button data-promotion="r">♜<span>Ладья</span></button>
|
|
<button data-promotion="b">♝<span>Слон</span></button>
|
|
<button data-promotion="n">♞<span>Конь</span></button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="toast" class="toast"></div>
|
|
<script type="module" src="/app.js"></script>
|
|
</body>
|
|
</html>
|
|
|