117 lines
4.3 KiB
HTML
117 lines
4.3 KiB
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 ou une connexion Wi-Fi, 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>
|
|
</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 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>
|