New css for Auth

2024-11-28 20:37:58 +03:00
parent cd7fb6e467
commit c0076a576d
1 changed files with 57 additions and 25 deletions
--- a/App/Auth/templates/auth.html
+++ b/App/Auth/templates/auth.html
@@ -1,28 +1,60 @@
 <!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
+<html lang="en" data-bs-theme="light">
+  <head>
+    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
+
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Авторизация</title>
-    <link href="/static/css/auth.css" type="text/css" rel="stylesheet">
-    <link href="/static/css/main.css" type="text/css" rel="stylesheet">
-</head>
-<body>
-    <h1>Авторизация</h1>
-    <div class="form">
-        <form action="" method="post" name="auth">
-            <label for="login">Логин: </label>
-            <input type="text" name="login" required>
-            <label for="password">Пароль: </label>
-            <input type="password" name="password" required><br>
-            <p>
-                Уровень доступа:
-                <select name="access">
-                    <option value="internal_users">Внутренний</option>
-                    <option value="external_users">Внешний</option>
-                </select>
-            </p>
-            <input type="submit" value="Вход">
-        </form>
-    </div>
-</body>
+
+    <link
+      href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
+      rel="stylesheet"
+    />
+
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
+
+    <!-- Custom styles for this template -->
+    <link
+      href="https://getbootstrap.com/docs/5.3/examples/sign-in/sign-in.css"
+      rel="stylesheet"
+    />
+  </head>
+  <body class="d-flex align-items-center py-4 bg-body-tertiary">
+    <main class="form-signin w-100 m-auto">
+      <form name="auth">
+        <h1 class="h3 mb-3 fw-normal">Авторизация</h1>
+
+        <div class="form-floating">
+          <input
+            class="form-control"
+            name="login"
+            placeholder="test"
+            type="text"
+            required
+          />
+          <label for="floatingInput">Имя пользователя</label>
+        </div>
+        <div class="form-floating">
+          <input
+            type="password"
+            class="form-control"
+            name="password"
+            placeholder="tset"
+            required
+          />
+          <label for="floatingPassword">Пароль</label>
+        </div>
+
+        <div class="my-3">
+          <select class="form-select" required="">
+            <option value="" selected="selected">Уровень доступа</option>
+            <option value="internal_users">Внутренний</option>
+            <option value="external_users">Внешний</option>
+          </select>
+        </div>
+        <button class="btn btn-primary w-100 py-2" type="submit">Вход</button>
+      </form>
+    </main>
+  </body>
 </html>