112 lines
3.0 KiB
HTML
112 lines
3.0 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="de">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Login – Post Tracker</title>
|
||
<link rel="icon" type="image/png" sizes="32x32" href="assets/app-icon-64.png">
|
||
<link rel="icon" type="image/png" sizes="192x192" href="assets/app-icon-192.png">
|
||
<link rel="apple-touch-icon" href="assets/app-icon-192.png">
|
||
<style>
|
||
:root {
|
||
color-scheme: light;
|
||
}
|
||
body {
|
||
margin: 0;
|
||
min-height: 100vh;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
|
||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
|
||
color: #0f172a;
|
||
}
|
||
.login-card {
|
||
background: #fff;
|
||
padding: 32px;
|
||
border-radius: 14px;
|
||
box-shadow: 0 20px 60px rgba(15, 23, 42, 0.15);
|
||
width: min(420px, 90vw);
|
||
box-sizing: border-box;
|
||
}
|
||
.login-card h1 {
|
||
margin: 0 0 8px;
|
||
font-size: 24px;
|
||
}
|
||
.login-card p {
|
||
margin: 0 0 24px;
|
||
color: #475569;
|
||
line-height: 1.4;
|
||
}
|
||
label {
|
||
display: block;
|
||
margin-bottom: 6px;
|
||
font-weight: 600;
|
||
}
|
||
input {
|
||
width: 100%;
|
||
padding: 12px;
|
||
border: 1px solid #cbd5e1;
|
||
border-radius: 10px;
|
||
box-sizing: border-box;
|
||
font-size: 16px;
|
||
transition: border-color 0.2s, box-shadow 0.2s;
|
||
}
|
||
input:focus {
|
||
border-color: #3b82f6;
|
||
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.25);
|
||
outline: none;
|
||
}
|
||
.field {
|
||
margin-bottom: 18px;
|
||
}
|
||
button {
|
||
width: 100%;
|
||
padding: 12px 14px;
|
||
background: #2563eb;
|
||
color: #fff;
|
||
font-weight: 700;
|
||
font-size: 16px;
|
||
border: none;
|
||
border-radius: 10px;
|
||
cursor: pointer;
|
||
transition: transform 0.08s ease, box-shadow 0.2s ease, background 0.2s ease;
|
||
box-shadow: 0 12px 30px rgba(37, 99, 235, 0.25);
|
||
}
|
||
button:hover {
|
||
background: #1d4ed8;
|
||
transform: translateY(-1px);
|
||
}
|
||
button:active {
|
||
transform: translateY(0);
|
||
box-shadow: 0 6px 20px rgba(37, 99, 235, 0.18);
|
||
}
|
||
.status {
|
||
margin-top: 14px;
|
||
min-height: 22px;
|
||
color: #b91c1c;
|
||
font-weight: 600;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="login-card">
|
||
<h1>📋 Post Tracker Login</h1>
|
||
<p>Bitte melde dich an, um das Dashboard zu öffnen.</p>
|
||
<form id="loginForm" novalidate>
|
||
<div class="field">
|
||
<label for="username">Benutzername</label>
|
||
<input type="text" id="username" name="username" autocomplete="username" required>
|
||
</div>
|
||
<div class="field">
|
||
<label for="password">Passwort</label>
|
||
<input type="password" id="password" name="password" autocomplete="current-password" required>
|
||
</div>
|
||
<button type="submit">Anmelden</button>
|
||
<div id="status" class="status" role="status" aria-live="polite"></div>
|
||
</form>
|
||
</div>
|
||
<script src="login.js?v=__ASSET_VERSION__"></script>
|
||
</body>
|
||
</html>
|