Advertisement
Guest User

Untitled

a guest
Oct 19th, 2019
150
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 5.31 KB | None | 0 0
  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5.  
  6. <style>
  7. .invoice-box {
  8. max-width: 400px;
  9. margin: auto;
  10. padding: 30px;
  11. border: 1px solid #eee;
  12. box-shadow: 0 0 10px rgba(0, 0, 0, .15);
  13. font-size: 16px;
  14. line-height: 24px;
  15. font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif;
  16. color: #555;
  17. }
  18.  
  19. .invoice-box table {
  20. width: 100%;
  21. line-height: inherit;
  22. text-align: left;
  23. }
  24.  
  25. .invoice-box table td {
  26. padding: 5px;
  27. vertical-align: top;
  28. }
  29.  
  30. .invoice-box table tr td:nth-child(2) {
  31. text-align: right;
  32. }
  33.  
  34. .invoice-box table tr.top table td {
  35. padding-bottom: 20px;
  36. }
  37.  
  38. .invoice-box table tr.top table td.title {
  39. font-size: 45px;
  40. line-height: 45px;
  41. color: #333;
  42. }
  43.  
  44. .invoice-box table tr.information table td {
  45. padding-bottom: 40px;
  46. }
  47.  
  48. .invoice-box table tr.heading td {
  49. background: #eee;
  50. border-bottom: 1px solid #ddd;
  51. font-weight: bold;
  52. }
  53.  
  54. .invoice-box table tr.details td {
  55. padding-bottom: 20px;
  56. }
  57.  
  58. .invoice-box table tr.item td{
  59. border-bottom: 1px solid #eee;
  60. }
  61.  
  62. .invoice-box table tr.item.last td {
  63. border-bottom: none;
  64. }
  65.  
  66. .invoice-box table tr.total td:nth-child(2) {
  67. border-top: 2px solid #eee;
  68. font-weight: bold;
  69. }
  70.  
  71. @media only screen and (max-width: 600px) {
  72. .invoice-box table tr.top table td {
  73. width: 100%;
  74. display: block;
  75. text-align: center;
  76. }
  77.  
  78. .invoice-box table tr.information table td {
  79. width: 100%;
  80. display: block;
  81. text-align: center;
  82. }
  83. }
  84.  
  85. /** RTL **/
  86. .rtl {
  87. direction: rtl;
  88. font-family: Tahoma, 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif;
  89. }
  90.  
  91. .rtl table {
  92. text-align: right;
  93. }
  94.  
  95. .rtl table tr td:nth-child(2) {
  96. text-align: left;
  97. }
  98. </style>
  99. </head>
  100.  
  101. <body>
  102. <div class="invoice-box">
  103. <table cellpadding="0" cellspacing="0">
  104. <tr class="top">
  105. <td colspan="2">
  106. <table>
  107. <tr>
  108. <td class="title">
  109. <img src="https://i.imgur.com/njEV8Oj.png" style="width:70%; max-width:300px; height:33%">
  110. </td>
  111.  
  112. <td>
  113. Receipt #: {{receipt_number}}<br>
  114. </td>
  115. </tr>
  116. </table>
  117. </td>
  118. </tr>
  119.  
  120. <tr class="information">
  121. <td colspan="2">
  122. <table>
  123. <tr>
  124. <td>
  125. Eaze Payments<br>
  126. IdeaCY<br>
  127. Nicosia, Cyprus
  128. </td>
  129.  
  130. <td>
  131. {{name}}<br>
  132. {{email}}
  133. </td>
  134. </tr>
  135. </table>
  136. </td>
  137. </tr>
  138.  
  139. <tr class="heading">
  140. <td>
  141. Paid with
  142. </td>
  143.  
  144. <td>
  145. </td>
  146. </tr>
  147.  
  148. <tr class="details">
  149. <td>
  150. Eaze Face Recognition
  151. </td>
  152.  
  153. <td>
  154.  
  155. </td>
  156. </tr>
  157.  
  158. <tr class="heading">
  159. <td>
  160. Details
  161. </td>
  162.  
  163. <td>
  164.  
  165. </td>
  166. </tr>
  167.  
  168. <tr class="item">
  169. <td>
  170. POS ID
  171. </td>
  172.  
  173. <td>
  174. {{pos_id}}
  175. </td>
  176. </tr>
  177.  
  178. <tr class="item">
  179. <td>
  180. Location
  181. </td>
  182.  
  183. <td>
  184. {{location}}
  185. </td>
  186. </tr>
  187.  
  188. <tr class="item last">
  189. <td>
  190. Time
  191. </td>
  192.  
  193. <td>
  194. {{time}}
  195. </td>
  196. </tr>
  197.  
  198. <tr class="total">
  199. <td></td>
  200.  
  201. <td>
  202. Total: {{amount}}
  203. </td>
  204. </tr>
  205.  
  206. <tr class="Test">
  207. <td>
  208. </td>
  209. <td>
  210. If this payment wasn't authorized, or you encountered a problem using Eaze, <a href="https://eaze.ml/support/"> please contact support.</a>
  211. </td>
  212. </tr>
  213. </table>
  214. </div>
  215. </body>
  216. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement