fancier frontend

frontend/site.js

@@ -14,6 +14,15 @@ const loadedBundles = new Set();
 const container = document.getElementById("tab-container");
 const loadingEl = document.getElementById("loading");
 
+// Detect browser and set class on body for tab styling
+function detectBrowser() {
+    const ua = navigator.userAgent;
+    if (ua.includes("Firefox")) return "firefox";
+    if (ua.includes("Safari") && !ua.includes("Chrome")) return "safari";
+    return "chrome"; // Chrome, Edge, Opera, Brave, etc.
+}
+document.body.classList.add(`browser-${detectBrowser()}`);
+
 // How many tabs fit in one row?
 function tabsPerRow() {
     const tabWidth = 160; // avg tab width in px (min 100, max 200)
@@ -88,7 +97,7 @@ function createRow(entries, rowIndex) {
     const row = document.createElement("div");
     row.className = "tab-row";
 
-    const speed = 60 + (rng() * 40); // 60-100s per cycle
+    const speed = 90 + (rng() * 60); // 90-150s per cycle
     row.style.setProperty("--speed", `${speed}s`);
 
     // Random direction
@@ -160,11 +169,16 @@ window.addEventListener("scroll", async () => {
 
 // Inline iframe viewer
 let activeViewer = null;
+let activeTab = null;
 
 function openInlineViewer(tabEl, entry, url) {
     // Close existing viewer
     closeInlineViewer();
 
+    // Mark tab as active
+    tabEl.classList.add("tab-active");
+    activeTab = tabEl;
+
     // Find the row this tab belongs to
     const row = tabEl.closest(".tab-row");
 
@@ -220,6 +234,10 @@ function closeInlineViewer() {
         activeViewer.remove();
         activeViewer = null;
     }
+    if (activeTab) {
+        activeTab.classList.remove("tab-active");
+        activeTab = null;
+    }
 }
 
 document.addEventListener("keydown", (e) => {