From 4f983285f05efe67f4456cd50fbbdce92ee93903 Mon Sep 17 00:00:00 2001
From: "mathis.framit" <mathis.framit@etu.uca.fr>
Date: Mon, 2 Jun 2025 11:43:53 +0200
Subject: [PATCH] :lipstick: new sliders controls in timeline page

---
 .../timeline/timeline.component.html          | 116 +++++++++++++-----
 1 file changed, 83 insertions(+), 33 deletions(-)

diff --git a/src/app/components/timeline/timeline.component.html b/src/app/components/timeline/timeline.component.html
index 08431f5..b7c43ca 100644
--- a/src/app/components/timeline/timeline.component.html
+++ b/src/app/components/timeline/timeline.component.html
@@ -93,32 +93,82 @@
 
           <!-- Carrousel d'images -->
           <ng-container *ngIf="imageUrls[pins.indexOf(pin)].length > 0">
-            <div class="relative flex items-center justify-center">
-              <button
-                *ngIf="imageUrls[pins.indexOf(pin)].length > 1"
-                (click)="prevImage(pins.indexOf(pin))"
-                class="absolute left-0 bg-white border border-blue-500 text-blue-500 rounded-full w-10 h-10 shadow-md hover:bg-blue-100 z-10"
+            <div
+              class="relative h-64 mt-2 overflow-hidden rounded-lg flex items-center justify-center"
+            >
+              <div
+                *ngFor="
+                  let imageId of imageUrls[pins.indexOf(pin)];
+                  let index = index
+                "
+                [class]="
+                  'absolute inset-0 transition-opacity duration-700 ease-in-out' +
+                  (index === carouselIndexes[pins.indexOf(pin)]
+                    ? ' opacity-100'
+                    : ' opacity-0')
+                "
               >
-                ‹
-              </button>
+                <img
+                  [src]="imageId"
+                  class="object-contain max-h-full max-w-full h-full w-auto mx-auto"
+                  alt="image"
+                />
+              </div>
 
-              <img
-                [src]="
-                  imageUrls[pins.indexOf(pin)][
-                    carouselIndexes[pins.indexOf(pin)]
-                  ]
-                "
-                alt="image"
-                class="rounded-xl mx-auto w-full h-64 object-contain shadow-lg"
-              />
+              <!-- Slider controls -->
+              <div *ngIf="imageUrls[pins.indexOf(pin)].length > 1">
+                <button
+                  type="button"
+                  class="absolute top-0 left-0 z-30 flex items-center justify-center h-full cursor-pointer group focus:outline-none"
+                  (click)="prevImage(pins.indexOf(pin))"
+                >
+                  <span
+                    class="inline-flex items-center justify-center w-8 h-8 rounded-full bg-black/30 group-hover:bg-black/50"
+                  >
+                    <svg
+                      class="w-4 h-4 text-white"
+                      xmlns="http://www.w3.org/2000/svg"
+                      fill="none"
+                      viewBox="0 0 6 10"
+                    >
+                      <path
+                        stroke="currentColor"
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                        stroke-width="2"
+                        d="M5 1 1 5l4 4"
+                      />
+                    </svg>
+                    <span class="sr-only">Précédent</span>
+                  </span>
+                </button>
 
-              <button
-                *ngIf="imageUrls[pins.indexOf(pin)].length > 1"
-                (click)="nextImage(pins.indexOf(pin))"
-                class="absolute right-0 bg-white border border-blue-500 text-blue-500 rounded-full w-10 h-10 shadow-md hover:bg-blue-100 z-10"
-              >
-                ›
-              </button>
+                <button
+                  type="button"
+                  class="absolute top-0 right-0 z-30 flex items-center justify-center h-full cursor-pointer group focus:outline-none"
+                  (click)="nextImage(pins.indexOf(pin))"
+                >
+                  <span
+                    class="inline-flex items-center justify-center w-8 h-8 rounded-full bg-black/30 group-hover:bg-black/50"
+                  >
+                    <svg
+                      class="w-4 h-4 text-white"
+                      xmlns="http://www.w3.org/2000/svg"
+                      fill="none"
+                      viewBox="0 0 6 10"
+                    >
+                      <path
+                        stroke="currentColor"
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                        stroke-width="2"
+                        d="M1 9l4-4-4-4"
+                      />
+                    </svg>
+                    <span class="sr-only">Suivant</span>
+                  </span>
+                </button>
+              </div>
             </div>
 
             <!-- Indicateur de position -->
@@ -147,15 +197,15 @@
             <div class="text-gray-400 italic text-center">Aucune image</div>
           </ng-container>
         </div>
-      </div>
-    </ng-container>
-  </ng-container>
-</div>
 
-<!-- Message si vide -->
-<div
-  *ngIf="!loading && pins.length === 0"
-  class="text-center text-gray-500 py-12 text-xl"
->
-  Aucun souvenir à afficher pour le moment.
+        <!-- Message si vide -->
+        <div
+          *ngIf="!loading && pins.length === 0"
+          class="text-center text-gray-500 py-12 text-xl"
+        >
+          Aucun souvenir à afficher pour le moment.
+        </div>
+      </div></ng-container
+    ></ng-container
+  >
 </div>