media.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Media Gallery - i2i Amherst Venture Accelerator</title>
  <!-- Favicon -->
  <link rel="icon" href="images/logo-transparent.png">
  <!-- AOS CSS -->
  <link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css">
  <!-- Hamburger menu (bars) on small screens -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  <!-- Global styles -->
  <link rel="stylesheet" href="css/style.css">
  <!-- Icon Social Media-->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
  <style>
    .gallery {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
      gap: 24px;
      padding: 20px 0;
      max-width: 1200px;
      margin: 0 auto;
    }
    .gallery-item {
      position: relative;
      overflow: hidden;
      border-radius: 16px;
      box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
      aspect-ratio: 4/3;
      cursor: pointer;
      background: #f1f5f9;
      transition: transform 0.3s ease, box-shadow 0.3s ease;
    }
    .gallery-item:hover {
      transform: translateY(-6px);
      box-shadow: 0 16px 35px rgba(255, 87, 34, 0.25);
    }
    .gallery-item img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
      transition: transform 0.4s ease;
    }
    .gallery-item:hover img {
      transform: scale(1.06);
    }

    /* Fullscreen Lightbox Modal */
    .lightbox-modal {
      display: none;
      position: fixed;
      top: 0;
      left: 0;
      width: 100vw;
      height: 100vh;
      background: rgba(0, 0, 0, 0.92);
      backdrop-filter: blur(8px);
      z-index: 99999;
      justify-content: center;
      align-items: center;
      opacity: 0;
      transition: opacity 0.3s ease;
    }
    .lightbox-modal.active {
      display: flex;
      opacity: 1;
    }
    .lightbox-content {
      max-width: 90vw;
      max-height: 88vh;
      border-radius: 12px;
      box-shadow: 0 20px 50px rgba(0, 0, 0, 0.8);
      object-fit: contain;
      transform: scale(0.95);
      transition: transform 0.3s ease;
    }
    .lightbox-modal.active .lightbox-content {
      transform: scale(1);
    }
    .lightbox-close {
      position: absolute;
      top: 24px;
      right: 32px;
      color: #ffffff;
      font-size: 36px;
      font-weight: bold;
      cursor: pointer;
      z-index: 100000;
      transition: color 0.2s ease, transform 0.2s ease;
    }
    .lightbox-close:hover {
      color: #FF5722;
      transform: scale(1.15);
    }
  </style>
</head>
<body>

  <header class="header">
    <nav class="navbar">
      <a href="/" class="logo">
        <img class="logo-img" src="images/i2iLogoTextOrange.png" alt="i2i Logo">
      </a>
      <a href="./our-team.html" class="nav-link line-hover">Our Team</a></li>
      <a href="./startups.html" class="nav-link line-hover">Startups</a></li>
      <a href="./events.html" class="nav-link line-hover">Events</a></li>
      <a href="./get-in-touch.html" class="nav-link line-hover">Get in Touch</a></li>
      <a href="./media.html" class="nav-link line-hover">Media</a></li>
      <a href="javascript:void(0);" class="icon" onclick="mobileNavbar()">
        <i class="fa fa-bars"></i>
      </a>
    </nav>
  </header>

  <main id="vanta-bg" class="main-content">
    <section class="hero">
      <div class="hero-text" data-aos="fade-right">
        <h1 class="hero-title">Media Gallery</h1>
        <p class="hero-description">Moments, workshops, and memories captured at i2i.</p>
      </div>
    </section>

    <section id="gallery-info" class="info-sections">
      <h2 class="section-title">Photo Gallery</h2>
      <p>Take a look at our past events, pitch sessions, and team collaborations. Click any image for full-screen view.</p>

      <div id="media-gallery" class="gallery"></div>
    </section>

    <!-- Lightbox Modal -->
    <div id="lightbox" class="lightbox-modal" onclick="closeLightbox(event)">
      <span class="lightbox-close" onclick="closeLightbox(event)">&times;</span>
      <img id="lightbox-img" class="lightbox-content" src="" alt="Full Screen View">
    </div>

    <footer class="footer">
      <div class="footer-content">
        <div class="footer-section">
          <a href = "/" class="footer-logo">
            <img src="images/i2iLogoTextOrange.png" alt="i2i Logo">
          </a>

          <div class="social-links">
            <a href="https://linkedin.com/company/i2i-amherst" target="_blank"><i class="fab fa-linkedin"></i></a>
            <a href="https://instagram.com/i2i.amherst" target="_blank"><i class="fab fa-instagram"></i></a>
          </div>
        </div>
        
        <div class="footer-section">
          <h4>Quick Links</h4>
          <ul>
            <li><a href="/our-team.html">Our Team</a></li>
            <li><a href="/startups.html">Startups</a></li>
            <li><a href="/events.html">Events</a></li>
            <li><a href="/get-in-touch.html">Contact</a></li>
            <li><a href="/media.html">Media</a></li>
          </ul>
        </div>
        
        <div class="footer-section">
          <h4>Contact</h4>
          <p>Amherst College</p>
          <p>Amherst, MA 01002</p>
          <p>Email: i2i@amherst.edu</p>
        </div>
      </div>
      
      <div class="footer-bottom">
        <p>© 2024 i2i Amherst Venture Accelerator. All rights reserved.</p>
        <a href="https://ac-i2i-engineering-github-io.vercel.app/login" class="staff-login-link">Staff Login</a>
      </div>
    </footer>   
  </main>

  <!-- AOS JS -->
  <script src="https://unpkg.com/aos@next/dist/aos.js"></script>
  <!-- Vanta JS -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r121/three.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.net.min.js"></script>
  <!-- Supabase -->
  <script src="https://cdn.jsdelivr.net/npm/@supabase/supabase-js@2.112.3/dist/umd/supabase.js"></script>
  <script src="js/supabase-client.js"></script>
  <!-- Custom JS -->
  <script src="js/app.js"></script>
  <script src="js/initAOS.js"></script>
  <script>
    // Lightbox modal logic
    function openLightbox(src) {
      const modal = document.getElementById('lightbox');
      const img = document.getElementById('lightbox-img');
      img.src = src;
      modal.classList.add('active');
    }

    function closeLightbox(e) {
      if (e.target.id === 'lightbox' || e.target.classList.contains('lightbox-close')) {
        const modal = document.getElementById('lightbox');
        modal.classList.remove('active');
      }
    }

    document.addEventListener('keydown', function(e) {
      if (e.key === 'Escape') {
        document.getElementById('lightbox').classList.remove('active');
      }
    });

    // Media is managed in the admin panel and read live from Supabase --
    // this is the single source of truth, no local JSON fallback.
    async function loadGallery() {
      const gallery = document.getElementById('media-gallery');
      gallery.innerHTML = "";

      try {
        const { data: items, error } = await supabaseClient
          .from('media')
          .select('*')
          .eq('is_published', true)
          .order('sort_order', { ascending: true });

        if (error) throw error;

        items.forEach((item, index) => {
          const galleryItem = document.createElement('div');
          galleryItem.className = 'gallery-item';
          galleryItem.style.order = index;
          galleryItem.onclick = () => openLightbox(item.url);

          const img = document.createElement('img');
          img.src = item.url;
          img.alt = item.alt_text || `Gallery Photo ${index + 1}`;

          galleryItem.appendChild(img);
          gallery.appendChild(galleryItem);
        });
      } catch (err) {
        console.warn("Failed to load media gallery", err);
      }
    }

    document.addEventListener('DOMContentLoaded', loadGallery);

    VANTA.NET({
      el: "#vanta-bg",
      color: 0xff5722,
      backgroundColor: 0xfafafa,
      points: 10.00,
      maxDistance: 20.00,
      spacing: 15.00,
      waveHeight: 30.00,
      zoom: 0.50
    });
  </script>
</body>
</html>