feat: mise à jour du formulaire de contact, ajout de la gestion des sujets et amélioration de la présentation des images

2026-02-26 17:38:23 +01:00
parent c350ea3dcd
commit a3383a97df
10 changed files with 238 additions and 97 deletions
@@ -0,0 +1,122 @@
+{{/*
+Hugo List to Carousel Partial
+Source: https://hugocodex.org/add-ons/slider-carousel/
+Author: Jeroen van der Schee
+*/}}
+
+{{ $id := printf "carousel-%d" (now.UnixNano) }}
+<div id="{{ $id }}" class="carousel-container">
+  <div class="carousel-slides">
+    {{ range .images }}
+    <div class="carousel-slide">
+      <img src="{{ . }}" alt="Carousel image" loading="lazy" />
+    </div>
+    {{ end }}
+  </div>
+  {{ if gt (len .images) 1 }}
+  <button class="carousel-prev" aria-label="Précédent">&#10094;</button>
+  <button class="carousel-next" aria-label="Suivant">&#10095;</button>
+
+  <div class="carousel-dots">
+    {{ range $i, $_ := .images }}
+    <span class="carousel-dot" data-index="{{ $i }}"></span>
+    {{ end }}
+  </div>
+  {{ end }}
+</div>
+
+<style>
+  .carousel-container {
+    position: relative;
+    width: 100%;
+    margin: 0 auto;
+  }
+
+  .carousel-slides {
+    display: flex;
+    overflow: hidden;
+  }
+
+  .carousel-slide {
+    min-width: 100%;
+    transition: transform 0.5s ease;
+    display: flex;
+    justify-content: center;
+  }
+
+  .carousel-slide img {
+    max-width: 100%;
+    border-radius: 1rem;
+  }
+
+  .carousel-prev,
+  .carousel-next {
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    border: none;
+    font-size: 2rem;
+    padding: 0.5rem 1rem;
+    cursor: pointer;
+    border-radius: 50%;
+    z-index: 2;
+  }
+
+  .carousel-prev {
+    left: 10px;
+  }
+
+  .carousel-next {
+    right: 10px;
+  }
+
+  .carousel-dots {
+    text-align: center;
+    margin-top: 1rem;
+  }
+
+  .carousel-dot {
+    display: inline-block;
+    width: 12px;
+    height: 12px;
+    margin: 0 4px;
+    background: #bbb;
+    border-radius: 50%;
+    cursor: pointer;
+  }
+
+  .carousel-dot.active {
+    background: #333;
+  }
+</style>
+<script>
+  document.addEventListener('DOMContentLoaded', function () {
+    var container = document.getElementById('{{ $id }}');
+    if (!container) return;
+    var slides = container.querySelectorAll('.carousel-slide');
+    var prevBtn = container.querySelector('.carousel-prev');
+    var nextBtn = container.querySelector('.carousel-next');
+    var dots = container.querySelectorAll('.carousel-dot');
+    var current = 0;
+
+    function showSlide(idx) {
+      slides.forEach(function (slide, i) {
+        slide.style.transform = 'translateX(' + (-100 * idx) + '%)';
+      });
+      dots.forEach(function (dot, i) {
+        dot.classList.toggle('active', i === idx);
+      });
+      current = idx;
+    }
+    prevBtn.addEventListener('click', function () {
+      showSlide((current - 1 + slides.length) % slides.length);
+    });
+    nextBtn.addEventListener('click', function () {
+      showSlide((current + 1) % slides.length);
+    });
+    dots.forEach(function (dot, i) {
+      dot.addEventListener('click', function () { showSlide(i); });
+    });
+    showSlide(0);
+  });
+</script>