Modify frontend

This commit is contained in:
hok7z 2022-12-02 23:11:12 +02:00
parent d04d93eb7a
commit dcaafa6b95
3 changed files with 126 additions and 5 deletions

View File

@ -0,0 +1,80 @@
* {
font-family: "Roboto";
margin: 0;
padding: 0;
}
body {
background: rgb(8, 152, 255);
}
.form-box {
width: 400px;
height: 500px;
position: relative;
margin: 6% auto;
background: #fff;
padding: 5px;
text-align: center;
}
#title {
font-size: 2em;
margin-bottom: 12px;
}
.inputfield {
margin: 10px;
padding: 8px 8px;
position: relative;
display: inline-block;
border-width: 2px;
border-radius: 4px;
border-color: gray;
outline: none;
}
.inputfield::placeholder {
color: #000;
}
.inputfield:focus {
outline: none;
border-color: #407ce5;
}
.login {
font-size: 1em;
color: #000;
position: relative;
}
#sumbit-button {
width: 50%;
height: 40px;
border: 0;
margin-top: 35px;
border-radius: 28px;
background: rgb(0, 208, 255);
color: white;
cursor: pointer;
transition: opacity 0.15s;
}
#sumbit-button:hover {
opacity: 0.85;
}
#sumbit-button:active {
opacity: 0.6;
}
#error-alert {
color: red;
font-size: 12px;
}

14
templates/index.html Normal file
View File

@ -0,0 +1,14 @@
<!DOCTYPE html>
<html>
<head>
<title>Web group moderator</title>
</head>
<body>
<h1>Admin panel</h1>
Hi,{{username}}!
</body>
</html>

View File

@ -1,5 +1,32 @@
<form action="/login" method="post">
<p><input type="text" name="username" placeholder="Enter username"></p>
<p><input type="password" name="password" placeholder="Enter password"></p>
<p><button type="sumbit">Log In</button></p>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Login page</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="static/css/login.css" rel="stylesheet">
<!-- Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
</head>
<body>
<div class="form-box">
<h1 id="title">Sign In</h1>
<form action="/login" method="post" class="login">
<input type="text" name="username" placeholder="Enter username" class="inputfield" required>
<input type="password" name="password" placeholder="Enter password" class="inputfield" required>
{% for message in get_flashed_messages()%}
<p id="error-alert">{{ message }}</p>
{% endfor %}
<button type="submit" id="sumbit-button">Log in</button>
</form>
</div>
</body>
</html>