login.html 2.3 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <title>Login</title>
  7. <style>
  8. body {
  9. font-family: Arial, sans-serif;
  10. background-color: #f5f5f5;
  11. margin: 0;
  12. padding: 0;
  13. display: flex;
  14. justify-content: center;
  15. align-items: center;
  16. height: 100vh;
  17. }
  18. .container {
  19. background-color: #fff;
  20. padding: 20px;
  21. border-radius: 8px;
  22. box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  23. text-align: center;
  24. }
  25. h2 {
  26. margin-bottom: 20px;
  27. }
  28. .logo {
  29. max-width: 100px;
  30. margin-bottom: 20px;
  31. }
  32. form {
  33. display: flex;
  34. flex-direction: column;
  35. align-items: center;
  36. }
  37. label {
  38. margin-bottom: 5px;
  39. }
  40. input[type="text"],
  41. input[type="password"] {
  42. width: 100%;
  43. padding: 10px;
  44. margin-bottom: 10px;
  45. border: 1px solid #ccc;
  46. border-radius: 5px;
  47. box-sizing: border-box;
  48. }
  49. input[type="submit"] {
  50. width: 100%;
  51. padding: 10px;
  52. background-color: #007bff;
  53. color: #fff;
  54. border: none;
  55. border-radius: 5px;
  56. cursor: pointer;
  57. transition: background-color 0.3s ease;
  58. }
  59. input[type="submit"]:hover {
  60. background-color: #0056b3;
  61. }
  62. .error {
  63. color: red;
  64. margin-top: 10px;
  65. }
  66. </style>
  67. </head>
  68. <body>
  69. <div class="container">
  70. <h2>Login</h2>
  71. {% if error %}
  72. <p class="error">{{ error }}</p>
  73. {% endif %}
  74. <form action="/" method="post">
  75. <label for="username">Username:</label>
  76. <input type="text" id="username" name="username">
  77. <label for="password">Password:</label>
  78. <input type="password" id="password" name="password">
  79. <input type="submit" value="Login">
  80. </form>
  81. </div>
  82. </body>
  83. </html>