|
|
<!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> |
|
|
|
|
|
|
