templates/fronts/list_laboratoires.html.twig line 1

  1. {% extends 'base_front.html.twig' %}
  3. {% block title %}Hello DefaultController!{% endblock %}
  5. {% block body %}
  7. <!-- Content ============================================= -->
  8. <section id="content">
  9.     <div class="col-mt-30">
  11.         <div class="stats-section py-5">
  12.             <div class="container">
  13.                 <div class="row g-4 justify-content-center">
  14.                     <!-- Laboratoires -->
  15.                     <div class="col-lg-3 col-md-6">
  16.                         <div class="stat-card">
  17.                             <div class="stat-icon">
  18.                                 <img src="/front/icons/structure.png" alt="Laboratoires" class="img-fluid">
  19.                             </div>
  20.                            
  21.                             <div class="stat-content position-relative text-center">
  22.                                 <!-- Badge container with subtle border and shadow -->
  23.                                 <div class="stat-badge position-relative bg-white rounded-4 p-2 shadow-sm mb-3">
  24.                                     <!-- Animated counter number -->
  25.                                     <div class="stat-number counter display-3 fw-bold  mb-1" data-target="{{ nbrStructureRechercheLabo }}">0</div>
  26.                                 </div>
  28.                                 <!-- Title with animated underline -->
  29.                                 <h3 class="stat-title fs-5 fw-medium text-uppercase letter-spacing-1 position-relative d-inline-block px-3">
  30.                                     Laboratoires
  31.                                     <span class="title-underline"></span>
  32.                                 </h3>
  34.                                
  35.                             </div>
  37.                             <div class="stat-wave">
  38.                                 <svg viewBox="0 0 500 150" preserveAspectRatio="none"><path d="M0,50 C150,150 350,0 500,50 L500,150 L0,150 Z"></path></svg>
  39.                             </div>
  40.                         </div>
  41.                     </div>
  43.                     <!-- Unités -->
  44.                     <div class="col-lg-3 col-md-6">
  45.                         <div class="stat-card">
  46.                             <div class="stat-icon">
  47.                                 <img src="/front/icons/unite.png" alt="Unités" class="img-fluid">
  48.                             </div>
  49.                            
  50.                             <div class="stat-content position-relative text-center">
  51.                                 <!-- Badge container with subtle border and shadow -->
  52.                                 <div class="stat-badge position-relative bg-white rounded-4 p-2 shadow-sm mb-3">
  53.                                     <!-- Animated counter number -->
  54.                                     <div class="stat-number counter display-3 fw-bold  mb-1" data-target="{{ nbrStructureRechercheUnite }}">0</div>
  55.                                 </div>
  57.                                 <!-- Title with animated underline -->
  58.                                 <h3 class="stat-title fs-5 fw-medium text-uppercase letter-spacing-1 position-relative d-inline-block px-3">
  59.                                     Unités
  60.                                     <span class="title-underline"></span>
  61.                                 </h3>
  63.                                 
  64.                             </div>
  65.                             <div class="stat-wave">
  66.                                 <svg viewBox="0 0 500 150" preserveAspectRatio="none"><path d="M0,50 C150,150 350,0 500,50 L500,150 L0,150 Z"></path></svg>
  67.                             </div>
  68.                         </div>
  69.                     </div>
  71.                     <!-- Projets -->
  72.                     <div class="col-lg-3 col-md-6">
  73.                         <div class="stat-card">
  74.                             <div class="stat-icon">
  75.                                 <img src="/front/icons/projet.png" alt="Projets" class="img-fluid">
  76.                             </div>
  77.                             
  78.                             <div class="stat-content position-relative text-center">
  79.                                 <!-- Badge container with subtle border and shadow -->
  80.                                 <div class="stat-badge position-relative bg-white rounded-4 p-2 shadow-sm mb-3">
  81.                                     <!-- Animated counter number -->
  82.                                     <div class="stat-number counter display-3 fw-bold  mb-1" data-target="{{ nbrProjet }}">0</div>
  83.                                 </div>
  85.                                 <!-- Title with animated underline -->
  86.                                 <h3 class="stat-title fs-5 fw-medium text-uppercase letter-spacing-1 position-relative d-inline-block px-3">
  87.                                     Projets
  88.                                     <span class="title-underline"></span>
  89.                                 </h3>
  91.                                
  92.                             </div>
  94.                             <div class="stat-wave">
  95.                                 <svg viewBox="0 0 500 150" preserveAspectRatio="none"><path d="M0,50 C150,150 350,0 500,50 L500,150 L0,150 Z"></path></svg>
  96.                             </div>
  97.                         </div>
  98.                     </div>
  100.                     <!-- Chercheurs -->
  101.                     <div class="col-lg-3 col-md-6">
  102.                         <div class="stat-card">
  103.                             <div class="stat-icon">
  104.                                 <img src="/front/icons/chercheurs.png" alt="Chercheurs" class="img-fluid">
  105.                                 
  106.                             </div>
  107.                             
  108.                             <div class="stat-content position-relative text-center">
  109.                                 <!-- Badge container with subtle border and shadow -->
  110.                                 <div class="stat-badge position-relative bg-white rounded-4 p-2 shadow-sm mb-3">
  111.                                     <!-- Animated counter number -->
  112.                                     <div class="stat-number counter display-3 fw-bold mb-1" data-target="{{ nbrChercheursInscrit }}">0</div>
  113.                                 </div>
  115.                                 <!-- Title with animated underline -->
  116.                                 <h3 class="stat-title fs-5 fw-medium text-uppercase letter-spacing-1 position-relative d-inline-block px-3">
  117.                                     Chercheurs
  118.                                     <span class="title-underline"></span>
  119.                                 </h3>
  121.                                
  122.                             </div>
  123.                             <div class="stat-wave">
  124.                                 <svg viewBox="0 0 500 150" preserveAspectRatio="none"><path d="M0,50 C150,150 350,0 500,50 L500,150 L0,150 Z"></path></svg>
  125.                             </div>
  126.                         </div>
  127.                     </div>
  128.                 </div>
  129.             </div>
  130.         </div>
  132.         <div class="research-structures-section py-5">
  133.             <div class="container">
  134.                 <!-- Titre -->
  135.                 <h2 class="section-title text-center mb-5">Nos Structures de Recherche</h2>
  137.                 <!-- Filtres améliorés -->
  138.                 <div class="filter-container mb-5">
  139.                     <form id="filterForm" class="filter-form">
  140.                         <div class="row g-3">
  141.                             <div class="col-md-4">
  142.                                 <div class="filter-group">
  143.                                     <label for="filterEtablissement" class="filter-label">Filtrer par établissement</label>
  144.                                     <select name="filterEtablissement" id="filterEtablissement" class="form-select filter-select">
  145.                                         <option value="">Tous les établissements</option>
  146.                                         {% for etablissement in etablissements %}
  147.                                             <option value="{{ etablissement.id }}">{{ etablissement.nomLong }}</option>
  148.                                         {% endfor %}
  149.                                     </select>
  150.                                 </div>
  151.                             </div>
  152.                             <div class="col-md-4">
  153.                                 <div class="filter-group">
  154.                                     <label for="filterDomaine" class="filter-label">Filtrer par domaine</label>
  155.                                     <select name="filterDomaine" id="filterDomaine" class="form-select filter-select">
  156.                                         <option value="">Tous les domaines</option>
  157.                                         {% for domaine in domaines %}
  158.                                             <option value="{{ domaine.id }}">{{ domaine.nomFr }}</option>
  159.                                         {% endfor %}
  160.                                     </select>
  161.                                 </div>
  162.                             </div>
  163.                             <div class="col-md-4">
  164.                                 <div class="filter-group">
  165.                                     <label for="filterStructure" class="filter-label">Filtrer par Structure</label>
  166.                                     <div class="input-with-icon">
  167.                                         <input type="text" id="filterStructure" class="form-control" placeholder="Rechercher par structure">
  168.                                         <i class="fas fa-search"></i>
  169.                                     </div>
  170.                                 </div>
  171.                             </div>
  172.                         </div>
  173.                     </form>
  174.                 </div>
  176.                 <!-- Cartes des structures -->
  177.                 <div id="structureLaboContainer" class="row g-4">
  179.                     {% for stru in structureLabo %}
  180.                         <div class="col-lg-4 col-md-6 mb-4 structure-card" data-etablissement="{{ stru.etablissement.id }}"
  181.                         data-structure="{{ stru.nomLong }}"
  182.                         data-domaine="{% if stru.domaine is not null %}{{ stru.domaine.id }}{% else %}{% endif %}">
  183.                         <a href="{{ path('app_laboratoire_details', {'id': stru.id}) }}">
  185.                             <div class="structure-card-inner">
  186.                                 <div class="card-image">
  187.                                     {% if stru.logo is not null %}
  188.                                         <img src="/upload/structures/{{ stru.logo }}" alt="{{ stru.nomCourt }}" class="img-fluid"
  189.                                         style="width: 80%; height: 80%;">
  190.                                     {% else %}
  191.                                         <img src="/front/icons/structure-recherche.png" alt="{{ stru.nomCourt }}" class="img-fluid"
  192.                                         style="width: 80%; height: 80%;">
  193.                                     {% endif %}
  194.                                     <div class="card-badge">{{ stru.type == 1 ? 'Unite': stru.type == 2 ? ' Laboratoire':'Unité de service commun'}}</div>
  195.                                 </div>
  196.                                 <div class="card-content">
  197.                                     <h3 class="card-title">{{ stru.nomLong }}</h3>
  198.                                     <div class="card-footer">
  199.                                         <span class="institution">{{ stru.etablissement.nomLong }}</span>
  200.                                         {% if stru.domaine is not null %}
  201.                                           {{ stru.domaine.nomFr }}
  202.                                       {% endif %}
  203.                                       <span class="view-more">Voir plus <i class="fas fa-arrow-right"></i></span>
  204.                                   </div>
  205.                               </div>
  206.                           </div>
  207.                       </a>
  208.                   </div>
  209.               {% endfor %}
  212.               <!-- ... -->
  213.           </div>
  215.       </div>
  216.   </div>
  219.         
  220.     </div>
  221. </section>
  222. <!-- #content end -->
  224. <script>
  225.     document.addEventListener('DOMContentLoaded', function() {
  226.         const filterForm = document.getElementById('filterForm');
  227.         const structureCards = document.querySelectorAll('.structure-card');
  229.         function filterStructures() {
  231.             const filterEtablissement = document.getElementById('filterEtablissement').value;
  232.             const filterDomaine = document.getElementById('filterDomaine').value;
  233.             const filterStructure = document.getElementById('filterStructure').value.toLowerCase();
  235.             structureCards.forEach(card => {
  236.                 const etablissement = card.getAttribute('data-etablissement');
  237.                 const domaine = card.getAttribute('data-domaine');
  238.                 const structure = card.getAttribute('data-structure').toLowerCase();
  240.                 let isVisible = true;
  242.                 if (filterEtablissement && etablissement !== filterEtablissement) {
  243.                     isVisible = false;
  244.                 }
  246.                 if (filterDomaine && domaine !== filterDomaine) {
  247.                     isVisible = false;
  248.                 }
  250.                 if (filterStructure && !structure.includes(filterStructure)) {
  251.                     isVisible = false;
  252.                 }
  254.                 card.style.display = isVisible ? 'block' : 'none';
  255.             });
  256.         }
  258.         filterForm.addEventListener('change', filterStructures);
  259.     });
  260. </script>
  262. <script>
  263.     // Animation des compteurs
  264.     document.addEventListener('DOMContentLoaded', function() {
  265.         const counters = document.querySelectorAll('.counter');
  266.         const speed = 200;
  267.         
  268.         function animateCounters() {
  269.             counters.forEach(counter => {
  270.                 const target = +counter.getAttribute('data-target');
  271.                 const count = +counter.innerText;
  272.                 const increment = target / speed;
  273.                 
  274.                 if (count < target) {
  275.                     counter.innerText = Math.ceil(count + increment);
  276.                     setTimeout(animateCounters, 1);
  277.                 } else {
  278.                     counter.innerText = target;
  279.                 }
  280.             });
  281.         }
  282.         
  283.         // Déclencher l'animation lorsque la section est visible
  284.         const observer = new IntersectionObserver((entries) => {
  285.             entries.forEach(entry => {
  286.                 if (entry.isIntersecting) {
  287.                     animateCounters();
  288.                     observer.unobserve(entry.target);
  289.                 }
  290.             });
  291.         }, { threshold: 0.5 });
  292.         
  293.         observer.observe(document.querySelector('.stats-section'));
  294.     });
  295. </script>
  297. {% endblock %}