<!DOCTYPE html>
<!-- V.code = Voucher Code| V.Minutes = Minutes | V.Amount = Price | id="qrcode-{{ v.recno }}" = QR CODE Remove if you want-->
<html>
<head>
<script type="text/javascript" src="../assets/driver/jquery.min.js"></script>
<script type="text/javascript" src="../assets/driver/driver.js"></script>
<style>
.print {
width: 180px;
height: 85px;
border: 1px solid black;
text-align: center;
display: inline-table;
font-size : 8px;
margin : 5px;
}
.qrcode {
/*margin: auto;*/
width: 42px;
padding: 2px;
float: left;
}
img {
}
.top-block {
border-bottom: 1px solid black;
color : #00B0F0;
font-weight: bold;
}
.code-block {
border-bottom: 1px solid black;
line-height: 1.1 !important;
}
.left-block{
width: 160px;
height : inherit;
float: left;
}
.info-block {
height : inherit;
margin-left: -35px;
width : 195px;
line-height: 0.8 !important;
text-align: left;
}
.right-block{
height : inherit;
margin-left: 160px;
border-left: 1px solid black;
padding-bottom: 3px;
}
.right-block > span{
color : white;
font-size : 10px;
writing-mode: vertical-rl;
text-orientation: sideways-right;
margin-top: 5px;
}
.rotate {
transform: rotate(-180deg);
-webkit-transform: rotate(-180deg);
-moz-transform: rotate(-180deg);
-ms-transform: rotate(-180deg);
-o-transform: rotate(-180deg);
}
.code-style {
font-family: Consolas, monaco, monospace;
font-size: 20px;
font-style: bold;
font-variant: normal;
font-weight: 700;
letter-spacing : 3px;
}
.ft-sm {
font-size : 7px;
}
.ft-xs {
font-size : 6px;
}
.ft-bold {
font-weight:bold;
}
.ft-italic {
font-weight:italic;
}
.ft-blue {
color : #00B0F0;
}
</style>
</head>
<body>
{% for v in vcodes if v.recno %}
<div class="print">
<div class="left-block">
<div class="top-block">
<span>ENTER CODE @ HTTP://10.0.0.1</span>
</div>
<div class="code-block">
<span class="code-style">{{ v.vcode }}</span> <br>
<span id="vtime-{{ v.vcode }}" style="font-weight:bold;">{{ v.minutes }}</span><br>
</div>
<div>
<div class="qrcode">
<div id="qrcode-{{ v.recno }}"> </div>
</div>
<div class="info-block">
<span class="ft-bold ft-xs">CONNECT TO WIFI</span><br>
<span class="ft-blue ft-bold ft-sm">LBP PISO WIFI</span> <br>
<p style="margin: 3px 0px;">
<span class="ft-xs">Enter you voucher code then press submit.</span><br>
<span class="ft-xs">To ensure <span style="color: red;">FAST CONNECTION SPEED</span> is achieved at <span style="color: red;">FULL WIFI SIGNAL</span>.</span><br>
<span class="ft-xs ft-italic">GET your <span style="color: green;">FREE TIME</span> Everyday.</span><br>
</p>
</div>
</div>
</div>
<div class="right-block" style="background-color:{{ ((v.amount == 5)? "#00B0F0":((v.amount == 10)? "#00B0F0":((v.amount == 20)? "#4D269A":((v.amount == 50)? "#FF66CC":((v.amount == 100)? "#FF0000":((v.amount == 300)? "#000000":"#666666"))))))}};">
<span class="rotate" style="font-weight:bold;">Php {{ v.amount }}</span>
</div>
</div>
<!-- Start QR Code
End Qr Code -->
{% endfor %}
<script type="text/javascript">
{% for qr in vcodes if qr.recno %}
new QRCode(document.getElementById("qrcode-{{ qr.recno }}"), { text: "{{ qr.vcode }}", width: 40, height: 40});
{% endfor %}
function ConvertMinutes(num){
d = Math.floor(num/1440); // 60*24
h = Math.floor((num-(d*1440))/60);
m = Math.round(num`);
if(d>0){
return(((d > 1)? d+" DAYS ":d+" DAY ")+((h > 0)? h+" HOURS ":"")+((m > 0)? m+" MINUTES":""));
}else{
return(((h > 1)? h+" HOURS ":h+" HOUR ")+((m > 0)? m+" MINUTES":""));
}
}
{% for v in vcodes if v.recno %}
var tspan = document.getElementById("vtime-{{ v.vcode }}")[removed];
var dval = parseInt(tspan);
document.getElementById("vtime-{{ v.vcode }}")[removed] = ConvertMinutes(dval);
{% endfor %}
</script>
</body>
</html>