templates/home/index.html.twig line 1

Open in your IDE?
  1. {% extends 'ilivio.html.twig' %}
  4. {% block body %}
  6. <style>
  8.     @import url("https://fonts.googleapis.com/css?family=Montserrat");
  10.     .pricing-table{
  11.     background-color: #eee;
  12.     font-family: 'Montserrat', sans-serif;
  13.     margin-top:20pt;
  14.     }
  16.     .pricing-table .block-heading {
  17.     padding-top: 50px;
  18.     margin-bottom: 40px;
  19.     text-align: center; 
  20.     }
  22.     .pricing-table .block-heading h2 {
  23.     color: #3b99e0;
  24.     }
  26.     .pricing-table .block-heading p {
  27.     text-align: center;
  28.     max-width: 420px;
  29.     margin: auto;
  30.     opacity: 0.7; 
  31.     }
  33.     .pricing-table .heading {
  34.     text-align: center;
  35.     padding-bottom: 10px;
  36.     border-bottom: 1px solid rgba(0, 0, 0, 0.1); 
  37.     }
  39.     .pricing-table .item {
  40.     background-color: #ffffff;
  41.     box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.075);
  42.     border-top: 2px solid #5ea4f3;
  43.     padding: 30px;
  44.     overflow: hidden;
  45.     position: relative; 
  46.     }
  48.     .pricing-table .col-md-5:not(:last-child) .item {
  49.     margin-bottom: 30px; 
  50.     }
  52.     .pricing-table .item button {
  53.     font-weight: 600; 
  54.     }
  56.     .pricing-table .ribbon {
  57.     width: 160px;
  58.     height: 32px;
  59.     font-size: 12px;
  60.     text-align: center;
  61.     color: #fff;
  62.     font-weight: bold;
  63.     box-shadow: 0px 2px 3px rgba(136, 136, 136, 0.25);
  64.     background: #4dbe3b;
  65.     transform: rotate(45deg);
  66.     position: absolute;
  67.     right: -42px;
  68.     top: 20px;
  69.     padding-top: 7px; 
  70.     }
  72.     .pricing-table .item p {
  73.     text-align: center;
  74.     margin-top: 20px;
  75.     opacity: 0.7; 
  76.     }
  78.     .pricing-table .features .feature {
  79.     font-weight: 600; }
  81.     .pricing-table .features h4 {
  82.     text-align: center;
  83.     font-size: 18px;
  84.     padding: 5px; 
  85.     }
  87.     .pricing-table .price h4 {
  88.     margin: 15px 0;
  89.     font-size: 45px;
  90.     text-align: center;
  91.     color: #2288f9; 
  92.     }
  94.     .pricing-table .buy-now button {
  95.     text-align: center;
  96.     margin: auto;
  97.     font-weight: 600;
  98.     padding: 9px 0; 
  99.     }
  101. </style>
  103. <div style="{% if isDesktop == true %} padding-top:42pt; {% else %} padding-top:0;margin-top:56pt; {% endif %};">
  105. <section class="pricing-table" style="background-image: url('{{ asset("img/centralized-services-md.png")}}');background-repeat: repeat;background-color:;">
  106.     <div class="container">
  107.         <div class="block-heading">
  108.             <h2 style="font-weight:bold;">Gérer vos factures en toute simplicité</h2>
  109.             <p style="display:none;">Éditer vos Factures, Devis ou faites des Avoirs, choississez l'offre qui vous convient le mieux.</p>
  110.         </div>
  111.         <div class="row justify-content-md-center">
  112.             <div class="col-md-5 col-lg-4" style="padding:5pt;">
  113.                 <div class="item">
  114.                     <div class="ribbon">Populaire</div>
  115.                     <div class="heading">
  116.                         <h3>L'Offre UNIQUE</h3>
  117.                     </div>
  118.                     <p>Simple et rapide, idéal pour toutes les entreprises</p>
  119.                     <div class="features">
  120.                         <ul>
  121.                             <li><span class="feature">Factures, Devis, Avoirs</span> : <span class="value" style="color:green;">ilimité</span></hli8>
  122.                             <li><span class="feature">Clients </span> : <span class="value" style="color:green;">ilimité</span></li>
  123.                             <li><span class="feature">Produits</span> : <span class="value" style="color:green;">ilimité</span></li>
  124.                             <li><span class="feature">Gestion de la TVA</span> : <span class="value" style="color:green;">✔</span></li>
  125.                             <li><span class="feature">Mentions personnalisables</span> : <span class="value" style="color:green;">✔</span></li>
  126.                             <li><span class="feature">Calculs auto. des montants</span> : <span class="value" style="color:green;">✔</span></li>
  127.                             <li><span class="feature">Access utilisateurs</span> : <span class="value" style="color:green;">5</span></li>
  128.                             <li><span class="feature">Facture PDF sans filigrane</span> : <span class="value" style="color:green;">✔</span></li>
  129.                             <li><span class="feature">Gestion du theme</span> : <span class="value" style="color:green;">✔</span></li>
  130.                         <ul>
  131.                     </div>
  132.                     <div class="price">
  133.                         <h4 style="font-size:22pt;text-align:center;padding:5pt;">
  134.                             <span>11,<span style="vertical-align: super;font-size:10pt;">99</span></span>
  135.                             <span style="font-size:12pt;">€ HT/mois</span>
  136.                         </h4>
  137.                     </div>
  138.                     <div class="" style="text-align:center;">
  139.                         {% if isDesktop %}
  140.                             <button class="btn btn-block btn-primary" type="submit" style="width:100%;display:none;">Souscrire</button>
  141.                             <div id="paypal-button-container-P-3N842545RT880971TMF3MZMI"></div>
  142.                             <script src="https://www.paypal.com/sdk/js?client-id=AbTCzze4BVcGx_LHbZWq39c6C9InO7vbQ1GAHEcHfheyM2aY5hccqvanr5EIERROk9UcMZ3E2_i310PE&vault=true&intent=subscription" data-sdk-integration-source="button-factory"></script>                           
  143.                             <script>
  144.                                 paypal.Buttons({
  145.                                     style: {
  146.                                         shape: 'rect',
  147.                                         color: 'silver',
  148.                                         layout: 'vertical',
  149.                                         label: 'subscribe'
  150.                                     },
  151.                                     createSubscription: function(data, actions) {
  152.                                         return actions.subscription.create({
  153.                                         /* Creates the subscription */
  154.                                         plan_id: 'P-3N842545RT880971TMF3MZMI'
  155.                                         });
  156.                                     },
  157.                                     onApprove: function(data, actions) {
  158.                                         //alert(data.subscriptionID); // You can add optional success message for the subscriber here
  159.                                        // approuvedPayment(data);
  160.                                         
  161.                                         window.location.href='{{ path("app_register") }}/?subscriptionID=' + data.subscriptionID + '&planID=P-3N842545RT880971TMF3MZMI';
  163.                                     }
  164.                                 }).render('#paypal-button-container-P-3N842545RT880971TMF3MZMI'); // Renders the PayPal button
  165.                             </script>
  167.                         {% else %}
  168.                             <button class="btn btn-block btn-warning" type="submit" style="width:100%;margin-bottom:10pt;" onclick="window.location.href='{{ path("demo_new") }}'">Essayer gratuitement</button>
  169.                             <button class="btn btn-block btn-primary" type="submit" style="width:45%;display:none;">Souscrire</button>
  170.                                 <div id="paypal-button-container-P-3N842545RT880971TMF3MZMI"></div>
  171.                                 <script src="https://www.paypal.com/sdk/js?client-id=AbTCzze4BVcGx_LHbZWq39c6C9InO7vbQ1GAHEcHfheyM2aY5hccqvanr5EIERROk9UcMZ3E2_i310PE&vault=true&intent=subscription" data-sdk-integration-source="button-factory"></script>                           
  172.                                 <script>
  173.                                     paypal.Buttons({
  174.                                         style: {
  175.                                             shape: 'rect',
  176.                                             color: 'silver',
  177.                                             layout: 'vertical',
  178.                                             label: 'subscribe'
  179.                                         },
  180.                                         createSubscription: function(data, actions) {
  181.                                             return actions.subscription.create({
  182.                                             /* Creates the subscription */
  183.                                             plan_id: 'P-3N842545RT880971TMF3MZMI'
  184.                                             });
  185.                                         },
  186.                                         onApprove: function(data, actions) {
  187.                                             //alert(data.subscriptionID); // You can add optional success message for the subscriber here
  188.                                              //approuvedPayment(data);
  190.                                             window.location.href='{{ path("app_register") }}/?subscriptionID=' + data.subscriptionID + '&planID=P-3N842545RT880971TMF3MZMI';
  191.                                            
  192.                                         }
  193.                                     }).render('#paypal-button-container-P-3N842545RT880971TMF3MZMI'); // Renders the PayPal button
  194.                                 </script>
  196.                                 <div style="text-align:center;font-size:12pt;color:#1E90FF;margin-top:10pt;">
  197.                                     Disponible sur
  198.                                     www.ilivio.co
  199.                                 </div>
  203.                         {% endif %}                        
  204.                     </div>
  205.                     
  206.                 </div>
  207.             </div>
  209.             <div class="col-md-5 col-lg-4" style="padding:5pt;display:none;">
  210.                 <div class="item" style="">
  211.                     <div class="heading">
  212.                         <h3>FREE</h3>
  213.                     </div>
  214.                     <p>Idéal pour les associations ou les très petites structures</p>
  215.                     <div class="features">
  216.                         <ul>
  217.                             <li><span class="feature">Factures, Devis, Avoirs</span> : <span class="value" style="color:green;">ilimité</span></hli8>
  218.                             <li><span class="feature">Clients </span> : <span class="value" style="color:orange;">50</span></li>
  219.                             <li><span class="feature">Produits</span> : <span class="value" style="color:orange;">50</span></li>
  220.                             <li><span class="feature">Mentions personnalisables</span> : <span class="value" style="color:green;">✔</span></li>
  221.                             <li><span class="feature">Calculs auto. des montants</span> : <span class="value" style="color:green;">✔</span></li>
  222.                             <li><span class="feature">Access utilisateurs</span> : <span class="value" style="color:orange;">2</span></li>
  223.                             <li><span class="feature">Filigrane ilivio inactif</span> : <span class="value" style="color:red;">✘</span></li>
  224.                             <li><span class="feature">Gestion du theme</span> : <span class="value" style="color:red;">✘</span></li>
  225.                             <li><span class="feature">Envoi des factures</span> : <span class="value" style="color:red;">✘</span></li>
  226.                             <li><span class="feature">Statistiques</span> : <span class="value" style="color:red;">✘</span></li>
  227.                         <ul>
  228.                     </div>
  229.                     <div class="price">
  230.                         <h4 style="font-size:22pt;text-align:center;padding:5pt;">Gratuit</h4>                                           
  231.                     </div>
  232.                     <button class="btn btn-outline-primary" type="submit" style="width:100%;">Commencer</button>
  233.                 </div>
  234.             </div>
  235.             <div class="col-md-5 col-lg-4" style="padding:5pt;display:none;">
  236.                 <div class="item">
  237.                     <div class="ribbon">Populaire</div>
  238.                     <div class="heading">
  239.                         <h3>PRO</h3>
  240.                     </div>
  241.                     <p>Idéal pour les professionnels qui ont plus de 50 clients</p>
  242.                     <div class="features">
  243.                         <ul>
  244.                             <li><span class="feature">Factures, Devis, Avoirs</span> : <span class="value" style="color:green;">ilimité</span></hli8>
  245.                             <li><span class="feature">Clients </span> : <span class="value" style="color:green;">ilimité</span></li>
  246.                             <li><span class="feature">Produits</span> : <span class="value" style="color:green;">ilimité</span></li>
  247.                             <li><span class="feature">Mentions personnalisables</span> : <span class="value" style="color:green;">✔</span></li>
  248.                             <li><span class="feature">Calculs auto. des montants</span> : <span class="value" style="color:green;">✔</span></li>
  249.                             <li><span class="feature">Access utilisateurs</span> : <span class="value" style="color:green;">5</span></li>
  250.                             <li><span class="feature">Filigrane ilivio inactif</span> : <span class="value" style="color:green;">✔</span></li>
  251.                             <li><span class="feature">Gestion du theme</span> : <span class="value" style="color:green;">✔</span></li>
  252.                             <li><span class="feature">Envoi des factures</span> : <span class="value" style="color:red;">✘</span></li>
  253.                             <li><span class="feature">Statistiques</span> : <span class="value" style="color:red;">✘</span></li>
  254.                         <ul>
  255.                     </div>
  256.                     <div class="price">
  257.                         <h4 style="font-size:22pt;text-align:center;padding:5pt;">
  258.                             <span>11,<span style="vertical-align: super;font-size:10pt;">99</span></span>
  259.                             <span style="font-size:12pt;">€ HT/mois</span>
  260.                         </h4>
  261.                     </div>
  262.                     <button class="btn btn-block btn-primary" type="submit" style="width:100%;">Souscrire</button>
  263.                 </div>
  264.             </div>
  265.             <div class="col-md-5 col-lg-4" style="display:none;">
  266.                 <div class="item">
  267.                     <div class="ribbon">Populaire</div>
  268.                     <div class="heading">
  269.                         <h3>PRO</h3>
  270.                     </div>
  271.                     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  272.                     <div class="features">
  273.                         <h4><span class="feature">Full Support</span> : <span class="value">Yes</span></h4>
  274.                         <h4><span class="feature">Duration</span> : <span class="value">60 Days</span></h4>
  275.                         <h4><span class="feature">Storage</span> : <span class="value">50GB</span></h4>
  276.                     </div>
  277.                     <div class="price">
  278.                         <h4>50€</h4>
  279.                     </div>
  280.                     <button class="btn btn-block btn-primary" type="submit">BUY NOW</button>
  281.                 </div>
  282.             </div>
  283.             <div class="col-md-5 col-lg-4" style="display:none;">
  284.                 <div class="item">
  285.                     <div class="heading">
  286.                         <h3>PREMIUM</h3>
  287.                     </div>
  288.                     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  289.                     <div class="features">
  290.                         <h4><span class="feature">Full Support</span> : <span class="value">Yes</span></h4>
  291.                         <h4><span class="feature">Duration</span> : <span class="value">120 Days</span></h4>
  292.                         <h4><span class="feature">Storage</span> : <span class="value">150GB</span></h4>
  293.                     </div>
  294.                     <div class="price">
  295.                         <h4>€150</h4>
  296.                     </div>
  297.                     <button class="btn btn-block btn-outline-primary" type="submit">BUY NOW</button>
  298.                 </div>
  299.             </div>
  300.         </div>
  301.     </div>
  302. </section>
  304. <div style="text-align:center;font-size:10pt;color:gray;margin-top:10pt;">
  305.     Ilivio © {{ "now"|date("Y") }} <br> Powered by Swadrii GROUP
  306. </div>
  308. </div>
  311. <script>
  313. function approuvedPayment(data){
  315.     //window.location.href='{{ path("app_register") }}';
  316.    /// alert('{{ path("app_register") }}');
  319.     $.post('{{ path("app_register") }}',
  320.     {
  321.         name: 'Jean-Michel',
  322.         email: 'jeanmich@caramail.com'
  323.     }, function(data) {
  324.         alert(data);
  325.     });
  329. }
  331. //window.location.href='{{ path("app_register") }}/?subscriptionID=' +4+ '&planID=P-3N842545RT880971TMF3MZMI';
  332.     
  333. </script>
  338. {% endblock %}