Spaces:
Paused
Paused
| <html lang="fr"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1"> | |
| <title>PixelDrive — État du serveur</title> | |
| <style> | |
| :root{--bg:#0f0f13;--panel:#18181b;--border:#27272a;--primary:#6366f1;--text:#f4f4f5;--muted:#a1a1aa;--ok:#22c55e;--warn:#f59e0b;--bad:#ef4444} | |
| *{box-sizing:border-box;margin:0;padding:0} | |
| body{font-family:Inter,system-ui,sans-serif;background:var(--bg);color:var(--text);min-height:100vh;padding:1.5rem} | |
| h1{font-size:1.3rem;margin-bottom:1rem;display:flex;align-items:center;gap:.5rem} | |
| .dot{width:10px;height:10px;border-radius:50%;background:var(--ok);animation:pulse 1s infinite} | |
| @keyframes pulse{50%{opacity:.4}} | |
| .grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:1rem} | |
| .card{background:var(--panel);border:1px solid var(--border);border-radius:8px;padding:1rem} | |
| .label{font-size:.7rem;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;margin-bottom:.4rem} | |
| .value{font-size:1.4rem;font-weight:700} | |
| .bar{height:6px;background:var(--bg);border-radius:3px;margin-top:.5rem;overflow:hidden} | |
| .bar>div{height:100%;background:var(--primary);transition:width .3s} | |
| .err{color:var(--bad)} | |
| </style> | |
| </head> | |
| <body> | |
| <h1><span class="dot" id="dot"></span> État du serveur</h1> | |
| <div class="grid"> | |
| <div class="card"><div class="label">CPU</div><div class="value" id="cpu">—</div><div class="bar"><div id="cpu-bar"></div></div></div> | |
| <div class="card"><div class="label">Cœurs</div><div class="value" id="cores">—</div></div> | |
| <div class="card"><div class="label">RAM système</div><div class="value" id="ram">—</div><div class="bar"><div id="ram-bar"></div></div></div> | |
| <div class="card"><div class="label">RAM processus</div><div class="value" id="rss">—</div></div> | |
| <div class="card"><div class="label">Uptime app</div><div class="value" id="uptime">—</div></div> | |
| <div class="card"><div class="label">Uptime OS</div><div class="value" id="osuptime">—</div></div> | |
| <div class="card"><div class="label">Load avg</div><div class="value" id="load">—</div></div> | |
| <div class="card"><div class="label">Node</div><div class="value" id="node" style="font-size:1rem">—</div></div> | |
| <div class="card"><div class="label">Plateforme</div><div class="value" id="plat" style="font-size:1rem">—</div></div> | |
| <div class="card"><div class="label">Cache LRU</div><div class="value" id="cache">—</div></div> | |
| </div> | |
| <script> | |
| const fmtB=b=>{if(b<1048576)return (b/1024).toFixed(0)+' KB';if(b<1073741824)return (b/1048576).toFixed(1)+' MB';return (b/1073741824).toFixed(2)+' GB'}; | |
| const fmtT=s=>{s=Math.round(s);const d=Math.floor(s/86400),h=Math.floor(s%86400/3600),m=Math.floor(s%3600/60);return (d?d+'j ':'')+h+'h '+m+'m'}; | |
| async function tick(){ | |
| try{ | |
| const r=await fetch('/api/admin/server-status'); | |
| if(!r.ok){document.getElementById('dot').style.background='var(--bad)';throw 0;} | |
| const s=await r.json(); | |
| document.getElementById('dot').style.background='var(--ok)'; | |
| document.getElementById('cpu').textContent=s.cpu+'%'; | |
| document.getElementById('cpu-bar').style.width=Math.min(100,s.cpu)+'%'; | |
| document.getElementById('cpu-bar').style.background=s.cpu>85?'var(--bad)':s.cpu>60?'var(--warn)':'var(--primary)'; | |
| document.getElementById('cores').textContent=s.cores; | |
| document.getElementById('ram').textContent=fmtB(s.ramTotal-s.ramFree); | |
| document.getElementById('ram-bar').style.width=Math.round(100*(s.ramTotal-s.ramFree)/s.ramTotal)+'%'; | |
| document.getElementById('rss').textContent=fmtB(s.rss); | |
| document.getElementById('uptime').textContent=fmtT(s.uptime); | |
| document.getElementById('osuptime').textContent=fmtT(s.osUptime); | |
| document.getElementById('load').textContent=s.loadavg.map(x=>x.toFixed(2)).join(' '); | |
| document.getElementById('node').textContent=s.node; | |
| document.getElementById('plat').textContent=s.platform; | |
| document.getElementById('cache').textContent=s.cache; | |
| }catch(e){document.getElementById('dot').style.background='var(--bad)';} | |
| } | |
| tick(); setInterval(tick, 500); // ✅ refresh 0.5s | |
| </script> | |
| </body> | |
| </html> |