${message}

`; this.container.appendChild(toast); setTimeout(() => toast.classList.add('show'), 10); setTimeout(() => { toast.style.transform = 'translateX(400px)'; toast.style.opacity = '0'; setTimeout(() => toast.remove(), 400); }, duration); toast.addEventListener('click', (e) => { if (!e.target.classList.contains('toast-close')) { toast.style.transform = 'translateX(400px)'; toast.style.opacity = '0'; setTimeout(() => toast.remove(), 400); } }); return toast; } } const toast = new ToastManager(); // Form submission handler function handleFormSubmit(e) { e.preventDefault(); const emailInput = document.getElementById('emailInput'); const notifyBtn = document.getElementById('notifyBtn'); const formNote = document.getElementById('formNote'); const email = emailInput.value.trim(); this.classList.add('form-pulse'); setTimeout(() => this.classList.remove('form-pulse'), 600); if (!email) { toast.show('Don\'t forget to enter your email address!', 'warning', 3000, 'Missing Email'); emailInput.focus(); return; } // Show notify toast immediately after button click toast.show('Getting ready to notify you!', 'notify', 2000, 'Notify Me!'); const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; if (!emailRegex.test(email)) { toast.show('Please enter a valid email address (e.g., john@example.com)', 'error', 4000, 'Invalid Email'); emailInput.style.animation = 'shake 0.5s ease'; emailInput.style.borderColor = '#ef4444'; setTimeout(() => { emailInput.style.animation = ''; emailInput.style.borderColor = ''; }, 500); return; } if (subscribedEmails.includes(email)) { toast.show('This email is already on our waitlist!', 'warning', 3000, 'Already Subscribed'); emailInput.style.animation = 'shake 0.5s ease'; setTimeout(() => emailInput.style.animation = '', 500); return; } notifyBtn.innerHTML = ` Subscribing

`; notifyBtn.classList.add('loading'); notifyBtn.disabled = true; const loadingToast = toast.show('Processing your subscription...', 'info', 2000, 'Please Wait'); setTimeout(() => { subscribedEmails.push(email); loadingToast.remove(); notifyBtn.classList.remove('loading'); notifyBtn.classList.add('success'); notifyBtn.innerHTML = `

Subscribed! `; toast.show( `Welcome aboard! You're subscriber #${subscribedEmails.length}. We'll notify you as soon as we launch!`, 'success', 5000, 'Successfully Subscribed!' ); const funMessages = [ `🚀 ${subscribedEmails.length} space travelers waiting for launch!`, `⭐ You're now part of our exclusive club of ${subscribedEmails.length} early adopters!`, `🎯 Mission update: ${subscribedEmails.length} subscribers locked and loaded!`, `💫 ${subscribedEmails.length} future users ready for takeoff!` ]; formNote.textContent = funMessages[Math.floor(Math.random() * funMessages.length)]; formNote.style.color = '#4ade80'; emailInput.style.transform = 'scale(0.95)'; emailInput.style.opacity = '0.5'; setTimeout(() => { emailInput.value = ''; emailInput.style.transform = 'scale(1)'; emailInput.style.opacity = '1'; }, 300); createAdvancedCelebration(); setTimeout(() => { toast.show( 'Follow us on social media for updates and behind-the-scenes content!', 'info', 4000, 'Stay Connected' ); }, 2000); setTimeout(() => { notifyBtn.classList.remove('success'); notifyBtn.textContent = 'Notify Me'; notifyBtn.disabled = false; }, 4000); }, Math.random() * 1000 + 1500); } // Celebration effect function createAdvancedCelebration() { const colors = ['#4ade80', '#22d3ee', '#3b82f6', '#8b5cf6', '#ec4899', '#f43f5e', '#fbbf24', '#34d399']; for (let wave = 0; wave < 3; wave++) { setTimeout(() => { for (let i = 0; i < 15; i++) { setTimeout(() => { const confetti = document.createElement('div'); const size = Math.random() * 8 + 4; const startX = Math.random() * window.innerWidth; const rotation = Math.random() * 360; confetti.style.cssText = ` position: fixed; left: ${startX}px; top: -20px; width: ${size}px; height: ${size}px; background-color: ${colors[Math.floor(Math.random() * colors.length)]}; border-radius: ${Math.random() > 0.5 ? '50%' : '0'}; pointer-events: none; z-index: 9999; transform: rotate(${rotation}deg); animation: advancedFall ${2 + Math.random() * 2}s linear forwards; `; document.body.appendChild(confetti); setTimeout(() => confetti.remove(), 4000); }, i * 50); } }, wave * 400); } const letters = document.querySelectorAll('.coming-soon-title span'); letters.forEach((letter, index) => { setTimeout(() => { letter.style.animation = 'none'; letter.style.transform = 'scale(1.3)'; letter.style.filter = 'brightness(2) drop-shadow(0 0 20px currentColor)'; setTimeout(() => { letter.style.transform = ''; letter.style.filter = ''; letter.style.animation = 'colorShift 3s ease-in-out infinite'; letter.style.animationDelay = `${index * 0.1}s`; }, 200); }, index * 100); }); } // Event listeners function initializeEventListeners() { // Form submission document.getElementById('emailForm').addEventListener('submit', handleFormSubmit); // Notify button click document.getElementById('notifyBtn').addEventListener('click', () => { const emailInput = document.getElementById('emailInput'); if (emailInput.value.trim()) { toast.show('Getting ready to notify you!', 'notify', 2000, 'Notify Me!'); } }); // Navigation links document.querySelectorAll('a[href^="#"]').forEach(anchor => { anchor.addEventListener('click', (e) => { e.preventDefault(); const target = anchor.getAttribute('href').substring(1); toast.show(`${target.charAt(0).toUpperCase() + target.slice(1)} section coming soon!`, 'info', 2000); }); }); // Letter hover effects const letters = document.querySelectorAll('.coming-soon-title span'); letters.forEach((letter, index) => { letter.addEventListener('mouseenter', function() { this.style.transform = 'scale(1.3) translateY(-15px) rotate(10deg)'; this.style.transition = 'transform 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55)'; this.style.filter = 'brightness(2) drop-shadow(0 0 15px currentColor)'; for (let i = 0; i < 3; i++) { setTimeout(() => { const sparkle = document.createElement('div'); sparkle.style.cssText = ` position: absolute; width: 4px; height: 4px; background-color: ${this.style.color || '#fff'}; border-radius: 50%; pointer-events: none; z-index: 1000; left: ${this.offsetLeft + Math.random() * this.offsetWidth}px; top: ${this.offsetTop + Math.random() * this.offsetHeight}px; animation: sparkleFloat 0.8s ease-out forwards; `; this.parentElement.appendChild(sparkle); setTimeout(() => sparkle.remove(), 800); }, i * 100); } const neighbors = [letters[index - 1], letters[index + 1]].filter(Boolean); neighbors.forEach((neighbor, nIndex) => { setTimeout(() => { neighbor.style.transform = 'scale(1.15) translateY(-8px)'; neighbor.style.transition = 'transform 0.3s ease'; }, nIndex * 50); }); }); letter.addEventListener('mouseleave', function() { this.style.transform = 'scale(1) translateY(0) rotate(0deg)'; this.style.filter = 'brightness(1)'; const neighbors = [letters[index - 1], letters[index + 1]].filter(Boolean); neighbors.forEach(neighbor => { neighbor.style.transform = 'scale(1) translateY(0)'; }); }); }); // Logo animation const logo = document.querySelector('.logo'); logo.addEventListener('click', () => { logoClicked++; logo.style.animation = 'bounce 0.6s ease'; const easterEggMessages = [ 'You found the secret logo! 🎉', 'Keep clicking for surprises! ✨', 'Logo loves attention! 💫', 'You\'re persistent! Here\'s a virtual cookie 🍪', 'Achievement unlocked: Logo Whisperer! 🏆' ]; if (logoClicked <= easterEggMessages.length) { setTimeout(() => { toast.show(easterEggMessages[logoClicked - 1], 'info', 2000, 'Easter Egg!'); }, 300); } setTimeout(() => logo.style.animation = '', 600); }); // Email input effects const emailInput = document.getElementById('emailInput'); emailInput.addEventListener('focus', function() { this.style.transform = 'translateY(-3px) scale(1.02)'; this.style.boxShadow = '0 8px 25px rgba(59, 130, 246, 0.3)'; this.style.borderColor = '#3b82f6'; }); emailInput.addEventListener('blur', function() { this.style.transform = 'translateY(0) scale(1)'; this.style.boxShadow = 'none'; this.style.borderColor = 'transparent'; }); emailInput.addEventListener('input', function() { const value = this.value; if (value.includes('@') && !value.includes('.')) { const domains = ['gmail.com', 'yahoo.com', 'outlook.com', 'company.com']; const suggestion = domains[Math.floor(Math.random() * domains.length)]; if (value.length > 3) { toast.show( `Did you mean ${value}${suggestion.substring(value.indexOf('@') + 1)}?`, 'info', 2000, 'Email Suggestion' ); } } }); // Social links document.querySelectorAll('.social-links a').forEach(link => { link.addEventListener('click', (e) => { e.preventDefault(); const platform = link.textContent.toLowerCase(); const messages = { facebook: 'Shared on Facebook! Your friends will love this.', instagram: 'Story shared on Instagram! ✨', linkedin: 'Posted on LinkedIn! Professional network activated.' }; toast.show(messages[platform], 'success', 3000, 'Shared!'); const bonusCount = Math.floor(Math.random() * 5) + 1; setTimeout(() => { for (let i = 0; i < bonusCount; i++) { subscribedEmails.push(`friend${Date.now() + i}@example.com`); } const formNote = document.getElementById('formNote'); formNote.textContent = `🎉 ${bonusCount} friends joined through your share! Total: ${subscribedEmails.length}`; formNote.style.color = '#22d3ee'; }, 1000); }); }); } // Initialize on DOM load document.addEventListener('DOMContentLoaded', () => { initializeEventListeners(); // Logo animation loop setInterval(() => { logoAnimation += 0.05; const floatY = Math.sin(logoAnimation) * 8; const rotateZ = Math.sin(logoAnimation * 0.3) * 5; document.querySelector('.logo').style.transform = `translateY(${floatY}px) rotate(${rotateZ}deg)`; }, 50); // Encouragement messages const encouragementMessages = [ 'Your email is safe with us! 🔐', 'Great choice joining our community! 🌟', 'You\'ll be the first to know! 📢', 'Welcome to the future! 🚀', 'Exciting things are coming! ⚡' ]; setInterval(() => { if (subscribedEmails.length === 0 && Math.random() < 0.3) { const message = encouragementMessages[Math.floor(Math.random() * encouragementMessages.length)]; toast.show(message, 'info', 3000, 'Friendly Reminder'); } }, 30000); // PWA simulation if ('serviceWorker' in navigator) { setTimeout(() => { if (Math.random() < 0.3) { toast.show( 'This site can be installed as an app! Check your browser menu.', 'info', 4000, 'Install Available' ); } }, 10000); } // Keyboard shortcuts document.addEventListener('keydown', (e) => { if ((e.ctrlKey || e.metaKey) && e.key === 'Enter') { e.preventDefault(); document.getElementById('emailForm').dispatchEvent(new Event('submit')); } if (e.key === 'Escape') { const emailInput = document.getElementById('emailInput'); if (emailInput.value) { emailInput.value = ''; toast.show('Form cleared!', 'info', 1500); } } if (e.key === 'Tab') { document.body.style.outline = '2px solid #3b82f6'; setTimeout(() => document.body.style.outline = 'none', 100); } }); // Mobile interactions if ('ontouchstart' in window) { document.addEventListener('touchstart', () => { touchCount++; if (touchCount === 5) { toast.show('Mobile user detected! Optimized experience activated! 📱', 'info', 3000, 'Mobile Mode'); } }); } // Geolocation simulation if (navigator.geolocation) { setTimeout(() => { const locations = ['New York', 'London', 'Tokyo', 'Sydney', 'Dubai', 'Mumbai']; const randomLocation = locations[Math.floor(Math.random() * locations.length)]; if (Math.random() < 0.2) { toast.show( `Greetings from ${randomLocation}! You're joining users from around the globe! 🌍`, 'info', 4000, 'Global Community' ); } }, 15000); } // Performance monitoring setTimeout(() => { const loadTime = Math.random() * 2 + 0.5; if (loadTime > 1.5) { toast.show( 'Thanks for your patience! We\'re optimizing for faster loading.', 'info', 3000, 'Performance Notice' ); } }, 2000); // Time-based greeting setTimeout(() => { if (subscribedEmails.length === 0 && Math.random() < 0.4) { const hour = new Date().getHours(); const greetings = { morning: 'Good morning! ☀️', afternoon: 'Good afternoon! 🌤️', evening: 'Good evening! 🌅', night: 'Good night! 🌙' }; let greeting = hour < 12 ? greetings.morning : hour < 17 ? greetings.afternoon : hour < 21 ? greetings.evening : greetings.night; toast.show(`${greeting} Ready to be part of something amazing?`, 'info', 3000, 'Welcome!'); } }, 5000); // Console instructions console.log('🎉 Interactive Coming Soon page loaded! Try these features:'); console.log('• Subscribe with your email'); console.log('• Hover over letters in "Coming Soon"'); console.log('• Click the logo multiple times'); console.log('• Use Ctrl+Enter to quick-submit form'); console.log('• Press Esc to clear the form'); console.log('• Press Tab for enhanced navigation'); console.log('• Click on social links'); console.log('• Wait for surprise messages!'); });