templates/default/index.html.twig line 1

  1. {% extends 'base_front.html.twig' %}
  3. {% block title %}Hello DefaultController!{% endblock %}
  5. {% block body %}
  7. <section id="animated-slider" class="slider-with-animations">
  8.     <!-- Fond flou dynamique (optionnel) -->
  9.     <div class="slider-background"></div>
  10.     <div class="swiper-container">
  11.         <div class="swiper-wrapper">
  12.            {% for actualite in actualites %}
  13.             <div class="swiper-slide">
  14.                 <div class="slide-content">
  15.                     <a href="upload/actualites/{{ actualite.imageNom }}" data-lightbox="animated-gallery">
  16.                         <img src="upload/actualites/{{ actualite.imageNom }}" alt="Image 1" class="slide-image">
  17.                         <div class="slide-caption animate-on-scroll">
  18.                            <!-- <h3 class="title-animate">Titre Image 1</h3>-->
  19.                              <!--<p class="desc-animate">Description de l'image 1</p>-->
  20.                         </div>
  21.                     </a>
  22.                 </div>
  23.             </div>
  25.         {% endfor %}
  26.             <!-- Slide 1 -->
  27.           {#   <div class="swiper-slide">
  28.                 <div class="slide-content">
  29.                     <a href="upload/actualites/actualite_photo_15.jpg" data-lightbox="animated-gallery">
  30.                         <img src="upload/actualites/actualite_photo_15.jpg" alt="Image 1" class="slide-image">
  31.                         <div class="slide-caption animate-on-scroll">
  32.                            <!-- <h3 class="title-animate">Titre Image 1</h3>-->
  33.                              <!--<p class="desc-animate">Description de l'image 1</p>-->
  34.                         </div>
  35.                     </a>
  36.                 </div>
  37.             </div>
  38.             
  39.             <!-- Slide 2 -->
  40.             <div class="swiper-slide">
  41.                 <div class="slide-content">
  42.                     <a href="upload/actualites/actualite_photo_16.jpg" data-lightbox="animated-gallery">
  43.                         <img src="upload/actualites/actualite_photo_16.jpg" alt="Image 2" class="slide-image">
  44.                         <div class="slide-caption animate-on-scroll">
  45.                           <!--  <h3 class="title-animate">Titre Image 2</h3>-->
  46.                           <!--  <p class="desc-animate">Description de l'image 2</p>-->
  47.                         </div>
  48.                     </a>
  49.                 </div>
  50.             </div>
  51.         </div>#}
  52.         
  53.         <!-- Navigation -->
  54.         
  55.         
  56.         <!-- Pagination with animation -->
  57.         <div class="swiper-pagination anim-pag"></div>
  58.     </div>
  59. </section>
  62.     
  64.     <!-- Content ============================================= -->
  65.     <!--
  66.     <section id="content">
  67.     <div class="content-wrap" style="padding: 0;">
  68.         <div class="container mb-4">
  69.             <h2 class="text-center mb-4 ls-1">Nos Projets</h2>
  70.            <div class="row justify">
  71.     {% if projets is empty %}
  72.         <p class="text-center">Aucun projet disponible pour le moment.</p>
  73.     {% else %}
  74.         {% for projet in projets %}
  75.             <div class="col-sm-6 col-lg-3 mb-4">
  76.                 <a href="{{ path('app_projet_details', {'id': projet.id}) }}">
  77.                     <div class="feature-box media-box">
  78.                         <div class="fbox-media">
  79.                             {% if projet.image is not null %}
  80.                                 <img class="rounded img-fluid" src="/upload/projets/{{ projet.image }}" alt="{{ projet.image }}" style="height:50%;">
  81.                             {% else %}
  82.                                 <img class="rounded img-fluid" src="/upload/staicImage/logoProjetStatic.png" alt="Default Image" style="height:112px;width: 39%;">
  83.                             {% endif %}
  84.                         </div>
  85.                         <div class="fbox-content px-2">
  86.                             <h3>{{ projet.nom }}<span class="subtitle">{{ projet.structure.nomLong }}</span></h3>
  87.                         </div>
  88.                     </div>
  89.                 </a>
  90.             </div>
  91.         {% endfor %}
  92.     {% endif %}
  93. </div>
  95.         </div>
  96.     </div>
  97. </section>
  98.     -->
  99.     <!-- #content end -->
  101.     <!-- Content ============================================= -->
  102.   
  105.     <section id="content" class="research-content">
  106.         <div class="content-wrap" style="padding: 0;">
  107.             <!-- Projects Section -->
  108.             <div class="container py-5">
  109.                 <div class="section-header text-center mb-5">
  110.                     <h2 class="section-title">Certains de nos projets les plus appréciés</h2>
  111.                 </div>
  112.                 
  113.                 <div class="row g-4 justify-content-center">
  114.                     {% if projets is empty %}
  115.                         <p class="text-center">Aucun projet disponible pour le moment.</p>
  116.                     {% else %}
  117.                         {% for projet in projets %}
  119.                             <div class="col-sm-6 col-lg-3">
  120.                                 <div class="project-card">
  121.                                     <div class="project-media">
  122.                                         {% if projet.image is not null %}
  123.                                             <img class="project-image" src="/upload/projets/{{ projet.image }}" alt="{{ projet.nom }}">
  124.                                         {% else %}
  125.                                             <img class="project-image" src="/upload/staicImage/empty-project.jpg" alt="{{ projet.nom }}">
  126.                                         {% endif %}
  127.                                         <div class="project-overlay">
  128.                                             <a href="{{ path('app_projet_details', {'id': projet.id}) }}" class="btn btn-outline-light">Voir le projet</a>
  129.                                         </div>
  130.                                     </div>
  131.                                     <div class="project-content">
  132.                                         <h3 class="project-title">
  133.                                             <a href="{{ path('app_projet_details', {'id': projet.id}) }}">
  134.                                                 {{ projet.nom }}
  135.                                             </a>
  136.                                         </h3>
  137.                                         <p class="project-category">{{ projet.structure.nomLong }}</p>
  138.                                     </div>
  139.                                 </div>
  140.                             </div>
  141.                         {% endfor %}
  142.                     {% endif %}
  144.                     
  145.                 </div>
  146.             </div>
  150.             <!-- Stats Section -->
  151.             <div class="stats-section py-5">
  152.                 <div class="container">
  153.                     <div class="row g-4 justify-content-center">
  154.                         <div class="col-lg-3 col-md-6">
  155.                             <div class="stat-card">
  156.                                 <div class="stat-icon">
  157.                                     <img src="/front/icons/structure-recherche.png" alt="Structures de recherche">
  158.                                 </div>
  159.                                {#  <div class="stat-content">
  160.                                     <div class="stat-number counter" data-from="0" data-target="{{ nbrStructureRecherche }}">0</div>
  161.                                     <h3 class="stat-title">Structures de recherche</h3>
  162.                                 </div>#}
  163.                                 <div class="stat-content position-relative text-center">
  164.                                     <!-- Badge container with subtle border and shadow -->
  165.                                     <div class="stat-badge position-relative bg-white rounded-4 p-2 shadow-sm mb-3">
  166.                                         <!-- Animated counter number -->
  167.                                         <div class="stat-number counter display-3 fw-bold mb-1" data-target="{{ nbrStructureRecherche }}">0</div>
  168.                                     </div>
  170.                                     <!-- Title with animated underline -->
  171.                                     <h3 class="stat-title fs-5 fw-medium text-uppercase letter-spacing-1 position-relative d-inline-block px-3">
  172.                                         Structures de recherche
  173.                                         <span class="title-underline"></span>
  174.                                     </h3>
  176.                                     <!-- Decorative corner elements -->
  177.                                    {#  <span class="position-absolute top-0 start-0 stat-corner stat-corner-tl"></span>
  178.                                     <span class="position-absolute top-0 end-0 stat-corner stat-corner-tr"></span>
  179.                                     <span class="position-absolute bottom-0 start-0 stat-corner stat-corner-bl"></span>
  180.                                     <span class="position-absolute bottom-0 end-0 stat-corner stat-corner-br"></span>#}
  181.                                 </div>
  183.                             </div>
  184.                         </div>
  185.                         
  186.                         <div class="col-lg-3 col-md-6">
  187.                             <div class="stat-card">
  188.                                 <div class="stat-icon">
  189.                                     <img src="/front/icons/chercheurs.png" alt="Chercheurs">
  190.                                 </div>
  191.                                {#  <div class="stat-content">
  192.                                     <div class="stat-number counter" data-from="0" data-target="{{ nbrChercheurs }}">0</div>
  193.                                     <h3 class="stat-title">Chercheurs</h3>
  194.                                 </div>#}
  195.                                 <div class="stat-content position-relative text-center">
  196.                                     <!-- Badge container with subtle border and shadow -->
  197.                                     <div class="stat-badge position-relative bg-white rounded-4 p-2 shadow-sm mb-3">
  198.                                         <!-- Animated counter number -->
  199.                                         <div class="stat-number counter display-3 fw-bold  mb-1" data-target="{{ nbrChercheurs }}">0</div>
  200.                                     </div>
  202.                                     <!-- Title with animated underline -->
  203.                                     <h3 class="stat-title fs-5 fw-medium text-uppercase letter-spacing-1 position-relative d-inline-block px-3">
  204.                                         Chercheurs
  205.                                         <span class="title-underline"></span>
  206.                                     </h3>
  208.                                     <!-- Decorative corner elements -->
  209.                                     {#  <span class="position-absolute top-0 start-0 stat-corner stat-corner-tl"></span>
  210.                                     <span class="position-absolute top-0 end-0 stat-corner stat-corner-tr"></span>
  211.                                     <span class="position-absolute bottom-0 start-0 stat-corner stat-corner-bl"></span>
  212.                                     <span class="position-absolute bottom-0 end-0 stat-corner stat-corner-br"></span>#}
  213.                                 </div>
  214.                             </div>
  215.                         </div>
  216.                         
  217.                         <div class="col-lg-3 col-md-6">
  218.                             <div class="stat-card">
  219.                                 <div class="stat-icon">
  220.                                     <img src="/front/icons/projet.png" alt="Projets">
  221.                                 </div>
  222.                                 {#<div class="stat-content">
  223.                                     <div class="stat-number counter" data-from="0" data-target="{{ nbrProjet }}">0</div>
  224.                                     <h3 class="stat-title">Projets</h3>
  225.                                 </div>#}
  226.                                 <div class="stat-content position-relative text-center">
  227.                                     <!-- Badge container with subtle border and shadow -->
  228.                                     <div class="stat-badge position-relative bg-white rounded-4 p-2 shadow-sm mb-3">
  229.                                         <!-- Animated counter number -->
  230.                                         <div class="stat-number counter display-3 fw-bold  mb-1" data-target="{{ nbrProjet }}">0</div>
  231.                                     </div>
  233.                                     <!-- Title with animated underline -->
  234.                                     <h3 class="stat-title fs-5 fw-medium text-uppercase letter-spacing-1 position-relative d-inline-block px-3">
  235.                                         Projets
  236.                                         <span class="title-underline"></span>
  237.                                     </h3>
  239.                                     <!-- Decorative corner elements -->
  240.                                     {#  <span class="position-absolute top-0 start-0 stat-corner stat-corner-tl"></span>
  241.                                     <span class="position-absolute top-0 end-0 stat-corner stat-corner-tr"></span>
  242.                                     <span class="position-absolute bottom-0 start-0 stat-corner stat-corner-bl"></span>
  243.                                     <span class="position-absolute bottom-0 end-0 stat-corner stat-corner-br"></span>#}
  244.                                 </div>
  245.                             </div>
  246.                         </div>
  247.                         
  248.                         <div class="col-lg-3 col-md-6">
  249.                             <div class="stat-card">
  250.                                 <div class="stat-icon">
  251.                                     <img src="/front/icons/journal.png" alt="Publications">
  252.                                 </div>
  253.                                 {#<div class="stat-content">
  254.                                     <div class="stat-number counter" data-from="0"  data-target="{{ nbrPublications }}">0</div>
  255.                                     <h3 class="stat-title">Publications</h3>
  256.                                 </div>#}
  257.                                 <div class="stat-content position-relative text-center">
  258.                                     <!-- Badge container with subtle border and shadow -->
  259.                                     <div class="stat-badge position-relative bg-white rounded-4 p-2 shadow-sm mb-3">
  260.                                         <!-- Animated counter number -->
  261.                                         <div class="stat-number counter display-3 fw-bold mb-1" data-target="{{ nbrPublications }}">0</div>
  262.                                     </div>
  264.                                     <!-- Title with animated underline -->
  265.                                     <h3 class="stat-title fs-5 fw-medium text-uppercase letter-spacing-1 position-relative d-inline-block px-3">
  266.                                         Publications
  267.                                         <span class="title-underline"></span>
  268.                                     </h3>
  270.                                     <!-- Decorative corner elements -->
  271.                                    {#  <span class="position-absolute top-0 start-0 stat-corner stat-corner-tl"></span>
  272.                                     <span class="position-absolute top-0 end-0 stat-corner stat-corner-tr"></span>
  273.                                     <span class="position-absolute bottom-0 start-0 stat-corner stat-corner-bl"></span>
  274.                                     <span class="position-absolute bottom-0 end-0 stat-corner stat-corner-br"></span>#}
  275.                                 </div>
  276.                             </div>
  277.                         </div>
  278.                     </div>
  279.                 </div>
  280.             </div>
  281.         </div>
  282.     </section>
  283.     <!-- #content end -->
  284.     <script>
  285. document.addEventListener('DOMContentLoaded', function() {
  286.     const originalImages = Array.from(document.querySelectorAll('.swiper-slide img')).map(img => img.src);
  287.     
  288.     let lastBackgroundIndex = null;
  290.     const slider = new Swiper('.swiper-container', {
  291.         loop: true,
  292.         autoplay: {
  293.             delay: 6000,
  294.             disableOnInteraction: false,
  295.         },
  296.         pagination: {
  297.             el: '.swiper-pagination',
  298.             clickable: true,
  299.         },
  300.         on: {
  301.             init: function() {
  302.                 updateBackground(this.realIndex);
  303.             },
  304.             slideChangeTransitionEnd: function() {
  305.                 // On utilise slideChangeTransitionEnd au lieu de slideChange
  306.                 updateBackground(this.realIndex);
  307.             }
  308.         }
  309.     });
  311.     function updateBackground(realIndex) {
  312.         // Calculer l'index correct (0 ou 1) pour nos 2 slides
  313.         const backgroundIndex = realIndex % originalImages.length;
  314.         
  315.         // Ne rien faire si l'arrière-plan est déjà à jour
  316.         if (backgroundIndex === lastBackgroundIndex) return;
  317.         
  318.         const bg = document.querySelector('.slider-background');
  319.         const imgSrc = originalImages[backgroundIndex];
  320.         
  321.         // Préchargement de l'image
  322.         const tempImg = new Image();
  323.         tempImg.onload = function() {
  324.             bg.style.backgroundImage = `url(${imgSrc})`;
  325.             bg.style.opacity = '0.7';
  326.             lastBackgroundIndex = backgroundIndex;
  327.         };
  328.         tempImg.onerror = function() {
  329.             console.error("Erreur de chargement de l'image de fond");
  330.         };
  331.         tempImg.src = imgSrc;
  332.     }
  334.   
  335.     // Stocker les URLs des images originales (sans les slides dupliquées)
  336.    /* const originalImages = [
  337.         document.querySelector('.swiper-slide:nth-child(1) img').src,
  338.         document.querySelector('.swiper-slide:nth-child(2) img').src
  339.     ];
  340.     
  341.     let lastBackgroundIndex = null;
  343.     const slider = new Swiper('.swiper-container', {
  344.         loop: true,
  345.         autoplay: {
  346.             delay: 6000,
  347.             disableOnInteraction: false,
  348.         },
  349.         pagination: {
  350.             el: '.swiper-pagination',
  351.             clickable: true,
  352.         },
  353.         on: {
  354.             init: function() {
  355.                 updateBackground(this.realIndex);
  356.             },
  357.             slideChangeTransitionEnd: function() {
  358.                 // On utilise slideChangeTransitionEnd au lieu de slideChange
  359.                 updateBackground(this.realIndex);
  360.             }
  361.         }
  362.     });
  364.     function updateBackground(realIndex) {
  365.         // Calculer l'index correct (0 ou 1) pour nos 2 slides
  366.         const backgroundIndex = realIndex % 2;
  367.         
  368.         // Ne rien faire si l'arrière-plan est déjà à jour
  369.         if (backgroundIndex === lastBackgroundIndex) return;
  370.         
  371.         const bg = document.querySelector('.slider-background');
  372.         const imgSrc = originalImages[backgroundIndex];
  373.         
  374.         // Préchargement de l'image
  375.         const tempImg = new Image();
  376.         tempImg.onload = function() {
  377.             bg.style.backgroundImage = `url(${imgSrc})`;
  378.             bg.style.opacity = '0.7';
  379.             lastBackgroundIndex = backgroundIndex;
  380.         };
  381.         tempImg.onerror = function() {
  382.             console.error("Erreur de chargement de l'image de fond");
  383.         };
  384.         tempImg.src = imgSrc;
  385.     }*/
  387.      const counters = document.querySelectorAll('.counter');
  388.         const speed = 200;        
  389.         counters.forEach(counter => {
  390.             const target = +counter.getAttribute('data-target');
  391.             const count = +counter.innerText;
  392.             const increment = target / speed;
  393.            
  394.             
  395.             if (count < target) {
  396.                 counter.innerText = Math.ceil(count + increment);
  397.                 setTimeout(updateCounter, 1);
  398.             } else {
  399.                 counter.innerText = target;
  400.             }
  401.             
  402.             function updateCounter() {
  403.                 const count = +counter.innerText;
  404.                 if (count < target) {
  405.                     counter.innerText = Math.ceil(count + increment);
  406.                     setTimeout(updateCounter, 1);
  407.                 } else {
  408.                     counter.innerText = target;
  409.                 }
  410.             }
  411.         });
  412. });
  413.  
  414. </script>
  417. {% endblock %}