From aa5f003be8e5bca4bd3d045953a340f4b595602a Mon Sep 17 00:00:00 2001
From: RoxanaElena09 <popescuroxana09@yahoo.ro>
Date: Thu, 11 Dec 2025 09:45:06 +0100
Subject: [PATCH] feat:work in progress

---
 prestations/html/ajouter_avant_apres.html  |  11 +-
 prestations/html/liste_avant_apres.html    | 146 +++++++++++++--------
 prestations/html/modifier_avant_apres.html | 107 +++++++++++----
 prestations/html/voir_avant_apres.html     |  70 +++++-----
 4 files changed, 213 insertions(+), 121 deletions(-)
diff --git a/prestations/html/ajouter_avant_apres.html b/prestations/html/ajouter_avant_apres.html
index 1e29a7f..6da48db 100644
--- a/prestations/html/ajouter_avant_apres.html
+++ b/prestations/html/ajouter_avant_apres.html
@@ -4,12 +4,11 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Ajouter une paire 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="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css">
+    <title>Ajouter 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="../../css/style.css">
-    
+
 </head>
 
 
@@ -155,7 +154,7 @@
     </div>
 
     <script src="../js/ajouter_avant_apres.js"></script>
-    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
+    <script src="../../node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
 
 </body>
 
diff --git a/prestations/html/liste_avant_apres.html b/prestations/html/liste_avant_apres.html
index 4352e28..7cb0b76 100644
--- a/prestations/html/liste_avant_apres.html
+++ b/prestations/html/liste_avant_apres.html
@@ -4,48 +4,84 @@
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Liste des paires 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="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css">
+  <title>Liste des résultats 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="../../css/style.css">
 
-<style>
-
-.navbar-brand { font-size: 1.2rem; line-height: 1; padding-top: 0.25rem; padding-bottom: 0.25rem; }
-     
-        .brand-sep { height: 1.2rem; }
-
-        
-        @media (max-width: 1399.98px) {
-            .navbar .nav-item { 
-                background-color: var(--bs-light);
-                border: 1px solid var(--bs-border-color);
-                border-radius: .25rem;
-                margin-bottom: .375rem;
-                text-align: center;
-            }
-           
-            #navbarSupportedContent > ul:first-child { margin-top: .5rem; }
-            #navbarSupportedContent > ul:last-child { margin-top: 1rem; }
-
-            .bi{
-                display: none;
-            }
-           
-        }
-
-  .container {
-            max-width: 600px;
-            margin-top: 50px;
-        }
-</style>
 
 </head>
 
-<body class="bg-light py-4 py-md-5">
+<body>
 
-  <div class="container">
-    <h1 class="mb-4 mb-md-5 text-center">Liste des résultat avant/après</h1>
+  <header>
+    <nav class="navbar navbar-expand-xxl bg-body-tertiary">
+      <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">
+              <a class="nav-link active left-label" aria-current="page" href="#">Blog</a>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link left-label" href="#">Boutique</a>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link left-label" href="#">Prestations</a>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link left-label" href="#">FAQ</a>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link left-label" href="#">Fiche de renseignements</a>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link left-label" href="#">Partenaires</a>
+            </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>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link" href="#"><i class="bi bi-box-arrow-up-right me-1"></i> Voir le site</a>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link" href="#"><i class="bi bi-gear me-1"></i> Configuration</a>
+            </li>
+            <li class="nav-item dropdown">
+              <a class="nav-link dropdown-toggle" href="#" id="userMenu" role="button" data-bs-toggle="dropdown"
+                aria-expanded="false">
+                <i class="bi bi-person-circle me-1"></i> <span id="userFirstName">Prénom</span>
+              </a>
+              <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="userMenu">
+                <li><a class="dropdown-item" href="#">Profil</a></li>
+                <li>
+                  <hr class="dropdown-divider">
+                </li>
+                <li><a class="dropdown-item" href="#">Sortir</a></li>
+              </ul>
+            </li>
+          </ul>
+
+        </div>
+      </div>
+    </nav>
+
+  </header>
+
+
+  <div class="container mt-5">
+    <h1 class="mb-4 text-center">Liste des résultats avant/après</h1>
 
     <!-- Message succès -->
     <div id="succesDeleteMsg" class="alert alert-success d-none">
@@ -78,32 +114,28 @@
   </div>
 
   <div class="modal fade" id="deleteModal" tabindex="-1" role="dialog" aria-hidden="true">
-  <div class="modal-dialog">
-    <div class="modal-content">
-      
-      <div class="modal-header">
-        <h2 class="modal-title" id="deleteModalLabel">Confirmer la suppression</h2>
-        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Fermer"></button>
-      </div>
+    <div class="modal-dialog">
+      <div class="modal-content">
 
-      <div class="modal-body">
-        Voulez-vous vraiment supprimer cette paire avant/après ?
-      </div>
+        <div class="modal-header">
+          <h2 class="modal-title" id="deleteModalLabel">Confirmer la suppression</h2>
+          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Fermer"></button>
+        </div>
 
-      <div class="modal-footer">
-        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Annuler</button>
-        <button type="button" class="btn btn-danger" id="confirmDeleteBtn">Supprimer</button>
-      </div>
+        <div class="modal-body">
+          Voulez-vous vraiment supprimer cette paire avant/après ?
+        </div>
 
+        <div class="modal-footer">
+          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Annuler</button>
+          <button type="button" class="btn btn-danger" id="confirmDeleteBtn">Supprimer</button>
+        </div>
+
+      </div>
     </div>
   </div>
-</div>
 
-
-
-
-
-  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
+  <script src="../../node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
   <script src="../js/liste_avant_apres.js"></script>
 
 
diff --git a/prestations/html/modifier_avant_apres.html b/prestations/html/modifier_avant_apres.html
index 8b90c0d..78f76ee 100644
--- a/prestations/html/modifier_avant_apres.html
+++ b/prestations/html/modifier_avant_apres.html
@@ -4,25 +4,87 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Modifier une paire avant/après</title>
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css">
+    <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="../../css/style.css">
 
-    <style>
-        .img-preview {
-            max-width: 150px;
-            border-radius: 8px;
-        }
-    </style>
 </head>
 
-<body class="bg-light py-4 py-md-5">
+<body>
 
-    <div class="container" style="max-width: 800px;">
-        <h2 class="mb-4 mb-md-5 text-center">Modifier une paire avant/après</h2>
+    <header>
+        <nav class="navbar navbar-expand-xxl bg-body-tertiary">
+            <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">
+                            <a class="nav-link active left-label" aria-current="page" href="#">Blog</a>
+                        </li>
+                        <li class="nav-item">
+                            <a class="nav-link left-label" href="#">Boutique</a>
+                        </li>
+                        <li class="nav-item">
+                            <a class="nav-link left-label" href="#">Prestations</a>
+                        </li>
+                        <li class="nav-item">
+                            <a class="nav-link left-label" href="#">FAQ</a>
+                        </li>
+                        <li class="nav-item">
+                            <a class="nav-link left-label" href="#">Fiche de renseignements</a>
+                        </li>
+                        <li class="nav-item">
+                            <a class="nav-link left-label" href="#">Partenaires</a>
+                        </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>
+                        </li>
+                        <li class="nav-item">
+                            <a class="nav-link" href="#"><i class="bi bi-box-arrow-up-right me-1"></i> Voir le site</a>
+                        </li>
+                        <li class="nav-item">
+                            <a class="nav-link" href="#"><i class="bi bi-gear me-1"></i> Configuration</a>
+                        </li>
+                        <li class="nav-item dropdown">
+                            <a class="nav-link dropdown-toggle" href="#" id="userMenu" role="button"
+                                data-bs-toggle="dropdown" aria-expanded="false">
+                                <i class="bi bi-person-circle me-1"></i> <span id="userFirstName">Prénom</span>
+                            </a>
+                            <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="userMenu">
+                                <li><a class="dropdown-item" href="#">Profil</a></li>
+                                <li>
+                                    <hr class="dropdown-divider">
+                                </li>
+                                <li><a class="dropdown-item" href="#">Sortir</a></li>
+                            </ul>
+                        </li>
+                    </ul>
+
+                </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>
 
         <!-- Messages -->
         <div id="successMsg" class="alert alert-success d-none">
-            La paire avant/après a été modifiée avec succès.
+            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.
@@ -41,13 +103,13 @@
 
             <!-- Titre / label -->
             <div class="mb-3">
-                <label for="pairTitle" class="form-label">Titre / label de la paire (obligatoire)</label>
+                <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" for="pairType">Type (obligatoire)</label>
+                <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>
@@ -58,16 +120,16 @@
             <!-- 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 col-md-6">
-                    <label class="form-label" for="beforeImage">Image AVANT (obligatoire)</label>
+                <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 col-md-6">
-                    <label class="form-label" for="afterImage">Image APRÈS (obligatoire)</label>
+                <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">
@@ -77,7 +139,7 @@
             <!-- 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="../liste_avant_apres/liste_avant_apres.html" class="btn btn-secondary w-100">
+                    <a href="../html/liste_avant_apres.html" class="btn btn-secondary w-100">
                         Annuler
                     </a>
                 </div>
@@ -91,8 +153,9 @@
         </form>
     </div>
 
-    <script src="modifier_avant_apres.js"></script>
-    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
+    <script src="../../node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
+    <script src="../js/modifier_avant_apres.js"></script>
+
 </body>
 
-</html>
+</html>
\ No newline at end of file
diff --git a/prestations/html/voir_avant_apres.html b/prestations/html/voir_avant_apres.html
index 552f95e..20c03cc 100644
--- a/prestations/html/voir_avant_apres.html
+++ b/prestations/html/voir_avant_apres.html
@@ -1,64 +1,62 @@
 <!DOCTYPE html>
 <html lang="fr">
+
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Voir la paire avant/après</title>
+    <title>Voir le 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="../../css/style.css">
 
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css">
-
-    <style>
-        .img-preview {
-            max-width: 250px;
-            border-radius: 10px;
-        }
-    </style>
 </head>
+
 <body>
 
-<div class="container">
+    <div class="container">
 
-    <h1 class="mb-4 text-center">Détails de la paire avant/après</h1>
+        <h1 class="mb-4 text-center">Détails du résultat en images (Avant / Après)</h1>
 
-    <!-- Message erreur -->
-    <div id="errorMsg" class="alert alert-danger d-none">
-        Impossible d'afficher cette paire.
-    </div>
+        <!-- Message erreur -->
+        <div id="errorMsg" class="alert alert-danger d-none">
+            Impossible d'afficher ce résultat.
+        </div>
 
-    <div id="detailsSection" class="mt-3">
+        <div id="detailsSection" class="mt-3">
 
-      <h2 id="pairTitle" class="text-center mb-4" aria-live="polite">Chargement...</h2>
+            <h2 id="pairTitle" class="text-center mb-4" aria-live="polite">Chargement...</h2>
 
 
-        <!-- AVANT / APRÈS : empilés en mobile, côte à côte en md+ -->
-        <div class="row justify-content-center align-items-start mb-4 g-4">
+            <!-- AVANT / APRÈS : empilés en mobile, côte à côte en md+ -->
+            <div class="row justify-content-center align-items-start mb-4 g-4">
+
+                <div class="col-12 col-md-6 text-center">
+                    <p class="fw-bold">AVANT</p>
+                    <img id="beforePreview" class="img-preview border img-fluid" src="#" alt="Photo avant">
+                </div>
+
+                <div class="col-12 col-md-6 text-center">
+                    <p class="fw-bold">APRÈS</p>
+                    <img id="afterPreview" class="img-preview border img-fluid" src="#" alt="Photo après">
+                </div>
 
-            <div class="col-12 col-md-6 text-center">
-                <p class="fw-bold">AVANT</p>
-                <img id="beforePreview" class="img-preview border img-fluid" src="#" alt="Photo avant">
             </div>
 
-            <div class="col-12 col-md-6 text-center">
-                <p class="fw-bold">APRÈS</p>
-                <img id="afterPreview" class="img-preview border img-fluid" src="#" alt="Photo après" >
+            <!-- Bouton retour -->
+            <div class="text-center mt-4">
+                <a href="../html/liste_avant_apres.html" class="btn btn-secondary">
+                    Retour à la liste
+                </a>
             </div>
 
         </div>
 
-        <!-- Bouton retour -->
-        <div class="text-center mt-4">
-            <a href="../html/liste_avant_apres.html" class="btn btn-secondary">
-                Retour à la liste
-            </a>
-        </div>
-
     </div>
 
-</div>
+    <script src="../js/voir_avant_apres.js"></script>
+    <script src="../../node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
 
-<script src="../js/voir_avant_apres.js"></script>
-<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
 
 </body>
-</html>
 
+</html>
\ No newline at end of file
