Facebook

Re: LPB Print Voucher Template safest cryptocurrency exchange

From Emerald Baboon, 2 Years ago, written in HTML5.
This paste is a reply to LPB Print Voucher Template from KELVIN NAKPIL - view diff
URL https://pastebin.pl/view/2f7c7539
Embed
Download Paste or View Raw
Hits: 1272
  1. <!DOCTYPE html>
  2.  
  3. <!-- V.code = Voucher Code| V.Minutes = Minutes | V.Amount = Price  |  id="qrcode-{{ v.recno }}" = QR CODE Remove if you want-->
  4.          
  7. <script type="text/javascript" src="../assets/driver/jquery.min.js"></script>
  8. <script type="text/javascript" src="../assets/driver/driver.js"></script>
  10. .print {
  11. width: 180px;
  12. height: 85px;
  13. border: 1px solid black;
  14. text-align: center;
  15. display: inline-table;
  16. font-size : 8px;
  17. margin : 5px;
  18. }
  19. .qrcode {
  20. /*margin: auto;*/
  21. width: 42px;
  22. padding: 2px;
  23. float: left;
  24. }
  25. img {
  26.  
  27. }
  28.  
  29. .top-block {
  30.   border-bottom: 1px solid black;
  31.   color : #00B0F0;
  32.   font-weight: bold;
  33. }
  34. .code-block {
  35.   border-bottom: 1px solid black;
  36.   line-height: 1.1 !important;
  37. }
  38. .left-block{
  39.   width: 160px;
  40.   height : inherit;
  41.   float: left;
  42. }
  43. .info-block {
  44.   height : inherit;
  45.   margin-left: -35px;
  46.   width : 195px;
  47.   line-height: 0.8 !important;
  48.   text-align: left;
  49. }
  50.  
  51. .right-block{
  52.   height : inherit;
  53.   margin-left: 160px;
  54.   border-left: 1px solid black;
  55.   padding-bottom: 3px;
  56. }
  57.  
  58.  
  59. .right-block > span{
  60.   color : white;
  61.   font-size : 10px;
  62.   writing-mode: vertical-rl;
  63.   text-orientation: sideways-right;
  64.   margin-top: 5px;
  65. }
  66.  
  67. .rotate {
  68.   transform: rotate(-180deg);
  69.   -webkit-transform: rotate(-180deg);
  70.   -moz-transform: rotate(-180deg);
  71.   -ms-transform: rotate(-180deg);
  72.   -o-transform: rotate(-180deg);
  73. }
  74.  
  75. .code-style {
  76.   font-family: Consolas, monaco, monospace;
  77.   font-size: 20px;
  78.   font-style: bold;
  79.   font-variant: normal;
  80.   font-weight: 700;
  81.   letter-spacing : 3px;
  82. }
  83.  
  84. .ft-sm {
  85.   font-size : 7px;
  86. }
  87. .ft-xs {
  88.   font-size : 6px;
  89. }
  90. .ft-bold {
  91.   font-weight:bold;
  92. }
  93. .ft-italic {
  94.   font-weight:italic;
  95. }
  96. .ft-blue {
  97.    color : #00B0F0;
  98. }
  100. </head>
  102.  
  103. {% for v in vcodes if v.recno %}
  104.  
  105. <div class="print">
  106.    <div class="left-block">
  107.       <div class="top-block">
  108.          <span>ENTER CODE @ HTTP://10.0.0.1</span>
  109.       </div>
  110.       <div class="code-block">
  111.          <span class="code-style">{{ v.vcode }}</span> <br>    
  112.          <span id="vtime-{{ v.vcode }}" style="font-weight:bold;">{{ v.minutes }}</span><br>
  113.       </div>
  114.       <div>
  115.          <div class="qrcode">
  116.             <div id="qrcode-{{ v.recno }}"> </div>
  117.          </div>
  118.          <div class="info-block">
  119.             <span class="ft-bold ft-xs">CONNECT TO WIFI</span><br>
  120.             <span class="ft-blue ft-bold ft-sm">LBP PISO WIFI</span> <br>
  121.             <p style="margin: 3px 0px;">
  122.                <span class="ft-xs">Enter you voucher code then press submit.</span><br>
  123.                <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>
  124.                <span class="ft-xs ft-italic">GET your <span style="color: green;">FREE TIME</span> Everyday.</span><br>
  125.             </p>
  126.          </div>
  127.       </div>
  128.    </div>
  129.    <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"))))))}};">
  130.          <span class="rotate" style="font-weight:bold;">Php {{ v.amount }}</span>
  131.    </div>
  132. </div>
  133.  
  134.  
  135.  
  136.  
  137.  
  138. <!-- Start QR Code
  139.  
  140.  
  141. End Qr Code -->
  142. {% endfor %}
  143.  
  144. <script type="text/javascript">
  145. {% for qr in vcodes if qr.recno %}
  146. new QRCode(document.getElementById("qrcode-{{ qr.recno }}"), { text: "{{ qr.vcode }}", width: 40, height: 40});
  147. {% endfor %}
  148. function ConvertMinutes(num){
  149.   d = Math.floor(num/1440); // 60*24
  150.   h = Math.floor((num-(d*1440))/60);
  151.   m = Math.round(num%60);
  152.  
  153.   if(d>0){
  154.     return(((d > 1)? d+" DAYS ":d+" DAY ")+((h > 0)? h+" HOURS ":"")+((m > 0)? m+" MINUTES":""));
  155.   }else{
  156.     return(((h > 1)? h+" HOURS ":h+" HOUR ")+((m > 0)? m+" MINUTES":""));
  157.   }
  158. }
  159. {% for v in vcodes if v.recno %}
  160. var tspan = document.getElementById("vtime-{{ v.vcode }}").innerHTML;
  161. var dval = parseInt(tspan);
  162. document.getElementById("vtime-{{ v.vcode }}").innerHTML = ConvertMinutes(dval);
  163. {% endfor %}
  165.  
  166. </body>
  167. </html>

Replies to Re: LPB Print Voucher Template rss

Title Name Language When
Re: Re: LPB Print Voucher Template Almirah html5 1 Month ago.
Re: Re: LPB Print Voucher Template Ameera Henza html5 1 Month ago.
COMMUNITY STARLINK NIYAT STARLINK html5 4 Months ago.
Re: Re: LPB Print Voucher Template Kaizee html5 8 Months ago.
Re: Re: LPB Print Voucher Template Insensitive Tern html5 1 Year ago.
Re: Re: LPB Print Voucher Template Queen Bison html5 1 Year ago.
Re: Re: LPB Print Voucher Template Putrid Tamarin html5 1 Year ago.

Reply to "Re: LPB Print Voucher Template"