michael/space-arcade
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add landing page index.html

Browse Source
This commit is contained in:
michael
2026-09-24 10:02:13 +02:00
parent 02302b9f54
commit b1cbd6bf48
1 changed files with 129 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/index.html
+129
View File
@@ -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>