| <!DOCTYPE html> |
| <html lang="en"> |
|
|
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Sign Up - DevNoms Chat App</title> |
| <link rel="stylesheet" href="./css/color.css"> |
| <link rel="stylesheet" href="./css/base.css"> |
| <link rel="stylesheet" href="./css/signup.css"> |
| <script src="./js/signup.js" defer></script> |
|
|
|
|
| </head> |
|
|
| <body> |
|
|
| <div class="main_box"> |
| <div class="signup-box"> |
| <div class="logo"> |
| <img src="./img/logo.png" alt="DevNoms Logo" /> |
| </div> |
| <h2>Create an Account</h2> |
| <form id="signup-form" action="/signup" method="POST"> |
| |
| <div class="form-group"> |
| <label for="name">Username</label> |
| <div class="input-group"> |
| <input type="text" name="name" id="name" placeholder="Enter your username" /> |
| </div> |
| <div class="error-message" id="name-error"></div> |
| </div> |
|
|
| |
| <div class="form-group"> |
| <label for="email">Email</label> |
| <div class="input-group"> |
| <input type="text" name="email" id="email" placeholder="Enter your email" /> |
| </div> |
| <div class="error-message" id="email-error"></div> |
| </div> |
|
|
| |
| <div class="form-group"> |
| <label for="password">Password</label> |
| <div class="input-group"> |
| <input type="password" name="password" id="password" placeholder="Enter your password" /> |
| <span id="toggle-password" class="eye-icon" onclick="togglePasswordVisibility('password')"> |
| <img src="./img/icon/icons8-eye-48.png" alt="Toggle Password Visibility" /> |
| </span> |
| </div> |
| <div class="error-message" id="password-error"></div> |
| </div> |
|
|
| |
| <div class="form-group"> |
| <label for="confirm-password">Confirm Password</label> |
| <div class="input-group"> |
| <input type="password" name="confirm-password" id="confirm-password" |
| placeholder="Confirm your password" /> |
| <span id="toggle-confirm-password" class="eye-icon" |
| onclick="togglePasswordVisibility('confirm-password')"> |
| <img src="./img/icon/icons8-eye-48.png" alt="Toggle Password Visibility" /> |
| </span> |
| </div> |
| <div class="error-message" id="confirm-password-error"></div> |
| </div> |
|
|
|
|
| |
| <div class="signup-btn"> |
| <button type="submit" id="signup-btn"> |
| Sign Up |
| </button> |
| </div> |
|
|
| |
| <div class="login-link"> |
| <p>Already have an account? <a href="/login">Login</a></p> |
| </div> |
| </form> |
| </div> |
| </div> |
|
|
|
|
|
|
| </body> |
|
|
| </html> |
