Pierre-Olivier Mercier
3e66ae200e
Default the Ethernet and hotspot badges to the offline dot and update the Ethernet dot to active when the uplink is up, so its colour tracks the actual connection state instead of the initial markup. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
166 lines
7.2 KiB
HTML
166 lines
7.2 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="fr">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Travel Router</title>
|
|
<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=Outfit:wght@300;400;500;600;700&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;1,9..40,400&display=swap" rel="stylesheet"-->
|
|
<link rel="stylesheet" href="/style.css">
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<header class="header">
|
|
<div class="header-content">
|
|
<div class="header-left">
|
|
<div class="logo-mark"></div>
|
|
<div>
|
|
<h1>Travel Router</h1>
|
|
<p class="header-subtitle">Control Panel</p>
|
|
</div>
|
|
</div>
|
|
<div class="connection-info">
|
|
<div class="status-badge" id="wifiStatus">
|
|
<span class="status-dot offline"></span>
|
|
<span class="status-text">Disconnected</span>
|
|
</div>
|
|
<div class="status-badge" id="ethernetStatus" hidden>
|
|
<span class="status-dot offline"></span>
|
|
<span class="status-text">Ethernet</span>
|
|
</div>
|
|
<div class="status-badge" id="hotspotStatus">
|
|
<span class="status-dot offline"></span>
|
|
<span class="status-text">Hotspot actif</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<div class="stats-grid">
|
|
<div class="stat-card">
|
|
<div class="stat-label">Appareils</div>
|
|
<div class="stat-value" id="connectedDevices">0</div>
|
|
</div>
|
|
<div class="stat-card">
|
|
<div class="stat-label">Données</div>
|
|
<div class="stat-value" id="dataUsage">0 MB</div>
|
|
</div>
|
|
<div class="stat-card">
|
|
<div class="stat-label">Uptime</div>
|
|
<div class="stat-value mono" id="uptime">00:00:00</div>
|
|
</div>
|
|
<div class="stat-card">
|
|
<div class="stat-label">Réseau</div>
|
|
<div class="stat-value" id="currentNetwork">—</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="grid">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h2>WiFi Upstream</h2>
|
|
<button class="btn-icon" onclick="scanWifi()" title="Scanner les réseaux">
|
|
<svg viewBox="0 0 24 24" width="18" height="18"><path fill="currentColor" d="M17.65,6.35C16.2,4.9 14.21,4 12,4A8,8 0 0,0 4,12A8,8 0 0,0 12,20C15.73,20 18.84,17.45 19.73,14H17.65C16.83,16.33 14.61,18 12,18A6,6 0 0,1 6,12A6,6 0 0,1 12,6C13.66,6 15.14,6.69 16.22,7.78L13,11H20V4L17.65,6.35Z"/></svg>
|
|
</button>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label>Réseaux disponibles</label>
|
|
<div class="wifi-list" id="wifiList">
|
|
<div class="wifi-item loading">
|
|
<span>Chargement des réseaux...</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="wifiPassword">Mot de passe</label>
|
|
<input type="password" id="wifiPassword" placeholder="Mot de passe WiFi (vide = réseau ouvert)">
|
|
</div>
|
|
|
|
<div class="button-group">
|
|
<button class="btn btn-primary" onclick="connectToWifi()">
|
|
<span id="connectBtn">Connexion</span>
|
|
</button>
|
|
<button class="btn btn-secondary" onclick="disconnectWifi()">
|
|
Déconnecter
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h2>Hotspot</h2>
|
|
<div class="toggle-switch">
|
|
<input type="checkbox" id="hotspotToggle" checked onchange="toggleHotspot()">
|
|
<label for="hotspotToggle"></label>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="hotspot-details" id="hotspotDetails">
|
|
<div class="hotspot-info-item">
|
|
<span class="info-label">État</span>
|
|
<span class="info-value">Chargement...</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="grid">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h2>Appareils connectés</h2>
|
|
<span class="device-count" id="deviceCount">0</span>
|
|
</div>
|
|
|
|
<div class="devices-grid" id="devicesList">
|
|
<div class="device-placeholder">
|
|
<p>Aucun appareil connecté</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h2>Logs</h2>
|
|
<div class="log-controls">
|
|
<button class="btn-icon" onclick="clearLogs()" title="Effacer">
|
|
<svg viewBox="0 0 24 24" width="16" height="16"><path fill="currentColor" d="M19,4H15.5L14.5,3H9.5L8.5,4H5V6H19M6,19A2,2 0 0,0 8,21H16A2,2 0 0,0 18,19V7H6V19Z"/></svg>
|
|
</button>
|
|
<button class="btn-icon" onclick="toggleAutoScroll()" title="Auto-scroll" id="autoScrollBtn">
|
|
<svg viewBox="0 0 24 24" width="16" height="16"><path fill="currentColor" d="M7.41,15.41L12,10.83L16.59,15.41L18,14L12,8L6,14L7.41,15.41Z"/></svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="log-container" id="logContainer">
|
|
<div class="log-placeholder">
|
|
<p>Aucun log disponible</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Toast Notification -->
|
|
<div class="toast" id="toast">
|
|
<div class="toast-icon" id="toastIcon"></div>
|
|
<div class="toast-content">
|
|
<div class="toast-title" id="toastTitle"></div>
|
|
<div class="toast-message" id="toastMessage"></div>
|
|
</div>
|
|
<button class="toast-close" onclick="hideToast()">
|
|
<svg viewBox="0 0 24 24" width="16" height="16"><path fill="currentColor" d="M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z"/></svg>
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Loading Overlay -->
|
|
<div class="loading-overlay" id="loadingOverlay">
|
|
<div class="spinner"></div>
|
|
<p>Chargement...</p>
|
|
</div>
|
|
|
|
<script src="/app.js"></script>
|
|
</body>
|
|
</html>
|