Initial commit: QR code generator (encodage et rendu côté navigateur)

app/index.html

@@ -0,0 +1,81 @@
+<!doctype html>
+<html lang="fr">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>QR Code Generator</title>
+  <link rel="stylesheet" href="style.css" />
+</head>
+<body>
+  <header>
+    <h1>QR Code <span>Generator</span></h1>
+    <p>Générez des QR codes pour du texte ou des liens, avec logo optionnel.</p>
+    <span class="badge">🔒 100% local — rien n'est envoyé à un serveur</span>
+  </header>
+
+  <main>
+    <section class="panel">
+      <h2>Contenu</h2>
+      <div class="field">
+        <label for="qr-text">Texte ou URL à encoder</label>
+        <textarea id="qr-text" placeholder="https://example.com">https://example.com</textarea>
+      </div>
+
+      <div class="grid">
+        <div class="field">
+          <label for="qr-cell-size">Taille des modules (px)</label>
+          <input type="range" id="qr-cell-size" min="4" max="16" value="8" />
+        </div>
+        <div class="field">
+          <label for="qr-correction">Correction d'erreur</label>
+          <select id="qr-correction">
+            <option value="L">L — basse (7%)</option>
+            <option value="M" selected>M — moyenne (15%)</option>
+            <option value="Q">Q — haute (25%)</option>
+            <option value="H">H — maximale (30%)</option>
+          </select>
+        </div>
+      </div>
+
+      <div class="color-fields">
+        <div class="field">
+          <label for="qr-fg-color">Couleur des modules</label>
+          <input type="color" id="qr-fg-color" value="#0c0a09" />
+        </div>
+        <div class="field">
+          <label for="qr-bg-color">Couleur de fond</label>
+          <input type="color" id="qr-bg-color" value="#ffffff" />
+        </div>
+      </div>
+    </section>
+
+    <section class="panel">
+      <h2>Logo (optionnel)</h2>
+      <div class="file-row">
+        <input type="file" id="qr-logo-input" accept="image/*" />
+        <button class="btn-danger" id="qr-logo-clear" type="button">Retirer le logo</button>
+      </div>
+      <p class="hint">Un logo au centre force automatiquement la correction d'erreur au niveau H pour rester scannable.</p>
+    </section>
+
+    <div class="actions">
+      <button class="btn-primary" id="generate-btn">Générer le QR code</button>
+      <button class="btn-secondary" id="download-btn">Télécharger en PNG</button>
+    </div>
+
+    <section class="panel preview-panel">
+      <div class="qr-canvas-wrap">
+        <canvas id="qr-canvas"></canvas>
+      </div>
+      <p class="hint" id="qr-status">Aperçu généré automatiquement à chaque modification.</p>
+    </section>
+  </main>
+
+  <footer>
+    Générateur de QR code — tout le traitement (encodage, rendu, superposition du logo) se fait dans votre navigateur.
+  </footer>
+
+  <script src="vendor/qrcode.min.js"></script>
+  <script src="app.js"></script>
+</body>
+</html>