64 lines
2.9 KiB
HTML
64 lines
2.9 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="fr">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Supervision - Connexion</title>
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css" rel="stylesheet">
|
|
<style>
|
|
body { background: #1a1a2e; min-height: 100vh; display: flex; align-items: center; }
|
|
.login-card { max-width: 400px; margin: auto; }
|
|
.brand { color: #e2e8f0; text-align: center; margin-bottom: 2rem; }
|
|
.brand i { font-size: 3rem; color: #4fc3f7; }
|
|
.brand h1 { font-size: 1.5rem; margin-top: 0.5rem; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<div class="login-card">
|
|
<div class="brand">
|
|
<i class="bi bi-activity"></i>
|
|
<h1>Supervision</h1>
|
|
<small class="text-secondary">Monitoring système</small>
|
|
</div>
|
|
|
|
{% if flash_messages %}
|
|
{% for item in flash_messages %}
|
|
<div class="alert alert-{{ item.0 }} alert-dismissible fade show" role="alert">
|
|
{{ item.1 }}
|
|
<button type="button" class="btn-close" data-bs-dismiss="alert"></button>
|
|
</div>
|
|
{% endfor %}
|
|
{% endif %}
|
|
|
|
<div class="card shadow">
|
|
<div class="card-body p-4">
|
|
<form method="POST" action="/login">
|
|
<div class="mb-3">
|
|
<label for="username" class="form-label">Identifiant</label>
|
|
<div class="input-group">
|
|
<span class="input-group-text"><i class="bi bi-person"></i></span>
|
|
<input type="text" class="form-control" id="username" name="username"
|
|
required autofocus autocomplete="username">
|
|
</div>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label for="password" class="form-label">Mot de passe</label>
|
|
<div class="input-group">
|
|
<span class="input-group-text"><i class="bi bi-lock"></i></span>
|
|
<input type="password" class="form-control" id="password" name="password"
|
|
required autocomplete="current-password">
|
|
</div>
|
|
</div>
|
|
<button type="submit" class="btn btn-primary w-100">
|
|
<i class="bi bi-box-arrow-in-right"></i> Connexion
|
|
</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html>
|