templates/index.html.twig line 1

1. {% extends 'base.html.twig' %}
2. {% block stylesheets %}
3.     {{ parent() }}
4.     <style>
5.         body {
6.             background:
7.                 linear-gradient(135deg, rgba(64, 123, 163, 0.06) 0%, rgba(193, 70, 82, 0.05) 30%, rgba(231, 131, 79, 0.05) 55%, transparent 75%),
8.                 repeating-linear-gradient(135deg, rgba(64, 123, 163, 0.04) 0, rgba(64, 123, 163, 0.04) 12px, transparent 12px, transparent 26px),
9.                 radial-gradient(circle at 18% 20%, rgba(64, 123, 163, 0.12), transparent 150px),
10.                 radial-gradient(circle at 78% 14%, rgba(193, 70, 82, 0.12), transparent 140px),
11.                 linear-gradient(180deg, #e0eaf5 0%, #cfd9e8 100%);
12.         }
13.         main.form-shell {
14.             padding-top: 20px;
15.             padding-bottom: 30px;
16.         }
17.     </style>
18. {% endblock %}
20. {% block body %}
21.     <main class="overflow-hidden">
22.         <div id="container-{{ (reviewForm.dimensions|length+1) }}" style="margin-top:100px">
23.             <div class="container">
24.                 <div class="wrapper">
25.                     <div class="row justify-content-center">
26.                         <div class="col-md-10 rating-reveal tab-100">
27.                             <div class="productRating ">
28.                                 <div class="d-flex justify-content-end mb-3 row">
29.                                     <div class="col-lg-10">
30.                                         <h1 class="ratingHead">
31.                                             <strong style="font-size:25px">{{ 'welcome_message'|trans }}</strong>
32.                                         </h1>
33.                                     </div>
34.                                     <div class="col-lg-2">
35.                                         <select class="form-control" style="margin-right: 5px;" name="langue" id="langue" onchange="changeLanguage(this.value)">
36.                                             <option value="fr" {% if app.session.get('_locale') == 'fr' %}selected{% endif %}>Français</option>
37.                                             <option value="nl" {% if app.session.get('_locale') == 'nl' %}selected{% endif %}>Nederlands</option>
38.                                             <option value="en" {% if app.session.get('_locale') == 'en' %}selected{% endif %}>English</option>
39.                                         </select>
40.                                     </div>
41.                                 </div>
43.                                 <p>
44.                                     <strong>L’Alignoscope ©</strong> est un outil conçu pour vous aider à <strong>faire le point</strong> sur votre situation professionnelle et mesurer à quel degré vous êtes <strong>en phase</strong> avec votre travail.<br>
45.                                     Nous avons réparti cet <strong>alignement</strong> en <strong>huit dimensions</strong> (par exemple : Sens, Identité, Émotions…) et il y aura donc 8 pages de questionnaire.<br>
46.                                     <br>Pour <strong>chacune</strong> de ces huit dimensions, vous répondrez à :
47.                                         <ol>
48.                                             <li><strong>Deux sous-dimensions</strong> (ou aspects) spécifiques</li>
49.                                             <li><strong>Une question globale</strong> qui résume la dimension dans son ensemble</li>
50.                                         </ol>
51.                                 </p>
52.                                     Pour chaque question, vous donnerez :<br>
53.                                 <ul>
54.                                     <li>Un <strong>score actuel</strong> (votre perception aujourd’hui)</li>
55.                                     <li>Un <strong>score désiré</strong> (ce que vous visez ou souhaitez atteindre)</li>
56.                                 </ul>
57.                                 <strong>Astuce :</strong> Prenez le temps de réfléchir à chaque réponse, car c’est <strong>votre sincérité</strong> qui permettra d’obtenir un rapport <strong>utile</strong> et <strong>fiable</strong>.<br><br>
58.                                 <strong>Durée :</strong> L’ensemble de ces petits questionnaires se complète généralement en <strong>10 à 15 minutes</strong>. Il n’y a aucune <strong>bonne ou mauvaise réponse</strong> : l’important est d’être <strong>honnête</strong> avec vous-même.
59.                                 </p>
61.                                 <p>
62.                                 Une fois terminé, vous recevrez un <strong>rapport</strong> faisant le bilan de vos scores et vous proposant des <strong>observations</strong> et <strong>conseils</strong> adaptés.<br>
63.                                 Si vous souhaitez <strong>aller plus loin</strong> ou être <strong>accompagné(e)</strong> dans votre démarche pour vous rapprocher de votre alignement idéal,
64.                                 <a href="">contactez-nous</a> !<br><br>
65.                                 <strong>Bonne découverte avec votre Alignoscope !</strong>
66.                                 </p>
68.                                 {# <div class="container mt-4">
69.                                     <div class="row">
70.                                         {% for dimension in reviewForm.dimensions %}
71.                                             <div class="col-md-6 d-flex flex-row align-items-center">
72.                                                 <article class="d-flex flex-row align-items-start">
73.                                                     <img style="max-width: 80px; margin-right: 15px;" src="/assets/images/dimensions/{{ dimension.icon }}">
74.                                                     <div class="d-flex flex-column justify-content-center m-3">
75.                                                         <h2 style="font-size:20px">{{ dimension.name }}</h2>
76.                                                     </div>
77.                                                 </article>
78.                                             </div>
79.                                         {% endfor %}
80.                                     </div>
81.                                 </div> #}
82.                                 <button id="sub" class="submit mt-4" type="button" onclick="location.href='/form/' + getLanguage() + '/8b6cf598-7f27-11ef-9d7f-1d1f43f3f908'">C'est parti !</button>
83.                             </div>
84.                         </div>
85.                     </div>
86.                 </div>
87.             </div>
88.         </div>
89.     </main>
90. {% endblock %}
92. {% block javascripts %}
93.     {{ parent() }}
94.     <script>
95.         $(document).ready(function () {
96.             // Ajoutez ici le code JavaScript pour gérer les interactions si nécessaire.
97.         });
99.         function getLanguage() {
100.             return document.getElementById('langue').value;
101.         }
103.         function changeLanguage(language) {
104.             window.location.href = '/change-langage/' + language;
105.         }
106.     </script>
107. {% endblock %}