160 lines
7.3 KiB
HTML
160 lines
7.3 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="fr">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Cockpit & Console | Forgium Cloud</title>
|
|
<meta name="description" content="Centre de pilotage haute performance Forgium Cloud. Gestion en temps réel de vos serveurs de jeux et bots.">
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500;700&display=swap" rel="stylesheet">
|
|
<link rel="stylesheet" href="style-console.css">
|
|
<link rel="icon" type="image/svg+xml" href="../favicon.svg">
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<!-- NAVBAR COCKPIT -->
|
|
<header class="cockpit-header">
|
|
<div class="header-container">
|
|
<div class="brand-area">
|
|
<a href="../index.html" class="brand-link">
|
|
<img src="../logo.svg" alt="Forgium Logo" width="30" height="30">
|
|
FORGIUM
|
|
<span class="brand-badge">COCKPIT</span>
|
|
</a>
|
|
<div class="node-status">
|
|
<span class="pulse-indicator"></span>
|
|
<span>WINGS CLUSTER ONLINE</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="user-area">
|
|
<div class="user-chip">
|
|
<div class="user-avatar">F</div>
|
|
<span>Mathias Z. (Admin)</span>
|
|
</div>
|
|
<button id="btn-settings" class="btn-manage" title="Configuration de l'accès API">⚙️ Clé API</button>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- CONTENU PRINCIPAL DU COCKPIT -->
|
|
<main class="cockpit-main">
|
|
|
|
<!-- 1. VUE FLOTTE (LISTE DES SERVEURS) -->
|
|
<section id="fleet-view" class="fleet-view">
|
|
<div class="fleet-header">
|
|
<div class="fleet-title">
|
|
<h1>Centre de Contrôle Matériel</h1>
|
|
<p>Supervision et pilotage direct sur architecture dédiée AMD Ryzen 7 3700X.</p>
|
|
</div>
|
|
<div class="fleet-stats">
|
|
<div class="stat-pill">
|
|
<div class="stat-label">Serveurs Déployés</div>
|
|
<div id="stat-total-servers" class="stat-value">--</div>
|
|
</div>
|
|
<div class="stat-pill">
|
|
<div class="stat-label">En Fonctionnement</div>
|
|
<div id="stat-running-servers" class="stat-value" style="color: var(--accent-green);">--</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- GRILLE DES SERVEURS -->
|
|
<div id="servers-grid" class="servers-grid">
|
|
<!-- Injecté par cockpit.js -->
|
|
</div>
|
|
</section>
|
|
|
|
<!-- 2. VUE COCKPIT SERVEUR INDIVIDUEL (DÉTAIL + CONSOLE) -->
|
|
<section id="server-view" class="server-view">
|
|
<div class="server-navbar">
|
|
<button id="back-to-fleet" class="back-btn">← Retour à la flotte</button>
|
|
<div class="server-title-group">
|
|
<h2 id="server-detail-title">Chargement...</h2>
|
|
<p id="server-detail-desc" style="color: var(--text-muted); font-size: 0.85rem;"></p>
|
|
</div>
|
|
<div class="power-controls">
|
|
<button id="btn-power-start" class="btn-power btn-start">▶ Démarrer</button>
|
|
<button id="btn-power-restart" class="btn-power btn-restart">🔄 Redémarrer</button>
|
|
<button id="btn-power-stop" class="btn-power btn-stop">⏹ Arrêter</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="cockpit-grid">
|
|
<!-- CONSOLE TERMINAL -->
|
|
<div class="terminal-window">
|
|
<div class="terminal-header">
|
|
<div class="terminal-title">
|
|
<span>TERMINAL SHELL</span>
|
|
<span id="server-detail-badge" class="status-badge status-offline">--</span>
|
|
</div>
|
|
<div class="terminal-dots">
|
|
<span class="dot-red"></span>
|
|
<span class="dot-yellow"></span>
|
|
<span class="dot-green"></span>
|
|
</div>
|
|
</div>
|
|
<div id="terminal-output" class="terminal-output"></div>
|
|
<div class="terminal-input-bar">
|
|
<span class="terminal-prompt">></span>
|
|
<input type="text" id="terminal-input" class="terminal-input" placeholder="Envoyer une commande au serveur..." autocomplete="off">
|
|
</div>
|
|
</div>
|
|
|
|
<!-- SIDEBAR METRIQUES EN DIRECT -->
|
|
<div class="side-panel">
|
|
<div class="gauge-box">
|
|
<h4>
|
|
<span>Charge Processeur</span>
|
|
<span id="gauge-cpu" style="color: var(--accent-cyan);">--</span>
|
|
</h4>
|
|
<div class="progress-bar-bg">
|
|
<div id="gauge-cpu-fill" class="progress-bar-fill" style="width: 0%;"></div>
|
|
</div>
|
|
<p style="font-size: 0.75rem; color: var(--text-dim);">AMD Ryzen 7 3700X High Performance Core</p>
|
|
</div>
|
|
|
|
<div class="gauge-box">
|
|
<h4>
|
|
<span>Mémoire Vive (RAM)</span>
|
|
<span id="gauge-ram" style="color: var(--accent-cyan);">--</span>
|
|
</h4>
|
|
<div class="progress-bar-bg">
|
|
<div id="gauge-ram-fill" class="progress-bar-fill" style="width: 0%;"></div>
|
|
</div>
|
|
<p style="font-size: 0.75rem; color: var(--text-dim);">Allocation stricte isolée sans dépassement</p>
|
|
</div>
|
|
|
|
<div class="gauge-box">
|
|
<h4>
|
|
<span>Espace Disque SSD</span>
|
|
<span id="gauge-disk" style="color: var(--accent-cyan);">--</span>
|
|
</h4>
|
|
<div class="progress-bar-bg">
|
|
<div id="gauge-disk-fill" class="progress-bar-fill" style="width: 0%;"></div>
|
|
</div>
|
|
<p style="font-size: 0.75rem; color: var(--text-dim);">NVMe Local haute vitesse</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
</main>
|
|
|
|
<!-- MODAL CONFIGURATION CLÉ API -->
|
|
<div id="config-modal" class="config-modal hidden">
|
|
<div class="modal-content">
|
|
<h2>Authentification Forgium</h2>
|
|
<p>Renseignez votre clé d'accès sécurisée pour connecter ce cockpit à vos instances de calcul isolées.</p>
|
|
<input type="password" id="api-key-input" class="input-field" placeholder="ptlc_...">
|
|
<button id="save-key-btn" class="modal-btn">Enregistrer & Déverrouiller →</button>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="cockpit.js"></script>
|
|
</body>
|
|
|
|
</html>
|