135 lines
5.4 KiB
HTML
135 lines
5.4 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="fr">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>WiFi Repeater Control</title>
|
|
<link rel="stylesheet" href="/style.css">
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<div class="header">
|
|
<h1>🌐 WiFi Repeater Control</h1>
|
|
<div class="status-indicator" id="connectionStatus">
|
|
<div class="status-dot"></div>
|
|
<span>En ligne</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="stats-grid">
|
|
<div class="stat-card">
|
|
<div class="stat-value" id="connectedDevices">0</div>
|
|
<div class="stat-label">Appareils connectés</div>
|
|
</div>
|
|
<div class="stat-card">
|
|
<div class="stat-value" id="dataUsage">0 MB</div>
|
|
<div class="stat-label">Données utilisées</div>
|
|
</div>
|
|
<div class="stat-card">
|
|
<div class="stat-value" id="uptime">00:00:00</div>
|
|
<div class="stat-label">Temps de fonctionnement</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="grid">
|
|
<div class="card">
|
|
<h2>
|
|
<svg class="icon" viewBox="0 0 24 24">
|
|
<path d="M1 9l2 2c4.97-4.97 13.03-4.97 18 0l2-2C16.93 2.93 7.07 2.93 1 9zm8 8l3 3 3-3c-1.65-1.66-4.34-1.66-6 0zm-4-4l2 2c2.76-2.76 7.24-2.76 10 0l2-2C15.14 9.14 8.87 9.14 5 13z"/>
|
|
</svg>
|
|
Connexion WiFi Externe
|
|
</h2>
|
|
|
|
<div class="form-group">
|
|
<label>Réseaux disponibles</label>
|
|
<div class="wifi-list" id="wifiList">
|
|
<!-- Liste des réseaux WiFi sera remplie par JavaScript -->
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="wifiPassword">Mot de passe</label>
|
|
<input type="password" id="wifiPassword" placeholder="Entrez le mot de passe WiFi">
|
|
</div>
|
|
|
|
<button class="btn" onclick="connectToWifi()">
|
|
<span id="connectBtn">Se connecter</span>
|
|
</button>
|
|
|
|
<button class="btn btn-secondary" onclick="scanWifi()">
|
|
<span id="scanBtn">Scanner les réseaux</span>
|
|
</button>
|
|
</div>
|
|
|
|
<div class="card">
|
|
<h2>
|
|
<svg class="icon" viewBox="0 0 24 24">
|
|
<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/>
|
|
</svg>
|
|
Configuration Hotspot
|
|
</h2>
|
|
|
|
<div class="form-group">
|
|
<label for="hotspotName">Nom du réseau (SSID)</label>
|
|
<input type="text" id="hotspotName" value="MyRepeater" placeholder="Nom du hotspot">
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="hotspotPassword">Mot de passe</label>
|
|
<input type="password" id="hotspotPassword" value="password123" placeholder="Mot de passe du hotspot">
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="hotspotChannel">Canal</label>
|
|
<select id="hotspotChannel">
|
|
<option value="1">Canal 1</option>
|
|
<option value="6" selected>Canal 6</option>
|
|
<option value="11">Canal 11</option>
|
|
</select>
|
|
</div>
|
|
|
|
<button class="btn" onclick="updateHotspot()">Mettre à jour</button>
|
|
<button class="btn btn-danger" onclick="toggleHotspot()">
|
|
<span id="hotspotBtn">Arrêter le hotspot</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="grid">
|
|
<div class="card">
|
|
<h2>
|
|
<svg class="icon" viewBox="0 0 24 24">
|
|
<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 3c1.66 0 3 1.34 3 3s-1.34 3-3 3-3-1.34-3-3 1.34-3 3-3zm0 14.2c-2.5 0-4.71-1.28-6-3.22.03-1.99 4-3.08 6-3.08 1.99 0 5.97 1.09 6 3.08-1.29 1.94-3.5 3.22-6 3.22z"/>
|
|
</svg>
|
|
Appareils connectés
|
|
</h2>
|
|
|
|
<div class="devices-grid" id="devicesList">
|
|
<!-- Liste des appareils sera remplie par JavaScript -->
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card">
|
|
<h2>
|
|
<svg class="icon" viewBox="0 0 24 24">
|
|
<path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-5 14H7v-2h7v2zm3-4H7v-2h10v2zm0-4H7V7h10v2z"/>
|
|
</svg>
|
|
Logs système
|
|
</h2>
|
|
|
|
<div class="log-container" id="logContainer">
|
|
<!-- Les logs seront ajoutés ici -->
|
|
</div>
|
|
|
|
<button class="btn btn-secondary" onclick="clearLogs()" style="margin-top: 15px;">
|
|
Effacer les logs
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="notification" id="notification"></div>
|
|
|
|
<script src="/app.js"></script>
|
|
</body>
|
|
</html>
|