Spaces:
Paused
Paused
| <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"> | |
| <!-- Background Animation --> | |
| <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 --> | |
| <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 Content --> | |
| <main class="auth-main"> | |
| <!-- Login Form --> | |
| <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> | |
| <!-- Register Form --> | |
| <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> | |
| <!-- Forgot Password Form --> | |
| <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> | |
| <!-- Alert Messages --> | |
| <div class="alert-container" id="alertContainer"></div> | |
| <!-- Features Section --> | |
| <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> | |