| <!DOCTYPE html>
|
| <html lang="en">
|
| <head>
|
| <meta charset="UTF-8">
|
| <meta name="viewport" content="width=device-width, initial-scale=1.0">
|
| <title>Sign Up - IntervuAI Pro</title>
|
| <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
|
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
| <link rel="stylesheet" href="assets/css/premium.css">
|
| <link rel="stylesheet" href="assets/css/auth.css">
|
| </head>
|
| <body>
|
| <div class="premium-bg">
|
| <div class="gradient-mesh"></div>
|
| <div class="neural-network">
|
| <canvas id="neuralCanvas"></canvas>
|
| </div>
|
| </div>
|
|
|
| <div class="auth-container">
|
| <div class="auth-card">
|
| <div class="auth-header">
|
| <div class="brand-logo">
|
| <div class="brand-icon">
|
| <i class="fas fa-brain"></i>
|
| </div>
|
| <span class="brand-text">IntervuAI<span class="brand-pro">Pro</span></span>
|
| </div>
|
| <h1 class="auth-title">Create Account</h1>
|
| <p class="auth-subtitle">Start your AI-powered interview journey</p>
|
| </div>
|
|
|
| <div class="alert alert-error hidden" id="errorAlert">
|
| <i class="fas fa-exclamation-circle"></i>
|
| <span id="errorMessage"></span>
|
| </div>
|
|
|
| <form id="signupForm" class="auth-form">
|
| <div class="form-group">
|
| <label class="form-label">
|
| <i class="fas fa-user"></i>
|
| <span>Full Name</span>
|
| </label>
|
| <input
|
| type="text"
|
| name="name"
|
| id="nameInput"
|
| class="form-input"
|
| placeholder="John Doe"
|
| required
|
| >
|
| </div>
|
|
|
| <div class="form-group">
|
| <label class="form-label">
|
| <i class="fas fa-envelope"></i>
|
| <span>Email Address</span>
|
| </label>
|
| <input
|
| type="email"
|
| name="email"
|
| id="emailInput"
|
| class="form-input"
|
| placeholder="you@example.com"
|
| required
|
| >
|
| </div>
|
|
|
| <div class="form-group">
|
| <label class="form-label">
|
| <i class="fas fa-lock"></i>
|
| <span>Password</span>
|
| </label>
|
| <input
|
| type="password"
|
| name="password"
|
| id="passwordInput"
|
| class="form-input"
|
| placeholder="••••••••"
|
| required
|
| >
|
| </div>
|
|
|
| <div class="form-group">
|
| <label class="form-label">
|
| <i class="fas fa-lock"></i>
|
| <span>Confirm Password</span>
|
| </label>
|
| <input
|
| type="password"
|
| name="confirmPassword"
|
| id="confirmPasswordInput"
|
| class="form-input"
|
| placeholder="••••••••"
|
| required
|
| >
|
| </div>
|
|
|
| <button type="submit" class="btn-primary btn-block">
|
| <span>Create Account</span>
|
| <i class="fas fa-arrow-right"></i>
|
| <div class="btn-glow"></div>
|
| </button>
|
| </form>
|
|
|
| <div class="auth-divider">
|
| <span>or continue with</span>
|
| </div>
|
|
|
| <div class="social-login">
|
| <button class="btn-social" onclick="socialSignup('google')">
|
| <i class="fab fa-google"></i>
|
| </button>
|
| <button class="btn-social" onclick="socialSignup('github')">
|
| <i class="fab fa-github"></i>
|
| </button>
|
| <button class="btn-social" onclick="socialSignup('linkedin')">
|
| <i class="fab fa-linkedin"></i>
|
| </button>
|
| </div>
|
|
|
| <div class="auth-footer">
|
| <p>Already have an account? <a href="login.html" class="link-primary">Sign in</a></p>
|
| </div>
|
| </div>
|
|
|
| <div class="auth-features">
|
| <div class="feature-item">
|
| <div class="feature-icon">
|
| <i class="fas fa-shield-alt"></i>
|
| </div>
|
| <h3>Enterprise Security</h3>
|
| <p>Bank-level encryption and data protection</p>
|
| </div>
|
| <div class="feature-item">
|
| <div class="feature-icon">
|
| <i class="fas fa-bolt"></i>
|
| </div>
|
| <h3>Lightning Fast</h3>
|
| <p>AI-powered analysis in seconds</p>
|
| </div>
|
| <div class="feature-item">
|
| <div class="feature-icon">
|
| <i class="fas fa-chart-line"></i>
|
| </div>
|
| <h3>Advanced Analytics</h3>
|
| <p>Comprehensive insights and reports</p>
|
| </div>
|
| </div>
|
| </div>
|
|
|
| <script src="assets/js/neural-bg.js"></script>
|
| <script>
|
| document.getElementById('signupForm').addEventListener('submit', function(e) {
|
| e.preventDefault();
|
| const name = document.getElementById('nameInput').value;
|
| const email = document.getElementById('emailInput').value;
|
| const password = document.getElementById('passwordInput').value;
|
| const confirmPassword = document.getElementById('confirmPasswordInput').value;
|
|
|
| if (password !== confirmPassword) {
|
| document.getElementById('errorAlert').classList.remove('hidden');
|
| document.getElementById('errorMessage').textContent = 'Passwords do not match';
|
| return;
|
| }
|
|
|
| if (name && email && password) {
|
|
|
| sessionStorage.setItem('userName', name);
|
| sessionStorage.setItem('userEmail', email);
|
| sessionStorage.setItem('isLoggedIn', 'true');
|
|
|
|
|
| window.location.href = '/dashboard';
|
| } else {
|
| document.getElementById('errorAlert').classList.remove('hidden');
|
| document.getElementById('errorMessage').textContent = 'Please fill in all fields';
|
| }
|
| });
|
|
|
| function socialSignup(provider) {
|
| sessionStorage.setItem('userName', provider + '_user');
|
| sessionStorage.setItem('isLoggedIn', 'true');
|
| window.location.href = '/dashboard';
|
| }
|
| </script>
|
| </body>
|
| </html>
|
|
|
