templates/page/audition_test_age.html.twig line 1

Open in your IDE?
  1. {% set currentPath = path(app.request.attributes.get('_route'),
  2.                        app.request.attributes.get('_route_params')) %}
  3. {% extends 'base.html.twig' %}
  5. {% block title %}Ween par Aviséa{% endblock %}
  7. {% block body %}
  8. <style>
  10. </style>
  11. <main role="main" class="background-audition" id="main" style="background: url('/img/background/audition-background.svg'); background-size: cover !important; background-color:#3270EC0D!important;">
  12.     <div id="content-audition" class="h-100">
  13.         {% if is_mobile() %}
  14.         <div class="container h-100 d-flex justify-content-center align-items-center pt-1">
  15.         <div class="row">
  16.             <div class="col-xs-12 text-center">
  17.                     <p class="text-smoke work-sans">Pour commencer</p>
  18.                     <h1 class="h3 work-sans-semi-bold text-graphite">Quel est votre âge ?</h1>
  19.             </div>
  20.             <div class="col-xs-12">
  21.                 <form action="{{path('app_audition_test_age', {'clientSlug': client.slug, 'id': clientProduct.id})}}" method="POST" class="mt-4 col-">
  22.                     <label for="age" class="radio-label mb-3">
  23.                         <input type="radio" name="age" value="Entre 18 et 30 ans" class="card-input-element-audition d-none">
  24.                         <div class="card card-body text-center rounded-0 rounded-top">
  25.                             <span class="text-center work-sans radio_diag">Entre 18 et 30 ans</span>
  26.                         </div>
  27.                     </label>
  28.                     <label for="age" class="radio-label mb-3">
  29.                         <input type="radio" name="age" value="Entre 30 et 45 ans" class="card-input-element-audition d-none">
  30.                         <div class="card card-body text-center rounded-0 rounded-top">
  31.                             <span class="text-center work-sans radio_diag">Entre 30 et 45 ans</span>
  32.                         </div>
  33.                     </label>
  34.                     <label for="age" class="radio-label mb-3">
  35.                         <input type="radio" name="age" value="Entre 45 et 60 ans" class="card-input-element-audition d-none">
  36.                         <div class="card card-body text-center rounded-0 rounded-top">
  37.                             <span class="text-center work-sans radio_diag">Entre 45 et 60 ans</span>
  38.                         </div>
  39.                     </label>
  40.                     <label for="age" class="radio-label mb-3">
  41.                         <input type="radio" name="age" value="Plus de 60 ans" class="card-input-element-audition d-none">
  42.                         <div class="card card-body text-center rounded-0 rounded-top">
  43.                             <span class="text-center work-sans radio_diag">Plus de 60 ans</span>
  44.                         </div>
  45.                     </label>
  46.                     <button id="submit-btn" type="submit" class="btn-notice w-100" style="display: none;">Continuer</button>
  48.                 </form>
  49.             </div>
  50.         </div>
  51.     </div>
  52.         {% else %}
  53.                 <div class="container h-100 d-flex justify-content-center align-items-center pt-1">
  54.             <div class="me-5">
  55.                 <p class="text-smoke work-sans">Pour commencer</p>
  56.                 <h1 class="h3 work-sans-semi-bold text-graphite">Quel est votre âge ?</h1>
  57.             </div>
  58.             <form action="{{path('app_audition_test_age', {'clientSlug': client.slug, 'id': clientProduct.id})}}" method="POST" class="w-25 ms-5">
  59.                 <label for="age" class="radio-label mb-3">
  60.                     <input type="radio" name="age" value="Entre 18 et 30 ans" class="card-input-element-audition d-none">
  61.                     <div class="card card-body text-center rounded-0 rounded-top">
  62.                         <span class="text-center work-sans radio_diag">Entre 18 et 30 ans</span>
  63.                     </div>
  64.                 </label>
  65.                 <label for="age" class="radio-label mb-3">
  66.                     <input type="radio" name="age" value="Entre 30 et 45 ans" class="card-input-element-audition d-none">
  67.                     <div class="card card-body text-center rounded-0 rounded-top">
  68.                         <span class="text-center work-sans radio_diag">Entre 30 et 45 ans</span>
  69.                     </div>
  70.                 </label>
  71.                 <label for="age" class="radio-label mb-3">
  72.                     <input type="radio" name="age" value="Entre 45 et 60 ans" class="card-input-element-audition d-none">
  73.                     <div class="card card-body text-center rounded-0 rounded-top">
  74.                         <span class="text-center work-sans radio_diag">Entre 45 et 60 ans</span>
  75.                     </div>
  76.                 </label>
  77.                 <label for="age" class="radio-label mb-3">
  78.                     <input type="radio" name="age" value="Plus de 60 ans" class="card-input-element-audition d-none">
  79.                     <div class="card card-body text-center rounded-0 rounded-top">
  80.                         <span class="text-center work-sans radio_diag">Plus de 60 ans</span>
  81.                     </div>
  82.                 </label>
  83.                 <button id="submit-btn" type="submit" class="btn-notice w-100" style="display: none;">Continuer</button>
  85.             </form>
  86.         </div>
  87.         {% endif %}
  88.     </div>
  89. </main>
  90. {% endblock %}
  91. {% block javascripts %}
  92. <script>
  93. $(document).ready(function () {
  94.     $("#content-audition").slideDown("slow");
  96.     var radioLabels = document.querySelectorAll('.radio-label');
  97.         radioLabels.forEach((label) => {
  98.             $(label).click(function () {
  99.                 $('#submit-btn').css('display', 'block');
  100.                 var input = label.children[0];
  101.                 input.checked = true;
  102.             });
  103.         })
  104.     $('#submit-btn').click(function (e) {
  105.         e.preventDefault();
  106.         var form = $('#submit-btn').closest('form')[0];
  107.         $('#content-audition').fadeOut('slow', function(){
  108.             form.submit();
  109.         });
  110.     });
  112. });
  113. </script>
  114. {% endblock %}