templates/index.html.twig line 1

1. {% extends 'base.html.twig' %}
2. {% block body %}
3.     <main class="overflow-hidden">
4.         <div id="container-{{ (reviewForm.dimensions|length+1) }}" style="margin-top:100px">
5.             <div class="container">
6.                 <div class="wrapper">
7.                     <div class="row justify-content-center">
8.                         <div class="col-md-9 rating-reveal tab-100">
9.                             <div class="productRating text-center">
10.                                 <div class="d-flex justify-content-end mb-3">
11.                                     <div class="col-lg-2">
12.                                         <select class="form-control" style="margin-right: 5px;" name="langue" id="langue" onchange="changeLanguage(this.value)">
13.                                             <option value="fr">Français</option>
14.                                             <option value="nl">Nederlands</option>
15.                                             <option value="en">English</option>
16.                                         </select>
17.                                     </div>
18.                                 </div>
19.                                 <h1 class="ratingHead">
20.                                     <strong style="font-size:25px">Bienvenue sur notre formulaire Alignoscope !</strong>
21.                                 </h1>
22.                                 <p style="font-size: 18px; margin-top: 20px;">
23.                                     L'Alignoscope est un outil d'introspection qui vous permettra d'évaluer à quel point vous êtes aligné avec votre activité professionnelle. 
24.                                     Cet outil est composé de <strong>8 dimensions</strong>, chacune présentant deux aspects différents.<br> 
25.                                     Vous devrez fournir deux scores pour chaque dimension : un score pour votre situation actuelle et un pour l'objectif que vous aimeriez atteindre.
26.                                 </p>
27.                                 <p style="font-size: 18px; margin-top: 20px;">
28.                                     À la fin, un <strong>rapport</strong> sera généré, et si vous souhaitez aller plus loin dans la réflexion ou obtenir de l'aide pour vous rapprocher de cet alignement souhaité, n'hésitez pas à <a href="">nous contacter</a>.
29.                                 </p>
30.                                 
31.                                 <div class="container mt-4">
32.                                     <div class="row">
33.                                         {% for dimension in reviewForm.dimensions %}
34.                                             <div class="col-md-6 d-flex flex-row align-items-center">
35.                                                 <article class="d-flex flex-row align-items-start">
36.                                                     <img style="max-width: 80px; margin-right: 15px;" src="/assets/images/dimensions/{{ dimension.icon }}">
37.                                                     <div class="d-flex flex-column justify-content-center m-3">
38.                                                         <h2 style="font-size:20px">{{ dimension.name }}</h2>
39.                                                     </div>
40.                                                 </article>
41.                                             </div>
42.                                         {% endfor %}
43.                                     </div>
44.                                 </div>
45.                                 <button id="sub" class="submit mt-4" type="button" onclick="location.href='/form/fr/8b6cf598-7f27-11ef-9d7f-1d1f43f3f908'">C'est parti !</button>
46.                             </div>
47.                         </div>
48.                     </div>
49.                 </div>
50.             </div>
51.         </div>
52.     </main>
53. {% endblock %}
55. {% block javascripts %}
56.     {{ parent() }}
57.     <script>
58.         $(document).ready(function () {
59.             // Ajoutez ici le code JavaScript pour gérer les interactions si nécessaire.
60.         });
61.     </script>
62. {% endblock %}