Current directory: /home/klas4s23/domains/585455.klas4s23.mid-ica.nl/public_html/Gastenboek/uploads
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Login - English Vocabulary Learning</title>
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/auth.css">
<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=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
</head>
<body>
<div class="auth-container">
<div class="auth-card">
<div class="auth-header">
<h1>🎓 English Vocabulary</h1>
<p>Sign in to track your progress</p>
</div>
<!-- Login Form -->
<form id="login-form" class="auth-form">
<h2>Login</h2>
<div class="form-group">
<label for="login-username">Username or Email</label>
<input type="text" id="login-username" name="username" required autocomplete="username">
</div>
<div class="form-group">
<label for="login-password">Password</label>
<input type="password" id="login-password" name="password" required autocomplete="current-password">
</div>
<div id="login-error" class="error-message hidden"></div>
<button type="submit" class="btn btn-primary btn-full">Login</button>
<p class="auth-switch">
Don't have an account? <a href="#" id="show-register">Register here</a>
</p>
<p class="demo-info">
<strong>Demo Account:</strong><br>
Username: <code>demo</code><br>
Password: <code>demo123</code>
</p>
</form>
<!-- Register Form -->
<form id="register-form" class="auth-form hidden">
<h2>Create Account</h2>
<div class="form-group">
<label for="register-username">Username</label>
<input type="text" id="register-username" name="username" required autocomplete="username" minlength="3">
<small>At least 3 characters</small>
</div>
<div class="form-group">
<label for="register-email">Email</label>
<input type="email" id="register-email" name="email" required autocomplete="email">
</div>
<div class="form-group">
<label for="register-fullname">Full Name (optional)</label>
<input type="text" id="register-fullname" name="full_name" autocomplete="name">
</div>
<div class="form-group">
<label for="register-password">Password</label>
<input type="password" id="register-password" name="password" required autocomplete="new-password" minlength="6">
<small>At least 6 characters</small>
</div>
<div class="form-group">
<label for="register-confirm">Confirm Password</label>
<input type="password" id="register-confirm" name="confirm_password" required autocomplete="new-password">
</div>
<div id="register-error" class="error-message hidden"></div>
<div id="register-success" class="success-message hidden"></div>
<button type="submit" class="btn btn-primary btn-full">Create Account</button>
<p class="auth-switch">
Already have an account? <a href="#" id="show-login">Login here</a>
</p>
</form>
</div>
<!-- Guest Access -->
<div class="guest-access">
<p>Or continue as guest (progress won't be saved)</p>
<a href="index.html" class="btn btn-secondary">Continue as Guest</a>
</div>
</div>
<script src="js/auth.js"></script>
</body>
</html>