<!DOCTYPE html>

<html>
<head>
<title>QR Code Scanner</title>
<meta charset="utf-8"/>
<meta content="width=device-width" name="viewport"/>
<link href="https://6f38e15f88.imgdist.com/public/users/Integrators/BeeProAgency/1067611_1052851/favicon_images/frame-f3bda2-16-icon.png" rel="icon" sizes="16x16"/>
<link href="https://6f38e15f88.imgdist.com/public/users/Integrators/BeeProAgency/1067611_1052851/favicon_images/frame-f3bda2-32-icon.png" rel="icon" sizes="32x32"/>
<link href="https://6f38e15f88.imgdist.com/public/users/Integrators/BeeProAgency/1067611_1052851/favicon_images/frame-f3bda2-apple-touch-icon.png" rel="apple-touch-icon" sizes="180x180"/>
<style>
		.bee-row,
		.bee-row-content {
			position: relative
		}

		.bee-row-1,
		.bee-row-2,
		.bee-row-3,
		.bee-row-4,
		.bee-row-5,
		.bee-row-6,
		.bee-row-6 .bee-row-content {
			background-repeat: no-repeat
		}

		body {
			background-color: #fff;
			color: #000;
			font-family: Arial, Helvetica, sans-serif
		}

		.bee-row-5 .bee-col-1 .bee-block-1 a,
		.bee-row-5 .bee-col-3 .bee-block-1 a,
		a {
			color: #488b45
		}

		* {
			box-sizing: border-box
		}

		body,
		h1,
		h2,
		p {
			margin: 0
		}

		.bee-row-content {
			max-width: 1280px;
			margin: 0 auto;
			display: flex
		}

		.bee-row-content .bee-col-w3 {
			flex-basis: 25%
		}

		.bee-row-content .bee-col-w4 {
			flex-basis: 33%
		}

		.bee-row-content .bee-col-w6 {
			flex-basis: 50%
		}

		.bee-row-content .bee-col-w9 {
			flex-basis: 75%
		}

		.bee-row-content .bee-col-w12 {
			flex-basis: 100%
		}

		.bee-html-block {
			text-align: center
		}

		.bee-icon .bee-icon-label-right a {
			text-decoration: none
		}

		.bee-divider,
		.bee-image {
			overflow: auto
		}

		.bee-divider .center,
		.bee-image .bee-center {
			margin: 0 auto
		}

		.bee-row-5 .bee-col-2 .bee-block-1 {
			width: 100%
		}

		.bee-icon {
			display: inline-block;
			vertical-align: middle
		}

		.bee-icon .bee-content {
			display: flex;
			align-items: center
		}

		.bee-image img {
			display: block;
			width: 100%
		}

		.bee-paragraph {
			overflow-wrap: anywhere
		}

		@media (max-width:768px) {
			.bee-row-content:not(.no_stack) {
				display: block
			}
		}

		.bee-row-1 .bee-row-content,
		.bee-row-2 .bee-row-content,
		.bee-row-3 .bee-row-content,
		.bee-row-4 .bee-row-content,
		.bee-row-5 .bee-row-content {
			background-repeat: no-repeat;
			border-radius: 0;
			color: #000
		}

		.bee-row-1 .bee-col-1,
		.bee-row-1 .bee-col-2,
		.bee-row-2 .bee-col-1,
		.bee-row-2 .bee-col-2,
		.bee-row-2 .bee-col-3,
		.bee-row-3 .bee-col-1,
		.bee-row-4 .bee-col-1,
		.bee-row-5 .bee-col-1,
		.bee-row-5 .bee-col-2,
		.bee-row-5 .bee-col-3,
		.bee-row-6 .bee-col-1 {
			padding-bottom: 5px;
			padding-top: 5px
		}

		.bee-row-1 .bee-col-1 .bee-block-1 {
			padding: 10px;
			width: 100%
		}

		.bee-row-1 .bee-col-2 .bee-block-1 {
			padding: 10px;
			text-align: center;
			width: 100%
		}

		.bee-row-3 .bee-col-1 .bee-block-1,
		.bee-row-5 .bee-col-1 .bee-block-1,
		.bee-row-5 .bee-col-3 .bee-block-1 {
			padding: 10px
		}

		.bee-row-5 {
			background-color: #d3d3d3;
		}

		.bee-row-6 {
			background-color: #fff
		}

		.bee-row-6 .bee-row-content {
			color: #000
		}

		.bee-row-6 .bee-col-1 .bee-block-1 {
			color: #1e0e4b;
			font-family: Inter, sans-serif;
			font-size: 15px;
			padding-bottom: 5px;
			padding-top: 5px;
			text-align: center
		}

		.bee-row-5 .bee-col-1 .bee-block-1,
		.bee-row-5 .bee-col-3 .bee-block-1 {
			color: #101112;
			direction: ltr;
			font-size: 16px;
			font-weight: 400;
			letter-spacing: 0;
			line-height: 120%;
			text-align: left
		}

		.bee-row-5 .bee-col-1 .bee-block-1 p:not(:last-child),
		.bee-row-5 .bee-col-3 .bee-block-1 p:not(:last-child) {
			margin-bottom: 16px
		}

		.bee-row-6 .bee-col-1 .bee-block-1 .bee-icon-image {
			padding: 5px 6px 5px 5px
		}

		.bee-row-6 .bee-col-1 .bee-block-1 .bee-icon:not(.bee-icon-first) .bee-content {
			margin-left: 0
		}

		.bee-row-6 .bee-col-1 .bee-block-1 .bee-icon::not(.bee-icon-last) .bee-content {
			margin-right: 0
		}
/* Scanner CSS Start */
		main {
        display: flex;
        justify-content: center;
        align-items: center;
    }
    #reader {
        width: 600px;
    }
    #result {
        text-align: center;
        font-size: 1.5rem;
    }
/* Scanner CSS End */
	</style>
</head>
<body>
<div class="bee-page-container">
<div class="bee-row bee-row-1">
<div class="bee-row-content">
<div class="bee-col bee-col-1 bee-col-w3">
<div class="bee-block bee-block-1 bee-image"><img alt="" class="bee-center bee-autowidth" src="https://static.wixstatic.com/media/b90414_cc72dd43c0fe44578bcd7edad12938ed~mv2.png/v1/fill/w_296,h_72,al_c,q_85,enc_auto/b90414_cc72dd43c0fe44578bcd7edad12938ed~mv2.png" style="max-width:296px;"/></div>
</div>
<div class="bee-col bee-col-2 bee-col-w9">
<div class="bee-block bee-block-1 bee-heading">
<h1 style="color:#000834;direction:ltr;font-family:Arial, Helvetica, sans-serif;font-size:38px;font-weight:700;letter-spacing:normal;line-height:120%;text-align:center;margin-top:0;margin-bottom:0;"><span class="tinyMce-placeholder" style="color: #488b45;">Event Check-in QR Code Scanner<br/></span> </h1>
</div>
</div>
</div>
</div>
<div class="bee-row bee-row-2">
<div class="bee-row-content">
<div class="bee-col bee-col-1 bee-col-w3"></div>
<div class="bee-col bee-col-2 bee-col-w6">
<div class="bee-block bee-block-1 bee-html-block">

<script crossorigin="anonymous" integrity="sha512-k/KAe4Yff9EUdYI5/IAHlwUswqeipP+Cp5qnrsUjTPCgl51La2/JhyyjNciztD7mWNKLSXci48m7cctATKfLlQ==" referrerpolicy="no-referrer" src="https://cdnjs.cloudflare.com/ajax/libs/html5-qrcode/2.3.4/html5-qrcode.min.js"></script>



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

</div>
</div>
<script>

    const scanner = new Html5QrcodeScanner('reader', {
        qrbox: {
            width: 250,
            height: 250,
        },
        fps: 20,
    });


    scanner.render(success, error);

    function success(result) {

        document.getElementById('result').innerHTML = `
        <h2>Success!</h2>
        <p><a href="${result}">${result}</a></p>
        `;

        scanner.clear();
        document.getElementById('reader').remove();
    
    }

    function error(err) {
        console.error(err);
    }

</script>

</div>
</div>
<div class="bee-col bee-col-3 bee-col-w3"></div>
</div>

<div class="bee-row bee-row-4">
<div class="bee-row-content">
<div class="bee-col bee-col-1 bee-col-w12">
<div class="bee-block bee-block-1 bee-spacer">
<div class="spacer" style="height:100px;"></div>
</div>
</div>
</div>
</div>
<div class="bee-row bee-row-5">
<div class="bee-row-content">
<div class="bee-col bee-col-1 bee-col-w4">
<div class="bee-block bee-block-1 bee-paragraph">
<p>This Layout Template is for Account Engagement (formerly known as Pardot) Landing Pages built using the classic landing page builder with Layout Templates</p>
</div>
</div>
<div class="bee-col bee-col-2 bee-col-w4">
<div class="bee-block bee-block-1 bee-image"><img alt="" class="bee-center bee-autowidth" src="https://static.wixstatic.com/media/b90414_cc72dd43c0fe44578bcd7edad12938ed~mv2.png/v1/fill/w_296,h_72,al_c,q_85,enc_auto/b90414_cc72dd43c0fe44578bcd7edad12938ed~mv2.png" style="max-width:300px;padding-top:25px;padding-bottom:70px"/></div>
</div>
<div class="bee-col bee-col-3 bee-col-w4">
<div class="bee-block bee-block-1 bee-paragraph">
<p>Open Source QR Code Scanner courtesy of <a href="https://scanapp.org/" rel="noopener" style="text-decoration: underline;" target="_blank">ScanApp</a></p>
</div>
</div>
</div>
</div>
</body>
</html>
