space-arcade/public/index.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Digital Spaceport Arcade</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=Press+Start+2P&display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
  <div class="sky">
    <div class="stars" id="stars"></div>
    <div class="sun"></div>
    <div class="grid-floor"></div>
  </div>

  <header class="hero">
    <div class="badge">EST. 2026 &middot; PORT 8099 &middot; PURE JS</div>
    <h1 class="title">
      <span class="t1">DIGITAL</span>
      <span class="t2">SPACEPORT</span>
      <span class="t3">ARCADE</span>
    </h1>
    <p class="tagline">FOUR GAMES &middot; ONE NEON HANGAR &middot; NO MERCY</p>
    <p class="blink">INSERT COIN TO CONTINUE</p>
  </header>

  <main class="cards">
    <a class="card" href="games/asteroid.html">
      <div class="thumb">
        <img src="img/asteroid.png" alt="Asteroid Field">
        <div class="thumb-glow"></div>
      </div>
      <div class="card-body">
        <h2>ASTEROID FIELD</h2>
        <p class="desc">Pilot your ship through a field of tumbling rocks.
        Split them. Dodge them. Survive the UFOs.</p>
        <div class="meta">
          <span class="diff">DIFFICULTY: MEDIUM</span>
          <span class="ctrl">CONTROLS: ARROWS + SPACE</span>
        </div>
        <div class="play">INSERT COIN &rarr;</div>
      </div>
    </a>

    <a class="card" href="games/breakout.html">
      <div class="thumb">
        <img src="img/breakout.png" alt="Neon Breaker">
        <div class="thumb-glow"></div>
      </div>
      <div class="card-body">
        <h2>NEON BREAKER</h2>
        <p class="desc">Smash the glowing bricks. Catch power-ups.
        Don't drop the ball — or the score.</p>
        <div class="meta">
          <span class="diff">DIFFICULTY: EASY</span>
          <span class="ctrl">CONTROLS: MOUSE / ARROWS</span>
        </div>
        <div class="play">INSERT COIN &rarr;</div>
      </div>
    </a>

    <a class="card" href="games/snake.html">
      <div class="thumb">
        <img src="img/snake.png" alt="Snake Protocol">
        <div class="thumb-glow"></div>
      </div>
      <div class="card-body">
        <h2>SNAKE PROTOCOL</h2>
        <p class="desc">Eat energy cells. Grow the protocol.
        Don't bite your own tail — trust me on this.</p>
        <div class="meta">
          <span class="diff">DIFFICULTY: HIGH</span>
          <span class="ctrl">CONTROLS: ARROWS / WASD</span>
        </div>
        <div class="play">INSERT COIN &rarr;</div>
      </div>
    </a>

    <a class="card" href="games/spaceinvaders.html">
      <div class="thumb">
        <img src="img/spaceinvaders.png" alt="Invader Dock">
        <div class="thumb-glow"></div>
      </div>
      <div class="card-body">
        <h2>INVADER DOCK</h2>
        <p class="desc">The invaders are docking. You're the only
        cannon between them and the hangar. Defend it.</p>
        <div class="meta">
          <span class="diff">DIFFICULTY: MEDIUM</span>
          <span class="ctrl">CONTROLS: ARROWS + SPACE</span>
        </div>
        <div class="play">INSERT COIN &rarr;</div>
      </div>
    </a>
  </main>

  <footer class="footer">
    <div class="controls-legend">
      <span>&larr;&rarr; MOVE</span>
      <span>&uarr; THRUST</span>
      <span>SPACE FIRE</span>
      <span>P PAUSE</span>
      <span>M MUTE</span>
      <span>X HYPERSPACE</span>
    </div>
    <p class="credit">BUILT BY <span class="neon">ATHENA</span> &middot; BUDZO #5 &middot; 2026<br>
    <span class="neon">DIGITAL SPACEPORT ARCADE</span> &middot; WHERE PIXELS MEET THE VOID</p>
  </footer>

  <script>
    // Generate parallax stars
    (function () {
      const c = document.getElementById('stars');
      for (let i = 0; i < 120; i++) {
        const s = document.createElement('div');
        s.className = 'star';
        const size = Math.random() < 0.3 ? 2 : 1;
        s.style.cssText = 'width:' + size + 'px;height:' + size + 'px;left:'
          + (Math.random() * 100) + '%;top:' + (Math.random() * 100)
          + '%;animation-delay:' + (Math.random() * 2) + 's';
        c.appendChild(s);
      }
    })();
  </script>
</body>
</html>