new bot background video

index.html

@@ -23,6 +23,9 @@
   <video muted loop playsinline preload="none" id="bucketlist-background-video" style="display:none">
     <source src="textures/cz_background.mp4" type="video/mp4">
   </video>
+  <video muted loop playsinline preload="none" id="yuukabot-background-video" style="display:none">
+    <source src="textures/bot_background.mp4" type="video/mp4">
+  </video>
   <div id="top-line">
     <button id="about-btn">About This Website</button>
     <button id="gallery-btn">Gallery</button>

js/tabs.js

@@ -4,6 +4,7 @@ document.addEventListener('DOMContentLoaded', () => {
   const mainVideo = document.getElementById('background-video');
   const calVideo = document.getElementById('calendar-background-video');
   const bucketlistVideo = document.getElementById('bucketlist-background-video');
+  const botVideo = document.getElementById('yuukabot-background-video');
 
   // ── Map URL path → tab id ──────────────────────────────
   function pathToTab(path) {
@@ -24,12 +25,13 @@ document.addEventListener('DOMContentLoaded', () => {
   // map tab id → its dedicated video element (null = use main)
   const tabVideos = {
     calendar: calVideo,
-    bucketlist: bucketlistVideo
+    bucketlist: bucketlistVideo,
+    yuukabot: botVideo
   };
 
   function setBgForTab(tabId) {
     // Hide + pause ALL videos first
-    [mainVideo, calVideo, bucketlistVideo].forEach(v => {
+    [mainVideo, calVideo, bucketlistVideo, botVideo].forEach(v => {
       if (v) { v.style.display = 'none'; v.pause(); }
     });
 

style/styles.css

@@ -18,7 +18,8 @@ html, body {
 }
 #background-video,
 #calendar-background-video,
-#bucketlist-background-video {
+#bucketlist-background-video,
+#yuukabot-background-video {
     position: fixed;
     right: 0%;
     left: 0%;