Spaces:
Runtime error
Runtime error
File size: 3,839 Bytes
8752cbe |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 |
// 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';
});
|