templates/tunnel_gift/choose.html.twig line 1

  1. {% extends 'base.html.twig' %}
  2. {% trans_default_domain "tunnel" %}
  4. {% block title %}{% trans %}Offrir SpeakyPlanet{% endtrans %} | {% trans %}SpeakyPlanet{% 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 %}Offrir SpeakyPlanet{% endtrans %}</li>
  10.   </ol>
  11. </nav>
  12. {% endblock %}
  14. {% block pageTitle %}{% trans %}Offrir SpeakyPlanet{% endtrans %}{% endblock %}
  16. {% block body %}
  17. <script type="text/javascript">
  18. <!--
  19.     $(document).ready(function() {
  20.         $('#subscriptionChoices button.choose').click(function () {
  21.             $('#subscriptionChoices .spForm #fChoice').val($(this).attr('id'));
  22.             $('#subscriptionChoices .spForm').submit();
  23.             return false;
  24.         });
  25.     });
  26. -->
  27. </script>
  28. <style>
  29.     #guest_nav {
  30.         display: none;
  31.     }
  32.     
  33.     .pricing-header h1 {
  34.         font-weight: bold;
  35.         color: #f26528;
  36.         text-transform: uppercase;
  37.         line-height: 1.2em;
  38.     }
  40.     .pricing-header h3 {
  41.         font-weight: bold;
  42.         font-size: 1.17em;
  43.     }
  45.     .col .card-header {
  46.         border: none;
  47.         background-color: #A8D4E6;
  48.     }
  50.     .col .card {
  51.         border-color: #A8D4E6;
  52.         border-radius: 0.3rem!important;
  53.         border-width: thick;
  54.     }
  56.     .col .card .card-header h4 {
  57.         color: #FFFFFF !important;
  58.         font-weight: bold !important;
  59.     }
  61.     .col .card.border-primary {
  62.         border-color: #F28431 !important;
  63.     }
  65.     .col .card.border-primary .card-header {
  66.         background-color: #F28431 !important;
  67.     }
  69.     .col .card button{
  70.         border: 1px solid #F28431 !important;
  71.         background-color: #F28431 !important;
  72.         font-weight: bold;
  73.         color: #FFFFFF;
  74.     }
  76.     .col .card button:hover{
  77.         background-color: #FFFFFF !important;
  78.         color: #F28431;
  79.     }
  81.     .col .card .subText {
  82.         font-weight: bold;
  83.         color: #F28431;
  84.     }
  86.     .col .card .month{
  87.         font-size: 0.8em;
  88.         font-weight: bold;
  89.         color: #4C4E66;
  90.         width: 90%;
  91.     }
  92. </style>
  94. <header>
  95.     <div class="my-4">
  96.         <strong>{% trans %}Vous cherchez une idée cadeau ?{% endtrans %}</strong><br/>
  97.         {% trans %}Offrez un abonnement SpeakyPlanet à la personne de votre choix :{% endtrans %} <br/>
  98.         {% trans %}pour votre fils, votre fille, un copain, une copine, un petit-fils…{% endtrans %}<br/><br/>
  99.         
  100.         <div class="clearfix"></div>
  101.         <div class="bloc_gift orange" style="">
  102.             <strong class="subscribeMessage">{% trans %}Pourquoi offrir un abonnement SpeakyPlanet ?{% endtrans %}</strong>
  103.             <br/><br/>
  104.             <div>
  105.                 <img alt="Accès illimité - SpeakyPlanet" src="{{ asset('images/tunnel_gift/01.jpg') }}" width="93" height="45">
  106.                 <span style="">{% trans with {'%nb%': 200} %}<strong>Accès illimité</strong> à plus de %nb% jeux SpeakyPlanet{% endtrans %}</span>
  107.             </div>
  108.             <div>
  109.                 <img alt="Yes - SpeakyPlanet" src="{{ asset('images/tunnel_gift/02.jpg') }}" width="50" height="33">
  110.                 <span style="">{% trans with {'%nbWords%' : wordsNb} %}<strong>Plus de %nbWords% mots anglais</strong> à mémoriser en jouant{% endtrans %}</span>
  111.             </div>
  112.             <div>
  113.                 <img alt="Planète Speaky - SpeakyPlanet" src="{{ asset('images/tunnel_gift/03.jpg') }}" width="86" height="48">
  114.                 <span style="">{% trans %}Un tableau de bord personnalisé intitulé <strong>Ma Planète Speaky</strong> pour <strong>suivre ses progrès</strong>{% endtrans %}</span>
  115.             </div>
  116.             <div>
  117.                 <img alt="3 - SpeakyPlanet" src="{{ asset('images/tunnel_gift/04.jpg') }}" width="31" height="41">
  118.                 <span style="">{% trans %}<strong>Tous les mois, 3 nouveaux jeux</strong> spécialement conçus pour devenir bilingue en anglais !{% endtrans %}</span>
  119.             </div>
  120.         </div>
  121.         <br/><br/>
  122.         <span class="subscribeMessage"><i>{% trans %}L’abonnement débutera dès que l'enfant se sera inscrit sur SpeakyPlanet (aucune journée de perdue !){% endtrans %}</i></span>
  123.         <br/><br/>
  124.         <span class="subscribeMessage">{% trans %}Pour commencer, choisissez votre abonnement-cadeau :{% endtrans %} </span>
  125.     </div>
  126. </header>
  127. <main id="subscriptionChoices">
  128.     <form class="spForm" method="POST" action="{{ url('tunnel_gift_register') }}" novalidate >
  129.         <input id="fChoice" type="hidden" name="subscription" value="{{ choice }}" />
  130.         {%  if not isPromoUrl %}
  131.             <div class="row row-cols-1 row-cols-md-4 mb-3 justify-content-evenly text-center">
  132.                 <div class="col">
  133.                     <div class="card mb-4 mt-4 rounded-3 shadow-sm">
  134.                         <div class="card-header py-3">
  135.                             <h4 class="my-0 fw-normal">{{ prices[0].amount }} {{ "string.months"|trans({'%count%': prices[0].amount}) }}</h4>
  136.                         </div>
  137.                         <div class="card-body">
  138.                             <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>
  139.                             <ul class="list-unstyled mt-3 mb-4">
  140.                                 <li>&nbsp;</li>
  141.                                 <li><button type="button"id="choice1" class="choose w-100 btn btn-lg btn-outline-primary mb-2">{% trans %}Choisir{% endtrans %}</button></li>
  142.                                 <li class="month">
  143.                                     {% trans %}prélèvement unique de{% endtrans %} {{ (prices[0].price ~ '&nbsp;' ~ prices[0].currency)|raw }}
  144.                                 </li>
  145.                             </ul>
  146.                         </div>
  147.                     </div>
  148.                 </div>
  149.                 <div class="col">
  150.                     <div class="card mb-4 mt-4 rounded-3 shadow-sm">
  151.                         <div class="card-header py-3">
  152.                             <h4 class="my-0 fw-normal">{{ prices[1].amount }} {{ "string.months"|trans({'%count%': prices[1].amount}) }}</h4>
  153.                         </div>
  154.                         <div class="card-body">
  155.                             <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>
  156.                             <ul class="list-unstyled mt-3 mb-4">
  157.                                 <li>&nbsp;</li>
  158.                                 <li><button type="button"id="choice2" class="choose w-100 btn btn-lg btn-outline-primary mb-2">{% trans %}Choisir{% endtrans %}</button></li>
  159.                                 <li class="month">{% trans %}prélèvement unique de{% endtrans %} {{ (prices[1].price ~ '&nbsp;' ~ prices[1].currency)|raw }}</li>
  160.                             </ul>
  161.                         </div>
  162.                     </div>
  163.                 </div>
  164.                 <div class="col">
  165.                     <div class="card mb-4 rounded-3 shadow-sm border-primary">
  166.                         <div class="card-header py-3">
  167.                             <h4 class="my-0 fw-normal">{{ prices[2].amount }} {{ "string.months"|trans({'%count%': prices[2].amount}) }}</h4>
  168.                         </div>
  169.                         <div class="card-body">
  170.                         <br/>
  171.                             <h1 class="card-title pricing-card-title">{{ (prices[2].priceMonth ~ '&nbsp;' ~ prices[2].currency) |pricetag(prices[2].countryCode)|raw }} <small class="text-muted fw-light fs-5">{% trans %}/mois{% endtrans %}</small></h1>
  172.                             <ul class="list-unstyled mt-3 mb-4">
  173.                                 <li>&nbsp;</li>
  174.                                 <li><button type="button"id="choice3" class="choose w-100 btn btn-lg btn-primary mb-2">{% trans %}Choisir{% endtrans %}</button></li>
  175.                                 <li class="month">{% trans %}prélèvement unique de{% endtrans %} {{ (prices[2].price ~ '&nbsp;' ~ prices[2].currency)|raw }}</li>
  176.                             </ul>
  177.                         </div>
  178.                     </div>
  179.                 </div>
  180.                 <div class="col">
  181.                     <div class="card mb-4 mt-4 rounded-3 shadow-sm">
  182.                         <div class="card-header py-3">
  183.                             <h4 class="my-0 fw-normal">{{ prices[3].amount }} {{ "string.months"|trans({'%count%': prices[3].amount}) }}</h4>
  184.                         </div>
  185.                         <div class="card-body">
  186.                             <h1 class="card-title pricing-card-title">{{ (prices[3].priceMonth ~ '&nbsp;' ~ prices[3].currency) |pricetag(prices[3].countryCode)|raw }} <small class="text-muted fw-light fs-5">{% trans %}/mois{% endtrans %}</small></h1>
  187.                             <ul class="list-unstyled mt-3 mb-4">
  188.                                 <li>&nbsp;</li>
  189.                                 <li><button type="button"id="choice4" class="choose w-100 btn btn-lg btn-outline-primary mb-2">{% trans %}Choisir{% endtrans %}</button></li>
  190.                                 <li class="month">{% trans %}prélèvement unique de{% endtrans %} {{ (prices[3].price ~ '&nbsp;' ~ prices[3].currency)|raw }}</li>
  191.                             </ul>
  192.                         </div>
  193.                     </div>
  194.                 </div>
  195.             </div>
  196.         {% else %}
  197.             <div class="row row-cols-1 row-cols-md-3 mb-3 justify-content-evenly text-center">
  198.                 <div class="col">
  199.                     <div class="card mb-4 rounded-3 shadow-sm">
  200.                         <div class="card-header py-3">
  201.                             <h4 class="my-0 fw-normal">{% trans %}Mensuel{% endtrans %}</h4>
  202.                         </div>
  203.                         <div class="card-body">
  204.                             <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>
  205.                             <ul class="list-unstyled mt-2 mb-2">
  206.                                 <li>&nbsp;</li>
  207.                                 <li>&nbsp;</li>
  208.                                 <li><button type="button"id="choice1" class="choose w-75 btn btn-lg btn-outline-primary mb-2">{% trans %}Choisir{% endtrans %}</button></li>
  209.                                 <li class="month">
  210.                                     {% trans %}prélèvement unique de{% endtrans %} {{ (prices[0].price ~ '&nbsp;' ~ prices[0].currency)|raw }}
  211.                                 </li>
  212.                             </ul>
  213.                         </div>
  214.                     </div>
  215.                 </div>
  216.                 <div class="col">
  217.                     <div class="card mb-4 rounded-3 shadow-sm border-primary">
  218.                         <div class="card-header py-3">
  219.                             <h4 class="my-0 fw-normal">{% trans %}Semestriel{% endtrans %}</h4>
  220.                         </div>
  221.                         <div class="card-body">
  222.                             <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>
  223.                             <ul class="list-unstyled mt-2 mb-2">
  224.                                 <li class="subText">{% trans %}au lieu de{% endtrans %} {{ (prices[0].basePriceMonth ~ '&nbsp;' ~ prices[1].currency) |pricedisplay()|raw }}{% trans %}/mois{% endtrans %}</li>
  225.                                 <li>&nbsp;</li>
  226.                                 <li><button type="button"id="choice2" class="choose w-75 btn btn-lg btn-primary mb-2">{% trans %}Choisir{% endtrans %}</button></li>
  227.                                 <li class="month">{% trans %}prélèvement unique de{% endtrans %} {{ (prices[1].price ~ '&nbsp;' ~ prices[1].currency)|raw }}</li>
  228.                             </ul>
  229.                         </div>
  230.                     </div>
  231.                 </div>
  232.             </div>
  233.         {% endif %}
  234.     </form>
  235. </main>
  236. <div class="text-center my-2">
  237.     *
  238.     {% if displayReduction %}
  239.         {% 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 %}
  240.     {% else %}
  241.         {% if "now"|date('z') < 31 %}
  242.             {{ (('tunnel-promo-1')|trans({'%reduction%' : '<span class="orange"><b>30%</b></span>'}))|raw }}
  243.         {% elseif "now"|date('z') < 74 %}
  244.             {{ (('tunnel-promo-2')|trans({'%reduction%' : '<span class="orange"><b>30%</b></span>'}))|raw }}
  245.         {% elseif "now"|date('z') < 166 %}
  246.             {{ (('tunnel-promo-3')|trans({'%reduction%' : '<span class="orange"><b>30%</b></span>'}))|raw }}
  247.         {% elseif "now"|date('z') < 226 %}
  248.             {{ (('tunnel-promo-4')|trans({'%reduction%' : '<span class="orange"><b>30%</b></span>'}))|raw }}
  249.         {% elseif "now"|date('z') < 272 %}
  250.             {{ (('tunnel-promo-5')|trans({'%reduction%' : '<span class="orange"><b>30%</b></span>'}))|raw }}
  251.         {% elseif "now"|date('z') < 333 %}
  252.             {{ (('tunnel-promo-6')|trans({'%reduction%' : '<span class="orange"><b>30%</b></span>'}))|raw }}
  253.         {% else %}
  254.             {{ (('tunnel-promo-7')|trans({'%reduction%' : '<span class="orange"><b>30%</b></span>'}))|raw }}
  255.         {% endif %}
  256.     {% endif %}
  257.     <br/>
  258.     {% trans %}Le prix affiché tient compte de la réduction.{% endtrans %}
  259. </div>
  260. <br/>
  261. <br/>
  263. <div class="clearfix" style="width: 70%; margin: 0px auto;">
  264.     <form id="formPromoCode" action="{{ url('tunnel_gift_register') }}" method="post">
  265.         <div style="float:left; font-size: 12px; font-weight: bold; color: #4795CE; padding: 5px 10px 0px 0;">{% trans %}Utilisez un code promo :{% endtrans %}</div>
  266.         <input style="margin-top: 2px;" type="text" name="cp" />
  267.         <input type="submit" value="{% trans %}Ok{% endtrans %}" />
  268.     </form>
  269. </div>
  270. <br/>
  271. <br/>
  272. <br/>
  273. {% endblock %}