javascript.js

// Mobile Menu Toggle
const hamburger = document.querySelector('.hamburger');
const navLinks = document.querySelector('.nav-links');

hamburger.addEventListener('click', () => {
    hamburger.classList.toggle('active');
    navLinks.classList.toggle('active');
});

// Close menu when clicking a link
document.querySelectorAll('.nav-links a').forEach(link => {
    link.addEventListener('click', () => {
        hamburger.classList.remove('active');
        navLinks.classList.remove('active');
    });
});
// Fading Navigation on Scroll
let lastScroll = 0;
const navbar = document.querySelector('.navbar');
const scrollThreshold = 100; // How far to scroll before effects trigger

window.addEventListener('scroll', () => {
    const currentScroll = window.pageYOffset;
    
    if (currentScroll <= 0) {
        // At top of page - reset styles
        navbar.classList.remove('scrolled-down', 'scrolled-up');
        navbar.style.background = 'transparent';
        navbar.style.boxShadow = 'none';
        return;
    }
    
    if (currentScroll > lastScroll && currentScroll > scrollThreshold) {
        // Scrolling down
        navbar.classList.remove('scrolled-up');
        navbar.classList.add('scrolled-down');
    } else if (currentScroll < lastScroll) {
        // Scrolling up
        navbar.classList.remove('scrolled-down');
        navbar.classList.add('scrolled-up');
    }
    
    lastScroll = currentScroll;
});
// Genre Card Animation
const genreCards = document.querySelectorAll('.genre-card');

genreCards.forEach(card => {
    card.addEventListener('mouseenter', () => {
        const genre = card.getAttribute('data-genre');
        card.style.setProperty('--primary', getGenreColor(genre).primary);
        card.style.setProperty('--secondary', getGenreColor(genre).secondary);
    });
});

function getGenreColor(genre) {
    const colors = {
        action: { primary: '#FF4655', secondary: '#FF6B6B' },
        adventure: { primary: '#1E90FF', secondary: '#00BFFF' },
        rpg: { primary: '#FFD700', secondary: '#FFA500' },
        fps: { primary: '#FF6347', secondary: '#FF4500' },
        sports: { primary: '#2ECC71', secondary: '#27AE60' },
        strategy: { primary: '#9B59B6', secondary: '#8E44AD' },
        horror: { primary: '#E74C3C', secondary: '#C0392B' },
        racing: { primary: '#3498DB', secondary: '#2980B9' }
    };
    return colors[genre] || { primary: '#00F7FF', secondary: '#FF00E4' };
}
// Form Validation
const signupForm = document.getElementById('signup-form');
const passwordInput = document.getElementById('password');
const confirmPasswordInput = document.getElementById('confirm-password');
const strengthMeter = document.querySelector('.strength-meter');
const strengthText = document.querySelector('.strength-text');
const passwordRequirements = document.querySelectorAll('.password-requirements li');

// Password Strength Check
passwordInput.addEventListener('input', () => {
    const password = passwordInput.value;
    const strength = calculateStrength(password);
    updateStrengthMeter(strength);
    checkPasswordRequirements(password);
});

// Toggle Password Visibility
document.querySelectorAll('.toggle-password').forEach(button => {
    button.addEventListener('click', () => {
        const input = button.parentElement.querySelector('input');
        const icon = button.querySelector('i');
        
        if (input.type === 'password') {
            input.type = 'text';
            icon.classList.remove('fa-eye');
            icon.classList.add('fa-eye-slash');
        } else {
            input.type = 'password';
            icon.classList.remove('fa-eye-slash');
            icon.classList.add('fa-eye');
        }
    });
});

// Confirm Password Match
confirmPasswordInput.addEventListener('input', () => {
    if (confirmPasswordInput.value !== passwordInput.value) {
        confirmPasswordInput.parentElement.parentElement.querySelector('.error-message').textContent = 'Passwords do not match';
    } else {
        confirmPasswordInput.parentElement.parentElement.querySelector('.error-message').textContent = '';
    }
});

// Form Submission
signupForm.addEventListener('submit', (e) => {
    e.preventDefault();
    
    // Validate form
    let isValid = true;
    const formData = new FormData(signupForm);
    
    // Check username
    if (formData.get('username').length < 3) {
        document.querySelector('#username').parentElement.parentElement.querySelector('.error-message').textContent = 'Username must be at least 3 characters';
        isValid = false;
    }
    
    // Check email
    if (!/^\S+@\S+\.\S+$/.test(formData.get('email'))) {
        document.querySelector('#email').parentElement.parentElement.querySelector('.error-message').textContent = 'Please enter a valid email';
        isValid = false;
    }
    
    // Check password strength
    if (calculateStrength(formData.get('password')) < 3) {
        document.querySelector('#password').parentElement.parentElement.querySelector('.error-message').textContent = 'Password is too weak';
        isValid = false;
    }
    
    // Check password match
    if (formData.get('password') !== confirmPasswordInput.value) {
        document.querySelector('#confirm-password').parentElement.parentElement.querySelector('.error-message').textContent = 'Passwords do not match';
        isValid = false;
    }
    
    // Check terms agreement
    if (!document.getElementById('terms').checked) {
        alert('You must agree to the Terms of Service');
        isValid = false;
    }
    
    if (isValid) {
        // Simulate form submission
        const submitBtn = document.querySelector('.create-account-btn');
        submitBtn.classList.add('loading');
        
        setTimeout(() => {
            submitBtn.classList.remove('loading');
            alert('Account created successfully! Redirecting...');
            // window.location.href = 'account.html';
        }, 2000);
    }
});

// Helper Functions
function calculateStrength(password) {
    let strength = 0;
    
    // Length
    if (password.length >= 8) strength++;
    if (password.length >= 12) strength++;
    
    // Contains uppercase
    if (/[A-Z]/.test(password)) strength++;
    
    // Contains number
    if (/[0-9]/.test(password)) strength++;
    
    // Contains special character
    if (/[^A-Za-z0-9]/.test(password)) strength++;
    
    return Math.min(strength, 5);
}

function updateStrengthMeter(strength) {
    const percent = (strength / 5) * 100;
    strengthMeter.style.width = `${percent}%`;
    
    // Update color and text
    if (strength <= 1) {
        strengthMeter.style.background = '#e74c3c';
        strengthText.textContent = 'Weak';
    } else if (strength <= 3) {
        strengthMeter.style.background = '#f39c12';
        strengthText.textContent = 'Medium';
    } else {
        strengthMeter.style.background = '#2ecc71';
        strengthText.textContent = 'Strong';
    }
}

function checkPasswordRequirements(password) {
    // Length
    if (password.length >= 8) {
        document.querySelector('[data-requirement="length"]').classList.add('valid');
    } else {
        document.querySelector('[data-requirement="length"]').classList.remove('valid');
    }
    
    // Uppercase
    if (/[A-Z]/.test(password)) {
        document.querySelector('[data-requirement="uppercase"]').classList.add('valid');
    } else {
        document.querySelector('[data-requirement="uppercase"]').classList.remove('valid');
    }
    
    // Number
    if (/[0-9]/.test(password)) {
        document.querySelector('[data-requirement="number"]').classList.add('valid');
    } else {
        document.querySelector('[data-requirement="number"]').classList.remove('valid');
    }
    
    // Special character
    if (/[^A-Za-z0-9]/.test(password)) {
        document.querySelector('[data-requirement="special"]').classList.add('valid');
    } else {
        document.querySelector('[data-requirement="special"]').classList.remove('valid');
    }
}