From a3dcdad361bd3e4bae24cfcb57da32a56dd80ecf Mon Sep 17 00:00:00 2001 From: Aleksey_Skakodub Date: Thu, 20 Mar 2025 23:17:44 +0300 Subject: [PATCH 1/2] =?UTF-8?q?=D0=A1=D0=BE=D0=B7=D0=B4=D0=B0=D0=BB=20?= =?UTF-8?q?=D0=B8=20=D0=BF=D0=BE=D0=B4=D0=BA=D0=BB=D1=8E=D1=87=D0=B8=D0=BB?= =?UTF-8?q?=20style.css,=20=D0=B4=D0=BE=D0=B1=D0=B0=D0=B2=D0=B8=D0=BB=20di?= =?UTF-8?q?v-=D1=8B=20=D0=B4=D0=BB=D1=8F=20=D0=BF=D1=80=D0=BE=D1=81=D1=82?= =?UTF-8?q?=D0=BE=D1=82=D1=8B=20=D1=80=D0=B0=D0=B1=D0=BE=D1=82=D1=8B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/index.html | 39 ++++++++++++++++- frontend/styles.css | 101 ++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 139 insertions(+), 1 deletion(-) create mode 100644 frontend/styles.css diff --git a/frontend/index.html b/frontend/index.html index b8c2349..cf61bf3 100644 --- a/frontend/index.html +++ b/frontend/index.html @@ -4,6 +4,29 @@ Login and Register Form + + + +

Login Form

+
+
+

+ +
+

+ + +
+ +

Register Form

+ + + + + + + Login and Register Form +

Login Form

@@ -28,6 +51,20 @@ + + + + +
+
+

+ +
+

+ + +
+ - \ No newline at end of file + diff --git a/frontend/styles.css b/frontend/styles.css new file mode 100644 index 0000000..c2d86bc --- /dev/null +++ b/frontend/styles.css @@ -0,0 +1,101 @@ +/* Общие стили */ +body { + font-family: Arial, sans-serif; /* Шрифт по умолчанию */ + background-color: #f4f4f4; /* Светло-серый фон */ + margin: 0; /* Убираем отступы по умолчанию у body */ + padding: 20px; /* Добавляем отступы вокруг содержимого */ + display: flex; /* Используем flexbox для центрирования */ + justify-content: center; /* Центрируем по горизонтали */ + align-items: center; /* Центрируем по вертикали */ + min-height: 100vh; /* Чтобы body занимал всю высоту экрана */ +} + +/* Контейнер для форм */ +body > * { /* Применяем стили ко всем прямым потомкам body */ + width: 100%; /* Занимает всю доступную ширину */ + max-width: 400px; /* Максимальная ширина */ + padding: 20px; /* Отступы внутри контейнера */ + background-color: #fff; /* Белый фон */ + border-radius: 8px; /* Скругленные углы */ + box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* Небольшая тень */ + margin-bottom: 20px; /* Отступ между формами */ +} + + +/* Заголовки */ +h1 { + text-align: center; /* Центрируем заголовки */ + color: #333; /* Темно-серый цвет текста */ + margin-bottom: 20px; /* Добавляем отступ снизу */ +} + +/* Метки (labels) */ +label { + display: block; /* Метки занимают всю ширину и располагаются сверху полей ввода */ + margin-bottom: 5px; + font-weight: bold; + color: #555; +} + +/* Поля ввода (input) */ +input[type="text"], +input[type="password"] { + width: 100%; /* Поля ввода занимают всю ширину */ + padding: 10px; /* Отступы внутри полей ввода */ + margin-bottom: 20px; + border: 1px solid #ccc; /* Серая рамка */ + border-radius: 4px; /* Скругленные углы */ + box-sizing: border-box; /* Чтобы padding и border не увеличивали ширину */ +} + +/* Кнопки */ +button { + background-color: #4CAF50; /* Зеленый фон */ + color: white; /* Белый текст */ + padding: 12px 20px; /* Отступы внутри кнопки */ + border: none; /* Убираем рамку */ + border-radius: 4px; /* Скругленные углы */ + cursor: pointer; /* Изменение курсора при наведении */ + width: 100%; /* Кнопка занимает всю ширину */ + font-size: 16px; /* Размер шрифта */ + transition: background-color 0.3s ease; /* Анимация при наведении */ +} + +button:hover { + background-color: #45a049; /* Более темный зеленый при наведении */ +} + + display: block; /* Метки занимают всю ширину и располагаются сверху полей ввода */ + margin-bottom: 5px; + font-weight: bold; + color: #555; +} + +/* Поля ввода (input) */ +input[type="text"], +input[type="password"] { + width: 100%; /* Поля ввода занимают всю ширину */ + padding: 10px; /* Отступы внутри полей ввода */ + margin-bottom: 20px; + border: 1px solid #ccc; /* Серая рамка */ + border-radius: 4px; /* Скругленные углы */ + box-sizing: border-box; /* Чтобы padding и border не увеличивали ширину */ +} + +/* Кнопки */ +button { + background-color: #4CAF50; /* Зеленый фон */ + color: white; /* Белый текст */ + padding: 12px 20px; /* Отступы внутри кнопки */ + border: none; /* Убираем рамку */ + border-radius: 4px; /* Скругленные углы */ + cursor: pointer; /* Изменение курсора при наведении */ + width: 100%; /* Кнопка занимает всю ширину */ + font-size: 16px; /* Размер шрифта */ + transition: background-color 0.3s ease; /* Анимация при наведении */ +} + +button:hover { + background-color: #45a049; /* Более темный зеленый при наведении */ +} + From cc2615d7072510eff153b1b8d7e1be7d7d627dd7 Mon Sep 17 00:00:00 2001 From: Aleksey_Skakodub Date: Thu, 20 Mar 2025 23:25:38 +0300 Subject: [PATCH 2/2] =?UTF-8?q?=D0=9F=D0=BE=D1=87=D0=B8=D0=BD=D0=B8=D0=BB,?= =?UTF-8?q?=20=D1=89=D0=B0=D1=81=20=D0=BD=D0=BE=D1=80=D0=BC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/index.html | 78 +++++++++----------------------- frontend/styles.css | 107 +++++++++++++++----------------------------- 2 files changed, 59 insertions(+), 126 deletions(-) diff --git a/frontend/index.html b/frontend/index.html index cf61bf3..5744255 100644 --- a/frontend/index.html +++ b/frontend/index.html @@ -4,67 +4,33 @@ Login and Register Form - + -

Login Form

-
-
-

+
+

Login Form

+ +
+

-
-

+
+

- - + + +
-

Register Form

- - - - - - - Login and Register Form - - - -

Login Form

-
-
-

- -
-

- - -
- -

Register Form

-
-
-

- -
-

- - -
+
+

Register Form

+
+
+

+
+

+ +
+
- - -
-
-

- -
-

- - -
- - - - + \ No newline at end of file diff --git a/frontend/styles.css b/frontend/styles.css index c2d86bc..cb4948e 100644 --- a/frontend/styles.css +++ b/frontend/styles.css @@ -1,37 +1,39 @@ /* Общие стили */ body { - font-family: Arial, sans-serif; /* Шрифт по умолчанию */ - background-color: #f4f4f4; /* Светло-серый фон */ - margin: 0; /* Убираем отступы по умолчанию у body */ - padding: 20px; /* Добавляем отступы вокруг содержимого */ - display: flex; /* Используем flexbox для центрирования */ - justify-content: center; /* Центрируем по горизонтали */ - align-items: center; /* Центрируем по вертикали */ - min-height: 100vh; /* Чтобы body занимал всю высоту экрана */ + font-family: Arial, sans-serif; + background-color: #f4f4f4; + margin: 0; + padding: 20px; + display: flex; + flex-direction: column; /* Располагаем контейнеры вертикально */ + justify-content: center; + align-items: center; + min-height: 100vh; } + /* Контейнер для форм */ -body > * { /* Применяем стили ко всем прямым потомкам body */ - width: 100%; /* Занимает всю доступную ширину */ - max-width: 400px; /* Максимальная ширина */ - padding: 20px; /* Отступы внутри контейнера */ - background-color: #fff; /* Белый фон */ - border-radius: 8px; /* Скругленные углы */ - box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* Небольшая тень */ - margin-bottom: 20px; /* Отступ между формами */ +.form-container { /* Изменили селектор на класс .form-container */ + width: 100%; + max-width: 400px; + padding: 20px; + background-color: #fff; + border-radius: 8px; + box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); + margin-bottom: 20px; } /* Заголовки */ h1 { - text-align: center; /* Центрируем заголовки */ - color: #333; /* Темно-серый цвет текста */ - margin-bottom: 20px; /* Добавляем отступ снизу */ + text-align: center; + color: #333; + margin-bottom: 20px; } /* Метки (labels) */ label { - display: block; /* Метки занимают всю ширину и располагаются сверху полей ввода */ + display: block; margin-bottom: 5px; font-weight: bold; color: #555; @@ -40,62 +42,27 @@ label { /* Поля ввода (input) */ input[type="text"], input[type="password"] { - width: 100%; /* Поля ввода занимают всю ширину */ - padding: 10px; /* Отступы внутри полей ввода */ + width: 100%; + padding: 10px; margin-bottom: 20px; - border: 1px solid #ccc; /* Серая рамка */ - border-radius: 4px; /* Скругленные углы */ - box-sizing: border-box; /* Чтобы padding и border не увеличивали ширину */ + border: 1px solid #ccc; + border-radius: 4px; + box-sizing: border-box; } /* Кнопки */ button { - background-color: #4CAF50; /* Зеленый фон */ - color: white; /* Белый текст */ - padding: 12px 20px; /* Отступы внутри кнопки */ - border: none; /* Убираем рамку */ - border-radius: 4px; /* Скругленные углы */ - cursor: pointer; /* Изменение курсора при наведении */ - width: 100%; /* Кнопка занимает всю ширину */ - font-size: 16px; /* Размер шрифта */ - transition: background-color 0.3s ease; /* Анимация при наведении */ + background-color: #4CAF50; + color: white; + padding: 12px 20px; + border: none; + border-radius: 4px; + cursor: pointer; + width: 100%; + font-size: 16px; + transition: background-color 0.3s ease; } button:hover { - background-color: #45a049; /* Более темный зеленый при наведении */ + background-color: #45a049; } - - display: block; /* Метки занимают всю ширину и располагаются сверху полей ввода */ - margin-bottom: 5px; - font-weight: bold; - color: #555; -} - -/* Поля ввода (input) */ -input[type="text"], -input[type="password"] { - width: 100%; /* Поля ввода занимают всю ширину */ - padding: 10px; /* Отступы внутри полей ввода */ - margin-bottom: 20px; - border: 1px solid #ccc; /* Серая рамка */ - border-radius: 4px; /* Скругленные углы */ - box-sizing: border-box; /* Чтобы padding и border не увеличивали ширину */ -} - -/* Кнопки */ -button { - background-color: #4CAF50; /* Зеленый фон */ - color: white; /* Белый текст */ - padding: 12px 20px; /* Отступы внутри кнопки */ - border: none; /* Убираем рамку */ - border-radius: 4px; /* Скругленные углы */ - cursor: pointer; /* Изменение курсора при наведении */ - width: 100%; /* Кнопка занимает всю ширину */ - font-size: 16px; /* Размер шрифта */ - transition: background-color 0.3s ease; /* Анимация при наведении */ -} - -button:hover { - background-color: #45a049; /* Более темный зеленый при наведении */ -} -