multi-gift support

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:
+## Adding New Users:
-- 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! 🎁😂
+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! 🎁😂

script.js

@@ -1,5 +1,64 @@
-// Valid redemption code (you can change this to any 5-digit code)
+// User-specific codes and content
-const VALID_CODE = '12345';
+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 => 
+            `<li>${feature}</li>`
+        ).join('');
+        
+        // Update final message
+        document.querySelector('.final-message').textContent = currentUser.realGift.finalMessage;
+        
         revealScreen.classList.remove('active');
         finalScreen.classList.add('active');
         window.scrollTo(0, 0);