Update templates/index.html

templates/index.html

@@ -35,6 +35,9 @@
     <a href="#map"       class="nav-item" data-section="map">
       <span class="nav-icon">🗺️</span><span class="nav-label">Colleges Map</span>
     </a>
+    <a href="#gallery"   class="nav-item" data-section="gallery">
+      <span class="nav-icon">🖼️</span><span class="nav-label">Gallery</span>
+    </a>
     <a href="#table"     class="nav-item" data-section="table">
       <span class="nav-icon">📋</span><span class="nav-label">Participants</span>
     </a>
@@ -282,6 +285,29 @@
       <div class="map-legend-grid" id="mapLegendGrid"></div>
     </section>
 
+    <!-- ── Image Gallery ─────────────────────────────────────────── -->
+    <section id="gallery" class="section">
+      <div class="section-header">
+        <h2 class="section-title">Photo Gallery</h2>
+        <span class="section-badge">Group Photographs</span>
+      </div>
+      
+      <div class="gallery-grid">
+        <div class="gallery-card" onclick="openLightbox('/static/images/DTE Batch-1 group photo_page-0001.jpg', 'Batch 1 - Group Photo')">
+          <img src="/static/images/DTE Batch-1 group photo_page-0001.jpg" alt="Batch 1 Group Photo" loading="lazy">
+          <div class="gallery-caption">Batch 1 (09th Feb - 13th Feb 2026)</div>
+        </div>
+        <div class="gallery-card" onclick="openLightbox('/static/images/DTE Batch-2 group photo_page-0001.jpg', 'Batch 2 - Group Photo')">
+          <img src="/static/images/DTE Batch-2 group photo_page-0001.jpg" alt="Batch 2 Group Photo" loading="lazy">
+          <div class="gallery-caption">Batch 2 (16th Feb - 20th Feb 2026)</div>
+        </div>
+        <div class="gallery-card" onclick="openLightbox('/static/images/DTE Batch-3 group photo_page-0001.jpg', 'Batch 3 - Group Photo')">
+          <img src="/static/images/DTE Batch-3 group photo_page-0001.jpg" alt="Batch 3 Group Photo" loading="lazy">
+          <div class="gallery-caption">Batch 3 (23rd Feb - 27th Feb 2026)</div>
+        </div>
+      </div>
+    </section>
+
     <!-- ── Participants Table ─────────────────────────────────────── -->
     <section id="table" class="section">
       <div class="section-header">
@@ -342,6 +368,15 @@
   </div>
 </div>
 
+<!-- Image Lightbox Modal -->
+<div id="lightboxModal" class="modal-overlay" style="display:none; z-index: 9999;">
+  <div class="lightbox-content" style="position: relative; max-width: 90%; max-height: 90%; display: flex; flex-direction: column; align-items: center;">
+    <button class="modal-close" id="lightboxClose" style="position: absolute; top: -40px; right: 0; color: white; background: transparent; border: none; font-size: 1.5rem; width: auto; height: auto;">✕</button>
+    <img id="lightboxImage" src="" alt="Gallery Image" style="max-width: 100%; max-height: 80vh; border-radius: var(--radius); object-fit: contain; box-shadow: var(--shadow);">
+    <div id="lightboxCaption" style="color: white; text-align: center; margin-top: 12px; font-weight: 600; font-size: 1rem; letter-spacing: 0.5px;"></div>
+  </div>
+</div>
+
 <script src="/static/js/main.js"></script>
 </body>
 </html>