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

added about.html

Browse source
This commit is contained in:
Joe Lothan 2026-05-19 11:42:09 -04:00
parent 1d5b7bd374
commit 3534f84b27
3 changed files with 77 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

43
frontend/about.html Normal file
View file

@ -0,0 +1,43 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>About Every Tab</title>
<style>
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
max-width: 600px;
margin: 40px auto;
padding: 0 20px;
line-height: 1.6;
color: #333;
}
@media (prefers-color-scheme: dark) {
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; }
}
</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>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>Click on a tab to visit the site and scroll down for more.</p>
<p>Note that some sites do not allow embedding and will open a new tab instead. Also note that just like the Web itself, some sites are broken, not suitable for work, trying to harvest your data, or an affront to humanity itself.</>
<p>EveryTab just shows a random slice of the Web, in all of it's messy and beautiful glory. 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>

32
frontend/site.js
View file

@ -63,7 +63,14 @@ function createTab(entry) {
tab.classList.add("tab-external");
}
if (entry.icon) {
if (entry._isAbout) {
// About tab gets a rotating icon like the site favicon
const img = document.createElement("img");
img.className = "tab-icon";
img.alt = "";
aboutIcons.push(img);
tab.appendChild(img);
} else if (entry.icon) {
const img = document.createElement("img");
img.className = "tab-icon";
img.src = `data:image/png;base64,${entry.icon}`;
@ -82,6 +89,10 @@ function createTab(entry) {
// Click handler
tab.addEventListener("click", () => {
if (entry._isAbout) {
openInlineViewer(tab, entry, "/about.html");
return;
}
const url = `${entry.protocol || "https"}://${entry.host}`;
if (entry.iframe_ok) {
openInlineViewer(tab, entry, url);
@ -149,6 +160,18 @@ async function loadMore() {
}
if (entries.length > 0) {
// Inject the "About Every Tab" tab at a random position in the first load
if (container.children.length === 0) {
const aboutEntry = {
host: "everytab.site/about.html",
title: "About Every Tab",
icon: "",
iframe_ok: true,
_isAbout: true,
};
const pos = Math.floor(rng() * Math.min(entries.length, tabsPerRow() * 3));
entries.splice(pos, 0, aboutEntry);
}
renderEntries(entries);
loadingEl.style.display = "none";
}
@ -161,11 +184,16 @@ faviconLink.type = "image/png";
document.head.appendChild(faviconLink);
const loadedIcons = [];
const aboutIcons = []; // img elements for "About" tabs — rotate their icons too
setInterval(() => {
if (loadedIcons.length === 0) return;
const icon = loadedIcons[Math.floor(Math.random() * loadedIcons.length)];
faviconLink.href = `data:image/png;base64,${icon}`;
const dataUri = `data:image/png;base64,${icon}`;
faviconLink.href = dataUri;
for (const img of aboutIcons) {
img.src = dataUri;
}
}, 1000);
// Infinite scroll