101 lines
4.6 KiB
HTML
101 lines
4.6 KiB
HTML
<!-- FILE: internal/webserver/web/index.html -->
|
|
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Chess Game</title>
|
|
<link rel="stylesheet" href="style.css">
|
|
</head>
|
|
<body>
|
|
<div class="outer-container">
|
|
<div class="container">
|
|
<main>
|
|
<div class="game-area">
|
|
<div class="board-container">
|
|
<div class="board-wrapper">
|
|
<div class="coordinates top">
|
|
<span>a</span><span>b</span><span>c</span><span>d</span>
|
|
<span>e</span><span>f</span><span>g</span><span>h</span>
|
|
</div>
|
|
<div class="coordinates left">
|
|
<span>8</span><span>7</span><span>6</span><span>5</span>
|
|
<span>4</span><span>3</span><span>2</span><span>1</span>
|
|
</div>
|
|
<div id="board"></div>
|
|
</div>
|
|
</div>
|
|
<div class="fen-container">
|
|
<div id="fen-display" class="fen-display">-</div>
|
|
<button class="copy-btn" id="copy-fen" title="Copy FEN">
|
|
<svg viewBox="0 0 24 24" width="16" height="16">
|
|
<rect x="9" y="9" width="13" height="13" rx="2" fill="none" stroke="currentColor" stroke-width="2"/>
|
|
<path d="M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1" fill="none" stroke="currentColor" stroke-width="2"/>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<aside class="info-panel">
|
|
<div class="status-indicators">
|
|
<div class="indicator" id="server-indicator" data-tooltip="Server">
|
|
<span class="light" data-status="unknown">●</span>
|
|
</div>
|
|
<div class="indicator" id="storage-indicator" data-tooltip="Storage">
|
|
<span class="light" data-status="unknown">●</span>
|
|
</div>
|
|
<div class="indicator" id="turn-indicator" data-tooltip="Turn">
|
|
<span class="light turn-light" data-status="white">●</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="move-history-container">
|
|
<button class="copy-btn" id="copy-history" title="Copy PGN">
|
|
<svg viewBox="0 0 24 24" width="16" height="16">
|
|
<rect x="9" y="9" width="13" height="13" rx="2" fill="none" stroke="currentColor" stroke-width="2"/>
|
|
<path d="M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1" fill="none" stroke="currentColor" stroke-width="2"/>
|
|
</svg>
|
|
</button>
|
|
<div id="move-history" class="move-history">
|
|
<div class="move-grid" id="move-grid"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="controls">
|
|
<button id="new-game-btn" class="btn btn-primary">New Game</button>
|
|
<button id="undo-btn" class="btn btn-secondary" disabled>Undo</button>
|
|
</div>
|
|
</aside>
|
|
</main>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- New Game Modal -->
|
|
<div id="modal-overlay" class="modal-overlay">
|
|
<div class="modal">
|
|
<h2>New Game</h2>
|
|
<div class="form-group">
|
|
<label class="group-label">Your Color</label>
|
|
<div class="radio-group">
|
|
<label><input type="radio" name="player-color" value="white" checked><span>White</span></label>
|
|
<label><input type="radio" name="player-color" value="black"><span>Black</span></label>
|
|
</div>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="computer-level">Computer Level: <span id="level-value">10</span></label>
|
|
<input type="range" id="computer-level" min="0" max="20" value="10">
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="search-time">Search Time (ms): <span id="time-value">1000</span></label>
|
|
<input type="range" id="search-time" min="100" max="10000" step="100" value="1000">
|
|
</div>
|
|
<div class="modal-buttons">
|
|
<button id="start-game-btn" class="btn btn-primary">Start Game</button>
|
|
<button id="cancel-btn" class="btn btn-secondary">Cancel</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="app.js"></script>
|
|
</body>
|
|
</html> |