|
|
| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"> |
| <title>Xenex Glass OS — Sign In</title> |
| <link rel="stylesheet" href="./assets/CSS/login.css"> |
| </head> |
| <body class="xenex-body"> |
|
|
| <div class="xenex-light-field" aria-hidden="true"> |
| <div class="xenex-light xenex-light--blue"></div> |
| <div class="xenex-light xenex-light--orange"></div> |
| <div class="xenex-light xenex-light--red"></div> |
| </div> |
|
|
| <main class="login-screen"> |
| <section class="login-card" aria-labelledby="login-heading"> |
|
|
| <div class="login-brand"> |
| <span class="login-brand__mark" aria-hidden="true"></span> |
| <span class="login-brand__name">Xenex</span> |
| <span class="login-brand__suffix">Glass OS</span> |
| </div> |
|
|
| <h1 id="login-heading" class="login-heading">Welcome to Xenex OS</h1> |
| <p class="login-description">Sign in to enter your cloud workspace.</p> |
|
|
| <form class="login-form" novalidate> |
|
|
| <div class="login-field"> |
| <label for="email" class="login-field__label">Email</label> |
| <input |
| type="email" |
| id="email" |
| name="email" |
| class="login-field__input" |
| placeholder="Enter your email" |
| autocomplete="email" |
| required |
| > |
| </div> |
|
|
| <div class="login-field"> |
| <label for="password" class="login-field__label">Password</label> |
| <div class="login-field__control"> |
| <input |
| type="password" |
| id="password" |
| name="password" |
| class="login-field__input" |
| placeholder="Enter your password" |
| autocomplete="current-password" |
| required |
| > |
| <button |
| type="button" |
| class="login-field__toggle" |
| data-password-toggle |
| aria-label="Show password" |
| aria-pressed="false" |
| aria-controls="password" |
| > |
| <span class="login-field__toggle-text">Show</span> |
| </button> |
| </div> |
| </div> |
|
|
| <div class="login-form__meta"> |
| <a href="#" class="login-link login-link--forgot">Forgot password?</a> |
| </div> |
|
|
| <button type="submit" class="login-submit" data-login-submit> |
| Sign In |
| </button> |
|
|
| </form> |
|
|
| <p class="login-signup"> |
| New to Xenex? |
| <a href="#" class="login-link login-link--signup">Create an account</a> |
| </p> |
|
|
| </section> |
|
|
| <footer class="login-footer"> |
| <a href="#" class="login-link login-link--footer">Privacy</a> |
| <span class="login-footer__divider" aria-hidden="true"></span> |
| <a href="#" class="login-link login-link--footer">Terms</a> |
| </footer> |
| </main> |
|
|
| |
| </body> |
| </html> |
|
|
