Add landing page index.html

2026-09-24 10:02:13 +02:00
parent 02302b9f54
commit b1cbd6bf48
1 changed files with 129 additions and 0 deletions
@@ -0,0 +1,129 @@
+<!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>