templates/accueil/accueil.html.twig line 1

Open in your IDE?
  1. {% extends "base.html.twig" %}
  3. {% block stylesheets %}
  4.     {{ parent() }}
  6.     <link rel="stylesheet" type="text/css" href="/assets/lib/slick-1.8.1/slick.css"/>
  7.     <link rel="stylesheet" type="text/css" href="/assets/lib/slick-1.8.1/slick-theme.css"/>
  8.     <link rel="stylesheet" href="/assets/css/accueil.css">
  9. {% endblock %}
  12. {% block javascripts %}
  13.     {{ parent() }}
  15.     <script type="text/javascript" src="/assets/lib/slick-1.8.1/slick.js"></script>
  16.     <script type="text/javascript" src="/assets/js/acceuil.js"></script>
  18.     <script>
  20.         var mailRelance = "";
  21. function initMap() {
  24. geocoder = new google.maps.Geocoder();
  27. }
  29. document.addEventListener('DOMContentLoaded', function () {
  30. const btn = document.querySelector('.firstLoad');
  31. if (btn) {
  32. btn.disabled = true;
  33. }
  34. });
  36. window.addEventListener('load', function () {
  37. const btn = document.querySelector('.firstLoad');
  38. if (btn) {
  39. btn.disabled = false;
  40. }
  41. });{% if token is defined %}
  42. token = "{{ token }}";
  43. {% else %}
  44. token = -1;{% endif %}
  46. {% if mailConfirmation is defined %}mailRelance = "{{ mailConfirmation }}";
  47. {% else %}mailRelance = -1;{% endif %}
  50. {% if tokenEmail is defined %}
  51. tokenEmail = "{{ tokenEmail }}";
  52. {% else %}
  53. tokenEmail = -1;{% endif %}
  55. if (token != -1) {
  56. $('#changePassword').modal('show');
  57. }
  59. if (tokenEmail != -1) {
  60. $.ajax({
  61. url: BASE_API + 'valider/mail/token',
  62. type: "POST",
  63. contentType: "application/json",
  64. dataType: "json",
  65. data: JSON.stringify(
  66. {"token": tokenEmail, "mail": mailRelance}
  67. ),
  68. async: true,
  69. success: function (data) {
  70. if (data.message == 'ok') {
  71. $('#mailValider').modal('show');
  72. }
  73. if (data.message == 'nok') {
  74. $('#recommancerValidMail').modal('show');
  75. }
  76. }
  77. });
  79. }
  81. $(document).ready(function () {
  82. {% if token is defined %}
  83. token = "{{ token }}";
  84. {% else %}
  85. token = -1;{% endif %}
  87. {% if mailConfirmation is defined %}mailRelance = "{{ mailConfirmation }}";
  88. {% else %}mailRelance = -1;{% endif %}
  91. {% if tokenEmail is defined %}
  92. tokenEmail = "{{ tokenEmail }}";
  93. {% else %}
  94. tokenEmail = -1;{% endif %}
  96. if (token != -1) {
  97. $('#changePassword').modal('show');
  98. }
  100. if (tokenEmail != -1) {
  101. $.ajax({
  102. url: BASE_API + 'valider/mail/token',
  103. type: "POST",
  104. contentType: "application/json",
  105. dataType: "json",
  106. data: JSON.stringify(
  107. {"token": tokenEmail, "mail": mailRelance}
  108. ),
  109. async: true,
  110. success: function (data) {
  111. if (data.message == 'ok') {
  112. $('#mailValider').modal('show');
  113. }
  114. if (data.message == 'nok') {
  115. $('#recommancerValidMail').modal('show');
  116. }
  117. }
  118. });
  120. }
  123. var tabs = $('#myTab button');
  124. var counter = 0;
  125. var timer = window.setInterval(activateTab, 3000);
  127. function activateTab() { // remove active class from all the tabs
  128. tabs.removeClass('active');
  129. var currentLink = tabs[counter];
  130. $('.tab-pane').removeClass('active').removeClass('show')
  131. currentLink.classList.add('active');
  132. $(currentLink.getAttribute('data-bs-target')).addClass('active').addClass('show');
  133. if (counter < tabs.length - 1) 
  134. counter = counter + 1;
  135.  else 
  136. counter = 0;
  138. }
  141. $('#tabsAvantageContainer').hover(function (ev) {
  142. clearInterval(timer);
  143. }, function (ev) {
  144. timer = setInterval(activateTab, 3000);
  145. });
  148. });
  151. $(function () {});
  154. function relanceConfirmMail() {
  155. $.ajax({
  156. url: BASE_API + 'relance/valide/mail/token',
  157. type: "POST",
  158. contentType: "application/json",
  159. dataType: "json",
  160. data: JSON.stringify(
  161. {"mail": mailRelance}
  162. ),
  163. async: true,
  164. success: function (data) {
  165. $('#recommancerValidMail').modal('hide');
  166. $('#ValidMailRelance').modal('show');
  167. }
  168. });
  169. }
  171. function geolocaliser() {
  172. if (navigator.geolocation) {
  173. navigator.geolocation.getCurrentPosition(function (position) {
  174. var pos = {
  175. lat: position.coords.latitude,
  176. lng: position.coords.longitude
  177. };
  178. latitude = position.coords.latitude;
  179. longitude = position.coords.longitude;
  180. var geocoder = new google.maps.Geocoder;
  181. geocoder.geocode({
  182. 'location': pos
  183. }, function (results, status) {
  184. if (status === 'OK') {
  185. if (results[0]) {
  186. street = results[0].formatted_address;
  187. $("#searchByCityId").val(street);
  188. }
  189. }
  190. });
  191. }, function () { // handleLocationError(true, infoWindow, map.getCenter());
  192. });
  193. }
  194. }
  197. function goToSearch() {
  198. ville = $('#searchByCityId').val();
  199. nom = $("#searchByNameId").val();
  200. geocoder.geocode({
  201. 'address': ville
  202. }, function (results, status) {
  203. if (status == 'OK') {
  204. lat = results[0].geometry.location.lat()
  205. long = results[0].geometry.location.lng()
  206. if (nom != "") {
  207. document.location.href = "/search?name=" + nom + "&latitude=" + lat + "&longitude=" + long + "&ville=" + ville;
  208. } else {
  209. document.location.href = "/search?latitude=" + lat + "&longitude=" + long + "&ville=" + ville;
  210. }
  211. } else {
  212. if (nom != "") {
  213. document.location.href = "/search?name=" + nom;
  214. } else {
  215. document.location.href = "/search?address=" + ville;
  216. }
  217. }
  219. });
  220. }
  221.     </script>
  224. {% endblock %}
  225. {% block meta %}
  226.     <title>My Audio - Rendez-vous avec un audioprothésiste proche de chez vous.</title>
  227.     <meta name="description" content="Trouvez l'audioprothésiste proche de chez vous et prenez RDV directement en centre auditif pour contrôler votre audition - Essai et test auditif gratuit.">
  228. {% endblock %}
  231. {% block body %}
  232.     {{ parent() }}
  234.     <div class="backgroundheader"></div>
  235. {% endblock %}
  237. {% block content %}
  238.     {#  <video playsinline autoplay muted  id="bgvid">
  239.         <source src="/assets/videos/accueil.webm" type="video/webm">
  240.         <source src="/assets/videos/accueil.mp4" type="video/mp4">
  241.     </video>
  242.     #}
  244.     <style>
  245.         video#bgvid {
  246.             height: 100vh;
  247.             width: 100vw;
  248.             object-fit: cover;
  249.             position: fixed;
  250.             left: 50%;
  251.             top: 50%;
  252.             transform: translate(-50%, -50%);
  253.             z-index: 999999;
  254.             transition: opacity 2s ease-out;
  255.             opacity: 1;
  256.             background: #fff;
  258.         }
  260.         video#bgvid.end {
  262.             z-index: -1;
  263.             transition: opacity 2s ease-out;
  264.             opacity: 0;
  267.         }
  269.         video#bgvid.nostart {
  271.             z-index: -1;
  272.             opacity: 0;
  273.             display: none;
  276.         }
  277.     </style>
  278.     <script type='text/javascript'>
  279.         document.getElementById('bgvid').addEventListener('loadstart', function (e) {
  280. if (getCookie('animationIn') == '1') {
  281. $("#bgvid").prop('class', 'nostart');
  282. }
  284. })
  286. document.getElementById('bgvid').addEventListener('ended', function (e) {
  288. $("#bgvid").prop('class', 'end');
  289. setCookie('animationIn', '1', 1);
  290. })
  291.     </script>
  292.     {{ parent() }}
  295.     <!-- Titre -->
  296.     <section class="header_home">
  297.         <div class=" row container">
  298.             <div class="col-md-6 order-first">
  299.                 <h1 class="Home_title">Prenez rendez-vous avec un
  300.                                     audioprothésiste proche de
  301.                                     chez vous.</h1>
  302.                 <h2 class="Home_subtitle">Au sein du 1<sup>er</sup>
  303.                     réseau national
  304.                                     d'audioprothésiste de France.</h2>
  305.             </div>
  308.             <div class="col-md-6  order-3 order-md-2 casque-col">
  309.                 <div class="casquecontain">
  310.                     {% include "/casque.html.twig" %}
  311.                     <div class="casque-int">
  312.                         <p class="Casque-title">Testez votre audition</p>
  313.                         <p class="Casque-subtitle">en seulement 3 min !</p>
  315.                         <a class="btn-search btn btn-vert-inverse btn-outline-light" href='/test-auditif-en-ligne/test'>Je commence</a>
  316.                     </div>
  317.                 </div>
  319.             </div>
  320.             <div class="col-md-6 order-2 order-md-3">
  321.                 <div class="card card_search">
  322.                     <form onsubmit=" goToSearch(); return false;">
  323.                         <div class="input-group">
  324.                             <span class="input-group-text" id="nom-icon">
  325.                                 <i class="far fa-search"></i>
  326.                             </span>
  327.                             <input type="text" class="form-control" id="searchByNameId" aria-describedby="searchByName" placeholder="Nom du spécialiste">
  328.                         </div>
  329.                         <div class="centered-ou">
  330.                             <div class="line"></div>
  331.                             <p>ou</p>
  332.                             <div class="line"></div>
  333.                         </div>
  334.                         <div class="input-group">
  335.                             <span class="input-group-text" id="ville-icon">
  336.                                 <i class="fas fa-map-marker-alt"></i>
  337.                             </span>
  338.                             <input type="text" class="form-control" id="searchByCityId" placeholder="Ville, Code postal, Adresse…">
  339.                             <span class="material-icons icon-geo" onclick="geolocaliser();">
  340.                                 my_location
  341.                             </span>
  342.                         </div>
  343.                         <div class="accueil_btn">
  344.                             <button type="submit" class="btn btn-vert-inverse btn-search firstLoad">Rechercher</button>
  345.                         </div>
  346.                     </form>
  347.                 </div>
  348.             </div>
  349.             <div class="col-md-6  order-last father">
  350.                 <video class="videoaccueil" preload="none" controls="controls" controlslist="nodownload" poster="/assets/img/accueil/posteraccueil2.png">
  351.                     <source src="/assets/videos/Myaudio-1.m4v" type="video/mp4">
  352.                 </video>
  355.             </div>
  357.         </div>
  358.     </section>
  360.     <!-- Form Card 
  361.         <section class="container">
  362.             <div class="col-md-6">
  363.                 <div class="card card_search">
  364.                         <form onsubmit=" goToSearch(); return false;">
  365.                             <div class="input-group">
  366.                                 <span class="input-group-text" id="nom-icon"><i class="far fa-search"></i></span>
  367.                                 <input type="text" class="form-control" id="searchByNameId" aria-describedby="searchByName"
  368.                                     placeholder="Audioprothésiste ou Centre auditif">
  369.                             </div>
  370.                             <div class="input-group">
  371.                                 <span class="input-group-text" id="ville-icon"><i class="fas fa-map-marker-alt"></i></span>
  372.                                 <input type="text" class="form-control" id="searchByCityId" placeholder="Ville, Code postal, Adresse…">
  373.                                 <span class="material-icons icon-geo" onclick="geolocaliser();"> my_location </span>
  374.                             </div>
  375.                             <div class="accueil_btn">
  376.                                 <button type="submit" class="btn btn-vert-inverse btn-search">Rechercher</button>
  377.                             </div>
  378.                         </form>
  379.                 </div>
  380.             </div>
  381.     
  382.         </section>-->
  384.     <!-- Icon section -->
  385.     <section class="icon_section">
  386.         <div class="container">
  387.             <div class="icon_div">
  388.                 <div>
  389.                     <div class="icon_background">
  390.                         <a class="icon_link " href="/search">
  391.                             <img src="/assets/img/accueil/euro.png" style="margin-left:-11px" alt="prise_rdv"/>
  392.                         </a>
  393.                     </div>
  394.                     <p class="icon_title">Appareil auditif prix et remboursement</p>
  395.                     <a class="icon_link hover-underline-animation" href="/pages/prix-prise-encharge-et-remboursement-des-appareils-auditifs">EN SAVOIR PLUS</a>
  396.                 </div>
  397.                 <div>
  398.                     <div class="icon_background">
  399.                         <a class="icon_link " href="/pages/le-parcours-de-soin-auditif-patient-audioprothesiste">
  400.                             <img src="/assets/img/accueil/perte_auditive.png" alt="prise_rdv" style="max-width: 63px;"/>
  401.                         </a>
  402.                     </div>
  403.                     <p class="icon_title">Le parcours de soin auditif</p>
  404.                     <a class="icon_link hover-underline-animation" href="/pages/le-parcours-de-soin-auditif-patient-audioprothesiste">EN SAVOIR PLUS</a>
  405.                 </div>
  406.                 <div>
  407.                     <a class="icon_link " href="/test-auditif-en-ligne">
  408.                         <div class="icon_background">
  409.                             <img src="/assets/img/accueil/test_audition.png" alt="prise_rdv" style="max-width: 66px;"/>
  410.                         </div>
  411.                     </a>
  412.                     <p class="icon_title">Test auditif en ligne</p>
  413.                     <a class="icon_link hover-underline-animation" href="/test-auditif-en-ligne">EN SAVOIR PLUS</a>
  414.                 </div>
  415.                 <div>
  416.                     <a class="icon_link " href="#">
  417.                         <div class="icon_background">
  418.                             <img src="/assets/img/accueil/1_reseau.png" alt="prise_rdv"/>
  419.                         </div>
  420.                     </a>
  421.                     <p class="icon_title">1<sup>er</sup>
  422.                         réseau national
  423.                         <br>
  424.                         d’audioprothésistes certifiés</p>
  425.                     <a class="icon_link hover-underline-animation" href="#">EN SAVOIR PLUS</a>
  426.                 </div>
  428.                 <div>
  429.                     <a class="icon_link " href="/actualite-de-l-audition">
  430.                         <div class="icon_background">
  431.                             <img src="/assets/img/accueil/suivi_adaptation.png" alt="prise_rdv"/>
  432.                         </div>
  433.                     </a>
  434.                     <p class="icon_title">Actualité de l'audition</p>
  435.                     <a class="icon_link hover-underline-animation" href="/actualite-de-l-audition">EN SAVOIR PLUS</a>
  436.                 </div>
  437.             </div>
  438.         </div>
  440.     </section>
  442.     <!-- Tableau -->
  443.     <section class="tab_section">
  444.         <div class="container">
  445.             <h2 class="Tableau_title">Les avantages du réseau My Audio</h2>
  446.             <div class="card" style="min-height: 540px;">
  447.                 <div id="tabsAvantageContainer">
  448.                     <ul class="nav nav-tabs" id="myTab" role="tablist">
  449.                         <li class="nav-item" role="presentation">
  450.                             <button class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#home" type="button" role="tab" aria-controls="home" aria-selected="true">Prise de RDV
  451.                                                                 facilitée</button>
  452.                         </li>
  453.                         <li class="nav-item" role="presentation">
  454.                             <button class="nav-link" id="profile-tab" data-bs-toggle="tab" data-bs-target="#profile" type="button" role="tab" aria-controls="profile" aria-selected="false">Tarifs
  455.                                                                 avantageux</button>
  456.                         </li>
  457.                         <li class="nav-item" role="presentation">
  458.                             <button class="nav-link" id="contact-tab" data-bs-toggle="tab" data-bs-target="#contact" type="button" role="tab" aria-controls="contact" aria-selected="false">Test auditif en
  459.                                                                 ligne</button>
  460.                         </li>
  461.                         <li class="nav-item" role="presentation">
  462.                             <button class="nav-link" id="réseau-tab" data-bs-toggle="tab" data-bs-target="#réseau" type="button" role="tab" aria-controls="réseau" aria-selected="false">Réseau de santé
  463.                                                                 national</button>
  464.                         </li>
  465.                         <li class="nav-item" role="presentation">
  466.                             <button class="nav-link" id="suivi-tab" data-bs-toggle="tab" data-bs-target="#suivi" type="button" role="tab" aria-controls="suivi" aria-selected="false">Suivi
  467.                                                                 complet</button>
  468.                         </li>
  469.                         <li class="nav-item" role="presentation">
  470.                             <button class="nav-link" id="réf-tab" data-bs-toggle="tab" data-bs-target="#réf" type="button" role="tab" aria-controls="réf" aria-selected="false">Référence de
  471.                                                                 l'audition</button>
  472.                         </li>
  473.                     </ul>
  474.                     <div class="tab-content" id="myTabContent">
  475.                         <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
  476.                             <div class="row inner-tabs align-items-start">
  477.                                 <div class="col-md-8">
  478.                                     <div class="align_title_img">
  479.                                         <div class="align_img">
  480.                                             <img alt="avantage_rdv" src="/assets/img/accueil/Avantage-RDV.png"/>
  481.                                         </div>
  482.                                         <h4 class="Tableau_title">Une prise de rendez-vous facilitée</h4>
  483.                                     </div>
  484.                                     <div class="align_list_logo">
  485.                                         <ul class="liste_tab">
  486.                                             <li class="puce_tab">Trouvez l'audioprothésiste le
  487.                                                 <strong>plus proche de chez vous,</strong>
  488.                                                 en
  489.                                                                                                 seulement quelques clics.</li>
  490.                                             <li class="puce_tab">Prenez rendez-vous pour vous ou pour vos proches
  491.                                                 <strong>24H/24 et 7J/7,</strong>
  492.                                                 où
  493.                                                                                                 que vous soyez.</li>
  494.                                             <li class="puce_tab">Obtenez un rendez-vous rapidement.</li>
  495.                                             <li class="puce_tab">Accédez directement à l'agenda de l'audioprothésiste de votre
  496.                                                                                                 choix. Plus besoin d'appeler
  497.                                                                                                 plusieurs centres auditifs avant de trouver
  498.                                                 <strong>un rendez-vous qui corresponde à vos
  499.                                                                                                     disponibilités!
  500.                                                 </strong>
  501.                                             </li>
  502.                                             <li class="puce_tab">Recevez les
  503.                                                 <strong>rappels automatiques de vos rendez-vous par SMS,</strong>
  504.                                                 par
  505.                                                                                                 email
  506.                                                                                                 ou par notification sur votre smartphone. Plus de rendez-vous manqués!
  507.                                             </li>
  508.                                         </ul>
  509.                                     </div>
  510.                                 </div>
  511.                                 <div class="col-md-4">
  512.                                     <div class="align_logo">
  513.                                         <img src="/assets/img/accueil/agenda_en_ligne.png" alt="agenda_en_ligne"/>
  514.                                         <br>
  515.                                         <a class="btn-vert-inverse btn btn-tabs" href="/search">Prendre RDV</a>
  516.                                     </div>
  517.                                 </div>
  518.                             </div>
  519.                         </div>
  520.                         <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">
  521.                             <div class="row inner-tabs align-items-start">
  522.                                 <div class="col-md-8">
  523.                                     <div class="align_title_img">
  524.                                         <div class="align_img">
  525.                                             <img alt="avantage_rdv" src="/assets/img/accueil/tarif_avantageux.png"/>
  526.                                         </div>
  527.                                         <h4 class="Tableau_title">Des tarifs avantageux</h4>
  528.                                     </div>
  529.                                     <div class="align_list_logo">
  530.                                         <ul class="liste_tab">
  531.                                             <li class="puce_tab">Profitez de notre
  532.                                                 <strong>service en ligne 100% gratuit</strong>
  533.                                                 (et ça le restera toujours).</li>
  534.                                             <li class="puce_tab">Bénéficiez de votre
  535.                                                 <strong>premier rendez-vous gratuit</strong>
  536.                                                 chez un audioprothésiste My Audio.</li>
  537.                                             <li class="puce_tab">Obtenez
  538.                                                 <strong>vos aides auditives pour 0€,</strong>
  539.                                                 grâce à la réforme 100% Santé. En savoir plus ici.</li>
  540.                                         </ul>
  542.                                     </div>
  543.                                 </div>
  544.                                 <div class="col-md-4">
  545.                                     <div class="align_logo">
  546.                                         <img src="/assets/img/accueil/ref_audition.png" alt="ref_audition"/><br>
  547.                                         <a class="btn-vert-inverse btn btn-tabs" href="/search">Prendre RDV</a>
  548.                                     </div>
  549.                                 </div>
  550.                             </div>
  551.                         </div>
  552.                         <div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">
  553.                             <div class="row inner-tabs align-items-start">
  554.                                 <div class="col-md-8">
  555.                                     <div class="align_title_img">
  556.                                         <div class="align_img">
  557.                                             <img alt="avantage_rdv" src="/assets/img/accueil/thumbs_up.png"/>
  558.                                         </div>
  559.                                         <h4 class="Tableau_title">Un test auditif en ligne efficace</h4>
  560.                                     </div>
  561.                                     <div class="align_list_logo">
  562.                                         <ul class="liste_tab">
  563.                                             <li class="puce_tab">Testez
  564.                                                 <strong>gratuitement</strong>
  565.                                                 votre audition, afin de préserver votre capital auditif.</li>
  566.                                             <li class="puce_tab">Réalisez le test
  567.                                                 <strong>depuis chez vous.</strong>
  568.                                             </li>
  569.                                             <li class="puce_tab">Le test est très simple à effectuer, il ne prend
  570.                                                 <strong>que 3 minutes</strong>
  571.                                                 et quelques clics.</li>
  572.                                             <li class="puce_tab">Le test a été développé par nos experts auditifs, grâce à une
  573.                                                 <strong>technologie de pointe.</strong>
  574.                                             </li>
  575.                                             <li class="puce_tab">Il s'agit d'un test auditif complet, comprenant une évaluation
  576.                                                 <strong>tonale</strong>
  577.                                                 et une évaluation
  578.                                                 <strong>vocale.</strong>
  579.                                             </li>
  580.                                         </ul>
  582.                                     </div>
  583.                                 </div>
  584.                                 <div class="col-md-4">
  585.                                     <div class="align_logo">
  586.                                         <img src="/assets/img/accueil/croissance.png" alt="agenda_en_ligne"/><br>
  587.                                         <a class="btn-vert-inverse btn btn-tabs" href="/search">Prendre RDV</a>
  588.                                     </div>
  589.                                 </div>
  590.                             </div>
  591.                         </div>
  592.                         <div class="tab-pane fade" id="réseau" role="tabpanel" aria-labelledby="réseau-tab">
  593.                             <div class="row inner-tabs align-items-start">
  594.                                 <div class="col-md-8">
  595.                                     <div class="align_title_img">
  596.                                         <div class="align_img">
  597.                                             <img alt="avantage_rdv" src="/assets/img/accueil/reseau.png"/>
  598.                                         </div>
  599.                                         <h4 class="Tableau_title">Un réseau de santé national</h4>
  600.                                     </div>
  601.                                     <div class="align_list_logo">
  602.                                         <ul class="liste_tab">
  603.                                             <li class="puce_tab">Bénéficiez du
  604.                                                 <strong>1er réseau National d'audioprothésistes</strong>
  605.                                                 pour votre suivi auditif.</li>
  606.                                             <li class="puce_tab">Consultez uniquement des audioprothésistes
  607.                                                 <strong>certifiés</strong>
  608.                                                 sérieux et adhérant à notre
  609.                                                 <strong>charte de qualité,</strong>
  610.                                                 garant du code de la déontologie et du secret professionnel. En savoir plus ici.</li>
  611.                                             <li class="puce_tab">Accédez aux
  612.                                                 <strong>informations pertinentes</strong>
  613.                                                 sur chaque audioprothésiste : leur spécialité, leur diplôme, l'accès à leur centre, leur agenda, ...</li>
  614.                                         </ul>
  615.                                     </div>
  616.                                 </div>
  617.                                 <div class="col-md-4">
  618.                                     <div class="align_logo">
  619.                                         <img src="/assets/img/accueil/reseau_carte.png" alt="agenda_en_ligne"/><br>
  620.                                         <a class="btn-vert-inverse btn btn-tabs" href="/search">Prendre RDV</a>
  621.                                     </div>
  622.                                 </div>
  623.                             </div>
  624.                         </div>
  625.                         <div class="tab-pane fade" id="suivi" role="tabpanel" aria-labelledby="suivi-tab">
  626.                             <div class="row inner-tabs align-items-start">
  627.                                 <div class="col-md-8">
  628.                                     <div class="align_title_img">
  629.                                         <div class="align_img">
  630.                                             <img alt="avantage_rdv" src="/assets/img/accueil/suivi.png"/>
  631.                                         </div>
  632.                                         <h4 class="Tableau_title">Un suivi complet de votre audition</h4>
  633.                                     </div>
  634.                                     <div class="align_list_logo">
  635.                                         <ul class="liste_tab">
  636.                                             <li class="puce_tab">Consultez
  637.                                                 <strong>l'historique de votre dossier</strong>
  638.                                                 de santé auditive avec l'ensemble de vos documents,
  639.                                                                                                                 vos rendez-vous, vos résultats, vos factures, où que vous soyez.</li>
  640.                                             <li class="puce_tab">Si vous déménagez ou changez d'audioprothésiste, votre dossier est
  641.                                                 <strong>automatiquement transféré</strong>
  642.                                                 sans que
  643.                                                                                                                 vous n'ayez aucune démarche à faire.
  644.                                             </li>
  645.                                             <li class="puce_tab">Vos données de santé sont enregistrées de manière
  646.                                                 <strong>hautement sécurisée</strong>
  647.                                                 et
  648.                                                                                                                 agréée par les autorités, grâce à un serveur HDS certifié (Hébergement des Données de Santé).</li>
  649.                                             <li class="puce_tab">Bénéficiez de conseils pour
  650.                                                 <strong>préserver votre capital auditif</strong>et adopter les bons gestes.
  651.                                             </li>
  652.                                         </ul>
  653.                                     </div>
  654.                                 </div>
  655.                                 <div class="col-md-4">
  656.                                     <div class="align_logo">
  657.                                         <img src="/assets/img/accueil/R&D.png" alt="agenda_en_ligne"/><br>
  658.                                         <a class="btn-vert-inverse btn btn-tabs" href="/search">Prendre RDV</a>
  659.                                     </div>
  660.                                 </div>
  661.                             </div>
  662.                         </div>
  663.                         <div class="tab-pane fade" id="réf" role="tabpanel" aria-labelledby="réf-tab">
  664.                             <div class="row inner-tabs align-items-start">
  665.                                 <div class="col-md-8">
  666.                                     <div class="align_title_img">
  667.                                         <div class="align_img">
  668.                                             <img alt="avantage_rdv" src="/assets/img/accueil/award.png"/>
  669.                                         </div>
  670.                                         <h4 class="Tableau_title">La référence de l’audition</h4>
  671.                                     </div>
  672.                                     <div class="align_list_logo">
  673.                                         <ul class="liste_tab">
  674.                                             <li class="puce_tab">Retrouvez
  675.                                                 <strong>toute l'actualité</strong>
  676.                                                 de l'audition, les
  677.                                                 <strong>dernières innovations</strong>
  678.                                                 et les réformes du secteur.</li>
  679.                                             <li class="puce_tab">Bénéficiez de notre innovation à venir :
  680.                                                 <strong>l'Intelligence Artificielle (IA)</strong>
  681.                                                 au service de votre audition.</li>
  682.                                         </ul>
  683.                                     </div>
  684.                                 </div>
  685.                                 <div class="col-md-4">
  686.                                     <div class="align_logo">
  687.                                         <img src="/assets/img/accueil/ref_auditionold.png" alt="agenda_en_ligne"/>
  688.                                         <br>
  689.                                         <a class="btn-vert-inverse btn btn-tabs" href="/search">Prendre RDV</a>
  690.                                     </div>
  691.                                 </div>
  692.                             </div>
  693.                         </div>
  694.                     </div>
  695.                 </div>
  696.             </div>
  697.         </div>
  698.     </section>
  701.     <!--Tableau Mobile-->
  702.     <section class="tab_section_mobile">
  703.         <h2 class="Tableau_title">Les avantages du réseau 
  704.                     My Audio</h2>
  705.         <div class="accordion" id="accordionExample">
  706.             <div class="accordion-item">
  707.                 <h2 class="accordion-header" id="headingOne">
  708.                     <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
  709.                         <div class="align_img">
  710.                             <img alt="avantage_rdv" src="/assets/img/accueil/Avantage-RDV.png"/>
  711.                         </div>
  712.                         Prise de RDV facilitée
  713.                     </button>
  714.                 </h2>
  715.                 <div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
  716.                     <div class="accordion-body">
  717.                         <ul class="liste_tab">
  718.                             <li class="puce_tab">Trouvez l'audioprothésiste le
  719.                                 <strong>plus proche de chez vous,</strong>
  720.                                 en
  721.                                                                 seulement quelques clics.</li>
  722.                             <li class="puce_tab">Prenez rendez-vous pour vous ou pour vos proches
  723.                                 <strong>24H/24 et 7J/7,</strong>
  724.                                 où
  725.                                                                 que vous soyez.</li>
  726.                             <li class="puce_tab">Obtenez un rendez-vous rapidement.</li>
  727.                             <li class="puce_tab">Accédez directement à l'agenda de l'audioprothésiste de votre
  728.                                                                 choix. Plus besoin d'appeler
  729.                                                                 plusieurs centres auditifs avant de trouver
  730.                                 <strong>un rendez-vous qui corresponde à vos
  731.                                                                     disponibilités!
  732.                                 </strong>
  733.                             </li>
  734.                             <li class="puce_tab">Recevez les
  735.                                 <strong>rappels automatiques de vos rendez-vous par SMS,</strong>
  736.                                 par
  737.                                                                 email
  738.                                                                 ou par notification sur votre smartphone. Plus de rendez-vous manqués!
  739.                             </li>
  740.                         </ul>
  741.                         <div class="align_logo">
  742.                             <a class="btn-lg btn-primary btn-vert-inverse" href="/search">Prendre RDV</a>
  743.                         </div>
  744.                     </div>
  745.                 </div>
  746.             </div>
  747.             <div class="accordion-item">
  748.                 <h2 class="accordion-header" id="headingTwo">
  749.                     <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
  750.                         <div class="align_img">
  751.                             <img alt="avantage_rdv" src="/assets/img/accueil/tarif_avantageux.png"/>
  752.                         </div>
  753.                         Tarifs avantages
  754.                     </button>
  755.                 </h2>
  756.                 <div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionExample">
  757.                     <div class="accordion-body">
  758.                         <ul class="liste_tab">
  759.                             <li class="puce_tab">Profitez de notre
  760.                                 <strong>service en ligne 100% gratuit</strong>
  761.                                 (et ça le restera toujours).</li>
  762.                             <li class="puce_tab">Bénéficiez de votre
  763.                                 <strong>premier rendez-vous gratuit</strong>
  764.                                 chez un audioprothésiste My Audio.</li>
  765.                             <li class="puce_tab">Obtenez
  766.                                 <strong>vos aides auditives pour 0€,</strong>
  767.                                 grâce à la réforme 100% Santé. En savoir plus ici.</li>
  768.                         </ul>
  770.                         <div class="align_logo">
  771.                             <a class="btn-lg btn-primary btn-vert-inverse" href="/search">Prendre RDV</a>
  772.                         </div>
  773.                     </div>
  774.                 </div>
  775.             </div>
  776.             <div class="accordion-item">
  777.                 <h2 class="accordion-header" id="headingThree">
  778.                     <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
  779.                         <div class="align_img">
  780.                             <img alt="avantage_rdv" src="/assets/img/accueil/thumbs_up.png"/>
  781.                         </div>
  782.                         Test auditif gratuit
  783.                     </button>
  784.                 </h2>
  785.                 <div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#accordionExample">
  786.                     <div class="accordion-body">
  787.                         <ul class="liste_tab">
  788.                             <li class="puce_tab">Testez
  789.                                 <strong>gratuitement</strong>
  790.                                 votre audition, afin de préserver votre capital auditif.</li>
  791.                             <li class="puce_tab">Réalisez le test
  792.                                 <strong>depuis chez vous.</strong>
  793.                             </li>
  794.                             <li class="puce_tab">Le test est très simple à effectuer, il ne prend
  795.                                 <strong>que 3 minutes</strong>
  796.                                 et quelques clics.</li>
  797.                             <li class="puce_tab">Le test a été développé par nos experts auditifs, grâce à une
  798.                                 <strong>technologie de pointe.</strong>
  799.                             </li>
  800.                             <li class="puce_tab">Il s'agit d'un test auditif complet, comprenant une évaluation
  801.                                 <strong>tonale</strong>
  802.                                 et une évaluation
  803.                                 <strong>vocale.</strong>
  804.                             </li>
  805.                         </ul>
  807.                         <div class="align_logo">
  808.                             <a class="btn-lg btn-primary btn-vert-inverse" href="/search">Prendre RDV</a>
  809.                         </div>
  810.                     </div>
  811.                 </div>
  812.             </div>
  813.             <div class="accordion-item">
  814.                 <h2 class="accordion-header" id="headingFour">
  815.                     <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseFour" aria-expanded="false" aria-controls="collapseFour">
  816.                         <div class="align_img">
  817.                             <img alt="avantage_rdv" src="/assets/img/accueil/reseau.png"/>
  818.                         </div>
  819.                         Réseau de santé national
  820.                     </button>
  821.                 </h2>
  822.                 <div id="collapseFour" class="accordion-collapse collapse" aria-labelledby="headingFour" data-bs-parent="#accordionExample">
  823.                     <div class="accordion-body">
  824.                         <ul class="liste_tab">
  825.                             <li class="puce_tab">Bénéficiez du
  826.                                 <strong>1er réseau National d'audioprothésistes</strong>
  827.                                 pour votre suivi auditif.</li>
  828.                             <li class="puce_tab">Consultez uniquement des audioprothésistes
  829.                                 <strong>certifiés</strong>
  830.                                 sérieux et adhérant à notre
  831.                                 <strong>charte de qualité,</strong>
  832.                                 garant du code de la déontologie et du secret professionnel. En savoir plus ici.</li>
  833.                             <li class="puce_tab">Accédez aux
  834.                                 <strong>informations pertinentes</strong>
  835.                                 sur chaque audioprothésiste : leur spécialité, leur diplôme, l'accès à leur centre, leur agenda, ...</li>
  836.                         </ul>
  838.                         <div class="align_logo">
  839.                             <a class="btn-lg btn-primary btn-vert-inverse" href="/search">Prendre RDV</a>
  840.                         </div>
  841.                     </div>
  842.                 </div>
  843.             </div>
  844.             <div class="accordion-item">
  845.                 <h2 class="accordion-header" id="headingFive">
  846.                     <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseFive" aria-expanded="false" aria-controls="collapseFive">
  847.                         <div class="align_img">
  848.                             <img alt="avantage_rdv" src="/assets/img/accueil/suivi.png"/>
  849.                         </div>
  850.                         Suivi de votre audition
  851.                     </button>
  852.                 </h2>
  853.                 <div id="collapseFive" class="accordion-collapse collapse" aria-labelledby="headingFive" data-bs-parent="#accordionExample">
  854.                     <div class="accordion-body">
  855.                         <ul class="liste_tab">
  856.                             <li class="puce_tab">Bénéficiez du
  857.                                 <strong>1er réseau National d'audioprothésistes</strong>
  858.                                 pour votre suivi auditif.</li>
  859.                             <li class="puce_tab">Consultez uniquement des audioprothésistes
  860.                                 <strong>certifiés</strong>
  861.                                 sérieux et adhérant à notre
  862.                                 <strong>charte de qualité,</strong>
  863.                                 garant du code de la déontologie et du secret professionnel. En savoir plus ici.</li>
  864.                             <li class="puce_tab">Accédez aux
  865.                                 <strong>informations pertinentes</strong>
  866.                                 sur chaque audioprothésiste : leur spécialité, leur diplôme, l'accès à leur centre, leur agenda, ...</li>
  867.                         </ul>
  869.                         <div class="align_logo">
  870.                             <a class="btn-lg btn-primary btn-vert-inverse" href="/search">Prendre RDV</a>
  871.                         </div>
  872.                     </div>
  873.                 </div>
  874.             </div>
  875.             <div class="accordion-item">
  876.                 <h2 class="accordion-header" id="headingSix">
  877.                     <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseSix" aria-expanded="false" aria-controls="collapseSix">
  878.                         <div class="align_img">
  879.                             <img alt="avantage_rdv" src="/assets/img/accueil/award.png"/>
  880.                         </div>
  881.                         La référence de l’audition
  882.                     </button>
  883.                 </h2>
  884.                 <div id="collapseSix" class="accordion-collapse collapse" aria-labelledby="headingSix" data-bs-parent="#accordionExample">
  885.                     <div class="accordion-body">
  886.                         <ul class="liste_tab">
  887.                             <li class="puce_tab">Retrouvez
  888.                                 <strong>toute l'actualité</strong>
  889.                                 de l'audition, les
  890.                                 <strong>dernières innovations</strong>
  891.                                 et les réformes du secteur.</li>
  892.                             <li class="puce_tab">Bénéficiez de notre innovation à venir :
  893.                                 <strong>l'Intelligence Artificielle (IA)</strong>
  894.                                 au service de votre audition.</li>
  895.                         </ul>
  897.                         <div class="align_logo">
  898.                             <a class="btn-lg btn-primary btn-vert-inverse" href="/search">Prendre RDV</a>
  899.                         </div>
  900.                     </div>
  901.                 </div>
  902.             </div>
  903.         </div>
  904.     </section>
  907.     <!-- Carousel & card-->
  908.     {% if articles | length > 0 %}
  909.         <section class="title-news">
  910.             <div class="container">
  911.                 <div>
  912.                     <h2 class="Tableau_title">
  913.                         <a href="/actualite-de-l-audition" style="text-decoration:none ; color:#434343; font-weight: bold ;">Actualité de l'auditionn</a>
  914.                     </h2>
  915.                 </div>
  916.             </div>
  917.         </section>
  919.         <section class="news_card">
  920.             <div class="container">
  921.                 <div class="carousel">
  922.                     {% for article in articles %}
  923.                         <div class="card_section petitecard">
  924.                             <div class="card_article">
  925.                                 <div
  926.                                     class="header-card">
  927.                                     <!-- Gestion conditionnelle de l'image -->
  928.                                     {% set imgSrc = (article.imgUrl is defined and article.imgUrl and article.externalId is defined and article.externalId) 
  929.                             ? article.imgUrl 
  930.                             : BASE_API ~ 'article/image/' ~ article.slug %}
  931.                                     <img class="card-img-top petite" src="{{ imgSrc }}" alt="{{ article.title }}">
  933.                                     <div class="card-body">
  934.                                         <p class="card_ontitle">{{ article.categoryTitle }}</p>
  935.                                         <h2 class="card-title">{{ article.title }}</h2>
  936.                                         <p class="card_date">
  937.                                             <span class="material-icons">today</span>
  938.                                             {{ article.date |format_datetime(pattern="d MMMM Y",locale='fr') }}
  939.                                         </p>
  940.                                         <p class="card-text">{{ article.description |raw }}</p>
  942.                                         <!-- Gestion de la source -->
  943.                                         {% if article.source is defined and article.source %}
  944.                                             {% set displayedSource = article.source %}
  945.                                             {% if article.source == 'Ouïe Magazine' %}
  946.                                                 {% set displayedSource = "L'" ~ article.source %}
  947.                                             {% endif %}
  948.                                             <p class="card-text" style="margin: 0px; height: auto;">Source :
  949.                                                 {{ displayedSource }}</p>
  950.                                         {% endif %}
  951.                                     </div>
  952.                                 </div>
  953.                                 <div
  954.                                     class="card-footer">
  955.                                     <!-- Gestion conditionnelle du lien -->
  956.                                     {% set isExternal = article.externalLink is defined and article.externalLink %}
  957.                                     {% set linkUrl = isExternal ? article.externalLink : '/actualite-de-l-audition/' ~ article.slug %}
  958.                                     {% set linkTarget = isExternal ? '_blank' : '_self' %}
  960.                                     <a class="btn btn-vert btn-outline-light me-2" href="{{ linkUrl }}" target="{{ linkTarget }}">VOIR PLUS</a>
  961.                                 </div>
  962.                             </div>
  963.                         </div>
  964.                     {% endfor %}
  965.                 </div>
  966.             </div>
  967.         </section>
  968.     {% endif %}
  970.     <!-- Stats -->
  971.     <section class="number_stat" id="number_stat">
  972.         <div class="container">
  973.             <div class="row stats_home justify-content-evenly">
  974.                 <div class="col-6 col-md-2">
  975.                     <h3 class="compteurPartenaire">...</h3>
  976.                     <h5>PARTENAIRES AUDIOPROTHÉSISTES</h5>
  977.                 </div>
  978.                 <div class="col-6 col-md-2">
  979.                     <h3 class="compteurTest">...</h3>
  980.                     <h5>TEST AUDITIFS RÉALISÉS</h5>
  981.                 </div>
  982.                 <div class="col-6 col-md-2">
  983.                     <h3 class="compteurAdherent">...</h3>
  984.                     <h5>ADHÉRENTS AU RÉSEAU</h5>
  985.                 </div>
  986.                 <div class="col-6 col-md-2">
  987.                     <h3>
  988.                         <span class="compteurSatisfaction">...</span>%</h3>
  989.                     <h5>SATISFACTION</h5>
  990.                 </div>
  991.                 <div class="col-6 col-md-2">
  992.                     <h3>
  993.                         <span class="compteurAudioReference">...</span>
  994.                     </h3>
  995.                     <h5>NOMBRE D'AUDIOPROTHÉSISTES RÉFÉRENCÉS</h5>
  996.                 </div>
  997.             </div>
  999.         </div>
  1000.     </section>
  1002.     <!-- playstore -->
  1003.     <section class="linear_store_section">
  1004.         <div class="container">
  1005.             <div class=" row align-items-center store_section">
  1006.                 <div class="col-md-4">
  1007.                     <h5>L'application mobile My Audio est maintenant disponible sur votre smartphone, Apple ou Android
  1008.                     </h5>
  1009.                     <p>Pour retrouver toutes les fonctions et services de My Audio, sur votre téléphone.</p>
  1010.                     <div class="logos-phone-wraper">
  1011.                         <div>
  1012.                             <a href="https://play.google.com/store/apps/details?id=com.myaudio.my_audio_android&hl=fr_FR" target="_blank">
  1013.                                 <img src="../assets/img/googleplay.png"/>
  1014.                             </a>
  1015.                         </div>
  1016.                         <div>
  1017.                             <a href="https://apps.apple.com/fr/app/my-audio/id1613143910" target="_blank">
  1018.                                 <img src="../assets/img/logo_app_store.png"/>
  1019.                             </a>
  1020.                         </div>
  1021.                     </div>
  1022.                 </div>
  1023.                 <div class="col-md-3">
  1024.                     <img class="img_appli" src="/assets/img/accueil/Appli.png" alt="img_appli">
  1025.                 </div>
  1026.                 <div class="col-md-4">
  1027.                     <p>Disponible sur Apple et Android</p>
  1028.                     <p>Prise de rendez-vous simple et rapide avec votre professionnel de l'audition.</p>
  1029.                 </div>
  1030.             </div>
  1031.         </div>
  1032.     </section>
  1033.     <script src="/assets/js/script.js"></script>
  1034.     <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCRmNV4VerjHHrsOoQOMmRWwpKL_ekzJrc&libraries=geometry,drawing,places&callback=initMap"></script>
  1037. {% endblock %}