52 lines
1.2 KiB
HTML
52 lines
1.2 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>Login Page</title>
|
|
</head>
|
|
<style>
|
|
/* Grundstil der Textbox */
|
|
div {
|
|
border: 2px solid gray;
|
|
width: 17vw;
|
|
margin-top: 5px;
|
|
height: 30px;
|
|
text-align: center;
|
|
font-size: 1rem;
|
|
outline: none;
|
|
transition: border-color 0.3s ease;
|
|
}
|
|
|
|
/* Schüttel-Animation definieren */
|
|
@keyframes shake {
|
|
0% { transform: translateX(0); }
|
|
25% { transform: translateX(5px); }
|
|
50% { transform: translateX(-5px); }
|
|
75% { transform: translateX(5px); }
|
|
100% { transform: translateX(0); }
|
|
}
|
|
|
|
/* Animation bei ungültigem Zustand oder wenn Klasse "shake" gesetzt wird */
|
|
div.shake {
|
|
border-color: red;
|
|
animation: shake 0.3s ease-in-out 0s 3;
|
|
}
|
|
</style>
|
|
<body>
|
|
<h1>Login Page</h1>
|
|
<div type="text" class="shake" placeholder="Invalid">Invalid User or Password</div>
|
|
<form method="POST" action="{{ url_for('login') }}">
|
|
{{ form.csrf_token }}
|
|
{{ form.username.label }}
|
|
{{ form.username }}
|
|
<br>
|
|
<br>
|
|
{{ form.password.label }}
|
|
{{ form.password }}
|
|
<br>
|
|
<p>{{ form.remember_me }} {{ form.remember_me.label }}</p>
|
|
<br>
|
|
{{ form.submit }}
|
|
</form>
|
|
</body>
|
|
|
|
</html>
|