79 lines
2.4 KiB
HTML
79 lines
2.4 KiB
HTML
<!-- OnlyPrompt - Login page:
|
|
- User authentication form with email/password
|
|
- Show/hide password toggle -->
|
|
|
|
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<!--Info about page but not visible-->
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<!-- For responsive design: adapts width for different devices -->
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<!-- Title shown in browser tab -->
|
|
<title>OnlyPrompt - Login</title>
|
|
|
|
<!-- CSS files for variables, base styles, and login page -->
|
|
<link rel="stylesheet" href="../css/variables.css">
|
|
<link rel="stylesheet" href="../css/base.css">
|
|
<link rel="stylesheet" href="../css/login.css">
|
|
</head>
|
|
|
|
<body>
|
|
<!-- Main container for the login page (CSS layout) -->
|
|
<main class="login-page">
|
|
<!-- White login card -->
|
|
<section class="login-card">
|
|
<!-- Logo container -->
|
|
<div class="login-logo-wrapper">
|
|
<img src="../images/logo_full.png" alt="OnlyPrompt Logo" class="login-logo">
|
|
</div>
|
|
|
|
<h1 class="login-title">Sign In</h1>
|
|
<p class="login-subtitle">Welcome back! Enter your details below.</p>
|
|
|
|
<!-- Login form, id is used for JavaScript validation -->
|
|
<form id="loginForm" class="login-form">
|
|
|
|
<div class="form-group">
|
|
<label for="email">Email Address</label>
|
|
<input
|
|
type="email"
|
|
id="email"
|
|
name="email"
|
|
placeholder="yourname@email.com"
|
|
required
|
|
>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="password">Password</label>
|
|
<!-- Password field with button to show/hide password -->
|
|
<div class="password-wrapper">
|
|
<input
|
|
type="password"
|
|
id="password"
|
|
name="password"
|
|
placeholder="Enter your password"
|
|
required
|
|
>
|
|
<button type="button" id="togglePassword" class="toggle-password">
|
|
Show <!-- Click to show/hide password -->
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<button type="submit" class="login-button">Log In</button>
|
|
</form>
|
|
|
|
<p class="signup-text">
|
|
Don't have an account?
|
|
<a href="#">Sign Up</a>
|
|
</p>
|
|
</section>
|
|
</main>
|
|
|
|
<!-- Script for login logic and form validation -->
|
|
<script src="../js/login.js"></script>
|
|
</body>
|
|
</html> |