| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
|
|
| <meta |
| name="viewport" |
| content="width=device-width, initial-scale=1.0" |
| > |
|
|
| <meta |
| name="theme-color" |
| content="#050608" |
| > |
|
|
| <meta |
| name="description" |
| content="Create a Xenex Glass OS account." |
| > |
|
|
| <title>Create Account — Xenex Glass OS</title> |
|
|
| <link |
| rel="stylesheet" |
| href="./assets/CSS/login.css" |
| > |
| </head> |
|
|
| <body> |
| <main class="login-page"> |
| <div class="login-ambient" aria-hidden="true"></div> |
| <div class="login-ambient login-ambient--orange" aria-hidden="true"></div> |
| <div class="login-ambient login-ambient--red" aria-hidden="true"></div> |
|
|
| <section |
| class="login-card" |
| aria-labelledby="signup-title" |
| > |
| <div class="login-card__content"> |
|
|
| <header class="login-header"> |
| <div |
| class="login-brand" |
| aria-label="Xenex Glass OS" |
| > |
| <span |
| class="login-brand__mark" |
| aria-hidden="true" |
| ></span> |
|
|
| <span class="login-brand__name"> |
| Xenex |
| </span> |
| </div> |
|
|
| <h1 |
| class="login-title" |
| id="signup-title" |
| > |
| Create your account |
| </h1> |
|
|
| <p class="login-description"> |
| Create your Xenex Glass OS account to get started. |
| </p> |
| </header> |
|
|
| <form |
| class="login-form" |
| id="signup-form" |
| novalidate |
| > |
|
|
| <div class="login-field"> |
| <label |
| class="login-field__label" |
| for="signup-name" |
| > |
| Name |
| </label> |
|
|
| <input |
| class="login-field__input" |
| id="signup-name" |
| name="name" |
| type="text" |
| autocomplete="name" |
| placeholder="Your name" |
| required |
| > |
| </div> |
|
|
| <div class="login-field"> |
| <label |
| class="login-field__label" |
| for="signup-email" |
| > |
| Email |
| </label> |
|
|
| <input |
| class="login-field__input" |
| id="signup-email" |
| name="email" |
| type="email" |
| autocomplete="email" |
| inputmode="email" |
| placeholder="you@example.com" |
| required |
| > |
| </div> |
|
|
| <div class="login-field"> |
| <label |
| class="login-field__label" |
| for="signup-password" |
| > |
| Password |
| </label> |
|
|
| <div class="login-field__control"> |
| <input |
| class="login-field__input" |
| id="signup-password" |
| name="password" |
| type="password" |
| autocomplete="new-password" |
| placeholder="Create a password" |
| required |
| > |
|
|
| <button |
| class="login-field__toggle" |
| type="button" |
| data-password-toggle |
| aria-label="Show password" |
| aria-pressed="false" |
| aria-controls="signup-password" |
| > |
| Show |
| </button> |
| </div> |
| </div> |
|
|
| <div class="login-field"> |
| <label |
| class="login-field__label" |
| for="signup-confirm-password" |
| > |
| Confirm password |
| </label> |
|
|
| <div class="login-field__control"> |
| <input |
| class="login-field__input" |
| id="signup-confirm-password" |
| name="confirm_password" |
| type="password" |
| autocomplete="new-password" |
| placeholder="Confirm your password" |
| required |
| > |
|
|
| <button |
| class="login-field__toggle" |
| type="button" |
| data-password-toggle |
| aria-label="Show password" |
| aria-pressed="false" |
| aria-controls="signup-confirm-password" |
| > |
| Show |
| </button> |
| </div> |
| </div> |
|
|
| <div |
| class="login-status" |
| id="signup-status" |
| role="status" |
| aria-live="polite" |
| ></div> |
|
|
| <button |
| class="login-submit" |
| type="submit" |
| data-signup-submit |
| > |
| Create Account |
| </button> |
| </form> |
|
|
| <footer class="login-footer"> |
| <p class="login-footer__account"> |
| Already have an account? |
| <a |
| href="./login.html" |
| class="login-footer__link" |
| > |
| Sign in |
| </a> |
| </p> |
|
|
| <div class="login-footer__legal"> |
| <a |
| href="#" |
| class="login-footer__link" |
| > |
| Privacy |
| </a> |
|
|
| <span aria-hidden="true">·</span> |
|
|
| <a |
| href="#" |
| class="login-footer__link" |
| > |
| Terms |
| </a> |
| </div> |
| </footer> |
|
|
| </div> |
| </section> |
| </main> |
| </body> |
| </html> |
