champs-libres/chill.social
7
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Boris Waaub
2026-02-26 17:38:23 +01:00
parent c350ea3dcd
commit a3383a97df
10 changed files with 238 additions and 97 deletions
Download Patch File Download Diff File Expand all files Collapse all files
themes/chill-theme/layouts/features/single.html
+1 -9
View File
@@ -77,15 +77,7 @@
<p class="mt-6 text-lg leading-8 text-gray-600">{{ .Params.demo.description }}</p>
</div>
<div class="mt-16 flex justify-center">
<div class="relative rounded-xl bg-white p-8 shadow-2xl ring-1 ring-gray-200">
<div class="carousel">
{{ range .Params.demo.images }}
<div class="carousel-item">
<img src="{{ . }}" alt="Demo" class="rounded-lg">
</div>
{{ end }}
</div>
</div>
{{ partial "shortcodes/carousel.html" (dict "images" .Params.demo.images) }}
</div>
</div>
{{ end }}
themes/chill-theme/layouts/partials/shortcodes/carousel.html
+122
View File
@@ -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>
themes/chill-theme/layouts/shortcodes/contact-form.html
+44 -30
View File
@@ -2,42 +2,56 @@
<form id="contactForm" class="max-w-lg mx-auto p-6 bg-white rounded shadow" method="POST" action="{{ $form.action | default "http://localhost:3001/contact" }}">
<form id="contactForm" class="max-w-lg mx-auto p-6 bg-white rounded shadow" method="POST"
action="{{ $form.action | default " http://localhost:3001/contact" }}">
<h3 class="text-2xl font-bold mb-4">{{ $form.title }}</h3>
{{ range $form.fields }}
<div class="mb-4">
{{ if eq .type "textarea" }}
<label for="{{ .name }}">{{ .label }}</label>
<textarea id="{{ .name }}" name="{{ .name }}" rows="5" {{ if .required }}required{{ end }} class="w-full px-3 py-2 border rounded focus:outline-none focus:ring focus:border-blue-300"></textarea>
{{ else if eq .type "select" }}
<select id="{{ .name }}" name="{{ .name }}" {{ if .required }}required{{ end }} class="w-full px-3 py-2 border rounded focus:outline-none focus:ring focus:border-blue-300">
{{ range .options }}
<option value="{{ .value }}">{{ .label | default .value }}</option>
{{ end }}
</select>
{{ else }}
<input type="{{ .type }}" placeholder="{{.label}}" id="{{ .name }}" name="{{ .name }}" {{ if .required }}required{{ end }} class="w-full px-3 py-2 border rounded focus:outline-none focus:ring focus:border-blue-300" />
<div class="mb-4">
{{ if eq .type "textarea" }}
<label for="{{ .name }}">{{ .label }}</label>
<textarea id="{{ .name }}" name="{{ .name }}" rows="5" {{ if .required }}required{{ end }}
class="w-full px-3 py-2 border rounded focus:outline-none focus:ring focus:border-blue-300"></textarea>
{{ else if eq .type "select" }}
<select id="{{ .name }}" name="{{ .name }}" {{ if .required }}required{{ end }}
class="w-full px-3 py-2 border rounded focus:outline-none focus:ring focus:border-blue-300">
{{ range .options }}
<option value="{{ .value }}">{{ .label | default .value }}</option>
{{ end }}
</div>
</select>
{{ else }}
<input type="{{ .type }}" placeholder="{{.label}}" id="{{ .name }}" name="{{ .name }}" {{ if .required }}required{{
end }} class="w-full px-3 py-2 border rounded focus:outline-none focus:ring focus:border-blue-300" />
{{ end }}
</div>
{{ end }}
<!-- Champ honeypot invisible pour les robots -->
<div style="position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden;">
<label for="website">Ne pas remplir ce champ</label>
<input type="text" id="website" name="website" tabindex="-1" autocomplete="off" />
</div>
<div class=" text-md text-gray-500 mt-1 prose prose-sm" >
<div class=" text-md text-gray-500 mt-1 prose prose-sm">
{{ $form.hint | markdownify | safeHTML }}
</div>
<div class="flex justify-end mt-4">
<button type="submit" class="px-6 py-3 rounded-lg font-bold transition duration-200 ease-in-out border-2 text-primary-400 border-primary-400 hover:border-primary-400 hover:text-primary-400 hover:scale-105">
<button type="submit"
class="px-6 py-3 rounded-lg font-bold transition duration-200 ease-in-out border-2 text-primary-400 border-primary-400 hover:border-primary-400 hover:text-primary-400 hover:scale-105">
{{ $form.button.label | default "Envoyer" }}
</button>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
document.addEventListener('DOMContentLoaded', function () {
const form = document.getElementById('contactForm');
const resultDiv = document.getElementById('contact-result');
form.addEventListener('submit', function(e) {
// Pré-sélectionner le champ "sujet" si paramètre dans l'URL
const urlParams = new URLSearchParams(window.location.search);
const subject = urlParams.get('subject');
if (subject) {
const select = document.getElementById('subject');
if (select) {
select.value = subject;
}
}
form.addEventListener('submit', function (e) {
e.preventDefault();
resultDiv.innerHTML = '';
const formData = new FormData(form);
@@ -45,18 +59,18 @@
method: 'POST',
body: formData
})
.then(async response => {
const text = await response.text();
if (response.status === 200) {
resultDiv.innerHTML = `<div style='background:#e6ffed;color:#228B22;padding:1em;border-radius:6px;border:1px solid #228B22;'>${text}</div>`;
form.reset();
} else {
resultDiv.innerHTML = `<div style='background:#ffe6e6;color:#b22222;padding:1em;border-radius:6px;border:1px solid #b22222;'>${text}</div>`;
}
})
.catch(err => {
resultDiv.innerHTML = `<div style='background:#ffe6e6;color:#b22222;padding:1em;border-radius:6px;border:1px solid #b22222;'>Erreur réseau</div>`;
});
.then(async response => {
const text = await response.text();
if (response.status === 200) {
resultDiv.innerHTML = `<div style='background:#e6ffed;color:#228B22;padding:1em;border-radius:6px;border:1px solid #228B22;'>${text}</div>`;
form.reset();
} else {
resultDiv.innerHTML = `<div style='background:#ffe6e6;color:#b22222;padding:1em;border-radius:6px;border:1px solid #b22222;'>${text}</div>`;
}
})
.catch(err => {
resultDiv.innerHTML = `<div style='background:#ffe6e6;color:#b22222;padding:1em;border-radius:6px;border:1px solid #b22222;'>Erreur réseau</div>`;
});
});
});
</script>