File: /home/u435929562/domains/events.peacockindia.in/public_html/reader.php_new_design
<!DOCTYPE html>
<!-- saved from url=(0040)https://nimiq.github.io/qr-scanner/demo/ -->
<html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Ticket Scanning</title>
</head>
<body class="js-focus-visible" cz-shortcut-listen="true">
<style>
canvas {
display: none;
}
hr {
margin-top: 32px;
}
input[type="file"] {
display: block;
margin-bottom: 16px;
}
div {
margin-bottom: 16px;
}
#container {
height:100%;
border-collapse:collapse;
display : table;
margin:0 auto;
text-align:center;
}
.foot {
/*display : table-row;
vertical-align : bottom;
height : 1px;
padding:20px;*/
font-size:2em;
text-transform:uppercase;
position: fixed;
bottom: 0px;
margin-right: auto;
margin-left: auto;
}
video {
object-fit: cover;
}
html {
background: url(background_blue.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
html{height:100%;}
html, body{
height: 100%;
width: 100%;
}
.container{
height: 100%;
display:grid;
/*we divide the page into 3 parts*/
grid-template-rows: 20px auto 30px;
text-align: center; /*this is to center the element*/
}
.container .footer{
grid-row: 3; /*the footer will occupy the last row*/
display: inline-block;
margin-top: -100px;
}
</style>
<div class="container">
<div class="header">
</div>
<div class="content">
<div style="margin:0 auto;text-align:center;margin-top:10%">
<video muted="" playsinline="" id="qr-video" style="transform: scaleX(-1);" style="width:100%;height:200px;max-width:500px"></video>
</div>
</div>
<div class="footer">
<h2 id="cam-qr-result" style="background-color:grey;color:#ffffff;padding:20px;font-size:3em;text-transform:uppercase;">Ready</h2>
</div>
</div>
<!--
<div style="text-align:center;">
<h1>Scan your Qrcode:</h1>
<br/>
<b>Detected QR code: </b>
<h2 id="cam-qr-result" style="color:green;"></h2>
<br>
<b>Last detected at: </b>
<h3 id="cam-qr-result-timestamp"></h3>
<input type="hidden" name="result" id="result" value="" />
</div>
<hr>
<div style="display:none">
<b>Device has camera: </b>
<span id="cam-has-camera">true</span>
</div>
-->
<script src="js/jquery.min.js"></script>
<script src="js/tether.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/scripts.js"></script>
<script src="js/bootstrap-datepicker.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/jquery-ui.min.js"></script>
<link href="css/alert.css" rel="stylesheet" />
<link href="themes/default/theme.css" rel="stylesheet" />
<script src="js/alert.js"></script>
<script type="module">
import QrScanner from "./js/qr-scanner.min.js";
QrScanner.WORKER_PATH = './js/qr-scanner-worker.min.js';
var qrcodeVar = '';
var error = '';
const video = document.getElementById('qr-video');
const camHasCamera = document.getElementById('cam-has-camera');
const camQrResult = document.getElementById('cam-qr-result');
const camQrResultTimestamp = document.getElementById('cam-qr-result-timestamp');
var qrcode = '';
function setResult(label, result) {
//label.textContent = result;
camQrResultTimestamp.textContent = new Date().toString();
//label.style.color = 'teal';
clearTimeout(label.highlightTimeout);
//label.highlightTimeout = setTimeout(() => label.style.color = 'inherit', 100);
if(qrcode != result) {
jQuery.ajax({
url: "process.php",
data: {action: 'entry', seat: result},
type: "POST",
success:function(data){
//console.log(data);
data = JSON.parse(data);
if(data.status == 'success'){
//alert("Success "+data.status);
//console.log("Success "+data.status);
//$('#qr-video').hide();
//scanner.destroy();
//$.alert.open('Success',"Allow Seat No. "+result);
label.textContent =result+" INDICATED";
label.style.color = 'white';
label.style.backgroundColor = 'green';
/*if(qrcode != result){
qrcode = result;
} */
setTimeout(function(){console.log('If condition');$('#qr-video').show(); }, 5000);
} else{
//alert( data_array.result);
//console.log("Failure "+data.status);
//alert("Failure "+data.status);
//$('#qr-video').hide();
//scanner.destroy();
//$.alert.open('Error',"Seat Number "+result+" already entered, please check the Admin");
label.textContent =result+" INDICATED";
label.style.color = 'white';
label.style.backgroundColor = 'red';
/*if(qrcode != result){
qrcode = result;
}*/
//$('#qr-video').hide();
setTimeout(function(){console.log('else condition');$('#qr-video').show(); }, 5000);
}
},
error:function (){}
});
qrcode = result;
}
//alert(result);
}
// ####### Web Cam Scanning #######
//QrScanner.hasCamera().then(hasCamera => camHasCamera.textContent = hasCamera);
const scanner = new QrScanner(video, result => setResult(camQrResult, result));
scanner.start();
/*
document.getElementById('inversion-mode-select').addEventListener('change', event => {
scanner.setInversionMode(event.target.value);
});
*/
</script>
</body>
</html>