Создал и подключил style.css, добавил div-ы для простоты работы
This commit is contained in:
parent
04f65de233
commit
a3dcdad361
@ -4,6 +4,29 @@
|
|||||||
<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">
|
||||||
|
</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>
|
||||||
<h1>Login Form</h1>
|
<h1>Login Form</h1>
|
||||||
@ -29,5 +52,19 @@
|
|||||||
</form>
|
</form>
|
||||||
|
|
||||||
|
|
||||||
|
</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>
|
||||||
101
frontend/styles.css
Normal file
101
frontend/styles.css
Normal file
@ -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; /* Более темный зеленый при наведении */
|
||||||
|
}
|
||||||
|
|
||||||
Loading…
x
Reference in New Issue
Block a user