qrcode-generator/app/index.html

<!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, des liens, une connexion Wi-Fi ou une carte de contact, 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-mode">Type de contenu</label>
        <select id="qr-mode">
          <option value="text" selected>Texte / URL</option>
          <option value="wifi">Wi-Fi</option>
          <option value="vcard">Contact (vCard)</option>
        </select>
      </div>

      <div class="field" id="mode-text">
        <label for="qr-text">Texte ou URL à encoder</label>
        <textarea id="qr-text" placeholder="https://example.com">https://example.com</textarea>
      </div>

      <div id="mode-wifi" style="display:none;">
        <div class="grid">
          <div class="field">
            <label for="wifi-ssid">Nom du réseau (SSID)</label>
            <input type="text" id="wifi-ssid" placeholder="MonReseauWifi" />
          </div>
          <div class="field">
            <label for="wifi-encryption">Sécurité</label>
            <select id="wifi-encryption">
              <option value="WPA" selected>WPA/WPA2/WPA3</option>
              <option value="WEP">WEP</option>
              <option value="nopass">Aucune (réseau ouvert)</option>
            </select>
          </div>
        </div>
        <div class="field" id="wifi-password-field">
          <label for="wifi-password">Mot de passe</label>
          <input type="text" id="wifi-password" placeholder="••••••••" />
        </div>
        <div class="checkbox-row field">
          <input type="checkbox" id="wifi-hidden" />
          <label for="wifi-hidden" style="margin:0;">Réseau masqué (SSID caché)</label>
        </div>
        <p class="hint">Scanné avec l'appareil photo du téléphone, ce QR code connecte directement l'appareil au réseau Wi-Fi, sans saisir le mot de passe.</p>
      </div>

      <div id="mode-vcard" style="display:none;">
        <div class="grid">
          <div class="field">
            <label for="vcard-firstname">Prénom</label>
            <input type="text" id="vcard-firstname" placeholder="Jean" />
          </div>
          <div class="field">
            <label for="vcard-lastname">Nom</label>
            <input type="text" id="vcard-lastname" placeholder="Dupont" />
          </div>
        </div>
        <div class="grid">
          <div class="field">
            <label for="vcard-phone">Téléphone</label>
            <input type="text" id="vcard-phone" placeholder="+33 6 12 34 56 78" />
          </div>
          <div class="field">
            <label for="vcard-email">Email</label>
            <input type="text" id="vcard-email" placeholder="jean.dupont@example.com" />
          </div>
        </div>
        <div class="grid">
          <div class="field">
            <label for="vcard-org">Organisation</label>
            <input type="text" id="vcard-org" placeholder="Mon Entreprise" />
          </div>
          <div class="field">
            <label for="vcard-title">Fonction</label>
            <input type="text" id="vcard-title" placeholder="Développeur" />
          </div>
        </div>
        <div class="field">
          <label for="vcard-website">Site web</label>
          <input type="text" id="vcard-website" placeholder="https://example.com" />
        </div>
        <p class="hint">Scanné avec l'appareil photo du téléphone, ce QR code propose d'ajouter directement le contact au répertoire.</p>
      </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>
      <button class="btn-secondary" id="download-svg-btn">Télécharger en SVG</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>