149 lines
3.8 KiB
HTML
149 lines
3.8 KiB
HTML
{{ define "sso" }}
|
|
<!DOCTYPE html>
|
|
<html lang="de">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<title>Login</title>
|
|
|
|
<!-- Dein zentrales styles.css mit den Variablen einbinden -->
|
|
<link rel="stylesheet" href="/static/css/main.css" />
|
|
|
|
<!-- ▸ Zusätzliche Regeln NUR für das Log-In-Formular -->
|
|
<style>
|
|
/* Vollflächig zentrieren */
|
|
.login-wrapper{
|
|
display:flex;
|
|
align-items:center;
|
|
justify-content:center;
|
|
height:100vh; /* immer Bildschirmhöhe */
|
|
width:100%;
|
|
}
|
|
|
|
/* Die Karte selbst */
|
|
.login-card{
|
|
background:var(--card-bg);
|
|
padding:2.5rem 2rem;
|
|
border-radius:calc(var(--radius)*2);
|
|
box-shadow:var(--shadow);
|
|
width:100%;
|
|
max-width:400px;
|
|
}
|
|
|
|
.login-card h1{
|
|
font-size:1.5rem;
|
|
font-weight:600;
|
|
margin-bottom:1.5rem;
|
|
text-align:center;
|
|
}
|
|
|
|
.InputBox {
|
|
width:100%;
|
|
}
|
|
/* Formular-Layout */
|
|
.login-card form{
|
|
display:grid;
|
|
gap:1rem;
|
|
justify-items:center; /* horizontale Zentrierung für alle Kinder */
|
|
}
|
|
|
|
.login-card label{
|
|
font-size:0.875rem;
|
|
text-align:center;
|
|
color:var(--text-muted);
|
|
margin-bottom:0.25rem;
|
|
text-align:center; /* Label-Text mittig */
|
|
width:100%;
|
|
}
|
|
|
|
.login-card input{
|
|
padding:0.75rem 1rem;
|
|
border:1px solid var(--code-border);
|
|
border-radius:var(--radius);
|
|
background:var(--code-bg);
|
|
color: var(--text);
|
|
font-family:"Inter",system-ui,sans-serif;
|
|
transition:border-color .2s ease;
|
|
width:100%; /* auf kleineren Screens vollbreit … */
|
|
/*max-width:280px;*/ /* … aber nie breiter als 280 px */
|
|
margin:0 auto; /* Input-Box selbst zentrieren */
|
|
}
|
|
.login-card input:focus{
|
|
border-color:var(--accent);
|
|
outline:none;
|
|
color: var(--text);
|
|
box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 40%, transparent);
|
|
}
|
|
|
|
/* Primär-Button */
|
|
.login-card button{
|
|
padding:0.75rem 1rem;
|
|
border:none;
|
|
border-radius:var(--radius);
|
|
background:var(--accent);
|
|
color:#fff;
|
|
font-weight:600;
|
|
cursor:pointer;
|
|
transition:background .2s ease, transform .1s ease;
|
|
max-width:280px; /* Button bündelt sich an der Input-Breite */
|
|
width:100%;
|
|
margin:0.5rem auto 0;
|
|
}
|
|
.login-card button:hover{
|
|
background:var(--accent-light);
|
|
}
|
|
.login-card button:active{
|
|
transform:translateY(1px);
|
|
}
|
|
|
|
/* kleine Links unten */
|
|
.login-card .links{
|
|
margin-top:1rem;
|
|
text-align:center;
|
|
}
|
|
.login-card .links a{
|
|
color:var(--accent);
|
|
font-size:0.875rem;
|
|
text-decoration:none;
|
|
}
|
|
.login-card .links a:hover{
|
|
text-decoration:underline;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="login-wrapper">
|
|
<div class="login-card">
|
|
<h1>Anmelden</h1>
|
|
|
|
<form action="/login" method="post">
|
|
<div class="InputBox">
|
|
<label for="username">Benutzername</label>
|
|
<input type="text"
|
|
id="email"
|
|
name="username"
|
|
placeholder="Benutzername"
|
|
autocomplete="Benutzername"
|
|
required />
|
|
</div>
|
|
|
|
<div class="InputBox">
|
|
<label for="password">Passwort</label>
|
|
<input type="password"
|
|
id="password"
|
|
name="password"
|
|
placeholder="••••••••"
|
|
autocomplete="current-password"
|
|
required />
|
|
</div>
|
|
|
|
<button type="submit">Einloggen</button>
|
|
</form>
|
|
|
|
<div class="links">
|
|
<a href="/forgot-password">Passwort vergessen?</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html>
|
|
{{ end }} |