login.html 2.3 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677
  1. <!doctype html>
  2. <html lang="zh-CN">
  3. <head>
  4. <meta charset="utf-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1">
  6. <title>登录 MailHub</title>
  7. <link rel="stylesheet" href="/login.css">
  8. </head>
  9. <body>
  10. <main class="login-shell">
  11. <section class="brand-pane">
  12. <div class="brand-mark">MH</div>
  13. <div class="brand-copy">
  14. <h1>MailHub</h1>
  15. <p>发信控制台</p>
  16. </div>
  17. <div class="signal-grid">
  18. <div>
  19. <span>SMTP</span>
  20. <strong>AUTH</strong>
  21. </div>
  22. <div>
  23. <span>DNS</span>
  24. <strong>API 自动配置</strong>
  25. </div>
  26. <div>
  27. <span>Auth</span>
  28. <strong>多用户隔离</strong>
  29. </div>
  30. </div>
  31. </section>
  32. <section class="login-card">
  33. <div class="login-heading">
  34. <span class="eyebrow" id="modeEyebrow">Sign in</span>
  35. <h2 id="modeTitle">登录控制台</h2>
  36. </div>
  37. <div class="auth-tabs">
  38. <button class="active" data-mode="login" type="button">登录</button>
  39. <button data-mode="register" type="button">注册</button>
  40. </div>
  41. <form id="loginForm" class="login-form">
  42. <label>
  43. 用户名或邮箱
  44. <input name="username" autocomplete="username" required autofocus>
  45. </label>
  46. <label>
  47. 密码
  48. <input name="password" type="password" autocomplete="current-password" required>
  49. </label>
  50. <button type="submit">登录</button>
  51. </form>
  52. <form id="registerForm" class="login-form hidden">
  53. <label>
  54. 用户名
  55. <input name="username" autocomplete="username" minlength="3" required>
  56. </label>
  57. <label>
  58. 邮箱
  59. <input name="email" type="email" autocomplete="email" required>
  60. </label>
  61. <label>
  62. 密码
  63. <input name="password" type="password" autocomplete="new-password" minlength="8" required>
  64. </label>
  65. <button type="submit">注册并进入</button>
  66. </form>
  67. <p id="loginMessage" class="login-message" role="alert"></p>
  68. </section>
  69. </main>
  70. <script src="/login.js" type="module"></script>
  71. </body>
  72. </html>