commit 9dddb35ac9b2a6d0f44915bbb916cca53fab7f29 Author: Oli Passey Date: Wed Dec 10 18:16:14 2025 +0000 initial diff --git a/README.md b/README.md new file mode 100644 index 0000000..3313e2f --- /dev/null +++ b/README.md @@ -0,0 +1,24 @@ +# Gift Prank Website + +A fun prank website that looks like a gift redemption portal. + +## How it works: + +1. **Code Entry**: Enter the 5-digit code: `12345` +2. **Fake Reveal**: Shows an "epic" gift of a week of brewery tours in Holland + 3-day Defqon.1 festival stay with hardcore videos +3. **Hoax Reveal**: When they confirm, reveals it's a prank and shows the real gift: a relaxing spa day! + +## Files: +- `index.html` - Main HTML structure +- `styles.css` - Styling and animations +- `script.js` - Interactive functionality + +## To run: +Simply open `index.html` in a web browser! + +## Customization: +- Change the redemption code in `script.js` (line 2): `const VALID_CODE = '12345';` +- Modify the spa gift details in `index.html` +- Adjust colors and styling in `styles.css` + +Enjoy pranking your friend! 🎁😂 diff --git a/index.html b/index.html new file mode 100644 index 0000000..e22d674 --- /dev/null +++ b/index.html @@ -0,0 +1,184 @@ + + + + + + Gift Redemption Portal + + + +
+ +
+
+
+
+
+

🎁 Gift Redemption Portal

+

Enter your 5-digit code to reveal your exclusive gift

+ +
+ + +
+

+
+ + +
+

🎉 CONGRATULATIONS! 🎉

+

Your Ultimate Experience Awaits!

+ +
+
+

🍺 7-DAY EXTREME BREWERY MARATHON

+

+ 3 BREWERIES PER DAY | MINIMUM 5 BEERS PER LOCATION | LIMITED FOOD BREAKS +

+ +
+

📅 Your Grueling Itinerary:

+ +
+ DAY 1 - Amsterdam Assault: +
    +
  • Brouwerij 't IJ - 6 IPAs (breakfast of champions!)
    • +
  • Two Chefs Brewing - 5 experimental sours
    • +
  • Oedipus Brewing - 7 high-ABV specials
    • +
+
+ +
+ DAY 2 - Rotterdam Rampage: +
    +
  • Kaapse Brouwers - 6 hoppy lagers
    • +
  • Stadsbierbrouwerij De Pelgrim - 5 Belgian-style ales
    • +
  • Noordt Bier - 6 stouts (heavy and unforgiving)
    • +
+
+ +
+ DAY 3 - Utrecht Undertaking: +
    +
  • Stadsbrouwerij Maximus - 5 wheat beers
    • +
  • De Leckere - 6 farmhouse ales
    • +
  • Oproer Brouwerij - 7 double IPAs (no mercy!)
    • +
+
+ +
+ DAY 4 - The Hague Hardship: +
    +
  • Kompaan Bierbrouwerij - 6 pilsners
    • +
  • Haagsche Broeder - 5 brown ales
    • +
  • Trappist Brouwerij - 8 monastery brews (pray for your liver)
    • +
+
+ +
+ DAY 5 - Haarlem Havoc: +
    +
  • Jopen Bier - 6 historic recipes
    • +
  • Uiltje Brewing Company - 7 owl-themed IPAs
    • +
  • Ramses Bier - 5 Egyptian-inspired brews
    • +
+
+ +
+ DAY 6 - Eindhoven Endurance: +
    +
  • Stadsbrouwerij Eindhoven - 6 industrial lagers
    • +
  • 100 Watt Brewery - 5 electric ales
    • +
  • Little Bang Brewing - 7 explosive stouts
    • +
+
+ +
+ DAY 7 - Final Countdown: +
    +
  • Texels Bierbrouwerij - 6 island beers
    • +
  • Brouwerij De Prael - 5 Amsterdam specials
    • +
  • Breugem Bier - 8 FINAL BOSS brews before Defqon!
    • +
+
+
+ +

+ ⚠️ Total: 21 breweries • 127+ beers • Food breaks: MINIMAL (maybe some bitterballen if you're lucky) +

+
+ +
+

🎵 3-DAY CAMPING AT DEFQON.1 FESTIVAL

+

+ STRAIGHT FROM YOUR BREWERY MARATHON TO THE MOST INTENSE HARDSTYLE FESTIVAL! +

+ +
+

🏕️ Your "Luxury" Camping Experience:

+
    +
  • ❌ Basic tent in MUD FIELD (June weather = rain guaranteed)
    • +
  • ❌ Shared porta-potties with 10,000+ festival-goers
    • +
  • ❌ No showers (or freezing cold ones at 6 AM)
    • +
  • ❌ Sleep 3 hours max per night (bass doesn't stop until 4 AM)
    • +
  • ❌ Wake up at 7 AM when the sun turns your tent into a sauna
    • +
  • ❌ Festival food only: overpriced fries and mystery meat
    • +
  • ❌ 150+ decibels of HARDCORE HARDSTYLE for 15 hours straight
    • +
  • ❌ Surrounded by 60,000 sweaty ravers in neon
    • +
  • ❌ Your hangover from 127 beers × 3 days of bass = LEGENDARY SUFFERING
    • +
+ +

+ 🔊 ENDURE THE CHAOS: 72 HOURS OF RELENTLESS BEATS, ZERO COMFORT, MAXIMUM PAIN! 🔊 +

+
+
+ +
+

Get Ready for the POWER HOUR! ⚡

+
+ + +
+

⚠️ THIS IS HOW HARDCORE YOUR WEEK WILL BE! ⚠️

+
+
+ + +
+ + +
+
+

😂 GOTCHA! 😂

+

Did you really think I'd send you to survive that chaos?!

+

Here's your ACTUAL gift...

+
+ +
+
🧖‍♂️
+

✨ Luxury Spa Day Experience ✨

+

+ Enjoy a relaxing day at a premium spa with: +

+
    +
  • 🌿 Full body massage
    • +
  • 💆 Facial treatment
    • +
  • 🛀 Thermal bath access
    • +
  • 🍵 Refreshments & healthy snacks
    • +
  • 😌 Pure relaxation (no hardcore music!)
    • +
+

+ You deserve some actual rest and relaxation, not a week-long hangover! + Enjoy your peaceful spa day! 💝 +

+
+
+
+ + + + diff --git a/powerhour.mp4 b/powerhour.mp4 new file mode 100644 index 0000000..dac406f Binary files /dev/null and b/powerhour.mp4 differ diff --git a/script.js b/script.js new file mode 100644 index 0000000..235c958 --- /dev/null +++ b/script.js @@ -0,0 +1,76 @@ +// Valid redemption code (you can change this to any 5-digit code) +const VALID_CODE = '12345'; + +// Get DOM elements +const codeScreen = document.getElementById('code-screen'); +const revealScreen = document.getElementById('reveal-screen'); +const finalScreen = document.getElementById('final-screen'); +const codeInput = document.getElementById('code-input'); +const redeemBtn = document.getElementById('redeem-btn'); +const confirmBtn = document.getElementById('confirm-btn'); +const errorMessage = document.getElementById('error-message'); + +// Format input to only accept numbers +codeInput.addEventListener('input', function(e) { + this.value = this.value.replace(/[^0-9]/g, ''); +}); + +// Handle Enter key in code input +codeInput.addEventListener('keypress', function(e) { + if (e.key === 'Enter') { + redeemBtn.click(); + } +}); + +// Redeem button click +redeemBtn.addEventListener('click', function() { + const code = codeInput.value.trim(); + + if (code.length !== 5) { + errorMessage.textContent = 'Please enter a 5-digit code'; + codeInput.classList.add('shake'); + setTimeout(() => codeInput.classList.remove('shake'), 500); + return; + } + + if (code === VALID_CODE) { + errorMessage.textContent = ''; + // Transition to reveal screen + codeScreen.classList.remove('active'); + revealScreen.classList.add('active'); + // Scroll to top + window.scrollTo(0, 0); + } else { + errorMessage.textContent = 'Invalid code. Please try again.'; + codeInput.value = ''; + codeInput.classList.add('shake'); + setTimeout(() => codeInput.classList.remove('shake'), 500); + } +}); + +// Confirm button click (reveal the hoax) +confirmBtn.addEventListener('click', function() { + // Add some dramatic pause + confirmBtn.textContent = 'PROCESSING...'; + confirmBtn.disabled = true; + + setTimeout(() => { + revealScreen.classList.remove('active'); + finalScreen.classList.add('active'); + window.scrollTo(0, 0); + }, 1500); +}); + +// Add shake animation for invalid codes +const style = document.createElement('style'); +style.textContent = ` + @keyframes shake { + 0%, 100% { transform: translateX(0); } + 25% { transform: translateX(-10px); } + 75% { transform: translateX(10px); } + } + .shake { + animation: shake 0.3s ease; + } +`; +document.head.appendChild(style); diff --git a/styles.css b/styles.css new file mode 100644 index 0000000..0faef93 --- /dev/null +++ b/styles.css @@ -0,0 +1,635 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body { + font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; + background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); + min-height: 100vh; + display: flex; + justify-content: center; + align-items: center; + padding: 10px; +} + +.container { + width: 100%; + max-width: 800px; +} + +.screen { + display: none; + background: white; + border-radius: 20px; + padding: 20px; + box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3); + animation: slideIn 0.5s ease; +} + +@media (min-width: 768px) { + .screen { + padding: 40px; + } + + body { + padding: 20px; + } +} + +.screen.active { + display: block; +} + +@keyframes slideIn { + from { + opacity: 0; + transform: translateY(30px); + } + to { + opacity: 1; + transform: translateY(0); + } +} + +/* Code Entry Screen */ +.gift-box { + width: 100px; + height: 100px; + background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); + margin: 0 auto 30px; + border-radius: 10px; + position: relative; + animation: bounce 2s infinite; +} + +@keyframes bounce { + 0%, 100% { transform: translateY(0); } + 50% { transform: translateY(-10px); } +} + +.ribbon { + position: absolute; + width: 20px; + height: 100%; + background: #ffd700; + left: 50%; + transform: translateX(-50%); +} + +.bow { + position: absolute; + width: 50px; + height: 30px; + background: #ffd700; + top: -10px; + left: 50%; + transform: translateX(-50%); + border-radius: 50%; +} + +h1 { + text-align: center; + color: #333; + margin-bottom: 10px; + font-size: 1.8em; + word-wrap: break-word; +} + +@media (min-width: 768px) { + h1 { + font-size: 2.5em; + } +} + +.subtitle { + text-align: center; + color: #666; + margin-bottom: 30px; + font-size: 1em; + padding: 0 10px; +} + +@media (min-width: 768px) { + .subtitle { + font-size: 1.1em; + padding: 0; + } +} + +.code-input-container { + display: flex; + flex-direction: column; + gap: 15px; + align-items: center; + margin-bottom: 10px; +} + +.code-input { + width: 180px; + padding: 12px; + font-size: 1.8em; + text-align: center; + border: 3px solid #667eea; + border-radius: 10px; + letter-spacing: 8px; + transition: all 0.3s; +} + +@media (min-width: 768px) { + .code-input { + width: 200px; + padding: 15px; + font-size: 2em; + letter-spacing: 10px; + } +} + +.code-input:focus { + outline: none; + border-color: #764ba2; + box-shadow: 0 0 20px rgba(102, 126, 234, 0.3); +} + +.btn-primary, .btn-confirm { + padding: 12px 30px; + font-size: 1em; + font-weight: bold; + color: white; + background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); + border: none; + border-radius: 50px; + cursor: pointer; + transition: all 0.3s; + text-transform: uppercase; +} + +@media (min-width: 768px) { + .btn-primary, .btn-confirm { + padding: 15px 40px; + font-size: 1.2em; + } +} + +.btn-primary:hover, .btn-confirm:hover { + transform: translateY(-2px); + box-shadow: 0 10px 30px rgba(102, 126, 234, 0.4); +} + +.error-message { + color: #f5576c; + text-align: center; + min-height: 20px; + font-weight: bold; +} + +/* Reveal Screen */ +.gift-title { + text-align: center; + color: #764ba2; + margin-bottom: 20px; + font-size: 1.3em; + word-wrap: break-word; + padding: 0 10px; +} + +@media (min-width: 768px) { + .gift-title { + font-size: 1.8em; + margin-bottom: 30px; + padding: 0; + } +} + +.gift-details { + margin: 20px 0; +} + +@media (min-width: 768px) { + .gift-details { + margin: 30px 0; + } +} + +.gift-section { + background: #f8f9fa; + padding: 15px; + border-radius: 10px; + margin-bottom: 20px; +} + +@media (min-width: 768px) { + .gift-section { + padding: 20px; + } +} + +.gift-section.highlight { + background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); + color: white; +} + +.gift-section h3 { + margin-bottom: 10px; + font-size: 1.2em; + word-wrap: break-word; +} + +@media (min-width: 768px) { + .gift-section h3 { + font-size: 1.5em; + } +} + +.gift-section p { + font-size: 0.95em; + line-height: 1.6; + word-wrap: break-word; +} + +@media (min-width: 768px) { + .gift-section p { + font-size: 1.1em; + } +} + +.brewery-schedule { + background: white; + padding: 10px; + border-radius: 8px; + margin-top: 15px; +} + +@media (min-width: 768px) { + .brewery-schedule { + padding: 15px; + } +} + +.brewery-schedule h4 { + color: #d32f2f; + margin-bottom: 15px; + font-size: 1em; + word-wrap: break-word; +} + +@media (min-width: 768px) { + .brewery-schedule h4 { + font-size: 1.2em; + } +} + +.day-schedule { + margin-bottom: 15px; + padding: 8px; + background: #fff3e0; + border-radius: 5px; + border-left: 4px solid #ff6f00; +} + +@media (min-width: 768px) { + .day-schedule { + padding: 10px; + } +} + +.day-schedule strong { + display: block; + color: #e65100; + margin-bottom: 8px; + font-size: 0.95em; + word-wrap: break-word; +} + +@media (min-width: 768px) { + .day-schedule strong { + font-size: 1.1em; + } +} + +.day-schedule ul { + list-style: none; + padding-left: 5px; +} + +@media (min-width: 768px) { + .day-schedule ul { + padding-left: 10px; + } +} + +.day-schedule ul li { + padding: 5px 0; + color: #333; + font-size: 0.9em; + word-wrap: break-word; +} + +@media (min-width: 768px) { + .day-schedule ul li { + font-size: 1em; + } +} + +.day-schedule ul li:before { + content: "🍺 "; + margin-right: 5px; +} + +.camping-details { + background: rgba(0, 0, 0, 0.3); + padding: 15px; + border-radius: 10px; + margin-top: 15px; +} + +@media (min-width: 768px) { + .camping-details { + padding: 20px; + } +} + +.camping-details h4 { + margin-bottom: 15px; + font-size: 1.1em; + word-wrap: break-word; +} + +@media (min-width: 768px) { + .camping-details h4 { + font-size: 1.3em; + } +} + +.camping-details ul { + list-style: none; + padding: 0; +} + +.camping-details ul li { + padding: 8px; + margin: 8px 0; + background: rgba(255, 255, 255, 0.1); + border-radius: 5px; + font-size: 0.9em; + word-wrap: break-word; +} + +@media (min-width: 768px) { + .camping-details ul li { + font-size: 1.05em; + } +} + +.video-container { + margin: 30px 0; + text-align: center; +} + +.video-container h3 { + margin-bottom: 20px; + color: #f5576c; + font-size: 1.3em; + animation: pulse 1.5s infinite; + word-wrap: break-word; +} + +@media (min-width: 768px) { + .video-container h3 { + font-size: 1.8em; + } +} + +@keyframes pulse { + 0%, 100% { opacity: 1; } + 50% { opacity: 0.7; } +} + +.videos { + margin: 20px 0; +} + +.videos iframe { + border-radius: 10px; + box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); +} + +.video-link-box { + background: #1a1a1a; + color: white; + padding: 30px; + border-radius: 10px; + text-align: center; +} + +.video-link-box h4 { + color: #ff0000; + margin-bottom: 20px; + font-size: 1.3em; +} + +.youtube-link { + display: inline-block; + background: #ff0000; + color: white; + padding: 15px 30px; + text-decoration: none; + border-radius: 5px; + font-weight: bold; + font-size: 1.2em; + transition: all 0.3s; +} + +.youtube-link:hover { + background: #cc0000; + transform: scale(1.05); +} + +.warning { + color: #ff0000; + font-weight: bold; + font-size: 1em; + margin-top: 20px; + animation: blink 1s infinite; + word-wrap: break-word; +} + +@media (min-width: 768px) { + .warning { + font-size: 1.3em; + } +} + +@keyframes blink { + 0%, 50%, 100% { opacity: 1; } + 25%, 75% { opacity: 0.5; } +} + +.btn-confirm { + display: block; + margin: 20px auto 0; + background: linear-gradient(135deg, #f5576c 0%, #764ba2 100%); + font-size: 1.1em; + padding: 15px 30px; +} + +@media (min-width: 768px) { + .btn-confirm { + margin: 30px auto 0; + font-size: 1.4em; + padding: 20px 50px; + } +} + +/* Final Screen */ +.hoax-reveal { + text-align: center; + margin-bottom: 20px; + padding: 20px; + background: linear-gradient(135deg, #ffeb3b 0%, #ff9800 100%); + border-radius: 15px; + animation: wiggle 0.5s ease; +} + +@media (min-width: 768px) { + .hoax-reveal { + margin-bottom: 40px; + padding: 30px; + } +} + +@keyframes wiggle { + 0%, 100% { transform: rotate(0deg); } + 25% { transform: rotate(-5deg); } + 75% { transform: rotate(5deg); } +} + +.hoax-title { + font-size: 2em; + color: #333; + margin-bottom: 15px; + word-wrap: break-word; +} + +@media (min-width: 768px) { + .hoax-title { + font-size: 3em; + } +} + +.hoax-message { + font-size: 1.1em; + color: #333; + font-weight: bold; + margin-bottom: 10px; + word-wrap: break-word; +} + +@media (min-width: 768px) { + .hoax-message { + font-size: 1.5em; + } +} + +.hoax-subtitle { + font-size: 1em; + color: #555; + font-style: italic; + word-wrap: break-word; +} + +@media (min-width: 768px) { + .hoax-subtitle { + font-size: 1.3em; + } +} + +.real-gift { + background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%); + padding: 20px; + border-radius: 15px; + text-align: center; +} + +@media (min-width: 768px) { + .real-gift { + padding: 40px; + } +} + +.spa-icon { + font-size: 3em; + margin-bottom: 20px; +} + +@media (min-width: 768px) { + .spa-icon { + font-size: 5em; + } +} + +.real-gift h2 { + color: #764ba2; + margin-bottom: 20px; + font-size: 1.5em; + word-wrap: break-word; +} + +@media (min-width: 768px) { + .real-gift h2 { + font-size: 2em; + } +} + +.spa-description { + font-size: 1em; + color: #333; + margin-bottom: 20px; + word-wrap: break-word; +} + +@media (min-width: 768px) { + .spa-description { + font-size: 1.2em; + } +} + +.spa-features { + list-style: none; + text-align: left; + max-width: 400px; + margin: 20px auto; + font-size: 0.95em; +} + +@media (min-width: 768px) { + .spa-features { + font-size: 1.1em; + } +} + +.spa-features li { + padding: 10px; + margin: 5px 0; + background: white; + border-radius: 8px; + box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); + word-wrap: break-word; +} + +.final-message { + font-size: 1em; + color: #333; + margin-top: 20px; + font-weight: bold; + line-height: 1.6; + word-wrap: break-word; +} + +@media (min-width: 768px) { + .final-message { + font-size: 1.2em; + margin-top: 30px; + } +}