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