Spaces:

victor
/

novanexus

Running

App Files Files Community

victor HF Staff commited on 7 days ago

Commit

e3a735a

verified ·

1 Parent(s): 6488791

Add 3 files

Browse files

Files changed (3) hide show

README.md +7 -5
index.html +897 -19
prompts.txt +1 -0

README.md CHANGED Viewed

@@ -1,10 +1,12 @@
 ---
-title: Novanexus
-emoji: 🔥
-colorFrom: green
-colorTo: indigo
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: novanexus
+emoji: 🐳
+colorFrom: red
+colorTo: pink
 sdk: static
 pinned: false
+tags:
+  - deepsite
 ---
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

index.html CHANGED Viewed

@@ -1,19 +1,897 @@
-<!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>NovaNexus - Create Account</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
+    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyD3gLHjV3X5X5X5X5X5X5X5X5X5X5X5X5X5X5&libraries=places"></script>
+    <style>
+        .cosmic-bg {
+            background: linear-gradient(135deg, #0f172a 0%, #020617 100%);
+            position: relative;
+            overflow: hidden;
+        }
+        .cosmic-bg::before {
+            content: "";
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background-image:
+                radial-gradient(circle at 20% 30%, rgba(255, 255, 255, 0.05) 0.5px, transparent 1px),
+                radial-gradient(circle at 80% 50%, rgba(255, 255, 255, 0.05) 0.5px, transparent 1px),
+                radial-gradient(circle at 40% 70%, rgba(255, 255, 255, 0.05) 0.5px, transparent 1px);
+            background-size: 3% 3%;
+            z-index: 0;
+        }
+        .selection-bubble {
+            border: 1px solid rgba(255, 255, 255, 0.1);
+            transition: all 0.3s ease;
+        }
+        .selection-bubble:hover {
+            border-color: #3b82f6;
+            transform: translateY(-5px);
+        }
+        .selection-bubble.selected {
+            border-color: #3b82f6;
+            background: rgba(59, 130, 246, 0.1);
+            transform: translateY(-5px);
+        }
+        .progress-step {
+            width: 32px;
+            height: 32px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            border-radius: 50%;
+            background: rgba(255, 255, 255, 0.1);
+            color: #94a3b8;
+            font-weight: 600;
+        }
+        .progress-step.active {
+            background: #3b82f6;
+            color: white;
+        }
+        .progress-step.completed {
+            background: #059669;
+            color: white;
+        }
+        .progress-connector {
+            height: 2px;
+            flex: 1;
+            background: rgba(255, 255, 255, 0.1);
+        }
+        .progress-connector.active {
+            background: #3b82f6;
+        }
+        .progress-connector.completed {
+            background: #059669;
+        }
+        .input-field {
+            background: rgba(15, 23, 42, 0.8);
+            border: 1px solid rgba(255, 255, 255, 0.1);
+            transition: all 0.3s ease;
+        }
+        .input-field:focus {
+            border-color: #3b82f6;
+            box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.3);
+        }
+        .shadow-glow {
+            box-shadow: 0 4px 20px rgba(59, 130, 246, 0.25);
+        }
+        #map {
+            height: 250px;
+            border-radius: 0.5rem;
+        }
+    </style>
+</head>
+<body class="cosmic-bg text-white min-h-screen font-['Inter']">
+    <div class="container mx-auto px-4 py-8 max-w-5xl relative z-10">
+        <!-- Navigation -->
+        <nav class="flex justify-between items-center mb-12">
+            <div class="flex items-center space-x-2">
+                <div class="w-10 h-10 rounded-full bg-gradient-to-br from-blue-500 to-indigo-600 flex items-center justify-center shadow-glow">
+                    <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z" />
+                    </svg>
+                </div>
+                <span class="text-xl font-bold tracking-tight">NovaNexus</span>
+            </div>
+            <div>
+                <button class="text-sm text-blue-400 hover:text-blue-300 font-medium">Sign In</button>
+            </div>
+        </nav>
+        <!-- Main Content -->
+        <div class="flex flex-col md:flex-row gap-8">
+            <!-- Progress Indicator (Hidden on small screens) -->
+            <div class="hidden md:block w-64 shrink-0">
+                <div class="sticky top-8">
+                    <h2 class="text-2xl font-bold mb-6">Create Your Account</h2>
+                    <div class="flex flex-col gap-2">
+                        <div class="flex flex-col items-center gap-1">
+                            <span class="text-xs font-medium text-slate-400 uppercase tracking-wider">Progress</span>
+                            <div class="w-full bg-slate-800 rounded-full h-1.5 mt-1">
+                                <div class="bg-blue-500 h-1.5 rounded-full" id="progress-bar" style="width: 16.66%"></div>
+                            </div>
+                        </div>
+                        <div class="mt-6 flex flex-col gap-4">
+                            <div class="flex items-center gap-4">
+                                <div id="step-1-circle" class="progress-step active">1</div>
+                                <span id="step-1-text" class="font-medium">Personal Info</span>
+                                <div class="progress-connector"></div>
+                            </div>
+                            <div class="flex items-center gap-4">
+                                <div id="step-2-circle" class="progress-step">2</div>
+                                <span id="step-2-text" class="font-medium text-slate-400">Business Info</span>
+                                <div class="progress-connector"></div>
+                            </div>
+                            <div class="flex items-center gap-4">
+                                <div id="step-3-circle" class="progress-step">3</div>
+                                <span id="step-3-text" class="font-medium text-slate-400">Business Type</span>
+                                <div class="progress-connector"></div>
+                            </div>
+                            <div class="flex items-center gap-4">
+                                <div id="step-4-circle" class="progress-step">4</div>
+                                <span id="step-4-text" class="font-medium text-slate-400">Location</span>
+                                <div class="progress-connector"></div>
+                            </div>
+                            <div class="flex items-center gap-4">
+                                <div id="step-5-circle" class="progress-step">5</div>
+                                <span id="step-5-text" class="font-medium text-slate-400">Business Size</span>
+                                <div class="progress-connector"></div>
+                            </div>
+                            <div class="flex items-center gap-4">
+                                <div id="step-6-circle" class="progress-step">6</div>
+                                <span id="step-6-text" class="font-medium text-slate-400">Credentials</span>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <!-- Form Content -->
+            <div class="flex-1">
+                <!-- Step 1: Name and Email -->
+                <div id="step-1" class="form-step block">
+                    <div class="max-w-lg mx-auto">
+                        <h1 class="text-4xl font-bold mb-2">Welcome to <span class="text-blue-400">NovaNexus</span></h1>
+                        <p class="text-slate-400 mb-8">Let's get started with some basic information about you.</p>
+                        <div class="space-y-6">
+                            <div>
+                                <label for="full-name" class="block text-sm font-medium mb-2">Full Name</label>
+                                <input type="text" id="full-name" class="w-full px-4 py-3 rounded-lg input-field focus:outline-none" placeholder="John Smith">
+                            </div>
+                            <div>
+                                <label for="email" class="block text-sm font-medium mb-2">Email Address</label>
+                                <input type="email" id="email" class="w-full px-4 py-3 rounded-lg input-field focus:outline-none" placeholder="[email protected]">
+                            </div>
+                        </div>
+                        <div class="mt-10 flex justify-end">
+                            <button onclick="nextStep(2)" class="bg-blue-500 hover:bg-blue-600 text-white px-6 py-3 rounded-lg font-medium transition-colors duration-200">
+                                Continue
+                            </button>
+                        </div>
+                    </div>
+                </div>
+                <!-- Step 2: Business Name and Description -->
+                <div id="step-2" class="form-step hidden">
+                    <div class="max-w-lg mx-auto">
+                        <h1 class="text-4xl font-bold mb-2">About Your Business</h1>
+                        <p class="text-slate-400 mb-8">Tell us a little about your company.</p>
+                        <div class="space-y-6">
+                            <div>
+                                <label for="business-name" class="block text-sm font-medium mb-2">Business Name</label>
+                                <input type="text" id="business-name" class="w-full px-4 py-3 rounded-lg input-field focus:outline-none" placeholder="Acme Inc.">
+                            </div>
+                            <div>
+                                <label for="business-description" class="block text-sm font-medium mb-2">Business Description</label>
+                                <textarea id="business-description" rows="4" class="w-full px-4 py-3 rounded-lg input-field focus:outline-none" placeholder="What products or services do you offer?"></textarea>
+                            </div>
+                        </div>
+                        <div class="mt-10 flex justify-between">
+                            <button onclick="prevStep(1)" class="text-blue-400 hover:text-blue-300 font-medium px-6 py-3 rounded-lg transition-colors duration-200">
+                                Back
+                            </button>
+                            <button onclick="nextStep(3)" class="bg-blue-500 hover:bg-blue-600 text-white px-6 py-3 rounded-lg font-medium transition-colors duration-200">
+                                Continue
+                            </button>
+                        </div>
+                    </div>
+                </div>
+                <!-- Step 3: Business Type -->
+                <div id="step-3" class="form-step hidden">
+                    <div class="max-w-lg mx-auto">
+                        <h1 class="text-4xl font-bold mb-2">Business Type</h1>
+                        <p class="text-slate-400 mb-8">Select the category that best describes your business.</p>
+                        <div class="grid grid-cols-1 sm:grid-cols-3 gap-4">
+                            <div class="selection-bubble rounded-lg p-4 cursor-pointer text-center" onclick="selectBusinessType('Marketing Agency')">
+                                <div class="w-16 h-16 mx-auto bg-indigo-900/30 rounded-full flex items-center justify-center mb-3">
+                                    <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-indigo-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
+                                    </svg>
+                                </div>
+                                <h3 class="font-medium">Marketing Agency</h3>
+                                <p class="text-sm text-slate-400 mt-1">Digital marketing, social media, SEO</p>
+                            </div>
+                            <div class="selection-bubble rounded-lg p-4 cursor-pointer text-center" onclick="selectBusinessType('Software Developer')">
+                                <div class="w-16 h-16 mx-auto bg-blue-900/30 rounded-full flex items-center justify-center mb-3">
+                                    <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-blue-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4" />
+                                    </svg>
+                                </div>
+                                <h3 class="font-medium">Software Developer</h3>
+                                <p class="text-sm text-slate-400 mt-1">Web & mobile app development</p>
+                            </div>
+                            <div class="selection-bubble rounded-lg p-4 cursor-pointer text-center" onclick="selectBusinessType('Graphic Designer')">
+                                <div class="w-16 h-16 mx-auto bg-purple-900/30 rounded-full flex items-center justify-center mb-3">
+                                    <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-purple-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z" />
+                                    </svg>
+                                </div>
+                                <h3 class="font-medium">Graphic Designer</h3>
+                                <p class="text-sm text-slate-400 mt-1">Branding, logos, print materials</p>
+                            </div>
+                        </div>
+                        <input type="hidden" id="business-type">
+                        <div class="mt-10 flex justify-between">
+                            <button onclick="prevStep(2)" class="text-blue-400 hover:text-blue-300 font-medium px-6 py-3 rounded-lg transition-colors duration-200">
+                                Back
+                            </button>
+                            <button onclick="nextStep(4)" class="bg-blue-500 hover:bg-blue-600 text-white px-6 py-3 rounded-lg font-medium transition-colors duration-200">
+                                Continue
+                            </button>
+                        </div>
+                    </div>
+                </div>
+                <!-- Step 4: Address with Map -->
+                <div id="step-4" class="form-step hidden">
+                    <div class="max-w-lg mx-auto">
+                        <h1 class="text-4xl font-bold mb-2">Business Location</h1>
+                        <p class="text-slate-400 mb-8">Where is your business located?</p>
+                        <div class="space-y-6">
+                            <div>
+                                <label for="business-address" class="block text-sm font-medium mb-2">Business Address</label>
+                                <input type="text" id="business-address" class="w-full px-4 py-3 rounded-lg input-field focus:outline-none" placeholder="123 Main St, City, Country">
+                            </div>
+                            <div id="map" class="mt-4"></div>
+                            <div class="grid grid-cols-2 gap-4">
+                                <div>
+                                    <label for="city" class="block text-sm font-medium mb-2">City</label>
+                                    <input type="text" id="city" class="w-full px-4 py-3 rounded-lg input-field focus:outline-none" placeholder="New York">
+                                </div>
+                                <div>
+                                    <label for="zip-code" class="block text-sm font-medium mb-2">Zip Code</label>
+                                    <input type="text" id="zip-code" class="w-full px-4 py-3 rounded-lg input-field focus:outline-none" placeholder="10001">
+                                </div>
+                            </div>
+                        </div>
+                        <div class="mt-10 flex justify-between">
+                            <button onclick="prevStep(3)" class="text-blue-400 hover:text-blue-300 font-medium px-6 py-3 rounded-lg transition-colors duration-200">
+                                Back
+                            </button>
+                            <button onclick="nextStep(5)" class="bg-blue-500 hover:bg-blue-600 text-white px-6 py-3 rounded-lg font-medium transition-colors duration-200">
+                                Continue
+                            </button>
+                        </div>
+                    </div>
+                </div>
+                <!-- Step 5: Business Size -->
+                <div id="step-5" class="form-step hidden">
+                    <div class="max-w-lg mx-auto">
+                        <h1 class="text-4xl font-bold mb-2">Business Size</h1>
+                        <p class="text-slate-400 mb-8">How many people work at your company?</p>
+                        <div class="grid grid-cols-1 sm:grid-cols-4 gap-4">
+                            <div class="selection-bubble rounded-lg p-4 cursor-pointer text-center" onclick="selectBusinessSize('1')">
+                                <div class="w-16 h-16 mx-auto bg-slate-800 rounded-full flex items-center justify-center mb-3">
+                                    <span class="text-xl font-bold">1</span>
+                                </div>
+                                <h3 class="font-medium">Solo</h3>
+                                <p class="text-sm text-slate-400 mt-1">Just me</p>
+                            </div>
+                            <div class="selection-bubble rounded-lg p-4 cursor-pointer text-center" onclick="selectBusinessSize('2-10')">
+                                <div class="w-16 h-16 mx-auto bg-slate-800 rounded-full flex items-center justify-center mb-3">
+                                    <span class="text-xl font-bold">2-10</span>
+                                </div>
+                                <h3 class="font-medium">Small Team</h3>
+                                <p class="text-sm text-slate-400 mt-1">2 to 10 people</p>
+                            </div>
+                            <div class="selection-bubble rounded-lg p-4 cursor-pointer text-center" onclick="selectBusinessSize('11-50')">
+                                <div class="w-16 h-16 mx-auto bg-slate-800 rounded-full flex items-center justify-center mb-3">
+                                    <span class="text-xl font-bold">11-50</span>
+                                </div>
+                                <h3 class="font-medium">Medium</h3>
+                                <p class="text-sm text-slate-400 mt-1">11 to 50 people</p>
+                            </div>
+                            <div class="selection-bubble rounded-lg p-4 cursor-pointer text-center" onclick="selectBusinessSize('51+')">
+                                <div class="w-16 h-16 mx-auto bg-slate-800 rounded-full flex items-center justify-center mb-3">
+                                    <span class="text-xl font-bold">51+</span>
+                                </div>
+                                <h3 class="font-medium">Large</h3>
+                                <p class="text-sm text-slate-400 mt-1">51+ employees</p>
+                            </div>
+                        </div>
+                        <input type="hidden" id="business-size">
+                        <div class="mt-10 flex justify-between">
+                            <button onclick="prevStep(4)" class="text-blue-400 hover:text-blue-300 font-medium px-6 py-3 rounded-lg transition-colors duration-200">
+                                Back
+                            </button>
+                            <button onclick="nextStep(6)" class="bg-blue-500 hover:bg-blue-600 text-white px-6 py-3 rounded-lg font-medium transition-colors duration-200">
+                                Continue
+                            </button>
+                        </div>
+                    </div>
+                </div>
+                <!-- Step 6: Username and Password -->
+                <div id="step-6" class="form-step hidden">
+                    <div class="max-w-lg mx-auto">
+                        <h1 class="text-4xl font-bold mb-2">Almost There</h1>
+                        <p class="text-slate-400 mb-8">Create your login credentials.</p>
+                        <div class="space-y-6">
+                            <div>
+                                <label for="username" class="block text-sm font-medium mb-2">Username</label>
+                                <div class="relative">
+                                    <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
+                                        <span class="text-slate-400">@</span>
+                                    </div>
+                                    <input type="text" id="username" class="w-full pl-7 px-4 py-3 rounded-lg input-field focus:outline-none" placeholder="username">
+                                </div>
+                            </div>
+                            <div>
+                                <label for="password" class="block text-sm font-medium mb-2">Password</label>
+                                <input type="password" id="password" class="w-full px-4 py-3 rounded-lg input-field focus:outline-none" placeholder="••••••••">
+                                <div class="mt-2">
+                                    <div class="flex items-center gap-2 mb-1">
+                                        <div id="strength-meter-1" class="w-full h-1.5 bg-slate-700 rounded-full"></div>
+                                        <div id="strength-meter-2" class="w-full h-1.5 bg-slate-700 rounded-full"></div>
+                                        <div id="strength-meter-3" class="w-full h-1.5 bg-slate-700 rounded-full"></div>
+                                        <div id="strength-meter-4" class="w-full h-1.5 bg-slate-700 rounded-full"></div>
+                                    </div>
+                                    <p id="strength-text" class="text-xs text-slate-400">Password strength: <span>Weak</span></p>
+                                </div>
+                                <div class="mt-2 text-xs text-slate-400">
+                                    Use 8+ characters with a mix of letters, numbers & symbols
+                                </div>
+                            </div>
+                            <div>
+                                <label for="confirm-password" class="block text-sm font-medium mb-2">Confirm Password</label>
+                                <input type="password" id="confirm-password" class="w-full px-4 py-3 rounded-lg input-field focus:outline-none" placeholder="••••••••">
+                            </div>
+                            <div class="flex items-start mt-1">
+                                <div class="flex items-center h-5">
+                                    <input id="terms" name="terms" type="checkbox" class="h-4 w-4 rounded text-blue-600 focus:ring-blue-500 bg-slate-800 border-slate-600">
+                                </div>
+                                <div class="ml-3 text-sm">
+                                    <label for="terms" class="text-slate-400">I agree to the <a href="#" class="text-blue-400 hover:text-blue-300">Terms of Service</a> and <a href="#" class="text-blue-400 hover:text-blue-300">Privacy Policy</a></label>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="mt-10 flex justify-between">
+                            <button onclick="prevStep(5)" class="text-blue-400 hover:text-blue-300 font-medium px-6 py-3 rounded-lg transition-colors duration-200">
+                                Back
+                            </button>
+                            <button onclick="submitForm()" class="bg-blue-500 hover:bg-blue-600 text-white px-6 py-3 rounded-lg font-medium transition-colors duration-200">
+                                Create Account
+                            </button>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <script>
+        let currentStep = 1;
+        const totalSteps = 6;
+        let map;
+        let marker;
+        // Initialize the form
+        document.addEventListener('DOMContentLoaded', function() {
+            // For demo purposes, we'll just log the form submission
+            document.getElementById('password').addEventListener('input', checkPasswordStrength);
+            // Initialize the map (but only show it when we get to step 4)
+            initMap();
+        });
+        function nextStep(step) {
+            // Validate current step before proceeding
+            if (!validateCurrentStep()) return;
+            // Hide current step
+            document.getElementById(`step-${currentStep}`).classList.add('hidden');
+            // Update progress indicators for current step
+            document.getElementById(`step-${currentStep}-circle`).classList.remove('active');
+            document.getElementById(`step-${currentStep}-circle`).classList.add('completed');
+            document.getElementById(`step-${currentStep}-text`).classList.remove('font-medium');
+            document.getElementById(`step-${currentStep}-text`).classList.add('font-medium');
+            document.getElementById(`step-${currentStep}-text`).classList.remove('text-slate-400');
+            // Update connector to next step if it exists
+            const connector = document.querySelector(`#step-${currentStep}-circle + span + .progress-connector`);
+            if (connector) {
+                connector.classList.add('active', 'completed');
+            }
+            // Show new step
+            document.getElementById(`step-${step}`).classList.remove('hidden');
+            currentStep = step;
+            // Update progress indicators for new step
+            document.getElementById(`step-${currentStep}-circle`).classList.add('active');
+            document.getElementById(`step-${currentStep}-text`).classList.remove('text-slate-400');
+            document.getElementById(`step-${currentStep}-text`).classList.add('font-medium');
+            // Update progress bar
+            const progressPercent = ((currentStep - 1) / (totalSteps - 1)) * 100;
+            document.getElementById('progress-bar').style.width = `${progressPercent}%`;
+            // Special handling for map step
+            if (currentStep === 4) {
+                setTimeout(() => {
+                    if (map) {
+                        google.maps.event.trigger(map, 'resize');
+                    }
+                }, 300);
+            }
+        }
+        function prevStep(step) {
+            // Hide current step
+            document.getElementById(`step-${currentStep}`).classList.add('hidden');
+            // Update progress indicators for current step
+            document.getElementById(`step-${currentStep}-circle`).classList.remove('active');
+            document.getElementById(`step-${currentStep}-text`).classList.remove('font-medium');
+            document.getElementById(`step-${currentStep}-text`).classList.add('text-slate-400');
+            // Show new step
+            document.getElementById(`step-${step}`).classList.remove('hidden');
+            currentStep = step;
+            // Update progress indicators for new step
+            document.getElementById(`step-${currentStep}-circle`).classList.add('active');
+            document.getElementById(`step-${currentStep}-text`).classList.remove('text-slate-400');
+            // Update progress bar
+            const progressPercent = ((currentStep - 1) / (totalSteps - 1)) * 100;
+            document.getElementById('progress-bar').style.width = `${progressPercent}%`;
+        }
+        function validateCurrentStep() {
+            // Add validation logic here for each step
+            switch(currentStep) {
+                case 1:
+                    const fullName = document.getElementById('full-name').value.trim();
+                    const email = document.getElementById('email').value.trim();
+                    if (!fullName || !email) {
+                        alert('Please fill in all fields');
+                        return false;
+                    }
+                    // Simple email validation
+                    if (!email.includes('@') || !email.includes('.')) {
+                        alert('Please enter a valid email address');
+                        return false;
+                    }
+                    return true;
+                case 2:
+                    const businessName = document.getElementById('business-name').value.trim();
+                    const businessDesc = document.getElementById('business-description').value.trim();
+                    if (!businessName || !businessDesc) {
+                        alert('Please fill in all fields');
+                        return false;
+                    }
+                    return true;
+                case 3:
+                    const businessType = document.getElementById('business-type').value;
+                    if (!businessType) {
+                        alert('Please select a business type');
+                        return false;
+                    }
+                    return true;
+                case 4:
+                    const address = document.getElementById('business-address').value.trim();
+                    const city = document.getElementById('city').value.trim();
+                    const zip = document.getElementById('zip-code').value.trim();
+                    if (!address || !city || !zip) {
+                        alert('Please fill in all location fields');
+                        return false;
+                    }
+                    return true;
+                case 5:
+                    const businessSize = document.getElementById('business-size').value;
+                    if (!businessSize) {
+                        alert('Please select your business size');
+                        return false;
+                    }
+                    return true;
+                case 6:
+                    const username = document.getElementById('username').value.trim();
+                    const password = document.getElementById('password').value.trim();
+                    const confirm = document.getElementById('confirm-password').value.trim();
+                    const terms = document.getElementById('terms').checked;
+                    if (!username || !password || !confirm) {
+                        alert('Please fill in all fields');
+                        return false;
+                    }
+                    if (password !== confirm) {
+                        alert('Passwords do not match');
+                        return false;
+                    }
+                    if (password.length < 8) {
+                        alert('Password must be at least 8 characters');
+                        return false;
+                    }
+                    if (!terms) {
+                        alert('You must agree to the terms and conditions');
+                        return false;
+                    }
+                    return true;
+                default:
+                    return true;
+            }
+        }
+        function selectBusinessType(type) {
+            // Update selected business type
+            document.getElementById('business-type').value = type;
+            // Update UI
+            const bubbles = document.querySelectorAll('.selection-bubble');
+            bubbles.forEach(bubble => {
+                bubble.classList.remove('selected');
+                if (bubble.textContent.includes(type)) {
+                    bubble.classList.add('selected');
+                }
+            });
+        }
+        function selectBusinessSize(size) {
+            // Update selected business size
+            document.getElementById('business-size').value = size;
+            // Update UI
+            const bubbles = document.querySelectorAll('.selection-bubble');
+            bubbles.forEach(bubble => {
+                bubble.classList.remove('selected');
+                if (bubble.querySelector('h3').textContent.includes(size.replace('5', '51'))) {
+                    bubble.classList.add('selected');
+                }
+            });
+        }
+        function initMap() {
+            // Create a map centered on a default location
+            const defaultLocation = { lat: 40.7128, lng: -74.0060 }; // New York
+            map = new google.maps.Map(document.getElementById("map"), {
+                zoom: 12,
+                center: defaultLocation,
+                styles: [
+                    {
+                        "featureType": "all",
+                        "elementType": "labels.text.fill",
+                        "stylers": [
+                            {
+                                "saturation": 36
+                            },
+                            {
+                                "color": "#eeeeee"
+                            },
+                            {
+                                "lightness": 40
+                            }
+                        ]
+                    },
+                    {
+                        "featureType": "all",
+                        "elementType": "labels.text.stroke",
+                        "stylers": [
+                            {
+                                "visibility": "on"
+                            },
+                            {
+                                "color": "#000000"
+                            },
+                            {
+                                "lightness": 16
+                            }
+                        ]
+                    },
+                    {
+                        "featureType": "all",
+                        "elementType": "labels.icon",
+                        "stylers": [
+                            {
+                                "visibility": "off"
+                            }
+                        ]
+                    },
+                    {
+                        "featureType": "administrative",
+                        "elementType": "geometry.fill",
+                        "stylers": [
+                            {
+                                "color": "#000000"
+                            },
+                            {
+                                "lightness": 20
+                            }
+                        ]
+                    },
+                    {
+                        "featureType": "administrative",
+                        "elementType": "geometry.stroke",
+                        "stylers": [
+                            {
+                                "color": "#000000"
+                            },
+                            {
+                                "lightness": 17
+                            },
+                            {
+                                "weight": 1.2
+                            }
+                        ]
+                    },
+                    {
+                        "featureType": "landscape",
+                        "elementType": "geometry",
+                        "stylers": [
+                            {
+                                "color": "#000000"
+                            },
+                            {
+                                "lightness": 20
+                            }
+                        ]
+                    },
+                    {
+                        "featureType": "poi",
+                        "elementType": "geometry",
+                        "stylers": [
+                            {
+                                "color": "#000000"
+                            },
+                            {
+                                "lightness": 21
+                            }
+                        ]
+                    },
+                    {
+                        "featureType": "road.highway",
+                        "elementType": "geometry.fill",
+                        "stylers": [
+                            {
+                                "color": "#202020"
+                            },
+                            {
+                                "lightness": 17
+                            }
+                        ]
+                    },
+                    {
+                        "featureType": "road.highway",
+                        "elementType": "geometry.stroke",
+                        "stylers": [
+                            {
+                                "color": "#202020"
+                            },
+                            {
+                                "lightness": 29
+                            },
+                            {
+                                "weight": 0.2
+                            }
+                        ]
+                    },
+                    {
+                        "featureType": "road.arterial",
+                        "elementType": "geometry",
+                        "stylers": [
+                            {
+                                "color": "#151515"
+                            },
+                            {
+                                "lightness": 18
+                            }
+                        ]
+                    },
+                    {
+                        "featureType": "road.local",
+                        "elementType": "geometry",
+                        "stylers": [
+                            {
+                                "color": "#000000"
+                            },
+                            {
+                                "lightness": 16
+                            }
+                        ]
+                    },
+                    {
+                        "featureType": "transit",
+                        "elementType": "geometry",
+                        "stylers": [
+                            {
+                                "color": "#000000"
+                            },
+                            {
+                                "lightness": 19
+                            }
+                        ]
+                    },
+                    {
+                        "featureType": "water",
+                        "elementType": "geometry",
+                        "stylers": [
+                            {
+                                "color": "#000000"
+                            },
+                            {
+                                "lightness": 17
+                            }
+                        ]
+                    }
+                ]
+            });
+            // Add marker
+            marker = new google.maps.Marker({
+                position: defaultLocation,
+                map: map,
+                title: "Your Business"
+            });
+            // Add autocomplete for address field
+            const autocomplete = new google.maps.places.Autocomplete(
+                document.getElementById('business-address'),
+                { types: ['geocode'] }
+            );
+            // When user selects an address from the dropdown
+            autocomplete.addListener('place_changed', function() {
+                const place = autocomplete.getPlace();
+                if (!place.geometry) {
+                    return;
+                }
+                // Update map position
+                map.setCenter(place.geometry.location);
+                marker.setPosition(place.geometry.location);
+                // Try to parse the address components
+                for (const component of place.address_components) {
+                    const componentType = component.types[0];
+                    switch (componentType) {
+                        case "locality":
+                            document.getElementById('city').value = component.long_name;
+                            break;
+                        case "postal_code":
+                            document.getElementById('zip-code').value = component.long_name;
+                            break;
+                    }
+                }
+            });
+        }
+        function checkPasswordStrength() {
+            const password = document.getElementById('password').value;
+            const strengthText = document.getElementById('strength-text').querySelector('span');
+            // Reset meters
+            for (let i = 1; i <= 4; i++) {
+                document.getElementById(`strength-meter-${i}`).className = `w-full h-1.5 bg-slate-700 rounded-full`;
+            }
+            // Calculate strength (simple version)
+            let strength = 0;
+            if (password.length >= 8) strength++;
+            if (password.match(/[a-z]/) && password.match(/[A-Z]/)) strength++;
+            if (password.match(/\d/)) strength++;
+            if (password.match(/[^a-zA-Z\d]/)) strength++;
+            // Update meters
+            for (let i = 1; i <= strength; i++) {
+                let color = 'bg-red-500';
+                if (strength >= 3) color = 'bg-green-500';
+                else if (strength >= 2) color = 'bg-yellow-500';
+                document.getElementById(`strength-meter-${i}`).classList.add(color);
+            }
+            // Update text
+            if (strength <= 1) strengthText.textContent = 'Weak';
+            else if (strength <= 2) strengthText.textContent = 'Fair';
+            else if (strength <= 3) strengthText.textContent = 'Good';
+            else strengthText.textContent = 'Strong';
+        }
+        function submitForm() {
+            if (!validateCurrentStep()) return;
+            // In a real application, you would submit the form data here
+            alert('Account created successfully! Redirecting to dashboard...');
+            // For demo, just reset form after a short delay
+            setTimeout(() => {
+                // Reset form
+                currentStep = 1;
+                document.querySelectorAll('.form-step').forEach(step => {
+                    if (step.id !== 'step-1') {
+                        step.classList.add('hidden');
+                    } else {
+                        step.classList.remove('hidden');
+                    }
+                });
+                // Reset progress indicators
+                document.querySelectorAll('.progress-step').forEach(step => {
+                    step.classList.remove('active', 'completed');
+                    if (step.id === 'step-1-circle') {
+                        step.classList.add('active');
+                    }
+                });
+                document.querySelectorAll('.progress-connector').forEach(connector => {
+                    connector.classList.remove('active', 'completed');
+                });
+                document.getElementById('progress-bar').style.width = '16.66%';
+                document.querySelectorAll('.selection-bubble').forEach(bubble => {
+                    bubble.classList.remove('selected');
+                });
+                // Reset all input fields
+                document.querySelectorAll('input:not([type="hidden"]), textarea').forEach(input => {
+                    input.value = '';
+                });
+                document.getElementById('terms').checked = false;
+            }, 2000);
+        }
+    </script>
+<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=victor/novanexus" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
+</html>

prompts.txt ADDED Viewed

	@@ -0,0 +1 @@

+ Build a sleek, modern "create account" onboarding flow. With the following pages as separate steps: Name and Email, Business Name and Description, Business type (Marketing Agency , Software Developer, Graphic Designer), Address (Include map), Business Size, Choose a username and set password. For the visual ui follow the following details: A cosmic dark blue to black gradient background with subtle star elements. Clean, minimalist typography with large bold headlines A professional navigation bar. Elegant spacing and layout. A circular badge/emblem design For an agency website. A gradient background similar to the cosmic effect> shown. Modern, professional typography with impactful headlines. Responsive navigation that works on all devices Clear sections showcasing services and value proposition The same overall aesthetic and brand positioning. With color palette of deep blues, blacks, whites, and subtle accents.