winnie/WinnieAPI-v2
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

first commit

Browse Source
This commit is contained in:
Patrick
2026-05-01 20:02:13 +02:00
commit 75fb753fc0
77 changed files with 4793 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/tools/qrreader.html
+90
View File
@@ -0,0 +1,90 @@
<!-- ═══════════════ QR CODE READER ═══════════════ -->
<div class="page" id="page-qrreader">
<button class="back-btn" onclick="showPage('home')">← Back to Tools</button>
<div class="section-header">
<h2><i class="fas fa-camera" style="color:var(--cyan)"></i> QR Code Reader</h2>
<p>Scan QR codes using your camera or upload an image file.</p>
</div>
<div style="display:grid;grid-template-columns:1fr 1fr;gap:20px;">
<!-- Left: Input -->
<div>
<div class="panel-label">Scan Method</div>
<div class="btn-group">
<button class="btn btn-primary" id="qrCameraBtn" onclick="startQrCamera()"><i class="fas fa-video"></i> Use Camera</button>
<button class="btn btn-secondary" id="qrStopBtn" onclick="stopQrCamera()" style="display:none;"><i class="fas fa-stop"></i> Stop Camera</button>
<label class="btn btn-secondary" style="cursor:pointer;">
<i class="fas fa-upload"></i> Upload Image
<input type="file" id="qrFileInput" accept="image/*" onchange="scanQrFromFile(event)" style="display:none;" />
</label>
</div>
<!-- Camera feed -->
<div id="qrCameraContainer" style="display:none;margin-top:16px;">
<video id="qrVideo" style="width:100%;border-radius:var(--radius);border:1px solid var(--border);background:#000;" autoplay playsinline muted></video>
<canvas id="qrScanCanvas" style="display:none;"></canvas>
</div>
<!-- Image preview -->
<div id="qrImagePreview" style="display:none;margin-top:16px;">
<img id="qrPreviewImg" alt="Uploaded QR image" src="" style="width:100%;border-radius:var(--radius);border:1px solid var(--border);" />
<canvas id="qrImgCanvas" style="display:none;"></canvas>
</div>
</div>
<!-- Right: Result -->
<div>
<div class="panel-label">Scan Result</div>
<div id="qrReaderPlaceholder" style="color:var(--text-muted);font-size:0.85rem;padding:40px 20px;text-align:center;background:var(--bg-input);border:1px solid var(--border);border-radius:var(--radius);">
<i class="fas fa-qrcode" style="font-size:3rem;margin-bottom:12px;display:block;opacity:0.3;"></i>
Point your camera at a QR code or upload an image to scan.
</div>
<div id="qrReaderResult" style="display:none;">
<div class="result-card">
<div class="panel-label">Decoded Content</div>
<div id="qrDecodedText" style="font-family:var(--font-mono);font-size:0.9rem;padding:14px;background:var(--bg-input);border:1px solid var(--border);border-radius:var(--radius-sm);word-break:break-all;margin-bottom:12px;color:var(--cyan);"></div>
<div class="panel-label">Type</div>
<div id="qrDecodedType" style="font-size:0.85rem;color:var(--text-secondary);margin-bottom:12px;"></div>
<div class="btn-group">
<button class="btn btn-green" onclick="copyText(document.getElementById('qrDecodedText').textContent)"><i class="fas fa-copy"></i> Copy</button>
<button class="btn btn-secondary" id="qrOpenLinkBtn" style="display:none;" onclick="window.open(document.getElementById('qrDecodedText').textContent,'_blank')"><i class="fas fa-external-link-alt"></i> Open Link</button>
</div>
<div class="panel-label" style="margin-top:12px;">Scan History</div>
<div id="qrScanHistory"></div>
</div>
</div>
</div>
</div>
<div class="status" id="qrReaderStatus"></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 reading runs entirely <strong>client-side</strong> using the <code>jsQR</code> library. No server API is needed.</div>
<div class="api-endpoint">
<div class="api-desc">Decode QR codes from image data using the jsQR library (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 jsqr</span>
<span class="cm">// Browser CDN: https://cdn.jsdelivr.net/npm/jsqr@1.4.0/dist/jsQR.min.js</span>
<span class="cm">// Read from a canvas element:</span>
<span class="kw">const</span> canvas = document.<span class="fn">getElementById</span>(<span class="str">'myCanvas'</span>);
<span class="kw">const</span> ctx = canvas.<span class="fn">getContext</span>(<span class="str">'2d'</span>);
<span class="kw">const</span> imageData = ctx.<span class="fn">getImageData</span>(0, 0, canvas.width, canvas.height);
<span class="kw">const</span> code = <span class="fn">jsQR</span>(imageData.data, imageData.width, imageData.height);
<span class="kw">if</span> (code) {
console.<span class="fn">log</span>(<span class="str">"Decoded:"</span>, code.data);
<span class="cm">// → "https://example.com"</span>
}
<span class="cm">// Read from camera (MediaDevices API):</span>
<span class="kw">const</span> stream = <span class="kw">await</span> navigator.mediaDevices.<span class="fn">getUserMedia</span>({ video: { facingMode: <span class="str">'environment'</span> } });
<span class="kw">const</span> video = document.<span class="fn">createElement</span>(<span class="str">'video'</span>);
video.srcObject = stream;
video.<span class="fn">play</span>();
<span class="cm">// Then draw video frames to canvas and scan with jsQR</span></div>
</div>
</div>
</div>
</div>