basic frontend
This commit is contained in:
parent
771f5d76ab
commit
1a584c8e50
2 changed files with 395 additions and 0 deletions
165
frontend/index.html
Normal file
165
frontend/index.html
Normal file
|
|
@ -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>
|
||||||
230
frontend/site.js
Normal file
230
frontend/site.js
Normal file
|
|
@ -0,0 +1,230 @@
|
||||||
|
// Seeded PRNG (mulberry32)
|
||||||
|
function mulberry32(seed) {
|
||||||
|
return function() {
|
||||||
|
seed |= 0;
|
||||||
|
seed = seed + 0x6D2B79F5 | 0;
|
||||||
|
let t = Math.imul(seed ^ seed >>> 15, 1 | seed);
|
||||||
|
t = t + Math.imul(t ^ t >>> 7, 61 | t) ^ t;
|
||||||
|
return ((t ^ t >>> 14) >>> 0) / 4294967296;
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
const rng = mulberry32(Date.now());
|
||||||
|
const loadedBundles = new Set();
|
||||||
|
const container = document.getElementById("tab-container");
|
||||||
|
const loadingEl = document.getElementById("loading");
|
||||||
|
|
||||||
|
// How many tabs fit in one row?
|
||||||
|
function tabsPerRow() {
|
||||||
|
const tabWidth = 160; // avg tab width in px (min 100, max 200)
|
||||||
|
return Math.ceil(window.innerWidth / tabWidth) + 4; // extra for marquee overflow
|
||||||
|
}
|
||||||
|
|
||||||
|
// How many rows fill the viewport?
|
||||||
|
function rowsPerScreen() {
|
||||||
|
const rowHeight = 40;
|
||||||
|
return Math.ceil(window.innerHeight / rowHeight) + 4; // buffer
|
||||||
|
}
|
||||||
|
|
||||||
|
// Pick a random bundle index we haven't loaded yet
|
||||||
|
function pickBundle() {
|
||||||
|
if (loadedBundles.size >= TOTAL_BUNDLES) return -1;
|
||||||
|
let idx;
|
||||||
|
do {
|
||||||
|
idx = Math.floor(rng() * TOTAL_BUNDLES);
|
||||||
|
} while (loadedBundles.has(idx));
|
||||||
|
loadedBundles.add(idx);
|
||||||
|
return idx;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Fetch a bundle JSON
|
||||||
|
async function fetchBundle(idx) {
|
||||||
|
const padded = String(idx).padStart(4, "0");
|
||||||
|
const resp = await fetch(`tabs/${padded}.json`);
|
||||||
|
if (!resp.ok) throw new Error(`Failed to fetch bundle ${padded}`);
|
||||||
|
const data = await resp.json();
|
||||||
|
return data.entries;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Create a tab DOM element
|
||||||
|
function createTab(entry) {
|
||||||
|
const tab = document.createElement("div");
|
||||||
|
tab.className = "tab";
|
||||||
|
if (!entry.iframe_ok) {
|
||||||
|
tab.classList.add("tab-external");
|
||||||
|
}
|
||||||
|
|
||||||
|
if (entry.icon) {
|
||||||
|
const img = document.createElement("img");
|
||||||
|
img.className = "tab-icon";
|
||||||
|
img.src = `data:image/png;base64,${entry.icon}`;
|
||||||
|
img.alt = "";
|
||||||
|
img.loading = "lazy";
|
||||||
|
tab.appendChild(img);
|
||||||
|
}
|
||||||
|
|
||||||
|
const title = document.createElement("span");
|
||||||
|
title.className = "tab-title";
|
||||||
|
title.textContent = entry.title || entry.host;
|
||||||
|
tab.appendChild(title);
|
||||||
|
|
||||||
|
tab.title = entry.title || entry.host;
|
||||||
|
|
||||||
|
// Click handler
|
||||||
|
tab.addEventListener("click", () => {
|
||||||
|
const url = `${entry.protocol || "https"}://${entry.host}`;
|
||||||
|
if (entry.iframe_ok) {
|
||||||
|
openInlineViewer(tab, entry, url);
|
||||||
|
} else {
|
||||||
|
window.open(url, "_blank", "noopener");
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
return tab;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Create a row of tabs with marquee animation
|
||||||
|
function createRow(entries, rowIndex) {
|
||||||
|
const row = document.createElement("div");
|
||||||
|
row.className = "tab-row";
|
||||||
|
|
||||||
|
const speed = 60 + (rng() * 40); // 60-100s per cycle
|
||||||
|
row.style.setProperty("--speed", `${speed}s`);
|
||||||
|
|
||||||
|
// Random direction
|
||||||
|
const goLeft = rng() > 0.5;
|
||||||
|
row.classList.add(goLeft ? "scroll-left" : "scroll-right");
|
||||||
|
|
||||||
|
// Stagger start so rows aren't synchronized
|
||||||
|
row.style.animationDelay = `${-rng() * speed}s`;
|
||||||
|
|
||||||
|
// Add tabs twice so the marquee loops seamlessly (translate -50% = one full set)
|
||||||
|
for (let copy = 0; copy < 2; copy++) {
|
||||||
|
for (const entry of entries) {
|
||||||
|
row.appendChild(createTab(entry));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return row;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Render entries into rows
|
||||||
|
function renderEntries(entries) {
|
||||||
|
const perRow = tabsPerRow();
|
||||||
|
let rowIndex = container.children.length;
|
||||||
|
|
||||||
|
for (let i = 0; i < entries.length; i += perRow) {
|
||||||
|
const rowEntries = entries.slice(i, i + perRow);
|
||||||
|
if (rowEntries.length < 3) continue; // skip tiny last rows
|
||||||
|
container.appendChild(createRow(rowEntries, rowIndex));
|
||||||
|
rowIndex++;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Load enough bundles to fill the screen
|
||||||
|
async function loadMore() {
|
||||||
|
const neededRows = rowsPerScreen();
|
||||||
|
const entriesNeeded = neededRows * tabsPerRow();
|
||||||
|
|
||||||
|
let entries = [];
|
||||||
|
while (entries.length < entriesNeeded) {
|
||||||
|
const idx = pickBundle();
|
||||||
|
if (idx === -1) break;
|
||||||
|
try {
|
||||||
|
const bundleEntries = await fetchBundle(idx);
|
||||||
|
entries = entries.concat(bundleEntries);
|
||||||
|
} catch (e) {
|
||||||
|
console.error("Failed to load bundle:", e);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (entries.length > 0) {
|
||||||
|
renderEntries(entries);
|
||||||
|
loadingEl.style.display = "none";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Infinite scroll
|
||||||
|
let loading = false;
|
||||||
|
window.addEventListener("scroll", async () => {
|
||||||
|
if (loading) return;
|
||||||
|
const scrollBottom = window.innerHeight + window.scrollY;
|
||||||
|
const docHeight = document.documentElement.scrollHeight;
|
||||||
|
|
||||||
|
if (scrollBottom >= docHeight - 500) {
|
||||||
|
loading = true;
|
||||||
|
await loadMore();
|
||||||
|
loading = false;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// Inline iframe viewer
|
||||||
|
let activeViewer = null;
|
||||||
|
|
||||||
|
function openInlineViewer(tabEl, entry, url) {
|
||||||
|
// Close existing viewer
|
||||||
|
closeInlineViewer();
|
||||||
|
|
||||||
|
// Find the row this tab belongs to
|
||||||
|
const row = tabEl.closest(".tab-row");
|
||||||
|
|
||||||
|
// Build the viewer
|
||||||
|
const viewer = document.createElement("div");
|
||||||
|
viewer.className = "iframe-viewer";
|
||||||
|
|
||||||
|
const header = document.createElement("div");
|
||||||
|
header.className = "iframe-header";
|
||||||
|
|
||||||
|
if (entry.icon) {
|
||||||
|
const icon = document.createElement("img");
|
||||||
|
icon.className = "tab-icon";
|
||||||
|
icon.src = `data:image/png;base64,${entry.icon}`;
|
||||||
|
header.appendChild(icon);
|
||||||
|
}
|
||||||
|
|
||||||
|
const title = document.createElement("span");
|
||||||
|
title.className = "tab-title";
|
||||||
|
title.textContent = entry.title || entry.host;
|
||||||
|
header.appendChild(title);
|
||||||
|
|
||||||
|
const link = document.createElement("a");
|
||||||
|
link.href = url;
|
||||||
|
link.target = "_blank";
|
||||||
|
link.rel = "noopener";
|
||||||
|
link.textContent = entry.host + " ↗";
|
||||||
|
header.appendChild(link);
|
||||||
|
|
||||||
|
const close = document.createElement("button");
|
||||||
|
close.className = "iframe-close";
|
||||||
|
close.textContent = "✕";
|
||||||
|
close.addEventListener("click", closeInlineViewer);
|
||||||
|
header.appendChild(close);
|
||||||
|
|
||||||
|
const iframe = document.createElement("iframe");
|
||||||
|
iframe.sandbox = "allow-scripts allow-same-origin allow-forms";
|
||||||
|
iframe.src = url;
|
||||||
|
|
||||||
|
viewer.appendChild(header);
|
||||||
|
viewer.appendChild(iframe);
|
||||||
|
|
||||||
|
// Insert after the row
|
||||||
|
row.after(viewer);
|
||||||
|
activeViewer = viewer;
|
||||||
|
|
||||||
|
// Scroll so the viewer is visible
|
||||||
|
viewer.scrollIntoView({ behavior: "smooth", block: "start" });
|
||||||
|
}
|
||||||
|
|
||||||
|
function closeInlineViewer() {
|
||||||
|
if (activeViewer) {
|
||||||
|
activeViewer.remove();
|
||||||
|
activeViewer = null;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
document.addEventListener("keydown", (e) => {
|
||||||
|
if (e.key === "Escape") closeInlineViewer();
|
||||||
|
});
|
||||||
|
|
||||||
|
// Initial load
|
||||||
|
loadMore();
|
||||||
Loading…
Add table
Add a link
Reference in a new issue