Gilles Soulier
a0f47bf966
Ajoute les trois plans d'implémentation (agent Rust, serveur Go, dashboard), les consignes de design, les fichiers de brainstorming et le .gitignore. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
647 lines
31 KiB
HTML
647 lines
31 KiB
HTML
<!DOCTYPE html>
|
|
<html data-theme="dark">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>Nanometrics — Layout A v2</title>
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600;700&family=Share+Tech+Mono:wght@400&display=swap" rel="stylesheet">
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
|
|
<script src="/helper.js"></script>
|
|
<style>
|
|
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
|
|
|
:root[data-theme="dark"] {
|
|
--accent:#fe8019; --accent-soft:#d65d0e; --accent-glow:rgba(254,128,25,0.3);
|
|
--bg-0:#1d1813; --bg-1:#2a231d; --bg-2:#32291f; --bg-3:#3c332a; --bg-4:#4a3f33; --bg-5:#57493c;
|
|
--ink-1:#f2e5c7; --ink-2:#d5c4a1; --ink-3:#a89984; --ink-4:#7c6f64;
|
|
--ok:#4dbb26; --warn:#fabd2f; --err:#fb4934; --info:#83a598; --blue:#3db0d1;
|
|
--border-1:rgba(255,255,255,0.06); --border-2:rgba(255,255,255,0.12); --border-3:rgba(255,255,255,0.22);
|
|
--shadow-2:0 4px 16px rgba(0,0,0,0.5);
|
|
--tile-3d:0 1px 0 rgba(255,255,255,0.08) inset,0 -1px 0 rgba(0,0,0,0.3) inset,0 4px 16px rgba(0,0,0,0.5);
|
|
--font-ui:'Inter',system-ui,sans-serif; --font-mono:'JetBrains Mono',monospace; --font-terminal:'Share Tech Mono',monospace;
|
|
}
|
|
:root[data-theme="light"] {
|
|
--accent:#af3a03; --accent-soft:#d65d0e; --accent-glow:rgba(175,58,3,0.2);
|
|
--bg-0:#d5c4a1; --bg-1:#ebdbb2; --bg-2:#d5c4a1; --bg-3:#bdae93; --bg-4:#a89984; --bg-5:#928374;
|
|
--ink-1:#3c3836; --ink-2:#504945; --ink-3:#665c54; --ink-4:#7c6f64;
|
|
--ok:#3c911c; --warn:#b57614; --err:#9d0006; --info:#427b58; --blue:#2d82a3;
|
|
--border-1:rgba(0,0,0,0.08); --border-2:rgba(0,0,0,0.15); --border-3:rgba(0,0,0,0.25);
|
|
--shadow-2:0 4px 16px rgba(0,0,0,0.15);
|
|
--tile-3d:0 1px 0 rgba(255,255,255,0.5) inset,0 -1px 0 rgba(0,0,0,0.1) inset,0 4px 16px rgba(0,0,0,0.12);
|
|
--font-ui:'Inter',system-ui,sans-serif; --font-mono:'JetBrains Mono',monospace; --font-terminal:'Share Tech Mono',monospace;
|
|
}
|
|
|
|
body { background:var(--bg-1); color:var(--ink-1); font-family:var(--font-ui); font-size:13px; height:100vh; display:flex; flex-direction:column; overflow:hidden; transition:background .2s, color .2s; }
|
|
|
|
/* ══ HEADER ══ */
|
|
.header {
|
|
background:var(--bg-2); border-bottom:1px solid var(--border-2);
|
|
padding:0 20px; height:48px; display:flex; align-items:center; gap:14px; flex-shrink:0;
|
|
}
|
|
.header-logo { display:flex; align-items:center; gap:8px; }
|
|
.header-logo .led { width:9px; height:9px; border-radius:50%; background:var(--accent); box-shadow:0 0 8px var(--accent-glow); animation:pulse 2s infinite; }
|
|
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.5} }
|
|
.header-logo .name { font-weight:700; font-size:14px; letter-spacing:.04em; color:var(--ink-1); font-family:var(--font-terminal); }
|
|
.header-logo .version { font-size:10px; color:var(--ink-4); font-family:var(--font-terminal); }
|
|
|
|
.header-spacer { flex:1; }
|
|
|
|
.header-stats { display:flex; gap:16px; align-items:center; }
|
|
.h-stat { display:flex; align-items:center; gap:6px; }
|
|
.h-stat .s-label { font-size:10px; color:var(--ink-4); font-family:var(--font-terminal); letter-spacing:.06em; }
|
|
.h-stat .s-count { font-family:var(--font-mono); font-size:13px; font-weight:600; }
|
|
.h-stat .s-count.ok { color:var(--ok); }
|
|
.h-stat .s-count.warn { color:var(--warn); }
|
|
.h-stat .s-count.err { color:var(--err); }
|
|
|
|
.header-sep { width:1px; height:24px; background:var(--border-2); }
|
|
|
|
.icon-btn {
|
|
width:34px; height:34px; border-radius:8px; border:1px solid var(--border-2);
|
|
background:var(--bg-3); color:var(--ink-2); font-size:14px;
|
|
display:flex; align-items:center; justify-content:center; cursor:pointer;
|
|
transition:background .12s, color .12s;
|
|
position:relative;
|
|
}
|
|
.icon-btn:hover { background:var(--bg-4); color:var(--accent); }
|
|
.icon-btn:active { background:var(--bg-5); box-shadow:inset 0 2px 4px rgba(0,0,0,0.3); }
|
|
.icon-btn .tooltip {
|
|
position:absolute; top:calc(100% + 6px); right:0;
|
|
background:var(--bg-0); color:var(--ink-1); font-size:11px; font-family:var(--font-ui);
|
|
padding:4px 8px; border-radius:5px; border:1px solid var(--border-2);
|
|
white-space:nowrap; opacity:0; pointer-events:none; transition:opacity .12s;
|
|
}
|
|
.icon-btn:hover .tooltip { opacity:1; }
|
|
|
|
/* ══ MAIN / GRID ══ */
|
|
.main { flex:1; padding:16px; overflow-y:auto; }
|
|
|
|
.agents-grid {
|
|
display:grid;
|
|
grid-template-columns:repeat(auto-fill, minmax(240px, 1fr));
|
|
gap:12px;
|
|
}
|
|
|
|
.tile {
|
|
background:var(--bg-3); border-radius:10px; padding:14px 16px;
|
|
border:1px solid var(--border-1); box-shadow:var(--tile-3d);
|
|
cursor:pointer; transition:border-color .15s, box-shadow .15s;
|
|
display:flex; flex-direction:column; gap:10px;
|
|
}
|
|
.tile:hover { border-color:var(--border-3); box-shadow:var(--tile-3d), 0 0 0 1px var(--border-2); }
|
|
.tile.warn-tile { border-color:rgba(250,189,47,.3); }
|
|
.tile.err-tile { border-color:rgba(251,73,52,.35); box-shadow:var(--tile-3d),0 0 18px rgba(251,73,52,.12); }
|
|
.tile.offline-tile { opacity:.55; }
|
|
|
|
/* tile header */
|
|
.tile-head { display:flex; align-items:center; gap:8px; }
|
|
.t-icon-wrap { width:28px; height:28px; border-radius:6px; background:var(--bg-4); display:flex; align-items:center; justify-content:center; color:var(--accent); font-size:13px; }
|
|
.t-info { flex:1; min-width:0; }
|
|
.t-hostname { font-weight:600; font-size:13px; color:var(--ink-1); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
|
|
.t-ip { font-family:var(--font-mono); font-size:10px; color:var(--ink-4); }
|
|
.t-led { width:8px; height:8px; border-radius:50%; flex-shrink:0; }
|
|
.t-led.ok { background:var(--ok); box-shadow:0 0 6px var(--ok); }
|
|
.t-led.warn { background:var(--warn); box-shadow:0 0 6px var(--warn); animation:pulse 1.5s infinite; }
|
|
.t-led.err { background:var(--err); box-shadow:0 0 8px var(--err); animation:pulse 1s infinite; }
|
|
.t-led.off { background:var(--ink-4); }
|
|
|
|
/* gauges */
|
|
.tile-gauges { display:flex; flex-direction:column; gap:5px; }
|
|
.gauge-row { display:flex; align-items:center; gap:8px; }
|
|
.g-label { font-size:10px; color:var(--ink-4); font-family:var(--font-terminal); letter-spacing:.04em; width:28px; }
|
|
.g-bar { flex:1; height:5px; border-radius:3px; background:var(--bg-1); overflow:hidden; }
|
|
.g-fill { height:100%; border-radius:3px; background:var(--ok); transition:width .4s ease; }
|
|
.g-fill.warn { background:var(--warn); }
|
|
.g-fill.err { background:var(--err); }
|
|
.g-val { font-family:var(--font-mono); font-size:11px; color:var(--ink-2); width:32px; text-align:right; }
|
|
|
|
/* tile footer */
|
|
.tile-foot { display:flex; align-items:center; justify-content:space-between; }
|
|
.t-uptime { font-family:var(--font-terminal); font-size:10px; color:var(--ink-4); }
|
|
.t-uptime i { margin-right:3px; }
|
|
|
|
/* ══ FOOTER ══ */
|
|
.footer {
|
|
background:var(--bg-0); border-top:1px solid var(--border-2);
|
|
height:28px; display:flex; align-items:center;
|
|
font-family:var(--font-terminal); font-size:11px; color:var(--ink-4);
|
|
flex-shrink:0;
|
|
}
|
|
.f-mode { background:var(--accent); color:var(--bg-0); padding:0 12px; height:100%; display:flex; align-items:center; font-weight:700; font-size:11px; }
|
|
.f-cell { padding:0 14px; border-right:1px solid var(--border-1); display:flex; align-items:center; gap:6px; height:100%; }
|
|
.f-cell i { font-size:10px; }
|
|
.f-cell .f-val { font-family:var(--font-mono); color:var(--ink-2); }
|
|
.f-cell .f-val.warn { color:var(--warn); }
|
|
.f-cell .f-bar { width:40px; height:4px; border-radius:2px; background:var(--bg-3); overflow:hidden; display:inline-block; vertical-align:middle; margin-left:4px; }
|
|
.f-cell .f-bar-fill { height:100%; border-radius:2px; background:var(--ok); }
|
|
.f-cell .f-bar-fill.warn { background:var(--warn); }
|
|
.f-spacer { flex:1; }
|
|
.f-right { padding:0 14px; display:flex; align-items:center; gap:6px; height:100%; }
|
|
.f-right .f-update { color:var(--ink-3); }
|
|
|
|
/* ══ POPUP ══ */
|
|
.popup-overlay {
|
|
position:fixed; inset:0; background:rgba(0,0,0,0.65); z-index:100;
|
|
display:flex; align-items:center; justify-content:center;
|
|
backdrop-filter:blur(2px);
|
|
}
|
|
.popup {
|
|
background:var(--bg-2); border:1px solid var(--border-3); border-radius:12px;
|
|
width:480px; max-width:95vw; box-shadow:0 24px 64px rgba(0,0,0,0.7);
|
|
display:flex; flex-direction:column; overflow:hidden;
|
|
}
|
|
.popup-header {
|
|
background:var(--bg-3); padding:14px 18px; border-bottom:1px solid var(--border-2);
|
|
display:flex; align-items:center; gap:10px;
|
|
}
|
|
.popup-header .ph-icon { width:32px; height:32px; border-radius:8px; background:var(--bg-4); display:flex; align-items:center; justify-content:center; color:var(--accent); font-size:15px; }
|
|
.popup-header .ph-info { flex:1; }
|
|
.popup-header .ph-host { font-weight:700; font-size:14px; color:var(--ink-1); }
|
|
.popup-header .ph-ip { font-family:var(--font-mono); font-size:11px; color:var(--ink-4); }
|
|
.popup-header .ph-led { width:10px; height:10px; border-radius:50%; background:var(--ok); box-shadow:0 0 8px var(--ok); }
|
|
.popup-header .close-btn { width:28px; height:28px; border-radius:6px; background:var(--bg-5); color:var(--ink-3); display:flex; align-items:center; justify-content:center; cursor:pointer; font-size:12px; }
|
|
.popup-header .close-btn:hover { background:var(--err); color:white; }
|
|
|
|
.popup-body { padding:18px; display:flex; flex-direction:column; gap:16px; }
|
|
|
|
.popup-kpis { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; }
|
|
.kpi-card {
|
|
background:var(--bg-3); border-radius:8px; padding:10px 12px;
|
|
border:1px solid var(--border-1); box-shadow:var(--tile-3d);
|
|
}
|
|
.kpi-label { font-size:9px; color:var(--ink-4); font-family:var(--font-terminal); letter-spacing:.06em; margin-bottom:4px; }
|
|
.kpi-value { font-family:var(--font-mono); font-size:20px; font-weight:700; color:var(--ink-1); line-height:1; }
|
|
.kpi-value .unit { font-size:11px; color:var(--ink-3); font-weight:400; }
|
|
.kpi-value.ok { color:var(--ok); }
|
|
.kpi-value.warn { color:var(--warn); }
|
|
.kpi-value.err { color:var(--err); }
|
|
.kpi-sub { font-size:10px; color:var(--ink-4); font-family:var(--font-mono); margin-top:3px; }
|
|
|
|
.popup-section-title { font-size:10px; color:var(--ink-4); font-family:var(--font-terminal); letter-spacing:.08em; margin-bottom:8px; }
|
|
|
|
.popup-gauges { display:flex; flex-direction:column; gap:7px; }
|
|
.pg-row { display:flex; align-items:center; gap:10px; }
|
|
.pg-label { font-size:11px; color:var(--ink-3); width:80px; font-family:var(--font-terminal); }
|
|
.pg-bar { flex:1; height:7px; border-radius:4px; background:var(--bg-1); overflow:hidden; }
|
|
.pg-fill { height:100%; border-radius:4px; background:var(--ok); }
|
|
.pg-fill.warn { background:var(--warn); }
|
|
.pg-fill.err { background:var(--err); }
|
|
.pg-val { font-family:var(--font-mono); font-size:12px; color:var(--ink-2); width:60px; text-align:right; }
|
|
|
|
.popup-meta { display:grid; grid-template-columns:1fr 1fr; gap:6px; }
|
|
.meta-item { background:var(--bg-3); border-radius:6px; padding:8px 10px; border:1px solid var(--border-1); }
|
|
.meta-label { font-size:9px; color:var(--ink-4); font-family:var(--font-terminal); letter-spacing:.06em; }
|
|
.meta-value { font-family:var(--font-mono); font-size:12px; color:var(--ink-2); margin-top:2px; }
|
|
|
|
.popup-footer {
|
|
padding:12px 18px; border-top:1px solid var(--border-2);
|
|
display:flex; align-items:center; gap:10px;
|
|
background:var(--bg-3);
|
|
}
|
|
.pf-uptime { font-family:var(--font-terminal); font-size:11px; color:var(--ink-4); flex:1; }
|
|
.pf-btn {
|
|
padding:6px 14px; border-radius:8px; border:1px solid var(--border-2);
|
|
background:var(--bg-4); color:var(--ink-2); font-size:12px; font-family:var(--font-ui);
|
|
cursor:pointer; display:flex; align-items:center; gap:6px;
|
|
}
|
|
.pf-btn:hover { background:var(--bg-5); }
|
|
.pf-btn.primary { background:var(--accent); color:var(--bg-0); border-color:var(--accent-soft); font-weight:600; }
|
|
.pf-btn.primary:hover { background:var(--accent-soft); }
|
|
|
|
/* ══ CONFIG PANEL ══ */
|
|
.config-overlay {
|
|
position:fixed; inset:0; background:rgba(0,0,0,0.65); z-index:100;
|
|
display:flex; align-items:center; justify-content:center;
|
|
backdrop-filter:blur(2px);
|
|
}
|
|
.config-panel {
|
|
background:var(--bg-2); border:1px solid var(--border-3); border-radius:12px;
|
|
width:380px; box-shadow:0 24px 64px rgba(0,0,0,0.7); overflow:hidden;
|
|
}
|
|
.config-header {
|
|
background:var(--bg-3); padding:14px 18px; border-bottom:1px solid var(--border-2);
|
|
display:flex; align-items:center; gap:10px;
|
|
}
|
|
.config-header i { color:var(--accent); font-size:16px; }
|
|
.config-header .ch-title { flex:1; font-weight:600; font-size:14px; }
|
|
.config-header .close-btn { width:28px; height:28px; border-radius:6px; background:var(--bg-5); color:var(--ink-3); display:flex; align-items:center; justify-content:center; cursor:pointer; font-size:12px; }
|
|
.config-body { padding:18px; display:flex; flex-direction:column; gap:14px; }
|
|
.config-group { display:flex; flex-direction:column; gap:6px; }
|
|
.cg-label { font-size:10px; color:var(--ink-4); font-family:var(--font-terminal); letter-spacing:.08em; }
|
|
.cg-row { display:flex; align-items:center; gap:10px; }
|
|
.cg-row span { font-size:12px; color:var(--ink-3); min-width:80px; }
|
|
.cg-slider { flex:1; accent-color:var(--accent); }
|
|
.cg-val { font-family:var(--font-mono); font-size:12px; color:var(--ink-2); width:40px; text-align:right; }
|
|
.cg-select {
|
|
flex:1; background:var(--bg-3); border:1px solid var(--border-2); border-radius:6px;
|
|
color:var(--ink-1); padding:6px 10px; font-size:12px; font-family:var(--font-ui);
|
|
}
|
|
.config-footer {
|
|
padding:12px 18px; border-top:1px solid var(--border-2); background:var(--bg-3);
|
|
display:flex; gap:8px; justify-content:flex-end;
|
|
}
|
|
|
|
/* ══ NOTICE BAR ══ */
|
|
.notice { background:var(--bg-3); border-bottom:1px solid var(--border-1); padding:6px 20px; display:flex; align-items:center; gap:8px; font-size:11px; color:var(--ink-3); }
|
|
.notice i { color:var(--accent); }
|
|
|
|
/* scrollbar */
|
|
::-webkit-scrollbar{width:6px} ::-webkit-scrollbar-track{background:var(--bg-1)} ::-webkit-scrollbar-thumb{background:var(--bg-4);border-radius:3px}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<!-- ══ HEADER ══ -->
|
|
<div class="header">
|
|
<div class="header-logo">
|
|
<div class="led"></div>
|
|
<span class="name">NANOMETRICS</span>
|
|
<span class="version">v1.0</span>
|
|
</div>
|
|
|
|
<div class="header-spacer"></div>
|
|
|
|
<div class="header-stats">
|
|
<div class="h-stat">
|
|
<span class="s-label">AGENTS</span>
|
|
<span class="s-count" style="color:var(--ink-2)">8</span>
|
|
</div>
|
|
<div class="h-stat">
|
|
<span class="s-label">OK</span>
|
|
<span class="s-count ok">5</span>
|
|
</div>
|
|
<div class="h-stat">
|
|
<span class="s-label">WARN</span>
|
|
<span class="s-count warn">2</span>
|
|
</div>
|
|
<div class="h-stat">
|
|
<span class="s-label">ERR</span>
|
|
<span class="s-count err">1</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="header-sep"></div>
|
|
|
|
<!-- Thème clair/sombre -->
|
|
<div class="icon-btn" onclick="toggleTheme()" id="theme-btn">
|
|
<i class="fa-solid fa-moon" id="theme-icon"></i>
|
|
<span class="tooltip">Basculer thème</span>
|
|
</div>
|
|
|
|
<!-- Configuration -->
|
|
<div class="icon-btn" onclick="document.getElementById('config-overlay').style.display='flex'">
|
|
<i class="fa-solid fa-sliders"></i>
|
|
<span class="tooltip">Configuration serveur</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ══ MAIN ══ -->
|
|
<div class="main">
|
|
<div class="agents-grid" id="agents-grid">
|
|
|
|
<!-- tuile ok -->
|
|
<div class="tile" onclick="document.getElementById('popup-overlay').style.display='flex'">
|
|
<div class="tile-head">
|
|
<div class="t-icon-wrap"><i class="fa-solid fa-server"></i></div>
|
|
<div class="t-info">
|
|
<div class="t-hostname">srv-prod-01</div>
|
|
<div class="t-ip">10.0.0.11</div>
|
|
</div>
|
|
<div class="t-led ok"></div>
|
|
</div>
|
|
<div class="tile-gauges">
|
|
<div class="gauge-row"><span class="g-label">CPU</span><div class="g-bar"><div class="g-fill" style="width:42%"></div></div><span class="g-val">42%</span></div>
|
|
<div class="gauge-row"><span class="g-label">RAM</span><div class="g-bar"><div class="g-fill" style="width:58%"></div></div><span class="g-val">58%</span></div>
|
|
<div class="gauge-row"><span class="g-label">DISK</span><div class="g-bar"><div class="g-fill" style="width:31%"></div></div><span class="g-val">31%</span></div>
|
|
</div>
|
|
<div class="tile-foot">
|
|
<span class="t-uptime"><i class="fa-solid fa-clock"></i>14j 6h</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- tuile warn -->
|
|
<div class="tile warn-tile">
|
|
<div class="tile-head">
|
|
<div class="t-icon-wrap"><i class="fa-solid fa-server"></i></div>
|
|
<div class="t-info">
|
|
<div class="t-hostname">srv-backup-02</div>
|
|
<div class="t-ip">10.0.0.12</div>
|
|
</div>
|
|
<div class="t-led warn"></div>
|
|
</div>
|
|
<div class="tile-gauges">
|
|
<div class="gauge-row"><span class="g-label">CPU</span><div class="g-bar"><div class="g-fill warn" style="width:78%"></div></div><span class="g-val">78%</span></div>
|
|
<div class="gauge-row"><span class="g-label">RAM</span><div class="g-bar"><div class="g-fill warn" style="width:72%"></div></div><span class="g-val">72%</span></div>
|
|
<div class="gauge-row"><span class="g-label">DISK</span><div class="g-bar"><div class="g-fill" style="width:20%"></div></div><span class="g-val">20%</span></div>
|
|
</div>
|
|
<div class="tile-foot">
|
|
<span class="t-uptime"><i class="fa-solid fa-clock"></i>3j 14h</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- tuile err -->
|
|
<div class="tile err-tile">
|
|
<div class="tile-head">
|
|
<div class="t-icon-wrap" style="color:var(--err)"><i class="fa-solid fa-microchip"></i></div>
|
|
<div class="t-info">
|
|
<div class="t-hostname">rpi-sensor-03</div>
|
|
<div class="t-ip">10.0.0.23</div>
|
|
</div>
|
|
<div class="t-led err"></div>
|
|
</div>
|
|
<div class="tile-gauges">
|
|
<div class="gauge-row"><span class="g-label">CPU</span><div class="g-bar"><div class="g-fill" style="width:12%"></div></div><span class="g-val">12%</span></div>
|
|
<div class="gauge-row"><span class="g-label">RAM</span><div class="g-bar"><div class="g-fill" style="width:38%"></div></div><span class="g-val">38%</span></div>
|
|
<div class="gauge-row"><span class="g-label">DISK</span><div class="g-bar"><div class="g-fill err" style="width:94%"></div></div><span class="g-val">94%</span></div>
|
|
</div>
|
|
<div class="tile-foot">
|
|
<span class="t-uptime"><i class="fa-solid fa-clock"></i>62j 1h</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- tuile ok -->
|
|
<div class="tile">
|
|
<div class="tile-head">
|
|
<div class="t-icon-wrap"><i class="fa-solid fa-hard-drive"></i></div>
|
|
<div class="t-info">
|
|
<div class="t-hostname">nas-storage-04</div>
|
|
<div class="t-ip">10.0.0.30</div>
|
|
</div>
|
|
<div class="t-led ok"></div>
|
|
</div>
|
|
<div class="tile-gauges">
|
|
<div class="gauge-row"><span class="g-label">CPU</span><div class="g-bar"><div class="g-fill" style="width:8%"></div></div><span class="g-val">8%</span></div>
|
|
<div class="gauge-row"><span class="g-label">RAM</span><div class="g-bar"><div class="g-fill" style="width:45%"></div></div><span class="g-val">45%</span></div>
|
|
<div class="gauge-row"><span class="g-label">DISK</span><div class="g-bar"><div class="g-fill" style="width:66%"></div></div><span class="g-val">66%</span></div>
|
|
</div>
|
|
<div class="tile-foot">
|
|
<span class="t-uptime"><i class="fa-solid fa-clock"></i>128j 3h</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- tuile ok -->
|
|
<div class="tile">
|
|
<div class="tile-head">
|
|
<div class="t-icon-wrap"><i class="fa-solid fa-database"></i></div>
|
|
<div class="t-info">
|
|
<div class="t-hostname">db-primary-05</div>
|
|
<div class="t-ip">10.0.0.40</div>
|
|
</div>
|
|
<div class="t-led ok"></div>
|
|
</div>
|
|
<div class="tile-gauges">
|
|
<div class="gauge-row"><span class="g-label">CPU</span><div class="g-bar"><div class="g-fill" style="width:25%"></div></div><span class="g-val">25%</span></div>
|
|
<div class="gauge-row"><span class="g-label">RAM</span><div class="g-bar"><div class="g-fill" style="width:61%"></div></div><span class="g-val">61%</span></div>
|
|
<div class="gauge-row"><span class="g-label">DISK</span><div class="g-bar"><div class="g-fill" style="width:48%"></div></div><span class="g-val">48%</span></div>
|
|
</div>
|
|
<div class="tile-foot">
|
|
<span class="t-uptime"><i class="fa-solid fa-clock"></i>7j 22h</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- tuile warn -->
|
|
<div class="tile warn-tile">
|
|
<div class="tile-head">
|
|
<div class="t-icon-wrap"><i class="fa-solid fa-globe"></i></div>
|
|
<div class="t-info">
|
|
<div class="t-hostname">web-front-06</div>
|
|
<div class="t-ip">10.0.0.51</div>
|
|
</div>
|
|
<div class="t-led warn"></div>
|
|
</div>
|
|
<div class="tile-gauges">
|
|
<div class="gauge-row"><span class="g-label">CPU</span><div class="g-bar"><div class="g-fill warn" style="width:71%"></div></div><span class="g-val">71%</span></div>
|
|
<div class="gauge-row"><span class="g-label">RAM</span><div class="g-bar"><div class="g-fill" style="width:55%"></div></div><span class="g-val">55%</span></div>
|
|
<div class="gauge-row"><span class="g-label">DISK</span><div class="g-bar"><div class="g-fill" style="width:28%"></div></div><span class="g-val">28%</span></div>
|
|
</div>
|
|
<div class="tile-foot">
|
|
<span class="t-uptime"><i class="fa-solid fa-clock"></i>21j 8h</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- tuile offline -->
|
|
<div class="tile offline-tile">
|
|
<div class="tile-head">
|
|
<div class="t-icon-wrap" style="color:var(--ink-4)"><i class="fa-solid fa-server"></i></div>
|
|
<div class="t-info">
|
|
<div class="t-hostname">srv-dev-07</div>
|
|
<div class="t-ip">10.0.0.60</div>
|
|
</div>
|
|
<div class="t-led off"></div>
|
|
</div>
|
|
<div class="tile-gauges">
|
|
<div class="gauge-row"><span class="g-label">CPU</span><div class="g-bar"><div class="g-fill" style="width:0%"></div></div><span class="g-val" style="color:var(--ink-4)">—</span></div>
|
|
<div class="gauge-row"><span class="g-label">RAM</span><div class="g-bar"><div class="g-fill" style="width:0%"></div></div><span class="g-val" style="color:var(--ink-4)">—</span></div>
|
|
<div class="gauge-row"><span class="g-label">DISK</span><div class="g-bar"><div class="g-fill" style="width:0%"></div></div><span class="g-val" style="color:var(--ink-4)">—</span></div>
|
|
</div>
|
|
<div class="tile-foot">
|
|
<span class="t-uptime" style="color:var(--err)"><i class="fa-solid fa-circle-xmark"></i>Hors ligne · vu il y a 2h</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- tuile ok -->
|
|
<div class="tile">
|
|
<div class="tile-head">
|
|
<div class="t-icon-wrap"><i class="fa-solid fa-network-wired"></i></div>
|
|
<div class="t-info">
|
|
<div class="t-hostname">gateway-08</div>
|
|
<div class="t-ip">10.0.0.1</div>
|
|
</div>
|
|
<div class="t-led ok"></div>
|
|
</div>
|
|
<div class="tile-gauges">
|
|
<div class="gauge-row"><span class="g-label">CPU</span><div class="g-bar"><div class="g-fill" style="width:5%"></div></div><span class="g-val">5%</span></div>
|
|
<div class="gauge-row"><span class="g-label">RAM</span><div class="g-bar"><div class="g-fill" style="width:22%"></div></div><span class="g-val">22%</span></div>
|
|
<div class="gauge-row"><span class="g-label">DISK</span><div class="g-bar"><div class="g-fill" style="width:15%"></div></div><span class="g-val">15%</span></div>
|
|
</div>
|
|
<div class="tile-foot">
|
|
<span class="t-uptime"><i class="fa-solid fa-clock"></i>365j 0h</span>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ══ FOOTER ══ -->
|
|
<div class="footer">
|
|
<div class="f-mode">LIVE</div>
|
|
<div class="f-cell">
|
|
<i class="fa-solid fa-server"></i>
|
|
<span>SERVEUR</span>
|
|
</div>
|
|
<div class="f-cell">
|
|
<i class="fa-solid fa-microchip"></i>
|
|
<span>CPU</span>
|
|
<span class="f-val">18%</span>
|
|
<span class="f-bar"><span class="f-bar-fill" style="width:18%"></span></span>
|
|
</div>
|
|
<div class="f-cell">
|
|
<i class="fa-solid fa-memory"></i>
|
|
<span>MEM</span>
|
|
<span class="f-val warn">71%</span>
|
|
<span class="f-bar"><span class="f-bar-fill warn" style="width:71%"></span></span>
|
|
</div>
|
|
<div class="f-spacer"></div>
|
|
<div class="f-right">
|
|
<i class="fa-solid fa-rotate"></i>
|
|
<span class="f-update">Dernière actualisation : <span style="color:var(--ink-2);font-family:var(--font-mono)">22:14:07</span></span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ══ POPUP DÉTAIL (visible par défaut pour la maquette) ══ -->
|
|
<div class="popup-overlay" id="popup-overlay" onclick="if(event.target===this)this.style.display='none'">
|
|
<div class="popup" onclick="event.stopPropagation()">
|
|
<div class="popup-header">
|
|
<div class="ph-icon"><i class="fa-solid fa-server"></i></div>
|
|
<div class="ph-info">
|
|
<div class="ph-host">srv-prod-01</div>
|
|
<div class="ph-ip">10.0.0.11</div>
|
|
</div>
|
|
<div class="ph-led"></div>
|
|
<div class="close-btn" onclick="document.getElementById('popup-overlay').style.display='none'"><i class="fa-solid fa-xmark"></i></div>
|
|
</div>
|
|
|
|
<div class="popup-body">
|
|
<!-- KPIs -->
|
|
<div>
|
|
<div class="popup-section-title">MÉTRIQUES ACTUELLES</div>
|
|
<div class="popup-kpis">
|
|
<div class="kpi-card">
|
|
<div class="kpi-label">CPU</div>
|
|
<div class="kpi-value ok">42<span class="unit">%</span></div>
|
|
<div class="kpi-sub">4 cœurs</div>
|
|
</div>
|
|
<div class="kpi-card">
|
|
<div class="kpi-label">MÉMOIRE</div>
|
|
<div class="kpi-value">3.7<span class="unit">Go</span></div>
|
|
<div class="kpi-sub">/ 8 Go · 46%</div>
|
|
</div>
|
|
<div class="kpi-card">
|
|
<div class="kpi-label">DISQUE</div>
|
|
<div class="kpi-value">62<span class="unit">Go</span></div>
|
|
<div class="kpi-sub">/ 200 Go · 31%</div>
|
|
</div>
|
|
<div class="kpi-card">
|
|
<div class="kpi-label">UPTIME</div>
|
|
<div class="kpi-value" style="font-size:15px;color:var(--ink-1)">14j 6h</div>
|
|
<div class="kpi-sub">depuis dernier boot</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Jauges détaillées -->
|
|
<div>
|
|
<div class="popup-section-title">UTILISATION DÉTAILLÉE</div>
|
|
<div class="popup-gauges">
|
|
<div class="pg-row"><span class="pg-label">CPU total</span><div class="pg-bar"><div class="pg-fill" style="width:42%"></div></div><span class="pg-val">42% / 100%</span></div>
|
|
<div class="pg-row"><span class="pg-label">RAM utilisée</span><div class="pg-bar"><div class="pg-fill" style="width:46%"></div></div><span class="pg-val">3.7 / 8 Go</span></div>
|
|
<div class="pg-row"><span class="pg-label">Disque utilisé</span><div class="pg-bar"><div class="pg-fill" style="width:31%"></div></div><span class="pg-val">62 / 200 Go</span></div>
|
|
<div class="pg-row"><span class="pg-label">Disque libre</span><div class="pg-bar"><div class="pg-fill" style="width:69%"></div></div><span class="pg-val">138 Go libre</span></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Métadonnées -->
|
|
<div>
|
|
<div class="popup-section-title">INFORMATIONS SYSTÈME</div>
|
|
<div class="popup-meta">
|
|
<div class="meta-item"><div class="meta-label">HOSTNAME</div><div class="meta-value">srv-prod-01</div></div>
|
|
<div class="meta-item"><div class="meta-label">ADRESSE IP</div><div class="meta-value" style="font-family:var(--font-mono)">10.0.0.11</div></div>
|
|
<div class="meta-item"><div class="meta-label">DERNIER CONTACT</div><div class="meta-value" style="font-family:var(--font-mono)">22:14:07</div></div>
|
|
<div class="meta-item"><div class="meta-label">FRÉQUENCE</div><div class="meta-value" style="font-family:var(--font-mono)">CPU 2s · Disk 60s</div></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="popup-footer">
|
|
<span class="pf-uptime"><i class="fa-solid fa-clock" style="margin-right:5px"></i>En ligne depuis 14 jours 6 heures</span>
|
|
<button class="pf-btn"><i class="fa-solid fa-chart-line"></i> Historique</button>
|
|
<button class="pf-btn primary"><i class="fa-solid fa-xmark"></i> Fermer</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ══ CONFIG PANEL ══ -->
|
|
<div class="config-overlay" id="config-overlay" style="display:none" onclick="if(event.target===this)this.style.display='none'">
|
|
<div class="config-panel" onclick="event.stopPropagation()">
|
|
<div class="config-header">
|
|
<i class="fa-solid fa-sliders"></i>
|
|
<span class="ch-title">Configuration interface</span>
|
|
<div class="close-btn" onclick="document.getElementById('config-overlay').style.display='none'"><i class="fa-solid fa-xmark"></i></div>
|
|
</div>
|
|
<div class="config-body">
|
|
<div class="config-group">
|
|
<div class="cg-label">TAILLE DES TUILES</div>
|
|
<div class="cg-row">
|
|
<span>Largeur min.</span>
|
|
<input type="range" class="cg-slider" min="160" max="400" value="240">
|
|
<span class="cg-val">240px</span>
|
|
</div>
|
|
</div>
|
|
<div class="config-group">
|
|
<div class="cg-label">TAILLE DU TEXTE</div>
|
|
<div class="cg-row">
|
|
<span>Interface</span>
|
|
<input type="range" class="cg-slider" min="10" max="18" value="13">
|
|
<span class="cg-val">13px</span>
|
|
</div>
|
|
</div>
|
|
<div class="config-group">
|
|
<div class="cg-label">SEUILS D'ALERTE (défaut)</div>
|
|
<div class="cg-row">
|
|
<span>Warning CPU/RAM</span>
|
|
<input type="range" class="cg-slider" min="50" max="95" value="70">
|
|
<span class="cg-val">70%</span>
|
|
</div>
|
|
<div class="cg-row">
|
|
<span>Erreur CPU/RAM</span>
|
|
<input type="range" class="cg-slider" min="60" max="100" value="85">
|
|
<span class="cg-val">85%</span>
|
|
</div>
|
|
</div>
|
|
<div class="config-group">
|
|
<div class="cg-label">AGENTS HORS LIGNE</div>
|
|
<div class="cg-row">
|
|
<span>Affichage</span>
|
|
<select class="cg-select">
|
|
<option>Visible (grisé)</option>
|
|
<option>Masqué</option>
|
|
<option>Dernière position</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<div class="config-group">
|
|
<div class="cg-label">RÉTENTION HISTORIQUE</div>
|
|
<div class="cg-row">
|
|
<span>Durée</span>
|
|
<select class="cg-select">
|
|
<option>7 jours</option>
|
|
<option selected>30 jours</option>
|
|
<option>90 jours</option>
|
|
<option>1 an</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="config-footer">
|
|
<button class="pf-btn" onclick="document.getElementById('config-overlay').style.display='none'">Annuler</button>
|
|
<button class="pf-btn primary"><i class="fa-solid fa-floppy-disk"></i> Sauvegarder</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
function toggleTheme() {
|
|
const html = document.documentElement;
|
|
const icon = document.getElementById('theme-icon');
|
|
if (html.dataset.theme === 'dark') {
|
|
html.dataset.theme = 'light';
|
|
icon.className = 'fa-solid fa-sun';
|
|
} else {
|
|
html.dataset.theme = 'dark';
|
|
icon.className = 'fa-solid fa-moon';
|
|
}
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|