| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Sign Up - VibeCodingLabs</title> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <script src="https://unpkg.com/lucide@latest"></script> |
| <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet"> |
| |
| <style> |
| body { |
| font-family: 'Inter', sans-serif; |
| background: linear-gradient(135deg, #f0f9ff 0%, #faf5ff 100%); |
| } |
| |
| .glass-card { |
| background: rgba(255, 255, 255, 0.9); |
| backdrop-filter: blur(20px); |
| border: 1px solid rgba(255, 255, 255, 0.5); |
| box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1); |
| } |
| |
| .btn-gradient { |
| background: linear-gradient(135deg, #0ea5e9 0%, #8b5cf6 100%); |
| transition: all 0.3s ease; |
| } |
| |
| .btn-gradient:hover { |
| transform: translateY(-2px); |
| box-shadow: 0 10px 30px rgba(14, 165, 233, 0.3); |
| } |
| |
| .oauth-btn { |
| transition: all 0.3s ease; |
| border: 2px solid #e2e8f0; |
| } |
| |
| .oauth-btn:hover { |
| border-color: #0ea5e9; |
| background: #f0f9ff; |
| transform: translateY(-2px); |
| } |
| |
| .input-field { |
| transition: all 0.3s ease; |
| border: 2px solid #e2e8f0; |
| } |
| |
| .input-field:focus { |
| border-color: #0ea5e9; |
| box-shadow: 0 0 0 4px rgba(14, 165, 233, 0.1); |
| } |
| |
| .tab-active { |
| color: #0ea5e9; |
| border-bottom: 2px solid #0ea5e9; |
| } |
| |
| .oauth-popup { |
| position: fixed; |
| top: 0; |
| left: 0; |
| right: 0; |
| bottom: 0; |
| background: rgba(0, 0, 0, 0.5); |
| display: none; |
| align-items: center; |
| justify-content: center; |
| z-index: 100; |
| backdrop-filter: blur(5px); |
| } |
| |
| .oauth-popup.active { |
| display: flex; |
| } |
| |
| .oauth-window { |
| background: white; |
| border-radius: 16px; |
| padding: 32px; |
| max-width: 400px; |
| width: 90%; |
| text-align: center; |
| animation: slideUp 0.3s ease; |
| } |
| |
| @keyframes slideUp { |
| from { |
| transform: translateY(20px); |
| opacity: 0; |
| } |
| to { |
| transform: translateY(0); |
| opacity: 1; |
| } |
| } |
| |
| .spinner { |
| border: 3px solid #f3f4f6; |
| border-top: 3px solid #0ea5e9; |
| border-radius: 50%; |
| width: 40px; |
| height: 40px; |
| animation: spin 1s linear infinite; |
| margin: 0 auto 16px; |
| } |
| |
| @keyframes spin { |
| 0% { transform: rotate(0deg); } |
| 100% { transform: rotate(360deg); } |
| } |
| </style> |
| </head> |
| <body class="min-h-screen flex items-center justify-center p-4"> |
|
|
| |
| <div id="oauth-popup" class="oauth-popup"> |
| <div class="oauth-window"> |
| <div class="spinner"></div> |
| <h3 class="text-lg font-semibold mb-2">Connecting to <span id="oauth-provider">Google</span>...</h3> |
| <p class="text-slate-600 text-sm mb-4">Please complete the authentication in the popup window.</p> |
| <button onclick="closeOAuthPopup()" class="text-slate-500 hover:text-slate-700 text-sm underline">Cancel</button> |
| </div> |
| </div> |
|
|
| <div class="w-full max-w-md"> |
| |
| <div class="text-center mb-8"> |
| <a href="index.html" class="inline-flex items-center space-x-2"> |
| <div class="w-10 h-10 btn-gradient rounded-xl flex items-center justify-center"> |
| <i data-lucide="zap" class="w-6 h-6 text-white"></i> |
| </div> |
| <span class="text-2xl font-bold bg-gradient-to-r from-sky-500 to-violet-500 bg-clip-text text-transparent">VibeCodingLabs</span> |
| </a> |
| </div> |
|
|
| |
| <div class="glass-card rounded-3xl p-8"> |
| |
| <div class="flex mb-8 border-b border-slate-200"> |
| <button id="tab-signup" onclick="switchTab('signup')" class="flex-1 pb-3 font-semibold tab-active transition-colors">Sign Up</button> |
| <button id="tab-signin" onclick="switchTab('signin')" class="flex-1 pb-3 font-semibold text-slate-500 hover:text-slate-700 transition-colors">Sign In</button> |
| </div> |
|
|
| |
| <div id="form-signup"> |
| <h2 class="text-2xl font-bold mb-2">Create your account</h2> |
| <p class="text-slate-600 mb-6">Start your 14-day free trial today</p> |
|
|
| |
| <div class="space-y-3 mb-6"> |
| <button onclick="initiateOAuth('google')" class="oauth-btn w-full py-3 px-4 rounded-xl flex items-center justify-center space-x-3 bg-white"> |
| <svg class="w-5 h-5" viewBox="0 0 24 24"> |
| <path fill="#4285F4" d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"/> |
| <path fill="#34A853" d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"/> |
| <path fill="#FBBC05" d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"/> |
| <path fill="#EA4335" d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"/> |
| </svg> |
| <span class="font-medium text-slate-700">Continue with Google</span> |
| </button> |
| |
| <button onclick="initiateOAuth('github')" class="oauth-btn w-full py-3 px-4 rounded-xl flex items-center justify-center space-x-3 bg-white"> |
| <svg class="w-5 h-5" fill="#181717" viewBox="0 0 24 24"> |
| <path fill-rule="evenodd" clip-rule="evenodd" d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z"/> |
| </svg> |
| <span class="font-medium text-slate-700">Continue with GitHub</span> |
| </button> |
| </div> |
|
|
| <div class="relative mb-6"> |
| <div class="absolute inset-0 flex items-center"> |
| <div class="w-full border-t border-slate-200"></div> |
| </div> |
| <div class="relative flex justify-center text-sm"> |
| <span class="px-2 bg-white text-slate-500">Or continue with email</span> |
| </div> |
| </div> |
|
|
| <form onsubmit="handleEmailSignup(event)" class="space-y-4"> |
| <div> |
| <label class="block text-sm font-medium text-slate-700 mb-1">Work Email</label> |
| <input type="email" required class="input-field w-full px-4 py-3 rounded-xl focus:outline-none" placeholder="you@company.com"> |
| </div> |
| <div> |
| <label class="block text-sm font-medium text-slate-700 mb-1">Password</label> |
| <input type="password" required class="input-field w-full px-4 py-3 rounded-xl focus:outline-none" placeholder="••••••••"> |
| </div> |
| <div> |
| <label class="block text-sm font-medium text-slate-700 mb-1">Company Name</label> |
| <input type="text" required class="input-field w-full px-4 py-3 rounded-xl focus:outline-none" placeholder="Acme Inc"> |
| </div> |
| <button type="submit" class="btn-gradient w-full py-3 rounded-xl text-white font-semibold shadow-lg shadow-sky-500/25"> |
| Create Account |
| </button> |
| </form> |
|
|
| <p class="mt-4 text-center text-sm text-slate-600"> |
| Already have an account? |
| <button onclick="switchTab('signin')" class="text-sky-600 hover:text-sky-700 font-medium">Sign in</button> |
| </p> |
| </div> |
|
|
| |
| <div id="form-signin" class="hidden"> |
| <h2 class="text-2xl font-bold mb-2">Welcome back</h2> |
| <p class="text-slate-600 mb-6">Sign in to your VibeCodingLabs account</p> |
|
|
| |
| <div class="space-y-3 mb-6"> |
| <button onclick="initiateOAuth('google')" class="oauth-btn w-full py-3 px-4 rounded-xl flex items-center justify-center space-x-3 bg-white"> |
| <svg class="w-5 h-5" viewBox="0 0 24 24"> |
| <path fill="#4285F4" d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"/> |
| <path fill="#34A853" d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"/> |
| <path fill="#FBBC05" d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"/> |
| <path fill="#EA4335" d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"/> |
| </svg> |
| <span class="font-medium text-slate-700">Continue with Google</span> |
| </button> |
| |
| <button onclick="initiateOAuth('github')" class="oauth-btn w-full py-3 px-4 rounded-xl flex items-center justify-center space-x-3 bg-white"> |
| <svg class="w-5 h-5" fill="#181717" viewBox="0 0 24 24"> |
| <path fill-rule="evenodd" clip-rule="evenodd" d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z"/> |
| </svg> |
| <span class="font-medium text-slate-700">Continue with GitHub</span> |
| </button> |
| </div> |
|
|
| <div class="relative mb-6"> |
| <div class="absolute inset-0 flex items-center"> |
| <div class="w-full border-t border-slate-200"></div> |
| </div> |
| <div class="relative flex justify-center text-sm"> |
| <span class="px-2 bg-white text-slate-500">Or continue with email</span> |
| </div> |
| </div> |
|
|
| <form onsubmit="handleEmailSignin(event)" class="space-y-4"> |
| <div> |
| <label class="block text-sm font-medium text-slate-700 mb-1">Email</label> |
| <input type="email" required class="input-field w-full px-4 py-3 rounded-xl focus:outline-none" placeholder="you@company.com"> |
| </div> |
| <div> |
| <label class="block text-sm font-medium text-slate-700 mb-1">Password</label> |
| <input type="password" required class="input-field w-full px-4 py-3 rounded-xl focus:outline-none" placeholder="••••••••"> |
| </div> |
| <div class="flex items-center justify-between text-sm"> |
| <label class="flex items-center"> |
| <input type="checkbox" class="rounded border-slate-300 text-sky-600 focus:ring-sky-500"> |
| <span class="ml-2 text-slate-600">Remember me</span> |
| </label> |
| <a href="#" class="text-sky-600 hover:text-sky-700 font-medium">Forgot password?</a> |
| </div> |
| <button type="submit" class="btn-gradient w-full py-3 rounded-xl text-white font-semibold shadow-lg shadow-sky-500/25"> |
| Sign In |
| </button> |
| </form> |
|
|
| <p class="mt-4 text-center text-sm text-slate-600"> |
| Don't have an account? |
| <button onclick="switchTab('signup')" class="text-sky-600 hover:text-sky-700 font-medium">Sign up</button> |
| </p> |
| </div> |
| </div> |
|
|
| <p class="text-center mt-8 text-sm text-slate-600"> |
| By signing up, you agree to our |
| <a href="#" class="text-slate-900 hover:underline">Terms</a> and |
| <a href="#" class="text-slate-900 hover:underline">Privacy Policy</a> |
| </p> |
| </div> |
|
|
| <script> |
| lucide.createIcons(); |
| |
| |
| const urlParams = new URLSearchParams(window.location.search); |
| const initialMode = urlParams.get('mode'); |
| if (initialMode === 'signin') { |
| switchTab('signin'); |
| } |
| |
| function switchTab(tab) { |
| const signupForm = document.getElementById('form-signup'); |
| const signinForm = document.getElementById('form-signin'); |
| const signupTab = document.getElementById('tab-signup'); |
| const signinTab = document.getElementById('tab-signin'); |
| |
| if (tab === 'signup') { |
| signupForm.classList.remove('hidden'); |
| signinForm.classList.add('hidden'); |
| signupTab.classList.add('tab-active'); |
| signupTab.classList.remove('text-slate-500'); |
| signinTab.classList.remove('tab-active'); |
| signinTab.classList.add('text-slate-500'); |
| } else { |
| signupForm.classList.add('hidden'); |
| signinForm.classList.remove('hidden'); |
| signupTab.classList.remove('tab-active'); |
| signupTab.classList.add('text-slate-500'); |
| signinTab.classList.add('tab-active'); |
| signinTab.classList.remove('text-slate-500'); |
| } |
| } |
| |
| function initiateOAuth(provider) { |
| document.getElementById('oauth-provider').textContent = provider === 'google' ? 'Google' : 'GitHub'; |
| document.getElementById('oauth-popup').classList.add('active'); |
| |
| |
| setTimeout(() => { |
| closeOAuthPopup(); |
| |
| window.location.href = 'checkout.html?provider=' + provider + '&trial=14days'; |
| }, 2000); |
| } |
| |
| function closeOAuthPopup() { |
| document.getElementById('oauth-popup').classList.remove('active'); |
| } |
| |
| function handleEmailSignup(e) { |
| e.preventDefault(); |
| |
| window.location.href = 'checkout.html?provider=email&trial=14days'; |
| } |
| |
| function handleEmailSignin(e) { |
| e.preventDefault(); |
| |
| alert('Welcome back! Redirecting to dashboard...'); |
| } |
| </script> |
| </body> |
| </html> |
