basic frontend

2026-05-17 23:50:12 -04:00 · 2026-05-17 23:50:12 -04:00 · 1a584c8e50
commit 1a584c8e50
parent 771f5d76ab
2 changed files with 395 additions and 0 deletions
--- a/frontend/index.html
+++ b/frontend/index.html
@ -0,0 +1,165 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Every Tab</title>
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+
+        body {
+            background: #1c1b22;
+            overflow-x: hidden;
+            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+        }
+
+        .tab-row {
+            display: flex;
+            width: max-content;
+            padding: 2px 0;
+            will-change: transform;
+        }
+
+        .tab {
+            display: inline-flex;
+            align-items: center;
+            gap: 6px;
+            padding: 6px 12px;
+            margin: 0 1px;
+            background: #2b2a33;
+            border-radius: 8px 8px 0 0;
+            cursor: pointer;
+            flex-shrink: 0;
+            max-width: 200px;
+            min-width: 100px;
+            height: 36px;
+            border: 1px solid #3a3944;
+            border-bottom: none;
+            transition: background 0.15s;
+        }
+
+        .tab:hover {
+            background: #42414d;
+        }
+
+        .tab-icon {
+            width: 16px;
+            height: 16px;
+            flex-shrink: 0;
+            image-rendering: pixelated;
+        }
+
+        .tab-title {
+            font-size: 12px;
+            color: #fbfbfe;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+        }
+
+        .tab-external {
+            position: relative;
+        }
+
+        .tab-external::after {
+            content: "↗";
+            font-size: 9px;
+            color: #8f8f9d;
+            position: absolute;
+            top: 3px;
+            right: 4px;
+        }
+
+        /* Marquee animations */
+        .tab-row.scroll-left {
+            animation: marquee-left var(--speed) linear infinite;
+        }
+
+        .tab-row.scroll-right {
+            animation: marquee-right var(--speed) linear infinite;
+        }
+
+        @keyframes marquee-left {
+            0% { transform: translateX(0); }
+            100% { transform: translateX(-50%); }
+        }
+
+        @keyframes marquee-right {
+            0% { transform: translateX(-50%); }
+            100% { transform: translateX(0); }
+        }
+
+        /* Inline iframe viewer */
+        .iframe-viewer {
+            width: 100%;
+            height: 75vh;
+            background: #1c1b22;
+            border-top: 2px solid #3a3944;
+            border-bottom: 2px solid #3a3944;
+        }
+
+        .iframe-header {
+            display: flex;
+            align-items: center;
+            gap: 8px;
+            padding: 6px 12px;
+            background: #2b2a33;
+        }
+
+        .iframe-header .tab-title {
+            flex: 1;
+            font-size: 13px;
+        }
+
+        .iframe-header a {
+            color: #8f8f9d;
+            font-size: 12px;
+            text-decoration: none;
+        }
+
+        .iframe-header a:hover {
+            color: #fbfbfe;
+        }
+
+        .iframe-close {
+            background: none;
+            border: none;
+            color: #fbfbfe;
+            font-size: 16px;
+            cursor: pointer;
+            padding: 2px 6px;
+            border-radius: 4px;
+        }
+
+        .iframe-close:hover {
+            background: #42414d;
+        }
+
+        .iframe-viewer iframe {
+            width: 100%;
+            height: calc(75vh - 36px);
+            border: none;
+            background: white;
+        }
+
+        #loading {
+            color: #8f8f9d;
+            text-align: center;
+            padding: 20px;
+            font-size: 14px;
+        }
+    </style>
+</head>
+<body>
+    <div id="tab-container"></div>
+    <div id="loading">Loading tabs...</div>
+
+
+    <script>const TOTAL_BUNDLES = 779;</script>
+    <script src="site.js"></script>
+</body>
+</html>