refactor: suppression du sous-dossier console pour basculer sur thémage profond direct Pterodactyl (Options A & C)
This commit is contained in:
parent
83387d048b
commit
643d3184a5
3 changed files with 0 additions and 1090 deletions
|
|
@ -1,297 +0,0 @@
|
|||
// FORGIUM CLOUD COCKPIT CONTROLLER
|
||||
const FORGIUM_API_BASE = 'https://panel.forgium.fr/api/client';
|
||||
const DEFAULT_KEY = 'ptlc_8mAbydxokymforgium_144010543bd11119f4fe424b643e49d6d2e17c8271224b81';
|
||||
|
||||
class ForgiumCockpit {
|
||||
constructor() {
|
||||
this.apiKey = localStorage.getItem('forgium_cockpit_key') || DEFAULT_KEY;
|
||||
this.servers = [];
|
||||
this.currentServer = null;
|
||||
this.socket = null;
|
||||
this.pollInterval = null;
|
||||
|
||||
this.initDOMElements();
|
||||
this.bindEvents();
|
||||
this.checkAuthAndStart();
|
||||
}
|
||||
|
||||
initDOMElements() {
|
||||
this.fleetView = document.getElementById('fleet-view');
|
||||
this.serverView = document.getElementById('server-view');
|
||||
this.serversGrid = document.getElementById('servers-grid');
|
||||
this.configModal = document.getElementById('config-modal');
|
||||
this.apiKeyInput = document.getElementById('api-key-input');
|
||||
|
||||
// Detail View Elements
|
||||
this.backBtn = document.getElementById('back-to-fleet');
|
||||
this.serverTitle = document.getElementById('server-detail-title');
|
||||
this.serverDesc = document.getElementById('server-detail-desc');
|
||||
this.serverBadge = document.getElementById('server-detail-badge');
|
||||
this.terminalOutput = document.getElementById('terminal-output');
|
||||
this.terminalInput = document.getElementById('terminal-input');
|
||||
|
||||
// Stat counters
|
||||
this.countTotal = document.getElementById('stat-total-servers');
|
||||
this.countRunning = document.getElementById('stat-running-servers');
|
||||
|
||||
// Detail Gauges
|
||||
this.gaugeCpu = document.getElementById('gauge-cpu');
|
||||
this.gaugeCpuFill = document.getElementById('gauge-cpu-fill');
|
||||
this.gaugeRam = document.getElementById('gauge-ram');
|
||||
this.gaugeRamFill = document.getElementById('gauge-ram-fill');
|
||||
this.gaugeDisk = document.getElementById('gauge-disk');
|
||||
this.gaugeDiskFill = document.getElementById('gauge-disk-fill');
|
||||
|
||||
// Power Buttons
|
||||
this.btnStart = document.getElementById('btn-power-start');
|
||||
this.btnRestart = document.getElementById('btn-power-restart');
|
||||
this.btnStop = document.getElementById('btn-power-stop');
|
||||
}
|
||||
|
||||
bindEvents() {
|
||||
document.getElementById('save-key-btn').addEventListener('click', () => {
|
||||
const key = this.apiKeyInput.value.trim();
|
||||
if (key) {
|
||||
this.apiKey = key;
|
||||
localStorage.setItem('forgium_cockpit_key', key);
|
||||
this.configModal.classList.add('hidden');
|
||||
this.loadFleet();
|
||||
}
|
||||
});
|
||||
|
||||
document.getElementById('btn-settings').addEventListener('click', () => {
|
||||
this.apiKeyInput.value = this.apiKey;
|
||||
this.configModal.classList.remove('hidden');
|
||||
});
|
||||
|
||||
this.backBtn.addEventListener('click', () => {
|
||||
this.showFleetView();
|
||||
});
|
||||
|
||||
this.terminalInput.addEventListener('keydown', (e) => {
|
||||
if (e.key === 'Enter') {
|
||||
const cmd = this.terminalInput.value.trim();
|
||||
if (cmd) {
|
||||
this.sendCommand(cmd);
|
||||
this.terminalInput.value = '';
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
this.btnStart.addEventListener('click', () => this.sendPowerSignal('start'));
|
||||
this.btnRestart.addEventListener('click', () => this.sendPowerSignal('restart'));
|
||||
this.btnStop.addEventListener('click', () => this.sendPowerSignal('stop'));
|
||||
}
|
||||
|
||||
checkAuthAndStart() {
|
||||
if (!this.apiKey) {
|
||||
this.configModal.classList.remove('hidden');
|
||||
} else {
|
||||
this.loadFleet();
|
||||
}
|
||||
}
|
||||
|
||||
async apiRequest(endpoint, method = 'GET', body = null) {
|
||||
const headers = {
|
||||
'Authorization': `Bearer ${this.apiKey}`,
|
||||
'Accept': 'application/json',
|
||||
'Content-Type': 'application/json'
|
||||
};
|
||||
|
||||
const res = await fetch(`${FORGIUM_API_BASE}${endpoint}`, {
|
||||
method,
|
||||
headers,
|
||||
body: body ? JSON.stringify(body) : null
|
||||
});
|
||||
|
||||
if (!res.ok) {
|
||||
if (res.status === 401 || res.status === 403) {
|
||||
this.configModal.classList.remove('hidden');
|
||||
}
|
||||
throw new Error(`Erreur API: ${res.status}`);
|
||||
}
|
||||
|
||||
return res.json();
|
||||
}
|
||||
|
||||
async loadFleet() {
|
||||
try {
|
||||
const data = await this.apiRequest('');
|
||||
this.servers = data.data.map(item => item.attributes);
|
||||
this.renderFleet();
|
||||
} catch (err) {
|
||||
console.error('Erreur chargement flotte:', err);
|
||||
}
|
||||
}
|
||||
|
||||
async renderFleet() {
|
||||
this.serversGrid.innerHTML = '';
|
||||
this.countTotal.textContent = this.servers.length;
|
||||
let onlineCount = 0;
|
||||
|
||||
for (const s of this.servers) {
|
||||
const card = document.createElement('div');
|
||||
card.className = 'server-card';
|
||||
|
||||
// Récupérer ressources en temps réel
|
||||
let resState = 'offline';
|
||||
let cpu = '0.0%';
|
||||
let ram = '0 Mo';
|
||||
try {
|
||||
const stats = await this.apiRequest(`/servers/${s.identifier}/resources`);
|
||||
resState = stats.attributes.current_state;
|
||||
if (resState === 'running' || resState === 'starting') {
|
||||
onlineCount++;
|
||||
}
|
||||
cpu = (stats.attributes.resources.cpu_absolute || 0).toFixed(1) + '%';
|
||||
const ramMb = (stats.attributes.resources.memory_bytes / 1024 / 1024).toFixed(0);
|
||||
ram = `${ramMb} Mo / ${s.limits.memory} Mo`;
|
||||
} catch (e) {
|
||||
console.log('Stats offline:', s.name);
|
||||
}
|
||||
|
||||
const isOnline = resState === 'running' || resState === 'starting';
|
||||
const badgeClass = isOnline ? 'status-running' : 'status-offline';
|
||||
const badgeText = isOnline ? 'EN LIGNE' : 'ARRÊTÉ';
|
||||
|
||||
const defaultAlloc = s.relationships?.allocations?.data[0]?.attributes;
|
||||
const alias = defaultAlloc ? `node.forgium.fr:${defaultAlloc.port}` : 'Réseau Dédié';
|
||||
|
||||
card.innerHTML = `
|
||||
<div class="card-top">
|
||||
<div class="server-info">
|
||||
<h3>${s.name}</h3>
|
||||
<span class="server-type">AMD RYZEN 7 3700X • ${s.docker_image.split('/').pop().replace('yolks:', '')}</span>
|
||||
</div>
|
||||
<span class="status-badge ${badgeClass}">
|
||||
<span class="pulse-indicator" style="background: ${isOnline ? 'var(--accent-green)' : 'var(--text-dim)'}"></span>
|
||||
${badgeText}
|
||||
</span>
|
||||
</div>
|
||||
<div class="metrics-row">
|
||||
<div class="metric-item">
|
||||
<span class="metric-name">CPU</span>
|
||||
<span class="metric-val">${cpu}</span>
|
||||
</div>
|
||||
<div class="metric-item">
|
||||
<span class="metric-name">RAM</span>
|
||||
<span class="metric-val">${ram}</span>
|
||||
</div>
|
||||
<div class="metric-item">
|
||||
<span class="metric-name">DISQUE</span>
|
||||
<span class="metric-val">${s.limits.disk} Mo</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-actions">
|
||||
<span class="conn-alias">${alias}</span>
|
||||
<button class="btn-manage">Ouvrir le Cockpit →</button>
|
||||
</div>
|
||||
`;
|
||||
|
||||
card.addEventListener('click', () => this.openServerCockpit(s));
|
||||
this.serversGrid.appendChild(card);
|
||||
}
|
||||
|
||||
this.countRunning.textContent = onlineCount;
|
||||
}
|
||||
|
||||
openServerCockpit(server) {
|
||||
this.currentServer = server;
|
||||
this.fleetView.style.display = 'none';
|
||||
this.serverView.classList.add('active');
|
||||
|
||||
this.serverTitle.textContent = server.name;
|
||||
this.serverDesc.textContent = server.description || `Instance Cloud haute performance sur AMD Ryzen 7 3700X`;
|
||||
this.terminalOutput.textContent = `[Forgium Console Gateway] Connexion au nœud Wings sécurisé...\n[Forgium Console Gateway] Authentification TLS / WebSocket pour le serveur [${server.name}] (UUID: ${server.identifier})\n`;
|
||||
|
||||
this.startTelemetryPoll();
|
||||
}
|
||||
|
||||
showFleetView() {
|
||||
this.stopTelemetryPoll();
|
||||
this.serverView.classList.remove('active');
|
||||
this.fleetView.style.display = 'block';
|
||||
this.currentServer = null;
|
||||
this.loadFleet();
|
||||
}
|
||||
|
||||
startTelemetryPoll() {
|
||||
this.updateTelemetry();
|
||||
this.pollInterval = setInterval(() => this.updateTelemetry(), 3000);
|
||||
}
|
||||
|
||||
stopTelemetryPoll() {
|
||||
if (this.pollInterval) {
|
||||
clearInterval(this.pollInterval);
|
||||
this.pollInterval = null;
|
||||
}
|
||||
}
|
||||
|
||||
async updateTelemetry() {
|
||||
if (!this.currentServer) return;
|
||||
try {
|
||||
const stats = await this.apiRequest(`/servers/${this.currentServer.identifier}/resources`);
|
||||
const res = stats.attributes.resources;
|
||||
const state = stats.attributes.current_state;
|
||||
|
||||
const isOnline = state === 'running' || state === 'starting';
|
||||
this.serverBadge.className = `status-badge ${isOnline ? 'status-running' : 'status-offline'}`;
|
||||
this.serverBadge.innerHTML = `<span class="pulse-indicator" style="background: ${isOnline ? 'var(--accent-green)' : 'var(--text-dim)'}"></span> ${isOnline ? 'EN LIGNE' : 'ARRÊTÉ'}`;
|
||||
|
||||
// CPU
|
||||
const cpuPercent = (res.cpu_absolute || 0).toFixed(1);
|
||||
this.gaugeCpu.textContent = `${cpuPercent}% / ${this.currentServer.limits.cpu}%`;
|
||||
this.gaugeCpuFill.style.width = `${Math.min(100, (res.cpu_absolute / this.currentServer.limits.cpu) * 100)}%`;
|
||||
|
||||
// RAM
|
||||
const ramMb = (res.memory_bytes / 1024 / 1024).toFixed(1);
|
||||
const ramMax = this.currentServer.limits.memory;
|
||||
this.gaugeRam.textContent = `${ramMb} Mo / ${ramMax} Mo`;
|
||||
this.gaugeRamFill.style.width = `${Math.min(100, (ramMb / ramMax) * 100)}%`;
|
||||
|
||||
// DISK
|
||||
const diskMb = (res.disk_bytes / 1024 / 1024).toFixed(1);
|
||||
const diskMax = this.currentServer.limits.disk;
|
||||
this.gaugeDisk.textContent = `${diskMb} Mo / ${diskMax} Mo`;
|
||||
this.gaugeDiskFill.style.width = `${Math.min(100, (diskMb / diskMax) * 100)}%`;
|
||||
|
||||
// Log stream imitation for testing
|
||||
if (isOnline && Math.random() > 0.4) {
|
||||
this.appendTerminal(`[Node ${this.currentServer.node}] Heartbeat sync: CPU=${cpuPercent}% | RAM=${ramMb}Mo | Uptime=${(res.uptime / 60).toFixed(0)}m`);
|
||||
}
|
||||
} catch (e) {
|
||||
console.error('Erreur télémétrie serveur:', e);
|
||||
}
|
||||
}
|
||||
|
||||
appendTerminal(text) {
|
||||
this.terminalOutput.textContent += `${text}\n`;
|
||||
this.terminalOutput.scrollTop = this.terminalOutput.scrollHeight;
|
||||
}
|
||||
|
||||
async sendPowerSignal(signal) {
|
||||
if (!this.currentServer) return;
|
||||
this.appendTerminal(`[Forgium Cockpit] Envoi du signal d'alimentation: ${signal.toUpperCase()}...`);
|
||||
try {
|
||||
await this.apiRequest(`/servers/${this.currentServer.identifier}/power`, 'POST', { signal });
|
||||
this.appendTerminal(`[Forgium Cockpit] Ordre ${signal.toUpperCase()} exécuté avec succès par Wings.`);
|
||||
setTimeout(() => this.updateTelemetry(), 1000);
|
||||
} catch (e) {
|
||||
this.appendTerminal(`[Forgium Cockpit] ERREUR signal ${signal}: ${e.message}`);
|
||||
}
|
||||
}
|
||||
|
||||
async sendCommand(command) {
|
||||
if (!this.currentServer) return;
|
||||
this.appendTerminal(`> ${command}`);
|
||||
try {
|
||||
await this.apiRequest(`/servers/${this.currentServer.identifier}/command`, 'POST', { command });
|
||||
} catch (e) {
|
||||
this.appendTerminal(`[Forgium Cockpit] Erreur commande: ${e.message}`);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
window.cockpit = new ForgiumCockpit();
|
||||
});
|
||||
|
|
@ -1,160 +0,0 @@
|
|||
<!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>
|
||||
|
|
@ -1,633 +0,0 @@
|
|||
:root {
|
||||
--bg-deep: #030712;
|
||||
--bg-surface: #0a101f;
|
||||
--bg-card: rgba(13, 22, 41, 0.75);
|
||||
--bg-card-hover: rgba(18, 30, 56, 0.85);
|
||||
--border: rgba(56, 189, 248, 0.15);
|
||||
--border-hover: rgba(56, 189, 248, 0.4);
|
||||
--accent-cyan: #38bdf8;
|
||||
--accent-blue: #2563eb;
|
||||
--accent-green: #10b981;
|
||||
--accent-amber: #f59e0b;
|
||||
--accent-rose: #f43f5e;
|
||||
--text-main: #f8fafc;
|
||||
--text-muted: #94a3b8;
|
||||
--text-dim: #64748b;
|
||||
--glow-cyan: 0 0 25px rgba(56, 189, 248, 0.25);
|
||||
--glow-green: 0 0 20px rgba(16, 185, 129, 0.3);
|
||||
}
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
|
||||
background-color: var(--bg-deep);
|
||||
background-image:
|
||||
radial-gradient(circle at 15% 15%, rgba(56, 189, 248, 0.08) 0%, transparent 45%),
|
||||
radial-gradient(circle at 85% 85%, rgba(37, 99, 235, 0.08) 0%, transparent 45%);
|
||||
color: var(--text-main);
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
/* NAVBAR COCKPIT */
|
||||
.cockpit-header {
|
||||
background: rgba(10, 16, 31, 0.8);
|
||||
backdrop-filter: blur(16px);
|
||||
-webkit-backdrop-filter: blur(16px);
|
||||
border-bottom: 1px solid var(--border);
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.header-container {
|
||||
max-width: 1400px;
|
||||
margin: 0 auto;
|
||||
padding: 0.8rem 1.5rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.brand-area {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1.2rem;
|
||||
}
|
||||
|
||||
.brand-link {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.6rem;
|
||||
text-decoration: none;
|
||||
color: var(--text-main);
|
||||
font-weight: 800;
|
||||
font-size: 1.2rem;
|
||||
letter-spacing: -0.5px;
|
||||
}
|
||||
|
||||
.brand-badge {
|
||||
background: rgba(56, 189, 248, 0.12);
|
||||
border: 1px solid var(--border);
|
||||
color: var(--accent-cyan);
|
||||
font-family: 'JetBrains Mono', monospace;
|
||||
font-size: 0.7rem;
|
||||
padding: 0.2rem 0.6rem;
|
||||
border-radius: 6px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.node-status {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
font-size: 0.8rem;
|
||||
color: var(--text-muted);
|
||||
font-family: 'JetBrains Mono', monospace;
|
||||
}
|
||||
|
||||
.pulse-indicator {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
background: var(--accent-green);
|
||||
box-shadow: var(--glow-green);
|
||||
animation: pulse 2s infinite;
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0% { transform: scale(0.95); opacity: 0.8; }
|
||||
50% { transform: scale(1.2); opacity: 1; }
|
||||
100% { transform: scale(0.95); opacity: 0.8; }
|
||||
}
|
||||
|
||||
.user-area {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.user-chip {
|
||||
background: rgba(255, 255, 255, 0.04);
|
||||
border: 1px solid rgba(255, 255, 255, 0.08);
|
||||
padding: 0.4rem 0.9rem;
|
||||
border-radius: 100px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
font-size: 0.85rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.user-avatar {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
border-radius: 50%;
|
||||
background: linear-gradient(135deg, var(--accent-cyan), var(--accent-blue));
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 0.7rem;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
/* LAYOUT PRINCIPAL */
|
||||
.cockpit-main {
|
||||
max-width: 1400px;
|
||||
margin: 0 auto;
|
||||
padding: 2rem 1.5rem;
|
||||
flex: 1;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* VUE LISTE SERVEURS (FLEET OVERVIEW) */
|
||||
.fleet-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-end;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.fleet-title h1 {
|
||||
font-size: 1.8rem;
|
||||
font-weight: 800;
|
||||
letter-spacing: -0.5px;
|
||||
margin-bottom: 0.3rem;
|
||||
}
|
||||
|
||||
.fleet-title p {
|
||||
color: var(--text-muted);
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
.fleet-stats {
|
||||
display: flex;
|
||||
gap: 1.5rem;
|
||||
}
|
||||
|
||||
.stat-pill {
|
||||
background: var(--bg-card);
|
||||
border: 1px solid var(--border);
|
||||
padding: 0.6rem 1.2rem;
|
||||
border-radius: 12px;
|
||||
backdrop-filter: blur(8px);
|
||||
}
|
||||
|
||||
.stat-label {
|
||||
font-size: 0.75rem;
|
||||
color: var(--text-muted);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
.stat-value {
|
||||
font-size: 1.2rem;
|
||||
font-weight: 700;
|
||||
font-family: 'JetBrains Mono', monospace;
|
||||
color: var(--accent-cyan);
|
||||
}
|
||||
|
||||
/* GRILLE DE CARTES SERVEURS */
|
||||
.servers-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
|
||||
gap: 1.5rem;
|
||||
}
|
||||
|
||||
.server-card {
|
||||
background: var(--bg-card);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 18px;
|
||||
padding: 1.6rem;
|
||||
backdrop-filter: blur(14px);
|
||||
transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.server-card::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 3px;
|
||||
background: linear-gradient(90deg, var(--accent-cyan), var(--accent-blue));
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s;
|
||||
}
|
||||
|
||||
.server-card:hover {
|
||||
border-color: var(--border-hover);
|
||||
transform: translateY(-4px);
|
||||
box-shadow: var(--glow-cyan);
|
||||
}
|
||||
|
||||
.server-card:hover::before {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.card-top {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
margin-bottom: 1.2rem;
|
||||
}
|
||||
|
||||
.server-info h3 {
|
||||
font-size: 1.2rem;
|
||||
font-weight: 700;
|
||||
margin-bottom: 0.3rem;
|
||||
}
|
||||
|
||||
.server-type {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.4rem;
|
||||
font-size: 0.75rem;
|
||||
color: var(--text-muted);
|
||||
font-family: 'JetBrains Mono', monospace;
|
||||
}
|
||||
|
||||
.status-badge {
|
||||
padding: 0.3rem 0.7rem;
|
||||
border-radius: 100px;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 700;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.4rem;
|
||||
}
|
||||
|
||||
.status-running {
|
||||
background: rgba(16, 185, 129, 0.15);
|
||||
border: 1px solid rgba(16, 185, 129, 0.3);
|
||||
color: var(--accent-green);
|
||||
}
|
||||
|
||||
.status-offline {
|
||||
background: rgba(100, 116, 139, 0.15);
|
||||
border: 1px solid rgba(100, 116, 139, 0.3);
|
||||
color: var(--text-dim);
|
||||
}
|
||||
|
||||
.metrics-row {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 0.8rem;
|
||||
background: rgba(0, 0, 0, 0.3);
|
||||
padding: 0.9rem;
|
||||
border-radius: 12px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.04);
|
||||
margin-bottom: 1.2rem;
|
||||
}
|
||||
|
||||
.metric-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.metric-name {
|
||||
font-size: 0.7rem;
|
||||
color: var(--text-muted);
|
||||
margin-bottom: 0.2rem;
|
||||
}
|
||||
|
||||
.metric-val {
|
||||
font-size: 0.95rem;
|
||||
font-weight: 700;
|
||||
font-family: 'JetBrains Mono', monospace;
|
||||
color: var(--text-main);
|
||||
}
|
||||
|
||||
.card-actions {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.conn-alias {
|
||||
font-size: 0.8rem;
|
||||
font-family: 'JetBrains Mono', monospace;
|
||||
color: var(--accent-cyan);
|
||||
background: rgba(56, 189, 248, 0.08);
|
||||
padding: 0.2rem 0.5rem;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.btn-manage {
|
||||
background: linear-gradient(135deg, rgba(56, 189, 248, 0.2), rgba(37, 99, 235, 0.2));
|
||||
border: 1px solid var(--border);
|
||||
color: var(--text-main);
|
||||
padding: 0.4rem 0.9rem;
|
||||
border-radius: 8px;
|
||||
font-size: 0.85rem;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.btn-manage:hover {
|
||||
background: var(--accent-cyan);
|
||||
color: #000;
|
||||
box-shadow: var(--glow-cyan);
|
||||
}
|
||||
|
||||
/* VUE DÉTAIL SERVEUR (COCKPIT VIEW) */
|
||||
.server-view {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.server-view.active {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.server-navbar {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 1.5rem;
|
||||
flex-wrap: wrap;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.back-btn {
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
border: 1px solid var(--border);
|
||||
color: var(--text-main);
|
||||
padding: 0.5rem 1rem;
|
||||
border-radius: 8px;
|
||||
font-size: 0.85rem;
|
||||
cursor: pointer;
|
||||
font-weight: 600;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.4rem;
|
||||
}
|
||||
|
||||
.back-btn:hover {
|
||||
border-color: var(--accent-cyan);
|
||||
color: var(--accent-cyan);
|
||||
}
|
||||
|
||||
.power-controls {
|
||||
display: flex;
|
||||
gap: 0.6rem;
|
||||
}
|
||||
|
||||
.btn-power {
|
||||
padding: 0.5rem 1rem;
|
||||
border-radius: 8px;
|
||||
font-size: 0.85rem;
|
||||
font-weight: 700;
|
||||
cursor: pointer;
|
||||
border: none;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.4rem;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.btn-start {
|
||||
background: var(--accent-green);
|
||||
color: #000;
|
||||
}
|
||||
.btn-start:hover {
|
||||
box-shadow: var(--glow-green);
|
||||
filter: brightness(1.1);
|
||||
}
|
||||
|
||||
.btn-restart {
|
||||
background: var(--accent-amber);
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.btn-stop {
|
||||
background: var(--accent-rose);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
/* COCKPIT GRID : CONSOLE + FILE/METRICS TABS */
|
||||
.cockpit-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 2fr 1fr;
|
||||
gap: 1.5rem;
|
||||
}
|
||||
|
||||
/* CONSOLE CYBERPUNK */
|
||||
.terminal-window {
|
||||
background: #02040a;
|
||||
border: 1px solid rgba(56, 189, 248, 0.2);
|
||||
border-radius: 16px;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 600px;
|
||||
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6);
|
||||
}
|
||||
|
||||
.terminal-header {
|
||||
background: rgba(13, 22, 41, 0.95);
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
|
||||
padding: 0.8rem 1.2rem;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.terminal-title {
|
||||
font-family: 'JetBrains Mono', monospace;
|
||||
font-size: 0.85rem;
|
||||
color: var(--accent-cyan);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.6rem;
|
||||
}
|
||||
|
||||
.terminal-dots {
|
||||
display: flex;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.terminal-dots span {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
.dot-red { background: #ef4444; }
|
||||
.dot-yellow { background: #f59e0b; }
|
||||
.dot-green { background: #10b981; }
|
||||
|
||||
.terminal-output {
|
||||
flex: 1;
|
||||
padding: 1.2rem;
|
||||
overflow-y: auto;
|
||||
font-family: 'JetBrains Mono', monospace;
|
||||
font-size: 0.85rem;
|
||||
line-height: 1.6;
|
||||
color: #cbd5e1;
|
||||
white-space: pre-wrap;
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
.terminal-input-bar {
|
||||
background: rgba(10, 16, 31, 0.9);
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.06);
|
||||
padding: 0.8rem 1.2rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.8rem;
|
||||
}
|
||||
|
||||
.terminal-prompt {
|
||||
color: var(--accent-cyan);
|
||||
font-family: 'JetBrains Mono', monospace;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.terminal-input {
|
||||
flex: 1;
|
||||
background: transparent;
|
||||
border: none;
|
||||
color: var(--text-main);
|
||||
font-family: 'JetBrains Mono', monospace;
|
||||
font-size: 0.9rem;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
/* SIDE PANEL : METRIQUES EN DIRECT */
|
||||
.side-panel {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1.5rem;
|
||||
}
|
||||
|
||||
.gauge-box {
|
||||
background: var(--bg-card);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 16px;
|
||||
padding: 1.5rem;
|
||||
backdrop-filter: blur(14px);
|
||||
}
|
||||
|
||||
.gauge-box h4 {
|
||||
font-size: 0.95rem;
|
||||
font-weight: 700;
|
||||
margin-bottom: 1rem;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.progress-bar-bg {
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
height: 10px;
|
||||
border-radius: 100px;
|
||||
overflow: hidden;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.progress-bar-fill {
|
||||
height: 100%;
|
||||
border-radius: 100px;
|
||||
background: linear-gradient(90deg, var(--accent-cyan), var(--accent-blue));
|
||||
transition: width 0.5s cubic-bezier(0.16, 1, 0.3, 1);
|
||||
}
|
||||
|
||||
/* MODAL CONFIG / TOKEN */
|
||||
.config-modal {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(0, 0, 0, 0.85);
|
||||
backdrop-filter: blur(12px);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 999;
|
||||
}
|
||||
|
||||
.config-modal.hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
background: var(--bg-surface);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 20px;
|
||||
padding: 2.5rem;
|
||||
max-width: 480px;
|
||||
width: 90%;
|
||||
box-shadow: var(--glow-cyan);
|
||||
}
|
||||
|
||||
.modal-content h2 {
|
||||
font-size: 1.5rem;
|
||||
font-weight: 800;
|
||||
margin-bottom: 0.8rem;
|
||||
}
|
||||
|
||||
.modal-content p {
|
||||
color: var(--text-muted);
|
||||
font-size: 0.9rem;
|
||||
margin-bottom: 1.5rem;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.input-field {
|
||||
width: 100%;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
border: 1px solid var(--border);
|
||||
padding: 0.8rem 1rem;
|
||||
border-radius: 10px;
|
||||
color: var(--text-main);
|
||||
font-family: 'JetBrains Mono', monospace;
|
||||
font-size: 0.85rem;
|
||||
margin-bottom: 1.2rem;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.input-field:focus {
|
||||
border-color: var(--accent-cyan);
|
||||
box-shadow: 0 0 10px rgba(56, 189, 248, 0.2);
|
||||
}
|
||||
|
||||
.modal-btn {
|
||||
width: 100%;
|
||||
background: linear-gradient(135deg, var(--accent-cyan), var(--accent-blue));
|
||||
border: none;
|
||||
color: #000;
|
||||
font-weight: 800;
|
||||
padding: 0.9rem;
|
||||
border-radius: 10px;
|
||||
cursor: pointer;
|
||||
font-size: 1rem;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.modal-btn:hover {
|
||||
filter: brightness(1.1);
|
||||
box-shadow: var(--glow-cyan);
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
.cockpit-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
.fleet-header {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 1rem;
|
||||
}
|
||||
.terminal-window {
|
||||
height: 450px;
|
||||
}
|
||||
}
|
||||
Loading…
Add table
Reference in a new issue