templates/Commande/visio.html.twig line 1

Open in your IDE?
  1. {% extends "layout.html.twig" %}
  2. {% block classHome %} class="home"{% endblock %}
  3. {% block contenu %}
  4.     <div class="app_commande_visio bg-curve-500">
  6.         {% include 'Commande/subheader.html.twig' %}
  7.         <section class="step1">
  8.             <div class="title">Vos Informations</div>
  9.             {{ form_start(form, {attr:{'class': 'forms' }}) }}
  10.                 <div class="names">
  11.                     <div class="name first">
  12.                         <label for="firstname">Nom <span class="red">*</span></label>
  13.                         {{ form_widget(form.nom) }}
  14.                     </div>
  15.                     <div class="name last">
  16.                         <label for="firstname">Prénom <span class="red">*</span></label>
  17.                         {{ form_widget(form.prenom) }}
  18.                     </div>
  19.                 </div>
  20.                 <div class="number">
  21.                     <label for="phone">Numéro de téléphone <span class="red">*</span></label>
  22.                     {{ form_widget(form.tel) }}
  23.                 </div>
  24.                 <div class="email">
  25.                     <label for="email">Email <span class="red">*</span></label>
  26.                     {{ form_widget(form.email) }}
  27.                 </div>
  28.                 <div class="gender">
  29.                     <label for="sexe">Sexe <span class="red">*</span></label>
  30.                     {{ form_widget(form.sexe) }}
  31.                 </div>
  32.                 <div class="ages">
  33.                     <label for="age">Âge <span class="red">*</span></label>
  34.                     {{ form_widget(form.age) }}
  35.                 </div>
  36.                 <div class="btns">
  37.                     <div class="btn-text">
  38.                         <div class="btn-title">Pourquoi ces informations ?</div>
  39.                         <div class="btn-desc">Afin de permettre la meilleure prise en charge pour votre consultation.</div>
  40.                         <div class="btn-desc">En cliquant sur « Passer à l'étape suivante » vous acceptez nos <a href="{{ URL_URGD }}/fr/conditions-generales">CGV</a> ainsi que nos <a href="{{ URL_URGD }}/fr/conditions-generales">CGU</a>.</div>
  42.                     </div>
  43.                     <button data-loading-text="En cours de chargement..." id="submit-button" class="submit-button" type="submit" style="border: none" onclick="sendEvent()">
  44.                         <div class="button">
  45.                             <div class="text">Passer à l’étape suivante</div>
  46.                             <span class="material-icons">
  47.                                 arrow_right_alt
  48.                             </span>
  49.                         </div></button>
  51.                 </div>
  52.                 <div class="status">
  53.                     <div class="step">Étape 1/3</div>
  54.                     <div class="bar">
  55.                         <div class="b1"></div>
  56.                     </div>
  57.                 </div>
  58.             {{ form_end(form) }}
  59.         </section>
  61.     </div>
  63.     {#    <div class="visio">#}
  64. {#        <div class="teleconsultation">#}
  65. {#            <section class="sub-header">#}
  66. {#                <div class="warning">#}
  67. {#                    <span class="material-icons">#}
  68. {#                        warning_amber#}
  69. {#                    </span>#}
  70. {#                    <div class="text">Attention ! En cas d'urgence absolue, appelez le <span>SAMU (15)</span></div>#}
  71. {#                </div>#}
  72. {#                <div class="select">#}
  73. {#                    <div class="desc">Prise de rendez-vous</div>#}
  74. {#                    <div class="selection">#}
  75. {#                        <div class="btn btn1">#}
  76. {#                            <div class="text">Médecin à domicile</div>#}
  77. {#                        </div>#}
  78. {#                        <div class="btn btn2">#}
  79. {#                            <div class="text">Téléconsultation</div>#}
  80. {#                        </div>#}
  81. {#                    </div>#}
  82. {#                </div>#}
  83. {#                <div class="title">Un médecin en téléconsultation, en quelques clics</div>#}
  84. {#            </section>#}
  85. {#            <section class="information-form">#}
  86. {#                <div class="title">Vos Informations</div>#}
  87. {#                <form class="forms">#}
  88. {#                    <div class="names">#}
  89. {#                        <div class="name first">#}
  90. {#                            <label for="firstname">Nom <span class="red">*</span></label>#}
  91. {#                            <input type="text" id="firstname" placeholder="Nom" required/>#}
  92. {#                        </div>#}
  93. {#                        <div class="name last">#}
  94. {#                            <label for="firstname">Prénom <span class="red">*</span></label>#}
  95. {#                            <input type="text" id="lastname" placeholder="Prénom" required/>#}
  96. {#                        </div>#}
  97. {#                    </div>#}
  98. {#                    <div class="number">#}
  99. {#                        <label for="phone">Numéro de téléphone <span class="red">*</span></label>#}
  100. {#                        <input type="number" id="phone" placeholder=""required/>#}
  101. {#                    </div>#}
  102. {#                    <div class="email">#}
  103. {#                        <label for="email">Email <span class="red">*</span></label>#}
  104. {#                        <input type="email" id="email" placeholder="votreadressemail@mail.com" required/>#}
  105. {#                    </div>#}
  106. {#                    <div class="gender">#}
  107. {#                        <label for="sexe">Sexe <span class="red">*</span></label>#}
  108. {#                        <select id="sexe" required>#}
  109. {#                            <option></option>#}
  110. {#                            <option></option>#}
  111. {#                        </select>#}
  112. {#                    </div>#}
  113. {#                    <div class="ages">#}
  114. {#                        <label for="age">Âge <span class="red">*</span></label>#}
  115. {#                    </div>#}
  116. {#                    <div class="btns">#}
  117. {#                        <div class="btn-text">#}
  118. {#                            <div class="btn-title">Pourquoi ces infos ?</div>#}
  119. {#                            <div class="btn-desc">Afin de permettre la meilleure prise en charge pour votre consultation.</div>#}
  120. {#                        </div>#}
  121. {#                        <div class="button">#}
  122. {#                            <div class="text">Passer à l’étape suivante</div>#}
  123. {#                            <span class="material-icons">#}
  124. {#                                arrow_right_alt#}
  125. {#                            </span>#}
  126. {#                        </div>#}
  127. {#                    </div>#}
  128. {#                    <div class="status">#}
  129. {#                        <div class="step">Étape 1/3</div>#}
  130. {#                        <div class="bar">#}
  131. {#                            <div class="b1"></div>#}
  132. {#                        </div>#}
  133. {#                    </div>#}
  134. {#                </form>#}
  135. {#            </section>#}
  136. {#        </div>#}
  138. {#        <div class="medecin">#}
  139. {#            <section class="sub-header">#}
  140. {#                <div class="warning">#}
  141. {#                    <span class="material-icons">#}
  142. {#                        warning_amber#}
  143. {#                    </span>#}
  144. {#                    <div class="text">Attention ! En cas d'urgence absolue, appelez le <span>SAMU (15)</span></div>#}
  145. {#                </div>#}
  146. {#                <div class="select">#}
  147. {#                    <div class="desc">Prise de rendez-vous</div>#}
  148. {#                    <div class="selection">#}
  149. {#                        <div class="btn btn1">#}
  150. {#                            <div class="text">Médecin à domicile</div>#}
  151. {#                        </div>#}
  152. {#                        <div class="btn btn2">#}
  153. {#                            <div class="text">Téléconsultation</div>#}
  154. {#                        </div>#}
  155. {#                    </div>#}
  156. {#                </div>#}
  157. {#                <div class="title">Un médecin à domicile, où que vous soyez</div>#}
  158. {#            </section>#}
  159. {#            <section class="information-form">#}
  160. {#                <div class="title">Vos Informations</div>#}
  161. {#                <form class="forms">#}
  162. {#                    <div class="names">#}
  163. {#                        <div class="name first">#}
  164. {#                            <label for="firstname">Nom <span class="red">*</span></label>#}
  165. {#                            <input type="text" id="firstname" placeholder="Nom" required/>#}
  166. {#                        </div>#}
  167. {#                        <div class="name last">#}
  168. {#                            <label for="firstname">Prénom <span class="red">*</span></label>#}
  169. {#                            <input type="text" id="lastname" placeholder="Prénom" required/>#}
  170. {#                        </div>#}
  171. {#                    </div>#}
  172. {#                    <div class="number">#}
  173. {#                        <label for="phone">Numéro de téléphone <span class="red">*</span></label>#}
  174. {#                        <input type="number" id="phone" placeholder="" required/>#}
  175. {#                    </div>#}
  176. {#                    <div class="email">#}
  177. {#                        <label for="email">Email <span class="red">*</span></label>#}
  178. {#                        <input type="email" id="email" placeholder="votreadressemail@mail.com" required/>#}
  179. {#                    </div>#}
  180. {#                    <div class="addresses">#}
  181. {#                        <div class="postal">#}
  182. {#                            <label for="code">Code postal <span class="red">*</span></label>#}
  183. {#                            <input type="number" id="code" placeholder="" required/>#}
  184. {#                        </div>#}
  185. {#                        <div class="adresse">#}
  186. {#                            <label for="street">Adresse <span class="red">*</span></label>#}
  187. {#                            <input type="text" id="street" placeholder="" required/>#}
  188. {#                        </div>#}
  189. {#                    </div>#}
  190. {#                    <div class="address">#}
  191. {#                        <label for="detail">Prénom <span class="red">*</span></label>#}
  192. {#                        <input type="text" id="detail" placeholder="" required/>#}
  193. {#                    </div>#}
  194. {#                    <div class="gender">#}
  195. {#                        <label for="sexe">Sexe <span class="red">*</span></label>#}
  196. {#                        <select id="sexe" required>#}
  197. {#                            <option></option>#}
  198. {#                            <option></option>#}
  199. {#                        </select>#}
  200. {#                    </div>#}
  201. {#                    <div class="ages">#}
  202. {#                        <label for="age">Âge <span class="red">*</span></label>#}
  203. {#                    </div>#}
  204. {#                    <div class="btns">#}
  205. {#                        <div class="btn-text">#}
  206. {#                            <div class="btn-title">Pourquoi ces infos ?</div>#}
  207. {#                            <div class="btn-desc">Afin de permettre la meilleure prise en charge pour votre consultation.</div>#}
  208. {#                        </div>#}
  209. {#                        <div class="button">#}
  210. {#                            <div class="text">Passer à l’étape suivante</div>#}
  211. {#                            <span class="material-icons">#}
  212. {#                                    arrow_right_alt#}
  213. {#                            </span>#}
  214. {#                        </div>#}
  215. {#                    </div>#}
  216. {#                    <div class="status">#}
  217. {#                        <div class="step">Étape 1/3</div>#}
  218. {#                        <div class="bar">#}
  219. {#                            <div class="b1"></div>#}
  220. {#                        </div>#}
  221. {#                    </div>#}
  222. {#                </form>#}
  223. {#            </section>#}
  224. {#        </div>#}
  225. {#    </div>#}
  227.     <style>.button-loading {
  228.             background-color: #ccc; /* Gray color */
  229.             pointer-events: none; /* Prevents clicking while loading */
  230.         }
  231.     </style>
  232. {% endblock %}
  234. {% block javascripts %}
  235.     {{ parent() }}
  236.     <script type="text/javascript">
  237.         document.addEventListener('DOMContentLoaded', function () {
  238.             var form = document.querySelector('form.forms'); // Adjust the selector to match your form
  239.             var submitButton = document.getElementById('submit-button');
  241.             form.addEventListener('submit', function () {
  242.                 // Change button to loading state
  243.                 submitButton.classList.add('button-loading');
  244.                 submitButton.querySelector('.text').textContent = submitButton.getAttribute('data-loading-text');
  245.                 submitButton.disabled = true; // Disable the button to prevent multiple submissions
  246.             });
  247.         });
  249.         var input = document.querySelector("#visio_step1_tel");
  250.         Intlphone(input, { separateDialCode: true,
  251.             initialCountry: "fr",
  252.         });
  254.         function sendEvent() {
  255.             gtag('event', 'confirmation    ', {
  256.                 'event_category': 'tele_consultation',
  257.                 'event_label': 'CTA_valider_ma_demande'
  258.             });
  259.         }
  262.     </script>
  263. {% endblock %}