changes

app/static/js/confetti.js

@@ -0,0 +1,62 @@
+document.addEventListener('DOMContentLoaded', function() {
+    // Initialize confetti effect on page load
+    initConfetti();
+    
+    // Add confetti effect to welcome section button click
+    const welcomeButton = document.querySelector('.welcome-button');
+    if (welcomeButton) {
+        welcomeButton.addEventListener('click', function() {
+            createConfetti();
+        });
+    }
+    
+    // Add confetti effect to any button with data-confetti attribute
+    document.querySelectorAll('[data-confetti]').forEach(button => {
+        button.addEventListener('click', function() {
+            createConfetti();
+        });
+    });
+});
+
+function initConfetti() {
+    // Create a splash confetti effect when the page loads
+    setTimeout(() => {
+        createConfetti();
+    }, 500);
+}
+
+function createConfetti() {
+    const confettiCount = 150;
+    const colors = ['#ff6b6b', '#4ecdc4', '#45b7d1', '#96ceb4', '#feca57', '#ff9ff3', '#54a0ff'];
+    
+    for (let i = 0; i < confettiCount; i++) {
+        const confetti = document.createElement('div');
+        confetti.style.position = 'fixed';
+        confetti.style.width = Math.random() * 10 + 5 + 'px';
+        confetti.style.height = Math.random() * 10 + 5 + 'px';
+        confetti.style.backgroundColor = colors[Math.floor(Math.random() * colors.length)];
+        confetti.style.borderRadius = '50%';
+        confetti.style.zIndex = '9999';
+        confetti.style.left = Math.random() * 100 + 'vw';
+        confetti.style.top = '-10px';
+        
+        document.body.appendChild(confetti);
+        
+        // Animate confetti falling
+        const animationDuration = Math.random() * 3 + 2;
+        const targetX = (Math.random() - 0.5) * 100;
+        
+        confetti.animate([
+            { transform: 'translate(0, 0) rotate(0deg)', opacity: 1 },
+            { transform: `translate(${targetX}vw, 100vh) rotate(${Math.random() * 360}deg)`, opacity: 0 }
+        ], {
+            duration: animationDuration * 1000,
+            easing: 'cubic-bezier(0.1, 0.8, 0.2, 1)'
+        });
+        
+        // Remove confetti after animation
+        setTimeout(() => {
+            confetti.remove();
+        }, animationDuration * 1000);
+    }
+}