templates/paiment/virement.html.twig line 1

Open in your IDE?
  2. <!DOCTYPE html>
  3. <html>
  5. {% include ('includes/head.html.twig') %}
  6. <body>
  7. <!-- Page Loader
  8. ========================================================= -->
  9. <div class="loader-container" id="page-loader"> 
  10.   <div class="loading-wrapper loading-wrapper-hide">
  11.       <div class="loader-animation" id="loader-animation">
  12.           <svg class="svg-loader" width=100 height=100>
  13.           <circle cx=50 cy=50 r=25 />
  14.         </svg>
  15.       </div>    
  16.     <!-- Edit With Your Name -->
  17.     <div class="loader-name" id="loader-name">
  18.       <img src="img/loader-logo.png" alt="">
  19.     </div>
  20.     <!-- /Edit With Your Name -->
  21.     <!-- Edit With Your Job -->
  22.     <p class="loader-job" id="loader-job">June 4-8 2016 @ New York City</p>
  23.     <!-- /Edit With Your Job -->
  24.   </div>   
  25. </div>
  26. <!-- /End of Page loader
  27. ========================================================= -->
  29. <!-- Header
  30. ================================================== -->
  32. {% include ('includes/header.html.twig') %}
  34. <!-- /Header
  35. ================================================== -->
  38. <div class="page-wrapper" style="min-height:600px;">
  39.     
  40.     <div id="body-content" style="background-color:white">
  42.         <style>
  43. .anisawadni table td {
  44.     vertical-align: top;
  45. }
  47. .anisawadni .body-wrap {
  48.     background-color: #f6f6f6;
  49.     width: 100%;
  50. }
  52. .anisawadni .container {
  53.     display: block !important;
  54.     max-width: 600px !important;
  55.     margin: 0 auto !important;
  56.     /* makes it centered */
  57.     clear: both !important;
  58. }
  60. .anisawadni .content {
  61.     max-width: 600px;
  62.     margin: 0 auto;
  63.     display: block;
  64.     padding: 20px;
  65. }
  67. /* -------------------------------------
  68.     HEADER, FOOTER, MAIN
  69. ------------------------------------- */
  70. .anisawadni .main {
  71.     background: #fff;
  72.     border: 1px solid #e9e9e9;
  73.     border-radius: 3px;
  74. }
  76. .anisawadni .content-wrap {
  77.     padding: 20px;
  78. }
  80. .anisawadni .content-block {
  81.     padding: 0 0 20px;
  82. }
  84. .anisawadni .header {
  85.     width: 100%;
  86.     margin-bottom: 20px;
  87. }
  89. .anisawadni .footer {
  90.     width: 100%;
  91.     clear: both;
  92.     color: #999;
  93.     padding: 20px;
  94. }
  95. .anisawadni  .footer a {
  96.     color: #999;
  97. }
  98. .anisawadni .footer p, .footer a, .footer unsubscribe, .footer td {
  99.     font-size: 12px;
  100. }
  102. /* -------------------------------------
  103.     TYPOGRAPHY
  104. ------------------------------------- */
  105. .anisawadni h1, h2, h3 {
  106.     font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
  107.     color: #000;
  108.     margin: 40px 0 0;
  109.     line-height: 1.2;
  110.     font-weight: 400;
  111. }
  113. .anisawadni h1 {
  114.     font-size: 32px;
  115.     font-weight: 500;
  116. }
  118. .anisawadni h2 {
  119.     font-size: 24px;
  120. }
  122. .anisawadni h3 {
  123.     font-size: 18px;
  124. }
  126. .anisawadni h4 {
  127.     font-size: 14px;
  128.     font-weight: 600;
  129. }
  131. .anisawadni p, ul, ol {
  132.     margin-bottom: 10px;
  133.     font-weight: normal;
  134. }
  135. .anisawadni p li, ul li, ol li {
  136.     margin-left: 5px;
  137.     list-style-position: inside;
  138. }
  140. /* -------------------------------------
  141.     LINKS & BUTTONS
  142. ------------------------------------- */
  143. .anisawadni a {
  144.     color: #1ab394;
  145.     text-decoration: underline;
  146. }
  148. .anisawadni .btn-primary {
  149.     text-decoration: none;
  150.     color: #FFF;
  151.     background-color: #1ab394;
  152.     border: solid #1ab394;
  153.     border-width: 5px 10px;
  154.     line-height: 2;
  155.     font-weight: bold;
  156.     text-align: center;
  157.     cursor: pointer;
  158.     display: inline-block;
  159.     border-radius: 5px;
  160.     text-transform: capitalize;
  161. }
  163. /* -------------------------------------
  164.     OTHER STYLES THAT MIGHT BE USEFUL
  165. ------------------------------------- */
  166. .anisawadni .last {
  167.     margin-bottom: 0;
  168. }
  170. .anisawadni .first {
  171.     margin-top: 0;
  172. }
  174. .anisawadni .aligncenter {
  175.     text-align: center;
  176. }
  178. .anisawadni .alignright {
  179.     text-align: right;
  180. }
  182. .anisawadni .alignleft {
  183.     text-align: left;
  184. }
  186. .anisawadni .clear {
  187.     clear: both;
  188. }
  190. /* -------------------------------------
  191.     ALERTS
  192.     Change the class depending on warning email, good email or bad email
  193. ------------------------------------- */
  194. .anisawadni .alert {
  195.     font-size: 16px;
  196.     color: #fff;
  197.     font-weight: 500;
  198.     padding: 20px;
  199.     text-align: center;
  200.     border-radius: 3px 3px 0 0;
  201. }
  202. .anisawadni .alert a {
  203.     color: #fff;
  204.     text-decoration: none;
  205.     font-weight: 500;
  206.     font-size: 16px;
  207. }
  208. .anisawadni .alert.alert-warning {
  209.     background: #f8ac59;
  210. }
  211. .anisawadni .alert.alert-bad {
  212.     background: #ed5565;
  213. }
  214. .anisawadni .alert.alert-good {
  215.     background: #1ab394;
  216. }
  218. /* -------------------------------------
  219.     INVOICE
  220.     Styles for the billing table
  221. ------------------------------------- */
  222. .anisawadni .invoice {
  223.     margin: 40px auto;
  224.     text-align: left;
  225.     width: 80%;
  226. }
  227. .anisawadni .invoice td {
  228.     padding: 5px 0;
  229. }
  230. .anisawadni .invoice .invoice-items {
  231.     width: 100%;
  232. }
  233. .anisawadni .invoice .invoice-items td {
  234.     border-top: #eee 1px solid;
  235. }
  236. .anisawadni .invoice .invoice-items .total td {
  237.     border-top: 2px solid #333;
  238.     border-bottom: 2px solid #333;
  239.     font-weight: 700;
  240. }
  242. /* -------------------------------------
  243.     RESPONSIVE AND MOBILE FRIENDLY STYLES
  244. ------------------------------------- */
  245. @media only screen and (max-width: 640px) {
  246.    .anisawadni  h1, h2, h3, h4 {
  247.         font-weight: 600 !important;
  248.         margin: 20px 0 5px !important;
  249.     }
  251.    .anisawadni  h1 {
  252.         font-size: 22px !important;
  253.     }
  255.     .anisawadni h2 {
  256.         font-size: 18px !important;
  257.     }
  259.     .anisawadni h3 {
  260.         font-size: 16px !important;
  261.     }
  263.     .anisawadni .container {
  264.         width: 100% !important;
  265.     }
  267.     .anisawadni .content, .content-wrap {
  268.         padding: 10px !important;
  269.     }
  271.     .anisawadni .invoice {
  272.         width: 100% !important;
  273.     }
  274. }
  275. </style>
  276. <script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.9.2/html2pdf.bundle.min.js"></script>
  278.         <div class="section-about" id="section-about" style="background-color:white">
  279.             <div class="container-fluid">
  280.                 <div class="row" style="margin-top:10%;background-color:white">
  281.                    
  282.                    <div class="container">
  283.                    <h2>Virement bancaire </h2>
  284.                    <hr>
  285.                         <div class="col-lg-12 anisawadni">
  286.                    <table class="main download-r" id="download-r" width="100%" cellpadding="0" cellspacing="0">
  287.                     <tbody><tr>
  288.                         <td class="content-wrap aligncenter">
  289.                             <table width="100%" cellpadding="0" cellspacing="0">
  290.                                 <tbody><tr>
  291.                                     <td class="content-block">
  292.                                         <h2>ASTP</h2>
  293.                                     </td>
  294.                                 </tr>
  295.                                 <tr>
  296.                                     <td class="content-block">
  297.                                         <table class="invoice">
  298.                                             <tbody>
  299.                                             
  300.                                             <tr>
  301.                                                 <td>
  302.                                                     <table class="invoice-items" cellpadding="0" cellspacing="0">
  303.                                                         <tbody><tr>
  304.                                                             <td>Nom et prénom </td>
  305.                                                             <td class="alignright">{{ app.session.get('nom') }} {{ app.session.get('prenom') }}</td>
  306.                                                         </tr>
  307.                                                         <tr>
  308.                                                             <td>Email</td>
  309.                                                             <td class="alignright">{{ app.session.get('emailSend') }}</td>
  310.                                                         </tr>
  311.                                                          <tr>
  312.                                                             <td>Téléphone</td>
  313.                                                             <td class="alignright">{{ app.session.get('phone') }}</td>
  314.                                                         </tr>
  315.                                                            <tr>
  316.                                                             <td>Type</td>
  317.                                                             <td class="alignright">{{ app.session.get('type') }}</td>
  318.                                                         </tr>
  319.                                                            <tr>
  320.                                                             <td>Fonction</td>
  321.                                                             <td class="alignright">{{ app.session.get('fonction') }}</td>
  322.                                                         </tr>
  323.                                                         
  324.                                                         <tr class="total">
  325.                                                             <td class="alignright" width="80%">Total</td>
  326.                                                             <td class="alignright "><span class="montant">{{prix}}</span> TND</td>
  327.                                                         </tr>
  328.                                                     </tbody></table>
  329.                                                 </td>
  330.                                             </tr>
  331.                                         </tbody></table>
  332.                                     </td>
  333.                                 </tr>
  334.                                   <tr>
  335.                         <td colspan="4">
  336.                     {% if ret is defined %}
  337.     {% if ret is not empty %}
  338.         <div class="alert alert-danger" style="    text-align: left;
  339.     color: black;"> {{ ret }}</div>
  340.     {% endif %}
  341. {% endif %}
  345.                 {% if success is defined %}
  346.    {% if success is not empty %}
  347.                 <div class="alert alert-success" style="text-align: left;
  348.                      color: black;"> {{ success }}</div>
  349.                  {% endif %}
  350.                 {% endif %}
  352.                 {% if success is not defined or success is empty %}
  353.                         <form method="post" action="/virementsend/{{id}}/{{idprix}}" enctype="multipart/form-data">
  354.                                 <label style="float:left">Téléchargez le reçu de virement bancaire ici pour RIB  : <b>07074013210550067594</b> </label>
  355.                                 <input type="file" name="receipt" class="form-control" />
  356.                                 <button class="btn btn-info float-right m-3" style="float:right">Suivant</button>
  357.                         </form>
  358.                     {% endif %}
  359.                         </td>
  360.                         
  361.                         </tr>
  362.                             </tbody></table>
  363.                         </td>
  364.                     </tr>
  365.                 </tbody></table>
  366.                     {% if success is defined %}
  367.                 {% if success is not empty %}
  368.                 <button class="btn btn-info" style="float:right" id="download">Télécharger</button>
  369.                  {% endif %}
  370.                 {% endif %}
  372.              <script>
  373.         document.getElementById('download').addEventListener('click', function () {
  374.             // Sélectionne l'élément HTML à convertir en PDF
  375.             const element = document.getElementById('download-r');
  376.             // Options de configuration pour html2pdf
  377.             const opt = {
  378.                 margin:       1,
  379.                 filename:     'document-paiment-astp.pdf',
  380.                 image:        { type: 'jpeg', quality: 0.98 },
  381.                 html2canvas:  { scale: 2 },
  382.                 jsPDF:        { unit: 'in', format: 'letter', orientation: 'portrait' }
  383.             };
  384.             // Conversion de l'élément en PDF
  385.             html2pdf().from(element).set(opt).save();
  386.         });
  387.     </script>
  388.                 
  389.                 <div class="footer">
  390.                     <table width="100%">
  391.                         <tbody><tr>
  392.                             <td class="aligncenter content-block">Questions? Téléphone <a href="mailto:">+216 97 054 316</a></td>
  393.                         </tr>
  394.                         <tr>
  395.                        
  396.                         
  397.                         </tr>
  398.                     </tbody></table>
  399.                 </div></div>
  400.         </td>
  401.         <td></td>
  402.     </tr>
  403. </tbody></table>
  406.                         </div>  
  407.                    </div>
  408.                 </div>
  409.             </div>
  410.         </div>
  411.         <!-- /SECTION: Event Description
  412.         ================================================== -->
  414.         <!-- SECTION: Event Schedule
  415.         ================================================== -->
  416.     </div>
  417.     </div>    
  418. {% include ('includes/footer.html.twig') %}
  420. </body>
  421. </html>