assets/js/script.js

// Age verification functionality
document.addEventListener('DOMContentLoaded', function() {
    // Initialize feather icons
    if (typeof feather !== 'undefined') {
        feather.replace();
    }

    // Age verification logic
    const ageVerification = document.getElementById('ageVerification');
    const mainContent = document.getElementById('mainContent');
    const enterButton = document.getElementById('enterSite');
    const exitButton = document.getElementById('exitSite');

    // Check if user has already verified age
    const hasVerified = localStorage.getItem('ageVerified');
    if (hasVerified === 'true') {
        ageVerification.classList.add('hidden');
        mainContent.classList.remove('hidden');
    }

    enterButton.addEventListener('click', function() {
        localStorage.setItem('ageVerified', 'true');
        ageVerification.classList.add('hidden');
        mainContent.classList.remove('hidden');
        
        // Re-initialize feather icons for main content
        if (typeof feather !== 'undefined') {
            setTimeout(() => feather.replace(), 100);
        }
    });

    exitButton.addEventListener('click', function() {
        window.location.href = 'https://www.google.com';
    });

    // Theme toggle functionality
    const themeToggle = document.getElementById('themeToggle');
    const themeIcon = themeToggle.querySelector('i');

    themeToggle.addEventListener('click', function() {
        const html = document.documentElement;
        if (html.classList.contains('dark')) {
            html.classList.remove('dark');
            themeIcon.setAttribute('data-feather', 'moon');
        localStorage.setItem('theme', 'light');
    } else {
        html.classList.add('dark');
        themeIcon.setAttribute('data-feather', 'sun');
        localStorage.setItem('theme', 'dark');
    }
    
    if (typeof feather !== 'undefined') {
        feather.replace();
    }
    });

    // Set initial theme based on localStorage or system preference
    const savedTheme = localStorage.getItem('theme');
    if (savedTheme === 'dark' || (!savedTheme && window.matchMedia('(prefers-color-scheme: dark)').matches) {
        document.documentElement.classList.add('dark');
        themeIcon.setAttribute('data-feather', 'sun');
        if (typeof feather !== 'undefined') {
            feather.replace();
        }
    }

    // Upload modal functionality
    const uploadTrigger = document.getElementById('uploadTrigger');
    const uploadModal = document.getElementById('uploadModal');
    const closeModal = document.getElementById('closeModal');
    const cancelUpload = document.getElementById('cancelUpload');
    const uploadArea = document.getElementById('uploadArea');
    const fileInput = document.getElementById('fileInput');
    const uploadProgress = document.getElementById('uploadProgress');
    const progressBar = document.getElementById('progressBar');
    const uploadError = document.getElementById('uploadError');
    const confirmUpload = document.getElementById('confirmUpload');

    let selectedFile = null;

    // Open modal
    uploadTrigger.addEventListener('click', function() {
        uploadModal.classList.remove('hidden');
        resetUploadState();
    });

    // Close modal functions
    function closeUploadModal() {
        uploadModal.classList.add('hidden');
        resetUploadState();
    }

    closeModal.addEventListener('click', closeUploadModal);
    cancelUpload.addEventListener('click', closeUploadModal);

    // Click outside modal to close
    uploadModal.addEventListener('click', function(e) {
        if (e.target === uploadModal) {
            closeUploadModal();
        }
    });

    // File upload handling
    uploadArea.addEventListener('click', function() {
        fileInput.click();
    });

    uploadArea.addEventListener('dragover', function(e) {
        e.preventDefault();
        uploadArea.classList.add('border-primary', 'bg-primary-50', 'dark:bg-primary-900/20');
    });

    uploadArea.addEventListener('dragleave', function() {
        uploadArea.classList.remove('border-primary', 'bg-primary-50', 'dark:bg-primary-900/20');
    });

    uploadArea.addEventListener('drop', function(e) {
        e.preventDefault();
        uploadArea.classList.remove('border-primary', 'bg-primary-50', 'dark:bg-primary-900/20');
        handleFileSelect(e.dataTransfer.files[0]);
    });

    fileInput.addEventListener('change', function(e) {
        if (e.target.files.length > 0) {
            handleFileSelect(e.target.files[0]);
        }
    });

    function handleFileSelect(file) {
        // Validate file type
        const validTypes = ['image/jpeg', 'image/jpg', 'image/png'];
        if (!validTypes.includes(file.type)) {
            showUploadError('Please upload only JPG or PNG files.');
            return;
        }

        // Validate file size (10MB)
        const maxSize = 10 * 1024 * 1024;
        if (file.size > maxSize) {
            showUploadError('File size must be less than 10MB.');
            return;
        }

        selectedFile = file;
        uploadArea.innerHTML = `
            <i data-feather="check" class="w-12 h-12 text-green-500 mx-auto mb-4"></i>
            <p class="text-gray-600 dark:text-gray-300 mb-2">${file.name}</p>
            <p class="text-sm text-gray-500 dark:text-gray-400">${(file.size / 1024 / 1024).toFixed(2)} MB</p>
        `;
        
        confirmUpload.disabled = false;
        
        if (typeof feather !== 'undefined') {
            feather.replace();
        }
    }

    confirmUpload.addEventListener('click', function() {
        if (!selectedFile) return;

        // Show progress bar
        uploadProgress.classList.remove('hidden');
        progressBar.style.width = '0%';

        // Simulate upload progress
        let progress = 0;
        const interval = setInterval(() => {
            progress += Math.random() * 15;
            if (progress > 100) progress = 100;
            progressBar.style.width = progress + '%';

            if (progress === 100) {
                clearInterval(interval);
                simulateAIRating();
            }
        }, 200);
    });

    function simulateAIRating() {
        // Simulate AI processing
        setTimeout(() => {
            // Show success and redirect to results
            alert('Your photo has been analyzed! Here is your brutally honest rating...');
            closeUploadModal();
            // In a real implementation, this would redirect to the results page
        }, 1500);
    }

    function resetUploadState() {
        selectedFile = null;
        uploadArea.innerHTML = `
            <i data-feather="upload" class="w-12 h-12 text-gray-400 mx-auto mb-4"></i>
            <p class="text-gray-600 dark:text-gray-300 mb-2">Click to upload or drag and drop</p>
            <p class="text-sm text-gray-500 dark:text-gray-400">JPG, PNG up to 10MB</p>
        `;
        uploadProgress.classList.add('hidden');
        uploadError.classList.add('hidden');
        confirmUpload.disabled = true;
        fileInput.value = '';
        
        if (typeof feather !== 'undefined') {
            feather.replace();
        }
    }

    function showUploadError(message) {
        uploadError.querySelector('p').textContent = message;
        uploadError.classList.remove('hidden');
        
        setTimeout(() => {
            uploadError.classList.add('hidden');
        }, 5000);
    }

    // Keyboard navigation
    document.addEventListener('keydown', function(e) {
        if (e.key === 'Escape' && !uploadModal.classList.contains('hidden')) {
            closeUploadModal();
        }
    });

    // Performance optimization: Lazy loading for future implementations
    if ('IntersectionObserver' in window) {
        const observer = new IntersectionObserver((entries) => {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    // Future: Load content when it comes into view
                }
            });
        });
    }
});