108 lines
3.1 KiB
HTML
108 lines
3.1 KiB
HTML
<!-- OnlyPrompt - Signup page:
|
|
- Registration form with email, password, full name, username, and terms acceptance -->
|
|
|
|
<!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/signup.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 Up</h1>
|
|
<p class="login-subtitle">Create your account to get started.</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>
|
|
|
|
<div class="form-group">
|
|
<label for="email">Full Name</label>
|
|
<input
|
|
type="text"
|
|
id="fullName"
|
|
name="fullName"
|
|
placeholder="Enter your full name"
|
|
required
|
|
>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="email">Username</label>
|
|
<input
|
|
type="text"
|
|
id="username"
|
|
name="username"
|
|
placeholder="Enter your username"
|
|
required
|
|
>
|
|
</div>
|
|
|
|
<p class="signup-terms">
|
|
By signing up, you agree to our
|
|
<a href="#">Terms</a>,
|
|
<a href="#">Privacy Policy</a> and
|
|
<a href="#">Cookies Policy</a>.
|
|
</p>
|
|
|
|
|
|
<button type="submit" class="login-button">Sign Up</button>
|
|
</form>
|
|
|
|
<p class="signup-text">
|
|
Have an account?
|
|
<a href="#">Log In</a>
|
|
</p>
|
|
</section>
|
|
</main>
|
|
|
|
<!-- Script for login logic and form validation -->
|
|
<script src="../js/login.js"></script>
|
|
</body>
|
|
</html> |