koala2 / templates /login.html
arcanus's picture
Create login.html
92296be
raw
history blame
2.92 kB
<!DOCTYPE html>
<html lang="cs">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Přihlášení - Koala BETA</title>
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
<style>
body {
background-color: hsl(var(--background));
color: hsl(var(--foreground));
}
.login-container {
max-width: 400px;
width: 90%;
padding: 2rem;
background-color: hsl(var(--card));
border: 1px solid hsl(var(--border));
border-radius: var(--radius);
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}
.input-field {
width: 100%;
padding: 0.5rem 1rem;
margin-bottom: 1rem;
border: 1px solid hsl(var(--border));
border-radius: var(--radius);
background-color: hsl(var(--background));
color: hsl(var(--foreground));
}
.submit-button {
width: 100%;
padding: 0.5rem 1rem;
background-color: hsl(var(--primary));
color: hsl(var(--primary-foreground));
border-radius: var(--radius);
border: none;
cursor: pointer;
transition: background-color 0.2s;
}
.submit-button:hover {
background-color: hsl(var(--primary) / 0.9);
}
.error-message {
color: hsl(var(--destructive));
margin-bottom: 1rem;
text-align: center;
}
</style>
</head>
<body class="min-h-screen flex items-center justify-center" style="
background: #22252a;
">
<div class="login-container" style="
background: #272a30;
border-radius: 10px;
border-color: #2e3138;
--tw-shadow: 0 20px 25px -5px rgb(0 0 0 / .1), 0 8px 10px -6px rgb(0 0 0 / .1);
--tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
color: white;
">
<h1 class="text-2xl font-bold text-center mb-6">Koala BETA</h1>
{% if error %}
<div class="error-message">{{ error }}</div>
{% endif %}
<form method="POST" action="{{ url_for('login') }}">
<input style=" background-color: #2e3138; border-radius: 10px; text-align: center; " type="password" name="password" placeholder="Zadejte heslo" class="input-field" required>
<button style=" background: #22252a; color: #cbcbcb; border-radius: 10px; text-transform: uppercase; font-weight: 600; font-size: 12px; letter-spacing: 1px; " type="submit" class="submit-button">Přihlásit se</button>
</form>
</div>
</body>
</html>