feat: add retro arcade start menu

2026-03-31 14:20:38 +02:00
parent 0b9a3c9397
commit 94ceb47b01
1 changed files with 80 additions and 0 deletions
--- a/index.html
+++ b/index.html
@@ -0,0 +1,80 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+  <meta charset="UTF-8">
+  <title>Retro Arcade</title>
+  <link rel="stylesheet" href="style.css">
+  <style>
+    .game-grid {
+      display: grid;
+      grid-template-columns: 1fr 1fr;
+      gap: 20px;
+      margin-top: 24px;
+    }
+
+    .game-tile {
+      border: 2px solid #4ecca3;
+      padding: 24px 20px;
+      text-align: center;
+      text-decoration: none;
+      color: inherit;
+      transition: background 0.15s;
+      display: flex;
+      flex-direction: column;
+      gap: 8px;
+    }
+
+    .game-tile:hover { background: rgba(78, 204, 163, 0.08); }
+
+    .game-title {
+      color: #4ecca3;
+      font-size: 1rem;
+      letter-spacing: 3px;
+    }
+
+    .hs-label {
+      color: #555;
+      font-size: 0.7rem;
+      letter-spacing: 2px;
+    }
+
+    .hs-value {
+      color: #a0a0c0;
+      font-size: 0.9rem;
+    }
+  </style>
+</head>
+<body>
+  <h1>RETRO ARCADE</h1>
+  <div class="game-grid">
+    <a class="game-tile" href="snake.html">
+      <div class="game-title">SNAKE</div>
+      <div class="hs-label">HIGHSCORE</div>
+      <div class="hs-value" id="hs-snake">—</div>
+    </a>
+    <a class="game-tile" href="tetris.html">
+      <div class="game-title">TETRIS</div>
+      <div class="hs-label">HIGHSCORE</div>
+      <div class="hs-value" id="hs-tetris">—</div>
+    </a>
+    <a class="game-tile" href="breakout.html">
+      <div class="game-title">BREAKOUT</div>
+      <div class="hs-label">HIGHSCORE</div>
+      <div class="hs-value" id="hs-breakout">—</div>
+    </a>
+    <a class="game-tile" href="spaceinvaders.html">
+      <div class="game-title">SPACE INV.</div>
+      <div class="hs-label">HIGHSCORE</div>
+      <div class="hs-value" id="hs-spaceinvaders">—</div>
+    </a>
+  </div>
+
+  <script src="scores.js"></script>
+  <script>
+    ['snake', 'tetris', 'breakout', 'spaceinvaders'].forEach(game => {
+      const hs = getHighscore(game);
+      document.getElementById('hs-' + game).textContent = hs > 0 ? hs.toLocaleString('de-DE') : '—';
+    });
+  </script>
+</body>
+</html>