| <!doctype html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8" /> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> |
| <title>Star Courier</title> |
| <link rel="stylesheet" href="styles.css" /> |
| </head> |
| <body> |
| <div class="app"> |
| <header> |
| <div class="brand"> |
| <span class="logo"></span> |
| <div> |
| <h1>Star Courier</h1> |
| <p>Thread the asteroid field, grab energy cells, and survive the surge.</p> |
| </div> |
| </div> |
| <div class="hud"> |
| <div><span>Score</span><strong id="score">0</strong></div> |
| <div><span>Shield</span><strong id="shield">100</strong></div> |
| <div><span>Wave</span><strong id="wave">1</strong></div> |
| </div> |
| </header> |
|
|
| <main> |
| <div class="panel"> |
| <canvas id="game" width="960" height="560"></canvas> |
| <div class="overlay" id="overlay"> |
| <div class="card"> |
| <h2 id="title">Ready?</h2> |
| <p id="subtitle">Use WASD or arrow keys to fly. Space = boost. Collect orbs, dodge rocks.</p> |
| <input id="pilot" placeholder="Pilot name" maxlength="14" /> |
| <div class="row"> |
| <button id="start">Start Run</button> |
| <button id="spectate" class="ghost">Spectate</button> |
| </div> |
| <small id="ws-status">Offline</small> |
| </div> |
| </div> |
| </div> |
| <aside> |
| <h3>Squad Roster</h3> |
| <div class="roster" id="roster"></div> |
| <h3>Controls</h3> |
| <ul> |
| <li><strong>Move</strong> WASD / Arrow keys</li> |
| <li><strong>Boost</strong> Space (drains shield)</li> |
| <li><strong>Pause</strong> P</li> |
| </ul> |
| <h3>Objective</h3> |
| <p>Survive as long as you can. Every 30 seconds, the field intensifies.</p> |
| <h3>Tips</h3> |
| <p>Boost through narrow gaps. Grab energy orbs to restore shield.</p> |
| </aside> |
| </main> |
| <footer> |
| Built for speed. No fluff. |
| </footer> |
| </div> |
| <script src="main.js"></script> |
| </body> |
| </html>
|
|
|
