Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>FlowyOnboarder - Welcome</title> | |
| <link rel="icon" type="image/x-icon" href="/static/favicon.ico"> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.globe.min.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/animejs/lib/anime.min.js"></script> | |
| <script> | |
| tailwind.config = { | |
| theme: { | |
| extend: { | |
| colors: { | |
| primary: { | |
| 50: '#f0f9ff', | |
| 100: '#e0f2fe', | |
| 200: '#bae6fd', | |
| 300: '#7dd3fc', | |
| 400: '#38bdf8', | |
| 500: '#0ea5e9', | |
| 600: '#0284c7', | |
| 700: '#0369a1', | |
| 800: '#075985', | |
| 900: '#0c4a6e', | |
| }, | |
| secondary: { | |
| 50: '#f8fafc', | |
| 100: '#f1f5f9', | |
| 200: '#e2e8f0', | |
| 300: '#cbd5e1', | |
| 400: '#94a3b8', | |
| 500: '#64748b', | |
| 600: '#475569', | |
| 700: '#334155', | |
| 800: '#1e293b', | |
| 900: '#0f172a', | |
| } | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| <style> | |
| .onboarding-step { | |
| opacity: 0; | |
| transform: translateY(20px); | |
| transition: all 0.5s ease-in-out; | |
| } | |
| .onboarding-step.active { | |
| opacity: 1; | |
| transform: translateY(0); | |
| } | |
| .progress-dot { | |
| transition: all 0.3s ease; | |
| } | |
| .progress-dot.active { | |
| transform: scale(1.2); | |
| } | |
| </style> | |
| </head> | |
| <body class="min-h-screen bg-gradient-to-br from-primary-50 to-secondary-50"> | |
| <div id="vanta-bg" class="fixed inset-0 z-0"></div> | |
| <!-- Onboarding Container --> | |
| <div class="relative z-10 min-h-screen flex items-center justify-center p-4"> | |
| <div class="bg-white/80 backdrop-blur-sm rounded-3xl shadow-2xl max-w-4xl w-full p-8 md:p-12"> | |
| <!-- Progress Bar --> | |
| <div class="flex justify-center mb-12"> | |
| <div class="flex space-x-4"> | |
| <div class="progress-dot w-3 h-3 rounded-full bg-secondary-300" data-step="1"></div> | |
| <div class="progress-dot w-3 h-3 rounded-full bg-secondary-300" data-step="2"></div> | |
| <div class="progress-dot w-3 h-3 rounded-full bg-secondary-300" data-step="3"></div> | |
| <div class="progress-dot w-3 h-3 rounded-full bg-secondary-300" data-step="4"></div> | |
| </div> | |
| </div> | |
| <!-- Step 1: Welcome --> | |
| <div id="step-1" class="onboarding-step active text-center"> | |
| <div class="w-24 h-24 mx-auto mb-6 bg-primary-100 rounded-full flex items-center justify-center"> | |
| <i data-feather="compass" class="w-12 h-12 text-primary-600"></i> | |
| </div> | |
| <h1 class="text-4xl md:text-5xl font-bold text-secondary-800 mb-4">Welcome to FlowyOnboarder</h1> | |
| <p class="text-lg text-secondary-600 mb-8 max-w-md mx-auto"> | |
| Let's get you started on your journey! We'll guide you through setting up your account in just a few simple steps. | |
| </p> | |
| <button onclick="nextStep(2)" class="bg-primary-500 hover:bg-primary-600 text-white px-8 py-3 rounded-xl font-semibold transition-colors duration-300 transform hover:scale-105"> | |
| Get Started | |
| <i data-feather="arrow-right" class="w-4 h-4 ml-2 inline"></i> | |
| </button> | |
| </div> | |
| <!-- Step 2: Personal Info --> | |
| <div id="step-2" class="onboarding-step hidden"> | |
| <div class="w-20 h-20 mx-auto mb-6 bg-primary-100 rounded-full flex items-center justify-center"> | |
| <i data-feather="user" class="w-10 h-10 text-primary-600"></i> | |
| </div> | |
| <h2 class="text-3xl font-bold text-secondary-800 mb-6 text-center">Tell us about yourself</h2> | |
| <div class="space-y-6 max-w-md mx-auto"> | |
| <div> | |
| <label class="block text-sm font-medium text-secondary-700 mb-2">Full Name</label> | |
| <input type="text" class="w-full px-4 py-3 border border-secondary-300 rounded-xl focus:ring-2 focus:ring-primary-500 focus:border-transparent transition-all duration-300" placeholder="Enter your full name"> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-secondary-700 mb-2">Email Address</label> | |
| <input type="email" class="w-full px-4 py-3 border border-secondary-300 rounded-xl focus:ring-2 focus:ring-primary-500 focus:border-transparent transition-all duration-300" placeholder="your@email.com"> | |
| </div> | |
| </div> | |
| <div class="flex justify-between mt-8"> | |
| <button onclick="prevStep(1)" class="text-secondary-600 hover:text-secondary-800 px-6 py-3 rounded-xl font-semibold transition-colors duration-300 flex items-center"> | |
| <i data-feather="arrow-left" class="w-4 h-4 mr-2"></i> | |
| Back | |
| </button> | |
| <button onclick="nextStep(3)" class="bg-primary-500 hover:bg-primary-600 text-white px-8 py-3 rounded-xl font-semibold transition-colors duration-300 transform hover:scale-105"> | |
| Continue | |
| <i data-feather="arrow-right" class="w-4 h-4 ml-2 inline"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Step 3: Preferences --> | |
| <div id="step-3" class="onboarding-step hidden"> | |
| <div class="w-20 h-20 mx-auto mb-6 bg-primary-100 rounded-full flex items-center justify-center"> | |
| <i data-feather="settings" class="w-10 h-10 text-primary-600"></i> | |
| </div> | |
| <h2 class="text-3xl font-bold text-secondary-800 mb-6 text-center">Set your preferences</h2> | |
| <div class="grid md:grid-cols-2 gap-6 max-w-2xl mx-auto"> | |
| <div class="bg-secondary-50 p-6 rounded-xl hover:bg-secondary-100 transition-colors duration-300 cursor-pointer border-2 border-transparent hover:border-primary-300"> | |
| <i data-feather="moon" class="w-8 h-8 text-secondary-600 mb-3"></i> | |
| <h3 class="font-semibold text-secondary-800 mb-2">Dark Mode</h3> | |
| <p class="text-secondary-600 text-sm">Comfortable viewing in low light</p> | |
| </div> | |
| <div class="bg-secondary-50 p-6 rounded-xl hover:bg-secondary-100 transition-colors duration-300 cursor-pointer border-2 border-transparent hover:border-primary-300"> | |
| <i data-feather="bell" class="w-8 h-8 text-secondary-600 mb-3"></i> | |
| <h3 class="font-semibold text-secondary-800 mb-2">Notifications</h3> | |
| <p class="text-secondary-600 text-sm">Stay updated with alerts</p> | |
| </div> | |
| <div class="bg-secondary-50 p-6 rounded-xl hover:bg-secondary-100 transition-colors duration-300 cursor-pointer border-2 border-transparent hover:border-primary-300"> | |
| <i data-feather="shield" class="w-8 h-8 text-secondary-600 mb-3"></i> | |
| <h3 class="font-semibold text-secondary-800 mb-2">Privacy Focused</h3> | |
| <p class="text-secondary-600 text-sm">Enhanced data protection</p> | |
| </div> | |
| <div class="bg-secondary-50 p-6 rounded-xl hover:bg-secondary-100 transition-colors duration-300 cursor-pointer border-2 border-transparent hover:border-primary-300"> | |
| <i data-feather="globe" class="w-8 h-8 text-secondary-600 mb-3"></i> | |
| <h3 class="font-semibold text-secondary-800 mb-2">Global Access</h3> | |
| <p class="text-secondary-600 text-sm">Available worldwide</p> | |
| </div> | |
| </div> | |
| <div class="flex justify-between mt-8"> | |
| <button onclick="prevStep(2)" class="text-secondary-600 hover:text-secondary-800 px-6 py-3 rounded-xl font-semibold transition-colors duration-300 flex items-center"> | |
| <i data-feather="arrow-left" class="w-4 h-4 mr-2"></i> | |
| Back | |
| </button> | |
| <button onclick="nextStep(4)" class="bg-primary-500 hover:bg-primary-600 text-white px-8 py-3 rounded-xl font-semibold transition-colors duration-300 transform hover:scale-105"> | |
| Continue | |
| <i data-feather="arrow-right" class="w-4 h-4 ml-2 inline"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Step 4: Completion --> | |
| <div id="step-4" class="onboarding-step hidden text-center"> | |
| <div class="w-24 h-24 mx-auto mb-6 bg-green-100 rounded-full flex items-center justify-center"> | |
| <i data-feather="check" class="w-12 h-12 text-green-600"></i> | |
| </div> | |
| <h1 class="text-4xl md:text-5xl font-bold text-secondary-800 mb-4">You're All Set! 🎉</h1> | |
| <p class="text-lg text-secondary-600 mb-8 max-w-md mx-auto"> | |
| Congratulations! Your account has been successfully set up. You're now ready to explore all the amazing features we have to offer. | |
| </p> | |
| <button onclick="completeOnboarding()" class="bg-green-500 hover:bg-green-600 text-white px-8 py-3 rounded-xl font-semibold transition-colors duration-300 transform hover:scale-105"> | |
| Start Exploring | |
| <i data-feather="rocket" class="w-4 h-4 ml-2 inline"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| // Initialize Vanta.js background | |
| VANTA.GLOBE({ | |
| el: "#vanta-bg", | |
| mouseControls: true, | |
| touchControls: true, | |
| gyroControls: false, | |
| minHeight: 200.00, | |
| minWidth: 200.00, | |
| scale: 1.00, | |
| scaleMobile: 1.00, | |
| color: 0x0ea5e9, | |
| backgroundColor: 0xf1f5f9, | |
| size: 0.8 | |
| }); | |
| let currentStep = 1; | |
| const totalSteps = 4; | |
| function updateProgressDots() { | |
| document.querySelectorAll('.progress-dot').forEach((dot, index) => { | |
| if (index + 1 <= currentStep) { | |
| dot.classList.add('active', 'bg-primary-500'); | |
| dot.classList.remove('bg-secondary-300'); | |
| } else { | |
| dot.classList.remove('active', 'bg-primary-500'); | |
| dot.classList.add('bg-secondary-300'); | |
| } | |
| }); | |
| } | |
| function showStep(stepNumber) { | |
| document.querySelectorAll('.onboarding-step').forEach(step => { | |
| step.classList.remove('active'); | |
| step.classList.add('hidden'); | |
| }); | |
| const currentStepElement = document.getElementById(`step-${stepNumber}`); | |
| if (currentStepElement) { | |
| currentStepElement.classList.remove('hidden'); | |
| setTimeout(() => { | |
| currentStepElement.classList.add('active'); | |
| }, 50); | |
| } | |
| updateProgressDots(); | |
| } | |
| function nextStep(step) { | |
| if (step <= totalSteps) { | |
| currentStep = step; | |
| showStep(step); | |
| } | |
| } | |
| function prevStep(step) { | |
| if (step >= 1) { | |
| currentStep = step; | |
| showStep(step); | |
| } | |
| } | |
| function completeOnboarding() { | |
| // Animation for completion | |
| anime({ | |
| targets: '#step-4', | |
| scale: [1, 1.05, 1], | |
| duration: 600, | |
| easing: 'easeInOutQuad' | |
| }); | |
| setTimeout(() => { | |
| alert('Welcome to FlowyOnboarder! Your onboarding is complete.'); | |
| // In a real app, you would redirect to the main application | |
| // window.location.href = '/dashboard.html'; | |
| }, 1000); | |
| } | |
| // Initialize feather icons | |
| feather.replace(); | |
| </script> | |
| </body> | |
| </html> | |