add login form

moevm · Nov 9, 2024 · c4cbfaf · c4cbfaf
1 parent bcc9522
commit c4cbfaf
Show file tree

Hide file tree

Showing 2 changed files with 105 additions and 0 deletions.
diff --git a/main/_front/src/html/login.html b/main/_front/src/html/login.html
@@ -0,0 +1,79 @@
+<!doctype html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport"
+          content="width=device-width, user-scalable=no,
+          initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <title>Document</title>
+    <link rel="stylesheet" href="../scss/style.scss">
+</head>
+<body>
+
+<header class="header">
+    <div class="container">
+        <div class="header__inner">
+            <div class="header__logo">
+                <img src="../img/logo.svg" alt="logo">
+                <h2 class="header__title">Пора Cобрать ПК</h2>
+            </div>
+            <div class="header__nav">
+                <a href="#!" class="header__link active">Комплектующие</a>
+                <a href="#!" class="header__link">Конфигуратор</a>
+                <a href="#!" class="header__link">Готовые сборки</a>
+                <a href="#!" class="header__link">
+                    <svg viewBox="0 0 40 40" width="40.000000" height="40.000000">
+                        <g clip-path="url(#clip2_11)">
+                            <path id="path"
+                                  d="M31.86 23.95L13.33 23.95L13.33 22.7L31.86 22.7C32.38 22.7 32.83 22.31 32.89 21.79L34.14 11.79C34.18 11.49 34.09 11.2 33.89 10.97C33.69 10.75 33.41 10.62 33.11 10.62L8.88 10.62L8.88 9.37L33.11 9.37C33.76 9.37 34.39 9.65 34.83 10.14C35.26 10.64 35.46 11.29 35.38 11.95L34.13 21.95C33.99 23.09 33.01 23.95 31.86 23.95Z"
+                                  fill-opacity="1.000000" fill-rule="nonzero"/>
+                            <path id="path"
+                                  d="M31.66 28.95L15.44 28.95C14.41 28.95 13.5 28.26 13.23 27.26L8.06 8.06C7.94 7.6 7.52 7.29 7.05 7.29L3.33 7.29C2.98 7.29 2.7 7.01 2.7 6.66C2.7 6.32 2.98 6.04 3.33 6.04L7.05 6.04C8.08 6.04 9 6.73 9.26 7.73L14.43 26.93C14.56 27.39 14.97 27.7 15.44 27.7L31.66 27.7C32.01 27.7 32.29 27.98 32.29 28.33C32.29 28.67 32.01 28.95 31.66 28.95Z"
+                                  fill-opacity="1.000000" fill-rule="nonzero"/>
+                            <path id="path"
+                                  d="M16.66 35.62C15.4 35.62 14.37 34.59 14.37 33.33C14.37 32.07 15.4 31.04 16.66 31.04C17.93 31.04 18.95 32.07 18.95 33.33C18.95 34.59 17.93 35.62 16.66 35.62ZM16.66 32.29C16.09 32.29 15.62 32.75 15.62 33.33C15.62 33.9 16.09 34.37 16.66 34.37C17.24 34.37 17.7 33.9 17.7 33.33C17.7 32.75 17.24 32.29 16.66 32.29Z"
+                                  fill-opacity="1.000000" fill-rule="nonzero"/>
+                            <path id="path"
+                                  d="M29.16 35.62C27.9 35.62 26.87 34.59 26.87 33.33C26.87 32.07 27.9 31.04 29.16 31.04C30.43 31.04 31.45 32.07 31.45 33.33C31.45 34.59 30.43 35.62 29.16 35.62ZM29.16 32.29C28.59 32.29 28.12 32.75 28.12 33.33C28.12 33.9 28.59 34.37 29.16 34.37C29.74 34.37 30.2 33.9 30.2 33.33C30.2 32.75 29.74 32.29 29.16 32.29Z"
+                                  fill-opacity="1.000000" fill-rule="nonzero"/>
+                        </g>
+                    </svg>
+                </a>
+                <a href="#!" class="header__link">
+                    <svg viewBox="0 0 40 40" width="40.000000" height="40.000000">
+                        <g clip-path="url(#clip2_8)">
+                            <path id="path"
+                                  d="M20 18.95C15.97 18.95 12.7 15.68 12.7 11.66C12.7 7.64 15.97 4.37 20 4.37C24.02 4.37 27.29 7.64 27.29 11.66C27.29 15.68 24.02 18.95 20 18.95ZM20 5.62C16.66 5.62 13.95 8.33 13.95 11.66C13.95 14.99 16.66 17.7 20 17.7C23.33 17.7 26.04 14.99 26.04 11.66C26.04 8.33 23.33 5.62 20 5.62Z"
+                                  fill-opacity="1.000000" fill-rule="nonzero"/>
+                            <path id="path"
+                                  d="M31.66 35.62L8.33 35.62C7.98 35.62 7.7 35.34 7.7 35C7.7 31.71 8.98 28.63 11.3 26.3C13.63 23.98 16.71 22.7 20 22.7C23.28 22.7 26.37 23.98 28.69 26.3C31.01 28.63 32.29 31.71 32.29 35C32.29 35.34 32.01 35.62 31.66 35.62ZM8.97 34.37L31.02 34.37C30.69 28.57 25.87 23.95 20 23.95C14.12 23.95 9.3 28.57 8.97 34.37Z"
+                                  fill-opacity="1.000000" fill-rule="nonzero"/>
+                        </g>
+                    </svg>
+                </a>
+            </div>
+        </div>
+    </div>
+</header>
+<section class="title">
+    <div class="container">
+        <h1 class="title__text">Вход в панель администратора</h1>
+    </div>
+</section>
+<section class="form">
+    <div class="form__inner grey_background">
+        <h3 class="form__title">Вход</h3>
+        <div class="form__input input">
+            <input class="input__text" type="email" placeholder="">
+            <span>Почта</span>
+        </div>
+        <div class="form__input input">
+            <input class="input__text" type="password" placeholder="">
+            <span>Пароль</span>
+        </div>
+        <button class="btn">Войти</button>
+    </div>
+</section>
+</body>
+</html>
diff --git a/main/_front/src/scss/_form.scss b/main/_front/src/scss/_form.scss
@@ -0,0 +1,26 @@
+.form {
+  width: 100%;
+  height: calc(100vh - 2*163px);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.form__inner {
+  width: 400px;
+  padding: 20px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  row-gap: 20px;
+}
+
+.form__title {
+  font-size: 24px;
+  line-height: 28px;
+  font-weight: 700;
+}
+
+.form__input {
+  width: 100%;
+}