Update index.html

Author: NamanMehta818

index.html

@@ -84,19 +84,6 @@
       z-index: 10;
     }
 
-    .carousel-dot {
-      width: 12px;
-      height: 12px;
-      border-radius: 50%;
-      background: rgba(255, 255, 255, 0);
-      cursor: pointer;
-      transition: background 0.3s;
-    }
-
-    .carousel-dot.active {
-      background: rgba(255, 255, 255, 0);
-    }
-
     .carousel-arrow {
       position: absolute;
       top: 50%;
@@ -146,6 +133,44 @@
       padding-top: 60px;
       padding-bottom: 0px;
     }
+
+    /* Progress Bar Styles */
+    .carousel-progress {
+      position: absolute;
+      bottom: 15px;
+      left: 50%;
+      transform: translateX(-50%);
+      display: flex;
+      gap: 6px;
+      z-index: 10;
+    }
+
+    .progress-segment {
+      width: 40px;
+      height: 4px;
+      background: rgba(255, 255, 255, 0.4);
+      border-radius: 2px;
+      overflow: hidden;
+      cursor: pointer;
+    }
+
+    .progress-fill {
+      height: 100%;
+      width: 0%;
+      background: white;
+      border-radius: 2px;
+    }
+
+    .progress-fill.animating {
+      width: 100%;
+      transition: width 5s linear;
+    }
+
+    .progress-fill.done {
+      width: 100%;
+      transition: none;
+    }
+
   </style>
 </head>
 
@@ -193,7 +218,7 @@
         </div>
       </div>
     </header>
-    
+
 <!-- Image Carousel -->
 <div class="image-carousel">
     <div class="carousel-slides" id="carouselTrack">
@@ -227,14 +252,14 @@
     <button class="carousel-arrow prev" onclick="moveSlide(-1)">&#10094;</button>
     <button class="carousel-arrow next" onclick="moveSlide(1)">&#10095;</button>
 
-    <!-- Navigation Dots -->
-    <div class="carousel-nav">
-        <span class="carousel-dot active" onclick="currentSlide(0)"></span>
-        <span class="carousel-dot" onclick="currentSlide(1)"></span>
-        <span class="carousel-dot" onclick="currentSlide(2)"></span>
-        <span class="carousel-dot" onclick="currentSlide(3)"></span>
-        <span class="carousel-dot" onclick="currentSlide(4)"></span>
-        <span class="carousel-dot" onclick="currentSlide(5)"></span>
+    <!-- Progress Bar -->
+    <div class="carousel-progress">
+      <div class="progress-segment" onclick="currentSlide(0)"><div class="progress-fill" id="prog-0"></div></div>
+      <div class="progress-segment" onclick="currentSlide(1)"><div class="progress-fill" id="prog-1"></div></div>
+      <div class="progress-segment" onclick="currentSlide(2)"><div class="progress-fill" id="prog-2"></div></div>
+      <div class="progress-segment" onclick="currentSlide(3)"><div class="progress-fill" id="prog-3"></div></div>
+      <div class="progress-segment" onclick="currentSlide(4)"><div class="progress-fill" id="prog-4"></div></div>
+      <div class="progress-segment" onclick="currentSlide(5)"><div class="progress-fill" id="prog-5"></div></div>
     </div>
 </div>
 
@@ -494,15 +519,10 @@ <h4>Follow Us</h4>
 
 <!-- Carousel Script -->
 <script>
-  // Seamless infinite loop using cloned first/last slides.
-  // Track order: [clone of last] [slide1] [slide2] ... [slideN] [clone of first]
-
   const track = document.getElementById("carouselTrack");
-  const dots = document.querySelectorAll(".carousel-dot");
   const realSlides = Array.from(track.querySelectorAll(".carousel-slide"));
   const total = realSlides.length;
 
-  // Clone first and last slides and insert them
   const firstClone = realSlides[0].cloneNode(true);
   const lastClone = realSlides[total - 1].cloneNode(true);
   track.appendChild(firstClone);
@@ -511,21 +531,40 @@ <h4>Follow Us</h4>
   let current = 1;
   let isTransitioning = false;
 
+  function getProgressFills() {
+    return Array.from({ length: total }, (_, i) => document.getElementById(`prog-${i}`));
+  }
+
+  function startProgress(index) {
+    const fills = getProgressFills();
+    fills.forEach((fill, i) => {
+      fill.classList.remove("animating", "done");
+      if (i < index) {
+        fill.classList.add("done");
+      }
+    });
+    void fills[index].offsetWidth;
+    fills[index].classList.add("animating");
+  }
+
   function goTo(index, animate) {
     track.style.transition = animate === false ? "none" : "transform 0.8s ease-in-out";
     track.style.transform = `translateX(-${index * 100}%)`;
     current = index;
 
-    const dotIndex = (index - 1 + total) % total;
-    dots.forEach(dot => dot.classList.remove("active"));
-    dots[dotIndex].classList.add("active");
+    if (animate !== false) {
+      const dotIndex = (index - 1 + total) % total;
+      startProgress(dotIndex);
+    }
   }
 
   track.addEventListener("transitionend", () => {
     if (current === 0) {
       goTo(total, false);
+      startProgress(total - 1);
     } else if (current === total + 1) {
       goTo(1, false);
+      startProgress(0);
     }
     isTransitioning = false;
   });
@@ -546,10 +585,16 @@ <h4>Follow Us</h4>
 
   function resetTimer() {
     clearInterval(autoSlide);
+    const fills = getProgressFills();
+    const dotIndex = (current - 1 + total) % total;
+    fills[dotIndex].classList.remove("animating", "done");
+    void fills[dotIndex].offsetWidth;
+    fills[dotIndex].classList.add("animating");
     autoSlide = setInterval(() => moveSlide(1), 5000);
   }
 
   goTo(1, false);
+  startProgress(0);
 
   let autoSlide = setInterval(() => moveSlide(1), 5000);
 </script>
@@ -620,6 +665,3 @@ <h4>Follow Us</h4>
 
 
 </html>
-
-
-