Facebook
From Kaizee, 8 Months ago, written in HTML5.
This paste is a reply to Re: Re: LPB Print Voucher Template from Kaizee - view diff
Embed
Download Paste or View Raw
Hits: 294
  1. <!DOCTYPE<!DOCTYPE html>
  2.  
  3. &lt;!-- V.code = Voucher Code| V.Minutes = Minutes | V.Amount = Price  |  id="qrcode-{{ v.recno }}" = QR CODE Remove if you want--&gt;
  4.  
  5. &lt;html&gt;
  6. &lt;head&gt;
  7. [removed][removed]
  8. [removed][removed]
  9. &lt;style&gt;
  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. }
  99. &lt;/style&gt;
  100. &lt;/head&gt;
  101. &lt;body&gt;
  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 }}" >{{ 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  3px 0px;">
  122.                <span class="ft-xs">Enter you voucher code then press submit.</span><br>
  123.                <span class="ft-xs">To ensure <span  red;">FAST CONNECTION SPEED</span> is achieved at <span  red;">FULL WIFI SIGNAL</span>.</span><br>
  124.                <span class="ft-xs ft-italic">GET your <span  green;">FREE TIME</span> Everyday.</span><br>
  125.             </p>
  126.          </div>
  127.       </div>
  128.    </div>
  129.    <div class="right-block"  ((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" >Php {{ v.amount }}</span>
  131.    </div>
  132. </div>
  133.  
  134.  
  135.  
  136.  
  137.  
  138. &lt;!-- Start QR Code
  139.  
  140.  
  141. End Qr Code --&gt;
  142. {% endfor %}
  143.  
  144. [removed]
  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`);
  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 }}")[removed];
  161. var dval = parseInt(tspan);
  162. document.getElementById("vtime-{{ v.vcode }}")[removed] = ConvertMinutes(dval);
  163. {% endfor %}
  164. [removed]
  165.  
  166. &lt;/body&gt;
  167. &lt;/html&gt;  html>
  168.  
  169. &lt;!-- V.code = Voucher Code| V.Minutes = Minutes | V.Amount = Price  |  id="qrcode-{{ v.recno }}" = QR CODE Remove if you want--&gt;
  170.  
  171. &lt;html&gt;
  172. &lt;head&gt;
  173. [removed][removed]
  174. [removed][removed]
  175. &lt;style&gt;
  176. .print {
  177. width: 180px;
  178. height: 85px;
  179. border: 1px solid black;
  180. text-align: center;
  181. display: inline-table;
  182. font-size : 8px;
  183. margin : 5px;
  184. }
  185. .qrcode {
  186. /*margin: auto;*/
  187. width: 42px;
  188. padding: 2px;
  189. float: left;
  190. }
  191. img {
  192.  
  193. }
  194.  
  195. .top-block {
  196.   border-bottom: 1px solid black;
  197.   color : #00B0F0;
  198.   font-weight: bold;
  199. }
  200. .code-block {
  201.   border-bottom: 1px solid black;
  202.   line-height: 1.1 !important;
  203. }
  204. .left-block{
  205.   width: 160px;
  206.   height : inherit;
  207.   float: left;
  208. }
  209. .info-block {
  210.   height : inherit;
  211.   margin-left: -35px;
  212.   width : 195px;
  213.   line-height: 0.8 !important;
  214.   text-align: left;
  215. }
  216.  
  217. .right-block{
  218.   height : inherit;
  219.   margin-left: 160px;
  220.   border-left: 1px solid black;
  221.   padding-bottom: 3px;
  222. }
  223.  
  224.  
  225. .right-block > span{
  226.   color : white;
  227.   font-size : 10px;
  228.   writing-mode: vertical-rl;
  229.   text-orientation: sideways-right;
  230.   margin-top: 5px;
  231. }
  232.  
  233. .rotate {
  234.   transform: rotate(-180deg);
  235.   -webkit-transform: rotate(-180deg);
  236.   -moz-transform: rotate(-180deg);
  237.   -ms-transform: rotate(-180deg);
  238.   -o-transform: rotate(-180deg);
  239. }
  240.  
  241. .code-style {
  242.   font-family: Consolas, monaco, monospace;
  243.   font-size: 20px;
  244.   font-style: bold;
  245.   font-variant: normal;
  246.   font-weight: 700;
  247.   letter-spacing : 3px;
  248. }
  249.  
  250. .ft-sm {
  251.   font-size : 7px;
  252. }
  253. .ft-xs {
  254.   font-size : 6px;
  255. }
  256. .ft-bold {
  257.   font-weight:bold;
  258. }
  259. .ft-italic {
  260.   font-weight:italic;
  261. }
  262. .ft-blue {
  263.    color : #00B0F0;
  264. }
  265. &lt;/style&gt;
  266. &lt;/head&gt;
  267. &lt;body&gt;
  268.  
  269. {% for v in vcodes if v.recno %}
  270.  
  271. <div class="print">
  272.    <div class="left-block">
  273.       <div class="top-block">
  274.          <span>ENTER CODE @ HTTP://10.0.0.1</span>
  275.       </div>
  276.       <div class="code-block">
  277.          <span class="code-style">{{ v.vcode }}</span> <br>
  278.          <span id="vtime-{{ v.vcode }}" >{{ v.minutes }}</span><br>
  279.       </div>
  280.       <div>
  281.          <div class="qrcode">
  282.             <div id="qrcode-{{ v.recno }}"> </div>
  283.          </div>
  284.          <div class="info-block">
  285.             <span class="ft-bold ft-xs">CONNECT TO WIFI</span><br>
  286.             <span class="ft-blue ft-bold ft-sm">LBP PISO WIFI</span> <br>
  287.             <p  3px 0px;">
  288.                <span class="ft-xs">Enter you voucher code then press submit.</span><br>
  289.                <span class="ft-xs">To ensure <span  red;">FAST CONNECTION SPEED</span> is achieved at <span  red;">FULL WIFI SIGNAL</span>.</span><br>
  290.                <span class="ft-xs ft-italic">GET your <span  green;">FREE TIME</span> Everyday.</span><br>
  291.             </p>
  292.          </div>
  293.       </div>
  294.    </div>
  295.    <div class="right-block"  ((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"))))))}};">
  296.          <span class="rotate" >Php {{ v.amount }}</span>
  297.    </div>
  298. </div>
  299.  
  300.  
  301.  
  302.  
  303.  
  304. &lt;!-- Start QR Code
  305.  
  306.  
  307. End Qr Code --&gt;
  308. {% endfor %}
  309.  
  310. [removed]
  311. {% for qr in vcodes if qr.recno %}
  312. new QRCode(document.getElementById("qrcode-{{ qr.recno }}"), { text: "{{ qr.vcode }}", width: 40, height: 40});
  313. {% endfor %}
  314. function ConvertMinutes(num){
  315.   d = Math.floor(num/1440); // 60*24
  316.   h = Math.floor((num-(d*1440))/60);
  317.   m = Math.round(num`);
  318.  
  319.   if(d>0){
  320.     return(((d > 1)? d+" DAYS ":d+" DAY ")+((h > 0)? h+" HOURS ":"")+((m > 0)? m+" MINUTES":""));
  321.   }else{
  322.     return(((h > 1)? h+" HOURS ":h+" HOUR ")+((m > 0)? m+" MINUTES":""));
  323.   }
  324. }
  325. {% for v in vcodes if v.recno %}
  326. var tspan = document.getElementById("vtime-{{ v.vcode }}")[removed];
  327. var dval = parseInt(tspan);
  328. document.getElementById("vtime-{{ v.vcode }}")[removed] = ConvertMinutes(dval);
  329. {% endfor %}
  330. [removed]
  331.  
  332. &lt;/body&gt;
  333. &lt;/html&gt;