From e2fe18ec042acd5d52f74ee9e2e0d372311acc72 Mon Sep 17 00:00:00 2001
From: RoxanaElena09 <popescuroxana09@yahoo.ro>
Date: Thu, 11 Dec 2025 10:49:11 +0100
Subject: [PATCH] feat:modifier_avant_apres changement structure

---
 prestations/html/liste_avant_apres.html    |  17 +--
 prestations/html/modifier_avant_apres.html | 164 +++++++++++----------
 2 files changed, 94 insertions(+), 87 deletions(-)
diff --git a/prestations/html/liste_avant_apres.html b/prestations/html/liste_avant_apres.html
index b0ee0d1..6dc589b 100644
--- a/prestations/html/liste_avant_apres.html
+++ b/prestations/html/liste_avant_apres.html
@@ -22,6 +22,7 @@
           aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
           <span class="navbar-toggler-icon"></span>
         </button>
+
         <div class="collapse navbar-collapse" id="navbarSupportedContent">
           <ul class="navbar-nav me-auto mb-2 mb-lg-0">
             <li class="nav-item">
@@ -72,7 +73,6 @@
         </div>
       </div>
     </nav>
-
   </header>
 
   <main class="my-5 fs-6">
@@ -83,9 +83,9 @@
         <div id="succesDeleteMsg" class="alert alert-success d-none">
           Résultat supprimé avec succès !
         </div>
-
       </header>
-      <main>
+
+      <div>
 
         <div class="d-flex justify-content-start mb-4">
           <a href="../html/ajouter_avant_apres.html" class="btn btn-primary">
@@ -98,7 +98,7 @@
           <table class="table table-striped table-hover align-middle mb-0">
             <thead class="table-dark">
               <tr>
-                <th>Titre paire</th>
+                <th>Titre résultat</th>
                 <th>Type</th>
                 <th>Avant</th>
                 <th>Après</th>
@@ -110,8 +110,11 @@
             </tbody>
           </table>
         </div>
+
+      </div>
     </div>
 
+    <!--- modale de suppression-->
     <div class="modal fade" id="deleteModal" tabindex="-1" role="dialog" aria-hidden="true">
       <div class="modal-dialog">
         <div class="modal-content">
@@ -134,15 +137,11 @@
       </div>
     </div>
 
-
-  </main>
-  </div>
   </main>
 
   <script src="../../node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
   <script src="../js/liste_avant_apres.js"></script>
 
-
 </body>
 
-</html>
\ No newline at end of file
+</html>
diff --git a/prestations/html/modifier_avant_apres.html b/prestations/html/modifier_avant_apres.html
index 86a26e0..846bba4 100644
--- a/prestations/html/modifier_avant_apres.html
+++ b/prestations/html/modifier_avant_apres.html
@@ -6,10 +6,9 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Modifier un résultat avant/après</title>
     <link href="../../node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
-    <link rel="stylesheet" href="node_modules/bs-icon/icons.css">
+    <link rel="stylesheet" href="../../node_modules/bs-icon/icons.css">
     <link rel="stylesheet" href="../../css/style.css">
     <link rel="stylesheet" href="../../css/avant_apres.css">
-
 </head>
 
 <body>
@@ -19,13 +18,12 @@
             <div class="container-fluid align-items-center">
                 <a class="navbar-brand" href="#">L'Il'eau chiens - Admin</a>
 
-
-
                 <button class="navbar-toggler" type="button" data-bs-toggle="collapse"
                     data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
                     aria-expanded="false" aria-label="Toggle navigation">
                     <span class="navbar-toggler-icon"></span>
                 </button>
+
                 <div class="collapse navbar-collapse" id="navbarSupportedContent">
                     <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                         <li class="nav-item">
@@ -48,7 +46,6 @@
                         </li>
                     </ul>
 
-
                     <ul class="navbar-nav ms-auto mb-2 mb-lg-0">
                         <li class="nav-item">
                             <a class="nav-link" href="#"><i class="bi bi-megaphone me-1"></i> Message d'actu</a>
@@ -77,86 +74,97 @@
                 </div>
             </div>
         </nav>
-
     </header>
 
-    <div class="container mt-5">
-        <h1 class="mb-4 text-center">Modifier un résultat en images (Avant / Après)</h1>
+    <main class="my-5 fs-6">
+        <div class="container">
+            <header>
+                <h1 class="title fs-2">Modifier un résultat en images (Avant / Après)</h1>
 
-        <!-- Messages -->
-        <div id="successMsg" class="alert alert-success d-none">
-            Le résultat a été modifié avec succès.
+                <!-- Messages -->
+                <div id="successMsg" class="alert alert-success d-none">
+                    Le résultat a été modifié avec succès.
+                </div>
+                <div id="errorMsg" class="alert alert-danger d-none">
+                    Une erreur est survenue. Merci de vérifier le formulaire.
+                </div>
+
+                <!-- Erreur : format invalide -->
+                <div id="errorFormat" class="alert alert-danger d-none">
+                    Format d'image invalide. Formats acceptés : JPG, PNG, WEBP.
+                </div>
+            </header>
+
+           
+            <div>
+
+                <!-- Formulaire de modification -->
+                <form id="editPairForm" class="mt-3">
+
+                    <!-- ID caché -->
+                    <input type="hidden" id="pairId">
+
+                    <!-- Titre-->
+                    <div class="mb-3">
+                        <label for="pairTitle" class="form-label fw-bold">Titre du résultat
+                            (obligatoire)</label>
+                        <input type="text" class="form-control" id="pairTitle" required>
+                    </div>
+
+                    <!-- Type -->
+                    <div class="mb-3">
+                        <label class="form-label fw-bold" for="pairType">Type (obligatoire)</label>
+                        <select id="pairType" class="form-select" required>
+                            <option value="">-- Choisir --</option>
+                            <option value="Chien">Chien</option>
+                            <option value="Chat">Chat</option>
+                        </select>
+                    </div>
+
+                    <!-- Images AVANT / APRÈS -->
+                    <div class="row gy-4 mb-4">
+                        <!-- Image AVANT -->
+                        <div class="col-12">
+                            <label class="form-label fw-bold" for="beforeImage">
+                                Image AVANT (obligatoire, formats acceptés : jpg, png, webp)
+                            </label>
+                            <input type="file" class="form-control" id="beforeImage" accept="image/*" required>
+                            <img id="beforePreview" class="img-preview mt-2 d-none" src="#" alt="Aperçu avant">
+                        </div>
+
+                        <!-- Image APRÈS -->
+                        <div class="col-12">
+                            <label class="form-label fw-bold" for="afterImage">
+                                Image APRÈS (obligatoire, formats acceptés : jpg, png, webp)
+                            </label>
+                            <input type="file" class="form-control" id="afterImage" accept="image/*" required>
+                            <img id="afterPreview" class="img-preview mt-2 d-none" src="#" alt="Aperçu après">
+                        </div>
+                    </div>
+
+                    <!-- Boutons -->
+                    <div class="row mt-4 g-3">
+                        <div class="col-12 col-md-6">
+                            <a href="../html/liste_avant_apres.html" class="btn btn-secondary w-100">
+                                Annuler
+                            </a>
+                        </div>
+                        <div class="col-12 col-md-6">
+                            <button type="submit" class="btn btn-primary w-100">
+                                Enregistrer les modifications
+                            </button>
+                        </div>
+                    </div>
+
+                </form>
+
+            </div>
         </div>
-        <div id="errorMsg" class="alert alert-danger d-none">
-            Une erreur est survenue. Merci de vérifier le formulaire.
-        </div>
-
-        <!-- Erreur : format invalide -->
-        <div id="errorFormat" class="alert alert-danger d-none">
-            Format d'image invalide. Formats acceptés : JPG, PNG, WEBP.
-        </div>
-
-        <!-- Formulaire de modification -->
-        <form id="editPairForm" class="mt-3">
-
-            <!-- ID caché -->
-            <input type="hidden" id="pairId">
-
-            <!-- Titre / label -->
-            <div class="mb-3">
-                <label for="pairTitle" class="form-label fw-bold">Titre / label de la paire (obligatoire)</label>
-                <input type="text" class="form-control" id="pairTitle" required>
-            </div>
-
-            <!-- Type -->
-            <div class="mb-3">
-                <label class="form-label fw-bold" for="pairType">Type (obligatoire)</label>
-                <select id="pairType" class="form-select" required>
-                    <option value="">-- Choisir --</option>
-                    <option value="Chien">Chien</option>
-                    <option value="Chat">Chat</option>
-                </select>
-            </div>
-
-            <!-- Images AVANT / APRÈS sur une ligne en md+, empilées en mobile -->
-            <div class="row gy-4 mb-4">
-                <!-- Image AVANT -->
-                <div class="col-12 ">
-                    <label class="form-label fw-bold" for="beforeImage">Image AVANT (obligatoire)</label>
-                    <input type="file" class="form-control" id="beforeImage" accept="image/*" required>
-                    <!-- Aperçu éventuel -->
-                    <img id="beforePreview" class="img-preview mt-2 d-none" src="#" alt="Aperçu avant">
-                </div>
-
-                <!-- Image APRÈS -->
-                <div class="col-12">
-                    <label class="form-label fw-bold" for="afterImage">Image APRÈS (obligatoire)</label>
-                    <input type="file" class="form-control" id="afterImage" accept="image/*" required>
-                    <!-- Aperçu éventuel -->
-                    <img id="afterPreview" class="img-preview mt-2 d-none" src="#" alt="Aperçu après">
-                </div>
-            </div>
-
-            <!-- Boutons : empilés en mobile, côte à côte en md+ -->
-            <div class="row mt-4 g-3">
-                <div class="col-12 col-md-6">
-                    <a href="../html/liste_avant_apres.html" class="btn btn-secondary w-100">
-                        Annuler
-                    </a>
-                </div>
-                <div class="col-12 col-md-6">
-                    <button type="submit" class="btn btn-primary w-100">
-                        Enregistrer les modifications
-                    </button>
-                </div>
-            </div>
-
-        </form>
-    </div>
+    </main>
 
     <script src="../../node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
     <script src="../js/modifier_avant_apres.js"></script>
 
 </body>
 
-</html>
\ No newline at end of file
+</html>
