templates/master/home_new.html.twig line 1

Open in your IDE?
  1. {% extends 'base_home_new.html.twig' %}
  3. {% block bodymid %}
  4.     <!-- Hero Section -->
  5.     <section id="hero" class="hero section dark-background">
  7.         <div class="container">
  8.             <div class="row gy-4">
  9.                 <div class="col-lg-6 order-2 order-lg-1 d-flex flex-column justify-content-center"
  10.                      data-aos="zoom-out">
  11.                     <img src="{{ asset('assets/img/logoHVK.png') }}" class="img-fluid animated" alt=""
  12.                          style="height:100px;width:100px"> <br>
  13.                     <h1>Faites vos demandes en ligne</h1>
  14.                     <p>Retrouvez toutes les informations nécessaires pour aborder
  15.                         sereinement vos démarches d’état-civil et d'autres services communaux</p>
  16.                     <div class="d-flex">
  17.                         <a href="{{ path('app_core_initiate_request.fr') }}" class="btn-get-started">Commencez</a>
  18.                     </div>
  19.                 </div>
  20.                 <div class="col-lg-6 order-1 order-lg-2 hero-img" data-aos="zoom-out" data-aos-delay="200">
  21.                     <img src="{{ asset('Arsha/assets/img/hero-img.png') }}" class="img-fluid animated" alt="">
  22.                 </div>
  23.             </div>
  24.         </div>
  26.     </section><!-- /Hero Section -->
  28.     <footer id="footer" class="footer">
  29.         <div class="footer-newsletter">
  30.             <div class="container">
  31.                 <div class="row justify-content-center text-center">
  32.                     <div class="col-lg-6">
  33.                         <h4>Rechercher un document</h4>
  34.                         <p>Recherchez le document que vous souhaitez demander en ligne.</p>
  35.                         {{ form_start(docForm, {'action' : path('app_online_procedure_search_documents_get'), 'attr' : {'class' : 'php-email-form'}}) }}
  36.                         <div class="newsletter-form">
  37.                             {{ form_widget(docForm.document, {'attr': {'class': 'form-control', 'placeholder': 'Certificat de résidence, Extrait de naissance, etc.'}}) }}
  38.                             <input type="submit" value="Rechercher">
  39.                         </div>
  40.                         <div class="loading">Loading</div>
  41.                         <div class="error-message"></div>
  42.                         <div class="sent-message">Your subscription request has been sent. Thank you!</div>
  43.                         {{ form_end(docForm , {'render_rest' : false}) }}
  44.                     </div>
  45.                 </div>
  46.             </div>
  47.         </div>
  48.     </footer>
  51.     <!-- Documents most printed Section -->
  52.     <section id="services" class="services section">
  54.         <!-- Section Title -->
  55.         <div class="container section-title" data-aos="fade-up">
  56.             <h2>Les documents les plus produits</h2>
  57.             {#            <p>Necessitatibus eius consequatur ex aliquid fuga eum quidem sint consectetur velit</p> #}
  58.         </div><!-- End Section Title -->
  60.         <div class="container">
  61.             <div id="loader" style="display: none;">Chargement...</div>
  62.             <div class="row gy-4" id="document-categories-container">
  63.             </div>
  65.         </div>
  67.     </section><!-- /Documents most printed Section -->
  69.     <!-- Services Section -->
  70.     <section id="services" class="services section">
  72.         <!-- Section Title -->
  73.         <div class="container section-title" data-aos="fade-up">
  74.             <h2>Services Communaux en Ligne</h2>
  75.             <p>Accédez aux services communaux de n'importe où de manière simple et efficace. MOKANDA réduit la distance
  76.                 entre l'administration et ses administrés.</p>
  77.         </div><!-- End Section Title -->
  79.         <div class="container">
  81.             <div class="row gy-4">
  83.                 <div class="col-lg-3 col-md-6 d-flex" data-aos="fade-up" data-aos-delay="100">
  84.                     <div class="service-item position-relative">
  85.                         <div class="icon"><i class="bi bi-file-earmark-text icon"></i></div>
  86.                         <h4><a href="#" class="stretched-link">Demande en ligne des documents</a></h4>
  87.                         <p>Simplifiez vos démarches en effectuant des demandes de documents administratifs directement
  88.                             en ligne.</p>
  89.                     </div>
  90.                 </div><!-- End Service Item -->
  91.                 <div class="col-lg-3 col-md-6 d-flex" data-aos="fade-up" data-aos-delay="100">
  92.                     <div class="service-item position-relative">
  93.                         <div class="icon"><i class="bi bi-credit-card icon"></i></div>
  94.                         <h4><a href="#" class="stretched-link">Paiement électronique des services</a></h4>
  95.                         <p>Payez facilement vos services publics en ligne via un système de paiement électronique
  96.                             sécurisé.</p>
  97.                     </div>
  98.                 </div><!-- End Service Item -->
  99.                 <div class="col-lg-3 col-md-6 d-flex" data-aos="fade-up" data-aos-delay="100">
  100.                     <div class="service-item position-relative">
  101.                         <div class="icon"><i class="bi bi-geo-alt icon"></i></div>
  102.                         <h4><a href="#" class="stretched-link">Suivi du dossier à distance.</a></h4>
  103.                         <p>Suivez l'avancement de vos dossiers en temps réel, sans avoir à vous déplacer.</p>
  104.                     </div>
  105.                 </div><!-- End Service Item -->
  106.                 <div class="col-lg-3 col-md-6 d-flex" data-aos="fade-up" data-aos-delay="100">
  107.                     <div class="service-item position-relative">
  108.                         <div class="icon"><i class="bi bi-clock-history icon"></i></div>
  109.                         <h4><a href="#" class="stretched-link">Traçabilité des documents</a></h4>
  110.                         <p>Assurez une traçabilité complète de vos documents pour plus de transparence et de
  111.                             sécurité.</p>
  112.                     </div>
  113.                 </div><!-- End Service Item -->
  115.             </div>
  117.         </div>
  119.     </section><!-- /Services Section -->
  125. {% endblock %}
  127. {% block bodyend %}
  128. {% endblock %}
  130. {% block javascripts %}
  131.     {{ parent() }}
  132.     <script type="application/javascript">
  133.         $(document).ready(function () {
  134.             getMostPrintedDocuments();
  135.         });
  139.         function getMostPrintedDocuments() {
  140.             const loader = $('#loader');
  141.             const container = $('#document-categories-container');
  143.             loader.show();
  145.             $.ajax({
  146.                 url: '{{ path('app_document_category_most_printed') }}',
  147.                 method: 'GET',
  148.                 dataType: 'json',
  149.                 success: function (data) {
  150.                     loader.hide();
  151.                     container.empty();  // Vider le conteneur avant d'ajouter les nouveaux éléments
  152.                     let htmlContent = [];
  153.                     data.forEach(function (item) {
  154.                         htmlContent.push(`
  155.                     <div class="col-lg-3 col-md-6 d-flex" data-aos="fade-up" data-aos-delay="100">
  156.                         <div class="service-item position-relative">
  157.                             <div class="icon"><i class="${item.iconClass} icon"></i></div>
  158.                             <h4><a href="${item.url}" class="stretched-link">${item.documentName}</a></h4>
  159.                             <p>${item.service}</p>
  160.                         </div>
  161.                     </div>
  162.                 `);
  163.                     });
  165.                     container.append(htmlContent.join(''));
  166.                 },
  167.                 error: function (xhr, status, error) {
  168.                     loader.hide();
  169.                     alert(`An error occurred: ${status} - ${error}`);
  170.                 }
  171.             });
  172.         }
  175.         /* function getMostPrintedDocuments() {
  176.              $('#loader').show();
  177.              $.ajax({
  178.                  url: '{{ path('app_document_category_most_printed') }}',
  179.                 method: 'GET',
  180.                 dataType: 'json',
  181.                 success: function (data) {
  182.                     console.log(data);
  183.                     $('#loader').hide();
  184.                     const container = $('#document-categories-container');
  185.                     data.forEach(function (item) {
  186.                         const div = `
  187.     <div class="col-lg-3 col-md-6 d-flex" data-aos="fade-up" data-aos-delay="100">
  188.         <div class="service-item position-relative">
  189.             <div class="icon"><i class="${item.iconClass} icon"></i></div>
  190.             <h4><a href="{{ path('app_online_procedure_document', {'id': '${item.id}'}) }}" class="stretched-link">${item.documentName}</a></h4>
  191.             <p>${item.service}</p>
  192.         </div>
  193.     </div>
  194.     `;
  195.                         container.append(div);
  196.                     });
  197.                 },
  198.                 error: function () {
  199.                     $('#loader').hide();
  200.                     alert('An error occurred while loading the data.');
  201.                 }
  202.             });
  203.         }*/
  204.     </script>
  207. {% endblock %}