diff --git a/frontend/about.html b/frontend/about.html index 1bad327..91c21ef 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: 40px auto; + margin: 20px auto; padding: 0 20px; line-height: 1.6; color: #333; @@ -17,7 +17,6 @@ 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; } @@ -25,21 +24,16 @@ -

About EveryTab

You think you have too many tabs open?

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

-

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.

+

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.

-

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.

+

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.

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 14d0ea7..1ba45ff 100644 --- a/frontend/index.html +++ b/frontend/index.html @@ -272,6 +272,7 @@ height: 50vh; } + /* Toolbar area (address bar) */ .iframe-toolbar { display: flex; diff --git a/frontend/site.js b/frontend/site.js index 4d39cbd..9856185 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 = rng() > 0.5; - const stagger = rng(); + const goLeft = rowIndex === 0 ? true : rng() > 0.5; + const stagger = rowIndex === 0 ? 0 : rng(); // Store config — animation starts after DOM insertion (needs measured width) row._animConfig = { pxPerSec, goLeft, stagger }; @@ -221,8 +221,7 @@ async function loadMore() { iframe_ok: true, _isAbout: true, }; - const pos = Math.floor(rng() * Math.min(entries.length, tabsPerRow())); - entries.splice(pos, 0, aboutEntry); + entries.splice(0, 0, aboutEntry); } renderEntries(entries); loadingEl.style.display = "none"; @@ -232,8 +231,6 @@ 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"); } } } @@ -301,17 +298,18 @@ function openInlineViewer(tabEl, entry, url) { // Build the viewer const viewer = document.createElement("div"); viewer.className = "iframe-viewer"; + const isAbout = entry._isAbout; - // Title bar + // Title bar (hidden on desktop, shown on mobile) 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"; @@ -343,12 +341,27 @@ 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; - viewer.appendChild(titlebar); - viewer.appendChild(toolbar); + // 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(iframe); // Insert after the row @@ -356,8 +369,8 @@ function openInlineViewer(tabEl, entry, url) { activeViewer = viewer; activeRow = row; - // Scroll so the viewer is visible - viewer.scrollIntoView({ behavior: "smooth", block: "start" }); + // Scroll so the tab row + viewer are visible + row.scrollIntoView({ behavior: "smooth", block: "start" }); } function closeInlineViewer() {