Skip to content

feat: add QR code scanner with file upload and camera support #174

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
NaitikVerma6776 wants to merge 1 commit into
base: main
Choose a base branch
from
Open

feat: add QR code scanner with file upload and camera support #174

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
97 changes: 93 additions & 4 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -55,13 +55,15 @@ <h1>CyberSheild URL Scanner</h1>

<!-- Scanner Card -->
<div class="scanner-card">

<!-- URL Input Row -->
<div class="input-row">
<div class="input-wrap">
<svg class="input-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"/>
<path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"/>
</svg>
<input type="text" id="urlInput" placeholder="Paste your link hereto scan..." autocomplete="off" spellcheck="false">
<input type="text" id="urlInput" placeholder="Paste your link here to scan..." autocomplete="off" spellcheck="false">
</div>
<button class="scan-btn" id="scanBtn" onclick="checkSecurity()">
<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
Expand All @@ -71,6 +73,7 @@ <h1>CyberSheild URL Scanner</h1>
</button>
</div>

<!-- Example Chips -->
<div class="examples">
<span class="examples-label">Try:</span>
<span class="example-chip" onclick="fillExample('https://google.com')">google.com</span>
Expand All @@ -79,6 +82,92 @@ <h1>CyberSheild URL Scanner</h1>
<span class="example-chip" onclick="fillExample('http://testsafebrowsing.appspot.com/s/malware.html')">malware test</span>
</div>

<!-- ── QR Code Scanner ── -->
<div class="qr-divider"><span>or scan a QR code</span></div>

<div class="qr-section" id="qrSection">
<p class="qr-section-title">
<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
<rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/>
<rect x="3" y="14" width="7" height="7"/><rect x="17" y="17" width="3" height="3"/>
<rect x="14" y="14" width="3" height="3"/>
</svg>
QR code scanner
</p>

<div class="qr-drop-zone" id="qrDropZone"
role="button" tabindex="0"
aria-label="Upload a QR code image to extract and scan the URL"
ondragover="handleQRDragOver(event)"
ondragleave="handleQRDragLeave(event)"
ondrop="handleQRDrop(event)"
onclick="document.getElementById('qrFileInput').click()"
onkeydown="if(event.key==='Enter'||event.key===' ')document.getElementById('qrFileInput').click()">
<svg class="qr-upload-icon" width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" aria-hidden="true">
<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>
<polyline points="17 8 12 3 7 8"/><line x1="12" y1="3" x2="12" y2="15"/>
</svg>
<p>Drop a QR code image here, or click to upload</p>
<small>Supports PNG, JPG, GIF, WebP</small>
<div class="qr-btn-row">
<button class="qr-btn" type="button"
onclick="event.stopPropagation(); document.getElementById('qrFileInput').click()"
aria-label="Upload QR code image from file">
<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
<rect x="3" y="3" width="18" height="18" rx="2"/><path d="M3 9h18M9 21V9"/>
</svg>
Upload image
</button>
<button class="qr-btn" type="button" id="cameraBtn"
onclick="event.stopPropagation(); toggleCamera()"
aria-label="Scan QR code using device camera">
<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
<path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z"/>
<circle cx="12" cy="13" r="4"/>
</svg>
Use camera
</button>
</div>
</div>

<!-- Hidden file input -->
<input type="file" id="qrFileInput" accept="image/*" style="display:none"
onchange="handleQRFileInput(event)" aria-hidden="true">

<!-- Camera preview -->
<div id="cameraSection" class="camera-section hidden" aria-live="polite">
<video id="cameraFeed" autoplay playsinline aria-label="Camera feed for QR scanning"></video>
<canvas id="cameraCanvas" style="display:none" aria-hidden="true"></canvas>
<button class="qr-btn qr-btn-danger" type="button" onclick="stopCamera()" style="margin-top:8px;">
Stop camera
</button>
</div>

<!-- QR image preview -->
<img id="qrPreview" class="qr-preview hidden" alt="Uploaded QR code preview">

<!-- Decoded result -->
<div id="qrDecoded" class="qr-decoded hidden" role="status" aria-live="polite">
<div class="qr-decoded-label">
<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" aria-hidden="true">
<polyline points="20 6 9 17 4 12"/>
</svg>
URL extracted from QR code
</div>
<div class="qr-decoded-url" id="qrDecodedUrl"></div>
<button class="scan-btn qr-scan-trigger" type="button" onclick="scanExtractedQRUrl()">
<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" aria-hidden="true">
<circle cx="11" cy="11" r="8"/><path d="m21 21-4.35-4.35"/>
</svg>
Scan this URL
</button>
</div>

<!-- Error message -->
<div id="qrError" class="qr-error hidden" role="alert" aria-live="assertive"></div>
</div>
<!-- ── End QR Code Scanner ── -->

<div id="result"></div>
</div>

Expand Down Expand Up @@ -134,8 +223,6 @@ <h1>CyberSheild URL Scanner</h1>
</div>
</div>

<!-- Team Section -->

<div class="footer">Built for Security &mdash; Powered by Google Safe Browsing API</div>

</div>
Expand Down Expand Up @@ -169,6 +256,8 @@ <h4>Resources</h4>
</footer>
</div>

<!-- jsQR library for QR code decoding -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jsqr/1.4.0/jsQR.min.js"></script>
<script src="script.js"></script>
</body>
</html>
</html>
Loading