new calendar background added

index.html

@@ -14,6 +14,9 @@
     <video autoplay muted loop id="background-video">
       <source src="textures/Yuuka_body.mp4" type="video/mp4">
     </video>
+    <video muted loop playsinline preload="none" id="calendar-background-video" style="display:none">
+      <source src="textures/calendar_background.mp4" type="video/mp4">
+    </video>
     <div id="top-line">
       <a href="index.html" id="home-btn"></a>
       <button id="about-btn">About This Website</button>

js/tabs.js

@@ -1,12 +1,12 @@
 document.addEventListener('DOMContentLoaded', () => {
 
   const tabs = document.querySelectorAll('.tab-content');
+  const mainVideo = document.getElementById('background-video');
+  const calVideo = document.getElementById('calendar-background-video');
 
   // ── Map URL path → tab id ──────────────────────────────
   function pathToTab(path) {
-    // strip leading/trailing slashes, default to "about"
     const slug = path.replace(/^\/+|\/+$/g, '') || 'about';
-    // known slugs — everything else falls back to about
     const valid = ['about', 'gallery', 'ahmet', 'yuukabot', 'calendar'];
     return valid.includes(slug) ? slug : 'about';
   }
@@ -15,11 +15,30 @@ document.addEventListener('DOMContentLoaded', () => {
     return '/' + (tabId === 'about' ? '' : tabId);
   }
 
+  // ── Swap background videos ─────────────────────────────
+  function setBgForTab(tabId) {
+    if (!calVideo || !mainVideo) return;
+    if (tabId === 'calendar') {
+      // Switch to calendar background
+      mainVideo.style.display = 'none';
+      mainVideo.pause();
+      calVideo.style.display = 'block';
+      calVideo.play().catch(() => {}); // ignore autoplay blocks
+    } else {
+      // Switch back to main background
+      calVideo.style.display = 'none';
+      calVideo.pause();
+      mainVideo.style.display = 'block';
+      if (mainVideo.paused) mainVideo.play().catch(() => {});
+    }
+  }
+
   // ── Show a specific tab ────────────────────────────────
   function showTab(tabId) {
     tabs.forEach(t => t.style.display = 'none');
     const target = document.getElementById(tabId);
     if (target) target.style.display = 'block';
+    setBgForTab(tabId);
   }
 
   // ── Navigate to a tab (updates URL + shows it) ────────

style/styles.css

@@ -16,7 +16,8 @@ html, body {
     height: 100%;
     overflow-x: hidden;
 }
-#background-video {
+#background-video,
+#calendar-background-video {
     position: fixed;
     right: 0%;
     left: 0%;