templates/tunnel/simple/register.html.twig line 1

  1. {% extends 'base.html.twig' %}
  2. {% trans_default_domain "tunnel" %}
  4. {% block title %}{% trans %}Informations personnelles{% endtrans %}{% endblock %}
  6. {% block breadcrumb %}
  7. <nav style="--bs-breadcrumb-divider: '>';" aria-label="breadcrumb">
  8.   <ol class="breadcrumb">
  9.     <li class="breadcrumb-item"><a href="#">{% trans %}Informations personnelles{% endtrans %}</a></li>
  10.   </ol>
  11. </nav>
  12. {% endblock %}
  14. {% block body %}
  15. <script type="text/javascript">
  16. <!--
  17. $(document).ready(function() {
  18.     $('#form #form_save').click(function () {
  19.       {# fbq('track', 'CompleteRegistration'); #}
  20.       $('#subscriptionChoices form').submit();
  21.       return false;
  22.     });
  23.     const cguModal = document.getElementById('cguModal')
  24.     cguModal.addEventListener('show.bs.modal', event => {
  25.         $.get('{{ url('tunnel_cg', {'locale': app.request.locale}) }}',
  26.     function(data) {
  27.         const modalBody = cguModal.querySelector('.modal-body');
  28.                 modalBody.innerHTML = data;
  29.   });
  30.   return false;
  31.     });
  33.     if (/Android|iPhone/i.test(navigator.userAgent)) {
  34.       $('#testWarning').show();
  35.       console.log('smartphone');
  36.     } else {
  37.       $('#testWarning').hide();
  38.       console.log('pc');
  39.     }
  40. });
  41. -->
  42. </script>
  44. <style>
  46.     #guest_nav {
  47.         display: none;
  48.     }
  50.     .acceptCGU {
  51.         color: #4c4e66;
  52.         font-family: Verdana;
  53.         font-size: 11px;
  54.     }
  55.     ul.mixColors {
  56.         list-style: none; /* Remove HTML bullets */
  57.         padding: 0;
  58.         margin: 0;
  59.     }
  60.     
  61.     ul.mixColors li:nth-child(even)::before {
  62.         color: #F26528;
  63.     }
  64.     
  65.     ul.mixColors li::before {
  66.         content: "•";
  67.         color: #30AADE;
  68.         font-size: 1.3em;
  69.         padding: 0 8px 0 0;
  70.     }
  71.     
  72.     ul.mixColors li {
  73.         margin: 10px 0;
  74.         font-size: 1.4em;
  75.     }
  76.     
  77. </style>
  79. <header>
  80. </header>
  81. <main id="subscriptionChoices">
  82.   <div class="message my-5" style="font-weight: bold;text-align: center;font-size: 21px;">
  83.     
  84.     <span style="color:#4C4E66;font-size: 23px;">{% trans %}Testez SpeakyPlanet gratuitement{% endtrans %}</span><br/>
  85.     <span style="color:#f26528">{% trans %}Uniquement sur Ordinateur{% endtrans %}</span>
  86.   </div>
  87.   <div id="testWarning" class="my-5 text-break" style="display: none;">
  88.     <ul class="mixColors">
  89.       <li>Le test gratuit est accessible uniquement sur ordinateur</li>
  90.       <li>Veuillez vous munir d'un ordinateur et vous rendre sur {{ url('tunnel_simple_register', {}) }}</li>
  91.       <li>Si vous décidez de vous abonner ensuite, vous pourrez accéder à SpeakyPlanet sur ordinateur, tablette et smartphone</li>
  92.     </ul>
  93.   </div>
  94.   <div class="row justify-content-between">
  95.     <div class="col-md-8 col-lg-6">
  96.     {#{{ form(form, {'translation_domain': 'tunnel'}) }}#} 
  97.       {{ form_start(form) }}
  99.         {{ form_row(form.username) }}
  100.         {{ form_row(form.email) }}
  101.         {{ form_row(form.plainPassword) }}
  102.         <div class="acceptCGU fst-italic">
  103.           <span>
  104.             {% trans %}En cliquant sur "J'inscris mon enfant", j'accepte les{% endtrans %} <a href="#" data-bs-toggle="modal" data-bs-target="#cguModal">{% trans %}conditions générales d’utilisation{% endtrans %}</a>.
  105.           </span>
  106.         </div>
  107.         <br/>
  108.         {{ form_row(form.submit, {}) }}
  109.       {{ form_end(form) }}
  110.     </div>
  111.     <div class="col-md-4 col-sm-12 text-center">
  112.       <img class="" src="{{ asset('images/default/confirmationSpeaky.jpg') }}" alt="">
  113.       <hr class="my-2 w-75 m-auto" />
  114.       Déjà inscrit ? <a href="{{ path('app_login', {}) }}" class="">{% trans %}Connectez-vous{% endtrans %}</a>
  115.       <br/>
  116.       <br/>
  117.       <br/>
  118.     </div>
  119.   </div>
  120. </main>
  122. <!-- Modal -->
  123. <div class="modal fade" id="cguModal" tabindex="-1" aria-labelledby="cguModalLabel" aria-hidden="true">
  124.     <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable modal-lg">
  125.         <div class="modal-content">
  126.             <div class="modal-header">
  127.                 <h5 class="modal-title" id="cguModalLabel">{% trans %}conditions générales de vente{% endtrans %}</h5>
  128.                 <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
  129.             </div>
  130.             <div class="modal-body">
  131.                 <div class="spinner-border text-info" role="status">
  132.                     <span class="visually-hidden">Loading...</span>
  133.                 </div>
  134.             </div>
  135.             <div class="modal-footer">
  136.                 <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{% trans %}Continuer{% endtrans %}</button>
  137.             </div>
  138.         </div>
  139.     </div>
  140. </div>
  141. {% endblock %}