diff --git a/README.md b/README.md index 3313e2f..a3292fa 100644 --- a/README.md +++ b/README.md @@ -1,24 +1,56 @@ # Gift Prank Website -A fun prank website that looks like a gift redemption portal. +A fun prank website that looks like a gift redemption portal with support for multiple users! ## How it works: -1. **Code Entry**: Enter the 5-digit code: `12345` +1. **Code Entry**: Enter a 5-digit redemption code 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! +3. **Hoax Reveal**: When they confirm, reveals it's a prank and shows the REAL personalized gift! + +## Available Codes: + +Each code has a personalized greeting and real gift reveal: + +- **12345** - Lunch at The Savoy Hotel in London +- **54321** - Luxury Spa Day Experience +- **99999** - West End Theatre Experience ## Files: - `index.html` - Main HTML structure - `styles.css` - Styling and animations -- `script.js` - Interactive functionality +- `script.js` - Interactive functionality with multi-user support ## 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` +## Adding New Users: -Enjoy pranking your friend! 🎁😂 +Edit `script.js` and add a new entry to the `USERS` object: + +```javascript +'YOUR_CODE': { + name: 'User Name', + greeting: 'Your custom greeting here!', + hoaxMessage: 'Your custom hoax reveal message!', + realGift: { + icon: '🎁', // Emoji icon + title: 'Gift Title', + description: 'Gift description text:', + features: [ + '✨ Feature 1', + '🎉 Feature 2', + '💝 Feature 3' + ], + finalMessage: 'Your final personalized message!' + } +} +``` + +## Customization: +- Add more users by editing the `USERS` object in `script.js` +- Modify the fake brewery/festival content in `index.html` +- Adjust colors and styling in `styles.css` +- Change the video file by replacing `powerhour.mp4` + +Enjoy pranking your friends! 🎁😂 diff --git a/script.js b/script.js index 235c958..adb2d26 100644 --- a/script.js +++ b/script.js @@ -1,5 +1,64 @@ -// Valid redemption code (you can change this to any 5-digit code) -const VALID_CODE = '12345'; +// User-specific codes and content +const USERS = { + '12345': { + name: 'Friend', + greeting: 'Your Ultimate Experience Awaits!', + hoaxMessage: 'Did you really think I\'d send you to survive that chaos?!', + realGift: { + icon: '🍽️', + title: 'Lunch at The Savoy Hotel', + description: 'Experience exquisite dining at the iconic Savoy Hotel on the Strand, London:', + features: [ + '🏨 Historic luxury hotel on the River Thames', + '🍴 Fine dining in elegant surroundings', + '🥂 Champagne reception', + '👨‍🍳 Award-winning cuisine', + '☕ Traditional afternoon tea experience', + '🎩 Impeccable service in a legendary setting', + '😌 Pure sophistication (no mud fields or porta-potties!)' + ], + finalMessage: 'You deserve a truly refined experience, not a week of beer and bass! Enjoy your elegant lunch at one of London\'s most prestigious hotels! 💝' + } + }, + // Add more users here with different codes + '54321': { + name: 'Buddy', + greeting: 'An Incredible Adventure Awaits You!', + hoaxMessage: 'HAHA! You actually believed that?!', + realGift: { + icon: '🧖‍♂️', + title: 'Luxury Spa Day Experience', + description: 'Enjoy a relaxing day at a premium spa with:', + features: [ + '🌿 Full body massage', + '💆 Facial treatment', + '🛀 Thermal bath access', + '🍵 Refreshments & healthy snacks', + '😌 Pure relaxation (no hardcore music!)' + ], + finalMessage: 'You deserve some actual rest and relaxation, not a week-long hangover! Enjoy your peaceful spa day! 💝' + } + }, + '99999': { + name: 'Mate', + greeting: 'Your Epic Gift Is Ready!', + hoaxMessage: 'Got you! As if I\'d actually send you through that madness!', + realGift: { + icon: '🎭', + title: 'West End Theatre Experience', + description: 'Enjoy a spectacular evening in London\'s Theatre District:', + features: [ + '🎟️ Premium seats to a top West End show', + '🍽️ Pre-theatre dinner at a fine restaurant', + '🥂 Champagne during intermission', + '🚖 Private car service to and from the venue', + '✨ VIP treatment all evening', + '😌 Culture and class (not mud and madness!)' + ], + finalMessage: 'Experience the magic of London\'s West End, not the chaos of a Dutch music festival! Enjoy the show! 💝' + } + } +}; // Get DOM elements const codeScreen = document.getElementById('code-screen'); @@ -10,6 +69,9 @@ const redeemBtn = document.getElementById('redeem-btn'); const confirmBtn = document.getElementById('confirm-btn'); const errorMessage = document.getElementById('error-message'); +// Store current user data +let currentUser = null; + // Format input to only accept numbers codeInput.addEventListener('input', function(e) { this.value = this.value.replace(/[^0-9]/g, ''); @@ -33,8 +95,13 @@ redeemBtn.addEventListener('click', function() { return; } - if (code === VALID_CODE) { + if (USERS[code]) { + currentUser = USERS[code]; errorMessage.textContent = ''; + + // Update greeting + document.querySelector('.gift-title').textContent = currentUser.greeting; + // Transition to reveal screen codeScreen.classList.remove('active'); revealScreen.classList.add('active'); @@ -50,11 +117,30 @@ redeemBtn.addEventListener('click', function() { // Confirm button click (reveal the hoax) confirmBtn.addEventListener('click', function() { + if (!currentUser) return; + // Add some dramatic pause confirmBtn.textContent = 'PROCESSING...'; confirmBtn.disabled = true; setTimeout(() => { + // Update hoax reveal message + document.querySelector('.hoax-message').textContent = currentUser.hoaxMessage; + + // Update real gift content + document.querySelector('.spa-icon').textContent = currentUser.realGift.icon; + document.querySelector('.real-gift h2').innerHTML = `✨ ${currentUser.realGift.title} ✨`; + document.querySelector('.spa-description').textContent = currentUser.realGift.description; + + // Update features list + const featuresList = document.querySelector('.spa-features'); + featuresList.innerHTML = currentUser.realGift.features.map(feature => + `
  • ${feature}
  • ` + ).join(''); + + // Update final message + document.querySelector('.final-message').textContent = currentUser.realGift.finalMessage; + revealScreen.classList.remove('active'); finalScreen.classList.add('active'); window.scrollTo(0, 0);