Patrick
44 lines
2.5 KiB
HTML
44 lines
2.5 KiB
HTML
<!-- ═══════════════ QR CODE ═══════════════ -->
|
||
<div class="page" id="page-qrcode">
|
||
<button class="back-btn" onclick="showPage('home')">← Back to Tools</button>
|
||
<div class="section-header">
|
||
<h2><i class="fas fa-qrcode" style="color:var(--accent)"></i> QR Code Generator</h2>
|
||
<p>Generate QR codes from any text or URL.</p>
|
||
</div>
|
||
<div style="max-width:640px;">
|
||
<div class="panel-label">Data</div>
|
||
<textarea id="qrInput" placeholder="Enter text or URL..." style="min-height:80px;" oninput="generateQR()"></textarea>
|
||
<div style="text-align:center;margin:20px 0;">
|
||
<div id="qrCanvas" style="display:none;"></div>
|
||
<div id="qrPlaceholder" style="color:var(--text-muted);font-size:0.85rem;">Type something above to generate a QR code</div>
|
||
</div>
|
||
<div class="btn-group" style="justify-content:center;">
|
||
<button class="btn btn-primary" onclick="downloadQR()"><i class="fas fa-download"></i> Download PNG</button>
|
||
</div>
|
||
<div class="api-usage">
|
||
<button class="api-usage-toggle" onclick="toggleApiUsage(this)"><span><i class="fas fa-terminal"></i> API Usage <span class="badge">Client-side</span></span><i class="fas fa-chevron-down"></i></button>
|
||
<div class="api-usage-body">
|
||
<div class="api-baseurl-note">ℹ️ QR Code generation runs entirely <strong>client-side</strong> using the <code>qrcode-generator</code> library. No server API is needed.</div>
|
||
<div class="api-endpoint">
|
||
<div class="api-desc">Generate QR codes using the qrcode-generator package (works in Node.js and browsers).</div>
|
||
<div class="api-code"><button class="api-code-copy" onclick="copyApiCode(this)">Copy</button><span class="cm">// Install: npm install qrcode-generator</span>
|
||
<span class="cm">// Browser CDN: https://cdn.jsdelivr.net/npm/qrcode-generator@1.4.4/qrcode.min.js</span>
|
||
|
||
<span class="kw">const</span> qr = <span class="fn">qrcode</span>(0, <span class="str">'M'</span>);
|
||
qr.<span class="fn">addData</span>(<span class="str">"https://example.com"</span>);
|
||
qr.<span class="fn">make</span>();
|
||
|
||
<span class="cm">// Render as an <img> tag:</span>
|
||
document.<span class="fn">getElementById</span>(<span class="str">'container'</span>).innerHTML =
|
||
qr.<span class="fn">createImgTag</span>(4, 8);
|
||
|
||
<span class="cm">// Or get a data URL:</span>
|
||
<span class="kw">const</span> dataUrl = qr.<span class="fn">createDataURL</span>(4, 8);
|
||
<span class="cm">// → "data:image/gif;base64,..."</span></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|