63 lines
2.7 KiB
HTML
63 lines
2.7 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="fr">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Connexion — Facturation</title>
|
|
<link rel="stylesheet" href="/static/css/style.css">
|
|
<style>
|
|
body { display: flex; align-items: center; justify-content: center;
|
|
min-height: 100vh; background: var(--bg); }
|
|
.login-card {
|
|
background: white;
|
|
border-radius: 10px;
|
|
padding: 2.5rem 2rem;
|
|
box-shadow: 0 4px 20px rgba(0,0,0,0.1);
|
|
width: 100%;
|
|
max-width: 380px;
|
|
}
|
|
.login-card h1 { font-size: 1.4rem; color: var(--primary);
|
|
margin-bottom: 0.25rem; text-align: center; }
|
|
.login-card .subtitle { text-align: center; color: var(--muted);
|
|
font-size: 0.85rem; margin-bottom: 2rem; }
|
|
.erreur { background: #fee2e2; color: #991b1b; padding: 0.7em 1em;
|
|
border-radius: 5px; font-size: 0.875rem; margin-bottom: 1rem; }
|
|
.form-group { display: flex; flex-direction: column; gap: 0.3rem; margin-bottom: 1rem; }
|
|
label { font-size: 0.82rem; font-weight: 600; color: var(--muted);
|
|
text-transform: uppercase; letter-spacing: 0.3px; }
|
|
input { padding: 0.6em 0.75em; border: 1px solid var(--border);
|
|
border-radius: 5px; font-size: 0.95rem; width: 100%; }
|
|
input:focus { outline: none; border-color: var(--accent);
|
|
box-shadow: 0 0 0 2px rgba(52,152,219,0.15); }
|
|
.btn-login { width: 100%; padding: 0.7em; background: var(--accent);
|
|
color: white; border: none; border-radius: 5px;
|
|
font-size: 1rem; cursor: pointer; margin-top: 0.5rem; }
|
|
.btn-login:hover { background: #2980b9; }
|
|
.logo { text-align: center; font-size: 2.5rem; margin-bottom: 1rem; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="login-card">
|
|
<div class="logo">🧾</div>
|
|
<h1>Facturation</h1>
|
|
<p class="subtitle">Connectez-vous pour continuer</p>
|
|
|
|
{% if erreur %}
|
|
<div class="erreur">{{ erreur }}</div>
|
|
{% endif %}
|
|
|
|
<form method="post" action="/login">
|
|
<div class="form-group">
|
|
<label>Nom d'utilisateur</label>
|
|
<input type="text" name="username" autofocus autocomplete="username" required>
|
|
</div>
|
|
<div class="form-group">
|
|
<label>Mot de passe</label>
|
|
<input type="password" name="password" autocomplete="current-password" required>
|
|
</div>
|
|
<button type="submit" class="btn-login">Se connecter</button>
|
|
</form>
|
|
</div>
|
|
</body>
|
|
</html>
|