You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
56 lines
3.1 KiB
56 lines
3.1 KiB
<!doctype html> |
|
<html lang="fr" data-bs-theme="dark"> |
|
<!doctype html> |
|
<html lang="fr" data-bs-theme="dark"> |
|
<head> |
|
<meta charset="utf-8" /> |
|
<meta name="viewport" content="width=device-width,initial-scale=1" /> |
|
<title>Connexion — Game Server Control</title> |
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet"> |
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.css" rel="stylesheet"> |
|
<link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;600;700&display=swap" rel="stylesheet"> |
|
<style> |
|
:root { --bg-gradient: linear-gradient(135deg, #ff77b6 0%, #7a5cff 50%, #5b2b8a 100%); --card: rgba(10,12,20,0.6); --muted: #9aa4b2; } |
|
body { font-family: 'Outfit', system-ui, -apple-system, 'Segoe UI', Roboto; background: var(--bg-gradient); color:#e6eef8; min-height:100vh; } |
|
.card { background: var(--card); backdrop-filter: blur(6px); border: none; border-radius: 12px; } |
|
.logo-circle { width:84px; height:84px; border-radius:50%; background: linear-gradient(135deg,#0d6efd22,#6f42c122); display:flex; align-items:center; justify-content:center; margin:0 auto 12px auto; } |
|
.logo-circle .bi { font-size:36px; color:#cfe8ff; } |
|
.small-muted { color: var(--muted); font-size:0.92rem } |
|
.form-control:focus { box-shadow: 0 0 0 .2rem rgba(13,110,253,.12); } |
|
.btn-primary { background:#0d6efd; border-color:#0d6efd } |
|
.help-inline { font-size:0.9rem; color:var(--muted); text-align:center } |
|
</style> |
|
</head> |
|
<body> |
|
<div class="d-flex align-items-center justify-content-center" style="min-height:100vh; padding:24px;"> |
|
<div class="card p-4 shadow" style="max-width:420px; width:100%;"> |
|
<div class="text-center mb-1"> |
|
<img src="{{ url_for('static', filename='logo.png') }}" alt="logo" style="width:96px;height:96px;object-fit:contain;border-radius:12px;background:transparent;padding:6px;"/> |
|
</div> |
|
<div class="text-center"> |
|
<h3 class="mb-1">Gaming room</h3> |
|
<div class="small-muted mb-3">Connecte-toi pour gérer les serveurs locaux</div> |
|
</div> |
|
|
|
{% if error %} |
|
<div class="alert alert-danger">{{ error }}</div> |
|
{% endif %} |
|
|
|
<form method="post"> |
|
<div class="mb-3"> |
|
<label class="form-label visually-hidden">Mot de passe</label> |
|
<div class="input-group"> |
|
<span class="input-group-text bg-transparent text-muted"><i class="bi-key-fill"></i></span> |
|
<input name="password" type="password" class="form-control" placeholder="Mot de passe" autocomplete="current-password" required autofocus /> |
|
</div> |
|
</div> |
|
<div class="d-grid mb-2"> |
|
<button class="btn btn-primary">Se connecter</button> |
|
</div> |
|
</form> |
|
</div> |
|
</div> |
|
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script> |
|
</body> |
|
</html>
|
|
|