878b728ef8
#d6ff3d on a #ffffff / #f6f8fb background sits at ~1.3:1 contrast — the
acid green went almost invisible any time the user flipped Settings >
Theme to light. Override --acid to #4d7300 in every chrome page's
prefers-color-scheme: light block. Same hue family, ~5.5:1 contrast
on white, still reads as the same brand color.
Also: chrome.html was missing --acid: #d6ff3d in :root entirely (every
site used var(--acid, #d6ff3d) fallbacks). Adding the real declaration
means the light override can actually take effect.
Files touched: chrome.html, home.html, settings.html, error.html,
approval.html, messages.html. downloads.html is a dark-only overlay
(hardcoded), collision.html already had a proper light-mode --bcdn.
Tint fills (rgba(214,255,61,X) at low alpha) stay as-is — the specific
hue barely matters through 8% opacity.
Verified live via CDP: getComputedStyle(--acid) returned #d6ff3d in
dark, #4d7300 after cfg.set('theme','light').
275 lines
15 KiB
HTML
275 lines
15 KiB
HTML
<!doctype html>
|
|
<html>
|
|
<head><meta charset="utf-8"><title>Theseus</title>
|
|
<style>
|
|
:root { color-scheme: light dark;
|
|
--bg1: #16202e; --bg2: #0b0e14;
|
|
--card: #141a24; --card-hi: #18202c; --line: #ffffff12; --line2: #ffffff22;
|
|
--ink: #e7eaf1; --mut: #8b98a9; --dim: #5e6678;
|
|
--acid: #d6ff3d; --blue: #4b7bec; --sia: #b39ddb; --srv: #4fd1a5; }
|
|
* { box-sizing: border-box; }
|
|
body { margin: 0; min-height: 100vh; font-family: system-ui, sans-serif;
|
|
background: radial-gradient(1200px 600px at 50% -10%, var(--bg1), var(--bg2));
|
|
color: var(--ink); display: flex; flex-direction: column; align-items: center; }
|
|
.hero { text-align: center; margin-top: 8vh; padding: 0 1rem; width: 100%; }
|
|
.mark { font-size: 64px; line-height: 1; }
|
|
h1 { font-size: 2.4rem; margin: .4rem 0 .2rem; letter-spacing: .5px; }
|
|
h1 .g { color: var(--acid); }
|
|
.tag { color: var(--mut); margin: 0 0 1.6rem; }
|
|
form { display: flex; gap: 8px; justify-content: center; max-width: 620px; margin: 0 auto; padding: 0 1rem; }
|
|
form input { flex: 1; padding: 13px 18px; border-radius: 999px; border: 1px solid var(--line2);
|
|
background: var(--card); color: var(--ink); font-size: 15px; outline: none; }
|
|
form input:focus { border-color: var(--blue); }
|
|
form button { padding: 13px 20px; border-radius: 999px; border: none; background: var(--blue); color: #fff; font-size: 15px; cursor: pointer; }
|
|
.hint { color: var(--dim); font-size: 12.5px; margin-top: .8rem; }
|
|
|
|
/* Cards — larger, responsive. Grid autoscales to viewport width:
|
|
wide screens fit 4-5 across, narrow screens collapse to 2, mobile to 1. */
|
|
.cards-wrap { max-width: 1200px; width: 100%; margin: 3rem auto 4rem; padding: 0 1.2rem; }
|
|
.cards-hdr { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; padding: 0 4px; }
|
|
.cards-hdr .title { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--dim); }
|
|
.cards-hdr .tools button { background: transparent; border: 1px solid var(--line2); color: var(--mut);
|
|
border-radius: 8px; padding: 6px 12px; font-size: 12.5px; cursor: pointer; margin-left: 6px; }
|
|
.cards-hdr .tools button:hover { background: var(--card-hi); color: var(--ink); }
|
|
.cards-hdr .tools button.on { border-color: var(--acid); color: var(--acid); background: rgba(214,255,61,.08); }
|
|
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
|
|
@media (min-width: 900px) { .grid { gap: 18px; } }
|
|
@media (min-width: 1200px) { .grid { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; } }
|
|
@media (max-width: 600px) { .grid { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; } .cards-wrap { padding: 0 .8rem; } }
|
|
.card { display: block; text-decoration: none; color: inherit; background: var(--card); border: 1px solid var(--line);
|
|
border-radius: 14px; padding: 20px 20px 18px; transition: transform .15s, background .15s, border-color .15s;
|
|
position: relative; cursor: pointer; }
|
|
.card:hover { border-color: rgba(75,123,236,.4); background: var(--card-hi); transform: translateY(-2px); }
|
|
.card .n { font-weight: 600; color: var(--ink); font-size: 15.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
/* TLD suffix (.x, .bch, ...) rendered in the Silent Mode acid so the brand
|
|
accent reads instantly across the grid. Subtle glow reinforces it. */
|
|
.card .n .tld { color: var(--acid); font-weight: 700; letter-spacing: .3px;
|
|
text-shadow: 0 0 8px rgba(214,255,61,.35); }
|
|
.card .d { color: var(--mut); font-size: 13px; margin-top: 6px; line-height: 1.4; overflow: hidden;
|
|
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
|
|
.card:hover .d { color: var(--ink); }
|
|
.card .row { display: flex; align-items: center; justify-content: space-between; margin-top: 12px; gap: 8px; }
|
|
.badge { display: inline-block; font-size: 10.5px; padding: 2px 9px; border-radius: 999px; letter-spacing: .02em; }
|
|
/* Provenance-typed badges (which chain/storage backed the site). */
|
|
.b-on-chain { background: rgba(214,255,61,.14); color: var(--acid); }
|
|
.b-sia { background: rgba(179,157,219,.14); color: var(--sia); }
|
|
.b-server { background: rgba(79,209,165,.14); color: var(--srv); }
|
|
/* Product-role badges — same acid family with per-role hue shifts.
|
|
Kept muted so the badge is legible but doesn't compete with the title. */
|
|
.b-infrastructure { background: rgba(214,255,61,.10); color: var(--acid); }
|
|
.b-navigator { background: rgba(75,123,236,.14); color: #7ea3ff; }
|
|
.b-registrar { background: rgba(214,255,61,.10); color: var(--acid); }
|
|
.b-code-host { background: rgba(179,157,219,.14); color: var(--sia); }
|
|
.b-app-store { background: rgba(79,209,165,.14); color: var(--srv); }
|
|
.b-search { background: rgba(255,199,95,.14); color: #ffc75f; }
|
|
.b-messaging { background: rgba(246,118,138,.14); color: #f6768a; }
|
|
.b-default { background: rgba(139,152,169,.14); color: var(--mut); }
|
|
|
|
/* Edit affordances — hidden until Edit mode toggled */
|
|
.card .edit-actions { position: absolute; top: 8px; right: 8px; display: none; gap: 4px; }
|
|
.card .edit-actions button { border: 1px solid var(--line2); background: rgba(0,0,0,.35); color: var(--mut);
|
|
width: 26px; height: 26px; border-radius: 6px; cursor: pointer; font-size: 13px; padding: 0; }
|
|
.card .edit-actions button:hover { color: var(--ink); background: rgba(0,0,0,.55); }
|
|
.card .edit-actions button.rm:hover { color: #f6768a; border-color: rgba(246,118,138,.5); }
|
|
body.editing .card .edit-actions { display: flex; }
|
|
body.editing .card { cursor: default; }
|
|
body.editing .card:hover { transform: none; }
|
|
.add-card { display: none; align-items: center; justify-content: center;
|
|
background: transparent; border: 2px dashed var(--line2); border-radius: 14px;
|
|
color: var(--mut); font-size: 14px; cursor: pointer; padding: 20px; min-height: 100px; }
|
|
.add-card:hover { border-color: var(--acid); color: var(--acid); background: rgba(214,255,61,.04); }
|
|
body.editing .add-card { display: flex; }
|
|
|
|
/* Modal for add/edit */
|
|
.modal-bg { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.55); z-index: 100;
|
|
align-items: center; justify-content: center; padding: 1rem; }
|
|
.modal-bg.on { display: flex; }
|
|
.modal { background: var(--card); border: 1px solid var(--line2); border-radius: 12px;
|
|
padding: 22px; width: 100%; max-width: 460px; box-shadow: 0 20px 60px #000c; }
|
|
.modal h2 { margin: 0 0 14px; font-size: 17px; color: var(--ink); }
|
|
.modal label { display: block; font-size: 12.5px; color: var(--mut); margin: 10px 0 4px; letter-spacing: .04em; text-transform: uppercase; }
|
|
.modal input, .modal select { width: 100%; padding: 9px 12px; border-radius: 8px; border: 1px solid var(--line2);
|
|
background: var(--bg2); color: var(--ink); font-size: 13.5px; outline: none; font-family: inherit; }
|
|
.modal input:focus, .modal select:focus { border-color: var(--blue); }
|
|
.modal .btns { display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px; }
|
|
.modal button { border-radius: 8px; padding: 8px 16px; font-size: 13.5px; cursor: pointer; border: 1px solid var(--line2);
|
|
background: transparent; color: var(--mut); }
|
|
.modal button:hover { background: var(--card-hi); color: var(--ink); }
|
|
.modal button.primary { background: var(--blue); color: #fff; border-color: var(--blue); }
|
|
.modal button.primary:hover { background: #5a89f5; }
|
|
|
|
footer { color: #47505f; font-size: 12px; padding-bottom: 2rem; text-align: center; }
|
|
footer b { color: #6b7688; }
|
|
|
|
/* Light theme */
|
|
@media (prefers-color-scheme: light) {
|
|
:root { --bg1: #dce6f2; --bg2: #eef0f4;
|
|
--card: #ffffff; --card-hi: #f4f7fb; --line: rgba(0,0,0,.10); --line2: rgba(0,0,0,.14);
|
|
--ink: #1a1f28; --mut: #4a5262; --dim: #8a93a2;
|
|
/* Darker acid for light backgrounds — ~5.5:1 on white. */
|
|
--acid: #4d7300; }
|
|
h1 .g { color: var(--acid); }
|
|
.modal { background: #ffffff; }
|
|
}
|
|
</style></head>
|
|
<body>
|
|
<div class="hero">
|
|
<div class="mark">⛓️</div>
|
|
<h1>Theseus <span class="g">Navigator</span></h1>
|
|
<p class="tag">A browser that follows the thread. Names that live on the Bitcoin Cash chain.</p>
|
|
<form id="searchForm">
|
|
<input id="q" name="q" placeholder="Search the web (DuckDuckGo)" autofocus spellcheck="false">
|
|
<button type="submit">Search</button>
|
|
</form>
|
|
<p class="hint">Tip: type a <b>.bch</b> name in the address bar above to open a decentralized site.</p>
|
|
</div>
|
|
|
|
<div class="cards-wrap">
|
|
<div class="cards-hdr">
|
|
<span class="title">Quick links</span>
|
|
<div class="tools">
|
|
<button id="editBtn" type="button">Edit</button>
|
|
<button id="resetBtn" type="button" title="Restore the default set of cards" style="display:none">Reset to defaults</button>
|
|
</div>
|
|
</div>
|
|
<div class="grid" id="grid"></div>
|
|
</div>
|
|
|
|
<div class="modal-bg" id="modal">
|
|
<div class="modal">
|
|
<h2 id="modalTitle">Add card</h2>
|
|
<label>Title</label><input id="mTitle" placeholder="e.g. hello.bch">
|
|
<label>URL</label><input id="mUrl" placeholder="https://example.com/">
|
|
<label>Subtitle (optional)</label><input id="mSub" placeholder="one-line description">
|
|
<label>Badge</label>
|
|
<select id="mBadge">
|
|
<option value="">— none —</option>
|
|
<option value="on-chain">on-chain</option>
|
|
<option value="Sia">Sia</option>
|
|
<option value="server">server</option>
|
|
<option value="default">(custom)</option>
|
|
</select>
|
|
<div class="btns"><button id="mCancel" type="button">Cancel</button><button id="mSave" class="primary" type="button">Save</button></div>
|
|
</div>
|
|
</div>
|
|
|
|
<footer>Names resolved from the <b>Bitcoin Cash</b> blockchain — no registrar, no DNS.<br>Theseus, by Silent Mode — a Deviant project.</footer>
|
|
|
|
<script>
|
|
const $ = (id) => document.getElementById(id);
|
|
const esc = (s) => String(s || "").replace(/</g, "<");
|
|
let cards = []; let editIdx = -1;
|
|
// Search form: submit → navigate the tab via IPC (main.js applies the
|
|
// user's default search engine + regional hints).
|
|
$("searchForm").addEventListener("submit", (e) => {
|
|
e.preventDefault();
|
|
const q = $("q").value.trim(); if (!q) return;
|
|
if (window.home && window.home.navigate) window.home.navigate(q);
|
|
else window.location.href = "https://duckduckgo.com/?q=" + encodeURIComponent(q);
|
|
});
|
|
function badgeClass(b) {
|
|
// Normalize badge label into a CSS class (spaces + case → dashes / lower).
|
|
if (!b) return "b-default";
|
|
return "b-" + String(b).toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-|-$/g, "");
|
|
}
|
|
// Split a domain-style title so ".X" (or ".bch") can render in the acid brand
|
|
// color while the rest stays ink. Preserves capitals in the base label.
|
|
function styledTitle(t) {
|
|
const m = String(t).match(/^(.+?)(\.[A-Za-z]{1,10})$/);
|
|
if (!m) return esc(t);
|
|
return esc(m[1]) + '<span class="tld">' + esc(m[2]) + '</span>';
|
|
}
|
|
function render() {
|
|
const g = $("grid");
|
|
g.innerHTML = cards.map((c, i) => {
|
|
const badge = c.badge ? `<span class="badge ${badgeClass(c.badge)}">${esc(c.badge)}</span>` : "";
|
|
return `<div class="card" data-i="${i}">
|
|
<div class="edit-actions">
|
|
<button class="ed" title="Edit">✎</button>
|
|
<button class="rm" title="Remove">✕</button>
|
|
</div>
|
|
<div class="n">${styledTitle(c.title)}</div>
|
|
<div class="d">${esc(c.sub || c.url)}</div>
|
|
<div class="row">${badge}</div>
|
|
</div>`;
|
|
}).join("") + `<div class="add-card" id="addBtn">+ Add card</div>`;
|
|
// Wire clicks: normal-mode = navigate, edit-mode = per-action buttons.
|
|
g.querySelectorAll(".card").forEach((el) => {
|
|
const i = Number(el.dataset.i);
|
|
el.onclick = (e) => {
|
|
if (document.body.classList.contains("editing")) {
|
|
if (e.target.classList.contains("rm")) return removeCard(i);
|
|
if (e.target.classList.contains("ed")) return openModal(i);
|
|
return; // click on card body in edit mode = no-op
|
|
}
|
|
// normal mode: navigate
|
|
if (window.home && window.home.navigate) window.home.navigate(cards[i].url);
|
|
else window.location.href = cards[i].url;
|
|
};
|
|
});
|
|
$("addBtn").onclick = () => openModal(-1);
|
|
}
|
|
function removeCard(i) {
|
|
if (!confirm(`Remove "${cards[i].title}" from Quick links?`)) return;
|
|
cards.splice(i, 1); persist(); render();
|
|
}
|
|
function openModal(i) {
|
|
editIdx = i;
|
|
const isNew = i < 0;
|
|
$("modalTitle").textContent = isNew ? "Add card" : "Edit card";
|
|
const c = isNew ? { title: "", url: "", sub: "", badge: "" } : cards[i];
|
|
$("mTitle").value = c.title || "";
|
|
$("mUrl").value = c.url || "";
|
|
$("mSub").value = c.sub || "";
|
|
$("mBadge").value = c.badge || "";
|
|
$("modal").classList.add("on");
|
|
setTimeout(() => $("mTitle").focus(), 20);
|
|
}
|
|
function closeModal() { $("modal").classList.remove("on"); }
|
|
$("mCancel").onclick = closeModal;
|
|
$("modal").addEventListener("click", (e) => { if (e.target.id === "modal") closeModal(); });
|
|
document.addEventListener("keydown", (e) => { if (e.key === "Escape" && $("modal").classList.contains("on")) closeModal(); });
|
|
$("mSave").onclick = () => {
|
|
const title = $("mTitle").value.trim();
|
|
let url = $("mUrl").value.trim();
|
|
if (!title || !url) { alert("Title and URL are required."); return; }
|
|
// Normalize URL: allow bare hosts like "example.com" (add https://).
|
|
if (!/^[a-z]+:\/\//i.test(url) && !/^[a-z]+:/.test(url)) url = "https://" + url;
|
|
const card = { title, url, sub: $("mSub").value.trim(), badge: $("mBadge").value };
|
|
if (editIdx < 0) cards.push(card); else cards[editIdx] = card;
|
|
persist(); render(); closeModal();
|
|
};
|
|
$("editBtn").onclick = () => {
|
|
const editing = document.body.classList.toggle("editing");
|
|
$("editBtn").classList.toggle("on", editing);
|
|
$("editBtn").textContent = editing ? "Done" : "Edit";
|
|
$("resetBtn").style.display = editing ? "" : "none";
|
|
};
|
|
$("resetBtn").onclick = async () => {
|
|
if (!confirm("Restore the default Quick links? Your custom entries will be lost.")) return;
|
|
if (window.home) await window.home.resetCards();
|
|
cards = window.home ? (await window.home.getCards()) : [];
|
|
render();
|
|
};
|
|
function persist() { if (window.home && window.home.setCards) window.home.setCards(cards); }
|
|
// Initial load — via IPC when available, otherwise a hardcoded fallback so
|
|
// opening home.html directly (e.g. from disk without Electron) still shows
|
|
// something instead of a blank grid.
|
|
(async () => {
|
|
if (window.home && window.home.getCards) cards = await window.home.getCards();
|
|
if (!cards || !cards.length) cards = [
|
|
{ title: "hello.bch", url: "https://hello.bch/", sub: "On the blockchain itself.", badge: "on-chain" },
|
|
{ title: "silentmode.bch", url: "https://silentmode.bch/", sub: "The division behind this stack.", badge: "on-chain" },
|
|
];
|
|
render();
|
|
// If main pushes a refreshed list from the remote URL, adopt it — but
|
|
// only when the user hasn't customised (main gates this on its side too).
|
|
if (window.home && window.home.onCards) {
|
|
window.home.onCards((list) => {
|
|
if (Array.isArray(list) && list.length) { cards = list; render(); }
|
|
});
|
|
}
|
|
})();
|
|
</script>
|
|
</body>
|
|
</html>
|