Spaces:
Running
Running
Ctrl+K
- 1.52 kB initial commit
- 211 Bytes <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Zivvy - Create Your Account</title> <style> :root { --zivvy-black: #000000; --zivvy-white: #ffffff; --zivvy-purple: #6b47eb; --zivvy-dark-purple: #510d54; --zivvy-darkest-purple: #302326; --zivvy-yellow: #f9c80e; --zivvy-blue: #256eff; --zivvy-light-blue: #cddeff; --zivvy-light-yellow: #efe3ac; } * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background: linear-gradient(135deg, var(--zivvy-darkest-purple) 0%, var(--zivvy-dark-purple) 100%); min-height: 100vh; display: flex; align-items: center; justify-content: center; overflow-x: hidden; position: relative; } /* Animated Background */ .bg-shapes { position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; } .shape { position: absolute; background: var(--zivvy-purple); opacity: 0.1; animation: float 20s infinite ease-in-out; } .shape:nth-child(1) { width: 300px; height: 300px; border-radius: 50%; top: -150px; right: -150px; animation-duration: 25s; } .shape:nth-child(2) { width: 200px; height: 200px; border-radius: 50%; bottom: -100px; left: -100px; animation-duration: 30s; animation-delay: 5s; } .shape:nth-child(3) { width: 150px; height: 150px; transform: rotate(45deg); top: 50%; left: 10%; animation-duration: 35s; animation-delay: 10s; } @keyframes float { 0%, 100% { transform: translate(0, 0) rotate(0deg); } 33% { transform: translate(30px, -30px) rotate(120deg); } 66% { transform: translate(-20px, 20px) rotate(240deg); } } /* Main Container */ .container { position: relative; z-index: 1; width: 100%; max-width: 480px; padding: 20px; } /* Progress Indicator */ .progress-container { text-align: center; margin-bottom: 40px; animation: slideDown 0.6s ease-out; } .progress-title { color: var(--zivvy-light-yellow); font-size: 14px; margin-bottom: 15px; opacity: 0.9; } .progress-coins { display: flex; justify-content: center; gap: 15px; } .coin { width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(135deg, var(--zivvy-yellow) 0%, #ffd23f 100%); display: flex; align-items: center; justify-content: center; font-weight: bold; color: var(--zivvy-darkest-purple); transition: all 0.3s ease; position: relative; box-shadow: 0 4px 15px rgba(249, 200, 14, 0.3); } .coin.active { transform: scale(1.2) rotate(360deg); box-shadow: 0 6px 25px rgba(249, 200, 14, 0.5); } .coin.completed { background: linear-gradient(135deg, #4ade80 0%, #22c55e 100%); box-shadow: 0 4px 15px rgba(34, 197, 94, 0.3); } .coin::after { content: ''; position: absolute; top: -3px; left: -3px; right: -3px; bottom: -3px; border-radius: 50%; background: linear-gradient(135deg, transparent, rgba(255, 255, 255, 0.3)); animation: shimmer 2s infinite; opacity: 0; transition: opacity 0.3s ease; } .coin.active::after { opacity: 1; } @keyframes shimmer { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } /* Form Card */ .form-card { background: rgba(255, 255, 255, 0.98); border-radius: 20px; padding: 40px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3); animation: slideUp 0.6s ease-out; } @keyframes slideDown { from { opacity: 0; transform: translateY(-20px); } to { opacity: 1; transform: translateY(0); } } @keyframes slideUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .form-header { text-align: center; margin-bottom: 30px; } .form-title { font-size: 28px; color: var(--zivvy-darkest-purple); margin-bottom: 10px; font-weight: 700; } .form-subtitle { color: #666; font-size: 16px; } /* Form Fields */ .form-group { position: relative; margin-bottom: 25px; } .form-input { width: 100%; padding: 20px 15px 10px 15px; font-size: 16px; border: 2px solid #e0e0e0; border-radius: 10px; background: white; transition: all 0.3s ease; outline: none; } .form-label { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); color: #999; font-size: 16px; pointer-events: none; transition: all 0.3s ease; background: white; padding: 0 5px; } .form-input:focus, .form-input.has-value { border-color: var(--zivvy-purple); box-shadow: 0 0 0 3px rgba(107, 71, 235, 0.1); } .form-input:focus + .form-label, .form-input.has-value + .form-label { top: 0; transform: translateY(-50%); font-size: 12px; color: var(--zivvy-purple); font-weight: 600; } /* Password strength indicator */ .password-strength { height: 4px; background: #e0e0e0; border-radius: 2px; margin-top: 8px; overflow: hidden; opacity: 0; transition: opacity 0.3s ease; } .password-strength.visible { opacity: 1; } .strength-bar { height: 100%; width: 0; transition: all 0.3s ease; border-radius: 2px; } .strength-bar.weak { width: 33%; background: #ef4444; } .strength-bar.medium { width: 66%; background: var(--zivvy-yellow); } .strength-bar.strong { width: 100%; background: #22c55e; } /* Submit Button */ .submit-btn { width: 100%; padding: 18px; font-size: 18px; font-weight: 700; color: white; background: linear-gradient(135deg, var(--zivvy-purple) 0%, var(--zivvy-blue) 100%); border: none; border-radius: 10px; cursor: pointer; position: relative; overflow: hidden; transition: all 0.3s ease; text-transform: uppercase; letter-spacing: 1px; margin-top: 30px; } .submit-btn::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent); animation: shimmerBtn 3s infinite; } @keyframes shimmerBtn { 0% { left: -100%; } 100% { left: 100%; } } .submit-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 30px rgba(107, 71, 235, 0.3); } .submit-btn:active { transform: scale(0.98); } .submit-btn.loading { color: transparent; } .submit-btn.loading::after { content: ''; position: absolute; width: 20px; height: 20px; top: 50%; left: 50%; margin: -10px 0 0 -10px; border: 2px solid white; border-top-color: transparent; border-radius: 50%; animation: spin 0.8s linear infinite; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } /* Social Proof Ticker */ .social-proof { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); background: rgba(255, 255, 255, 0.95); padding: 15px 25px; border-radius: 50px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2); display: flex; align-items: center; gap: 10px; opacity: 0; animation: socialProofIn 0.5s ease-out forwards; z-index: 100; } @keyframes socialProofIn { from { opacity: 0; transform: translateX(-50%) translateY(20px); } to { opacity: 1; transform: translateX(-50%) translateY(0); } } .social-proof-icon { width: 30px; height: 30px; background: linear-gradient(135deg, var(--zivvy-purple) 0%, var(--zivvy-blue) 100%); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; } .social-proof-text { color: var(--zivvy-darkest-purple); font-size: 14px; font-weight: 600; } /* Terms */ .terms { text-align: center; margin-top: 20px; font-size: 12px; color: #666; } .terms a { color: var(--zivvy-purple); text-decoration: none; font-weight: 600; transition: all 0.3s ease; } .terms a:hover { text-decoration: underline; } /* Mobile Responsive */ @media (max-width: 480px) { .form-card { padding: 30px 20px; } .form-title { font-size: 24px; } .coin { width: 35px; height: 35px; font-size: 14px; } .progress-coins { gap: 10px; } } </style> </head> <body> <!-- Animated Background --> <div class="bg-shapes"> <div class="shape"></div> <div class="shape"></div> <div class="shape"></div> </div> <!-- Main Container --> <div class="container"> <!-- Progress Indicator --> <div class="progress-container"> <div class="progress-title">Your Journey to Hidden Revenue</div> <div class="progress-coins"> <div class="coin completed">1</div> <div class="coin active">2</div> <div class="coin">3</div> <div class="coin">4</div> <div class="coin">5</div> <div class="coin">6</div> </div> </div> <!-- Form Card --> <div class="form-card"> <div class="form-header"> <h1 class="form-title">Create Your Account</h1> <p class="form-subtitle">Join 2,847 martial arts schools finding hidden revenue</p> </div> <form id="signupForm"> <div class="form-group"> <input type="email" class="form-input" id="email" required> <label for="email" class="form-label">Email Address</label> </div> <div class="form-group"> <input type="password" class="form-input" id="password" required> <label for="password" class="form-label">Password</label> <div class="password-strength" id="passwordStrength"> <div class="strength-bar" id="strengthBar"></div> </div> </div> <button type="submit" class="submit-btn" id="submitBtn"> Continue to School Profile </button> <div class="terms"> By continuing, you agree to our <a href="#">Terms of Service</a> and <a href="#">Privacy Policy</a> </div> </form> </div> </div> <!-- Social Proof Ticker --> <div class="social-proof" id="socialProof" style="display: none;"> <div class="social-proof-icon">✓</div> <div class="social-proof-text" id="socialProofText"></div> </div> <script> // Social Proof Messages const socialProofMessages = [ "Tiger Martial Arts just found $34,287 in hidden revenue", "Elite Taekwondo discovered 47 missing students worth $28,200/year", "Champions Karate increased retention by 23% in 30 days", "Dragon Dojo recovered $19,450 from inactive students", "Warrior Academy added $2,847/month with win-back campaigns", "Phoenix MMA found 31 referral opportunities worth $18,600" ]; // Show social proof messages function showSocialProof() { const socialProof = document.getElementById('socialProof'); const socialProofText = document.getElementById('socialProofText'); let messageIndex = 0; function showNextMessage() { socialProofText.textContent = socialProofMessages[messageIndex]; socialProof.style.display = 'flex'; setTimeout(() => { socialProof.style.opacity = '0'; setTimeout(() => { socialProof.style.opacity = '1'; messageIndex = (messageIndex + 1) % socialProofMessages.length; showNextMessage(); }, 500); }, 4000); } // Start after 2 seconds setTimeout(showNextMessage, 2000); } // Floating label functionality const inputs = document.querySelectorAll('.form-input'); inputs.forEach(input => { input.addEventListener('input', function() { if (this.value) { this.classList.add('has-value'); } else { this.classList.remove('has-value'); } }); // Check on page load for autofilled values if (input.value) { input.classList.add('has-value'); } }); // Password strength checker const passwordInput = document.getElementById('password'); const passwordStrength = document.getElementById('passwordStrength'); const strengthBar = document.getElementById('strengthBar'); passwordInput.addEventListener('input', function() { const password = this.value; if (password.length > 0) { passwordStrength.classList.add('visible'); // Simple strength calculation let strength = 0; if (password.length >= 8) strength++; if (password.match(/[a-z]/) && password.match(/[A-Z]/)) strength++; if (password.match(/[0-9]/)) strength++; if (password.match(/[^a-zA-Z0-9]/)) strength++; // Update strength bar strengthBar.className = 'strength-bar'; if (strength <= 1) { strengthBar.classList.add('weak'); } else if (strength <= 2) { strengthBar.classList.add('medium'); } else { strengthBar.classList.add('strong'); } } else { passwordStrength.classList.remove('visible'); } }); // Form submission const form = document.getElementById('signupForm'); const submitBtn = document.getElementById('submitBtn'); form.addEventListener('submit', function(e) { e.preventDefault(); // Add loading state submitBtn.classList.add('loading'); submitBtn.disabled = true; // Simulate API call setTimeout(() => { // In real implementation, this would validate and create the account // Then redirect to page 3 (School Profile) console.log('Account created! Redirecting to School Profile...'); // window.location.href = '/school-profile'; // For demo, just remove loading state submitBtn.classList.remove('loading'); submitBtn.disabled = false; alert('Account created! (In production, this would redirect to School Profile page)'); }, 2000); }); // Start social proof ticker showSocialProof(); // Add entrance animations setTimeout(() => { document.querySelector('.coin.active').classList.add('pulse'); }, 1000); </script> </body> </html> - Initial Deployment
- 10.1 kB <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Zivvy - Create Your Account</title> <style> :root { --zivvy-black: #000000; --zivvy-white: #ffffff; --zivvy-purple: #6b47eb; --zivvy-dark-purple: #510d54; --zivvy-darkest-purple: #302326; --zivvy-yellow: #f9c80e; --zivvy-blue: #256eff; --zivvy-light-blue: #cddeff; --zivvy-light-yellow: #efe3ac; } * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background: linear-gradient(135deg, var(--zivvy-darkest-purple) 0%, var(--zivvy-dark-purple) 100%); min-height: 100vh; display: flex; align-items: center; justify-content: center; overflow-x: hidden; position: relative; } /* Animated Background */ .bg-shapes { position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; } .shape { position: absolute; background: var(--zivvy-purple); opacity: 0.1; animation: float 20s infinite ease-in-out; } .shape:nth-child(1) { width: 300px; height: 300px; border-radius: 50%; top: -150px; right: -150px; animation-duration: 25s; } .shape:nth-child(2) { width: 200px; height: 200px; border-radius: 50%; bottom: -100px; left: -100px; animation-duration: 30s; animation-delay: 5s; } .shape:nth-child(3) { width: 150px; height: 150px; transform: rotate(45deg); top: 50%; left: 10%; animation-duration: 35s; animation-delay: 10s; } @keyframes float { 0%, 100% { transform: translate(0, 0) rotate(0deg); } 33% { transform: translate(30px, -30px) rotate(120deg); } 66% { transform: translate(-20px, 20px) rotate(240deg); } } /* Main Container */ .container { position: relative; z-index: 1; width: 100%; max-width: 480px; padding: 20px; } /* Progress Indicator */ .progress-container { text-align: center; margin-bottom: 40px; animation: slideDown 0.6s ease-out; } .progress-title { color: var(--zivvy-light-yellow); font-size: 14px; margin-bottom: 15px; opacity: 0.9; } .progress-coins { display: flex; justify-content: center; gap: 15px; } .coin { width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(135deg, var(--zivvy-yellow) 0%, #ffd23f 100%); display: flex; align-items: center; justify-content: center; font-weight: bold; color: var(--zivvy-darkest-purple); transition: all 0.3s ease; position: relative; box-shadow: 0 4px 15px rgba(249, 200, 14, 0.3); } .coin.active { transform: scale(1.2) rotate(360deg); box-shadow: 0 6px 25px rgba(249, 200, 14, 0.5); } .coin.completed { background: linear-gradient(135deg, #4ade80 0%, #22c55e 100%); box-shadow: 0 4px 15px rgba(34, 197, 94, 0.3); } .coin::after { content: ''; position: absolute; top: -3px; left: -3px; right: -3px; bottom: -3px; border-radius: 50%; background: linear-gradient(135deg, transparent, rgba(255, 255, 255, 0.3)); animation: shimmer 2s infinite; opacity: 0; transition: opacity 0.3s ease; } .coin.active::after { opacity: 1; } @keyframes shimmer { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } /* Form Card */ .form-card { background: rgba(255, 255, 255, 0.98); border-radius: 20px; padding: 40px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3); animation: slideUp 0.6s ease-out; } @keyframes slideDown { from { opacity: 0; transform: translateY(-20px); } to { opacity: 1; transform: translateY(0); } } @keyframes slideUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .form-header { text-align: center; margin-bottom: 30px; } .form-title { font-size: 28px; color: var(--zivvy-darkest-purple); margin-bottom: 10px; font-weight: 700; } .form-subtitle { color: #666; font-size: 16px; } /* Form Fields */ .form-group { position: relative; margin-bottom: 25px; } .form-input { width: 100%; padding: 20px 15px 10px 15px; font-size: 16px; border: 2px solid #e0e0e0; border-radius: 10px; background: white; transition: all 0.3s ease; outline: none; } .form-label { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); color: #999; font-size: 16px; pointer-events: none; transition: all 0.3s ease; background: white; padding: 0 5px; } .form-input:focus, .form-input.has-value { border-color: var(--zivvy-purple); box-shadow: 0 0 0 3px rgba(107, 71, 235, 0.1); } .form-input:focus + .form-label, .form-input.has-value + .form-label { top: 0; transform: translateY(-50%); font-size: 12px; color: var(--zivvy-purple); font-weight: 600; } /* Password strength indicator */ .password-strength { height: 4px; background: #e0e0e0; border-radius: 2px; margin-top: 8px; overflow: hidden; opacity: 0; transition: opacity 0.3s ease; } .password-strength.visible { opacity: 1; } .strength-bar { height: 100%; width: 0; transition: all 0.3s ease; border-radius: 2px; } .strength-bar.weak { width: 33%; background: #ef4444; } .strength-bar.medium { width: 66%; background: var(--zivvy-yellow); } .strength-bar.strong { width: 100%; background: #22c55e; } /* Submit Button */ .submit-btn { width: 100%; padding: 18px; font-size: 18px; font-weight: 700; color: white; background: linear-gradient(135deg, var(--zivvy-purple) 0%, var(--zivvy-blue) 100%); border: none; border-radius: 10px; cursor: pointer; position: relative; overflow: hidden; transition: all 0.3s ease; text-transform: uppercase; letter-spacing: 1px; margin-top: 30px; } .submit-btn::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent); animation: shimmerBtn 3s infinite; } @keyframes shimmerBtn { 0% { left: -100%; } 100% { left: 100%; } } .submit-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 30px rgba(107, 71, 235, 0.3); } .submit-btn:active { transform: scale(0.98); } .submit-btn.loading { color: transparent; } .submit-btn.loading::after { content: ''; position: absolute; width: 20px; height: 20px; top: 50%; left: 50%; margin: -10px 0 0 -10px; border: 2px solid white; border-top-color: transparent; border-radius: 50%; animation: spin 0.8s linear infinite; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } /* Social Proof Ticker */ .social-proof { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); background: rgba(255, 255, 255, 0.95); padding: 15px 25px; border-radius: 50px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2); display: flex; align-items: center; gap: 10px; opacity: 0; animation: socialProofIn 0.5s ease-out forwards; z-index: 100; } @keyframes socialProofIn { from { opacity: 0; transform: translateX(-50%) translateY(20px); } to { opacity: 1; transform: translateX(-50%) translateY(0); } } .social-proof-icon { width: 30px; height: 30px; background: linear-gradient(135deg, var(--zivvy-purple) 0%, var(--zivvy-blue) 100%); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; } .social-proof-text { color: var(--zivvy-darkest-purple); font-size: 14px; font-weight: 600; } /* Terms */ .terms { text-align: center; margin-top: 20px; font-size: 12px; color: #666; } .terms a { color: var(--zivvy-purple); text-decoration: none; font-weight: 600; transition: all 0.3s ease; } .terms a:hover { text-decoration: underline; } /* Mobile Responsive */ @media (max-width: 480px) { .form-card { padding: 30px 20px; } .form-title { font-size: 24px; } .coin { width: 35px; height: 35px; font-size: 14px; } .progress-coins { gap: 10px; } } </style> </head> <body> <!-- Animated Background --> <div class="bg-shapes"> <div class="shape"></div> <div class="shape"></div> <div class="shape"></div> </div> <!-- Main Container --> <div class="container"> <!-- Progress Indicator --> <div class="progress-container"> <div class="progress-title">Your Journey to Hidden Revenue</div> <div class="progress-coins"> <div class="coin completed">1</div> <div class="coin active">2</div> <div class="coin">3</div> <div class="coin">4</div> <div class="coin">5</div> <div class="coin">6</div> </div> </div> <!-- Form Card --> <div class="form-card"> <div class="form-header"> <h1 class="form-title">Create Your Account</h1> <p class="form-subtitle">Join 2,847 martial arts schools finding hidden revenue</p> </div> <form id="signupForm"> <div class="form-group"> <input type="email" class="form-input" id="email" required> <label for="email" class="form-label">Email Address</label> </div> <div class="form-group"> <input type="password" class="form-input" id="password" required> <label for="password" class="form-label">Password</label> <div class="password-strength" id="passwordStrength"> <div class="strength-bar" id="strengthBar"></div> </div> </div> <button type="submit" class="submit-btn" id="submitBtn"> Continue to School Profile </button> <div class="terms"> By continuing, you agree to our <a href="#">Terms of Service</a> and <a href="#">Privacy Policy</a> </div> </form> </div> </div> <!-- Social Proof Ticker --> <div class="social-proof" id="socialProof" style="display: none;"> <div class="social-proof-icon">✓</div> <div class="social-proof-text" id="socialProofText"></div> </div> <script> // Social Proof Messages const socialProofMessages = [ "Tiger Martial Arts just found $34,287 in hidden revenue", "Elite Taekwondo discovered 47 missing students worth $28,200/year", "Champions Karate increased retention by 23% in 30 days", "Dragon Dojo recovered $19,450 from inactive students", "Warrior Academy added $2,847/month with win-back campaigns", "Phoenix MMA found 31 referral opportunities worth $18,600" ]; // Show social proof messages function showSocialProof() { const socialProof = document.getElementById('socialProof'); const socialProofText = document.getElementById('socialProofText'); let messageIndex = 0; function showNextMessage() { socialProofText.textContent = socialProofMessages[messageIndex]; socialProof.style.display = 'flex'; setTimeout(() => { socialProof.style.opacity = '0'; setTimeout(() => { socialProof.style.opacity = '1'; messageIndex = (messageIndex + 1) % socialProofMessages.length; showNextMessage(); }, 500); }, 4000); } // Start after 2 seconds setTimeout(showNextMessage, 2000); } // Floating label functionality const inputs = document.querySelectorAll('.form-input'); inputs.forEach(input => { input.addEventListener('input', function() { if (this.value) { this.classList.add('has-value'); } else { this.classList.remove('has-value'); } }); // Check on page load for autofilled values if (input.value) { input.classList.add('has-value'); } }); // Password strength checker const passwordInput = document.getElementById('password'); const passwordStrength = document.getElementById('passwordStrength'); const strengthBar = document.getElementById('strengthBar'); passwordInput.addEventListener('input', function() { const password = this.value; if (password.length > 0) { passwordStrength.classList.add('visible'); // Simple strength calculation let strength = 0; if (password.length >= 8) strength++; if (password.match(/[a-z]/) && password.match(/[A-Z]/)) strength++; if (password.match(/[0-9]/)) strength++; if (password.match(/[^a-zA-Z0-9]/)) strength++; // Update strength bar strengthBar.className = 'strength-bar'; if (strength <= 1) { strengthBar.classList.add('weak'); } else if (strength <= 2) { strengthBar.classList.add('medium'); } else { strengthBar.classList.add('strong'); } } else { passwordStrength.classList.remove('visible'); } }); // Form submission const form = document.getElementById('signupForm'); const submitBtn = document.getElementById('submitBtn'); form.addEventListener('submit', function(e) { e.preventDefault(); // Add loading state submitBtn.classList.add('loading'); submitBtn.disabled = true; // Simulate API call setTimeout(() => { // In real implementation, this would validate and create the account // Then redirect to page 3 (School Profile) console.log('Account created! Redirecting to School Profile...'); // window.location.href = '/school-profile'; // For demo, just remove loading state submitBtn.classList.remove('loading'); submitBtn.disabled = false; alert('Account created! (In production, this would redirect to School Profile page)'); }, 2000); }); // Start social proof ticker showSocialProof(); // Add entrance animations setTimeout(() => { document.querySelector('.coin.active').classList.add('pulse'); }, 1000); </script> </body> </html> - Initial Deployment
- 388 Bytes initial commit