feat(site): add random quotes extracted from reasoning traces

Author: S1M0N38

site/index.html

@@ -75,14 +75,8 @@
   <!-- Live Stream Section -->
   <div class="container mx-auto px-4 mt-8">
     <div class="max-w-4xl mx-auto">
-      <div class="relative w-full overflow-hidden rounded-lg shadow-lg dark:shadow-2xl dark:ring-1 dark:ring-white/5"
-        style="padding-bottom: 56.25%">
-        <iframe src="https://player.twitch.tv/?channel=S1M0N38&parent=balatrobench.com&parent=localhost"
-          title="S1M0N38 Twitch Stream" class="absolute top-0 left-0 w-full h-full" allow="fullscreen" allowfullscreen>
-        </iframe>
-      </div>
       <!-- GitHub Repositories -->
-      <div class="flex items-center justify-center gap-6 mt-6">
+      <div class="flex items-center justify-center gap-6 mb-6">
         <a href="https://github.com/coder/balatrobench" target="_blank" rel="noopener"
           class="flex items-center gap-2 text-zinc-500 hover:text-zinc-700 dark:text-zinc-400 dark:hover:text-white transition-colors">
           <svg fill="currentColor" class="w-5 h-5">
@@ -105,6 +99,19 @@
           <span class="text-sm font-medium">coder/balatrobot</span>
         </a>
       </div>
+      <div class="relative w-full overflow-hidden rounded-lg shadow-lg dark:shadow-2xl dark:ring-1 dark:ring-white/5"
+        style="padding-bottom: 56.25%">
+        <iframe src="https://player.twitch.tv/?channel=S1M0N38&parent=balatrobench.com&parent=localhost"
+          title="S1M0N38 Twitch Stream" class="absolute top-0 left-0 w-full h-full" allow="fullscreen" allowfullscreen>
+        </iframe>
+      </div>
+      <!-- Quotes Section -->
+      <div id="quote-container" class="mt-8 text-center transition-opacity duration-1000 ease-in-out min-h-12">
+        <p class="text-base leading-normal text-zinc-600 dark:text-zinc-400 max-w-2xl mx-auto">
+          <span id="quote-text" class="italic cursor-pointer"></span>
+          <span id="quote-author" class="text-zinc-500 dark:text-zinc-500 whitespace-nowrap"></span>
+        </p>
+      </div>
     </div>
   </div>
 

site/script.js

@@ -1233,8 +1233,89 @@ document.addEventListener('DOMContentLoaded', () => {
 
   // Initialize version selector for both pages
   initBenchmarkVersionSelector();
+
+  // Initialize quotes rotation (if on a page with quotes)
+  initQuotesRotation();
 });
 
+// ============================================================================
+// Quotes Rotation
+// ============================================================================
+
+const QUOTE_ROTATION_INTERVAL_MS = 10000; // 10 seconds between quotes
+
+async function initQuotesRotation() {
+  const container = document.getElementById('quote-container');
+  const textEl = document.getElementById('quote-text');
+  const authorEl = document.getElementById('quote-author');
+
+  if (!container || !textEl || !authorEl) return; // Not on a page with quotes
+
+  try {
+    const response = await fetch('assets/quotes.json');
+    if (!response.ok) return;
+    const data = await response.json();
+    const quotes = data.quotes;
+
+    if (!quotes || quotes.length === 0) return;
+
+    let currentIndex = Math.floor(Math.random() * quotes.length);
+    let isTransitioning = false;
+    let autoRotateTimer = null;
+
+    function displayQuote(index) {
+      const quote = quotes[index];
+      textEl.textContent = `"${quote.text}"`;
+      authorEl.textContent = ` — ${quote.vendor} / ${quote.model}`;
+    }
+
+    function getRandomIndex() {
+      // Pick a random index different from current
+      if (quotes.length <= 1) return 0;
+      let newIndex;
+      do {
+        newIndex = Math.floor(Math.random() * quotes.length);
+      } while (newIndex === currentIndex);
+      return newIndex;
+    }
+
+    function transitionToNext() {
+      if (isTransitioning) return;
+      isTransitioning = true;
+
+      currentIndex = getRandomIndex();
+      // Fade out container
+      container.style.opacity = '0';
+      // After fade out (1s), update and fade in
+      setTimeout(() => {
+        displayQuote(currentIndex);
+        container.style.opacity = '1';
+        isTransitioning = false;
+      }, 1000);
+    }
+
+    function resetAutoRotate() {
+      if (autoRotateTimer) clearInterval(autoRotateTimer);
+      autoRotateTimer = setInterval(transitionToNext, QUOTE_ROTATION_INTERVAL_MS);
+    }
+
+    // Display first quote immediately
+    displayQuote(currentIndex);
+
+    // Click on quote text to cycle to next quote
+    textEl.addEventListener('click', () => {
+      transitionToNext();
+      resetAutoRotate(); // Reset timer on manual click
+    });
+
+    // Start auto-rotation
+    resetAutoRotate();
+
+  } catch (e) {
+    console.error('Failed to load quotes:', e);
+  }
+}
+
 // ===== Run Viewer (modal) =====
 function formatRequestId(n) {
   return String(n).padStart(5, '0');