|
<!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"> |
|
|
|
<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> |
|
|
|
|
|
<div class="flex flex-col md:flex-row gap-8"> |
|
|
|
<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> |
|
|
|
|
|
<div class="flex-1"> |
|
|
|
<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> |
|
|
|
|
|
<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> |
|
|
|
|
|
<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> |
|
|
|
|
|
<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> |
|
|
|
|
|
<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> |
|
|
|
|
|
<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; |
|
|
|
|
|
document.addEventListener('DOMContentLoaded', function() { |
|
|
|
document.getElementById('password').addEventListener('input', checkPasswordStrength); |
|
|
|
|
|
initMap(); |
|
}); |
|
|
|
function nextStep(step) { |
|
|
|
if (!validateCurrentStep()) return; |
|
|
|
|
|
document.getElementById(`step-${currentStep}`).classList.add('hidden'); |
|
|
|
|
|
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'); |
|
|
|
|
|
const connector = document.querySelector(`#step-${currentStep}-circle + span + .progress-connector`); |
|
if (connector) { |
|
connector.classList.add('active', 'completed'); |
|
} |
|
|
|
|
|
document.getElementById(`step-${step}`).classList.remove('hidden'); |
|
currentStep = 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'); |
|
|
|
|
|
const progressPercent = ((currentStep - 1) / (totalSteps - 1)) * 100; |
|
document.getElementById('progress-bar').style.width = `${progressPercent}%`; |
|
|
|
|
|
if (currentStep === 4) { |
|
setTimeout(() => { |
|
if (map) { |
|
google.maps.event.trigger(map, 'resize'); |
|
} |
|
}, 300); |
|
} |
|
} |
|
|
|
function prevStep(step) { |
|
|
|
document.getElementById(`step-${currentStep}`).classList.add('hidden'); |
|
|
|
|
|
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'); |
|
|
|
|
|
document.getElementById(`step-${step}`).classList.remove('hidden'); |
|
currentStep = step; |
|
|
|
|
|
document.getElementById(`step-${currentStep}-circle`).classList.add('active'); |
|
document.getElementById(`step-${currentStep}-text`).classList.remove('text-slate-400'); |
|
|
|
|
|
const progressPercent = ((currentStep - 1) / (totalSteps - 1)) * 100; |
|
document.getElementById('progress-bar').style.width = `${progressPercent}%`; |
|
} |
|
|
|
function validateCurrentStep() { |
|
|
|
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; |
|
} |
|
|
|
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) { |
|
|
|
document.getElementById('business-type').value = type; |
|
|
|
|
|
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) { |
|
|
|
document.getElementById('business-size').value = size; |
|
|
|
|
|
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() { |
|
|
|
const defaultLocation = { lat: 40.7128, lng: -74.0060 }; |
|
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 |
|
} |
|
] |
|
} |
|
] |
|
}); |
|
|
|
|
|
marker = new google.maps.Marker({ |
|
position: defaultLocation, |
|
map: map, |
|
title: "Your Business" |
|
}); |
|
|
|
|
|
const autocomplete = new google.maps.places.Autocomplete( |
|
document.getElementById('business-address'), |
|
{ types: ['geocode'] } |
|
); |
|
|
|
|
|
autocomplete.addListener('place_changed', function() { |
|
const place = autocomplete.getPlace(); |
|
if (!place.geometry) { |
|
return; |
|
} |
|
|
|
|
|
map.setCenter(place.geometry.location); |
|
marker.setPosition(place.geometry.location); |
|
|
|
|
|
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'); |
|
|
|
|
|
for (let i = 1; i <= 4; i++) { |
|
document.getElementById(`strength-meter-${i}`).className = `w-full h-1.5 bg-slate-700 rounded-full`; |
|
} |
|
|
|
|
|
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++; |
|
|
|
|
|
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); |
|
} |
|
|
|
|
|
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; |
|
|
|
|
|
alert('Account created successfully! Redirecting to dashboard...'); |
|
|
|
|
|
setTimeout(() => { |
|
|
|
currentStep = 1; |
|
document.querySelectorAll('.form-step').forEach(step => { |
|
if (step.id !== 'step-1') { |
|
step.classList.add('hidden'); |
|
} else { |
|
step.classList.remove('hidden'); |
|
} |
|
}); |
|
|
|
|
|
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'); |
|
}); |
|
|
|
|
|
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> |
