joe/everytab
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Compare commits

base: joe:a60597157d04c36b378b769a9b76f31fe39fb0c1
Branches Tags
joe:main
..
compare: joe:b5787fae94fb289061636012ce7a756884b2fa06
Branches Tags
joe:main

No commits in common. "a60597157d04c36b378b769a9b76f31fe39fb0c1" and "b5787fae94fb289061636012ce7a756884b2fa06" have entirely different histories.
a60597157d ... b5787fae94

3 changed files with 23 additions and 34 deletions
Download patch file Download diff file Expand all files Collapse all files

14
frontend/about.html
View file

@ -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 @@
</style>
</head>
<body>
<h1>About EveryTab</h1>
<p class="subtitle">You think <i>you</i> have too many tabs open?</p>
<p>Welcome to EveryTab, a collection of every site on the web.</p>
<p>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.</p>
<p>The data comes from <a href="https://commoncrawl.org">Common Crawl</a>, 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.</p>
<p>The web data come from <a href="https://commoncrawl.org">Common Crawl</a>, 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.</p>
<p>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.</p>
<p>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.</p>
<p>EveryTab just shows a random slice of the web, in all its messy and beautiful glory. Enjoy!</p>
<p>EveryTab just shows a random slice of the web, in all its messy and beautiful glory.</p>
<p>Enjoy!</p>
<!-- <p>For more information about the inspiration and design of this website, visit <a href="future blog post link</a>.</p> -->
</body>
</html>

6
frontend/index.html
View file

@ -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;

37
frontend/site.js
View file

@ -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() {