From fc0e2c7af6b386f18a9c14c3075d7ca020c4fa39 Mon Sep 17 00:00:00 2001
From: 4DBug <4DBug@github.com>
Date: Wed, 26 Aug 2026 21:15:42 -0500
Subject: [PATCH] push

---
 rest/server.js         |   3 +
 web/css/components.css |  24 ++++
 web/css/pages.css      | 251 ++++++++++++++++++++++++++++++++++++++++-
 web/index.html         |   7 +-
 web/js/cards.js        | 143 ++++++++++++++++++++++-
 web/js/home.js         |  29 +++--
 web/js/watch.js        |  18 ++-
 7 files changed, 461 insertions(+), 14 deletions(-)

diff --git a/rest/server.js b/rest/server.js
index c8705db..eca2448 100644
--- a/rest/server.js
+++ b/rest/server.js
@@ -178,6 +178,8 @@ function searchResult(m) {
     name: m.title || m.name,
     year: date ? String(date).slice(0, 4) : '',
     poster: m.poster_path ? `https://image.tmdb.org/t/p/w342${m.poster_path}` : '',
+    backdrop: m.backdrop_path ? `https://image.tmdb.org/t/p/w1280${m.backdrop_path}` : '',
+    rating: m.vote_average ? Number(m.vote_average).toFixed(1) : '',
     overview: m.overview || '',
   };
 }
@@ -239,6 +241,7 @@ async function handleEpisodes(req, res, url, id, season) {
         episode_number: e.episode_number,
         name: e.name,
         air_date: e.air_date || '',
+        still: e.still_path ? `https://image.tmdb.org/t/p/w300${e.still_path}` : '',
       })),
     });
   } catch (e) {
diff --git a/web/css/components.css b/web/css/components.css
index 4debeac..fa84507 100644
--- a/web/css/components.css
+++ b/web/css/components.css
@@ -230,13 +230,37 @@ select.field {
 
 .card__meta {
   margin-top: 2px;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  min-width: 0;
   font-size: var(--text-xs);
   color: var(--color-text-faint);
+}
+
+.card__meta__text {
+  min-width: 0;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
 }
 
+.card__ep {
+  color: var(--color-text);
+  font-weight: var(--font-weight-semibold);
+  letter-spacing: 0.03em;
+  white-space: nowrap;
+}
+
+.card__ep-dot {
+  margin: 0 2px;
+  color: var(--color-text-faint);
+}
+
+.card__dot {
+  color: var(--color-text-faint);
+}
+
 .card__progress {
   position: absolute;
   left: 0;
diff --git a/web/css/pages.css b/web/css/pages.css
index 9b176ad..3ac7fdf 100644
--- a/web/css/pages.css
+++ b/web/css/pages.css
@@ -2,7 +2,230 @@
   PAGES — page-specific layout: home, search, watch.
   Widget styling lives in components.css; this file only positions
   page-level blocks and handles responsive behavior.
-*/
+ */
+
+/* ---- home: hero carousel ------------------------------------------------------ */
+
+.hero {
+  position: relative;
+  height: clamp(440px, 72vh, 640px);
+  margin: calc(-1 * var(--space-5)) 0 var(--space-6);
+  overflow: hidden;
+  background: var(--color-surface);
+}
+
+.hero__slides,
+.hero__slide {
+  position: absolute;
+  inset: 0;
+}
+
+.hero__slide {
+  opacity: 0;
+  visibility: hidden;
+  transition: opacity 600ms ease, visibility 0s linear 600ms;
+}
+
+.hero__slide.is-active {
+  z-index: 1;
+  opacity: 1;
+  visibility: visible;
+  transition: opacity 600ms ease;
+}
+
+.hero__backdrop {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  transform: scale(1.04);
+  transition: transform 8s ease;
+}
+
+.hero__slide.is-active .hero__backdrop {
+  transform: scale(1);
+}
+
+.hero__scrim {
+  position: absolute;
+  inset: 0;
+  background:
+    linear-gradient(90deg, rgba(0, 0, 0, 0.84) 0%, rgba(0, 0, 0, 0.58) 45%, rgba(0, 0, 0, 0.22) 75%, rgba(0, 0, 0, 0.05) 100%),
+    linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.18) 45%, rgba(0, 0, 0, 0.05) 100%);
+}
+
+.hero__fade {
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  height: 34%;
+  background: linear-gradient(to top, var(--color-bg) 2%, color-mix(in srgb, var(--color-bg) 72%, transparent) 58%, transparent 100%);
+  pointer-events: none;
+}
+
+.hero__inner {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: 2;
+  width: 100%;
+  max-width: var(--container-max);
+  padding: 0 var(--container-pad);
+  display: flex;
+  align-items: flex-end;
+}
+
+.hero__content {
+  max-width: 620px;
+  padding-bottom: clamp(72px, 12vh, 112px);
+}
+
+.hero__kicker {
+  display: inline-block;
+  margin-bottom: var(--space-3);
+  padding: 4px 10px;
+  border: 1px solid rgba(255, 255, 255, 0.14);
+  border-radius: var(--radius-full);
+  background: rgba(255, 255, 255, 0.08);
+  backdrop-filter: blur(8px);
+  color: rgba(255, 255, 255, 0.78);
+  font-size: var(--text-xs);
+  font-weight: var(--font-weight-semibold);
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+.hero__title {
+  font-size: clamp(2.2rem, 5vw, 3.6rem);
+  line-height: 1.05;
+  letter-spacing: -0.03em;
+  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.4);
+}
+
+.hero__meta {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 10px;
+  margin-top: var(--space-4);
+  color: rgba(255, 255, 255, 0.78);
+  font-size: var(--text-sm);
+  font-weight: var(--font-weight-medium);
+}
+
+.hero__rating {
+  color: var(--color-star);
+  font-weight: var(--font-weight-semibold);
+}
+
+.hero__dot {
+  color: rgba(255, 255, 255, 0.35);
+}
+
+.hero__meta .badge {
+  border-color: rgba(255, 255, 255, 0.18);
+  background: rgba(255, 255, 255, 0.08);
+  color: rgba(255, 255, 255, 0.88);
+}
+
+.hero__overview {
+  max-width: 58ch;
+  margin-top: var(--space-4);
+  color: rgba(255, 255, 255, 0.8);
+  font-size: var(--text-sm);
+  line-height: 1.6;
+  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.35);
+  display: -webkit-box;
+  -webkit-line-clamp: 3;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+.hero__actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--space-3);
+  margin-top: var(--space-5);
+}
+
+.hero__play {
+  padding: 10px 24px;
+  font-size: var(--text-md);
+}
+
+.hero__play svg {
+  width: 18px;
+  height: 18px;
+}
+
+.hero__arrow {
+  position: absolute;
+  z-index: 3;
+  top: 50%;
+  transform: translateY(-50%);
+  display: grid;
+  place-items: center;
+  width: 44px;
+  height: 44px;
+  border: none;
+  border-radius: var(--radius-full);
+  background: rgba(10, 10, 10, 0.42);
+  color: #fff;
+  backdrop-filter: blur(8px);
+  cursor: pointer;
+  opacity: 0;
+  transition: opacity 160ms ease, background 120ms ease;
+}
+
+.hero:hover .hero__arrow,
+.hero__arrow:focus-visible {
+  opacity: 1;
+}
+
+.hero__arrow:hover {
+  background: rgba(10, 10, 10, 0.65);
+}
+
+.hero__arrow svg {
+  width: 22px;
+  height: 22px;
+}
+
+.hero__arrow--prev {
+  left: 20px;
+}
+
+.hero__arrow--next {
+  right: 20px;
+}
+
+.hero__dots {
+  position: absolute;
+  z-index: 3;
+  left: 50%;
+  transform: translateX(-50%);
+  bottom: var(--space-5);
+  display: flex;
+  gap: var(--space-2);
+}
+
+.hero__dot {
+  width: 8px;
+  height: 8px;
+  padding: 0;
+  border: none;
+  border-radius: var(--radius-full);
+  background: rgba(255, 255, 255, 0.32);
+  cursor: pointer;
+  transition: width 160ms ease, background 160ms ease;
+}
+
+.hero__dot.is-active {
+  width: 24px;
+  background: var(--color-accent);
+}
 
 /* ---- search ------------------------------------------------------------------ */
 
@@ -249,6 +472,15 @@
   object-fit: cover;
 }
 
+.episode__thumb--empty {
+  display: grid;
+  place-items: center;
+  color: var(--color-text-faint);
+  font-size: var(--text-lg);
+  font-weight: var(--font-weight-semibold);
+  background: linear-gradient(135deg, var(--color-surface-2), var(--color-surface));
+}
+
 .episode__play {
   position: absolute;
   inset: 0;
@@ -428,6 +660,23 @@
     --card-width: 132px;
   }
 
+  .hero {
+    height: clamp(360px, 58vh, 520px);
+    margin-bottom: var(--space-5);
+  }
+
+  .hero__content {
+    padding-bottom: 64px;
+  }
+
+  .hero__overview {
+    -webkit-line-clamp: 2;
+  }
+
+  .hero__arrow {
+    display: none;
+  }
+
   .watch-hero {
     flex-direction: column;
     align-items: flex-start;
diff --git a/web/index.html b/web/index.html
index 31d9957..b68617c 100644
--- a/web/index.html
+++ b/web/index.html
@@ -28,8 +28,11 @@
     </div>
   </header>
 
-  <main class="container page" id="content">
-    <div id="sections"></div>
+  <main class="page" id="content">
+    <div id="heroSlot"></div>
+    <div class="container">
+      <div id="sections"></div>
+    </div>
   </main>
 
   <footer class="site-footer">
diff --git a/web/js/cards.js b/web/js/cards.js
index b4b5142..36457e8 100644
--- a/web/js/cards.js
+++ b/web/js/cards.js
@@ -17,6 +17,8 @@
       name: r.name || r.title || '',
       year: r.year || '',
       poster: r.poster || r.poster_url || '',
+      backdrop: r.backdrop || r.backdrop_url || '',
+      rating: r.rating || (r.vote_average ? Number(r.vote_average).toFixed(1) : ''),
       overview: r.overview || '',
     };
   }
@@ -48,13 +50,14 @@
         : item.type === 'tv'
           ? 'TV'
           : 'Movie');
+    const metaHtml = item.metaHtml || `<span class="card__meta__text">${esc(meta)}</span>`;
     el.innerHTML = `
       <span class="card__poster${poster ? '' : ' card__poster--empty'}">
         ${poster ? `<img src="${poster}" alt="" loading="lazy">` : '?'}
         ${progress}
       </span>
       <span class="card__title">${esc(item.name)}</span>
-      <span class="card__meta">${esc(meta)}</span>`;
+      <span class="card__meta">${metaHtml}</span>`;
     return el;
   }
 
@@ -96,13 +99,147 @@
       poster: r.poster || '',
       meta:
         r.type === 'tv'
-          ? `S${r.season}E${r.episode}${r.title ? ` · ${r.title}` : ''} · ${formatSeconds(Math.max(0, r.d - r.t))} left`
+          ? `S${r.season} · E${r.episode} · ${formatSeconds(Math.max(0, r.d - r.t))} left`
           : `Movie · ${formatSeconds(Math.max(0, r.d - r.t))} left`,
+      metaHtml:
+        r.type === 'tv'
+          ? `<span class="card__ep">S${r.season} <span class="card__ep-dot">·</span> E${r.episode}</span><span class="card__dot">·</span><span class="card__meta__text">${formatSeconds(Math.max(0, r.d - r.t))} left</span>`
+          : `<span class="card__meta__text">Movie · ${formatSeconds(Math.max(0, r.d - r.t))} left</span>`,
       progress: r.d ? r.t / r.d : 0,
     }));
     return row('Continue watching', items);
   }
 
+  function heroCarousel(items) {
+    const data = (items || []).filter((item) => item && item.backdrop && item.name);
+    if (!data.length) return null;
+
+    const section = document.createElement('section');
+    section.className = 'hero';
+    section.setAttribute('aria-roledescription', 'carousel');
+    section.setAttribute('aria-label', 'Featured titles');
+
+    const wrap = document.createElement('div');
+    wrap.className = 'hero__slides';
+    const slideEls = [];
+
+    for (let i = 0; i < data.length; i += 1) {
+      const item = data[i];
+      const slide = document.createElement('article');
+      slide.className = i === 0 ? 'hero__slide is-active' : 'hero__slide';
+      slide.setAttribute('role', 'group');
+      slide.setAttribute('aria-roledescription', 'slide');
+      slide.setAttribute('aria-label', `${i + 1} of ${data.length}: ${item.name}`);
+
+      const typeLabel = item.type === 'tv' ? 'TV' : 'Movie';
+      const metaBits = [
+        item.rating ? `<span class="hero__rating">★ ${esc(item.rating)}</span>` : '',
+        item.year ? `<span>${esc(item.year)}</span>` : '',
+        `<span class="badge">${esc(typeLabel)}</span>`,
+      ]
+        .filter(Boolean)
+        .join('<span class="hero__dot">·</span>');
+
+      slide.innerHTML = `
+        <img class="hero__backdrop" src="${item.backdrop}" alt="" loading="${i === 0 ? 'eager' : 'lazy'}">
+        <div class="hero__scrim"></div>
+        <div class="hero__fade"></div>
+        <div class="container hero__inner">
+          <div class="hero__content">
+            <span class="hero__kicker">Trending now</span>
+            <h1 class="hero__title">${esc(item.name)}</h1>
+            <div class="hero__meta">${metaBits}</div>
+            ${item.overview ? `<p class="hero__overview">${esc(item.overview)}</p>` : ''}
+            <div class="hero__actions">
+              <a class="btn btn--primary hero__play" href="${watchHref(item)}">
+                <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M8 5v14l11-7z"></path></svg>
+                <span>Play</span>
+              </a>
+            </div>
+          </div>
+        </div>`;
+      wrap.appendChild(slide);
+      slideEls.push(slide);
+    }
+
+    section.appendChild(wrap);
+
+    if (slideEls.length > 1) {
+      const prev = document.createElement('button');
+      prev.type = 'button';
+      prev.className = 'hero__arrow hero__arrow--prev';
+      prev.setAttribute('aria-label', 'Previous slide');
+      prev.innerHTML = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M15 18l-6-6 6-6"></path></svg>';
+
+      const next = document.createElement('button');
+      next.type = 'button';
+      next.className = 'hero__arrow hero__arrow--next';
+      next.setAttribute('aria-label', 'Next slide');
+      next.innerHTML = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M9 6l6 6-6 6"></path></svg>';
+
+      const dots = document.createElement('div');
+      dots.className = 'hero__dots';
+      const dotEls = [];
+      for (let i = 0; i < slideEls.length; i += 1) {
+        const dot = document.createElement('button');
+        dot.type = 'button';
+        dot.className = i === 0 ? 'hero__dot is-active' : 'hero__dot';
+        dot.setAttribute('aria-label', `Go to slide ${i + 1}`);
+        dots.appendChild(dot);
+        dotEls.push(dot);
+      }
+
+      section.append(prev, next, dots);
+
+      let current = 0;
+      let timer = null;
+
+      function goTo(index) {
+        current = (index + slideEls.length) % slideEls.length;
+        slideEls.forEach((slide, i) => slide.classList.toggle('is-active', i === current));
+        dotEls.forEach((dot, i) => dot.classList.toggle('is-active', i === current));
+      }
+
+      function start() {
+        stop();
+        if (!document.hidden) timer = setInterval(() => goTo(current + 1), 7000);
+      }
+
+      function stop() {
+        if (timer) {
+          clearInterval(timer);
+          timer = null;
+        }
+      }
+
+      prev.addEventListener('click', () => {
+        goTo(current - 1);
+        start();
+      });
+      next.addEventListener('click', () => {
+        goTo(current + 1);
+        start();
+      });
+      dotEls.forEach((dot, i) => dot.addEventListener('click', () => {
+        goTo(i);
+        start();
+      }));
+      section.addEventListener('mouseenter', stop);
+      section.addEventListener('mouseleave', start);
+      section.addEventListener('focusin', stop);
+      section.addEventListener('focusout', (e) => {
+        if (!section.contains(e.relatedTarget)) start();
+      });
+      document.addEventListener('visibilitychange', () => {
+        if (document.hidden) stop();
+        else start();
+      });
+      start();
+    }
+
+    return section;
+  }
+
   window.SR = window.SR || {};
-  SR.cards = { normalizeItem, card, row, grid, emptyState, continueRow };
+  SR.cards = { normalizeItem, card, row, grid, emptyState, continueRow, watchHref, heroCarousel };
 })();
diff --git a/web/js/home.js b/web/js/home.js
index 15eb747..f7cb5ca 100644
--- a/web/js/home.js
+++ b/web/js/home.js
@@ -6,6 +6,7 @@
 
   SR.app.initChrome();
 
+  const heroSlot = document.getElementById('heroSlot');
   const sections = document.getElementById('sections');
 
   const cont = SR.cards.continueRow();
@@ -16,16 +17,30 @@
     sections.appendChild(SR.cards.row(title, data.results.map(SR.cards.normalizeItem)));
   }
 
+  function itemsFrom(data) {
+    return data && Array.isArray(data.results) ? data.results.map(SR.cards.normalizeItem) : [];
+  }
+
   (async () => {
+    const [movieRes, tvRes] = await Promise.allSettled([
+      SR.api.trending('movie', 'day'),
+      SR.api.trending('tv', 'week'),
+    ]);
+
+    if (movieRes.status === 'fulfilled') appendRow(movieRes.value, 'Trending movies today');
+    else SR.app.showError(movieRes.reason, 'could not load trending movies');
+
+    if (tvRes.status === 'fulfilled') appendRow(tvRes.value, 'Trending shows this week');
+    else SR.app.showError(tvRes.reason, 'could not load trending shows');
+
     try {
-      appendRow(await SR.api.trending('movie', 'day'), 'Trending movies today');
+      const heroData = [...itemsFrom(tvRes.value), ...itemsFrom(movieRes.value)]
+        .filter((item) => item.backdrop && item.overview && item.name)
+        .slice(0, 6);
+      const hero = SR.cards.heroCarousel(heroData);
+      if (hero) heroSlot.appendChild(hero);
     } catch (e) {
-      SR.app.showError(e, 'could not load trending movies');
-    }
-    try {
-      appendRow(await SR.api.trending('tv', 'week'), 'Trending shows this week');
-    } catch (e) {
-      SR.app.showError(e, 'could not load trending shows');
+      SR.app.showError(e, 'could not load featured titles');
     }
   })();
 })();
diff --git a/web/js/watch.js b/web/js/watch.js
index fab340c..253d6ab 100644
--- a/web/js/watch.js
+++ b/web/js/watch.js
@@ -614,12 +614,28 @@
       b.type = 'button';
       b.className = ep.episode_number === state.episode ? 'episode episode--current' : 'episode';
       const date = ep.air_date ? ` · ${SR.util.escapeHtml(ep.air_date)}` : '';
+      const still = ep.still || (ep.still_path ? SR.util.tmdbResize(ep.still_path, 'w300') : '');
       b.innerHTML = `
-        <span class="episode__thumb"><span class="episode__play">▶</span></span>
+        <span class="episode__thumb${still ? '' : ' episode__thumb--empty'}">
+          ${still ? `<img src="${still}" alt="" loading="lazy">` : `<span aria-hidden="true">${ep.episode_number}</span>`}
+          <span class="episode__play">▶</span>
+        </span>
         <span class="episode__body">
           <span class="episode__num">S${state.season} · E${ep.episode_number}${date}</span>
           <span class="episode__title">${SR.util.escapeHtml(ep.name || `Episode ${ep.episode_number}`)}</span>
         </span>`;
+      const img = b.querySelector('.episode__thumb img');
+      if (img) {
+        img.addEventListener('error', () => {
+          const thumb = img.closest('.episode__thumb');
+          img.remove();
+          thumb.classList.add('episode__thumb--empty');
+          const num = document.createElement('span');
+          num.setAttribute('aria-hidden', 'true');
+          num.textContent = ep.episode_number;
+          thumb.prepend(num);
+        });
+      }
       b.addEventListener('click', () => playEpisode(ep.episode_number));
       episodeGrid.appendChild(b);
     }