82 lines
2.8 KiB
HTML
82 lines
2.8 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 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>
|