<html>
<title>QR Card Maker</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<style>
.grid-container{
display: grid;
grid-template-columns: auto 30%;
padding: 10px;
grid-gap: 10px;
}
.container{
width: 300px;}
</style>
<body>
<h1 id="title" style="font-size: 33px;color: steelblue; margin-top:50px;" align="center"><div style="margin-bottom:20px;"><img src="windsorLogo.png"/></div>
<div style="margin-top:20px">QR Card Maker</div></h1>
<div class="container" id="formContainer" style='display;block'>
<form action="javascript:send()">
<div class="form-group grid-container">
<input class="form-control" id="cid" placeholder="Enter Password"><button type="submit" class="btn btn-default" id="submitButton">Make</button>
<div class="form-group">
<a href="qrscanner3PasswordRecovery.html" >Forgot Password?</a>
</div>
</div>
</form>
</div>
<h2 id="status" style="font-size: 25px;color: steelblue;" align="center"></h2>
<img src='' width='200' height='200' id='qrImage' style='display:none'></img>
<img src='windsorLogo.png' width='0' height='0' id="qrBody"></img>
<canvas width='200' height='200' id='hiddenCanvas' style='display:none'></canvas>
<h2 id='printMe' style="font-size: 35px;color: gray; display:none;position:absolute;top:10px;left:20px;">PRINT ME</h2>
<img src='cutIcon.png' height='10' style='position:absolute;top:120px;left:20px;display: none;' id='cutIcon'></img>
<canvas width="300" height="400" id="canvas2" style='position:absolute;top:130px;left:20px;display:none;'></canvas>
<a href="" id="qrImageLink" download style="display: none;position:absolute;top:440px;left:20px">Download QR Code(PNG)</a>
</body>
<script>
document.getElementById('cutIcon').style.display="none";
var qrWidth=200;
var qrHeight=200;
var bodyWidth=240;
var bodyHeight=400;
var xUnit=bodyWidth/11;
var yUnit=bodyWidth/17;
var qrPositionX=(bodyWidth-qrWidth)/2;
var qrPositionY=(bodyHeight-qrHeight-2*yUnit);
var firstName='';
var lastName='';
var textToDraw='';
var textWidth=0;
var textFont=0;
var qrCode='';
var canvas2=document.getElementById("canvas2").getContext("2d");
var qrImage=document.getElementById("qrImage");
var canvas=hiddenCanvas.getContext("2d");
var qrBody=document.getElementById("qrBody");
function process(){
var string="";
string="http://chart.apis.google.com/chart?cht=qr&chs="+qrWidth+"x"+qrHeight+"&chld=H|0&chl="+qrCode;
qrImage.src=string;
qrImage.crossOrigin="anonymous";
setTimeout(function(){drawQrImage();},2000);
}
function drawQrImage(){
canvas2.drawImage(qrImage,qrPositionX,qrPositionY);
canvas2.drawImage(qrBody,(bodyWidth-100)/2,0,100,100);
canvas2.fillText('A L B A N Y',(bodyWidth-canvas2.measureText('A L B A N Y').width)/2,100+parseInt(0.7*yUnit));
textToDraw=firstName+' '+lastName;
textWidth=parseInt(qrWidth);
textFont=0;
getFont();
canvas2.font=textFont+'px Arial';
canvas2.fillText(textToDraw,(bodyWidth-textWidth)/2,(bodyHeight-qrHeight-1*yUnit-2*yUnit));
for(var x=7;x>0;x--){
qrCode=qrCode.substring(0, x)+" "+qrCode.substring(x,qrCode.length);}
textToDraw=qrCode;
textWidth=parseInt(qrWidth*0.6);
textFont=0;
getFont();
canvas2.font=textFont+'px Arial';
canvas2.fillText(textToDraw,(bodyWidth-textWidth)/2,bodyHeight-parseInt(0.5*yUnit));
canvas2.beginPath();
canvas2.setLineDash([5,5]);
canvas2.rect(0,0,bodyWidth,bodyHeight);
canvas2.stroke();
canvas2.setLineDash([]);
createFile();
}
function getFont(){
var fontCanvas=document.createElement("canvas");
var context=fontCanvas.getContext("2d");
context.font=1+"px Arial";
for(var i=0;i<400;i++){
if(context.measureText(textToDraw).width<textWidth){
context.font=i+'px Arial';
textFont=i;
}else{
break;}
}
}
function createFile(){
//document.getElementById("qrImageLink").download="QRImageFile.png";
//document.getElementById("qrImageLink").href=document.getElementById("canvas2").toDataURL("image/png");
//document.getElementById("qrImageLink").style.display="none";
document.getElementById('canvas2').style.display="block";
document.getElementById('hiddenCanvas').style.display="block";
document.getElementById('cutIcon').style.display="block";
document.getElementById('printMe').style.display="block";
}
function send() {
crdID = document.getElementById("cid").value
document.getElementById("submitButton").disabled = true;
document.getElementById("status").innerHTML = "Processing ID";
sendDataToRegister();
}
function sendDataToRegister() {
jQuery.post('https://script.google.com/macros/s/AKfycbztDJpQpBTdJY_Cl_rJDmnJEKHKZnJzErNCWmjrmJdl_p4dBLle/exec', {
cardID: crdID,
class: '',
email: '',
instruction: 'returnName'
}
).done(function (data) {
var dataAsArray=data.split(",");
if (dataAsArray[0]=== "Approved") {
document.getElementById("status").innerHTML = "Approved";
firstName=dataAsArray[1];
lastName=dataAsArray[2];
qrCode=crdID;
document.getElementById('title').style.display='none';
document.getElementById('formContainer').style.display='none';
document.getElementById('status').style.display='none';
process();
} else {
document.getElementById("status").innerHTML = "Card Invalid";
document.getElementById("submitButton").disabled = false;
setTimeout(function(){document.getElementById("status").innerHTML = '';},1000);
}
})
}
</script>
</html>