| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>VPN Service - Authentication</title> |
| <link rel="stylesheet" href="auth.css"> |
| <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet"> |
| </head> |
| <body> |
| <div class="auth-container"> |
| |
| <div class="background-animation"> |
| <div class="floating-shapes"> |
| <div class="shape shape-1"></div> |
| <div class="shape shape-2"></div> |
| <div class="shape shape-3"></div> |
| <div class="shape shape-4"></div> |
| <div class="shape shape-5"></div> |
| </div> |
| </div> |
|
|
| |
| <header class="auth-header"> |
| <div class="logo"> |
| <i class="fas fa-shield-alt"></i> |
| <h1>SecureVPN</h1> |
| </div> |
| <nav class="auth-nav"> |
| <button class="nav-btn" id="loginNavBtn" onclick="showLogin()">Login</button> |
| <button class="nav-btn" id="registerNavBtn" onclick="showRegister()">Register</button> |
| </nav> |
| </header> |
|
|
| |
| <main class="auth-main"> |
| |
| <div class="auth-form-container" id="loginForm"> |
| <div class="auth-form"> |
| <div class="form-header"> |
| <h2>Welcome Back</h2> |
| <p>Sign in to your VPN account</p> |
| </div> |
|
|
| <form id="loginFormElement" onsubmit="handleLogin(event)"> |
| <div class="form-group"> |
| <label for="loginField">Username or Email</label> |
| <div class="input-group"> |
| <i class="fas fa-user"></i> |
| <input type="text" id="loginField" name="login" required |
| placeholder="Enter username or email"> |
| </div> |
| </div> |
|
|
| <div class="form-group"> |
| <label for="loginPassword">Password</label> |
| <div class="input-group"> |
| <i class="fas fa-lock"></i> |
| <input type="password" id="loginPassword" name="password" required |
| placeholder="Enter password"> |
| <button type="button" class="password-toggle" onclick="togglePassword('loginPassword')"> |
| <i class="fas fa-eye"></i> |
| </button> |
| </div> |
| </div> |
|
|
| <div class="form-options"> |
| <label class="checkbox-container"> |
| <input type="checkbox" id="rememberMe"> |
| <span class="checkmark"></span> |
| Remember me |
| </label> |
| <a href="#" class="forgot-password" onclick="showForgotPassword()">Forgot password?</a> |
| </div> |
|
|
| <button type="submit" class="auth-btn primary" id="loginBtn"> |
| <span class="btn-text">Sign In</span> |
| <span class="btn-loader" style="display: none;"> |
| <i class="fas fa-spinner fa-spin"></i> |
| </span> |
| </button> |
| </form> |
|
|
| <div class="form-footer"> |
| <p>Don't have an account? <a href="#" onclick="showRegister()">Sign up</a></p> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="auth-form-container" id="registerForm" style="display: none;"> |
| <div class="auth-form"> |
| <div class="form-header"> |
| <h2>Create Account</h2> |
| <p>Join our secure VPN service</p> |
| </div> |
|
|
| <form id="registerFormElement" onsubmit="handleRegister(event)"> |
| <div class="form-group"> |
| <label for="registerUsername">Username</label> |
| <div class="input-group"> |
| <i class="fas fa-user"></i> |
| <input type="text" id="registerUsername" name="username" required |
| placeholder="Choose a username" minlength="3" maxlength="80"> |
| </div> |
| <div class="field-hint">3-80 characters, letters, numbers, hyphens, and underscores only</div> |
| </div> |
|
|
| <div class="form-group"> |
| <label for="registerEmail">Email</label> |
| <div class="input-group"> |
| <i class="fas fa-envelope"></i> |
| <input type="email" id="registerEmail" name="email" required |
| placeholder="Enter your email"> |
| </div> |
| </div> |
|
|
| <div class="form-group"> |
| <label for="registerPassword">Password</label> |
| <div class="input-group"> |
| <i class="fas fa-lock"></i> |
| <input type="password" id="registerPassword" name="password" required |
| placeholder="Create a strong password" minlength="8"> |
| <button type="button" class="password-toggle" onclick="togglePassword('registerPassword')"> |
| <i class="fas fa-eye"></i> |
| </button> |
| </div> |
| <div class="password-strength" id="passwordStrength"> |
| <div class="strength-bar"> |
| <div class="strength-fill"></div> |
| </div> |
| <div class="strength-text">Password strength</div> |
| </div> |
| </div> |
|
|
| <div class="form-group"> |
| <label for="confirmPassword">Confirm Password</label> |
| <div class="input-group"> |
| <i class="fas fa-lock"></i> |
| <input type="password" id="confirmPassword" name="confirmPassword" required |
| placeholder="Confirm your password"> |
| <button type="button" class="password-toggle" onclick="togglePassword('confirmPassword')"> |
| <i class="fas fa-eye"></i> |
| </button> |
| </div> |
| </div> |
|
|
| <div class="form-group"> |
| <label for="subscriptionType">Subscription Plan</label> |
| <div class="subscription-options"> |
| <label class="radio-option"> |
| <input type="radio" name="subscriptionType" value="free" checked> |
| <span class="radio-custom"></span> |
| <div class="option-content"> |
| <strong>Free</strong> |
| <span>1 device, 10 Mbps</span> |
| </div> |
| </label> |
| <label class="radio-option"> |
| <input type="radio" name="subscriptionType" value="premium"> |
| <span class="radio-custom"></span> |
| <div class="option-content"> |
| <strong>Premium</strong> |
| <span>3 devices, 50 Mbps</span> |
| </div> |
| </label> |
| <label class="radio-option"> |
| <input type="radio" name="subscriptionType" value="enterprise"> |
| <span class="radio-custom"></span> |
| <div class="option-content"> |
| <strong>Enterprise</strong> |
| <span>10 devices, 100 Mbps</span> |
| </div> |
| </label> |
| </div> |
| </div> |
|
|
| <div class="form-group"> |
| <label class="checkbox-container"> |
| <input type="checkbox" id="agreeTerms" required> |
| <span class="checkmark"></span> |
| I agree to the <a href="#" target="_blank">Terms of Service</a> and <a href="#" target="_blank">Privacy Policy</a> |
| </label> |
| </div> |
|
|
| <button type="submit" class="auth-btn primary" id="registerBtn"> |
| <span class="btn-text">Create Account</span> |
| <span class="btn-loader" style="display: none;"> |
| <i class="fas fa-spinner fa-spin"></i> |
| </span> |
| </button> |
| </form> |
|
|
| <div class="form-footer"> |
| <p>Already have an account? <a href="#" onclick="showLogin()">Sign in</a></p> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="auth-form-container" id="forgotPasswordForm" style="display: none;"> |
| <div class="auth-form"> |
| <div class="form-header"> |
| <h2>Reset Password</h2> |
| <p>Enter your email to receive reset instructions</p> |
| </div> |
|
|
| <form id="forgotPasswordFormElement" onsubmit="handleForgotPassword(event)"> |
| <div class="form-group"> |
| <label for="forgotEmail">Email</label> |
| <div class="input-group"> |
| <i class="fas fa-envelope"></i> |
| <input type="email" id="forgotEmail" name="email" required |
| placeholder="Enter your email"> |
| </div> |
| </div> |
|
|
| <button type="submit" class="auth-btn primary" id="forgotPasswordBtn"> |
| <span class="btn-text">Send Reset Link</span> |
| <span class="btn-loader" style="display: none;"> |
| <i class="fas fa-spinner fa-spin"></i> |
| </span> |
| </button> |
| </form> |
|
|
| <div class="form-footer"> |
| <p><a href="#" onclick="showLogin()">Back to login</a></p> |
| </div> |
| </div> |
| </div> |
| </main> |
|
|
| |
| <div class="alert-container" id="alertContainer"></div> |
|
|
| |
| <section class="features-section"> |
| <div class="features-container"> |
| <h3>Why Choose SecureVPN?</h3> |
| <div class="features-grid"> |
| <div class="feature-item"> |
| <i class="fas fa-shield-alt"></i> |
| <h4>Military-Grade Encryption</h4> |
| <p>AES-256 encryption protects your data</p> |
| </div> |
| <div class="feature-item"> |
| <i class="fas fa-globe"></i> |
| <h4>Global Servers</h4> |
| <p>Connect from anywhere in the world</p> |
| </div> |
| <div class="feature-item"> |
| <i class="fas fa-bolt"></i> |
| <h4>Lightning Fast</h4> |
| <p>Optimized for speed and performance</p> |
| </div> |
| <div class="feature-item"> |
| <i class="fas fa-user-secret"></i> |
| <h4>No Logs Policy</h4> |
| <p>Your privacy is our priority</p> |
| </div> |
| </div> |
| </div> |
| </section> |
| </div> |
|
|
| <script src="auth.js"></script> |
| </body> |
| </html> |
|
|
|
|
