80 lines
2.7 KiB
HTML
80 lines
2.7 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="signupForm" class="login-form" action="/api/v1/auth/register?redirect=/login" method="post">
|
|
|
|
<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="displayName">Display Name (how it will appear to others)</label>
|
|
<input type="text" id="displayName" name="displayName" placeholder="Enter your display name" 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>
|
|
|
|
<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" id="signup-button" class="login-button">Sign Up</button>
|
|
</form>
|
|
|
|
<p class="signup-text">
|
|
Have an account?
|
|
<a href="#">Log In</a>
|
|
</p>
|
|
</section>
|
|
</main>
|
|
|
|
<!-- Script for signup logic and form validation -->
|
|
<script type="module" src="js/signup.js"></script>
|
|
</body>
|
|
|
|
</html> |