<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Banner Preview</title>
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body {
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
      background: #1a1a1a;
      color: #fff;
      padding: 20px;
    }
    h1 {
      text-align: center;
      margin-bottom: 20px;
      font-weight: 300;
    }
    .grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 16px;
      max-width: 1600px;
      margin: 0 auto;
    }
    .card {
      background: #2a2a2a;
      border-radius: 8px;
      overflow: hidden;
      cursor: pointer;
      transition: transform 0.2s, box-shadow 0.2s;
    }
    .card:hover {
      transform: translateY(-4px);
      box-shadow: 0 8px 24px rgba(0,0,0,0.4);
    }
    .card img {
      width: 100%;
      height: auto;
      display: block;
    }
    .card-info {
      padding: 12px;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .card-number {
      font-size: 14px;
      font-weight: 600;
      color: #888;
    }
    .card-fav {
      background: none;
      border: none;
      font-size: 20px;
      cursor: pointer;
      opacity: 0.3;
      transition: opacity 0.2s;
    }
    .card-fav:hover, .card-fav.active {
      opacity: 1;
    }
    
    /* Modal */
    .modal {
      display: none;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0,0,0,0.95);
      z-index: 1000;
      justify-content: center;
      align-items: center;
      padding: 40px;
    }
    .modal.active { display: flex; }
    .modal img {
      max-width: 100%;
      max-height: 100%;
      object-fit: contain;
    }
    .modal-close {
      position: absolute;
      top: 20px;
      right: 30px;
      font-size: 40px;
      color: #fff;
      cursor: pointer;
      opacity: 0.7;
    }
    .modal-close:hover { opacity: 1; }
    .modal-nav {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      font-size: 60px;
      color: #fff;
      cursor: pointer;
      opacity: 0.5;
      user-select: none;
    }
    .modal-nav:hover { opacity: 1; }
    .modal-prev { left: 20px; }
    .modal-next { right: 20px; }
    .modal-info {
      position: absolute;
      bottom: 20px;
      left: 50%;
      transform: translateX(-50%);
      background: rgba(0,0,0,0.8);
      padding: 10px 20px;
      border-radius: 8px;
      font-size: 14px;
    }
    
    /* Favorites summary */
    .favorites {
      position: fixed;
      bottom: 20px;
      right: 20px;
      background: #333;
      padding: 16px 20px;
      border-radius: 8px;
      max-width: 300px;
      box-shadow: 0 4px 12px rgba(0,0,0,0.3);
    }
    .favorites h3 {
      font-size: 14px;
      margin-bottom: 8px;
      color: #888;
    }
    .favorites-list {
      font-size: 16px;
      font-weight: 600;
    }
    .favorites:empty { display: none; }
    
    @media (max-width: 1200px) {
      .grid { grid-template-columns: repeat(2, 1fr); }
    }
    @media (max-width: 768px) {
      .grid { grid-template-columns: 1fr; }
    }
  </style>
</head>
<body>
  <h1>Banner Variations</h1>
  
  <div class="grid" id="grid"></div>
  
  <div class="modal" id="modal">
    <span class="modal-close" onclick="closeModal()">&times;</span>
    <span class="modal-nav modal-prev" onclick="navModal(-1)">&#8249;</span>
    <img id="modal-img" src="" alt="">
    <span class="modal-nav modal-next" onclick="navModal(1)">&#8250;</span>
    <div class="modal-info" id="modal-info"></div>
  </div>
  
  <div class="favorites" id="favorites"></div>

  <script>
    // Configuration - UPDATE THIS
    const BANNER_COUNT = 20;
    const BANNER_PREFIX = 'banner-';
    const BANNER_EXT = '.png';
    
    let currentIndex = 0;
    let favorites = new Set();
    
    function init() {
      const grid = document.getElementById('grid');
      
      for (let i = 1; i <= BANNER_COUNT; i++) {
        const num = String(i).padStart(2, '0');
        const filename = `${BANNER_PREFIX}${num}${BANNER_EXT}`;
        
        const card = document.createElement('div');
        card.className = 'card';
        card.innerHTML = `
          <img src="${filename}" alt="Banner ${num}" onclick="openModal(${i-1})">
          <div class="card-info">
            <span class="card-number">#${num}</span>
            <button class="card-fav" onclick="toggleFav(${i}, event)">★</button>
          </div>
        `;
        grid.appendChild(card);
      }
    }
    
    function openModal(index) {
      currentIndex = index;
      updateModal();
      document.getElementById('modal').classList.add('active');
      document.body.style.overflow = 'hidden';
    }
    
    function closeModal() {
      document.getElementById('modal').classList.remove('active');
      document.body.style.overflow = '';
    }
    
    function navModal(dir) {
      currentIndex = (currentIndex + dir + BANNER_COUNT) % BANNER_COUNT;
      updateModal();
    }
    
    function updateModal() {
      const num = String(currentIndex + 1).padStart(2, '0');
      const filename = `${BANNER_PREFIX}${num}${BANNER_EXT}`;
      document.getElementById('modal-img').src = filename;
      document.getElementById('modal-info').textContent = `Banner #${num}`;
    }
    
    function toggleFav(num, event) {
      event.stopPropagation();
      const btn = event.target;
      if (favorites.has(num)) {
        favorites.delete(num);
        btn.classList.remove('active');
      } else {
        favorites.add(num);
        btn.classList.add('active');
      }
      updateFavorites();
    }
    
    function updateFavorites() {
      const el = document.getElementById('favorites');
      if (favorites.size === 0) {
        el.innerHTML = '';
      } else {
        const nums = Array.from(favorites).sort((a,b) => a-b).map(n => `#${String(n).padStart(2,'0')}`);
        el.innerHTML = `<h3>Favorites</h3><div class="favorites-list">${nums.join(', ')}</div>`;
      }
    }
    
    document.addEventListener('keydown', (e) => {
      if (!document.getElementById('modal').classList.contains('active')) return;
      if (e.key === 'Escape') closeModal();
      if (e.key === 'ArrowLeft') navModal(-1);
      if (e.key === 'ArrowRight') navModal(1);
    });
    
    init();
  </script>
</body>
</html>
