Admin: onglet Infos systeme (reseau, RAM, disque, temp, camera)

- Endpoint /api/systeme/info : IPs par interface, hostname, uptime,
  disque, RAM, temperature CPU, version Python, statut camera
- Onglet Infos dans le backoffice avec affichage visuel (barres, couleurs)
- Bouton Actualiser pour rafraichir les donnees en temps reel

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

frontend/js/admin.js

@@ -685,6 +685,81 @@ async function sauvegarderBooth() {
   chargerBoothInfo();
 }
 
+// === INFOS SYSTEME ===
+
+async function chargerInfosSysteme() {
+  const contenu = document.getElementById('infos-systeme-contenu');
+  contenu.innerHTML = '<p class="infos-chargement">Chargement...</p>';
+  try {
+    const info = await apiGet('/api/systeme/info');
+    let html = '';
+
+    // Reseau
+    html += '<div class="infos-section">';
+    html += '<h4>&#127760; Reseau</h4>';
+    html += `<div class="infos-ligne"><span>Hostname</span><strong>${info.hostname}</strong></div>`;
+    if (info.interfaces && info.interfaces.length > 0) {
+      info.interfaces.forEach(iface => {
+        iface.ips.forEach(ip => {
+          html += `<div class="infos-ligne"><span>${iface.nom}</span><strong class="infos-ip">${ip}</strong></div>`;
+        });
+      });
+    } else {
+      html += '<div class="infos-ligne"><span>Aucune interface</span><strong>—</strong></div>';
+    }
+    html += '</div>';
+
+    // Systeme
+    html += '<div class="infos-section">';
+    html += '<h4>&#128187; Systeme</h4>';
+    if (info.uptime) html += `<div class="infos-ligne"><span>Uptime</span><strong>${info.uptime}</strong></div>`;
+    if (info.temperature_cpu !== null && info.temperature_cpu !== undefined) {
+      const couleur = info.temperature_cpu > 70 ? '#e53935' : info.temperature_cpu > 55 ? '#fb8c00' : '#43a047';
+      html += `<div class="infos-ligne"><span>Temperature CPU</span><strong style="color:${couleur}">${info.temperature_cpu} °C</strong></div>`;
+    }
+    if (info.python) html += `<div class="infos-ligne"><span>Python</span><strong>${info.python}</strong></div>`;
+    html += '</div>';
+
+    // Stockage
+    if (info.disque && info.disque.total) {
+      const pct = Math.round((info.disque.utilise / info.disque.total) * 100);
+      const couleurDisk = pct > 85 ? '#e53935' : pct > 65 ? '#fb8c00' : '#43a047';
+      html += '<div class="infos-section">';
+      html += '<h4>&#128190; Stockage</h4>';
+      html += `<div class="infos-ligne"><span>Total</span><strong>${info.disque.total} Go</strong></div>`;
+      html += `<div class="infos-ligne"><span>Utilise</span><strong style="color:${couleurDisk}">${info.disque.utilise} Go (${pct}%)</strong></div>`;
+      html += `<div class="infos-ligne"><span>Libre</span><strong>${info.disque.libre} Go</strong></div>`;
+      html += '<div class="infos-barre-fond"><div class="infos-barre" style="width:' + pct + '%;background:' + couleurDisk + '"></div></div>';
+      html += '</div>';
+    }
+
+    // RAM
+    if (info.ram && info.ram.total) {
+      const pctRam = Math.round((info.ram.utilise / info.ram.total) * 100);
+      const couleurRam = pctRam > 85 ? '#e53935' : pctRam > 65 ? '#fb8c00' : '#43a047';
+      html += '<div class="infos-section">';
+      html += '<h4>&#129728; Memoire RAM</h4>';
+      html += `<div class="infos-ligne"><span>Total</span><strong>${info.ram.total} Go</strong></div>`;
+      html += `<div class="infos-ligne"><span>Utilise</span><strong style="color:${couleurRam}">${info.ram.utilise} Go (${pctRam}%)</strong></div>`;
+      html += `<div class="infos-ligne"><span>Libre</span><strong>${info.ram.libre} Go</strong></div>`;
+      html += '<div class="infos-barre-fond"><div class="infos-barre" style="width:' + pctRam + '%;background:' + couleurRam + '"></div></div>';
+      html += '</div>';
+    }
+
+    // Camera
+    html += '<div class="infos-section">';
+    html += '<h4>&#128247; Camera</h4>';
+    const camOk = info.camera_connectee;
+    html += `<div class="infos-ligne"><span>Mode</span><strong>${info.camera_mode}</strong></div>`;
+    html += `<div class="infos-ligne"><span>Statut</span><strong style="color:${camOk ? '#43a047' : '#e53935'}">${camOk ? 'Connectee' : 'Deconnectee'}</strong></div>`;
+    html += '</div>';
+
+    contenu.innerHTML = html;
+  } catch (e) {
+    contenu.innerHTML = '<p class="infos-erreur">Impossible de charger les informations systeme.</p>';
+  }
+}
+
 async function regenererBoothPassword() {
   const booth = config.booth || {};
   const url = getValue('admin-booth-url').replace(/\/$/, '');