rstmcanada/undefined
0
1<!DOCTYPE html>2<html lang="en">3<head>4 <meta charset="UTF-8">5 <meta name="viewport" content="width=device-width, initial-scale=1.0">6 <title>Sign Up - SignaSphere AI</title>7 <link rel="icon" type="image/x-icon" href="/static/favicon.ico">8 <script src="https://cdn.tailwindcss.com"></script>9 <script>10 tailwind.config = {11 theme: {12 extend: {13 colors: {14 primary: {15 50: '#eff6ff',16 100: '#dbeafe',17 200: '#bfdbfe',18 300: '#93c5fd',19 400: '#60a5fa',20 500: '#3b82f6',21 600: '#2563eb',22 700: '#1d4ed8',23 800: '#1e40af',24 900: '#1e3a8a'25 },26 secondary: {27 50: '#f0f9ff',28 100: '#e0f2fe',29 200: '#bae6fd',30 300: '#7dd3fc',31 400: '#38bdf8',32 500: '#0ea5e9',33 600: '#0284c7',34 700: '#0369a1',35 800: '#075985',36 900: '#0c4a6e'37 }38 }39 }40 }41 }42 </script>43 <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>44 <script src="https://unpkg.com/feather-icons"></script>45 <style>46 @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');47 48 * {49 font-family: 'Inter', sans-serif;50 }51 52 .auth-bg {53 background: linear-gradient(135deg, #3b82f6 0%, #0ea5e9 100%);54 }55 56 .auth-card {57 box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);58 }59 60 .progress-bar {61 transition: width 0.3s ease;62 }63 </style>64</head>65<body class="bg-gray-50 min-h-screen flex items-center justify-center py-8">66 <div class="absolute inset-0 auth-bg z-0"></div>67 68 <div class="relative z-10 w-full max-w-2xl mx-4">69 <div class="auth-card bg-white rounded-xl p-8">70 <div class="text-center mb-8">71 <div class="flex items-center justify-center mb-4">72 <i data-feather="edit-3" class="h-8 w-8 text-primary-600"></i>73 <span class="ml-2 text-2xl font-bold text-gray-900">SignaSphere AI</span>74 </div>75 <h1 class="text-2xl font-bold text-gray-900">Create Your Account</h1>76 <p class="text-gray-600 mt-2">Start your 14-day free trial. No credit card required.</p>77 </div>78 79 <!-- Progress Bar -->80 <div class="mb-8">81 <div class="flex justify-between items-center mb-2">82 <span class="text-sm font-medium text-gray-700">Step 1 of 3</span>83 <span class="text-sm text-gray-500">33% Complete</span>84 </div>85 <div class="w-full bg-gray-200 rounded-full h-2">86 <div class="progress-bar bg-primary-600 h-2 rounded-full" style="width: 33%"></div>87 </div>88 </div>89 90 <form class="space-y-6">91 <div class="grid md:grid-cols-2 gap-6">92 <div>93 <label for="firstName" class="block text-sm font-medium text-gray-700 mb-2">First Name</label>94 <input type="text" id="firstName" name="firstName" required 95 class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-transparent transition duration-200"96 placeholder="Enter your first name">97 </div>98 <div>99 <label for="lastName" class="block text-sm font-medium text-gray-700 mb-2">Last Name</label>100 <input type="text" id="lastName" name="lastName" required 101 class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-transparent transition duration-200"102 placeholder="Enter your last name">103 </div>104 </div>105 106 <div>107 <label for="email" class="block text-sm font-medium text-gray-700 mb-2">Email Address</label>108 <input type="email" id="email" name="email" required 109 class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-transparent transition duration-200"110 placeholder="Enter your email">111 </div>112 113 <div>114 <label for="company" class="block text-sm font-medium text-gray-700 mb-2">Company Name (Optional)</label>115 <input type="text" id="company" name="company" 116 class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-transparent transition duration-200"117 placeholder="Enter your company name">118 </div>119 120 <div>121 <label for="password" class="block text-sm font-medium text-gray-700 mb-2">Password</label>122 <input type="password" id="password" name="password" required 123 class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-transparent transition duration-200"124 placeholder="Create a strong password">125 <p class="text-xs text-gray-500 mt-2">Must be at least 8 characters with uppercase, lowercase, and numbers</p>126 </div>127 128 <div>129 <label for="confirmPassword" class="block text-sm font-medium text-gray-700 mb-2">Confirm Password</label>130 <input type="password" id="confirmPassword" name="confirmPassword" required 131 class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-transparent transition duration-200"132 placeholder="Confirm your password">133 </div>134 135 <div class="flex items-center">136 <input type="checkbox" id="terms" name="terms" required 137 class="h-4 w-4 text-primary-600 focus:ring-primary-500 border-gray-300 rounded">138 <label for="terms" class="ml-2 block text-sm text-gray-700">139 I agree to the <a href="#" class="text-primary-600 hover:text-primary-500">Terms of Service</a> and 140 <a href="#" class="text-primary-600 hover:text-primary-500">Privacy Policy</a>141 </label>142 </div>143 144 <div class="flex items-center">145 <input type="checkbox" id="newsletter" name="newsletter" 146 class="h-4 w-4 text-primary-600 focus:ring-primary-500 border-gray-300 rounded">147 <label for="newsletter" class="ml148</body>149</html>