{
    "html": "<!doctype html>\r\n<html lang=\"en\">\r\n<head>\r\n<meta charset=\"UTF-8\" />\r\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"/>\r\n<title>Banners + Live Section</title>\r\n\r\n<style>\r\n  body {\r\n    margin: 0;\r\n    font-family: \"Poppins\", sans-serif;\r\n    background: #0f172a; /* deep navy like screenshot */\r\n    color: #ffffff;\r\n  }\r\n\r\n  /* ---------------- LIVE SECTION ---------------- */\r\n\r\n  .live-section {\r\n      padding: 20px;\r\n      margin-top: 10px;\r\n  }\r\n\r\n  .live-title {\r\n      font-size: 1.35rem;\r\n      font-weight: 600;\r\n      color: #ffffff;\r\n      margin-bottom: 12px;\r\n      padding-left: 4px;\r\n  }\r\n\r\n  /* Horizontal scroll container */\r\n  .live-carousel {\r\n      display: flex;\r\n      gap: 18px;\r\n      overflow-x: auto;\r\n      scroll-snap-type: x mandatory;\r\n      padding-bottom: 16px;\r\n  }\r\n  .live-carousel::-webkit-scrollbar {\r\n      display: none;\r\n  }\r\n\r\n  /* LIVE CARD */\r\n  .live-card {\r\n      flex-shrink: 0;\r\n      width: 280px;\r\n      background: #111c32;  /* dark navy like the card background */\r\n      border-radius: 18px;\r\n      text-decoration: none;\r\n      padding-bottom: 16px;\r\n      border: 1px solid rgba(255,255,255,0.08);\r\n      scroll-snap-align: center;\r\n      color: #ffffff;\r\n      box-shadow: 0 8px 30px rgba(0,0,0,0.45);\r\n      transition: 0.25s ease;\r\n      cursor: pointer; /* show pointer so users know it's clickable */\r\n      outline: none;\r\n      user-select: none;\r\n  }\r\n\r\n  .live-card:focus {\r\n      box-shadow: 0 14px 45px rgba(96,165,250,0.12), 0 0 0 4px rgba(96,165,250,0.08);\r\n      transform: translateY(-4px);\r\n  }\r\n\r\n  .live-card:hover {\r\n      transform: translateY(-6px);\r\n      box-shadow: 0 14px 45px rgba(0,0,0,0.55);\r\n  }\r\n\r\n  /* Thumbnail Container */\r\n  .live-img-container {\r\n      position: relative;\r\n      width: 100%;\r\n      height: 150px;\r\n  }\r\n\r\n  /* Thumbnail */\r\n  .live-img {\r\n      width: 100%;\r\n      height: 100%;\r\n      object-fit: cover;\r\n      border-top-left-radius: 18px;\r\n      border-top-right-radius: 18px;\r\n  }\r\n\r\n  /* Heart Button */\r\n  .heart-btn {\r\n      position: absolute;\r\n      top: 12px;\r\n      right: 12px;\r\n      width: 36px;\r\n      height: 36px;\r\n      background: rgba(15, 23, 42, 0.75);\r\n      backdrop-filter: blur(8px);\r\n      border: 1px solid rgba(255, 255, 255, 0.15);\r\n      border-radius: 50%;\r\n      display: flex;\r\n      align-items: center;\r\n      justify-content: center;\r\n      cursor: pointer;\r\n      transition: all 0.25s ease;\r\n      z-index: 10;\r\n  }\r\n\r\n  .heart-btn:hover {\r\n      background: rgba(15, 23, 42, 0.9);\r\n      transform: scale(1.1);\r\n      border-color: rgba(239, 68, 68, 0.4);\r\n  }\r\n\r\n  .heart-btn svg {\r\n      width: 18px;\r\n      height: 18px;\r\n      transition: all 0.25s ease;\r\n  }\r\n\r\n  .heart-btn.favorited {\r\n      background: rgba(239, 68, 68, 0.2);\r\n      border-color: rgba(239, 68, 68, 0.5);\r\n  }\r\n\r\n  .heart-btn.favorited svg {\r\n      fill: #ef4444;\r\n      stroke: #ef4444;\r\n  }\r\n\r\n  .heart-btn.favorited:hover {\r\n      background: rgba(239, 68, 68, 0.3);\r\n  }\r\n\r\n  /* Course Title */\r\n  .live-name {\r\n      font-size: 1.05rem;\r\n      font-weight: 600;\r\n      color: #ffffff;\r\n      margin: 14px 14px 6px 14px;\r\n  }\r\n\r\n  /* Subtitle or Meta */\r\n  .live-meta {\r\n      font-size: 0.85rem;\r\n      color: #cbd5e1;\r\n      margin: 0 14px;\r\n  }\r\n\r\n  /* Chips (Active / Hinglish style) */\r\n  .tag-row {\r\n      display: flex;\r\n      justify-content: space-between;\r\n      margin: 0 14px 10px 14px;\r\n  }\r\n\r\n  .tag {\r\n      background: rgba(34,197,94,0.15);\r\n      color: #22c55e;\r\n      padding: 4px 12px;\r\n      border-radius: 20px;\r\n      font-size: 0.75rem;\r\n      font-weight: 600;\r\n  }\r\n\r\n  .tag-lang {\r\n      background: rgba(255,255,255,0.08);\r\n      color: #cbd5e1;\r\n      padding: 4px 10px;\r\n      border-radius: 20px;\r\n      font-size: 0.75rem;\r\n      font-weight: 500;\r\n  }\r\n\r\n  /* Bottom Row */\r\n  .live-footer {\r\n      margin: 12px 14px 0 14px;\r\n      font-size: 0.85rem;\r\n      display: flex;\r\n      justify-content: space-between;\r\n      color: #9ca3af;\r\n  }\r\n\r\n  .open-link {\r\n      color: #60a5fa;\r\n      font-weight: 600;\r\n      text-decoration: none;\r\n  }\r\n\r\n  /* Scroll Buttons */\r\n  .live-controls {\r\n      display: flex;\r\n      justify-content: space-between;\r\n      margin-top: 10px;\r\n  }\r\n\r\n  .live-btn {\r\n      background: rgba(255,255,255,0.08);\r\n      border: 1px solid rgba(255,255,255,0.15);\r\n      padding: 10px 22px;\r\n      border-radius: 12px;\r\n      font-weight: 600;\r\n      color: #e2e8f0;\r\n      cursor: pointer;\r\n      transition: 0.2s;\r\n      backdrop-filter: blur(7px);\r\n  }\r\n\r\n  .live-btn:hover {\r\n      background: rgba(255,255,255,0.15);\r\n      transform: translateY(-2px);\r\n  }\r\n\r\n</style>\r\n</head>\r\n<body>\r\n\r\n<!-- ⭐ LIVE SECTION -->\r\n<div class=\"live-section\">\r\n  <div class=\"live-title\">Free Batches</div>\r\n\r\n  <div class=\"live-carousel\" id=\"liveScroll\">\r\n\r\n    <!-- Card examples: use data-url for redirect and optional data-target=\"_blank\" to open new tab -->\r\n    <div class=\"live-card\" role=\"link\" tabindex=\"0\"\r\n         data-url=\"https://titaniumtech.site/app/ed/separate/v2/index.html?batch=67be1ea9e92878bc16923fe8&telegramid=qwertyteleid22\"\r\n         data-card-id=\"card-1\">\r\n      <div class=\"live-img-container\">\r\n        <img class=\"live-img\" src=\"https://static.pw.live/5eb393ee95fab7468a79d189/ADMIN/0c1bca58-80c7-497f-b828-55cfcb474aed.jpeg\" alt=\"Class 10th Comback thumbnail\">\r\n        <button class=\"heart-btn\" aria-label=\"Add to favorites\">\r\n          <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\">\r\n            <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z\" />\r\n          </svg>\r\n        </button>\r\n      </div>\r\n      <div class=\"live-name\">Class 10th Comback</div>\r\n      <div class=\"live-meta\">Project 45 - Crash Course</div>\r\n    </div>\r\n\r\n\r\n    <div class=\"live-card\" role=\"link\" tabindex=\"0\"\r\n         data-url=\"https://titaniumtech.site/app/ed/separate/v2/index.html?batch=67beb9fc0f67cce58f3de164&telegramid=qwertyteleid22\"\r\n         data-card-id=\"card-2\">\r\n      <div class=\"live-img-container\">\r\n        <img class=\"live-img\" src=\"https://static.pw.live/5eb393ee95fab7468a79d189/ADMIN/b9fb65f8-35c7-4bb8-815e-a5eb933c6079.PNG\" alt=\"Class 9th Comback thumbnail\">\r\n        <button class=\"heart-btn\" aria-label=\"Add to favorites\">\r\n          <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\">\r\n            <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z\" />\r\n          </svg>\r\n        </button>\r\n      </div>\r\n      <div class=\"live-name\">Class 9th Comback</div>\r\n      <div class=\"live-meta\">Project 45 - Crash Course</div>\r\n    </div>\r\n\r\n\r\n    <div class=\"live-card\" role=\"link\" tabindex=\"0\"\r\n         data-url=\"https://titaniumtech.site/app/nt/v1/batch.html?telegramid=qwertyteleid22\"\r\n         data-card-id=\"card-3\">\r\n      <div class=\"live-img-container\">\r\n        <img class=\"live-img\" src=\"https://play-lh.googleusercontent.com/-tLt6jjKIAtTLDpeIYkQrZ-mLr0xAi1UICQ-Xhw_psDWHLF7hSnl80wqBA2ckKdjF7aU\" alt=\"Next Topper thumbnail\">\r\n        <button class=\"heart-btn\" aria-label=\"Add to favorites\">\r\n          <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\">\r\n            <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z\" />\r\n          </svg>\r\n        </button>\r\n      </div>\r\n      <div class=\"live-name\">Next Topper</div>\r\n      <div class=\"live-meta\">Titanium Ed-Tech</div>\r\n    </div>\r\n\r\n    <!-- add more cards here (copy one of the above and change data-url, image and text) -->\r\n\r\n  </div>\r\n\r\n  <div class=\"live-controls\">\r\n    <button class=\"live-btn\" onclick=\"scrollLive(-260)\">‹ Prev</button>\r\n    <button class=\"live-btn\" onclick=\"scrollLive(260)\">Next ›</button>\r\n  </div>\r\n</div>\r\n\r\n<script>\r\n/* ---------------- BANNER LOGIC (guarded) ----------------\r\n   Your original script referenced #bannerTrack and #bannerDots.\r\n   We only run that section if those elements exist to avoid console errors.\r\n*/\r\n(function guardedBanner() {\r\n  const track = document.getElementById(\"bannerTrack\");\r\n  const dotsContainer = document.getElementById(\"bannerDots\");\r\n  if (!track) return; // nothing to do if there's no banner markup on the page\r\n\r\n  // existing banner logic (kept but guarded)\r\n  let total = 3; // real banners (adjust if you actually have banners)\r\n  let index = 1;\r\n  let width = window.innerWidth;\r\n\r\n  track.style.transform = `translateX(${-width * index}px)`;\r\n\r\n  // Create dots (if container present)\r\n  if (dotsContainer) {\r\n    for (let i = 0; i < total; i++) {\r\n      const d = document.createElement(\"div\");\r\n      d.className = \"dot\" + (i === 0 ? \" active\" : \"\");\r\n      dotsContainer.appendChild(d);\r\n    }\r\n  }\r\n\r\n  const dots = document.querySelectorAll(\".dot\");\r\n\r\n  function updateDots(i) {\r\n    dots.forEach((d, idx) => d.classList.toggle(\"active\", idx === i - 1));\r\n  }\r\n\r\n  // Scroll buttons\r\n  function scrollBanner(step) {\r\n    index += step;\r\n    slide();\r\n  }\r\n  window.scrollBanner = scrollBanner; // exposer if needed\r\n\r\n  // Auto slide\r\n  setInterval(() => {\r\n    index++;\r\n    slide();\r\n  }, 3500);\r\n\r\n  // Slide function\r\n  function slide() {\r\n    track.style.transition = \"transform .45s ease\";\r\n    track.style.transform = `translateX(${-width * index}px)`;\r\n\r\n    if (index >= total + 1) updateDots(1);\r\n    else if (index <= 0) updateDots(total);\r\n    else updateDots(index);\r\n  }\r\n\r\n  // Loop edges\r\n  track.addEventListener(\"transitionend\", () => {\r\n    if (index >= total + 1) {\r\n      index = 1;\r\n      track.style.transition = \"none\";\r\n      track.style.transform = `translateX(${-width * index}px)`;\r\n    }\r\n    if (index <= 0) {\r\n      index = total;\r\n      track.style.transition = \"none\";\r\n      track.style.transform = `translateX(${-width * index}px)`;\r\n    }\r\n  });\r\n\r\n  // Fix on resize\r\n  window.addEventListener(\"resize\", () => {\r\n    width = window.innerWidth;\r\n    track.style.transition = \"none\";\r\n    track.style.transform = `translateX(${-width * index}px)`;\r\n  });\r\n})();\r\n\r\n/* ---------------- LIVE SCROLL ---------------- */\r\nfunction scrollLive(x) {\r\n  const el = document.getElementById(\"liveScroll\");\r\n  if (!el) return;\r\n  el.scrollBy({\r\n    left: x,\r\n    behavior: \"smooth\"\r\n  });\r\n}\r\n\r\n/* ---------------- FAVORITE FUNCTIONALITY ---------------- */\r\n(function setupFavorites() {\r\n  const carousel = document.getElementById(\"liveScroll\");\r\n  if (!carousel) return;\r\n\r\n  let currentFavorite = null;\r\n  const originalOrder = Array.from(carousel.children);\r\n\r\n  // Load saved favorite from memory\r\n  function loadFavorite() {\r\n    const saved = sessionStorage.getItem('favoriteBatchCard');\r\n    if (saved) {\r\n      currentFavorite = saved;\r\n      updateFavoriteUI();\r\n      reorderCards();\r\n    }\r\n  }\r\n\r\n  // Save favorite to memory\r\n  function saveFavorite(cardId) {\r\n    if (cardId) {\r\n      sessionStorage.setItem('favoriteBatchCard', cardId);\r\n    } else {\r\n      sessionStorage.removeItem('favoriteBatchCard');\r\n    }\r\n  }\r\n\r\n  // Update heart button UI\r\n  function updateFavoriteUI() {\r\n    const allHearts = carousel.querySelectorAll('.heart-btn');\r\n    allHearts.forEach(btn => {\r\n      const card = btn.closest('.live-card');\r\n      const cardId = card.getAttribute('data-card-id');\r\n      if (cardId === currentFavorite) {\r\n        btn.classList.add('favorited');\r\n        btn.setAttribute('aria-label', 'Remove from favorites');\r\n      } else {\r\n        btn.classList.remove('favorited');\r\n        btn.setAttribute('aria-label', 'Add to favorites');\r\n      }\r\n    });\r\n  }\r\n\r\n  // Reorder cards to show favorite first\r\n  function reorderCards() {\r\n    if (!currentFavorite) {\r\n      // Restore original order\r\n      originalOrder.forEach(card => carousel.appendChild(card));\r\n      return;\r\n    }\r\n\r\n    const cards = Array.from(carousel.children);\r\n    const favoriteCard = cards.find(c => c.getAttribute('data-card-id') === currentFavorite);\r\n    \r\n    if (favoriteCard) {\r\n      // Remove and prepend favorite card\r\n      carousel.removeChild(favoriteCard);\r\n      carousel.insertBefore(favoriteCard, carousel.firstChild);\r\n      \r\n      // Scroll to start to show the favorite\r\n      carousel.scrollTo({ left: 0, behavior: 'smooth' });\r\n    }\r\n  }\r\n\r\n  // Handle heart button clicks\r\n  carousel.addEventListener('click', (e) => {\r\n    const heartBtn = e.target.closest('.heart-btn');\r\n    if (!heartBtn) return;\r\n\r\n    e.stopPropagation(); // Prevent card navigation\r\n    \r\n    const card = heartBtn.closest('.live-card');\r\n    const cardId = card.getAttribute('data-card-id');\r\n\r\n    if (currentFavorite === cardId) {\r\n      // Unfavorite\r\n      currentFavorite = null;\r\n      saveFavorite(null);\r\n      updateFavoriteUI();\r\n      reorderCards();\r\n    } else {\r\n      // Favorite this card (removes previous favorite)\r\n      currentFavorite = cardId;\r\n      saveFavorite(cardId);\r\n      updateFavoriteUI();\r\n      reorderCards();\r\n    }\r\n  });\r\n\r\n  // Initialize on load\r\n  loadFavorite();\r\n})();\r\n\r\n/* ---------------- CARD REDIRECT HANDLERS ----------------\r\n   - Uses data-url attribute\r\n   - Optional data-target=\"_blank\" to open in new tab\r\n   - Keyboard accessible (Enter or Space triggers)\r\n*/\r\n(function attachCardClicks() {\r\n  const cards = document.querySelectorAll(\".live-card[data-url]\");\r\n  if (!cards.length) return;\r\n\r\n  function goTo(card) {\r\n    const url = card.getAttribute(\"data-url\");\r\n    if (!url) return;\r\n    const target = card.getAttribute(\"data-target\");\r\n    if (target === \"_blank\") {\r\n      window.open(url, \"_blank\", \"noopener noreferrer\");\r\n    } else {\r\n      // same-tab navigation\r\n      window.location.href = url;\r\n    }\r\n  } \r\n\r\n  cards.forEach(card => {\r\n    // mouse / touch\r\n    card.addEventListener(\"click\", (e) => {\r\n      // Don't navigate if clicking heart button\r\n      if (e.target.closest('.heart-btn')) return;\r\n      goTo(card);\r\n    });\r\n\r\n    // keyboard\r\n    card.addEventListener(\"keydown\", (e) => {\r\n      if (e.key === \"Enter\" || e.key === \" \") {\r\n        e.preventDefault();\r\n        goTo(card);\r\n      }\r\n    });\r\n\r\n    // prevent accidental text selection while dragging\r\n    card.addEventListener(\"dragstart\", (e) => e.preventDefault());\r\n  });\r\n})();\r\n</script>\r\n\r\n</body>\r\n</html>",
    "updated_at": "2025-12-14T08:26:15+00:00",
    "updated_by": "admin",
    "version": 20
}