| <!DOCTYPE html>
|
| <html lang="ja">
|
| <head>
|
| <meta charset="UTF-8">
|
| <meta name="viewport" content="width=device-width, initial-scale=1.0">
|
| <title>Quad - VS AI Edition</title>
|
| <link rel="stylesheet" href="static/style.css">
|
| </head>
|
| <body>
|
|
|
|
|
| <div id="title-screen">
|
| <div id="demo-container">
|
| <div id="demo-area" class="game-area">
|
| <div class="board-wrapper"><div class="board"></div></div>
|
| <div class="hand-area"></div>
|
| </div>
|
| </div>
|
|
|
| <div id="title-overlay"></div>
|
|
|
| <div id="title-content">
|
| <div id="title-logo">QUAD</div>
|
| <div style="color:#aaa; margin-bottom: 40px; letter-spacing: 4px;">COLOR PUZZLE - AI BATTLE</div>
|
| <button class="btn" id="btn-1p">1P MODE</button>
|
| <button class="btn vs" id="btn-vs-real">VS AI (REALTIME)</button>
|
| <button class="btn vs-turn" id="btn-vs-turn">VS AI (TURN)</button>
|
| </div>
|
| </div>
|
|
|
| <button id="sound-toggle">🔇</button>
|
|
|
|
|
| <div id="main-wrapper">
|
| <div id="turn-indicator">PLAYER'S TURN</div>
|
|
|
| <div id="game-boards-container">
|
| <div id="p1-area" class="game-area">
|
| <div class="player-label">PLAYER</div>
|
| <div style="font-size: 20px;">Score: <span class="score-display">0</span></div>
|
| <div class="board-wrapper">
|
| <div class="garbage-ui"><div class="garbage-bar"></div><div class="garbage-text"></div></div>
|
| <div class="board"></div>
|
| <div class="message-pop"></div>
|
| </div>
|
| <div class="hand-area"></div>
|
| </div>
|
|
|
| <div id="p2-area" class="game-area" style="display: none;">
|
| <div class="player-label" style="color: #ff6b6b;">AI CPU</div>
|
| <div style="font-size: 20px;">Score: <span class="score-display">0</span></div>
|
| <div class="board-wrapper">
|
| <div class="garbage-ui"><div class="garbage-bar"></div><div class="garbage-text"></div></div>
|
| <div class="board"></div>
|
| <div class="message-pop"></div>
|
| </div>
|
| <div class="hand-area"></div>
|
| </div>
|
| </div>
|
| </div>
|
|
|
|
|
| <div id="game-over-overlay">
|
| <h2 id="result-title" style="font-size: 50px; margin-bottom: 20px;">GAME OVER</h2>
|
| <button class="btn" onclick="location.reload()">BACK TO TITLE</button>
|
| </div>
|
|
|
| <script src="static/script.js"></script>
|
| </body>
|
| </html> |
