Re: Re: LPB Print Voucher Template

Author

Title

Language

Your paste - Paste your paste here

&lt;!DOCTYPE html&gt;

&lt;!-- V.code = Voucher Code| V.Minutes = Minutes | V.Amount = Price  |  id=&quot;qrcode-{{ v.recno }}&quot; = QR CODE Remove if you want--&gt;
	 
&lt;html&gt;
&lt;head&gt;
&lt;script type=&quot;text/javascript&quot; src=&quot;../assets/driver/jquery.min.js&quot;&gt;&lt;/script&gt;
&lt;script type=&quot;text/javascript&quot; src=&quot;../assets/driver/driver.js&quot;&gt;&lt;/script&gt;
&lt;style&gt;
.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 &gt; 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;
}
&lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;

{% for v in vcodes if v.recno %}

&lt;div class=&quot;print&quot;&gt;
   &lt;div class=&quot;left-block&quot;&gt;
      &lt;div class=&quot;top-block&quot;&gt;
         &lt;span&gt;ENTER CODE @ HTTP://10.0.0.1&lt;/span&gt;
      &lt;/div&gt;
      &lt;div class=&quot;code-block&quot;&gt;
         &lt;span class=&quot;code-style&quot;&gt;{{ v.vcode }}&lt;/span&gt; &lt;br&gt;	
         &lt;span id=&quot;vtime-{{ v.vcode }}&quot; style=&quot;font-weight:bold;&quot;&gt;{{ v.minutes }}&lt;/span&gt;&lt;br&gt;
      &lt;/div&gt;
      &lt;div&gt;
         &lt;div class=&quot;qrcode&quot;&gt;
            &lt;div id=&quot;qrcode-{{ v.recno }}&quot;&gt; &lt;/div&gt;
         &lt;/div&gt;
         &lt;div class=&quot;info-block&quot;&gt;
            &lt;span class=&quot;ft-bold ft-xs&quot;&gt;CONNECT TO WIFI&lt;/span&gt;&lt;br&gt;
            &lt;span class=&quot;ft-blue ft-bold ft-sm&quot;&gt;LBP PISO WIFI&lt;/span&gt; &lt;br&gt;
            &lt;p style=&quot;margin: 3px 0px;&quot;&gt;
               &lt;span class=&quot;ft-xs&quot;&gt;Enter you voucher code then press submit.&lt;/span&gt;&lt;br&gt;
               &lt;span class=&quot;ft-xs&quot;&gt;To ensure &lt;span style=&quot;color: red;&quot;&gt;FAST CONNECTION SPEED&lt;/span&gt; is achieved at &lt;span style=&quot;color: red;&quot;&gt;FULL WIFI SIGNAL&lt;/span&gt;.&lt;/span&gt;&lt;br&gt;
               &lt;span class=&quot;ft-xs ft-italic&quot;&gt;GET your &lt;span style=&quot;color: green;&quot;&gt;FREE TIME&lt;/span&gt; Everyday.&lt;/span&gt;&lt;br&gt;
            &lt;/p&gt;
         &lt;/div&gt;
      &lt;/div&gt;
   &lt;/div&gt;
   &lt;div class=&quot;right-block&quot; style=&quot;background-color:{{ ((v.amount == 5)? &quot;#00B0F0&quot;:((v.amount == 10)? &quot;#00B0F0&quot;:((v.amount == 20)? &quot;#4D269A&quot;:((v.amount == 50)? &quot;#FF66CC&quot;:((v.amount == 100)? &quot;#FF0000&quot;:((v.amount == 300)? &quot;#000000&quot;:&quot;#666666&quot;))))))}};&quot;&gt;
         &lt;span class=&quot;rotate&quot; style=&quot;font-weight:bold;&quot;&gt;Php {{ v.amount }}&lt;/span&gt;
   &lt;/div&gt;
&lt;/div&gt;

&lt;!-- Start QR Code

End Qr Code --&gt;
{% endfor %}

&lt;script type=&quot;text/javascript&quot;&gt;
{% for qr in vcodes if qr.recno %}
new QRCode(document.getElementById(&quot;qrcode-{{ qr.recno }}&quot;), { text: &quot;{{ qr.vcode }}&quot;, 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%60);

if(d&gt;0){
    return(((d &gt; 1)? d+&quot; DAYS &quot;:d+&quot; DAY &quot;)+((h &gt; 0)? h+&quot; HOURS &quot;:&quot;&quot;)+((m &gt; 0)? m+&quot; MINUTES&quot;:&quot;&quot;));
  }else{
    return(((h &gt; 1)? h+&quot; HOURS &quot;:h+&quot; HOUR &quot;)+((m &gt; 0)? m+&quot; MINUTES&quot;:&quot;&quot;));
  }
}
{% for v in vcodes if v.recno %}
var tspan = document.getElementById(&quot;vtime-{{ v.vcode }}&quot;).innerHTML;
var dval = parseInt(tspan);
document.getElementById(&quot;vtime-{{ v.vcode }}&quot;).innerHTML = ConvertMinutes(dval);
{% endfor %}
&lt;/script&gt;

&lt;/body&gt;
&lt;/html&gt;

Private - Private paste aren't shown in recent listings.

Delete After - When should we delete your paste?

Spam protection -

Re: Re: LPB Print Voucher Template

Reply to "Re: Re: LPB Print Voucher Template"