Spaces:

d43m0n
/

flowyonboarder

Running

App Files Files Community

d43m0n commited on Oct 4, 2025

Commit

d0abab3

verified ·

1 Parent(s): 39a7070

Implement and onboarding flow

Browse files

Files changed (2) hide show

README.md +8 -5
index.html +266 -18

README.md CHANGED Viewed

@@ -1,10 +1,13 @@
 ---
-title: Flowyonboarder
-emoji: 🔥
-colorFrom: yellow
-colorTo: red
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: FlowyOnboarder 🚀
+colorFrom: blue
+colorTo: blue
+emoji: 🐳
 sdk: static
 pinned: false
+tags:
+  - deepsite-v3
 ---
+# Welcome to your new DeepSite project!
+This project was created with [DeepSite](https://deepsite.hf.co).

index.html CHANGED Viewed

@@ -1,19 +1,267 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
 </html>

+<!DOCTYPE html>
+<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>