UI improvements and added footer

Author: YashDalwani

app.js

@@ -68,7 +68,7 @@ function loadYouTubeAPI() {
   return ytApiPromise;
 }
 
-function setupAutoAdvance(nextHash) {
+function setupAutoAdvance(nextHash, currentVid) {
   const iframe = document.getElementById("yt-player");
   if (!iframe) return;
   loadYouTubeAPI().then(() => {
@@ -78,8 +78,18 @@ function setupAutoAdvance(nextHash) {
       events: {
         onStateChange: (e) => {
           if (e.data === window.YT.PlayerState.ENDED && nextHash) {
+            // Navigate to next video — render() will re-render the playlist with correct highlight
             location.hash = nextHash;
           }
+          if (e.data === window.YT.PlayerState.PLAYING) {
+            // Ensure the correct playlist item is highlighted (handles edge cases)
+            document.querySelectorAll(".pl-item").forEach((el) => {
+              const isActive = el.dataset.vid === currentVid;
+              el.classList.toggle("active", isActive);
+              const nowBadge = el.querySelector(".pl-now");
+              if (nowBadge) nowBadge.style.display = isActive ? "" : "none";
+            });
+          }
         },
       },
     });
@@ -96,6 +106,8 @@ function thumbUrl(video) {
 function render() {
   const hash = location.hash.slice(1); // e.g. /product/crm/video/crm-1
   const parts = hash.split("/").filter(Boolean);
+  const isHome = parts.length === 0 || parts[0] !== "product";
+  document.querySelector(".navbar").classList.toggle("is-home", isHome);
   if (parts[0] === "product" && parts[2] === "video") {
     renderVideo(parts[1], parts[3]);
   } else if (parts[0] === "product") {
@@ -137,7 +149,23 @@ function renderHome() {
       </div>
     </div>
     <h2 class="section-label fade">Choose a product</h2>
-    <div class="grid fade">${cards}</div>`;
+    <div class="grid fade">${cards}</div>
+    <footer class="site-footer fade">
+      <div class="footer-inner">
+        <div class="footer-brand">
+          <img src="icons/browserstack-icon.svg" alt="BrowserStack" width="28" height="28" />
+          <span>BrowserStack Demo Hub</span>
+        </div>
+        <p class="footer-desc">Your one-stop destination for BrowserStack product walkthroughs, onboarding videos, and documentation.</p>
+        <div class="footer-links">
+          <a href="https://www.browserstack.com/docs" target="_blank" rel="noopener">Documentation</a>
+          <a href="https://www.browserstack.com/contact" target="_blank" rel="noopener">Support</a>
+          <a href="https://www.browserstack.com/blog" target="_blank" rel="noopener">Blog</a>
+          <a href="https://www.browserstack.com/pricing" target="_blank" rel="noopener">Pricing</a>
+        </div>
+        <p class="footer-copy">&copy; ${new Date().getFullYear()} BrowserStack. All rights reserved.</p>
+      </div>
+    </footer>`;
 }
 
 function renderDashboard(pid) {
@@ -187,7 +215,7 @@ function renderVideo(pid, vid) {
   const playlist = p.videos
     .map(
       (item, i) => `
-      <li class="pl-item ${item.id === v.id ? "active" : ""}" onclick="location.hash='#/product/${p.id}/video/${item.id}'">
+      <li class="pl-item ${item.id === v.id ? "active" : ""}" data-vid="${item.id}" onclick="location.hash='#/product/${p.id}/video/${item.id}'">
         <span class="pl-index">${i + 1}</span>
         <img class="pl-thumb" src="${thumbUrl(item)}" alt="" onerror="this.classList.add('noimg')" />
         <span class="pl-meta">
@@ -231,7 +259,7 @@ function renderVideo(pid, vid) {
     </div>`;
   // Auto-advance to the next video when this one ends.
   const next = p.videos[idx + 1];
-  setupAutoAdvance(next ? `#/product/${p.id}/video/${next.id}` : null);
+  setupAutoAdvance(next ? `#/product/${p.id}/video/${next.id}` : null, v.id);
   // Keep the active playlist item in view.
   const active = document.querySelector(".pl-item.active");
   if (active) active.scrollIntoView({ block: "nearest" });

styles.css

@@ -63,6 +63,8 @@
   font-size: 16px; transition: background 0.25s, transform 0.2s; flex-shrink: 0;
 }
 .dark-toggle:hover { background: var(--border); transform: scale(1.08); }
+.navbar.is-home .nav-cta { display: none; }
+.nav-cta { cursor: pointer; }
 
 * { margin: 0; padding: 0; box-sizing: border-box; }
 
@@ -298,4 +300,26 @@ header.hero p { color: var(--muted); margin-top: 16px; font-size: 1.15rem; max-w
 .grid .card:nth-child(3) { animation-delay: 0.16s; }
 .grid .card:nth-child(4) { animation-delay: 0.22s; }
 .grid .card:nth-child(5) { animation-delay: 0.28s; }
-.grid .card:nth-child(6) { animation-delay: 0.34s; }
+.grid .card:nth-child(6) { animation-delay: 0.34s; }
+
+/* Footer */
+.site-footer {
+  margin-top: 72px; border-top: 1px solid var(--border); padding: 48px 0 32px;
+}
+.footer-inner {
+  max-width: 1180px; margin: 0 auto; padding: 0 24px;
+  display: flex; flex-direction: column; align-items: center; gap: 20px; text-align: center;
+}
+.footer-brand {
+  display: flex; align-items: center; gap: 10px;
+  font-size: 1rem; font-weight: 700; color: var(--navy);
+}
+.footer-desc { color: var(--muted); font-size: 0.95rem; max-width: 520px; line-height: 1.6; }
+.footer-links { display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: center; }
+.footer-links a {
+  color: var(--muted); text-decoration: none; font-size: 0.9rem; font-weight: 500;
+  transition: color 0.2s;
+}
+.footer-links a:hover { color: var(--orange); }
+.footer-copy { color: var(--muted); font-size: 0.82rem; }
+[data-theme="dark"] .site-footer { border-top-color: var(--border); }