templates/fronts/labo_details.html.twig line 1

  1. {% extends 'base_front.html.twig' %}
  3. {% block title %}{{ labo.nomLong }}{% endblock %}
  5. {% block body %}
  6. <section id="ldc-lab" class="section bg-light">
  7.     <!-- En-tête avec image de fond -->
  8.     <div class="hero-section" style="background: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)), url('/front/images/background-details.avif'); background-size: cover; background-position: center;">
  9.         <div class="container py-5 text-center text-white">
  10.             <h1 class="display-4 fw-bold mb-3 text-white">{{ labo.nomLong }}</h1>
  11.             <p class="lead">{{ labo.nomCourt }}</p>
  12.             <div class="lab-badge bg-coral text-white d-inline-block px-4 py-2 rounded-pill">
  13.                 <span class="me-2">{{ labo.type == 1 ? 'Unite': labo.type == 2 ? ' Laboratoire':'Unité de service commun'}}</span> 
  14.             </div>
  15.         </div>
  16.     </div>
  18.     <!-- Contenu principal -->
  19.     <div class="container py-5">
  20.         <div class="row">
  21.             <!-- Colonne principale -->
  22.             <div class="col-lg-8">
  24.                 <!-- À propos -->
  25.                 <div class="card shadow-sm mb-4">
  26.                     <div class="card-body">
  27.                         <div class="d-flex align-items-center mb-4">
  28.                             <div class="icon-box bg-coral text-white rounded-circle me-3">
  29.                                 <i class="fas fa-university"></i>
  30.                             </div>
  31.                             <h2 class="h4 mb-0">Présentation </h2>
  32.                         </div>
  33.                         
  34.                         <div class="lab-info mb-4">
  35.                             {{ labo.description|raw }}
  36.                         </div>
  37.                     </div>
  38.                 </div>
  39.                 
  40.                 
  41.             </div>
  42.             
  43.             <!-- Colonne latérale -->
  44.             <div class="col-lg-4">
  45.                 <!-- Galerie Slider -->
  46.                 {% if labo.image1  or labo.image2 or labo.image3 %}
  47.                     <div class="card shadow-sm mb-4">
  48.                         <div class="card-body">
  49.                             <h5 class="card-title text-center mb-4"><i class="fas fa-camera me-2"></i>Galerie</h5>
  51.                             <div class="gallery-slider position-relative">
  52.                                 <!-- Slider principal -->
  53.                                 <div class="swiper main-slider">
  54.                                     <div class="swiper-wrapper">
  55.                                         {% if labo.image1 %}
  56.                                             <!-- Slide 1 -->
  57.                                             <div class="swiper-slide">
  58.                                                 <a href="/upload/structures/{{ labo.image1 }}" data-lightbox="gallery">
  59.                                                     <img src="/upload/structures/{{ labo.image1 }}" alt="{{ labo.nomCourt }}" class="img-fluid rounded">
  60.                                                     <div class="slide-caption p-3">{{ labo.nomCourt }}</div>
  61.                                                 </a>
  62.                                             </div>
  63.                                         {% endif  %}
  64.                                         {% if labo.image2 %}
  65.                                             <!-- Slide 2 -->
  66.                                             <div class="swiper-slide">
  67.                                                 <a href="/upload/structures/{{ labo.image2 }}" data-lightbox="gallery">
  68.                                                     <img src="/upload/structures/{{ labo.image2 }}" alt="{{ labo.nomCourt }}" class="img-fluid rounded">
  69.                                                     <div class="slide-caption p-3">{{ labo.nomCourt }}</div>
  70.                                                 </a>
  71.                                             </div>
  72.                                         {% endif  %}
  73.                                         {% if labo.image3 %}
  74.                                             <!-- Slide 3 -->
  75.                                             <div class="swiper-slide">
  76.                                                 <a href="/upload/structures/{{ labo.image3 }}" data-lightbox="gallery">
  77.                                                     <img src="/upload/structures/{{ labo.image3 }}" alt="{{ labo.nomCourt }}" class="img-fluid rounded">
  78.                                                     <div class="slide-caption p-3">{{ labo.nomCourt }}</div>
  79.                                                 </a>
  80.                                             </div>
  81.                                         {% endif  %}
  82.                                     </div>
  84.                                     <!-- Pagination -->
  85.                                     <div class="swiper-pagination"></div>
  87.                                     <!-- Navigation -->
  88.                                     <div class="swiper-button-next"></div>
  89.                                     <div class="swiper-button-prev"></div>
  90.                                 </div>
  92.                             </div>
  93.                         </div>
  94.                     </div>
  96.                 {% endif  %}  
  97.                 <!-- Statistiques -->
  98.                 <div class="card shadow-sm mb-4">
  99.                     <div class="card-body">
  100.                         <h5 class="card-title text-center mb-4"><i class="fas fa-chart-bar me-2"></i>Chiffres clés</h5>
  101.                        {#<div class="stats-grid">
  102.                             <a href="{{ path('app_chercheurs', {'idStructure': labo.id}) }}" class="stat-item text-center py-3">
  103.                                 <div class="stat-value display-5 fw-bold text-coral">{{ nbrChercheurs }}</div>
  104.                                 <div class="stat-label text-coral">Chercheurs</div>
  105.                             </a>
  106.                             <a href="#" class="stat-item text-center py-3">
  107.                                 <div class="stat-value display-5 fw-bold text-coral">{{ nbrPublications }}</div>
  108.                                 <div class="stat-label text-coral">Publications</div>
  109.                             </a>
  110.                             <a href="{{ path('app_projets', {'idStructure': labo.id}) }}" class="stat-item text-center py-3">
  111.                                 <div class="stat-value display-5 fw-bold text-coral">{{ nbrProjet }}</div>
  112.                                 <div class="stat-label text-coral">Projets</div>
  113.                             </a>
  114.                         </div>#}
  116.                         <div class="stats-grid">
  117.                             <!-- Chercheurs Block -->
  118.                             <a href="{{ path('app_chercheurs', {'idStructure': labo.id}) }}" class="stat-item">
  119.                                 <div class="stat-content">
  120.                                     <div class="stat-value">{{ nbrChercheurs }}</div>
  121.                                     <div class="stat-label">Chercheurs</div>
  122.                                 </div>
  123.                                 <div class="stat-chiffre-icon">
  124.                                     <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  125.                                         <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path>
  126.                                         <circle cx="9" cy="7" r="4"></circle>
  127.                                         <path d="M23 21v-2a4 4 0 0 0-3-3.87"></path>
  128.                                         <path d="M16 3.13a4 4 0 0 1 0 7.75"></path>
  129.                                     </svg>
  130.                                 </div>
  131.                             </a>
  133.                             <!-- Projets Block -->
  134.                             <a href="{{ path('app_projets', {'idStructure': labo.id}) }}" class="stat-item">
  135.                                 <div class="stat-content">
  136.                                     <div class="stat-value">{{ nbrProjet }}</div>
  137.                                     <div class="stat-label">Projets</div>
  138.                                 </div>
  139.                                 <div class="stat-chiffre-icon">
  140.                                     <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  141.                                         <polygon points="12 2 2 7 12 12 22 7 12 2"></polygon>
  142.                                         <polyline points="2 17 12 22 22 17"></polyline>
  143.                                         <polyline points="2 12 12 17 22 12"></polyline>
  144.                                     </svg>
  145.                                 </div>
  146.                             </a>
  147.                             
  149.                             
  150.                             <!-- Publications Block -->
  151.                             <a href="#" class="stat-item">
  152.                                 <div class="stat-content">
  153.                                     <div class="stat-value">{{ nbrPublications }}</div>
  154.                                     <div class="stat-label">Publications</div>
  155.                                 </div>
  156.                                 <div class="stat-chiffre-icon">
  157.                                     <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  158.                                         <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
  159.                                         <polyline points="14 2 14 8 20 8"></polyline>
  160.                                         <line x1="16" y1="13" x2="8" y2="13"></line>
  161.                                         <line x1="16" y1="17" x2="8" y2="17"></line>
  162.                                         <polyline points="10 9 9 9 8 9"></polyline>
  163.                                     </svg>
  164.                                 </div>
  165.                             </a>
  166.                             
  167.                             
  168.                         </div>
  172.                     </div>
  173.                 </div>
  174.                 
  175.                 <!-- Contact -->
  176.                 <div class="card shadow-sm mb-4">
  177.                     <div class="card-body">
  178.                         <h5 class="card-title text-center mb-4"><i class="fas fa-envelope me-2"></i>Contact</h5>
  179.                         <ul class="contact-list list-unstyled">
  180.                             <li class="mb-3">
  181.                                 <div class="d-flex">
  182.                                     <div class="contact-icon bg-light-coral text-coral rounded-circle me-3">
  183.                                         <i class="fas fa-university"></i>
  184.                                     </div>
  185.                                     <div>
  186.                                         <strong>{{ labo.etablissement.nomLong }}</strong>
  187.                                     </div>
  188.                                 </div>
  189.                             </li>
  190.                             <li class="mb-3">
  191.                                 <div class="d-flex">
  192.                                     <div class="contact-icon bg-light-coral text-coral rounded-circle me-3">
  193.                                         <i class="fas fa-globe"></i>
  194.                                     </div>
  195.                                     <div>
  196.                                         <a href="{{ labo.siteWeb }}" target="_blank">{{ labo.siteWeb }}</a>
  197.                                     </div>
  198.                                 </div>
  199.                             </li>
  200.                             <li class="mb-3">
  201.                                 <div class="d-flex">
  202.                                     <div class="contact-icon bg-light-coral text-coral rounded-circle me-3">
  203.                                         <i class="fas fa-at"></i>
  204.                                     </div>
  205.                                     <div>
  206.                                         <a href="mailto:{{ labo.email }}">{{ labo.email }}</a>
  207.                                     </div>
  208.                                 </div>
  209.                             </li>
  210.                             <li>
  211.                                 <div class="d-flex">
  212.                                     <div class="contact-icon bg-light-coral text-coral rounded-circle me-3">
  213.                                         <i class="fas fa-map-marker-alt"></i>
  214.                                     </div>
  215.                                     <div>{{ labo.adresse }}
  216.                                     </div>
  217.                                 </div>
  218.                             </li>
  219.                         </ul>
  220.                     </div>
  221.                 </div>
  222.                 
  223.               
  224.         
  227.             </div>
  230.         </div>
  231.     </div>
  232. </section>
  237. <script>
  238. document.addEventListener('DOMContentLoaded', function() {
  239.     // Initialisation du slider principal
  240.     const mainSlider = new Swiper('.main-slider', {
  241.         loop: true,
  242.         autoplay: {
  243.             delay: 5000,
  244.             disableOnInteraction: false,
  245.         },
  246.         pagination: {
  247.             el: '.swiper-pagination',
  248.             clickable: true,
  249.         },
  250.         navigation: {
  251.             nextEl: '.swiper-button-next',
  252.             prevEl: '.swiper-button-prev',
  253.         },
  254.     });
  255.     
  256.     
  257.     
  258.     // Synchronisation des sliders
  259.     mainSlider.controller.control = thumbnailSlider;
  260.     
  261.     // Lightbox pour les images
  262.     lightbox.option({
  263.         'resizeDuration': 200,
  264.         'wrapAround': true,
  265.         'albumLabel': 'Image %1 sur %2'
  266.     });
  267. });
  268. </script>
  270. {% endblock %}