templates/fronts/projet_details.html.twig line 1

  1. {% extends 'base_front.html.twig' %}
  3. {% block title %}{{ projet.nom }}{% 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">{{ projet.nom }}</h1>
  11.         </div>
  12.     </div>
  14.     <!-- Contenu principal -->
  15.     <div class="container py-5">
  16.         <div class="row">
  17.             <!-- Colonne principale -->
  18.             <div class="col-lg-8">
  20.                 <!-- À propos -->
  21.                 <div class="card shadow-sm mb-4">
  22.                     <div class="card-body">
  23.                         <div class="d-flex align-items-center mb-4">
  24.                             <div class="icon-box bg-coral text-white rounded-circle me-3">
  25.                                 <i class="fas fa-university"></i>
  26.                             </div>
  27.                             <h2 class="h4 mb-0">Présentation </h2>
  28.                         </div>
  29.                         
  30.                         <div class="lab-info mb-4">
  31.                             {{ projet.objectif|raw }}
  32.                         </div>
  33.                         <div class="col-12 col-lg">
  34.                             <h3>Détails</h3>
  35.                             <img src="/upload/projets/{{ projet.image }}" alt="{{ projet.image }}" class="project-image"><br>
  36.                             <span>{{ projet.description|raw }}</span><br><br>
  37.                         </div>
  38.                     </div>
  39.                 </div>
  40.                 
  41.                 
  42.             </div>
  43.             
  45.             <div class="col-lg-4">
  46.                 <div class="card shadow-sm mb-4">
  47.                     <div class="card-body">
  48.                         <h5 class="card-title text-center mb-4"><i class="fas fa-users me-2"></i>Notre équipe</h5>
  49.                         <div class="stats-grid">
  50.                            {% for chercheur in chercheursProjet %}
  51.                             {% if chercheur.chercheur is not null %}
  52.                                 <a href="{{ path('app_chercheurs_details', {'idChercheur': chercheur.chercheur.id}) }}" data-lightbox="gallery" class="stat-item">
  54.                                     <div class="stat-chiffre-icon">
  55.                                         {% if chercheur.chercheur.photo is not null  %}
  56.                                             <img src="/upload/chercheurs/{{ chercheur.chercheur.photo }}" alt="Photo de {{ chercheur.chercheur.nom }} {{ chercheur.chercheur.prenom }}"  title="{{ chercheur.chercheur.prenom }}{{ chercheur.chercheur.nom }}" class="img-fluidd rounded">
  57.                                         {% else %}
  58.                                             <img src="/front/icons/utilisateur.png" alt="Photo de {{ chercheur.chercheur.nom }} {{ chercheur.chercheur.prenom }}" title="{{ chercheur.chercheur.prenom }}{{ chercheur.chercheur.nom }}" class="img-fluidd rounded">
  59.                                         {% endif %}
  60.                                     </div>
  61.                                     <div class="stat-content">
  62.                                         <div class="stat-label">{{ chercheur.chercheur.prenom }}{{ chercheur.chercheur.nom }}</div>
  63.                                     </div>
  64.                                 </a>
  65.                             {% endif %}
  66.                         {% endfor %}
  67.                     </div>
  68.                 </div>
  69.             </div>
  70.         </div>
  73.             <!-- Colonne latérale -->
  74.           
  77.         </div>
  78.     </div>
  79. </section>
  84. <style>
  86.     .project-image {
  87.         display: block;
  88.         margin: 0 auto;
  89.         max-width: 100%;
  90.         height: auto;
  91.     }
  92.    
  93. </style>
  94. <script>
  95. document.addEventListener('DOMContentLoaded', function() {
  96.     const swiper = new Swiper('.main-slider', {
  97.         slidesPerView: 1,
  98.         spaceBetween: 20,
  99.         pagination: {
  100.             el: '.swiper-pagination',
  101.             clickable: true,
  102.         },
  103.         navigation: {
  104.             nextEl: '.swiper-button-next',
  105.             prevEl: '.swiper-button-prev',
  106.         },
  107.         breakpoints: {
  108.             // When window width is >= 768px
  109.             768: {
  110.                 slidesPerView: 1, // Still 1 slide (containing 2 researchers)
  111.             }
  112.         }
  113.     });
  114.     // Initialisation du slider principal
  115.   /*  const mainSlider = new Swiper('.main-slider', {
  116.         loop: true,
  117.         autoplay: {
  118.             delay: 5000,
  119.             disableOnInteraction: false,
  120.         },
  121.         pagination: {
  122.             el: '.swiper-pagination',
  123.             clickable: true,
  124.         },
  125.         navigation: {
  126.             nextEl: '.swiper-button-next',
  127.             prevEl: '.swiper-button-prev',
  128.         },
  129.     });
  130.     
  131.     
  132.     
  133.     // Synchronisation des sliders
  134.     mainSlider.controller.control = thumbnailSlider;
  135.     
  136.     // Lightbox pour les images
  137.     lightbox.option({
  138.         'resizeDuration': 200,
  139.         'wrapAround': true,
  140.         'albumLabel': 'Image %1 sur %2'
  141.     });*/
  142. });
  143. </script>
  144. {% endblock %}