HTML PAGE FOR QR CODE SCANNING USING JAVASCRIPT LIBRARY

<!DOCTYPE html>

<html lang=“en”>

<head>

    <meta charset=“utf-8”>

    <meta name=“viewport” content=“width=device-width, initial-scale=1, shrink-to-fit=no”>

    <link rel=“preconnect” href=“https://fonts.gstatic.com”>

    <link href=“https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap” rel=“stylesheet”>

    <link rel=“stylesheet” href=“https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css”

        integrity=“sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2” crossorigin=“anonymous”>

    <script src=“https://unpkg.com/html5-qrcode” type=“text/javascript”></script>

    <script src=“https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js”></script>

    <style>

        body {

            font-family: ‘Roboto’, sans-serif;

            background-color: #f0f2f5;

            color: #333;

            display: flex;

            justify-content: center;

            align-items: center;

            height: 100vh;

            margin: 0;

        }

        #qr-reader-container {

            width: 100%;

            max-width: 600px;

            background: #ffffff;

            border-radius: 10px;

            padding: 30px;

            box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);

            text-align: center;

            border: 1px solid #dee2e6;

        }

        #qr-reader {

            width: 100%;

            height: auto;

            min-height: 250px;

            border-radius: 8px;

            overflow: hidden;

            position: relative;

            background: url(‘https://via.placeholder.com/600×250?text=’) center center no-repeat;

            background-size: cover;

            border: 1px solid #ced4da;

        }

        #qr-reader.active {

            background: none;

        }

        #qr-reader button {

            background-color: #007bff;

            color: white;

            border: none;

            padding: 10px 20px;

            border-radius: 5px;

            cursor: pointer;

            transition: all 0.3s ease;

            font-size: 16px;

        }

        #qr-reader button:hover {

            background-color: #0056b3;

            box-shadow: 0px 4px 8px rgba(0, 123, 255, 0.3);

        }

        #qr-reader h2 {

            font-weight: 700;

            margin-bottom: 20px;

            color: #333;

        }

        #qr-reader p {

            font-size: 16px;

            margin-bottom: 20px;

            color: #6c757d;

        }

    </style>

</head>

<body>

    <div id=“qr-reader-container”>

        <h2>Scan Your QR Code</h2>

        <p>Please align the QR code within the box</p>

        <div id=“qr-reader”></div>

    </div>

    <script>

        function onScanSuccess(decodedText, decodedResult) {

            console.log(`Code scanned = ${decodedText}`, decodedResult);

            let itemInternalId = `${decodedText}`;

            console.log(“itemInternalId”, itemInternalId);

            let codeDetected = decodedResult;

            console.log(“Code Detected”, codeDetected);

            let dataStringify = JSON.stringify(codeDetected);

            console.log(“dataStringify”, dataStringify);

            if (codeDetected != null || codeDetected != “null” || codeDetected != “” || codeDetected != undefined || codeDetected != “undefined”) {

                console.log(“Loopp Condition 1”);

                $.get(“https://td2931313.extforms.netsuite.com/app/site/hosting/scriptlet.nl?script=107&deploy=1&compid=TD2931313&ns-at=AAEJ7tMQ_PWcKjhdnekXA5SMKbm7vXoj-Jci9GlHrEMjheuFA0E”, { “codeDetected”: dataStringify });

                window.returnValue = true;

                window.opener.location.href = window.opener.location.href.replace(“itemInternalId”, “preRec”) + “&itemInternalId=” + itemInternalId;

                setTimeout(“window.close()”, 50);

            }

        }

        let html5QrcodeScanner = new Html5QrcodeScanner(

            “qr-reader”, { fps: 10, qrbox: 250 });

        html5QrcodeScanner.render(onScanSuccess);

    </script>

</body>

</html>

Leave a comment

Your email address will not be published. Required fields are marked *