static/script.js

// Mouse move effect for container
document.querySelector('.container').addEventListener('mousemove', (e) => {
    const { currentTarget: target } = e;
    const rect = target.getBoundingClientRect();
    const x = e.clientX - rect.left;
    const y = e.clientY - rect.top;

    target.style.setProperty('--mouse-x', `${x}px`);
    target.style.setProperty('--mouse-y', `${y}px`);
});

// Interactive form elements
document.querySelectorAll('input, select').forEach(element => {
    // Add focus effects
    element.addEventListener('focus', (e) => {
        e.target.closest('.input-group').classList.add('focused');
    });

    element.addEventListener('blur', (e) => {
        e.target.closest('.input-group').classList.remove('focused');
    });

    // Add floating label effect
    if (element.type !== 'submit') {
        element.addEventListener('input', (e) => {
            if (e.target.value) {
                e.target.classList.add('has-value');
            } else {
                e.target.classList.remove('has-value');
            }
        });
    }
});

// Prediction success animation
function showPredictionSuccess() {
    const result = document.querySelector('.result');
    if (result && !result.textContent.includes('Error')) {
        createConfetti();
    }
}

// Confetti animation
function createConfetti() {
    const colors = ['#4361ee', '#3f37c9', '#4bb543', '#ffffff'];
    for (let i = 0; i < 50; i++) {
        const confetti = document.createElement('div');
        confetti.className = 'confetti';
        confetti.style.setProperty('--confetti-x', Math.random() * 100 + 'vw');
        confetti.style.setProperty('--confetti-color', colors[Math.floor(Math.random() * colors.length)]);
        confetti.style.setProperty('--confetti-rotation', Math.random() * 360 + 'deg');
        document.body.appendChild(confetti);
        
        setTimeout(() => {
            confetti.remove();
        }, 3000);
    }
}

// Form submission handler
document.getElementById('predictForm').addEventListener('submit', (e) => {
    e.preventDefault();
    const form = e.target;
    const formData = new FormData(form);
    
    // Show loading state
    document.getElementById('spinner').style.display = 'block';
    document.getElementById('resultBox').style.opacity = '0.5';

    // Submit form
    fetch('/', {
        method: 'POST',
        body: formData
    })
    .then(response => response.text())
    .then(html => {
        // Update only the result section
        const parser = new DOMParser();
        const doc = parser.parseFromString(html, 'text/html');
        const newResult = doc.querySelector('.result');
        const currentResult = document.querySelector('.result');
        
        currentResult.innerHTML = newResult.innerHTML;
        currentResult.className = newResult.className;
        
        // Hide spinner
        document.getElementById('spinner').style.display = 'none';
        currentResult.style.opacity = '1';
        
        // Show success animation if no error
        if (!newResult.classList.contains('error')) {
            showPredictionSuccess();
        }
    })
    .catch(error => {
        document.getElementById('spinner').style.display = 'none';
        document.getElementById('resultBox').innerHTML = 'Error: ' + error;
        document.getElementById('resultBox').classList.add('error');
    });
});

// Reset form handler
document.getElementById('predictForm').addEventListener('reset', () => {
    document.querySelectorAll('input, select').forEach(element => {
        element.classList.remove('has-value');
    });
    document.querySelector('.result').innerHTML = '';
    document.getElementById('spinner').style.display = 'none';
});