Aleksey_Skakodub/WebServer
Aleksey_Skakodub/WebServer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Починил, щас норм

Browse Source
This commit is contained in:
Алексей Скакодуб 2025-03-20 23:25:38 +03:00
parent a3dcdad361
commit cc2615d707
2 changed files with 59 additions and 126 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
frontend/index.html
View File

@ -4,31 +4,10 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Login and Register Form</title> <title>Login and Register Form</title>
<link rel="stylesheet" href="styles.css" type = "text/css"> <link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Login Form</h1>
<form action="/submit" method="post">
<label for="username">Username:</label><br>
<input type="text" id="username" name="username" required><br><br>
<label for="password">Password:</label><br>
<input type="password" id="password" name="password" required><br><br>
<button type="submit" name="action" value="Login">Login</button>
</form>
<h1>Register Form</h1>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Login and Register Form</title>
<link rel="stylesheet" href="styles.css" type = "text/css">
</head> </head>
<body> <body>
<div class="form-container">
<h1>Login Form</h1> <h1>Login Form</h1>
<form action="/submit" method="post"> <form action="/submit" method="post">
<label for="username">Username:</label><br> <label for="username">Username:</label><br>
@ -39,7 +18,9 @@
<button type="submit" name="action" value="Login">Login</button> <button type="submit" name="action" value="Login">Login</button>
</form> </form>
</div>
<div class="form-container">
<h1>Register Form</h1> <h1>Register Form</h1>
<form action="/submit" method="post"> <form action="/submit" method="post">
<label for="new_username">Username:</label><br> <label for="new_username">Username:</label><br>
@ -50,21 +31,6 @@
<button type="submit" name="action" value="Register">Register</button> <button type="submit" name="action" value="Register">Register</button>
</form> </form>
</div>
</body>
</html>
<form action="/submit" method="post">
<label for="new_username">Username:</label><br>
<input type="text" id="new_username" name="new_username" required><br><br>
<label for="new_password">Password:</label><br>
<input type="password" id="new_password" name="new_password" required><br><br>
<button type="submit" name="action" value="Register">Register</button>
</form>
</body> </body>
</html> </html>

107
frontend/styles.css
View File

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