Initial commit: WireGuard config generator (génération de clés côté navigateur)

app/index.html

@@ -0,0 +1,91 @@
+<!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>