new file: .gitignore
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
This commit is contained in:
SimolZimol
60
.gitignore
vendored
Normal file
60
.gitignore
vendored
Normal file
@@ -0,0 +1,60 @@
|
||||
# Geburtstagskarte - Git Ignore File
|
||||
|
||||
# Steam Keys (WICHTIG: Niemals committen!)
|
||||
.env
|
||||
keys.js
|
||||
|
||||
# Backup der originalen keys.js (falls vorhanden)
|
||||
keys.js.bak
|
||||
keys.backup.js
|
||||
|
||||
# Temporäre Dateien
|
||||
*.tmp
|
||||
*.temp
|
||||
.DS_Store
|
||||
Thumbs.db
|
||||
|
||||
# Editor-spezifische Dateien
|
||||
.vscode/
|
||||
.idea/
|
||||
*.sublime-project
|
||||
*.sublime-workspace
|
||||
|
||||
# Node.js (falls später hinzugefügt)
|
||||
node_modules/
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
|
||||
# Betriebssystem-Dateien
|
||||
.DS_Store
|
||||
.DS_Store?
|
||||
._*
|
||||
.Spotlight-V100
|
||||
.Trashes
|
||||
ehthumbs.db
|
||||
Thumbs.db
|
||||
|
||||
# Persönliche Notizen oder Screenshots
|
||||
notes.txt
|
||||
screenshots/
|
||||
test/
|
||||
|
||||
# Bilder sind OK zum committen (außer persönliche Screenshots)
|
||||
# images/ - Ordner mit Spielbildern bleibt im Repo
|
||||
|
||||
# Backup-Dateien
|
||||
*.bak
|
||||
*~
|
||||
*.swp
|
||||
*.swo
|
||||
|
||||
# Logs
|
||||
*.log
|
||||
logs/
|
||||
|
||||
# Komprimierte Dateien (falls Screenshots oder Backups erstellt werden)
|
||||
*.zip
|
||||
*.rar
|
||||
*.7z
|
||||
*.tar.gz
|
||||
92
README.md
Normal file
92
README.md
Normal file
@@ -0,0 +1,92 @@
|
||||
# 🎮 Julian's Geburtstagskarte
|
||||
|
||||
Eine interaktive Geburtstagskarte mit Space Invaders Minigame und Rubbelkarten für Steam-Keys!
|
||||
|
||||
## 📋 Setup-Anleitung
|
||||
|
||||
### Steam-Keys eintragen:
|
||||
|
||||
1. **Kopiere `keys.example.js` zu `keys.js`**:
|
||||
```bash
|
||||
copy keys.example.js keys.js
|
||||
```
|
||||
2. **Öffne `keys.js`** in einem Texteditor
|
||||
3. **Ersetze die Platzhalter-Keys** mit den echten Steam-Keys:
|
||||
```javascript
|
||||
const STEAM_KEYS = {
|
||||
'atomic-heart': 'DEIN-ATOMIC-HEART-KEY',
|
||||
'prey': 'DEIN-PREY-KEY',
|
||||
'elden-ring': 'DEIN-ELDEN-RING-KEY'
|
||||
};
|
||||
```
|
||||
4. **Speichere die Datei** (wird automatisch von .gitignore geschützt)
|
||||
|
||||
### Alternative: .env Datei verwenden:
|
||||
- Bearbeite die `.env` Datei und trage dort die Keys ein
|
||||
- Die Keys werden automatisch geladen
|
||||
|
||||
## 🎮 Spielanleitung
|
||||
|
||||
### Space Invaders:
|
||||
- **Bewegung**: ← → Pfeiltasten ODER A D Tasten
|
||||
- **Schießen**: Leertaste ODER W Taste
|
||||
- **Ziel**: Alle 15 Aliens besiegen um die Geschenke freizuschalten
|
||||
|
||||
### Rubbelkarten:
|
||||
- **65% der Karte** muss freigerubbelt werden
|
||||
- **Fortschrittsbalken** zeigt den aktuellen Stand
|
||||
- **Echte Steam-Keys** werden nach dem Rubbeln enthüllt
|
||||
|
||||
## 🎁 Enthaltene Spiele:
|
||||
1. **Atomic Heart** - Sowjetisches Sci-Fi Abenteuer
|
||||
2. **Prey** - Weltraum-Horror Thriller
|
||||
3. **Elden Ring** 👑 - Das Hauptgeschenk! FromSoftware Meisterwerk
|
||||
|
||||
## 🛠 Technische Details:
|
||||
- Vollständig in HTML5, CSS3 und JavaScript
|
||||
- Funktioniert offline nach dem ersten Laden
|
||||
- Responsive Design für Desktop und Mobile
|
||||
- Canvas-basiertes Space Invaders Spiel
|
||||
- Erweiterte Rubbelkarten mit Fortschrittsanzeige
|
||||
|
||||
## 🎉 Features:
|
||||
- ✅ Space Invaders Minigame (15 Aliens)
|
||||
- ✅ WASD + Pfeiltasten Steuerung
|
||||
- ✅ Erweiterte Rubbelkarten (65% erforderlich)
|
||||
- ✅ Konfigurierbare Steam-Keys
|
||||
- ✅ Partikeleffekte und Animationen
|
||||
- ✅ Easter Egg (Konami-Code)
|
||||
- ✅ Mobile Touch-Support
|
||||
- ✅ **Julian Easter Egg**: Seltenes schwebendes Julian-Bild (5% Chance) mit Celebration-Effekt! 🎂
|
||||
|
||||
## <20> Git-Sicherheit:
|
||||
|
||||
⚠️ **WICHTIG**: Die `.gitignore` Datei schützt automatisch:
|
||||
- `keys.js` - Enthält die echten Steam-Keys
|
||||
- `.env` - Alternative Konfigurationsdatei
|
||||
- Alle temporären und persönlichen Dateien
|
||||
|
||||
✅ **Sicher zum Committen**:
|
||||
- `keys.example.js` - Beispiel-Template ohne echte Keys
|
||||
- Alle anderen Projektdateien
|
||||
|
||||
## 📁 Projektstruktur:
|
||||
```
|
||||
📁 geburstags karte/
|
||||
├── 🌐 index.html
|
||||
├── 🎨 style.css
|
||||
├── 🎮 script.js
|
||||
├── 🔑 keys.example.js (Template - sicher)
|
||||
├── 🔑 keys.js (Echte Keys - gitignore geschützt)
|
||||
├── ⚙️ .env (Alternative Config - gitignore geschützt)
|
||||
├── 🚫 .gitignore (Schutz für sensible Daten)
|
||||
├── 📖 README.md
|
||||
└── 📁 images/
|
||||
├── 🖼️ atomic-heart.png (Hover-Bild)
|
||||
├── 🖼️ prey.png (Hover-Bild)
|
||||
└── 🎂 julian.png (Easter Egg - seltenes schwebendes Bild)
|
||||
```
|
||||
|
||||
## <20>💝 Von Simon mit Liebe gemacht! ❤️
|
||||
|
||||
Alles Gute zum Geburtstag, Julian! 🎂
|
||||
BIN
images/atomic-heart.png
Normal file
BIN
images/atomic-heart.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 54 KiB |
BIN
images/julian.png
Normal file
BIN
images/julian.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 54 KiB |
BIN
images/prey.png
Normal file
BIN
images/prey.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 31 KiB |
176
index.html
Normal file
176
index.html
Normal file
@@ -0,0 +1,176 @@
|
||||
<!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>
|
||||
20
keys.example.js
Normal file
20
keys.example.js
Normal file
@@ -0,0 +1,20 @@
|
||||
// Steam Keys Configuration - BEISPIEL DATEI
|
||||
// Kopiere diese Datei zu "keys.js" und trage die echten Steam-Keys ein
|
||||
|
||||
const STEAM_KEYS = {
|
||||
// Ersetze diese Beispiel-Keys mit den echten Steam-Keys:
|
||||
'atomic-heart': 'XXXXX-XXXXX-XXXXX',
|
||||
'prey': 'YYYYY-YYYYY-YYYYY',
|
||||
'elden-ring': 'ZZZZZ-ZZZZZ-ZZZZZ'
|
||||
};
|
||||
|
||||
// Diese Datei wird von script.js geladen
|
||||
window.STEAM_KEYS = STEAM_KEYS;
|
||||
|
||||
/*
|
||||
ANLEITUNG:
|
||||
1. Kopiere diese Datei und benenne sie in "keys.js" um
|
||||
2. Ersetze die XXXXX, YYYYY, ZZZZZ mit den echten Steam-Keys
|
||||
3. Speichere die Datei
|
||||
4. Die keys.js wird von .gitignore ignoriert und nicht committet
|
||||
*/
|
||||
758
style.css
Normal file
758
style.css
Normal file
@@ -0,0 +1,758 @@
|
||||
/* Geburtstagskarten-Webseite für Julian - Enhanced Styles */
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Inter', sans-serif;
|
||||
background:
|
||||
radial-gradient(circle at 20% 80%, rgba(120, 119, 198, 0.3) 0%, transparent 50%),
|
||||
radial-gradient(circle at 80% 20%, rgba(255, 119, 198, 0.3) 0%, transparent 50%),
|
||||
radial-gradient(circle at 40% 40%, rgba(120, 198, 119, 0.2) 0%, transparent 50%),
|
||||
linear-gradient(135deg, #0f0f23 0%, #1a1a2e 35%, #16213e 70%, #0f3460 100%);
|
||||
color: #ffffff;
|
||||
overflow-x: hidden;
|
||||
min-height: 100vh;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.fog-overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background:
|
||||
radial-gradient(ellipse at center, transparent 0%, rgba(0,0,0,0.1) 50%, rgba(0,0,0,0.3) 100%);
|
||||
pointer-events: none;
|
||||
z-index: 1;
|
||||
animation: fogDrift 30s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes fogDrift {
|
||||
0%, 100% { opacity: 0.3; }
|
||||
50% { opacity: 0.6; }
|
||||
}
|
||||
|
||||
/* Sternen-Hintergrund */
|
||||
.stars {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-image:
|
||||
radial-gradient(2px 2px at 20px 30px, #fff, transparent),
|
||||
radial-gradient(2px 2px at 40px 70px, rgba(255,255,255,0.8), transparent),
|
||||
radial-gradient(1px 1px at 90px 40px, #fff, transparent),
|
||||
radial-gradient(1px 1px at 130px 80px, rgba(255,255,255,0.6), transparent),
|
||||
radial-gradient(2px 2px at 160px 30px, #fff, transparent);
|
||||
background-repeat: repeat;
|
||||
background-size: 200px 100px;
|
||||
animation: twinkle 20s linear infinite;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
@keyframes twinkle {
|
||||
0% { transform: translateY(0); }
|
||||
100% { transform: translateY(-100px); }
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 20px;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
/* Header Styles */
|
||||
.birthday-header {
|
||||
text-align: center;
|
||||
margin-bottom: 50px;
|
||||
padding: 40px 0;
|
||||
}
|
||||
|
||||
.glitch-effect {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.main-title, .name-title {
|
||||
font-family: 'Orbitron', monospace;
|
||||
font-weight: 900;
|
||||
text-transform: uppercase;
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.main-title {
|
||||
font-size: clamp(2rem, 5vw, 4rem);
|
||||
color: #00ffff;
|
||||
text-shadow:
|
||||
0 0 10px #00ffff,
|
||||
0 0 20px #00ffff,
|
||||
0 0 30px #00ffff;
|
||||
animation: glow 2s ease-in-out infinite alternate;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.name-title {
|
||||
font-size: clamp(3rem, 8vw, 6rem);
|
||||
color: #ff6b6b;
|
||||
text-shadow:
|
||||
0 0 15px #ff6b6b,
|
||||
0 0 30px #ff6b6b,
|
||||
0 0 45px #ff6b6b;
|
||||
animation: glow-red 2s ease-in-out infinite alternate;
|
||||
}
|
||||
|
||||
@keyframes glow {
|
||||
from { text-shadow: 0 0 10px #00ffff, 0 0 20px #00ffff, 0 0 30px #00ffff; }
|
||||
to { text-shadow: 0 0 20px #00ffff, 0 0 30px #00ffff, 0 0 40px #00ffff; }
|
||||
}
|
||||
|
||||
@keyframes glow-red {
|
||||
from { text-shadow: 0 0 15px #ff6b6b, 0 0 30px #ff6b6b, 0 0 45px #ff6b6b; }
|
||||
to { text-shadow: 0 0 25px #ff6b6b, 0 0 40px #ff6b6b, 0 0 55px #ff6b6b; }
|
||||
}
|
||||
|
||||
.date {
|
||||
font-size: 1.5rem;
|
||||
color: #ffd700;
|
||||
margin-top: 20px;
|
||||
font-weight: 600;
|
||||
text-shadow: 0 0 10px #ffd700;
|
||||
}
|
||||
|
||||
.from-signature {
|
||||
font-size: 1.2rem;
|
||||
color: #ff6b6b;
|
||||
margin-top: 15px;
|
||||
font-style: italic;
|
||||
text-shadow: 0 0 8px #ff6b6b;
|
||||
}
|
||||
|
||||
/* Minigame Section */
|
||||
.minigame-section {
|
||||
text-align: center;
|
||||
margin: 50px 0;
|
||||
padding: 40px 20px;
|
||||
background: rgba(0, 20, 40, 0.6);
|
||||
border-radius: 20px;
|
||||
backdrop-filter: blur(10px);
|
||||
border: 2px solid rgba(0, 255, 255, 0.3);
|
||||
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.minigame-intro h2 {
|
||||
font-family: 'Orbitron', monospace;
|
||||
color: #00ffff;
|
||||
text-shadow: 0 0 20px #00ffff;
|
||||
margin-bottom: 20px;
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.minigame-intro p {
|
||||
font-size: 1.3rem;
|
||||
margin-bottom: 30px;
|
||||
color: #e0e0e0;
|
||||
}
|
||||
|
||||
.start-game-btn {
|
||||
font-family: 'Orbitron', monospace;
|
||||
font-size: 1.4rem;
|
||||
font-weight: bold;
|
||||
padding: 15px 40px;
|
||||
background: linear-gradient(45deg, #ff6b6b, #ff8e8e);
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 50px;
|
||||
cursor: pointer;
|
||||
text-transform: uppercase;
|
||||
box-shadow: 0 10px 30px rgba(255, 107, 107, 0.4);
|
||||
transition: all 0.3s ease;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.start-game-btn:hover {
|
||||
transform: translateY(-5px);
|
||||
box-shadow: 0 15px 40px rgba(255, 107, 107, 0.6);
|
||||
}
|
||||
|
||||
.start-game-btn:before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: -100%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
|
||||
transition: left 0.5s;
|
||||
}
|
||||
|
||||
.start-game-btn:hover:before {
|
||||
left: 100%;
|
||||
}
|
||||
|
||||
.game-container {
|
||||
margin-top: 30px;
|
||||
}
|
||||
|
||||
.game-ui {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
margin-bottom: 20px;
|
||||
font-family: 'Orbitron', monospace;
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
.game-ui > div {
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
padding: 10px 20px;
|
||||
border-radius: 10px;
|
||||
border: 1px solid #00ffff;
|
||||
}
|
||||
|
||||
#gameCanvas {
|
||||
border: 3px solid #00ffff;
|
||||
border-radius: 15px;
|
||||
background: radial-gradient(ellipse at center, #001122 0%, #000511 100%);
|
||||
box-shadow: 0 0 30px #00ffff;
|
||||
}
|
||||
|
||||
.game-controls {
|
||||
margin-top: 20px;
|
||||
font-size: 1.1rem;
|
||||
color: #cccccc;
|
||||
}
|
||||
|
||||
/* Intro Text */
|
||||
.intro-text {
|
||||
text-align: center;
|
||||
max-width: 600px;
|
||||
margin: 0 auto 50px;
|
||||
font-size: 1.2rem;
|
||||
line-height: 1.6;
|
||||
color: #e0e0e0;
|
||||
}
|
||||
|
||||
/* Games Grid */
|
||||
.games-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
|
||||
gap: 30px;
|
||||
margin-bottom: 50px;
|
||||
}
|
||||
|
||||
.game-card {
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
border-radius: 20px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3);
|
||||
transition: all 0.3s ease;
|
||||
backdrop-filter: blur(10px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.game-card:hover {
|
||||
transform: translateY(-10px);
|
||||
box-shadow: 0 25px 50px rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
|
||||
.game-card.special-gift {
|
||||
border: 2px solid #ffd700;
|
||||
box-shadow: 0 15px 35px rgba(255, 215, 0, 0.3);
|
||||
}
|
||||
|
||||
.game-card.special-gift:hover {
|
||||
box-shadow: 0 25px 50px rgba(255, 215, 0, 0.5);
|
||||
}
|
||||
|
||||
.special-badge {
|
||||
position: absolute;
|
||||
top: -10px;
|
||||
right: -10px;
|
||||
background: linear-gradient(45deg, #ffd700, #ffed4e);
|
||||
color: #000;
|
||||
padding: 8px 16px;
|
||||
border-radius: 20px;
|
||||
font-weight: bold;
|
||||
font-size: 0.9rem;
|
||||
z-index: 10;
|
||||
box-shadow: 0 5px 15px rgba(255, 215, 0, 0.4);
|
||||
animation: pulse 2s infinite;
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0% { transform: scale(1); }
|
||||
50% { transform: scale(1.05); }
|
||||
100% { transform: scale(1); }
|
||||
}
|
||||
|
||||
.game-image {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
height: 250px;
|
||||
}
|
||||
|
||||
.image-stack {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.game-cover, .game-screenshot {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
transition: all 0.5s ease;
|
||||
}
|
||||
|
||||
.game-cover {
|
||||
z-index: 2;
|
||||
opacity: 1;
|
||||
transform: scale(0.95); /* Leicht rausgezoomt für bessere Sicht */
|
||||
}
|
||||
|
||||
.game-screenshot {
|
||||
z-index: 1;
|
||||
opacity: 0;
|
||||
transform: scale(1.05); /* Weniger Zoom beim Hover */
|
||||
}
|
||||
|
||||
.game-card:hover .game-cover {
|
||||
opacity: 0;
|
||||
transform: scale(0.85); /* Mehr rauszoomen beim Hover */
|
||||
}
|
||||
|
||||
.game-card:hover .game-screenshot {
|
||||
opacity: 1;
|
||||
transform: scale(0.95); /* Auch Screenshots weniger gezoomt */
|
||||
}
|
||||
|
||||
/* Spezielle Anpassungen für Atomic Heart und Prey */
|
||||
.atomic-heart .game-cover,
|
||||
.prey .game-cover {
|
||||
transform: scale(0.9); /* Steam Cover leicht rausgezoomt */
|
||||
object-fit: cover; /* Normal für Steam-Bilder */
|
||||
}
|
||||
|
||||
/* Hover-Bilder (deine neuen Bilder) anders behandeln */
|
||||
.atomic-heart .game-screenshot,
|
||||
.prey .game-screenshot {
|
||||
object-fit: contain; /* Bessere Darstellung für deine PNG-Bilder */
|
||||
background: linear-gradient(135deg, rgba(0,0,0,0.1), rgba(0,0,0,0.2));
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
.atomic-heart:hover .game-cover,
|
||||
.prey:hover .game-cover {
|
||||
transform: scale(0.8); /* Steam Cover beim Hover */
|
||||
}
|
||||
|
||||
.atomic-heart:hover .game-screenshot,
|
||||
.prey:hover .game-screenshot {
|
||||
transform: scale(0.9); /* Deine Bilder beim Hover optimal anzeigen */
|
||||
}
|
||||
|
||||
/* Elden Ring bleibt unverändert */
|
||||
.elden-ring .game-cover,
|
||||
.elden-ring .game-screenshot {
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
/* Elden Ring Golden Particles */
|
||||
.golden-particles {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
pointer-events: none;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.elden-ring .golden-particles::before,
|
||||
.elden-ring .golden-particles::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 4px;
|
||||
height: 4px;
|
||||
background: radial-gradient(circle, #ffd700, #ffed4e);
|
||||
border-radius: 50%;
|
||||
animation: goldenFloat 8s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.elden-ring .golden-particles::before {
|
||||
top: 20%;
|
||||
left: 15%;
|
||||
animation-delay: 0s;
|
||||
}
|
||||
|
||||
.elden-ring .golden-particles::after {
|
||||
top: 70%;
|
||||
right: 20%;
|
||||
animation-delay: 4s;
|
||||
}
|
||||
|
||||
@keyframes goldenFloat {
|
||||
0%, 100% {
|
||||
transform: translateY(0) scale(1);
|
||||
opacity: 0.6;
|
||||
}
|
||||
50% {
|
||||
transform: translateY(-20px) scale(1.5);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.game-overlay {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));
|
||||
padding: 20px;
|
||||
color: white;
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s ease;
|
||||
}
|
||||
|
||||
.game-card:hover .game-overlay {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.game-overlay .game-title {
|
||||
font-family: 'Orbitron', monospace;
|
||||
font-weight: bold;
|
||||
font-size: 1.2rem;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.game-overlay .game-description {
|
||||
font-size: 0.9rem;
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.game-info {
|
||||
padding: 25px;
|
||||
}
|
||||
|
||||
.game-info h3 {
|
||||
font-family: 'Orbitron', monospace;
|
||||
font-size: 1.4rem;
|
||||
margin-bottom: 10px;
|
||||
color: #00ffff;
|
||||
}
|
||||
|
||||
.game-info p {
|
||||
line-height: 1.6;
|
||||
margin-bottom: 20px;
|
||||
color: #e0e0e0;
|
||||
}
|
||||
|
||||
/* Advanced Scratch Card Styles */
|
||||
.scratch-card {
|
||||
position: relative;
|
||||
margin: 25px 0;
|
||||
border-radius: 15px;
|
||||
overflow: hidden;
|
||||
background: linear-gradient(135deg, #2c3e50, #34495e, #4a6741);
|
||||
border: 2px solid #3498db;
|
||||
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.scratch-card.advanced-scratch {
|
||||
background: linear-gradient(135deg, #1e3c72, #2a5298, #3d5aa1);
|
||||
border: 3px solid #00d4ff;
|
||||
box-shadow:
|
||||
0 8px 32px rgba(0, 212, 255, 0.3),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.scratch-card.special-scratch {
|
||||
background: linear-gradient(135deg, #d4af37, #ffd700, #ffed4e);
|
||||
border: 3px solid #ffed4e;
|
||||
box-shadow:
|
||||
0 8px 32px rgba(255, 215, 0, 0.4),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
|
||||
.scratch-canvas {
|
||||
display: block;
|
||||
cursor: crosshair;
|
||||
background: linear-gradient(135deg, #34495e, #4a6741);
|
||||
transition: box-shadow 0.3s ease;
|
||||
}
|
||||
|
||||
.scratch-card.advanced-scratch .scratch-canvas {
|
||||
background: linear-gradient(135deg, #2a5298, #3d5aa1);
|
||||
}
|
||||
|
||||
.scratch-card.special-scratch .scratch-canvas {
|
||||
background: linear-gradient(135deg, #ffd700, #ffed4e);
|
||||
}
|
||||
|
||||
.scratch-canvas:hover {
|
||||
box-shadow: inset 0 0 20px rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.hidden-key {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
font-family: 'Orbitron', monospace;
|
||||
font-weight: bold;
|
||||
font-size: 1.3rem;
|
||||
color: #00ffff;
|
||||
text-shadow: 0 0 15px #00ffff;
|
||||
z-index: -1;
|
||||
letter-spacing: 2px;
|
||||
}
|
||||
|
||||
.special-scratch .hidden-key {
|
||||
color: #2c3e50;
|
||||
text-shadow: 0 0 15px #2c3e50;
|
||||
font-size: 1.4rem;
|
||||
}
|
||||
|
||||
.scratch-instruction {
|
||||
text-align: center;
|
||||
padding: 12px;
|
||||
background: rgba(0, 0, 0, 0.4);
|
||||
color: #ffffff;
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
backdrop-filter: blur(5px);
|
||||
}
|
||||
|
||||
.scratch-progress {
|
||||
padding: 15px;
|
||||
background: rgba(0, 0, 0, 0.3);
|
||||
backdrop-filter: blur(5px);
|
||||
}
|
||||
|
||||
.progress-bar {
|
||||
width: 100%;
|
||||
height: 8px;
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
border-radius: 10px;
|
||||
overflow: hidden;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.progress-bar.golden {
|
||||
background: rgba(255, 215, 0, 0.3);
|
||||
}
|
||||
|
||||
.progress-fill {
|
||||
height: 100%;
|
||||
background: linear-gradient(90deg, #00ffff, #0099cc);
|
||||
border-radius: 10px;
|
||||
width: 0%;
|
||||
transition: width 0.3s ease;
|
||||
}
|
||||
|
||||
.progress-bar.golden .progress-fill {
|
||||
background: linear-gradient(90deg, #ffd700, #ffed4e);
|
||||
}
|
||||
|
||||
.progress-text {
|
||||
font-family: 'Orbitron', monospace;
|
||||
font-size: 0.9rem;
|
||||
color: #ffffff;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* Steam Links */
|
||||
.steam-link {
|
||||
display: inline-block;
|
||||
background: linear-gradient(45deg, #171a21, #2a475e);
|
||||
color: #66c0f4;
|
||||
padding: 12px 24px;
|
||||
border-radius: 25px;
|
||||
text-decoration: none;
|
||||
font-weight: 600;
|
||||
transition: all 0.3s ease;
|
||||
border: 2px solid #66c0f4;
|
||||
}
|
||||
|
||||
.steam-link:hover {
|
||||
background: linear-gradient(45deg, #66c0f4, #4a90e2);
|
||||
color: #ffffff;
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 5px 15px rgba(102, 192, 244, 0.4);
|
||||
}
|
||||
|
||||
.special-steam-link {
|
||||
background: linear-gradient(45deg, #ffd700, #ffed4e);
|
||||
color: #2c3e50;
|
||||
border-color: #ffd700;
|
||||
}
|
||||
|
||||
.special-steam-link:hover {
|
||||
background: linear-gradient(45deg, #ffed4e, #fff59d);
|
||||
color: #1a1a1a;
|
||||
box-shadow: 0 5px 15px rgba(255, 215, 0, 0.4);
|
||||
}
|
||||
|
||||
/* Birthday Message */
|
||||
.birthday-message {
|
||||
text-align: center;
|
||||
margin: 60px 0;
|
||||
}
|
||||
|
||||
.message-box {
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
padding: 40px;
|
||||
border-radius: 20px;
|
||||
max-width: 600px;
|
||||
margin: 0 auto;
|
||||
backdrop-filter: blur(10px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.message-box h3 {
|
||||
font-size: 2rem;
|
||||
margin-bottom: 20px;
|
||||
color: #ffd700;
|
||||
text-shadow: 0 0 10px #ffd700;
|
||||
}
|
||||
|
||||
.message-box p {
|
||||
line-height: 1.8;
|
||||
margin-bottom: 20px;
|
||||
font-size: 1.1rem;
|
||||
color: #e0e0e0;
|
||||
}
|
||||
|
||||
.signature {
|
||||
margin-top: 30px;
|
||||
font-style: italic;
|
||||
font-size: 1.2rem;
|
||||
color: #ff6b6b;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* Footer */
|
||||
footer {
|
||||
text-align: center;
|
||||
padding: 40px 0;
|
||||
}
|
||||
|
||||
.floating-icons {
|
||||
font-size: 2rem;
|
||||
animation: float 6s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes float {
|
||||
0%, 100% { transform: translateY(0px); }
|
||||
50% { transform: translateY(-20px); }
|
||||
}
|
||||
|
||||
/* Responsive Design */
|
||||
@media (max-width: 768px) {
|
||||
.container {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.games-grid {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.main-title {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.name-title {
|
||||
font-size: 3rem;
|
||||
}
|
||||
|
||||
.game-info {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.message-box {
|
||||
padding: 30px 20px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Enhanced Gaming Themes */
|
||||
.atomic-heart {
|
||||
border-left: 6px solid #ff4757;
|
||||
background: linear-gradient(135deg, rgba(255, 71, 87, 0.05), rgba(0, 0, 0, 0.05));
|
||||
}
|
||||
|
||||
.atomic-heart .game-info h3 {
|
||||
color: #ff4757;
|
||||
text-shadow: 0 0 15px #ff4757;
|
||||
}
|
||||
|
||||
.prey {
|
||||
border-left: 6px solid #5352ed;
|
||||
background: linear-gradient(135deg, rgba(83, 82, 237, 0.05), rgba(0, 0, 0, 0.05));
|
||||
}
|
||||
|
||||
.prey .game-info h3 {
|
||||
color: #5352ed;
|
||||
text-shadow: 0 0 15px #5352ed;
|
||||
}
|
||||
|
||||
.elden-ring {
|
||||
border-left: 6px solid #ffd700;
|
||||
background: linear-gradient(135deg, rgba(255, 215, 0, 0.08), rgba(255, 237, 78, 0.03));
|
||||
}
|
||||
|
||||
.elden-ring .game-info h3 {
|
||||
font-family: 'Cinzel', serif;
|
||||
color: #ffd700;
|
||||
text-shadow: 0 0 20px #ffd700;
|
||||
font-size: 1.6rem;
|
||||
}
|
||||
|
||||
.elden-ring .game-info p {
|
||||
font-size: 1.05rem;
|
||||
line-height: 1.7;
|
||||
}
|
||||
|
||||
.signature {
|
||||
margin-top: 40px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.signature-text {
|
||||
font-style: italic;
|
||||
font-size: 1.1rem;
|
||||
color: #e0e0e0;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.signature-name {
|
||||
font-size: 1.4rem;
|
||||
color: #ff6b6b;
|
||||
font-weight: bold;
|
||||
text-shadow: 0 0 10px #ff6b6b;
|
||||
font-family: 'Orbitron', monospace;
|
||||
}
|
||||
|
||||
/* Loading Animation */
|
||||
@keyframes fadeIn {
|
||||
from { opacity: 0; transform: translateY(30px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
|
||||
.game-card {
|
||||
animation: fadeIn 0.8s ease forwards;
|
||||
}
|
||||
|
||||
.game-card:nth-child(1) { animation-delay: 0.2s; }
|
||||
.game-card:nth-child(2) { animation-delay: 0.4s; }
|
||||
.game-card:nth-child(3) { animation-delay: 0.6s; }
|
||||
Reference in New Issue
Block a user