File: /home/u435929562/domains/events.peacockindia.in/public_html/reader.php_without_animation
<!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 Entry 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;
}
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: -200px;
z-index: 500;
}
.fullwidth{
width:100% !important;
height:93% !important;
object-fit:cover !important;
min-width: 100%;
min-height: 93%;
}
.vide-container{
position: absolute;
height: 100%;
width: 100%;
overflow: hidden;
}
#cam-qr-result {
margin: 0;
background-color:grey;color:#ffffff;padding:40px;padding-bottom:50px;font-size: 90px;text-transform:uppercase;height: 200px;
}
</style>
<div class="container">
<div class="header">
</div>
<div class="vide-container" style="margin:0 auto;text-align:center;margin-top:0%;">
<video muted="" playsinline="" id="qr-video" style="transform: scaleX(-1);"></video>
</div>
<div class="footer">
<h2 id="cam-qr-result" >ENTRY CHECK</h2>
</div>
</div>
<div style="display:none">
<select id="inversion-mode-select">
<option value="original">Scan original (dark QR code on bright background)</option>
<option value="invert">Scan with inverted colors (bright QR code on dark background)</option>
<option value="both">Scan both</option>
</select>
<br>
</div>
<div style="display:none">
<b>Device has camera: </b>
<span id="cam-has-camera">true</span>
</div>
<h3 id="cam-qr-result-timestamp" style="visibility:hidden"></h3>
<input type="hidden" name="result" id="result" value="" />
<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+" ALLOW INN";
label.style.color = 'white';
label.style.backgroundColor = 'green';
label.style.fontSize = '90px' ;
$("#cam-qr-result").animate({"left":"0px"}, "slow");
$("#cam-qr-result").delay(1200).fadeIn(300);
/*if(qrcode != result){
qrcode = result;
} */
//setTimeout(function(){console.log('If condition');$('#qr-video').show(); }, 5000);
} else if(data.status == 'employeesuccess'){
//alert("Success "+data.status);
//console.log("Success "+data.status);
//$('#qr-video').hide();
//scanner.destroy();
//$.alert.open('Success',"Allow Seat No. "+result);
label.textContent ='Emp. '+result+" ALLOW INN";
label.style.color = 'white';
label.style.backgroundColor = 'green';
label.style.fontSize = '80px';
$("#cam-qr-result").animate({"left":"0px"}, "slow");
$("#cam-qr-result").delay(1200).fadeIn(300);
/*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+" ALREADY INN";
label.style.color = 'white';
label.style.backgroundColor = 'red';
label.style.fontSize = '90px' ;
$("#cam-qr-result").animate({"left":"0px"}, "slow");
$("#cam-qr-result").delay(1200).fadeIn(300);
/*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>
<script>
$(document).ready(function(){
//$("#qr-video").css({"width":"100% !important","height":"100% !important" });
setTimeout(function(){
$('#qr-video').addClass('fullwidth');
}, 10);
//transform: scaleX(-1);width:100% !important;object-fit:cover !important;;
});
</script>
</body>
</html>