92 lines
3.7 KiB
HTML
92 lines
3.7 KiB
HTML
<!doctype html>
|
|
<html lang="fr">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
<title>WireGuard Config Generator</title>
|
|
<link rel="stylesheet" href="style.css" />
|
|
</head>
|
|
<body>
|
|
<header>
|
|
<h1>WireGuard <span>Config Generator</span></h1>
|
|
<p>Générez des configurations WireGuard prêtes à l'emploi.</p>
|
|
<span class="badge">🔒 100% local — aucune clé ne quitte votre navigateur</span>
|
|
</header>
|
|
|
|
<main>
|
|
<section class="panel">
|
|
<h2>Paramètres du serveur</h2>
|
|
<div class="grid">
|
|
<div class="field">
|
|
<label for="srv-endpoint">Endpoint (hôte ou IP publique)</label>
|
|
<input type="text" id="srv-endpoint" placeholder="vpn.example.com" />
|
|
</div>
|
|
<div class="field">
|
|
<label for="srv-port">Port d'écoute</label>
|
|
<input type="number" id="srv-port" value="51820" min="1" max="65535" />
|
|
</div>
|
|
<div class="field">
|
|
<label for="srv-network">Réseau VPN (CIDR)</label>
|
|
<input type="text" id="srv-network" value="10.10.0.0/24" placeholder="10.10.0.0/24" />
|
|
</div>
|
|
<div class="field">
|
|
<label for="srv-server-ip">IP du serveur dans le VPN</label>
|
|
<input type="text" id="srv-server-ip" value="10.10.0.1" />
|
|
</div>
|
|
<div class="field">
|
|
<label for="srv-dns">DNS pour les clients (optionnel)</label>
|
|
<input type="text" id="srv-dns" placeholder="1.1.1.1" />
|
|
</div>
|
|
<div class="field">
|
|
<label for="srv-allowed-ips">AllowedIPs côté client</label>
|
|
<input type="text" id="srv-allowed-ips" value="0.0.0.0/0, ::/0" />
|
|
</div>
|
|
</div>
|
|
|
|
<div class="field">
|
|
<label for="srv-pubkey">Clé publique du serveur (laisser vide pour en générer une nouvelle)</label>
|
|
<input type="text" id="srv-pubkey" placeholder="générée automatiquement si vide" />
|
|
</div>
|
|
|
|
<div class="checkbox-row field">
|
|
<input type="checkbox" id="use-psk" checked />
|
|
<label for="use-psk" style="margin:0;">Ajouter une clé pré-partagée (PresharedKey) par client</label>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="panel">
|
|
<div class="section-title-row">
|
|
<h2 style="margin:0;">Clients</h2>
|
|
<button class="btn-secondary" id="add-client">+ Ajouter un client</button>
|
|
</div>
|
|
<div class="clients-list" id="clients-list"></div>
|
|
<p class="hint">L'adresse IP de chaque client est attribuée automatiquement à partir du réseau VPN défini ci-dessus (serveur = .1, premier client = .2, etc.).</p>
|
|
</section>
|
|
|
|
<div class="actions">
|
|
<button class="btn-primary" id="generate-btn">Générer les configurations</button>
|
|
<button class="btn-secondary" id="reset-btn">Réinitialiser</button>
|
|
</div>
|
|
|
|
<section class="panel" id="server-summary" style="display:none;">
|
|
<div class="section-title-row">
|
|
<h2 style="margin:0;">Configuration serveur (wg0.conf)</h2>
|
|
<button class="btn-secondary copy-btn" data-copy-target="server-conf-text">Copier</button>
|
|
</div>
|
|
<div class="server-block" id="server-conf-text"></div>
|
|
<p class="hint">À placer sur le serveur WireGuard (ex. <code>/etc/wireguard/wg0.conf</code>). Contient la clé privée du serveur : gardez-la secrète.</p>
|
|
</section>
|
|
|
|
<section id="results"></section>
|
|
</main>
|
|
|
|
<footer>
|
|
Générateur WireGuard — aucune donnée n'est envoyée à un serveur, tout est calculé dans votre navigateur (tweetnacl / X25519).
|
|
</footer>
|
|
|
|
<script src="vendor/tweetnacl.min.js"></script>
|
|
<script src="vendor/qrcode.min.js"></script>
|
|
<script src="app.js"></script>
|
|
</body>
|
|
</html>
|