templates/tunnel/price.html.twig line 1

  1. {% extends 'base.html.twig' %}
  2. {% trans_default_domain "tunnel" %}
  4. {% block title %}{% trans %}S'abonner à SpeakyPlanet - Formule sans engagement{% endtrans %}{% endblock %}
  6. {% block breadcrumb %}
  7. <nav style="--bs-breadcrumb-divider: '>';" aria-label="breadcrumb">
  8.   <ol class="breadcrumb">
  9.     <li class="breadcrumb-item active" aria-current="page">{% trans %}Formule d'abonnement{% endtrans %}</li>
  10.   </ol>
  11. </nav>
  12. {% endblock %}
  14. {% block body %}
  15. <script type="text/javascript">
  16. <!--
  17.     $(document).ready(function() {
  18.         $('#subscriptionChoices button.choose').click(function () {
  19.             {# fbq('track', 'InitiateCheckout'); #}
  20.             $('#subscriptionChoices .spForm #fChoice').val($(this).attr('id'));
  21.             $('#subscriptionChoices .spForm').submit();
  22.             return false;
  23.         });
  24.     });
  25. -->
  26. </script>
  27. <style>
  28.     #guest_nav {
  29.         display: none;
  30.     }
  31.     
  32.     .pricing-header h1 {
  33.         font-weight: bold;
  34.         color: #f26528;
  35.         text-transform: uppercase;
  36.         line-height: 1.2em;
  37.     }
  39.     .pricing-header h3 {
  40.         font-weight: bold;
  41.         font-size: 1.17em;
  42.     }
  44.     .col .card-header {
  45.         border: none;
  46.         background-color: #A8D4E6;
  47.     }
  49.     .col .card {
  50.         border-color: #A8D4E6;
  51.         border-radius: 0.3rem!important;
  52.         border-width: thick;
  53.     }
  55.     .col .card .card-header h4 {
  56.         color: #FFFFFF !important;
  57.         font-weight: bold !important;
  58.     }
  60.     .col .card.border-primary {
  61.         border-color: #F28431 !important;
  62.     }
  64.     .col .card.border-primary .card-header {
  65.         background-color: #F28431 !important;
  66.     }
  68.     .col .card button{
  69.         border: 1px solid #F28431 !important;
  70.         background-color: #F28431 !important;
  71.         font-weight: bold;
  72.         color: #FFFFFF;
  73.     }
  75.     .col .card button:hover{
  76.         background-color: #FFFFFF !important;
  77.         color: #F28431;
  78.     }
  80.     .col .card .subText {
  81.         font-weight: bold;
  82.         color: #F28431;
  83.     }
  85.     .col .card .month{
  86.         font-size: 0.8em;
  87.         font-weight: bold;
  88.         color: #4C4E66;
  89.     }
  90. </style>
  92. <header>
  93.     <div class="pricing-header p-3 pb-md-4 mx-auto text-center">
  94.         <h1 class="center">{% trans %}ACCÈS ILLIMITÉ À TOUT SPEAKYPLANET{% endtrans %}</h1>
  95.         <h3 class="center">{% trans %}Sur ordinateur, tablette et smartphone{% endtrans %}</h3>
  96.         <h1 class="center">{% trans %}SANS ENGAGEMENT DE DURÉE{% endtrans %}</h1>
  97.         <h3 class="center">{% trans %}Les demandes de désabonnement se font à contact@speakyplanet.com{% endtrans %}</h3>
  98.         <h1 class="center">{% trans %}SATISFAIT OU REMBOURSÉ{% endtrans %}</h1>
  99.         <h3 class="center">{% trans %}Les demandes de remboursement se font sous 48H à contact@speakyplanet.com{% endtrans %}</h3>
  100.     </div>
  101. </header>
  102. <br/>
  103. <br/>
  104. <main id="subscriptionChoices">
  105.     <form class="spForm" method="POST" action="{{ url(route) }}" novalidate >
  106.         <input id="fChoice" type="hidden" name="subscription" value="{{ choice }}" />
  107.         <div class="row row-cols-1 row-cols-md-3 mb-3 justify-content-evenly text-center">
  108.             <div class="col">
  109.                 <div class="card mb-4 rounded-3 shadow-sm">
  110.                     <div class="card-header py-3">
  111.                         <h4 class="my-0 fw-normal">{% trans %}Mensuel{% endtrans %}</h4>
  112.                     </div>
  113.                     <div class="card-body">
  114.                         <h1 class="card-title pricing-card-title">{{ (prices[0].priceMonth ~ '&nbsp;' ~ prices[0].currency) |pricetag(prices[0].countryCode)|raw }}<small class="text-muted fw-light fs-5">{% trans %}/mois{% endtrans %}</small></h1>
  115.                         <ul class="list-unstyled mt-2 mb-2">
  116.                             <li>&nbsp;</li>
  117.                             <li>&nbsp;</li>
  118.                             <li><button type="button"id="choice1" class="choose w-75 btn btn-lg btn-outline-primary mb-2">{% trans %}Choisir{% endtrans %}</button></li>
  119.                             <li class="month">
  120.                                 {%  if prices[0].amount == 1 %}
  121.                                     {% trans %}prélevés tous les mois{% endtrans %}<br/><br/>
  122.                                 {% else %}
  123.                                     {{ prices[0].price }}{% trans with {'%nb%' : prices[0].amount} %}prélevés<br/>tous les %nb% mois{% endtrans %}   
  124.                                 {% endif %}
  125.                             </li>
  126.                         </ul>
  127.                     </div>
  128.                 </div>
  129.             </div>
  130.             <div class="col">
  131.                 <div class="card mb-4 rounded-3 shadow-sm border-primary">
  132.                     <div class="card-header py-3">
  133.                         <h4 class="my-0 fw-normal">{% trans %}Semestriel{% endtrans %}</h4>
  134.                     </div>
  135.                     <div class="card-body">
  136.                         <h1 class="card-title pricing-card-title">{{ (prices[1].priceMonth ~ '&nbsp;' ~ prices[1].currency) |pricetag(prices[1].countryCode)|raw }}<small class="text-muted fw-light fs-5">{% trans %}/mois{% endtrans %}</small></h1>
  137.                         <ul class="list-unstyled mt-2 mb-2">
  138.                             <li class="subText">{% trans %}au lieu de{% endtrans %} {{ (prices[0].basePriceMonth ~ '&nbsp;' ~ prices[0].currency) |pricedisplay()|raw }}{% trans %}/mois{% endtrans %}</li>
  139.                             <li>&nbsp;</li>
  140.                             <li><button type="button"id="choice2" class="choose w-75 btn btn-lg btn-primary mb-2">{% trans %}Choisir{% endtrans %}</button></li>
  141.                             <li class="month">{{ (prices[1].price ~ '&nbsp;' ~ prices[1].currency)|raw }} {% trans with {'%nb%' : prices[1].amount} %}prélevés<br/>tous les %nb% mois{% endtrans %}</li>
  142.                         </ul>
  143.                     </div>
  144.                 </div>
  145.             </div>
  146.         </div>
  147.     </form>
  148. </main>
  149. <div class="text-center my-2">
  150.     *
  151.     {% if displayReduction %}
  152.         {% trans with {'%reduction%' : montantReduction, '%code%' : codeReduction} %}Vous bénéficiez actuellement de <span class="orange"><b>%reduction%%%</b></span> de réduction grâce au code promo <span class="orange">%code%</span>.{% endtrans %}
  153.     {% else %}
  154.         {% if "now"|date('z') < 31 %}
  155.             {{ (('tunnel-promo-1')|trans({'%reduction%' : '<span class="orange"><b>30%</b></span>'}))|raw }}
  156.         {% elseif "now"|date('z') < 74 %}
  157.             {{ (('tunnel-promo-2')|trans({'%reduction%' : '<span class="orange"><b>30%</b></span>'}))|raw }}
  158.         {% elseif "now"|date('z') < 166 %}
  159.             {{ (('tunnel-promo-3')|trans({'%reduction%' : '<span class="orange"><b>30%</b></span>'}))|raw }}
  160.         {% elseif "now"|date('z') < 226 %}
  161.             {{ (('tunnel-promo-4')|trans({'%reduction%' : '<span class="orange"><b>30%</b></span>'}))|raw }}
  162.         {% elseif "now"|date('z') < 272 %}
  163.             {{ (('tunnel-promo-5')|trans({'%reduction%' : '<span class="orange"><b>30%</b></span>'}))|raw }}
  164.         {% elseif "now"|date('z') < 333 %}
  165.             {{ (('tunnel-promo-6')|trans({'%reduction%' : '<span class="orange"><b>30%</b></span>'}))|raw }}
  166.         {% else %}
  167.             {{ (('tunnel-promo-7')|trans({'%reduction%' : '<span class="orange"><b>30%</b></span>'}))|raw }}
  168.         {% endif %}
  169.     {% endif %}
  170.     <br/>
  171.     {% trans %}Le prix affiché tient compte de la réduction.{% endtrans %}
  172. </div>
  173. <br/>
  174. <br/>
  176. <div class="clearfix" style="width: 70%; margin: 0px auto;">
  177.     <form id="formPromoCode" action="{{ url(route) }}" method="post">
  178.         <div style="float:left; font-size: 12px; font-weight: bold; color: #4795CE; padding: 5px 10px 0px 0;">{% trans %}Utilisez un code promo :{% endtrans %}</div>
  179.         <input style="margin-top: 2px;" type="text" name="cp" />
  180.         <input type="submit" value="{% trans %}Ok{% endtrans %}" />
  181.     </form>
  182. </div>
  183. <br/>
  184. <br/>
  185. <br/>
  186. {% endblock %}