Spaces:
Sleeping
Sleeping
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>GigSync AI | Join the Future of Freelancing</title> | |
| <link rel="preconnect" href="https://fonts.googleapis.com"> | |
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> | |
| <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@600;800&family=Plus+Jakarta+Sans:wght@400;600;700&display=swap" rel="stylesheet"> | |
| <script src="https://unpkg.com/lucide@latest"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/@supabase/supabase-js@2"></script> | |
| <link rel="stylesheet" href="style.css"> | |
| <style> | |
| .auth-container { | |
| min-height: 100vh; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| padding: 20px; | |
| } | |
| .auth-card { | |
| width: 100%; | |
| max-width: 450px; | |
| padding: 40px; | |
| background: rgba(255, 255, 255, 0.03); | |
| backdrop-filter: blur(20px); | |
| border: 1px solid rgba(255, 255, 255, 0.1); | |
| border-radius: 32px; | |
| box-shadow: 0 40px 100px rgba(0,0,0,0.5); | |
| } | |
| .auth-header { | |
| text-align: center; | |
| margin-bottom: 40px; | |
| } | |
| .auth-logo { | |
| width: 60px; | |
| height: 60px; | |
| background: var(--accent); | |
| border-radius: 18px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| margin: 0 auto 20px; | |
| } | |
| .auth-tabs { | |
| display: flex; | |
| background: rgba(0,0,0,0.2); | |
| padding: 4px; | |
| border-radius: 12px; | |
| margin-bottom: 30px; | |
| } | |
| .auth-tab { | |
| flex: 1; | |
| padding: 12px; | |
| text-align: center; | |
| cursor: pointer; | |
| border-radius: 8px; | |
| font-size: 0.9rem; | |
| font-weight: 700; | |
| transition: 0.3s; | |
| } | |
| .auth-tab.active { | |
| background: var(--bg-accent); | |
| color: var(--accent); | |
| } | |
| .form-group label { | |
| font-size: 0.8rem; | |
| color: var(--text-dim); | |
| margin-bottom: 8px; | |
| display: block; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="bg-glow"></div> | |
| <div class="auth-container"> | |
| <div class="auth-card"> | |
| <div class="auth-header"> | |
| <div class="auth-logo"> | |
| <i data-lucide="zap" style="color: white; fill: white; width: 30px; height: 30px;"></i> | |
| </div> | |
| <h2 style="font-family: 'Outfit'; font-size: 1.8rem; font-weight: 800; margin-bottom: 8px;">Welcome to GigSync</h2> | |
| <p style="color: var(--text-dim); font-size: 0.9rem;">Automate your freelance empire today.</p> | |
| </div> | |
| <div class="auth-tabs"> | |
| <div id="login-tab" class="auth-tab active" onclick="toggleAuth('login')">Login</div> | |
| <div id="signup-tab" class="auth-tab" onclick="toggleAuth('signup')">Sign Up</div> | |
| </div> | |
| <form id="auth-form" class="gig-form"> | |
| <div class="form-group"> | |
| <label>Email Address</label> | |
| <input type="email" id="auth-email" placeholder="name@company.com" required> | |
| </div> | |
| <div class="form-group"> | |
| <label>Password</label> | |
| <input type="password" id="auth-password" placeholder="••••••••" required> | |
| </div> | |
| <div class="form-group" id="confirm-password-group" style="display: none;"> | |
| <label>Confirm Password</label> | |
| <input type="password" id="auth-confirm-password" placeholder="••••••••"> | |
| </div> | |
| <button type="submit" class="btn-primary" style="width: 100%; margin-top: 10px; height: 55px; font-size: 1rem;"> | |
| <span id="auth-btn-text">Log In</span> | |
| <i data-lucide="arrow-right" style="width: 18px;"></i> | |
| </button> | |
| </form> | |
| <div id="auth-message" style="margin-top: 20px; text-align: center; font-size: 0.85rem; display: none;"></div> | |
| </div> | |
| </div> | |
| <script> | |
| // 1. Tab switching logic (Move to TOP to ensure it works immediately) | |
| let authMode = 'login'; | |
| function toggleAuth(mode) { | |
| console.log("Switching to:", mode); | |
| authMode = mode; | |
| document.getElementById('login-tab').classList.toggle('active', mode === 'login'); | |
| document.getElementById('signup-tab').classList.toggle('active', mode === 'signup'); | |
| document.getElementById('auth-btn-text').innerText = mode === 'login' ? 'Log In' : 'Sign Up'; | |
| document.getElementById('confirm-password-group').style.display = mode === 'login' ? 'none' : 'block'; | |
| document.getElementById('auth-confirm-password').required = mode === 'signup'; | |
| } | |
| // 2. Safe Supabase Initialization | |
| const supabaseUrl = 'https://qhvvaynbdcphukkejukv.supabase.co'; | |
| const supabaseKey = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6InFodnZheW5iZGNwaHVra2VqdWt2Iiwicm9sZSI6ImFub24iLCJpYXQiOjE3Nzg1NDgwNzYsImV4cCI6MjA5NDEyNDA3Nn0.08COQamisZvKs_TS2I8fXmyfJhLS_BIrrknoYV0_1vY'; | |
| let supabase; | |
| try { | |
| // Check all possible global names provided by the CDN | |
| const lib = window.supabase || window.supabasejs; | |
| if (lib) { | |
| supabase = lib.createClient(supabaseUrl, supabaseKey); | |
| console.log("Supabase initialized successfully."); | |
| } else { | |
| console.error("Supabase library not found in window object."); | |
| } | |
| } catch(e) { | |
| console.error("Critical Auth Error:", e); | |
| } | |
| </script> | |
| <script src="auth.js"></script> | |
| <script>lucide.createIcons();</script> | |
| </body> | |
| </html> | |