templates/index.html.twig line 1

1. {% extends 'base.html.twig' %}
2. {% block body %}
3.     <main class="overflow-hidden">
4.         {% for dimension in reviewForm.dimensions %}
5.             <div id="container-{{ dimension.sorting }}"
6.                  style="
7.                  {% if not loop.first %}
8.                          display:none
9.                  {% endif %}
10.                          "
11.             >
12.                
13.                 <div class="logo">
14.                     <article class="mainTxt d-flex flex-row just">
15.                         <img style="max-height: 100px" src="/assets/images/dimensions/{{ dimension.icon }}">
16.                         <div class=" d-flex flex-column justify-content-between">
17.                             <span class="tag">Dimension {{ dimension.sorting }}</span>
18.                             <h1>{{ dimension.name }}</h1>
19.                         </div>
20.                     </article>
21.                 </div>
22.             
23.                 <div class="container">
24.                     <div class="wrapper">
25.                         <div class="row">
26.                             {% for question in dimension.questions %}
27.                                 <div class="col-md-4 rating-reveal tab-100">
28.                                     <div class="productRating">
29.                                         <h2 class="ratingHead">{{ question.name }}</h2>
30.                                         <div class="ratingBar">
31.                                             <div class="rangeNumber">
32.                                                 <span class="number active">0</span>
33.                                                 <span class="number">1</span>
34.                                                 <span class="number">2</span>
35.                                                 <span class="number">3</span>
36.                                                 <span class="number">4</span>
37.                                                 <span class="number">5</span>
38.                                                 <span class="number">6</span>
39.                                                 <span class="number">7</span>
40.                                                 <span class="number">8</span>
41.                                                 <span class="number">9</span>
42.                                                 <span class="number">10</span>
43.                                             </div>
44.                                             <input type="range" class="bar" name="bar" id="bar1" min="0" max="10"
45.                                                    value="0"
46.                                                    step="0.01">
47.                                             <div class="likeThumb">
48.                                                 <div class="thumbsingle">
49.                                                     <img src="/assets/images/thumbDown.png" alt="thumb">
50.                                                     <p>Aucunement</p>
51.                                                 </div>
52.                                                 <div class="thumbsingle">
53.                                                     <p>Tout-à-fait</p>
54.                                                     <img src="/assets/images/thumbUp.png" alt="thumb">
55.                                                 </div>
56.                                             </div>
57.                                         </div>
58.                                     </div>
59.                                 </div>
60.                             {% endfor %}
61.                         </div>
63.                         <div class="row">
64.                             <div class="col-md-2 rating-reveal tab-100">
65.                                 {% if not loop.first %}
66.                                     <button id="sub" class="submit" type="button"
67.                                             onclick="changeDiv({{ dimension.sorting }}, -1)">Previous
68.                                     </button>
69.                                 {% endif %}
70.                             </div>
71.                             <div class="col-md-2 rating-reveal tab-100">
72.                             </div>
73.                             <div class="col-md-4 rating-reveal tab-100">
74.                             </div>
75.                             <div class="col-md-2 rating-reveal tab-100">
76.                             </div>
77.                             <div class="col-md-2 rating-reveal tab-100">
78.                                 <button id="sub" class="submit" type="button"
79.                                         onclick="changeDiv({{ dimension.sorting }}, 1)">Next
80.                                 </button>
81.                             </div>
82.                         </div>
83.                     </div>
84.                 </div>
85.             </div>
86.         {% endfor %}
88.         <div id="container-{{ (reviewForm.dimensions|length+1) }}" style="display:none;margin-top:100px">
89.             
90.             <div class="container">
91.                 <div class="wrapper">
92.                     <div class="row justify-content-center">
93.                         <div class="col-md-6 rating-reveal tab-100">
94.                             <div class="productRating">
95.                                 <h1 class="ratingHead"><strong style="font-size:25px">Merci d'avoir répondu à notre formulaire !</strong><br><br> Completez vos informations pour recevoir le résultat par email :</h1>
96.                                 <label class="inputLabel">Nom*</label>
97.                                 <input class="input-text" name="name" id="maesage"
98.                                        placeholder="John Doe"/>
99.                                 <label class="inputLabel">Email*</label>
100.                                 <input class="input-text" name="email" id="email"
101.                                        placeholder="john.doe@gmail.com"/>
102.                                 <label class="inputLabel">Message</label>
103.                                 <textarea name="message" id="maesage"
104.                                           placeholder="Donnez nous un feedback sur votre expérience..."></textarea>
105.                                 <button id="sub" class="submit" type="button">Envoyer</button>
106.                             </div>
107.                         </div>
108.                      
109.                     </div>
110.                 </div>
111.             </div>
112.         </div>
113.     </main>
114. {% endblock %}
115. {% block javascripts %}
116.     {{ parent() }}
117.     <script>
118.         $(document).ready(function () {
119.             $(".bar").each(function () {
120.                 var slider = $(this)[0];  // Récupérer l'élément DOM correspondant
122.                 slider.oninput = function () {
123.                     var value = (this.value - this.min) / (this.max - this.min) * 100;
124.                     this.style.background = 'linear-gradient(to right, var(--primary-color) 0%, var(--primary-color) ' + value + '%, var(--secondary-color) ' + value + '%, var(--secondary-color) 100%)';
126.                     var activeIndex = Math.trunc(this.value - this.min);
127.                     $(this).siblings('.rangeNumber').find('.number').removeClass('active');
128.                     $(this).siblings('.rangeNumber').find('.number').eq(activeIndex).addClass('active');
130.                     if (activeIndex < 4) {
131.                         $(this).siblings('.likeThumb').find('.thumbsingle').removeClass('shake');
132.                         $(this).siblings('.likeThumb').find('.thumbsingle').eq(0).addClass('shake');
133.                     } else if (activeIndex > 4) {
134.                         $(this).siblings('.likeThumb').find('.thumbsingle').removeClass('shake');
135.                         $(this).siblings('.likeThumb').find('.thumbsingle').eq(1).addClass('shake');
136.                     }
137.                 };
138.             });
139.         });
141.         function changeDiv(container, step) {
142.             console.log("changeDiv");
143.             console.log(container);
144.             console.log(step);
145.             console.log(container + step);
146.             $('#container-' + container).hide();
147.             $('#container-' + (container + step)).show();
148.         }
150.     </script>
151. {% endblock %}