5355e725c1
new file: README.md new file: images/atomic-heart.png new file: images/julian.png new file: images/prey.png new file: index.html new file: keys.example.js new file: script.js new file: style.css
176 lines
9.9 KiB
HTML
176 lines
9.9 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="de">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>🎮 Alles Gute zum Geburtstag, Julian! 🎂</title>
|
||
<link rel="stylesheet" href="style.css">
|
||
<link href="https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600;700&family=Orbitron:wght@400;700;900&family=Inter:wght@300;400;600&display=swap" rel="stylesheet">
|
||
</head>
|
||
<body>
|
||
<div class="stars"></div>
|
||
<div class="fog-overlay"></div>
|
||
<div class="container">
|
||
<header class="birthday-header">
|
||
<div class="glitch-effect">
|
||
<h1 class="main-title" data-text="ALLES GUTE ZUM GEBURTSTAG">ALLES GUTE ZUM GEBURTSTAG</h1>
|
||
<h2 class="name-title" data-text="JULIAN">JULIAN</h2>
|
||
</div>
|
||
<div class="date">🎂 1. November 2025 🎂</div>
|
||
<div class="from-signature">Mit Liebe von Simon ❤️</div>
|
||
</header>
|
||
|
||
<!-- Space Invaders Minigame -->
|
||
<div class="minigame-section" id="minigameSection">
|
||
<div class="minigame-intro">
|
||
<h2>🚀 SPIELE SPACE INVADERS UM DEINE GESCHENKE FREIZUSCHALTEN! 🚀</h2>
|
||
<p>Besiege 15 Aliens um die geheimen Spiele zu enthüllen!</p>
|
||
<button id="startGameBtn" class="start-game-btn">SPIEL STARTEN</button>
|
||
</div>
|
||
<div class="game-container" id="gameContainer" style="display: none;">
|
||
<div class="game-ui">
|
||
<div class="score">Punkte: <span id="score">0</span></div>
|
||
<div class="aliens-left">Aliens übrig: <span id="aliensLeft">15</span></div>
|
||
<div class="lives">Leben: <span id="lives">❤️❤️❤️</span></div>
|
||
</div>
|
||
<canvas id="gameCanvas" width="800" height="400"></canvas>
|
||
<div class="game-controls">
|
||
<p>Steuerung: ← → Pfeiltasten oder A D zum Bewegen, Leertaste oder W zum Schießen</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<main class="gift-section" id="giftSection" style="display: none;">
|
||
<div class="intro-text">
|
||
<p>🎉 Herzlichen Glückwunsch, Julian! 🎉</p>
|
||
<p>Du hast das Minigame gemeistert! Hier sind deine drei fantastischen Spiele!
|
||
Tauche ein in epische Welten voller Abenteuer und Geheimnisse...</p>
|
||
</div>
|
||
|
||
<div class="games-grid">
|
||
<!-- Atomic Heart -->
|
||
<div class="game-card atomic-heart">
|
||
<div class="game-image">
|
||
<div class="image-stack">
|
||
<img src="https://cdn.cloudflare.steamstatic.com/steam/apps/668580/header.jpg" alt="Atomic Heart Cover" class="game-cover">
|
||
<img src="images/atomic-heart.png" alt="Atomic Heart Hover" class="game-screenshot">
|
||
</div>
|
||
<div class="game-overlay">
|
||
<div class="game-title">ATOMIC HEART</div>
|
||
<div class="game-description">
|
||
Ein surreales Abenteuer in einer alternativen sowjetischen Realität voller Roboter und Geheimnisse
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="game-info">
|
||
<h3>🤖 ATOMIC HEART</h3>
|
||
<p>Erkunde eine bizarre Welt voller mechanischer Wunder in der Sowjetunion der 1950er Jahre! Kämpfe gegen Roboter und entdecke dunkle Geheimnisse!</p>
|
||
<div class="scratch-card advanced-scratch" data-game="atomic-heart">
|
||
<canvas class="scratch-canvas" width="320" height="120"></canvas>
|
||
<div class="hidden-key">XXXXX-XXXXX-XXXXX</div>
|
||
<div class="scratch-instruction">🎮 Rubbel vorsichtig für deinen Steam-Key!</div>
|
||
<div class="scratch-progress">
|
||
<div class="progress-bar"><div class="progress-fill"></div></div>
|
||
<span class="progress-text">0% freigerubbelt</span>
|
||
</div>
|
||
</div>
|
||
<a href="https://store.steampowered.com/app/668580/Atomic_Heart/" target="_blank" class="steam-link">
|
||
🎮 Auf Steam ansehen
|
||
</a>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Prey -->
|
||
<div class="game-card prey">
|
||
<div class="game-image">
|
||
<div class="image-stack">
|
||
<img src="https://cdn.cloudflare.steamstatic.com/steam/apps/480490/header.jpg" alt="Prey Cover" class="game-cover">
|
||
<img src="images/prey.png" alt="Prey Hover" class="game-screenshot">
|
||
</div>
|
||
<div class="game-overlay">
|
||
<div class="game-title">PREY</div>
|
||
<div class="game-description">
|
||
Überlebe auf der Raumstation Talos I gegen außerirdische Bedrohungen
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="game-info">
|
||
<h3>👽 PREY</h3>
|
||
<p>Kämpfe ums Überleben auf einer von mysteriösen Aliens überrannten Raumstation. Nutze außergewöhnliche Fähigkeiten und jede Entscheidung zählt!</p>
|
||
<div class="scratch-card advanced-scratch" data-game="prey">
|
||
<canvas class="scratch-canvas" width="320" height="120"></canvas>
|
||
<div class="hidden-key">YYYYY-YYYYY-YYYYY</div>
|
||
<div class="scratch-instruction">🎮 Rubbel vorsichtig für deinen Steam-Key!</div>
|
||
<div class="scratch-progress">
|
||
<div class="progress-bar"><div class="progress-fill"></div></div>
|
||
<span class="progress-text">0% freigerubbelt</span>
|
||
</div>
|
||
</div>
|
||
<a href="https://store.steampowered.com/app/480490/Prey/" target="_blank" class="steam-link">
|
||
🎮 Auf Steam ansehen
|
||
</a>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ELDEN RING -->
|
||
<div class="game-card elden-ring special-gift">
|
||
<div class="special-badge">👑 HAUPTGESCHENK 👑</div>
|
||
<div class="game-image">
|
||
<div class="image-stack">
|
||
<img src="https://images.igdb.com/igdb/image/upload/t_cover_big/co4jni.webp" alt="Elden Ring Cover" class="game-cover">
|
||
<img src="https://images.igdb.com/igdb/image/upload/t_screenshot_big/scmhz2.webp" alt="Elden Ring Screenshot" class="game-screenshot">
|
||
</div>
|
||
<div class="game-overlay">
|
||
<div class="game-title">ELDEN RING</div>
|
||
<div class="game-description">
|
||
Das legendäre Dark Souls Meisterwerk von FromSoftware in einer offenen Welt!
|
||
</div>
|
||
</div>
|
||
<div class="golden-particles"></div>
|
||
</div>
|
||
<div class="game-info">
|
||
<h3><EFBFBD> ELDEN RING</h3>
|
||
<p>Das absolut epische Meisterwerk! Erkunde die Lands Between in diesem Dark Fantasy-Abenteuer von FromSoftware und George R.R. Martin!</p>
|
||
<div class="scratch-card special-scratch advanced-scratch" data-game="elden-ring">
|
||
<canvas class="scratch-canvas" width="320" height="120"></canvas>
|
||
<div class="hidden-key">ZZZZZ-ZZZZZ-ZZZZZ</div>
|
||
<div class="scratch-instruction"><EFBFBD> Das Königliche Siegel - Rubbel mit Bedacht!</div>
|
||
<div class="scratch-progress">
|
||
<div class="progress-bar golden"><div class="progress-fill"></div></div>
|
||
<span class="progress-text">0% freigerubbelt</span>
|
||
</div>
|
||
</div>
|
||
<a href="https://store.steampowered.com/app/1245620/ELDEN_RING/" target="_blank" class="steam-link special-steam-link">
|
||
👑 Auf Steam ansehen
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="birthday-message">
|
||
<div class="message-box">
|
||
<h3>Herzlichen Glückwunsch zum Geburtstag</h3>
|
||
<p>Lieber Julian, ich hoffe diese drei Super Spiele dir unzählige Stunden voller Spaß bereiten, Spannung und unvergesslicher Abenteuer!
|
||
Lass dich von den fantastischen Welten verzaubern und genieße jeden einzelnen Moment des Gamings.</p>
|
||
<p>Möge dein neues Lebensjahr genauso legendär werden wie die 8 davor!</p>
|
||
<div class="signature">
|
||
<div class="signature-text">Mit ganz viel Liebe und den allerbesten Wünschen</div>
|
||
<div class="signature-name">Simon der allerbesten ❤️</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</main>
|
||
|
||
<footer>
|
||
<div class="footer-animation">
|
||
<div class="floating-icons">
|
||
🎮 🎂 🎁 🚀 🤖 👽 ⭐
|
||
</div>
|
||
</div>
|
||
</footer>
|
||
</div>
|
||
|
||
<script src="keys.js"></script>
|
||
<script src="script.js"></script>
|
||
</body>
|
||
</html> |