First cut of Javascript letters explosion animation

1 files changed, 125 insertions, 2 deletions

diff --git a/alphabetlearning/templates/payments/success_email_signup.html b/alphabetlearning/templates/payments/success_email_signup.html
index 0988995..6399733 100644
--- a/alphabetlearning/templates/payments/success_email_signup.html
+++ b/alphabetlearning/templates/payments/success_email_signup.html
@@ -2,7 +2,68 @@
 
 {% load static %}
 
+{% block extra_css %}
+<style>
+    .celebration-container {
+        position: relative;
+        height: 600px;
+        overflow: hidden;
+        background-color: white;
+    }
+
+    .letter {
+        position: absolute;
+        font-size: 3rem;
+        font-weight: bold;
+        opacity: 1;
+        bottom: 100px;
+        z-index: 10;
+        transform-origin: center bottom;
+    }
+
+    .gift-box {
+        width: 100px;
+        height: 100px;
+        background: #ff6b6b;
+        position: absolute;
+        left: 50%;
+        bottom: 50px;
+        transform: translateX(-50%);
+        border-radius: 5px;
+        box-shadow: 0 4px 8px rgba(0,0,0,0.1);
+        z-index: 5;
+    }
+
+    .gift-box::before {
+        content: '';
+        position: absolute;
+        width: 120px;
+        height: 25px;
+        background: #ff8787;
+        top: -15px;
+        left: -10px;
+        border-radius: 5px;
+    }
+
+    @keyframes spray {
+        0% {
+            transform: translate(0, 0) rotate(0deg);
+            opacity: 1;
+        }
+        40% {
+            opacity: 1;
+        }
+        100% {
+            opacity: 0;
+        }
+    }
+</style>
+{% endblock %}
+
 {% block content %}
+    <div class="celebration-container">
+        <div class="gift-box"></div>
+    </div>
     <div class="row justify-content-center my-5">
         <div class="col-lg-12">
             <h2 class="display-4 font-weight-bolder my-3">
@@ -10,9 +71,71 @@
             </h2>
             <div>
                 <p class="display-6 mb-4" style="color: darkgray;">
-                    Just wait will you. You'll here from us next year.
+                    To be informed of the site launch and receive FREE resource credits,
+                    join our new customer mailing list...
                 </p>
             </div>
         </div>
     </div>
-{% endblock content %}
\ No newline at end of file
+
+    <script>
+        function initCelebration() {
+            const letters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz';
+            const colors = ['#FF6B6B', '#4ECDC4', '#45B7D1', '#96CEB4', '#FFEEAD', '#D4A5A5', '#9B59B6'];
+            const container = document.querySelector('.celebration-container');
+            const totalLetters = 220;
+            
+            function createSpray() {
+                // Create all letters at once
+                for(let i = 0; i < totalLetters; i++) {
+                    setTimeout(() => {
+                        const letter = document.createElement('div');
+                        letter.className = 'letter';
+                        letter.textContent = letters[Math.floor(Math.random() * letters.length)];
+                        letter.style.color = colors[Math.floor(Math.random() * colors.length)];
+                        
+                        // Calculate spray angle (-60 to 60 degrees)
+                        const angle = (Math.random() * 120 - 60) * (Math.PI / 180);
+                        const speed = 300 + Math.random() * 200; // Random speed for variety
+                        
+                        // Calculate initial position (tighter spread at bottom)
+                        const initialSpread = Math.random() * 40 - 20;
+                        letter.style.left = `calc(50% + ${initialSpread}px)`;
+                        
+                        // Calculate trajectory
+                        const duration = 6 + Math.random() * 0.5; // 1-1.5s duration
+                        const xVelocity = Math.sin(angle) * speed;
+                        const yVelocity = Math.cos(angle) * speed;
+                        const gravity = 500; // Pixels per second squared
+                        
+                        // Create custom animation
+                        const animation = letter.animate([
+                            { transform: 'translate(0, 0) rotate(0deg)' },
+                            { transform: `translate(${xVelocity}px, ${-yVelocity}px) rotate(${360 + Math.random() * 360}deg)`,
+                              offset: 0.6 },
+                            { transform: `translate(${xVelocity * 1.2}px, 0px) rotate(${720 + Math.random() * 360}deg)` }
+                        ], {
+                            duration: duration * 1000,
+                            easing: 'cubic-bezier(0.25, 0.1, 0.25, 1)',
+                            fill: 'forwards'
+                        });
+                        
+                        container.appendChild(letter);
+                        
+                        // Remove letter after animation
+                        animation.onfinish = () => letter.remove();
+                    }, i * 10); // Stagger creation slightly for more natural look
+                }
+            }
+            
+            // Create the spray once
+            createSpray();
+        }
+
+        document.addEventListener('DOMContentLoaded', initCelebration);
+        window.onload = initCelebration;
+    </script>
+{% endblock content %}
+
+{% block extra_js %}
+{% endblock %}
\ No newline at end of file