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