feat:avant apres+media queries+modale de suppression

prestations/js/ajouter_avant_apres.js

@@ -30,13 +30,48 @@ const afterPreview = document.getElementById("afterPreview");
 
 const successMsg = document.getElementById("successMsg");
 const errorMsg = document.getElementById("errorMsg");
+const errorFormat = document.getElementById("errorFormat");
+
+// Formats autorisés
+const allowedTypes = ["image/jpeg", "image/png", "image/webp"];
 
 // ===============================
-// Prévisualisation images
+// Fonctions utilitaires
+// ===============================
+function hideMessages() {
+    successMsg.classList.add("d-none");
+    errorMsg.classList.add("d-none");
+    errorFormat.classList.add("d-none");
+}
+
+function isValidFormat(file) {
+    if (!file) return false;
+    return allowedTypes.includes(file.type);
+}
+
+// ===============================
+// Prévisualisation image AVANT
+// + contrôle du format
 // ===============================
 beforeInput.addEventListener("change", function () {
+    hideMessages();
+
     const file = this.files[0];
-    if (!file) return;
+
+    if (!file) {
+        beforePreview.style.display = "none";
+        beforePreview.src = "#";
+        return;
+    }
+
+    // Vérif format
+    if (!isValidFormat(file)) {
+        errorFormat.classList.remove("d-none");
+        this.value = "";               // reset le champ
+        beforePreview.style.display = "none";
+        beforePreview.src = "#";
+        return;
+    }
 
     const reader = new FileReader();
     reader.onload = e => {
@@ -46,9 +81,29 @@ beforeInput.addEventListener("change", function () {
     reader.readAsDataURL(file);
 });
 
+// ===============================
+// Prévisualisation image APRÈS
+// + contrôle du format
+// ===============================
 afterInput.addEventListener("change", function () {
+    hideMessages();
+
     const file = this.files[0];
-    if (!file) return;
+
+    if (!file) {
+        afterPreview.style.display = "none";
+        afterPreview.src = "#";
+        return;
+    }
+
+    // Vérif format
+    if (!isValidFormat(file)) {
+        errorFormat.classList.remove("d-none");
+        this.value = "";               // reset le champ
+        afterPreview.style.display = "none";
+        afterPreview.src = "#";
+        return;
+    }
 
     const reader = new FileReader();
     reader.onload = e => {
@@ -64,23 +119,35 @@ afterInput.addEventListener("change", function () {
 form.addEventListener("submit", function (e) {
     e.preventDefault();
 
-    // Reset messages
-    errorMsg.classList.add("d-none");
-    successMsg.classList.add("d-none");
+    hideMessages();
 
-    // Validation simple
-    if (!titleInput.value.trim() || !typeInput.value.trim() || !beforeInput.files[0] || !afterInput.files[0]) {
+    // Champs obligatoires
+    if (
+        !titleInput.value.trim() ||
+        !typeInput.value.trim() ||
+        !beforeInput.files[0] ||
+        !afterInput.files[0]
+    ) {
         errorMsg.classList.remove("d-none");
         return;
     }
 
+    const beforeFile = beforeInput.files[0];
+    const afterFile = afterInput.files[0];
+
+    // Vérification format des deux images
+    if (!isValidFormat(beforeFile) || !isValidFormat(afterFile)) {
+        errorFormat.classList.remove("d-none");
+        return;
+    }
+
     // Nouvelle entrée (simulation)
     const newPair = {
         id: galleryPairs.length + 1,
         titre: titleInput.value.trim(),
         type: typeInput.value.trim(),
-        avant: URL.createObjectURL(beforeInput.files[0]),
-        apres: URL.createObjectURL(afterInput.files[0])
+        avant: URL.createObjectURL(beforeFile),
+        apres: URL.createObjectURL(afterFile)
     };
 
     galleryPairs.push(newPair);