maxime/loustique-home
Template
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

mise à jour par Greg

Browse Source
This commit is contained in:
maxime
2026-03-26 14:47:53 +01:00
parent d132da6923
commit 1f84b5bc09
4 changed files with 418 additions and 612 deletions
Download Patch File Download Diff File Expand all files Collapse all files

261
flask/templates/admin.html
View File

@@ -3,33 +3,14 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Admin — Loustiques</title> <title>Loustiques Home - Admin</title>
<link href="https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&family=DM+Sans:wght@300;400;500&display=swap" rel="stylesheet">
<style> <style>
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
--bg: #0f0f0f;
--surface: #181818;
--surface2: #222222;
--border: rgba(255,255,255,0.08);
--border-hover: rgba(255,255,255,0.18);
--text: #f0ede8;
--muted: #888880;
--accent: #c8f060;
--accent-dim: rgba(200,240,96,0.12);
--danger: #ff5f57;
--danger-dim: rgba(255,95,87,0.12);
--success: #30d158;
--success-dim: rgba(48,209,88,0.1);
--mono: 'Space Mono', monospace;
--sans: 'DM Sans', sans-serif;
}
body { body {
background: var(--bg); font-family: system-ui, sans-serif;
color: var(--text); background: #1f1f1f;
font-family: var(--sans); color: #f0f0f0;
min-height: 100vh; min-height: 100vh;
display: flex; display: flex;
} }
@@ -37,8 +18,8 @@
aside { aside {
width: 220px; width: 220px;
min-height: 100vh; min-height: 100vh;
background: var(--surface); background: #1a1a1a;
border-right: 1px solid var(--border); border-right: 1px solid #2e2e2e;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
padding: 2rem 1.25rem; padding: 2rem 1.25rem;
@@ -47,22 +28,20 @@
} }
.logo { .logo {
font-family: var(--mono); font-size: 20px;
font-size: 13px; font-weight: 700;
color: var(--accent); color: #f0f0f0;
letter-spacing: 0.12em;
text-transform: uppercase;
margin-bottom: 2.5rem; margin-bottom: 2.5rem;
padding-bottom: 1.5rem; padding-bottom: 1.5rem;
border-bottom: 1px solid var(--border); border-bottom: 1px solid #2e2e2e;
} }
.logo span { .logo span {
display: block; display: block;
font-size: 10px; font-size: 15px;
color: var(--muted); color: #666;
margin-top: 4px; margin-top: 4px;
letter-spacing: 0.06em; font-weight: 400;
} }
nav a { nav a {
@@ -71,27 +50,26 @@
gap: 10px; gap: 10px;
padding: 8px 10px; padding: 8px 10px;
border-radius: 6px; border-radius: 6px;
font-size: 13.5px; font-size: 13px;
color: var(--muted); color: #888;
text-decoration: none; text-decoration: none;
margin-bottom: 2px; margin-bottom: 2px;
transition: all 0.15s; transition: all 0.15s;
} }
nav a.active, nav a:hover { nav a.active, nav a:hover {
background: var(--accent-dim); background: #2e2e3a;
color: var(--accent); color: #2563eb;
} }
nav a svg { width: 15px; height: 15px; flex-shrink: 0; } nav a svg { width: 15px; height: 15px; flex-shrink: 0; }
.sidebar-footer { .sidebar-footer {
margin-top: auto; margin-top: auto;
font-size: 12px; font-size: 15px;
color: var(--muted); color: #555;
font-family: var(--mono);
padding-top: 1rem; padding-top: 1rem;
border-top: 1px solid var(--border); border-top: 1px solid #2e2e2e;
} }
main { main {
@@ -104,34 +82,29 @@
.page-header { .page-header {
margin-bottom: 2.5rem; margin-bottom: 2.5rem;
} }
.page-header h1 { .page-header h1 {
font-family: var(--mono);
font-size: 22px; font-size: 22px;
font-weight: 700; font-weight: 700;
color: var(--text);
margin-bottom: 4px; margin-bottom: 4px;
} }
.page-header p { .page-header p {
font-size: 14px; font-size: 14px;
color: var(--muted); color: #888;
} }
.card { .card {
background: var(--surface); background: #2a2a2a;
border: 1px solid var(--border); border: 1px solid #333;
border-radius: 12px; border-radius: 8px;
padding: 1.75rem; padding: 1.75rem;
margin-bottom: 1.5rem; margin-bottom: 1.5rem;
} }
.card-title { .card-title {
font-family: var(--mono); font-size: 15px;
font-size: 11px;
letter-spacing: 0.1em; letter-spacing: 0.1em;
text-transform: uppercase; text-transform: uppercase;
color: var(--muted); color: #666;
margin-bottom: 1.25rem; margin-bottom: 1.25rem;
} }
@@ -146,169 +119,117 @@
flex-direction: column; flex-direction: column;
gap: 6px; gap: 6px;
} }
.form-group.full {
.form-group.full { grid-column: 1 / -1; } grid-column: 1 / -1;
}
label { label {
font-size: 12px; font-size: 12px;
color: var(--muted); color: #888;
font-family: var(--mono);
letter-spacing: 0.05em;
} }
input[type="text"], input[type="text"],
input[type="password"] { input[type="password"],
background: var(--surface2); select {
border: 1px solid var(--border); background: #333;
border-radius: 7px; border: 1px solid #3a3a3a;
border-radius: 6px;
padding: 10px 14px; padding: 10px 14px;
color: var(--text); color: #f0f0f0;
font-family: var(--mono); font-family: inherit;
font-size: 13px; font-size: 13px;
outline: none; outline: none;
transition: border-color 0.15s;
width: 100%; width: 100%;
transition: border-color 0.15s;
appearance: none;
} }
input:focus { input:focus, select:focus { border-color: #2563eb; }
border-color: var(--accent); input::placeholder { color: #555; }
}
.btn { .btn {
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
gap: 8px; gap: 8px;
padding: 10px 20px; padding: 9px 18px;
border-radius: 7px; border-radius: 6px;
border: none; border: none;
font-family: var(--mono); font-family: inherit;
font-size: 12px; font-size: 13px;
letter-spacing: 0.05em;
cursor: pointer; cursor: pointer;
transition: all 0.15s; transition: all 0.15s;
} }
.btn-primary { .btn-primary { background: #2563eb; color: #fff; font-weight: 600; }
background: var(--accent); .btn-primary:hover { background: #1d4ed8; }
color: #0f0f0f;
font-weight: 700;
}
.btn-primary:hover { background: #d4f570; }
.btn-danger { .btn-danger {
background: var(--danger-dim); background: transparent;
color: var(--danger); color: #f87171;
border: 1px solid rgba(255,95,87,0.2); border: 1px solid rgba(248,113,113,0.3);
font-size: 12px;
padding: 6px 14px;
} }
.btn-danger:hover { background: rgba(248,113,113,0.1); }
.btn-danger:hover { background: rgba(255,95,87,0.2); } .form-actions { display: flex; justify-content: flex-end; margin-top: 1.25rem; }
.form-actions { .user-list { display: flex; flex-direction: column; }
display: flex;
justify-content: flex-end;
margin-top: 1.25rem;
}
.user-list { display: flex; flex-direction: column; gap: 0; }
.user-row { .user-row {
display: flex; display: flex;
align-items: center; align-items: center;
padding: 12px 0; padding: 12px 0;
border-bottom: 1px solid var(--border); border-bottom: 1px solid #333;
gap: 14px; gap: 14px;
transition: background 0.1s;
} }
.user-row:last-child { border-bottom: none; } .user-row:last-child { border-bottom: none; }
.avatar { .avatar {
width: 36px; width: 36px; height: 36px;
height: 36px;
border-radius: 50%; border-radius: 50%;
background: var(--accent-dim); background: #2e2e3a;
border: 1px solid rgba(200,240,96,0.2); border: 1px solid #3a3a4a;
display: flex; display: flex; align-items: center; justify-content: center;
align-items: center; font-size: 11px; font-weight: 600;
justify-content: center; color: #2563eb;
font-family: var(--mono);
font-size: 11px;
color: var(--accent);
flex-shrink: 0; flex-shrink: 0;
} }
.user-info { flex: 1; } .user-info { flex: 1; }
.user-name { font-size: 14px; font-weight: 500; margin-bottom: 2px; }
.user-name { .user-meta { font-size: 11px; color: #666; }
font-size: 14px;
font-weight: 500;
color: var(--text);
margin-bottom: 2px;
}
.user-meta {
font-size: 11px;
color: var(--muted);
font-family: var(--mono);
}
.badge { .badge {
font-size: 10px; font-size: 10px;
font-family: var(--mono);
padding: 3px 8px; padding: 3px 8px;
border-radius: 4px; border-radius: 4px;
letter-spacing: 0.05em;
} }
.badge-admin { .badge-admin { background: rgba(37,99,235,0.15); color: #2563eb; border: 1px solid rgba(37,99,235,0.3); }
background: var(--accent-dim); .badge-user { background: #333; color: #888; border: 1px solid #3a3a3a; }
color: var(--accent);
border: 1px solid rgba(200,240,96,0.2);
}
.badge-user {
background: var(--surface2);
color: var(--muted);
border: 1px solid var(--border);
}
.toast { .toast {
position: fixed; position: fixed;
bottom: 2rem; bottom: 2rem; right: 2rem;
right: 2rem; background: #2a2a2a;
background: var(--surface); border: 1px solid #333;
border: 1px solid var(--border);
border-radius: 8px; border-radius: 8px;
padding: 12px 18px; padding: 12px 18px;
font-size: 13px; font-size: 13px;
font-family: var(--mono); color: #f0f0f0;
color: var(--text);
transform: translateY(20px); transform: translateY(20px);
opacity: 0; opacity: 0;
transition: all 0.25s; transition: all 0.25s;
pointer-events: none; pointer-events: none;
z-index: 999; z-index: 999;
} }
.toast.show { transform: translateY(0); opacity: 1; } .toast.show { transform: translateY(0); opacity: 1; }
.toast.success { border-color: rgba(48,209,88,0.3); color: var(--success); } .toast.success { border-color: rgba(74,222,128,0.3); color: #4ade80; }
.toast.error { border-color: rgba(255,95,87,0.3); color: var(--danger); } .toast.error { border-color: rgba(248,113,113,0.3); color: #f87171; }
.strength-bar { .strength-bar { height: 3px; background: #333; border-radius: 2px; margin-top: 6px; overflow: hidden; }
height: 3px; .strength-fill { height: 100%; border-radius: 2px; transition: width 0.3s, background 0.3s; width: 0%; }
background: var(--surface2);
border-radius: 2px;
margin-top: 6px;
overflow: hidden;
}
.strength-fill {
height: 100%;
border-radius: 2px;
transition: width 0.3s, background 0.3s;
width: 0%;
}
</style> </style>
</head> </head>
<body> <body>
@@ -316,7 +237,7 @@
<aside> <aside>
<div class="logo"> <div class="logo">
Loustiques Loustiques
<span>panneau admin</span> <span>Panneau admin</span>
</div> </div>
<nav> <nav>
<a href="#" class="active"> <a href="#" class="active">
@@ -332,14 +253,12 @@
Système Système
</a> </a>
</nav> </nav>
<div class="sidebar-footer"> <div class="sidebar-footer">v0.1.0 — local</div>
v0.1.0 — local
</div>
</aside> </aside>
<main> <main>
<div class="page-header"> <div class="page-header">
<h1>utilisateurs</h1> <h1>Utilisateurs</h1>
<p>Créer et gérer les comptes d'accès.</p> <p>Créer et gérer les comptes d'accès.</p>
</div> </div>
@@ -347,23 +266,23 @@
<div class="card-title">Créer un utilisateur</div> <div class="card-title">Créer un utilisateur</div>
<div class="form-grid"> <div class="form-grid">
<div class="form-group"> <div class="form-group">
<label>nom d'utilisateur</label> <label>Nom d'utilisateur</label>
<input type="text" id="new-username" placeholder="ex: maxime" autocomplete="off"> <input type="text" id="new-username" placeholder="ex: maxime" autocomplete="off">
</div> </div>
<div class="form-group"> <div class="form-group">
<label>rôle</label> <label>Rôle</label>
<select id="new-role" style="background:var(--surface2);border:1px solid var(--border);border-radius:7px;padding:10px 14px;color:var(--text);font-family:var(--mono);font-size:13px;outline:none;width:100%;appearance:none;"> <select id="new-role">
<option value="user">user</option> <option value="user">user</option>
<option value="admin">admin</option> <option value="admin">admin</option>
</select> </select>
</div> </div>
<div class="form-group"> <div class="form-group">
<label>mot de passe</label> <label>Mot de passe</label>
<input type="password" id="new-password" placeholder="••••••••" oninput="checkStrength(this.value)"> <input type="password" id="new-password" placeholder="••••••••" oninput="checkStrength(this.value)">
<div class="strength-bar"><div class="strength-fill" id="strength-fill"></div></div> <div class="strength-bar"><div class="strength-fill" id="strength-fill"></div></div>
</div> </div>
<div class="form-group"> <div class="form-group">
<label>confirmer</label> <label>Confirmer</label>
<input type="password" id="confirm-password" placeholder="••••••••"> <input type="password" id="confirm-password" placeholder="••••••••">
</div> </div>
</div> </div>
@@ -377,17 +296,7 @@
<div class="card"> <div class="card">
<div class="card-title">Comptes existants</div> <div class="card-title">Comptes existants</div>
<div class="user-list" id="user-list"> <div class="user-list" id="user-list"></div>
<div class="user-row">
<div class="avatar">MA</div>
<div class="user-info">
<div class="user-name">maxime</div>
<div class="user-meta">créé le 24/03/2026</div>
</div>
<span class="badge badge-admin">admin</span>
<button class="btn btn-danger" onclick="deleteUser(this, 'maxime')">Supprimer</button>
</div>
</div>
</div> </div>
</main> </main>
@@ -408,7 +317,7 @@ function checkStrength(val) {
if (/[A-Z]/.test(val)) score++; if (/[A-Z]/.test(val)) score++;
if (/[0-9]/.test(val)) score++; if (/[0-9]/.test(val)) score++;
if (/[^A-Za-z0-9]/.test(val)) score++; if (/[^A-Za-z0-9]/.test(val)) score++;
const colors = ['#ff5f57', '#ff9f0a', '#ffd60a', '#30d158']; const colors = ['#f87171', '#fb923c', '#facc15', '#4ade80'];
fill.style.width = (score * 25) + '%'; fill.style.width = (score * 25) + '%';
fill.style.background = colors[score - 1] || 'transparent'; fill.style.background = colors[score - 1] || 'transparent';
} }
@@ -443,6 +352,7 @@ function createUser() {
}) })
.catch(() => showToast('Erreur réseau', 'error')); .catch(() => showToast('Erreur réseau', 'error'));
} }
function loadUsers() { function loadUsers() {
fetch('/admin/get_users') fetch('/admin/get_users')
.then(r => r.json()) .then(r => r.json())
@@ -455,6 +365,7 @@ function loadUsers() {
} }
loadUsers(); loadUsers();
function addUserRow(username, role) { function addUserRow(username, role) {
const initials = username.slice(0, 2).toUpperCase(); const initials = username.slice(0, 2).toUpperCase();
const today = new Date().toLocaleDateString('fr-FR'); const today = new Date().toLocaleDateString('fr-FR');

274
flask/templates/dashboard.html
View File

@@ -3,208 +3,214 @@
<head> <head>
<meta charset="UTF-8"/> <meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/> <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Loustique Home — Dashboard</title> <title>Loustiques Home — Dashboard</title>
<link href="https://fonts.googleapis.com/css2?family=Syne:wght@400;700;800&family=DM+Mono:wght@300;400&display=swap" rel="stylesheet"/>
<style> <style>
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
--bg: #0a0a0f;
--panel: #111118;
--border: #1e1e2e;
--accent: #7c6aff;
--accent2: #ff6ab0;
--text: #e8e6f0;
--muted: #6b6880;
--success: #4ade80;
--warning: #fbbf24;
}
body { body {
font-family: 'DM Mono', monospace; font-family: system-ui, sans-serif;
background: var(--bg); background: #1f1f1f;
color: var(--text); color: #f0f0f0;
min-height: 100vh; min-height: 100vh;
overflow-x: hidden;
} }
/* Grid background */
body::before {
content: '';
position: fixed;
inset: 0;
background-image:
linear-gradient(rgba(124,106,255,0.03) 1px, transparent 1px),
linear-gradient(90deg, rgba(124,106,255,0.03) 1px, transparent 1px);
background-size: 40px 40px;
pointer-events: none;
z-index: 0;
}
.orb { position: fixed; border-radius: 50%; filter: blur(100px); opacity: 0.08; pointer-events: none; z-index: 0; }
.orb1 { width: 600px; height: 600px; background: var(--accent); top: -200px; left: -200px; }
.orb2 { width: 400px; height: 400px; background: var(--accent2); bottom: -100px; right: -100px; }
/* ── TOPBAR ── */
header { header {
position: relative; z-index: 10; display: flex;
display: flex; align-items: center; justify-content: space-between; align-items: center;
padding: 20px 36px; justify-content: space-between;
border-bottom: 1px solid var(--border); padding: 18px 32px;
background: rgba(10,10,15,0.8); border-bottom: 1px solid #2e2e2e;
backdrop-filter: blur(12px); background: #1a1a1a;
animation: fadeDown 0.5s ease forwards;
} }
@keyframes fadeDown { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }
.logo { .logo {
font-family: 'Syne', sans-serif; font-size: 17px;
font-size: 18px; font-weight: 800; font-weight: 700;
letter-spacing: -0.02em;
} }
.logo span { background: linear-gradient(135deg, var(--accent), var(--accent2)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.header-right { display: flex; align-items: center; gap: 20px; } .header-right {
display: flex;
align-items: center;
gap: 20px;
}
.status-dot { .status-dot {
display: flex; align-items: center; gap: 8px; display: flex;
font-size: 11px; color: var(--muted); letter-spacing: 0.05em; align-items: center;
gap: 8px;
font-size: 12px;
color: #888;
} }
.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--success); box-shadow: 0 0 6px var(--success); animation: pulse 2s infinite; }
.dot {
width: 7px;
height: 7px;
border-radius: 50%;
background: #4ade80;
animation: pulse 2s infinite;
}
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } } @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }
.logout { .logout {
font-family: 'DM Mono', monospace; font-family: inherit;
font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; font-size: 12px;
color: var(--muted); background: none; border: 1px solid var(--border); color: #888;
padding: 6px 14px; border-radius: 2px; cursor: pointer; background: none;
transition: color 0.2s, border-color 0.2s; border: 1px solid #3a3a3a;
padding: 6px 14px;
border-radius: 6px;
cursor: pointer;
transition: color 0.15s, border-color 0.15s;
} }
.logout:hover { color: var(--text); border-color: var(--muted); } .logout:hover { color: #f0f0f0; border-color: #666; }
/* ── MAIN ── */
main { main {
position: relative; z-index: 1; max-width: 1100px;
max-width: 1100px; margin: 0 auto; margin: 0 auto;
padding: 40px 36px; padding: 36px 32px;
} }
.welcome { .welcome {
margin-bottom: 40px; margin-bottom: 36px;
animation: fadeUp 0.5s 0.1s ease both; text-align: center;
} }
@keyframes fadeUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } } .welcome .label {
font-size: 14px;
letter-spacing: 0.15em;
text-transform: uppercase;
color: #2563eb;
margin-bottom: 8px;
}
.welcome .label { font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent); margin-bottom: 8px; } .welcome h1 {
.welcome h1 { font-family: 'Syne', sans-serif; font-size: 28px; font-weight: 800; letter-spacing: -0.02em; } font-size: 30px;
.welcome h1 span { background: linear-gradient(135deg, var(--accent), var(--accent2)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } font-weight: 700;
}
/* ── GRID ── */
.grid { .grid {
display: grid; display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 16px; gap: 14px;
margin-bottom: 32px; margin-bottom: 32px;
} }
.card { .card {
background: var(--panel); background: #2a2a2a;
border: 1px solid var(--border); border: 1px solid #333;
border-radius: 2px; border-radius: 8px;
padding: 24px; padding: 22px;
position: relative; position: relative;
overflow: hidden;
animation: fadeUp 0.5s ease both;
} }
.card:nth-child(1) { animation-delay: 0.15s; } .card-label {
.card:nth-child(2) { animation-delay: 0.22s; } font-size: 11px;
.card:nth-child(3) { animation-delay: 0.29s; } letter-spacing: 0.1em;
.card:nth-child(4) { animation-delay: 0.36s; } text-transform: uppercase;
color: #888;
.card::before { margin-bottom: 10px;
content: '';
position: absolute; top: 0; left: 0; right: 0;
height: 1px;
background: linear-gradient(90deg, var(--accent), transparent);
} }
.card-label { font-size: 10px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--muted); margin-bottom: 12px; } .card-value {
.card-value { font-family: 'Syne', sans-serif; font-size: 28px; font-weight: 800; letter-spacing: -0.02em; } font-size: 22px;
.card-sub { font-size: 11px; color: var(--muted); margin-top: 6px; } font-weight: 700;
}
.card-sub {
font-size: 12px;
color: #666;
margin-top: 6px;
}
.card-icon { .card-icon {
position: absolute; top: 20px; right: 20px; position: absolute;
width: 32px; height: 32px; opacity: 0.15; top: 20px;
right: 20px;
width: 28px;
height: 28px;
opacity: 0.15;
} }
/* ── ACTIONS ── */
.section-title { .section-title {
font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; font-size: 11px;
color: var(--muted); margin-bottom: 16px; letter-spacing: 0.15em;
display: flex; align-items: center; gap: 10px; text-transform: uppercase;
animation: fadeUp 0.5s 0.4s ease both; color: #666;
margin-bottom: 14px;
display: flex;
align-items: center;
gap: 10px;
} }
.section-title::after { content: ''; flex: 1; height: 1px; background: var(--border); } .section-title::after { content: ''; flex: 1; height: 1px; background: #2e2e2e; }
.actions { .actions {
display: grid; display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 12px; gap: 12px;
animation: fadeUp 0.5s 0.45s ease both;
} }
.action-btn { .action-btn {
background: var(--panel); background: #2a2a2a;
border: 1px solid var(--border); border: 1px solid #333;
border-radius: 2px; border-radius: 8px;
padding: 18px 20px; padding: 18px 20px;
cursor: pointer; cursor: pointer;
text-align: left; text-align: left;
transition: border-color 0.2s, background 0.2s, transform 0.1s; color: #f0f0f0;
position: relative; overflow: hidden; position: relative;
color: var(--text); /* ← ajouter ça */ transition: border-color 0.15s, background 0.15s;
} }
.action-btn:hover { border-color: var(--accent); background: rgba(124,106,255,0.05); } .action-btn:hover { border-color: #2563eb; background: #2e2e3a; }
.action-btn:active { transform: scale(0.98); } .action-btn:active { transform: scale(0.98); }
.action-btn .a-label { .action-btn .a-label {
font-family: 'Syne', sans-serif; font-size: 14px;
font-size: 13px; font-weight: 700; font-weight: 600;
letter-spacing: 0.02em; display: block; margin-bottom: 4px; display: block;
margin-bottom: 4px;
}
.action-btn .a-sub {
font-size: 11px;
color: #888;
} }
.action-btn .a-sub { font-size: 10px; color: var(--muted); letter-spacing: 0.05em; }
.action-btn .a-arrow { .action-btn .a-arrow {
position: absolute; right: 16px; top: 50%; transform: translateY(-50%); position: absolute;
color: var(--muted); font-size: 16px; right: 16px;
transition: color 0.2s, right 0.2s; top: 50%;
transform: translateY(-50%);
color: #555;
font-size: 18px;
transition: color 0.15s, right 0.15s;
} }
.action-btn:hover .a-arrow { color: var(--accent); right: 12px; } .action-btn:hover .a-arrow { color: #2563eb; right: 12px; }
/* ── TOAST ── */
.toast { .toast {
position: fixed; bottom: 28px; right: 28px; position: fixed;
background: var(--panel); border: 1px solid var(--border); bottom: 24px;
border-radius: 2px; padding: 12px 18px; right: 24px;
font-size: 12px; color: var(--text); background: #2a2a2a;
display: flex; align-items: center; gap: 10px; border: 1px solid #333;
transform: translateY(20px); opacity: 0; border-radius: 8px;
padding: 12px 18px;
font-size: 13px;
color: #f0f0f0;
display: flex;
align-items: center;
gap: 10px;
transform: translateY(20px);
opacity: 0;
transition: transform 0.3s, opacity 0.3s; transition: transform 0.3s, opacity 0.3s;
z-index: 100; z-index: 100;
} }
.toast.show { transform: translateY(0); opacity: 1; } .toast.show { transform: translateY(0); opacity: 1; }
.toast-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--success); flex-shrink: 0; } .toast-dot { width: 6px; height: 6px; border-radius: 50%; background: #4ade80; flex-shrink: 0; }
</style> </style>
</head> </head>
<body> <body>
<div class="orb orb1"></div>
<div class="orb orb2"></div>
<header> <header>
<div class="logo">Loustique <span>Home</span></div> <div class="logo">Loustiques Home</div>
<div class="header-right"> <div class="header-right">
<div class="status-dot"><div class="dot"></div> Système actif</div> <div class="status-dot"><div class="dot"></div> Système actif</div>
<button class="logout" onclick="window.location.href='/'">Déconnexion</button> <button class="logout" onclick="window.location.href='/'">Déconnexion</button>
@@ -214,32 +220,32 @@
<main> <main>
<div class="welcome"> <div class="welcome">
<div class="label">Tableau de bord</div> <div class="label">Tableau de bord</div>
<h1>Bienvenue <span>chez vous.</span></h1> <h1>Bienvenue chez vous</h1>
</div> </div>
<div class="grid"> <div class="grid">
<div class="card"> <div class="card">
<svg class="card-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg> <svg class="card-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>
<div class="card-label">Statut</div> <div class="card-label">Statut</div>
<div class="card-value" style="color: var(--success); font-size:20px;">En ligne</div> <div class="card-value" style="color:#4ade80;">En ligne</div>
<div class="card-sub">Serveur opérationnel</div> <div class="card-sub">Serveur opérationnel</div>
</div> </div>
<div class="card"> <div class="card">
<svg class="card-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg> <svg class="card-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
<div class="card-label">Heure locale</div> <div class="card-label">Heure locale</div>
<div class="card-value" id="clock" style="font-size:22px;">--:--</div> <div class="card-value" id="clock">--:--</div>
<div class="card-sub" id="date-display">--</div> <div class="card-sub" id="date-display">--</div>
</div> </div>
<div class="card"> <div class="card">
<svg class="card-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="2" y="3" width="20" height="14" rx="2"/><line x1="8" y1="21" x2="16" y2="21"/><line x1="12" y1="17" x2="12" y2="21"/></svg> <svg class="card-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="2" y="3" width="20" height="14" rx="2"/><line x1="8" y1="21" x2="16" y2="21"/><line x1="12" y1="17" x2="12" y2="21"/></svg>
<div class="card-label">Raspberry Pi</div> <div class="card-label">Raspberry Pi</div>
<div class="card-value" style="font-size:20px; color: var(--accent);">Actif</div> <div class="card-value" style="color:#2563eb;">Actif</div>
<div class="card-sub">Flask 3.1</div> <div class="card-sub">Flask 3.1</div>
</div> </div>
<div class="card"> <div class="card">
<svg class="card-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg> <svg class="card-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>
<div class="card-label">Session</div> <div class="card-label">Session</div>
<div class="card-value" style="font-size:20px;">Authentifiée</div> <div class="card-value">Authentifiée</div>
<div class="card-sub">Accès autorisé</div> <div class="card-sub">Accès autorisé</div>
</div> </div>
</div> </div>
@@ -262,7 +268,7 @@
<span class="a-sub">État de la connexion</span> <span class="a-sub">État de la connexion</span>
<span class="a-arrow">›</span> <span class="a-arrow">›</span>
</button> </button>
<button class="action-btn" onclick="go_admin('Fonction à venir...')"> <button class="action-btn" onclick="go_admin()">
<span class="a-label">Administration</span> <span class="a-label">Administration</span>
<span class="a-sub">Administrer les loustiques</span> <span class="a-sub">Administrer les loustiques</span>
<span class="a-arrow">›</span> <span class="a-arrow">›</span>
@@ -276,7 +282,6 @@
</div> </div>
<script> <script>
function updateClock() { function updateClock() {
const now = new Date(); const now = new Date();
document.getElementById("clock").textContent = document.getElementById("clock").textContent =
@@ -287,14 +292,12 @@
updateClock(); updateClock();
setInterval(updateClock, 1000); setInterval(updateClock, 1000);
async function callLed() { async function callLed() {
try { try {
const res = await fetch('/led', { const res = await fetch('/led', {
method: 'POST', method: 'POST',
headers: { 'Content-Type': 'application/json' } headers: { 'Content-Type': 'application/json' }
}); });
const text = await res.text();
showToast("LED activée !"); showToast("LED activée !");
} catch { } catch {
showToast("Erreur lors de l'appel LED."); showToast("Erreur lors de l'appel LED.");
@@ -304,6 +307,7 @@
function go_admin() { function go_admin() {
window.location.href = "/admin"; window.location.href = "/admin";
} }
function showToast(msg) { function showToast(msg) {
const toast = document.getElementById("toast"); const toast = document.getElementById("toast");
document.getElementById("toast-text").textContent = msg; document.getElementById("toast-text").textContent = msg;

240
flask/templates/index.html
View File

@@ -3,177 +3,140 @@
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/> <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Connexion</title> <title>Loustiques Home - Connexion</title>
<link href="https://fonts.googleapis.com/css2?family=Syne:wght@400;700;800&family=DM+Mono:wght@300;400&display=swap" rel="stylesheet"/>
<style> <style>
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } * {
box-sizing: border-box;
:root { margin: 0;
--bg: #0a0a0f; padding: 0;
--panel: #111118;
--border: #1e1e2e;
--accent: #7c6aff;
--accent2: #ff6ab0;
--text: #e8e6f0;
--muted: #6b6880;
--success: #4ade80;
--error: #f87171;
} }
body { body {
font-family: 'DM Mono', monospace; font-family: system-ui, sans-serif;
background: var(--bg); background: #1f1f1f;
color: var(--text); color: #f0f0f0;
min-height: 100vh; min-height: 100vh;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
overflow: hidden;
} }
body::before { .carte {
content: ''; width: 380px;
position: fixed;
inset: 0;
background-image:
linear-gradient(rgba(124,106,255,0.04) 1px, transparent 1px),
linear-gradient(90deg, rgba(124,106,255,0.04) 1px, transparent 1px);
background-size: 40px 40px;
animation: gridShift 20s linear infinite;
pointer-events: none;
}
@keyframes gridShift {
0% { transform: translate(0, 0); }
100% { transform: translate(40px, 40px); }
}
.orb { position: fixed; border-radius: 50%; filter: blur(80px); opacity: 0.15; pointer-events: none; }
.orb1 { width: 500px; height: 500px; background: var(--accent); top: -150px; left: -150px; animation: float1 12s ease-in-out infinite; }
.orb2 { width: 400px; height: 400px; background: var(--accent2); bottom: -100px; right: -100px; animation: float2 15s ease-in-out infinite; }
@keyframes float1 { 0%, 100% { transform: translate(0,0); } 50% { transform: translate(40px,30px); } }
@keyframes float2 { 0%, 100% { transform: translate(0,0); } 50% { transform: translate(-30px,-40px); } }
.card {
position: relative;
background: var(--panel);
border: 1px solid var(--border);
border-radius: 2px;
padding: 48px 44px;
width: 420px;
max-width: 95vw; max-width: 95vw;
animation: cardIn 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards; background: #2a2a2a;
opacity: 0; border-radius: 8px;
transform: translateY(20px); padding: 40px 36px;
} }
@keyframes cardIn { to { opacity: 1; transform: translateY(0); } } h1 {
font-size: 26px;
.card::before { font-weight: 700;
content: ''; margin-bottom: 8px;
position: absolute; text-align: center;
top: 0; left: 0; right: 0;
height: 2px;
background: linear-gradient(90deg, var(--accent), var(--accent2));
} }
.tag { font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent); margin-bottom: 20px; display: flex; align-items: center; gap: 8px; } .soustitre {
.tag::before { content: ''; display: inline-block; width: 18px; height: 1px; background: var(--accent); } font-size: 14px;
color: #888;
margin-bottom: 36px;
text-align: center;
}
h1 { font-family: 'Syne', sans-serif; font-size: 32px; font-weight: 800; letter-spacing: -0.03em; margin-bottom: 8px; } .champ {
h1 span { background: linear-gradient(135deg, var(--accent), var(--accent2)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } margin-bottom: 18px;
}
.subtitle { font-size: 12px; color: var(--muted); margin-bottom: 36px; letter-spacing: 0.02em; } label {
display: block;
.field { margin-bottom: 20px; } font-size: 13px;
font-weight: 500;
label { display: block; font-size: 10px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; } margin-bottom: 6px;
color: #aaa;
}
input { input {
width: 100%; width: 100%;
background: rgba(255,255,255,0.03); padding: 11px 14px;
border: 1px solid var(--border); font-size: 14px;
border-radius: 2px; font-family: inherit;
padding: 12px 14px; border: 1px solid #3a3a3a;
font-family: 'DM Mono', monospace; border-radius: 6px;
font-size: 13px;
color: var(--text);
outline: none; outline: none;
transition: border-color 0.2s, background 0.2s, box-shadow 0.2s; transition: border-color 0.15s;
color: #f0f0f0;
background: #333;
}
input:focus {
border-color: #2563eb;
}
input::placeholder {
color: #555;
} }
input:focus { border-color: var(--accent); background: rgba(124,106,255,0.05); box-shadow: 0 0 0 3px rgba(124,106,255,0.1); }
input::placeholder { color: var(--muted); }
button { button {
width: 100%; width: 100%;
margin-top: 28px; margin-top: 10px;
padding: 14px; padding: 12px;
background: var(--accent); background: #2563eb;
border: none;
border-radius: 2px;
font-family: 'Syne', sans-serif;
font-size: 13px;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: #fff; color: #fff;
border: none;
border-radius: 6px;
font-size: 14px;
font-weight: 600;
font-family: inherit;
cursor: pointer; cursor: pointer;
position: relative; transition: background 0.15s;
overflow: hidden;
transition: background 0.2s, transform 0.1s;
} }
button:hover { background: #6a58ee; }
button:active { transform: scale(0.98); } button:hover { background: #1d4ed8; }
button:disabled { opacity: 0.5; cursor: not-allowed; transform: none; } button:active { background: #1e40af; }
button.loading::after { button:disabled { opacity: 0.4; cursor: not-allowed; }
content: '';
position: absolute; inset: 0;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.15), transparent);
animation: shimmer 1.2s infinite;
}
@keyframes shimmer { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }
.message { .message {
margin-top: 16px; padding: 10px 14px; border-radius: 2px; margin-top: 14px;
font-size: 12px; letter-spacing: 0.03em; font-size: 13px;
display: none; align-items: center; gap: 8px; display: none;
}
.message.error {
display: block;
color: #f87171;
}
.message.success {
display: block;
color: #4ade80;
} }
.message.success { display: flex; background: rgba(74,222,128,0.08); border: 1px solid rgba(74,222,128,0.2); color: var(--success); }
.message.error { display: flex; background: rgba(248,113,113,0.08); border: 1px solid rgba(248,113,113,0.2); color: var(--error); }
.footer { margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--border); font-size: 10px; color: var(--muted); text-align: center; letter-spacing: 0.05em; } .footer {
margin-top: 28px;
font-size: 12px;
color: #555;
}
</style> </style>
</head> </head>
<body> <body>
<div class="orb orb1"></div>
<div class="orb orb2"></div>
<div class="card"> <div class="carte">
<div class="tag">Authentification</div> <h1>Loustiques Home</h1>
<h1>Loustique Home</span></h1> <p class="soustitre">Connectez-vous pour accéder à votre espace.</p>
<p class="subtitle">Connectez-vous pour accéder à votre espace.</p>
<div class="field"> <div class="champ">
<label for="username">Identifiant</label> <label for="username">Identifiant</label>
<input type="text" id="username" placeholder="Nom du loustique" autocomplete="username" /> <input type="text" id="username" placeholder="Nom du loustique" autocomplete="username" />
</div> </div>
<div class="field"> <div class="champ">
<label for="password">Mot de passe</label> <label for="password">Mot de passe</label>
<input type="password" id="password" placeholder="Le secret du loustique" autocomplete="current-password" /> <input type="password" id="password" placeholder="Wola ouais" autocomplete="current-password" />
</div> </div>
<button id="btn" onclick="handleLogin()">Se connecter</button> <button id="btn" onclick="handleLogin()">Se connecter</button>
<div class="message" id="msg"> <div class="message" id="msg"></div>
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path id="icon-path"/>
</svg>
<span id="msg-text"></span>
</div>
<div class="footer">Accès réservé aux Utilisateurs étant ajoutés par les loustiques</div> <p class="footer">Accès réservé aux utilisateurs ajoutés par les loustiques.</p>
</div> </div>
<script> <script>
@@ -187,16 +150,17 @@
const username = document.getElementById("username").value.trim(); const username = document.getElementById("username").value.trim();
const password = document.getElementById("password").value; const password = document.getElementById("password").value;
const btn = document.getElementById("btn"); const btn = document.getElementById("btn");
const msg = document.getElementById("msg");
document.getElementById("msg").className = "message"; msg.className = "message";
if (!username || !password) { if (!username || !password) {
showMessage("error", "Veuillez remplir tous les champs."); msg.className = "message error";
msg.textContent = "Veuillez remplir tous les champs.";
return; return;
} }
btn.disabled = true; btn.disabled = true;
btn.classList.add("loading");
btn.textContent = "Vérification..."; btn.textContent = "Vérification...";
try { try {
@@ -208,30 +172,22 @@
const data = await res.json(); const data = await res.json();
if (data.success) { if (data.success) {
showMessage("success", data.message || "Connexion réussie !"); msg.className = "message success";
msg.textContent = "Connexion réussie !";
window.location.href = "/dashboard"; window.location.href = "/dashboard";
} else { } else {
showMessage("error", data.message || "Identifiants incorrects."); msg.className = "message error";
msg.textContent = data.message || "Identifiants incorrects.";
} }
} catch { } catch {
showMessage("error", "Impossible de contacter le serveur."); msg.className = "message error";
msg.textContent = "Impossible de contacter le serveur.";
} finally { } finally {
btn.disabled = false; btn.disabled = false;
btn.classList.remove("loading");
btn.textContent = "Se connecter"; btn.textContent = "Se connecter";
} }
} }
function showMessage(type, text) {
const msg = document.getElementById("msg");
const path = document.getElementById("icon-path");
document.getElementById("msg-text").textContent = text;
msg.className = "message " + type;
path.setAttribute("d", type === "success"
? "M20 6L9 17l-5-5"
: "M12 2a10 10 0 1 0 0 20A10 10 0 0 0 12 2zm0 6v4m0 4h.01"
);
}
</script> </script>
</body> </body>
</html> </html>

213
flask/templates/log.html
View File

@@ -3,33 +3,14 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Logs — Loustiques</title> <title>Loustiques Home - Logs</title>
<link href="https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&family=DM+Sans:wght@300;400;500&display=swap" rel="stylesheet">
<style> <style>
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
--bg: #0f0f0f;
--surface: #181818;
--surface2: #222222;
--border: rgba(255,255,255,0.08);
--border-hover: rgba(255,255,255,0.18);
--text: #f0ede8;
--muted: #888880;
--accent: #c8f060;
--accent-dim: rgba(200,240,96,0.12);
--danger: #ff5f57;
--danger-dim: rgba(255,95,87,0.12);
--success: #30d158;
--warning: #ff9f0a;
--mono: 'Space Mono', monospace;
--sans: 'DM Sans', sans-serif;
}
body { body {
background: var(--bg); font-family: system-ui, sans-serif;
color: var(--text); background: #1f1f1f;
font-family: var(--sans); color: #f0f0f0;
min-height: 100vh; min-height: 100vh;
display: flex; display: flex;
} }
@@ -37,8 +18,8 @@
aside { aside {
width: 220px; width: 220px;
min-height: 100vh; min-height: 100vh;
background: var(--surface); background: #1a1a1a;
border-right: 1px solid var(--border); border-right: 1px solid #2e2e2e;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
padding: 2rem 1.25rem; padding: 2rem 1.25rem;
@@ -47,22 +28,20 @@
} }
.logo { .logo {
font-family: var(--mono); font-size: 20px;
font-size: 13px; font-weight: 700;
color: var(--accent); color: #f0f0f0;
letter-spacing: 0.12em;
text-transform: uppercase;
margin-bottom: 2.5rem; margin-bottom: 2.5rem;
padding-bottom: 1.5rem; padding-bottom: 1.5rem;
border-bottom: 1px solid var(--border); border-bottom: 1px solid #2e2e2e;
} }
.logo span { .logo span {
display: block; display: block;
font-size: 10px; font-size: 15px;
color: var(--muted); color: #666;
margin-top: 4px; margin-top: 4px;
letter-spacing: 0.06em; font-weight: 400;
} }
nav a { nav a {
@@ -71,27 +50,26 @@
gap: 10px; gap: 10px;
padding: 8px 10px; padding: 8px 10px;
border-radius: 6px; border-radius: 6px;
font-size: 13.5px; font-size: 13px;
color: var(--muted); color: #888;
text-decoration: none; text-decoration: none;
margin-bottom: 2px; margin-bottom: 2px;
transition: all 0.15s; transition: all 0.15s;
} }
nav a.active, nav a:hover { nav a.active, nav a:hover {
background: var(--accent-dim); background: #2e2e3a;
color: var(--accent); color: #2563eb;
} }
nav a svg { width: 15px; height: 15px; flex-shrink: 0; } nav a svg { width: 15px; height: 15px; flex-shrink: 0; }
.sidebar-footer { .sidebar-footer {
margin-top: auto; margin-top: auto;
font-size: 12px; font-size: 15px;
color: var(--muted); color: #555;
font-family: var(--mono);
padding-top: 1rem; padding-top: 1rem;
border-top: 1px solid var(--border); border-top: 1px solid #2e2e2e;
} }
main { main {
@@ -107,40 +85,21 @@
margin-bottom: 2rem; margin-bottom: 2rem;
} }
.page-header h1 { .page-header h1 { font-size: 22px; font-weight: 700; margin-bottom: 4px; }
font-family: var(--mono); .page-header p { font-size: 14px; color: #888; }
font-size: 22px;
font-weight: 700;
color: var(--text);
margin-bottom: 4px;
}
.page-header p { font-size: 14px; color: var(--muted); } .controls { display: flex; align-items: center; gap: 10px; }
.controls {
display: flex;
align-items: center;
gap: 10px;
}
.live-dot { .live-dot {
width: 8px; width: 8px; height: 8px;
height: 8px;
border-radius: 50%; border-radius: 50%;
background: var(--success); background: #4ade80;
animation: pulse 2s infinite; animation: pulse 2s infinite;
} }
@keyframes pulse { @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }
0%, 100% { opacity: 1; }
50% { opacity: 0.3; }
}
.live-label { .live-label { font-size: 11px; color: #666; }
font-family: var(--mono);
font-size: 11px;
color: var(--muted);
}
.btn { .btn {
display: inline-flex; display: inline-flex;
@@ -148,54 +107,42 @@
gap: 6px; gap: 6px;
padding: 7px 14px; padding: 7px 14px;
border-radius: 6px; border-radius: 6px;
border: 1px solid var(--border); border: 1px solid #3a3a3a;
font-family: var(--mono); font-family: inherit;
font-size: 11px; font-size: 12px;
letter-spacing: 0.05em;
cursor: pointer; cursor: pointer;
background: var(--surface); background: #2a2a2a;
color: var(--muted); color: #888;
transition: all 0.15s; transition: all 0.15s;
} }
.btn:hover { border-color: #555; color: #f0f0f0; }
.btn:hover { border-color: var(--border-hover); color: var(--text); } .btn-danger { color: #f87171; border-color: rgba(248,113,113,0.3); background: rgba(248,113,113,0.05); }
.btn-danger:hover { background: rgba(248,113,113,0.1); }
.btn-danger { .filters { display: flex; gap: 8px; margin-bottom: 1rem; }
color: var(--danger);
border-color: rgba(255,95,87,0.2);
background: var(--danger-dim);
}
.btn-danger:hover { background: rgba(255,95,87,0.2); }
.filters {
display: flex;
gap: 8px;
margin-bottom: 1rem;
}
.filter-btn { .filter-btn {
padding: 5px 12px; padding: 5px 12px;
border-radius: 5px; border-radius: 5px;
border: 1px solid var(--border); border: 1px solid #3a3a3a;
background: transparent; background: transparent;
font-family: var(--mono); font-family: inherit;
font-size: 11px; font-size: 11px;
color: var(--muted); color: #888;
cursor: pointer; cursor: pointer;
transition: all 0.15s; transition: all 0.15s;
letter-spacing: 0.05em;
} }
.filter-btn.active { background: var(--accent-dim); color: var(--accent); border-color: rgba(200,240,96,0.25); } .filter-btn.active { background: #2e2e3a; color: #2563eb; border-color: rgba(37,99,235,0.3); }
.filter-btn[data-level="ERROR"].active { background: var(--danger-dim); color: var(--danger); border-color: rgba(255,95,87,0.25); } .filter-btn[data-level="ERROR"].active { background: rgba(248,113,113,0.1); color: #f87171; border-color: rgba(248,113,113,0.3); }
.filter-btn[data-level="WARNING"].active { background: rgba(255,159,10,0.1); color: var(--warning); border-color: rgba(255,159,10,0.25); } .filter-btn[data-level="WARNING"].active { background: rgba(251,191,36,0.1); color: #fbbf24; border-color: rgba(251,191,36,0.3); }
.filter-btn[data-level="INFO"].active { background: rgba(48,209,88,0.08); color: var(--success); border-color: rgba(48,209,88,0.25); } .filter-btn[data-level="INFO"].active { background: rgba(74,222,128,0.08); color: #4ade80; border-color: rgba(74,222,128,0.3); }
.log-container { .log-container {
background: var(--surface); background: #2a2a2a;
border: 1px solid var(--border); border: 1px solid #333;
border-radius: 12px; border-radius: 8px;
overflow: hidden; overflow: hidden;
} }
@@ -203,43 +150,36 @@
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
padding: 12px 16px; padding: 10px 16px;
border-bottom: 1px solid var(--border); border-bottom: 1px solid #333;
} }
.log-count { .log-count { font-size: 11px; color: #666; }
font-family: var(--mono);
font-size: 11px;
color: var(--muted);
}
.log-scroll { .log-scroll {
height: calc(100vh - 280px); height: calc(100vh - 280px);
overflow-y: auto; overflow-y: auto;
padding: 0; font-family: monospace;
} }
.log-scroll::-webkit-scrollbar { width: 4px; } .log-scroll::-webkit-scrollbar { width: 4px; }
.log-scroll::-webkit-scrollbar-track { background: transparent; } .log-scroll::-webkit-scrollbar-track { background: transparent; }
.log-scroll::-webkit-scrollbar-thumb { background: var(--border-hover); border-radius: 2px; } .log-scroll::-webkit-scrollbar-thumb { background: #444; border-radius: 2px; }
.log-line { .log-line {
display: grid; display: grid;
grid-template-columns: 160px 70px 80px 1fr; grid-template-columns: 160px 70px 80px 1fr;
gap: 0;
padding: 7px 16px; padding: 7px 16px;
border-bottom: 1px solid rgba(255,255,255,0.03); border-bottom: 1px solid rgba(255,255,255,0.03);
font-family: var(--mono);
font-size: 12px; font-size: 12px;
transition: background 0.1s;
align-items: center; align-items: center;
transition: background 0.1s;
} }
.log-line:hover { background: #333; }
.log-line:hover { background: var(--surface2); }
.log-line:last-child { border-bottom: none; } .log-line:last-child { border-bottom: none; }
.log-time { color: var(--muted); font-size: 11px; } .log-time { color: #666; font-size: 11px; }
.log-name { color: var(--muted); font-size: 11px; } .log-name { color: #666; font-size: 11px; }
.log-level { .log-level {
font-size: 10px; font-size: 10px;
@@ -247,15 +187,14 @@
border-radius: 4px; border-radius: 4px;
text-align: center; text-align: center;
width: fit-content; width: fit-content;
letter-spacing: 0.06em;
} }
.level-INFO { background: rgba(48,209,88,0.1); color: var(--success); } .level-INFO { background: rgba(74,222,128,0.1); color: #4ade80; }
.level-ERROR { background: var(--danger-dim); color: var(--danger); } .level-ERROR { background: rgba(248,113,113,0.1); color: #f87171; }
.level-WARNING { background: rgba(255,159,10,0.1); color: var(--warning); } .level-WARNING { background: rgba(251,191,36,0.1); color: #fbbf24; }
.level-DEBUG { background: var(--surface2); color: var(--muted); } .level-DEBUG { background: #333; color: #666; }
.log-msg { color: var(--text); padding-left: 12px; word-break: break-all; } .log-msg { color: #f0f0f0; padding-left: 12px; word-break: break-all; }
.empty-state { .empty-state {
display: flex; display: flex;
@@ -263,27 +202,25 @@
align-items: center; align-items: center;
justify-content: center; justify-content: center;
height: 200px; height: 200px;
color: var(--muted); color: #555;
font-family: var(--mono); font-size: 13px;
font-size: 12px;
gap: 8px; gap: 8px;
} }
.search-input { .search-input {
background: var(--surface2); background: #333;
border: 1px solid var(--border); border: 1px solid #3a3a3a;
border-radius: 6px; border-radius: 6px;
padding: 6px 12px; padding: 6px 12px;
color: var(--text); color: #f0f0f0;
font-family: var(--mono); font-family: inherit;
font-size: 12px; font-size: 12px;
outline: none; outline: none;
width: 220px; width: 220px;
transition: border-color 0.15s; transition: border-color 0.15s;
} }
.search-input:focus { border-color: #2563eb; }
.search-input:focus { border-color: var(--accent); } .search-input::placeholder { color: #555; }
.search-input::placeholder { color: var(--muted); }
</style> </style>
</head> </head>
<body> <body>
@@ -291,7 +228,7 @@
<aside> <aside>
<div class="logo"> <div class="logo">
Loustiques Loustiques
<span>panneau admin</span> <span>Panneau admin</span>
</div> </div>
<nav> <nav>
<a href="/admin"> <a href="/admin">
@@ -307,16 +244,14 @@
Système Système
</a> </a>
</nav> </nav>
<div class="sidebar-footer"> <div class="sidebar-footer">v0.1.0 — local</div>
v0.1.0 — local
</div>
</aside> </aside>
<main> <main>
<div class="page-header"> <div class="page-header">
<div> <div>
<h1>logs</h1> <h1>Logs</h1>
<p>Flux en temps réel de <code style="font-family:var(--mono);font-size:12px;color:var(--muted)">/var/log/loustique.log</code></p> <p>Flux en temps réel de <code style="font-size:12px;color:#888">/var/log/loustique.log</code></p>
</div> </div>
<div class="controls"> <div class="controls">
<div class="live-dot" id="live-dot"></div> <div class="live-dot" id="live-dot"></div>
@@ -441,13 +376,13 @@ function toggleLive() {
const btn = document.getElementById('toggle-label'); const btn = document.getElementById('toggle-label');
if (liveEnabled) { if (liveEnabled) {
dot.style.animationPlayState = 'running'; dot.style.animationPlayState = 'running';
dot.style.background = 'var(--success)'; dot.style.background = '#4ade80';
label.textContent = 'live'; label.textContent = 'live';
btn.textContent = 'Pause'; btn.textContent = 'Pause';
startInterval(); startInterval();
} else { } else {
dot.style.animationPlayState = 'paused'; dot.style.animationPlayState = 'paused';
dot.style.background = 'var(--muted)'; dot.style.background = '#555';
label.textContent = 'pausé'; label.textContent = 'pausé';
btn.textContent = 'Reprendre'; btn.textContent = 'Reprendre';
clearInterval(interval); clearInterval(interval);