login.html 3.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118
  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.0">
  6. <title>AI智能教学系统 - 登录</title>
  7. <style>
  8. :root {
  9. --primary-color: #4a90e2;
  10. --bg-color: #f0f2f5;
  11. --card-bg: #ffffff;
  12. }
  13. body {
  14. font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  15. background-color: var(--bg-color);
  16. display: flex;
  17. justify-content: center;
  18. align-items: center;
  19. height: 100vh;
  20. margin: 0;
  21. }
  22. .container {
  23. background-color: var(--card-bg);
  24. padding: 40px;
  25. border-radius: 10px;
  26. box-shadow: 0 4px 15px rgba(0,0,0,0.1);
  27. width: 350px;
  28. text-align: center;
  29. }
  30. h2 {
  31. color: #333;
  32. margin-bottom: 20px;
  33. }
  34. .form-group {
  35. margin-bottom: 15px;
  36. text-align: left;
  37. }
  38. label {
  39. display: block;
  40. margin-bottom: 5px;
  41. color: #666;
  42. }
  43. input[type="text"], input[type="password"] {
  44. width: 100%;
  45. padding: 10px;
  46. border: 1px solid #ddd;
  47. border-radius: 5px;
  48. box-sizing: border-box; /* 确保padding不撑大宽度 */
  49. }
  50. button {
  51. width: 100%;
  52. padding: 10px;
  53. background-color: var(--primary-color);
  54. color: white;
  55. border: none;
  56. border-radius: 5px;
  57. cursor: pointer;
  58. font-size: 16px;
  59. transition: background 0.3s;
  60. }
  61. button:hover {
  62. background-color: #357abd;
  63. }
  64. .links {
  65. margin-top: 15px;
  66. font-size: 14px;
  67. }
  68. .links a {
  69. color: var(--primary-color);
  70. text-decoration: none;
  71. }
  72. .links a:hover {
  73. text-decoration: underline;
  74. }
  75. /* 消息提示样式 */
  76. .alert {
  77. padding: 10px;
  78. margin-bottom: 15px;
  79. border-radius: 5px;
  80. font-size: 14px;
  81. }
  82. .alert-error { background-color: #f8d7da; color: #721c24; }
  83. .alert-success { background-color: #d4edda; color: #155724; }
  84. </style>
  85. </head>
  86. <body>
  87. <div class="container">
  88. <h2>AI 智能教学系统</h2>
  89. <!-- 显示Flash消息 -->
  90. {% with messages = get_flashed_messages(with_categories=true) %}
  91. {% if messages %}
  92. {% for category, message in messages %}
  93. <div class="alert alert-{{ category }}">{{ message }}</div>
  94. {% endfor %}
  95. {% endif %}
  96. {% endwith %}
  97. <form method="post">
  98. <div class="form-group">
  99. <label for="username">用户名</label>
  100. <input type="text" id="username" name="username" required placeholder="请输入用户名">
  101. </div>
  102. <div class="form-group">
  103. <label for="password">密码</label>
  104. <input type="password" id="password" name="password" required placeholder="请输入密码">
  105. </div>
  106. <button type="submit">登录</button>
  107. </form>
  108. <div class="links">
  109. 还没有账号? <a href="{{ url_for('register') }}">立即注册</a>
  110. </div>
  111. </div>
  112. </body>
  113. </html>