diff --git a/frontend/about.html b/frontend/about.html index 91c21ef..1bad327 100644 --- a/frontend/about.html +++ b/frontend/about.html @@ -8,7 +8,7 @@ body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; max-width: 600px; - margin: 20px auto; + margin: 40px auto; padding: 0 20px; line-height: 1.6; color: #333; @@ -17,6 +17,7 @@ body { background: #1c1b22; color: #fbfbfe; } a { color: #8cb4ff; } } + h1 { margin-bottom: 4px; } .subtitle { color: #666; margin-bottom: 24px; } @media (prefers-color-scheme: dark) { .subtitle { color: #8f8f9d; } @@ -24,16 +25,21 @@ +

About EveryTab

You think you have too many tabs open?

Welcome to EveryTab, a collection of every site on the web.

-

Click on a tab to visit the site. Scroll down for more tabs. Some sites (marked with an ↗) do not allow embedding. Clicking them will open a new tab in your browser.

+

The data comes from Common Crawl, a free, open archive of the web. Every month, we process the latest crawl, extract website titles, download the favicons, and bundle it up into the site you see here.

-

The web data come from Common Crawl, a free, open archive of the web. Every month, we process the latest crawl, extract website titles, download the favicons, and bundle it up into the site you see here.

+

Click on a tab to visit the site and scroll down for more tabs. Some sites do not allow embedding so clicking them will open a new tab (in your browser) instead.

Note that, like the web itself, some sites are broken, profane, fake news, pornographic, trying to harvest your data, serving malware, or an affront to humanity itself. But some of them are pretty cool too.

-

EveryTab just shows a random slice of the web, in all its messy and beautiful glory. Enjoy!

+

EveryTab just shows a random slice of the web, in all its messy and beautiful glory.

+ +

Enjoy!

+ + diff --git a/frontend/index.html b/frontend/index.html index 1ba45ff..d78851a 100644 --- a/frontend/index.html +++ b/frontend/index.html @@ -33,12 +33,9 @@ } } - html, body { - overflow-x: hidden; - } - body { background: var(--bg); + overflow-x: hidden; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; } @@ -272,7 +269,6 @@ height: 50vh; } - /* Toolbar area (address bar) */ .iframe-toolbar { display: flex; diff --git a/frontend/site.js b/frontend/site.js index 9856185..4d39cbd 100644 --- a/frontend/site.js +++ b/frontend/site.js @@ -124,8 +124,8 @@ function createRow(entries, rowIndex) { row.className = "tab-row"; const pxPerSec = 15 + (rng() * 10); // 15-25 px/sec, consistent across screen sizes - const goLeft = rowIndex === 0 ? true : rng() > 0.5; - const stagger = rowIndex === 0 ? 0 : rng(); + const goLeft = rng() > 0.5; + const stagger = rng(); // Store config — animation starts after DOM insertion (needs measured width) row._animConfig = { pxPerSec, goLeft, stagger }; @@ -221,7 +221,8 @@ async function loadMore() { iframe_ok: true, _isAbout: true, }; - entries.splice(0, 0, aboutEntry); + const pos = Math.floor(rng() * Math.min(entries.length, tabsPerRow())); + entries.splice(pos, 0, aboutEntry); } renderEntries(entries); loadingEl.style.display = "none"; @@ -231,6 +232,8 @@ async function loadMore() { const aboutTab = container.querySelector(".tab-about"); if (aboutTab) { aboutTab.click(); + // Use smaller viewer for initial about page + if (activeViewer) activeViewer.classList.add("iframe-viewer-small"); } } } @@ -298,18 +301,17 @@ function openInlineViewer(tabEl, entry, url) { // Build the viewer const viewer = document.createElement("div"); viewer.className = "iframe-viewer"; - const isAbout = entry._isAbout; - // Title bar (hidden on desktop, shown on mobile) + // Title bar const titlebar = document.createElement("div"); titlebar.className = "iframe-titlebar"; titlebar.textContent = entry.title || entry.url; - viewer.appendChild(titlebar); // Toolbar (address bar area) const toolbar = document.createElement("div"); toolbar.className = "iframe-toolbar"; + // URL bar pill const urlbar = document.createElement("div"); urlbar.className = "iframe-urlbar"; @@ -341,27 +343,12 @@ function openInlineViewer(tabEl, entry, url) { close.addEventListener("click", closeInlineViewer); toolbar.appendChild(close); - viewer.appendChild(toolbar); - const iframe = document.createElement("iframe"); iframe.sandbox = "allow-scripts allow-same-origin allow-forms"; iframe.src = url; - // About page: auto-size iframe to content height (same-origin) - if (isAbout) { - iframe.addEventListener("load", () => { - try { - const body = iframe.contentDocument.body; - const lastEl = body.lastElementChild; - const contentHeight = lastEl.offsetTop + lastEl.offsetHeight + - parseInt(getComputedStyle(body).marginTop) + - parseInt(getComputedStyle(body).marginBottom); - const chromeHeight = viewer.offsetHeight - iframe.clientHeight; - viewer.style.height = (contentHeight + chromeHeight) + "px"; - } catch (e) {} - }); - } - + viewer.appendChild(titlebar); + viewer.appendChild(toolbar); viewer.appendChild(iframe); // Insert after the row @@ -369,8 +356,8 @@ function openInlineViewer(tabEl, entry, url) { activeViewer = viewer; activeRow = row; - // Scroll so the tab row + viewer are visible - row.scrollIntoView({ behavior: "smooth", block: "start" }); + // Scroll so the viewer is visible + viewer.scrollIntoView({ behavior: "smooth", block: "start" }); } function closeInlineViewer() {