Template:Party blast

<script> (function() {

   const container = document.getElementById('party-blast-container');
   const colors = ['#FF6B6B', '#4ECDC4', '#45B7D1', '#FFA07A', '#96CEB4', '#FFEAA7', '#DFE6E9', '#A29BFE'];
   const confettiCount = 150;
   const duration = 10000; // 10 seconds
   
   function createConfetti() {
       const confetti = document.createElement('div');
       const size = Math.random() * 10 + 5;
       const left = Math.random() * 100;
       const animationDuration = Math.random() * 3 + 2;
       const delay = Math.random() * 2;
       const rotation = Math.random() * 360;
       const shape = Math.random() > 0.5 ? 'square' : 'circle';
       
       confetti.style.position = 'absolute';
       confetti.style.width = size + 'px';
       confetti.style.height = size + 'px';
       confetti.style.backgroundColor = colors[Math.floor(Math.random() * colors.length)];
       confetti.style.left = left + '%';
       confetti.style.top = '-20px';
       confetti.style.borderRadius = shape === 'circle' ? '50%' : '0';
       confetti.style.opacity = '0.8';
       confetti.style.transform = `rotate(${rotation}deg)`;
       confetti.style.animation = `fall ${animationDuration}s linear ${delay}s forwards`;
       
       return confetti;
   }
   
   // Add CSS animation
   const style = document.createElement('style');
   style.textContent = `
       @keyframes fall {
           to {
               transform: translateY(100vh) rotate(720deg);
               opacity: 0;
           }
       }
   `;
   document.head.appendChild(style);
   
   // Create confetti
   for (let i = 0; i < confettiCount; i++) {
       container.appendChild(createConfetti());
   }
   
   // Remove container after animation completes
   setTimeout(() => {
       container.remove();
   }, duration);

})(); </script>