nemunaire/repeater
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Redesign frontend with minimalist Swiss-Scandinavian aesthetic

Browse source 
Replace gradient-heavy design with clean typography (Outfit + DM Sans),
warm neutral palette, terracotta accent, and generous whitespace.
Preserve all JS-facing IDs, classes, and functionality.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
nemunaire 2026-04-14 12:32:56 +07:00
commit 08cbe4f9ff
2 changed files with 420 additions and 538 deletions
Download patch file Download diff file Expand all files Collapse all files

149
cmd/repeater/static/index.html
View file

@ -3,23 +3,27 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Travel Router Control Panel</title>
<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">
<div class="header">
<header class="header">
<div class="header-content">
<h1>
<svg class="logo-icon" viewBox="0 0 24 24" width="36" height="36">
<path fill="currentColor" d="M12,2C6.48,2 2,6.48 2,12C2,17.52 6.48,22 12,22C17.52,22 22,17.52 22,12C22,6.48 17.52,2 12,2M12,20C7.58,20 4,16.42 4,12C4,7.58 7.58,4 12,4C16.42,4 20,7.58 20,12C20,16.42 16.42,20 12,20M16.59,7.58L10,14.17L7.41,11.59L6,13L10,17L18,9L16.59,7.58Z"/>
</svg>
Travel Router Control
</h1>
<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">Déconnecté</span>
<span class="status-text">Disconnected</span>
</div>
<div class="status-badge" id="hotspotStatus">
<span class="status-dot active"></span>
@ -27,114 +31,63 @@
</div>
</div>
</div>
</div>
</header>
<div class="stats-grid">
<div class="stat-card">
<div class="stat-icon">
<svg viewBox="0 0 24 24" width="24" height="24">
<path fill="currentColor" d="M12,2C6.48,2 2,6.48 2,12C2,17.52 6.48,22 12,22C17.52,22 22,17.52 22,12C22,6.48 17.52,2 12,2M12,20C7.58,20 4,16.42 4,12C4,7.58 7.58,4 12,4C16.42,4 20,7.58 20,12C20,16.42 16.42,20 12,20Z"/>
</svg>
</div>
<div class="stat-content">
<div class="stat-value" id="connectedDevices">0</div>
<div class="stat-label">Appareils connectés</div>
</div>
<div class="stat-label">Appareils</div>
<div class="stat-value" id="connectedDevices">0</div>
</div>
<div class="stat-card">
<div class="stat-icon">
<svg viewBox="0 0 24 24" width="24" height="24">
<path fill="currentColor" d="M5,9.2H19V10.9H5V9.2M5,13H19V14.8H5V13M5,16.8H19V18.6H5V16.8Z"/>
</svg>
</div>
<div class="stat-content">
<div class="stat-value" id="dataUsage">0 MB</div>
<div class="stat-label">Données utilisées</div>
</div>
<div class="stat-label">Donn&eacute;es</div>
<div class="stat-value" id="dataUsage">0 MB</div>
</div>
<div class="stat-card">
<div class="stat-icon">
<svg viewBox="0 0 24 24" width="24" height="24">
<path fill="currentColor" d="M12,20A7,7 0 0,1 5,13A7,7 0 0,1 12,6A7,7 0 0,1 19,13A7,7 0 0,1 12,20M12,4A9,9 0 0,0 3,13A9,9 0 0,0 12,22A9,9 0 0,0 21,13A9,9 0 0,0 12,4M12.5,8H11V14L15.75,16.85L16.5,15.62L12.5,13.25V8Z"/>
</svg>
</div>
<div class="stat-content">
<div class="stat-value" id="uptime">00:00:00</div>
<div class="stat-label">Temps de fonctionnement</div>
</div>
<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-icon">
<svg viewBox="0 0 24 24" width="24" height="24">
<path fill="currentColor" d="M1,9L2,11C4.97,8.03 9.03,6.17 13.5,6.17C17.97,6.17 22.03,8.03 25,11L23,9C19.68,5.68 15.09,3.5 10,3.5C4.91,3.5 0.32,5.68 -3,9L-1,11M12,21L18,15C16.34,13.34 13.34,12.34 10,12.34C6.66,12.34 3.66,13.34 2,15L8,21H12Z"/>
</svg>
</div>
<div class="stat-content">
<div class="stat-value" id="currentNetwork">-</div>
<div class="stat-label">Réseau actuel</div>
</div>
<div class="stat-label">R&eacute;seau</div>
<div class="stat-value" id="currentNetwork">&mdash;</div>
</div>
</div>
<div class="grid">
<div class="card">
<div class="card-header">
<h2>
<svg class="icon" viewBox="0 0 24 24" width="20" height="20">
<path fill="currentColor" d="M1,9L2,11C4.97,8.03 9.03,6.17 13.5,6.17C17.97,6.17 22.03,8.03 25,11L23,9C19.68,5.68 15.09,3.5 10,3.5C4.91,3.5 0.32,5.68 -3,9L-1,11M12,21L18,15C16.34,13.34 13.34,12.34 10,12.34C6.66,12.34 3.66,13.34 2,15L8,21H12Z"/>
</svg>
Connexion WiFi Upstream
</h2>
<button class="btn-icon" onclick="scanWifi()" title="Scanner les réseaux">
<svg viewBox="0 0 24 24" width="20" height="20">
<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>
<h2>WiFi Upstream</h2>
<button class="btn-icon" onclick="scanWifi()" title="Scanner les r&eacute;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>
<label>R&eacute;seaux disponibles</label>
<div class="wifi-list" id="wifiList">
<div class="wifi-item loading">
<span>Chargement des réseaux...</span>
<span>Chargement des r&eacute;seaux...</span>
</div>
</div>
</div>
<div class="form-group">
<label for="wifiPassword">
<svg class="input-icon" viewBox="0 0 24 24" width="16" height="16">
<path fill="currentColor" d="M12,17A2,2 0 0,0 14,15C14,13.89 13.1,13 12,13A2,2 0 0,0 10,15A2,2 0 0,0 12,17M18,8A2,2 0 0,1 20,10V20A2,2 0 0,1 18,22H6A2,2 0 0,1 4,20V10C4,8.89 4.9,8 6,8H7V6A5,5 0 0,1 12,1A5,5 0 0,1 17,6V8H18M12,3A3,3 0 0,0 9,6V8H15V6A3,3 0 0,0 12,3Z"/>
</svg>
Mot de passe
</label>
<input type="password" id="wifiPassword" placeholder="Entrez le mot de passe WiFi (laissez vide pour réseau ouvert)">
<label for="wifiPassword">Mot de passe</label>
<input type="password" id="wifiPassword" placeholder="Mot de passe WiFi (vide = r&eacute;seau ouvert)">
</div>
<div class="button-group">
<button class="btn btn-primary" onclick="connectToWifi()">
<svg viewBox="0 0 24 24" width="18" height="18">
<path fill="currentColor" d="M17,7L15.59,8.41L18.17,11H8V13H18.17L15.59,15.58L17,17L22,12M4,5H12V3H4C2.89,3 2,3.89 2,5V19A2,2 0 0,0 4,21H12V19H4V5Z"/>
</svg>
<span id="connectBtn">Se connecter</span>
<span id="connectBtn">Connexion</span>
</button>
<button class="btn btn-secondary" onclick="disconnectWifi()">
<svg viewBox="0 0 24 24" width="18" height="18">
<path fill="currentColor" d="M16,17V14H9V10H16V7L21,12L16,17M14,2A2,2 0 0,1 16,4V6H14V4H5V20H14V18H16V20A2,2 0 0,1 14,22H5A2,2 0 0,1 3,20V4A2,2 0 0,1 5,2H14Z"/>
</svg>
Déconnecter
D&eacute;connecter
</button>
</div>
</div>
<div class="card">
<div class="card-header">
<h2>
<svg class="icon" viewBox="0 0 24 24" width="20" height="20">
<path fill="currentColor" d="M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M12,4C16.41,4 20,7.59 20,12C20,16.41 16.41,20 12,20C7.59,20 4,16.41 4,12C4,7.59 7.59,4 12,4M12,6A6,6 0 0,0 6,12A6,6 0 0,0 12,18A6,6 0 0,0 18,12A6,6 0 0,0 12,6M12,8A4,4 0 0,1 16,12A4,4 0 0,1 12,16A4,4 0 0,1 8,12A4,4 0 0,1 12,8Z"/>
</svg>
Hotspot Status
</h2>
<h2>Hotspot</h2>
<div class="toggle-switch">
<input type="checkbox" id="hotspotToggle" checked onchange="toggleHotspot()">
<label for="hotspotToggle"></label>
@ -143,7 +96,7 @@
<div class="hotspot-details" id="hotspotDetails">
<div class="hotspot-info-item">
<span class="info-label">État:</span>
<span class="info-label">&Eacute;tat</span>
<span class="info-value">Chargement...</span>
</div>
</div>
@ -153,52 +106,32 @@
<div class="grid">
<div class="card">
<div class="card-header">
<h2>
<svg class="icon" viewBox="0 0 24 24" width="20" height="20">
<path fill="currentColor" d="M16,17V19H2V17S2,13 9,13 16,17 16,17M12.5,7.5A3.5,3.5 0 0,1 9,11A3.5,3.5 0 0,1 5.5,7.5A3.5,3.5 0 0,1 9,4A3.5,3.5 0 0,1 12.5,7.5M15.94,13A5.32,5.32 0 0,1 18,17V19H22V17S22,13.37 15.94,13M15,4A3.39,3.39 0 0,0 13.07,4.59A5,5 0 0,1 13.07,10.41A3.39,3.39 0 0,0 15,11A3.5,3.5 0 0,0 18.5,7.5A3.5,3.5 0 0,0 15,4Z"/>
</svg>
Appareils connectés
</h2>
<h2>Appareils connect&eacute;s</h2>
<span class="device-count" id="deviceCount">0</span>
</div>
<div class="devices-grid" id="devicesList">
<div class="device-placeholder">
<svg viewBox="0 0 24 24" width="48" height="48">
<path fill="currentColor" opacity="0.3" d="M12,2C6.48,2 2,6.48 2,12C2,17.52 6.48,22 12,22C17.52,22 22,17.52 22,12C22,6.48 17.52,2 12,2M12,20C7.58,20 4,16.42 4,12C4,7.58 7.58,4 12,4C16.42,4 20,7.58 20,12C20,16.42 16.42,20 12,20Z"/>
</svg>
<p>Aucun appareil connecté</p>
<p>Aucun appareil connect&eacute;</p>
</div>
</div>
</div>
<div class="card">
<div class="card-header">
<h2>
<svg class="icon" viewBox="0 0 24 24" width="20" height="20">
<path fill="currentColor" d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,19H5V5H19V19M13.96,12.29L11.21,15.83L9.25,13.47L6.5,17H17.5L13.96,12.29Z"/>
</svg>
Logs système
</h2>
<h2>Logs</h2>
<div class="log-controls">
<button class="btn-icon" onclick="clearLogs()" title="Effacer les logs">
<svg viewBox="0 0 24 24" width="18" height="18">
<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 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="18" height="18">
<path fill="currentColor" d="M7.41,15.41L12,10.83L16.59,15.41L18,14L12,8L6,14L7.41,15.41Z"/>
</svg>
<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">
<svg viewBox="0 0 24 24" width="48" height="48">
<path fill="currentColor" opacity="0.3" d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,19H5V5H19V19Z"/>
</svg>
<p>Aucun log disponible</p>
</div>
</div>
@ -214,9 +147,7 @@
<div class="toast-message" id="toastMessage"></div>
</div>
<button class="toast-close" onclick="hideToast()">
<svg viewBox="0 0 24 24" width="18" height="18">
<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>
<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>

823
cmd/repeater/static/style.css
View file

File diff suppressed because it is too large Load diff