185 lines
9.3 KiB
HTML
185 lines
9.3 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Gift Redemption Portal</title>
|
||
<link rel="stylesheet" href="styles.css">
|
||
</head>
|
||
<body>
|
||
<div class="container">
|
||
<!-- Initial Code Entry Screen -->
|
||
<div id="code-screen" class="screen active">
|
||
<div class="gift-box">
|
||
<div class="ribbon"></div>
|
||
<div class="bow"></div>
|
||
</div>
|
||
<h1>🎁 Gift Redemption Portal</h1>
|
||
<p class="subtitle">Enter your 5-digit code to reveal your exclusive gift</p>
|
||
|
||
<div class="code-input-container">
|
||
<input type="text" id="code-input" maxlength="5" placeholder="00000" class="code-input">
|
||
<button id="redeem-btn" class="btn-primary">Redeem Gift</button>
|
||
</div>
|
||
<p class="error-message" id="error-message"></p>
|
||
</div>
|
||
|
||
<!-- Fake Gift Reveal Screen -->
|
||
<div id="reveal-screen" class="screen">
|
||
<h1>🎉 CONGRATULATIONS! 🎉</h1>
|
||
<h2 class="gift-title">Your Ultimate Experience Awaits!</h2>
|
||
|
||
<div class="gift-details">
|
||
<div class="gift-section">
|
||
<h3>🍺 7-DAY EXTREME BREWERY MARATHON</h3>
|
||
<p style="font-weight: bold; color: #d32f2f; margin-bottom: 15px;">
|
||
3 BREWERIES PER DAY | MINIMUM 5 BEERS PER LOCATION | LIMITED FOOD BREAKS
|
||
</p>
|
||
|
||
<div class="brewery-schedule">
|
||
<h4>📅 Your Grueling Itinerary:</h4>
|
||
|
||
<div class="day-schedule">
|
||
<strong>DAY 1 - Amsterdam Assault:</strong>
|
||
<ul>
|
||
<li>Brouwerij 't IJ - 6 IPAs (breakfast of champions!)</li>
|
||
<li>Two Chefs Brewing - 5 experimental sours</li>
|
||
<li>Oedipus Brewing - 7 high-ABV specials</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="day-schedule">
|
||
<strong>DAY 2 - Rotterdam Rampage:</strong>
|
||
<ul>
|
||
<li>Kaapse Brouwers - 6 hoppy lagers</li>
|
||
<li>Stadsbierbrouwerij De Pelgrim - 5 Belgian-style ales</li>
|
||
<li>Noordt Bier - 6 stouts (heavy and unforgiving)</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="day-schedule">
|
||
<strong>DAY 3 - Utrecht Undertaking:</strong>
|
||
<ul>
|
||
<li>Stadsbrouwerij Maximus - 5 wheat beers</li>
|
||
<li>De Leckere - 6 farmhouse ales</li>
|
||
<li>Oproer Brouwerij - 7 double IPAs (no mercy!)</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="day-schedule">
|
||
<strong>DAY 4 - The Hague Hardship:</strong>
|
||
<ul>
|
||
<li>Kompaan Bierbrouwerij - 6 pilsners</li>
|
||
<li>Haagsche Broeder - 5 brown ales</li>
|
||
<li>Trappist Brouwerij - 8 monastery brews (pray for your liver)</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="day-schedule">
|
||
<strong>DAY 5 - Haarlem Havoc:</strong>
|
||
<ul>
|
||
<li>Jopen Bier - 6 historic recipes</li>
|
||
<li>Uiltje Brewing Company - 7 owl-themed IPAs</li>
|
||
<li>Ramses Bier - 5 Egyptian-inspired brews</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="day-schedule">
|
||
<strong>DAY 6 - Eindhoven Endurance:</strong>
|
||
<ul>
|
||
<li>Stadsbrouwerij Eindhoven - 6 industrial lagers</li>
|
||
<li>100 Watt Brewery - 5 electric ales</li>
|
||
<li>Little Bang Brewing - 7 explosive stouts</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="day-schedule">
|
||
<strong>DAY 7 - Final Countdown:</strong>
|
||
<ul>
|
||
<li>Texels Bierbrouwerij - 6 island beers</li>
|
||
<li>Brouwerij De Prael - 5 Amsterdam specials</li>
|
||
<li>Breugem Bier - 8 FINAL BOSS brews before Defqon!</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
<p style="background: #ffeb3b; padding: 10px; border-radius: 5px; margin-top: 15px; font-weight: bold; color: #333;">
|
||
⚠️ Total: 21 breweries • 127+ beers • Food breaks: MINIMAL (maybe some bitterballen if you're lucky)
|
||
</p>
|
||
</div>
|
||
|
||
<div class="gift-section highlight">
|
||
<h3>🎵 3-DAY CAMPING AT DEFQON.1 FESTIVAL</h3>
|
||
<p style="font-weight: bold; font-size: 1.2em; margin-bottom: 15px;">
|
||
STRAIGHT FROM YOUR BREWERY MARATHON TO THE MOST INTENSE HARDSTYLE FESTIVAL!
|
||
</p>
|
||
|
||
<div class="camping-details">
|
||
<h4>🏕️ Your "Luxury" Camping Experience:</h4>
|
||
<ul style="text-align: left; margin: 15px 0;">
|
||
<li>❌ Basic tent in MUD FIELD (June weather = rain guaranteed)</li>
|
||
<li>❌ Shared porta-potties with 10,000+ festival-goers</li>
|
||
<li>❌ No showers (or freezing cold ones at 6 AM)</li>
|
||
<li>❌ Sleep 3 hours max per night (bass doesn't stop until 4 AM)</li>
|
||
<li>❌ Wake up at 7 AM when the sun turns your tent into a sauna</li>
|
||
<li>❌ Festival food only: overpriced fries and mystery meat</li>
|
||
<li>❌ 150+ decibels of HARDCORE HARDSTYLE for 15 hours straight</li>
|
||
<li>❌ Surrounded by 60,000 sweaty ravers in neon</li>
|
||
<li>❌ Your hangover from 127 beers × 3 days of bass = LEGENDARY SUFFERING</li>
|
||
</ul>
|
||
|
||
<p style="background: #000; color: #ff0000; padding: 15px; border-radius: 5px; margin-top: 15px; font-weight: bold; font-size: 1.1em; border: 3px solid #ff0000;">
|
||
🔊 ENDURE THE CHAOS: 72 HOURS OF RELENTLESS BEATS, ZERO COMFORT, MAXIMUM PAIN! 🔊
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="video-container">
|
||
<h3>Get Ready for the POWER HOUR! ⚡</h3>
|
||
<div class="videos">
|
||
<!-- Local Power Hour video -->
|
||
<video controls width="100%" style="border-radius: 10px; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);">
|
||
<source src="powerhour.mp4" type="video/mp4">
|
||
Your browser does not support the video tag.
|
||
</video>
|
||
</div>
|
||
<p class="warning">⚠️ THIS IS HOW HARDCORE YOUR WEEK WILL BE! ⚠️</p>
|
||
</div>
|
||
</div>
|
||
|
||
<button id="confirm-btn" class="btn-confirm">CONFIRM & ACCEPT GIFT</button>
|
||
</div>
|
||
|
||
<!-- Hoax Reveal & Real Gift Screen -->
|
||
<div id="final-screen" class="screen">
|
||
<div class="hoax-reveal">
|
||
<h1 class="hoax-title">😂 GOTCHA! 😂</h1>
|
||
<p class="hoax-message">Did you really think I'd send you to survive that chaos?!</p>
|
||
<p class="hoax-subtitle">Here's your ACTUAL gift...</p>
|
||
</div>
|
||
|
||
<div class="real-gift">
|
||
<div class="spa-icon">🧖♂️</div>
|
||
<h2>✨ Luxury Spa Day Experience ✨</h2>
|
||
<p class="spa-description">
|
||
Enjoy a relaxing day at a premium spa with:
|
||
</p>
|
||
<ul class="spa-features">
|
||
<li>🌿 Full body massage</li>
|
||
<li>💆 Facial treatment</li>
|
||
<li>🛀 Thermal bath access</li>
|
||
<li>🍵 Refreshments & healthy snacks</li>
|
||
<li>😌 Pure relaxation (no hardcore music!)</li>
|
||
</ul>
|
||
<p class="final-message">
|
||
You deserve some actual rest and relaxation, not a week-long hangover!
|
||
Enjoy your peaceful spa day! 💝
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<script src="script.js"></script>
|
||
</body>
|
||
</html>
|