giftsite/script.js

// 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');
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');

// 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, '');
});

// 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 (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');
        // 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() {
    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);
    }, 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);