Gilles Soulier
9e36f03a5c
Ajout de la structure de base du dashboard Nanometrics : - index.html avec header, grille agents, footer et 4 popups (détail, config agent, config serveur, SMART) - css/app.css avec design system complet (tokens dark/light, composants, animations) - Polices locales : Inter, JetBrains Mono, Share Tech Mono (woff2) - Font Awesome 6.5.1 en local (vendor/fontawesome) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
157 lines
8.8 KiB
HTML
157 lines
8.8 KiB
HTML
<!DOCTYPE html>
|
||
<html data-theme="dark" lang="fr">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
<title>Nanometrics</title>
|
||
<link rel="stylesheet" href="vendor/fontawesome/css/all.min.css">
|
||
<link rel="stylesheet" href="css/app.css">
|
||
</head>
|
||
<body>
|
||
<div id="tooltip"></div>
|
||
|
||
<!-- HEADER -->
|
||
<div class="header">
|
||
<div class="logo">
|
||
<div class="logo-led"></div>
|
||
<span class="logo-name">NANOMETRICS</span>
|
||
<span class="logo-ver">v1.0</span>
|
||
</div>
|
||
<div class="h-sep"></div>
|
||
<div class="h-stats" id="h-stats">
|
||
<div class="h-stat"><span class="lbl">AGENTS</span><span class="val c-n" id="stat-total">0</span></div>
|
||
<div class="h-stat"><span class="lbl">OK</span><span class="val c-ok" id="stat-ok">0</span></div>
|
||
<div class="h-stat"><span class="lbl">WARN</span><span class="val c-warn" id="stat-warn">0</span></div>
|
||
<div class="h-stat"><span class="lbl">ERR</span><span class="val c-err" id="stat-err">0</span></div>
|
||
</div>
|
||
<div class="h-spacer"></div>
|
||
<div class="hbtn" id="btn-theme" onclick="App.toggleTheme()" data-tip="Thème clair / sombre">
|
||
<i class="fa-solid fa-moon" id="theme-icon"></i>
|
||
</div>
|
||
<div class="hbtn" id="btn-srvcfg" onclick="Popups.showSrvCfg()" data-tip="Configuration serveur / interface">
|
||
<i class="fa-solid fa-sliders"></i>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- GRILLE -->
|
||
<div class="main"><div class="agents-grid" id="agents-grid"></div></div>
|
||
|
||
<!-- FOOTER -->
|
||
<div class="footer">
|
||
<div class="f-mode">LIVE</div>
|
||
<div class="f-cell"><i class="fa-solid fa-server" style="font-size:10px"></i><span>SERVEUR</span></div>
|
||
<div class="f-cell">
|
||
<i class="fa-solid fa-microchip" style="font-size:10px"></i>
|
||
<span class="f-val" id="srv-cpu">—</span>
|
||
<div class="f-minibar"><div class="f-minifill" id="srv-cpu-bar"></div></div>
|
||
</div>
|
||
<div class="f-cell">
|
||
<i class="fa-solid fa-memory" style="font-size:10px"></i>
|
||
<span class="f-val" id="srv-mem">—</span>
|
||
<div class="f-minibar"><div class="f-minifill" id="srv-mem-bar"></div></div>
|
||
</div>
|
||
<div class="f-spacer"></div>
|
||
<div class="f-right">
|
||
<i class="fa-solid fa-rotate"></i>
|
||
<span>Actualisation : <span class="f-time" id="f-time">—</span></span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- POPUP DÉTAIL AGENT -->
|
||
<div class="overlay" id="overlay-detail" style="display:none" onclick="if(event.target===this)Popups.hideDetail()">
|
||
<div class="popup" id="popup-detail" onclick="event.stopPropagation()">
|
||
<div class="pop-head">
|
||
<div class="agent-icon-wrap" id="pop-icon-wrap" data-tip="Changer l'icône">
|
||
<span id="pop-icon-fa"><i class="fa-solid fa-server"></i></span>
|
||
<img id="pop-icon-img" src="" alt="" style="display:none">
|
||
<div class="agent-icon-overlay"><i class="fa-solid fa-camera"></i><span>Changer</span></div>
|
||
</div>
|
||
<input type="file" id="icon-upload" accept=".svg,.jpg,.jpeg,.png,.webp" style="display:none">
|
||
<div style="flex:1">
|
||
<div class="pop-host" id="pop-host">—</div>
|
||
<div class="pop-ip" id="pop-ip">—</div>
|
||
<div style="font-size:10px;color:var(--ink-4);font-family:var(--font-terminal);margin-top:2px">
|
||
Cliquer sur l'icône pour personnaliser · SVG JPG PNG WEBP · max 128×128 px
|
||
</div>
|
||
</div>
|
||
<div class="pop-led" id="pop-led"></div>
|
||
<div class="pop-close" onclick="Popups.hideDetail()" data-tip="Fermer"><i class="fa-solid fa-xmark"></i></div>
|
||
</div>
|
||
<div class="pop-body" id="pop-body"></div>
|
||
<div class="pop-foot">
|
||
<span class="pop-uptime" id="pop-uptime"></span>
|
||
<span style="font-family:var(--font-terminal);font-size:9px;color:var(--ink-4);display:flex;align-items:center;gap:4px"
|
||
data-tip="Taille sauvegardée sur le serveur">
|
||
<i class="fa-solid fa-up-right-and-down-left-from-center"></i>Redimensionnable
|
||
</span>
|
||
<div class="btn-agent-cfg" onclick="Popups.showAgentCfg()" data-tip="Configurer l'agent">
|
||
<i class="fa-solid fa-gears"></i>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- POPUP CONFIG AGENT -->
|
||
<div class="overlay" id="overlay-agentcfg" style="display:none;z-index:200" onclick="if(event.target===this)this.style.display='none'">
|
||
<div class="popup" id="popup-agentcfg" style="width:520px;max-width:96vw;max-height:90vh" onclick="event.stopPropagation()">
|
||
<div style="background:var(--bg-3);padding:14px 18px;border-bottom:1px solid var(--border-2);display:flex;align-items:center;gap:10px">
|
||
<div style="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"><i class="fa-solid fa-gears"></i></div>
|
||
<div style="flex:1"><div style="font-weight:700;font-size:14px">Configuration de l'agent</div>
|
||
<div style="font-size:11px;color:var(--ink-4);font-family:var(--font-terminal)" id="agentcfg-sub">—</div></div>
|
||
<div class="pop-close" onclick="this.closest('.overlay').style.display='none'" data-tip="Fermer"><i class="fa-solid fa-xmark"></i></div>
|
||
</div>
|
||
<div style="padding:18px;display:flex;flex-direction:column;gap:16px;overflow-y:auto;max-height:62vh" id="agentcfg-body"></div>
|
||
<div style="padding:12px 18px;border-top:1px solid var(--border-2);background:var(--bg-3);display:flex;align-items:center;gap:8px">
|
||
<div style="flex:1;display:flex;align-items:center;gap:6px;font-family:var(--font-terminal);font-size:11px;color:var(--ink-4)">
|
||
<div style="width:6px;height:6px;border-radius:50%;background:var(--ok)"></div>
|
||
<span>Config synchronisée avec l'agent</span>
|
||
</div>
|
||
<button class="btn" onclick="this.closest('.overlay').style.display='none'">Annuler</button>
|
||
<button class="btn primary" onclick="Popups.sendAgentConfig()"><i class="fa-solid fa-paper-plane"></i> Envoyer à l'agent</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- POPUP CONFIG SERVEUR -->
|
||
<div class="overlay" id="overlay-srvcfg" style="display:none" onclick="if(event.target===this)Popups.hideSrvCfg()">
|
||
<div class="popup" id="popup-srvcfg" style="width:400px;max-width:96vw;max-height:88vh" onclick="event.stopPropagation()">
|
||
<div style="background:var(--bg-3);padding:14px 18px;border-bottom:1px solid var(--border-2);display:flex;align-items:center;gap:10px">
|
||
<div style="width:32px;height:32px;border-radius:8px;background:var(--accent);display:flex;align-items:center;justify-content:center;color:var(--bg-0);font-size:15px"><i class="fa-solid fa-sliders"></i></div>
|
||
<span style="flex:1;font-weight:700;font-size:14px">Configuration interface</span>
|
||
<div class="pop-close" onclick="Popups.hideSrvCfg()" data-tip="Fermer"><i class="fa-solid fa-xmark"></i></div>
|
||
</div>
|
||
<div class="scfg-body" id="srvcfg-body"></div>
|
||
<div style="padding:12px 18px;border-top:1px solid var(--border-2);background:var(--bg-3);display:flex;gap:8px;justify-content:flex-end">
|
||
<button class="btn" onclick="Popups.hideSrvCfg()">Annuler</button>
|
||
<button class="btn primary" onclick="Popups.saveSrvCfg()"><i class="fa-solid fa-floppy-disk"></i> Sauvegarder</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- POPUP SMART -->
|
||
<div class="overlay" id="overlay-smart" style="display:none;z-index:300" onclick="if(event.target===this)this.style.display='none'">
|
||
<div class="popup" id="popup-smart" style="width:500px;max-width:96vw;max-height:88vh" onclick="event.stopPropagation()">
|
||
<div style="background:var(--bg-3);padding:14px 18px;border-bottom:1px solid var(--border-2);display:flex;align-items:center;gap:10px">
|
||
<div style="width:32px;height:32px;border-radius:8px;background:var(--bg-4);display:flex;align-items:center;justify-content:center;color:var(--ok);font-size:15px"><i class="fa-solid fa-shield-heart"></i></div>
|
||
<div style="flex:1"><div style="font-weight:700;font-size:14px">Santé du disque dur</div>
|
||
<div style="font-size:11px;color:var(--ink-4);font-family:var(--font-terminal)" id="smart-sub">—</div></div>
|
||
<div class="pop-close" onclick="this.closest('.overlay').style.display='none'" data-tip="Fermer"><i class="fa-solid fa-xmark"></i></div>
|
||
</div>
|
||
<div style="padding:18px;display:flex;flex-direction:column;gap:16px;overflow-y:auto;max-height:70vh" id="smart-body"></div>
|
||
<div style="padding:12px 18px;border-top:1px solid var(--border-2);background:var(--bg-3);display:flex;align-items:center;gap:8px">
|
||
<span style="flex:1;font-size:10px;color:var(--ink-4);font-family:var(--font-terminal)">
|
||
<i class="fa-solid fa-circle-info" style="margin-right:4px"></i>Données via smartctl
|
||
</span>
|
||
<button class="btn primary" onclick="this.closest('.overlay').style.display='none'"><i class="fa-solid fa-xmark"></i> Fermer</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<script src="js/api.js"></script>
|
||
<script src="js/charts.js"></script>
|
||
<script src="js/grid.js"></script>
|
||
<script src="js/popups.js"></script>
|
||
<script src="js/app.js"></script>
|
||
</body>
|
||
</html>
|