QR Code Decoder Tool
QR Code Decoder Tool
Scan and decode QR codes easily using your device camera.
Decoded Result
No QR Code detected yet.
/* General Reset */
body {
margin: 0;
font-family: Arial, sans-serif;
background: linear-gradient(to right, #4facfe, #00f2fe);
color: #333;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
/* Container Styling */
.container {
text-align: center;
background: #fff;
padding: 20px;
border-radius: 10px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
width: 90%;
max-width: 500px;
}
/* Header */
h1 {
margin: 0;
font-size: 2rem;
color: #4facfe;
}
p {
font-size: 1rem;
margin: 10px 0 20px;
}
/* QR Reader */
#qr-reader {
width: 100%;
margin-bottom: 20px;
}
/* Result Box */
.result-box {
background: #f9f9f9;
padding: 10px;
border-radius: 5px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
.result-box h2 {
margin: 0;
color: #4facfe;
}
.result-box p {
font-size: 1rem;
color: #333;
margin: 10px 0;
}
/* Button Styling */
button {
padding: 10px 20px;
font-size: 1rem;
color: #fff;
background: #4facfe;
border: none;
border-radius: 5px;
cursor: pointer;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
}
button:hover {
background: #00f2fe;
}
// Initialize QR Code Scanner
function initializeQRScanner() {
const qrReader = new Html5Qrcode("qr-reader");
const config = {
fps: 10, // Frames per second for scanning
qrbox: { width: 250, height: 250 } // QR code scanning area
};
// Success callback
qrReader.start(
{ facingMode: "environment" }, // Use rear camera
config,
(decodedText) => {
document.getElementById("output").innerText = decodedText;
},
(errorMessage) => {
// Optional error message logging (can be removed)
console.log(errorMessage);
}
);
// Attach Reset Button Event
document.getElementById("reset-btn").addEventListener("click", () => {
qrReader.stop().then(() => {
document.getElementById("output").innerText = "No QR Code detected yet.";
initializeQRScanner();
});
});
}
// Start Scanner on Load
document.addEventListener("DOMContentLoaded", initializeQRScanner);
