From f67099f5b0117fb730057c80464ee8ba53b476e2 Mon Sep 17 00:00:00 2001
From: David <dmanning.au@gmail.com>
Date: Thu, 29 Jan 2026 12:52:41 +1100
Subject: [PATCH] PostCounter

---
 script.js       | 18 ++++++++++++++----
 styles/main.css | 17 +++++++++++++++++
 2 files changed, 31 insertions(+), 4 deletions(-)

diff --git a/script.js b/script.js
index f10e032..f6113f8 100644
--- a/script.js
+++ b/script.js
@@ -309,6 +309,7 @@ document.addEventListener('DOMContentLoaded', () => {
         }
 
         const paginationHTML = media.length > 1 ? `<div class="carousel-dots">${dotsHTML}</div>` : '';
+        const counterHTML = media.length > 1 ? `<div class="media-counter">1/${media.length}</div>` : '';
 
         article.innerHTML = `
             <div class="post-header">
@@ -319,9 +320,10 @@ document.addEventListener('DOMContentLoaded', () => {
                 ${optionsHTML}
             </div>
             <div class="post-image-wrapper post-media-wrapper">
-                <div class="media-carousel" onscroll="updateDots(this)">
+                <div class="media-carousel" onscroll="updateCarouselState(this)">
                     ${slidesHTML}
                 </div>
+                ${counterHTML}
                 ${paginationHTML}
             </div>
             <div class="post-actions">
@@ -381,14 +383,22 @@ document.addEventListener('DOMContentLoaded', () => {
         });
     }
 
-    // Global helper for dots
-    window.updateDots = function (carousel) {
+    // Global helper for dots and counter
+    window.updateCarouselState = function (carousel) {
         const index = Math.round(carousel.scrollLeft / carousel.offsetWidth);
+
+        // Update Dots
         const dots = carousel.parentElement.querySelectorAll('.dot');
         dots.forEach((dot, i) => {
             if (i === index) dot.classList.add('active');
             else dot.classList.remove('active');
         });
+
+        // Update Counter
+        const counter = carousel.parentElement.querySelector('.media-counter');
+        if (counter) {
+            counter.innerText = `${index + 1}/${dots.length}`;
+        }
     }
 
     // --- FEED LISTENERS ---
@@ -594,7 +604,7 @@ document.addEventListener('DOMContentLoaded', () => {
                     wrapper.appendChild(dotsContainer);
 
                     // Attach Listeners
-                    mediaPreviewContainer.onscroll = () => window.updateDots(mediaPreviewContainer);
+                    mediaPreviewContainer.onscroll = () => window.updateCarouselState(mediaPreviewContainer);
                     enableDragScroll(mediaPreviewContainer); // Desktop Swipe Support
                 }
             }
diff --git a/styles/main.css b/styles/main.css
index 9e0734b..7f11593 100644
--- a/styles/main.css
+++ b/styles/main.css
@@ -870,3 +870,20 @@ p {
     scroll-snap-type: x mandatory;
 }
 
+
+/* --- MEDIA COUNTER BADGE --- */
+.media-counter {
+    position: absolute;
+    top: 12px;
+    right: 12px;
+    background: rgba(0, 0, 0, 0.6);
+    color: #fff;
+    font-size: 12px;
+    padding: 4px 8px;
+    border-radius: 12px;
+    pointer-events: none;
+    z-index: 10;
+    font-weight: 500;
+    backdrop-filter: blur(4px);
+}
+