cz scores tab open

generate_thumbnails.py

@@ -46,4 +46,3 @@ def create_thumbnails(base_folder):
 
 if __name__ == "__main__":
     create_thumbnails("gallery")
-    create_thumbnails("ahmet")

index.html

@@ -19,11 +19,14 @@
   <video muted loop playsinline preload="none" id="calendar-background-video" style="display:none">
     <source src="textures/calendar_background.mp4" type="video/mp4">
   </video>
+  <video muted loop playsinline preload="none" id="czscores-background-video" style="display:none">
+    <source src="textures/cz_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>
     <button id="gallery-btn">Gallery</button>
-    <button id="ahmet-btn">Ahmet Museum</button>
+    <button id="czscores-btn">Cz Scores</button>
     <button id="yuukabot-btn">Bot Status</button>
     <button id="calendar-btn">Calendar</button>
   </div>
@@ -113,8 +116,8 @@
     <div id="gallery-container" class="gallery-grid"></div>
   </section>
 
-  <section id="ahmet" class="tab-content">
+<section id="czscores" class="tab-content">
-    <div id="ahmet-container">
+      <div id="czscores-container">
     </div>
   </section>
 

js/gallery.js

@@ -66,7 +66,4 @@ document.addEventListener('DOMContentLoaded', () => {
 
   // Load your original Gallery
   loadGallery('gallery-container', 'gallery', 50);
-
-  // Load your new Ahmet Museum (adjust the number 20 to however many photos you have)
-  loadGallery('ahmet-container', 'ahmet', 20);
 });

js/tabs.js

@@ -3,11 +3,14 @@ document.addEventListener('DOMContentLoaded', () => {
   const tabs = document.querySelectorAll('.tab-content');
   const mainVideo = document.getElementById('background-video');
   const calVideo = document.getElementById('calendar-background-video');
+  const czVideo = document.getElementById('czscores-background-video');
 
   // ── Map URL path → tab id ──────────────────────────────
   function pathToTab(path) {
     const slug = path.replace(/^\/+|\/+$/g, '') || 'about';
-    const valid = ['about', 'gallery', 'ahmet', 'yuukabot', 'calendar'];
+    const valid = ['about', 'gallery', 'czscores', 'yuukabot', 'calendar'];
+    // backward compat: old /ahmet links
+    if (slug === 'ahmet') return 'czscores';
     return valid.includes(slug) ? slug : 'about';
   }
 
@@ -18,17 +21,32 @@ document.addEventListener('DOMContentLoaded', () => {
   // ── Swap background videos + top-bar theme ────────────
   const topLine = document.getElementById('top-line');
 
+  // map tab id → its dedicated video element (null = use main)
+  const tabVideos = {
+    calendar: calVideo,
+    czscores: czVideo
+  };
+
   function setBgForTab(tabId) {
-    if (tabId === 'calendar') {
+    // Hide + pause ALL videos first
-      // Switch to calendar background
+    [mainVideo, calVideo, czVideo].forEach(v => {
-      if (mainVideo) { mainVideo.style.display = 'none'; mainVideo.pause(); }
+      if (v) { v.style.display = 'none'; v.pause(); }
-      if (calVideo) { calVideo.style.display = 'block'; calVideo.play().catch(() => {}); }
+    });
-      if (topLine) topLine.classList.add('cal-theme');
+
-    } else {
+    // Show the right one
-      // Switch back to main background
+    const target = tabVideos[tabId];
-      if (calVideo) { calVideo.style.display = 'none'; calVideo.pause(); }
+    if (target) {
-      if (mainVideo) { mainVideo.style.display = 'block'; if (mainVideo.paused) mainVideo.play().catch(() => {}); }
+      target.style.display = 'block';
-      if (topLine) topLine.classList.remove('cal-theme');
+      target.play().catch(() => {});
+    } else if (mainVideo) {
+      mainVideo.style.display = 'block';
+      if (mainVideo.paused) mainVideo.play().catch(() => {});
+    }
+
+    // Top-bar theme toggle
+    if (topLine) {
+      topLine.classList.toggle('cal-theme', tabId === 'calendar');
+      topLine.classList.toggle('czscores-theme', tabId === 'czscores');
     }
   }
 

style/ahmet.css

@@ -1,4 +1,6 @@
-#ahmet-btn {
+/* Cz Scores tab */
+
+#czscores-btn {
     background-color: aliceblue;
     color: #153dee;
     border: none;
@@ -8,17 +10,3 @@
     transition: box-shadow 0.3s ease;
 }
 ␍
-#ahmet-container {
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
-    gap: 10px;
-    padding: 120px 70px 70px 70px;
-}
-
-#ahmet-container img {
-    width: 100%;
-    max-width: 250px;
-    height: auto;
-    border-radius: 8px;
-    object-fit: cover;
-}

style/styles.css

@@ -17,7 +17,8 @@ html, body {
     overflow-x: hidden;
 }
 #background-video,
-#calendar-background-video {
+#calendar-background-video,
+#czscores-background-video {
     position: fixed;
     right: 0%;
     left: 0%;
@@ -75,6 +76,15 @@ html, body {
     transition: border-color 0.4s ease, color 0.4s ease;
 }
 
+/* ── Cz Scores-themed top bar buttons ─────────────────── */
+#top-line.czscores-theme button {
+    border-bottom-color: #B5B1C6;
+    border-left-color: #B5B1C6;
+    border-right-color: #B5B1C6;
+    color: #B84457;
+    transition: border-color 0.4s ease, color 0.4s ease;
+}
+
 title {
     font-size: large;
     font-weight: 100;