feat: add retro arcade start menu

This commit is contained in:
Ferdinand
2026-03-31 14:20:38 +02:00
parent 0b9a3c9397
commit 94ceb47b01

80
index.html Normal file
View File

@@ -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>