fix(theseus/light): sweep hardcoded acid → var(--acid), Theseus button uses BCH dark
Two follow-ups on the light-mode acid work: 1) Every hardcoded #d6ff3d and rgba(214,255,61,X) in the browser chrome and every addon panel now goes through var(--acid), so the light-mode BCH-teal (#0AC18E) takes effect everywhere — not just where var(--acid) was already used. Hex-with-alpha (#d6ff3d55 etc.) converts to color-mix(); rgba() converts to rgb(from var(--acid)…) for the same alpha with the current --acid hue. Chromium 128+ supports both. Files touched: chrome / settings / error / home / approval / bchwallet / siawallet / screenshot (html + css). Screenshot editor.js's #d6ff3d stays — that's the drawing colour swatch, not UI chrome. 2) The Theseus button (.logo) and update chip (.upchip) become dark BCH-navy chips (#253A49 background, #F8FDFF text) in light mode. Previously the .logo hardcoded #d6ff3d text on a bright-acid tint — invisible on a light toolbar. The dark chip stands out and gives the light theme a distinct accent using the BCH secondary from whybitcoincash.com's palette.
This commit is contained in:
Local Dev
parent
f8c58538d0
commit
7806e3f31c
9 changed files with 3878 additions and 3869 deletions
192
approval.html
192
approval.html
|
|
@ -1,96 +1,96 @@
|
|||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Approval</title>
|
||||
<style>
|
||||
:root { color-scheme: light dark;
|
||||
--surface:#1c222c; --surface2:#0f1621; --line:rgba(255,255,255,.12);
|
||||
--ink:#e7eaf1; --mut:#8b98a9; --dim:#5e6678; --acid:#d6ff3d; --danger:#f6768a; }
|
||||
@media (prefers-color-scheme: light) {
|
||||
:root { --surface:#ffffff; --surface2:#f1f4fa; --line:rgba(0,0,0,.12);
|
||||
--ink:#1a1f2b; --mut:#5c6577; --dim:#8a93a5;
|
||||
/* Darker acid for light backgrounds — ~5.5:1 on white. */
|
||||
--acid: #0AC18E; }
|
||||
}
|
||||
* { box-sizing: border-box; }
|
||||
html, body { margin: 0; height: 100%; background: transparent; }
|
||||
body { font: 13px/1.5 system-ui, -apple-system, Segoe UI, Roboto, sans-serif; color: var(--ink); }
|
||||
.promptmask { position: fixed; inset: 0; background: rgba(0,0,0,.45);
|
||||
display: grid; place-items: start center; padding-top: 48px; }
|
||||
.promptbox { background: var(--surface); border: 1px solid var(--line); border-radius: 12px;
|
||||
padding: 16px 18px 14px; width: min(460px, calc(100vw - 32px));
|
||||
box-shadow: 0 20px 60px #000d; animation: pop .12s ease-out; }
|
||||
@keyframes pop { from { transform: translateY(-6px); opacity: 0; } to { transform: none; opacity: 1; } }
|
||||
.who { display: flex; align-items: center; gap: 8px; color: var(--dim); font-size: 11.5px; margin-bottom: 8px; }
|
||||
.who .addon { color: var(--mut); }
|
||||
.title { font-size: 15px; font-weight: 650; letter-spacing: .1px; margin: 0 0 10px; }
|
||||
.origin { display: inline-flex; align-items: center; gap: 8px; max-width: 100%;
|
||||
background: var(--surface2); border: 1px solid rgba(214,255,61,.35); color: var(--acid);
|
||||
border-radius: 8px; padding: 6px 10px; margin-bottom: 12px;
|
||||
font: 13px/1.3 ui-monospace, "Cascadia Code", Consolas, monospace; word-break: break-all; }
|
||||
.origin .lbl { color: var(--dim); font: 11px system-ui, sans-serif; white-space: nowrap; }
|
||||
.body { white-space: pre-wrap; color: var(--ink); margin-bottom: 12px; }
|
||||
.rows { display: grid; grid-template-columns: max-content 1fr; gap: 6px 14px; margin-bottom: 12px;
|
||||
background: var(--surface2); border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; }
|
||||
.rows .k { color: var(--dim); font-size: 12px; white-space: nowrap; }
|
||||
.rows .v { word-break: break-all; }
|
||||
.rows .v.mono { font: 12.5px/1.4 ui-monospace, "Cascadia Code", Consolas, monospace; }
|
||||
.rows .v.strong { font-weight: 650; font-size: 14px; }
|
||||
label.chk { display: flex; align-items: center; gap: 8px; color: var(--mut); font-size: 12.5px; margin-bottom: 12px; cursor: pointer; }
|
||||
label.chk select { flex: 1; padding: 5px 8px; border-radius: 6px; background: var(--surface2); color: var(--ink);
|
||||
border: 1px solid var(--line); font: inherit; font-size: 12.5px; }
|
||||
.pact { display: flex; gap: 6px; justify-content: flex-end; }
|
||||
.pbtn { padding: 7px 14px; border-radius: 7px; border: 1px solid var(--line); background: var(--surface2);
|
||||
color: var(--ink); cursor: pointer; font: inherit; font-size: 12.5px; }
|
||||
.pbtn:hover { border-color: rgba(214,255,61,.35); }
|
||||
.pbtn.primary { background: var(--acid); color: #0b0e14; border-color: transparent; font-weight: 650; }
|
||||
.pbtn.danger { background: var(--danger); color: #0b0e14; border-color: transparent; font-weight: 650; }
|
||||
.pbtn:focus-visible { outline: 2px solid rgba(214,255,61,.6); outline-offset: 1px; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<script>
|
||||
const esc = (s) => String(s ?? "").replace(/[&<>"']/g, (c) => ({ "&":"&","<":"<",">":">",'"':""","'":"'" })[c]);
|
||||
let current = null;
|
||||
function finish(action, checked) {
|
||||
if (!current) return;
|
||||
const { reqId } = current;
|
||||
const extra = document.getElementById("sel") ? document.getElementById("sel").value : "";
|
||||
current = null;
|
||||
document.body.innerHTML = "";
|
||||
window.approval.pick(reqId, action, checked, extra);
|
||||
}
|
||||
window.approval.onShow((req) => {
|
||||
current = req;
|
||||
const rows = Array.isArray(req.rows) ? req.rows : [];
|
||||
const actions = Array.isArray(req.actions) && req.actions.length ? req.actions : [{ id: "ok", label: "OK", primary: true }];
|
||||
const hasCancel = actions.some((a) => a.id === "cancel");
|
||||
document.body.innerHTML =
|
||||
`<div class="promptmask"><div class="promptbox" role="dialog" aria-modal="true">
|
||||
<div class="who"><span>🧩</span><span class="addon">${esc(req.addonName || req.addonId)}</span><span>·</span><span>asks for your approval</span></div>
|
||||
<h1 class="title">${esc(req.title || "Approve?")}</h1>
|
||||
${req.origin ? `<div class="origin"><span class="lbl">from</span><span>${esc(req.origin)}</span></div>` : ""}
|
||||
${req.body ? `<div class="body">${esc(req.body)}</div>` : ""}
|
||||
${rows.length ? `<div class="rows">${rows.map((r) => `<div class="k">${esc(r.label)}</div><div class="v${r.mono ? " mono" : ""}${r.strong ? " strong" : ""}">${esc(r.value)}</div>`).join("")}</div>` : ""}
|
||||
${req.checkbox ? `<label class="chk"><input type="checkbox" id="chk"> ${esc(req.checkbox.label || "Always allow")}</label>` : ""}
|
||||
${req.select ? `<label class="chk"><span>${esc(req.select.label)}</span><select id="sel">${req.select.options.map((o) => `<option value="${esc(o.value)}">${esc(o.label)}</option>`).join("")}</select></label>` : ""}
|
||||
<div class="pact">
|
||||
${hasCancel ? "" : `<button class="pbtn" type="button" data-id="cancel">Cancel</button>`}
|
||||
${actions.map((a) => `<button class="pbtn${a.primary ? " primary" : ""}${a.danger ? " danger" : ""}" type="button" data-id="${esc(a.id)}">${esc(a.label || a.id)}</button>`).join("")}
|
||||
</div>
|
||||
</div></div>`;
|
||||
const mask = document.querySelector(".promptmask");
|
||||
mask.addEventListener("mousedown", (e) => { if (e.target === mask) finish("cancel", false); });
|
||||
document.querySelectorAll("button[data-id]").forEach((b) => {
|
||||
b.addEventListener("click", () => finish(b.dataset.id, !!document.getElementById("chk")?.checked));
|
||||
});
|
||||
// Focus the non-destructive default so Enter never blindly approves a
|
||||
// spend; the user has to tab or click onto the primary action.
|
||||
const first = document.querySelector('button[data-id="cancel"]') || document.querySelector("button");
|
||||
setTimeout(() => first && first.focus(), 0);
|
||||
});
|
||||
document.addEventListener("keydown", (e) => { if (e.key === "Escape") finish("cancel", false); });
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Approval</title>
|
||||
<style>
|
||||
:root { color-scheme: light dark;
|
||||
--surface:#1c222c; --surface2:#0f1621; --line:rgba(255,255,255,.12);
|
||||
--ink:#e7eaf1; --mut:#8b98a9; --dim:#5e6678; --acid:#d6ff3d; --danger:#f6768a; }
|
||||
@media (prefers-color-scheme: light) {
|
||||
:root { --surface:#ffffff; --surface2:#f1f4fa; --line:rgba(0,0,0,.12);
|
||||
--ink:#1a1f2b; --mut:#5c6577; --dim:#8a93a5;
|
||||
/* Darker acid for light backgrounds — ~5.5:1 on white. */
|
||||
--acid: #0AC18E; }
|
||||
}
|
||||
* { box-sizing: border-box; }
|
||||
html, body { margin: 0; height: 100%; background: transparent; }
|
||||
body { font: 13px/1.5 system-ui, -apple-system, Segoe UI, Roboto, sans-serif; color: var(--ink); }
|
||||
.promptmask { position: fixed; inset: 0; background: rgba(0,0,0,.45);
|
||||
display: grid; place-items: start center; padding-top: 48px; }
|
||||
.promptbox { background: var(--surface); border: 1px solid var(--line); border-radius: 12px;
|
||||
padding: 16px 18px 14px; width: min(460px, calc(100vw - 32px));
|
||||
box-shadow: 0 20px 60px #000d; animation: pop .12s ease-out; }
|
||||
@keyframes pop { from { transform: translateY(-6px); opacity: 0; } to { transform: none; opacity: 1; } }
|
||||
.who { display: flex; align-items: center; gap: 8px; color: var(--dim); font-size: 11.5px; margin-bottom: 8px; }
|
||||
.who .addon { color: var(--mut); }
|
||||
.title { font-size: 15px; font-weight: 650; letter-spacing: .1px; margin: 0 0 10px; }
|
||||
.origin { display: inline-flex; align-items: center; gap: 8px; max-width: 100%;
|
||||
background: var(--surface2); border: 1px solid rgb(from var(--acid) r g b / .35); color: var(--acid);
|
||||
border-radius: 8px; padding: 6px 10px; margin-bottom: 12px;
|
||||
font: 13px/1.3 ui-monospace, "Cascadia Code", Consolas, monospace; word-break: break-all; }
|
||||
.origin .lbl { color: var(--dim); font: 11px system-ui, sans-serif; white-space: nowrap; }
|
||||
.body { white-space: pre-wrap; color: var(--ink); margin-bottom: 12px; }
|
||||
.rows { display: grid; grid-template-columns: max-content 1fr; gap: 6px 14px; margin-bottom: 12px;
|
||||
background: var(--surface2); border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; }
|
||||
.rows .k { color: var(--dim); font-size: 12px; white-space: nowrap; }
|
||||
.rows .v { word-break: break-all; }
|
||||
.rows .v.mono { font: 12.5px/1.4 ui-monospace, "Cascadia Code", Consolas, monospace; }
|
||||
.rows .v.strong { font-weight: 650; font-size: 14px; }
|
||||
label.chk { display: flex; align-items: center; gap: 8px; color: var(--mut); font-size: 12.5px; margin-bottom: 12px; cursor: pointer; }
|
||||
label.chk select { flex: 1; padding: 5px 8px; border-radius: 6px; background: var(--surface2); color: var(--ink);
|
||||
border: 1px solid var(--line); font: inherit; font-size: 12.5px; }
|
||||
.pact { display: flex; gap: 6px; justify-content: flex-end; }
|
||||
.pbtn { padding: 7px 14px; border-radius: 7px; border: 1px solid var(--line); background: var(--surface2);
|
||||
color: var(--ink); cursor: pointer; font: inherit; font-size: 12.5px; }
|
||||
.pbtn:hover { border-color: rgb(from var(--acid) r g b / .35); }
|
||||
.pbtn.primary { background: var(--acid); color: #0b0e14; border-color: transparent; font-weight: 650; }
|
||||
.pbtn.danger { background: var(--danger); color: #0b0e14; border-color: transparent; font-weight: 650; }
|
||||
.pbtn:focus-visible { outline: 2px solid rgb(from var(--acid) r g b / .6); outline-offset: 1px; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<script>
|
||||
const esc = (s) => String(s ?? "").replace(/[&<>"']/g, (c) => ({ "&":"&","<":"<",">":">",'"':""","'":"'" })[c]);
|
||||
let current = null;
|
||||
function finish(action, checked) {
|
||||
if (!current) return;
|
||||
const { reqId } = current;
|
||||
const extra = document.getElementById("sel") ? document.getElementById("sel").value : "";
|
||||
current = null;
|
||||
document.body.innerHTML = "";
|
||||
window.approval.pick(reqId, action, checked, extra);
|
||||
}
|
||||
window.approval.onShow((req) => {
|
||||
current = req;
|
||||
const rows = Array.isArray(req.rows) ? req.rows : [];
|
||||
const actions = Array.isArray(req.actions) && req.actions.length ? req.actions : [{ id: "ok", label: "OK", primary: true }];
|
||||
const hasCancel = actions.some((a) => a.id === "cancel");
|
||||
document.body.innerHTML =
|
||||
`<div class="promptmask"><div class="promptbox" role="dialog" aria-modal="true">
|
||||
<div class="who"><span>🧩</span><span class="addon">${esc(req.addonName || req.addonId)}</span><span>·</span><span>asks for your approval</span></div>
|
||||
<h1 class="title">${esc(req.title || "Approve?")}</h1>
|
||||
${req.origin ? `<div class="origin"><span class="lbl">from</span><span>${esc(req.origin)}</span></div>` : ""}
|
||||
${req.body ? `<div class="body">${esc(req.body)}</div>` : ""}
|
||||
${rows.length ? `<div class="rows">${rows.map((r) => `<div class="k">${esc(r.label)}</div><div class="v${r.mono ? " mono" : ""}${r.strong ? " strong" : ""}">${esc(r.value)}</div>`).join("")}</div>` : ""}
|
||||
${req.checkbox ? `<label class="chk"><input type="checkbox" id="chk"> ${esc(req.checkbox.label || "Always allow")}</label>` : ""}
|
||||
${req.select ? `<label class="chk"><span>${esc(req.select.label)}</span><select id="sel">${req.select.options.map((o) => `<option value="${esc(o.value)}">${esc(o.label)}</option>`).join("")}</select></label>` : ""}
|
||||
<div class="pact">
|
||||
${hasCancel ? "" : `<button class="pbtn" type="button" data-id="cancel">Cancel</button>`}
|
||||
${actions.map((a) => `<button class="pbtn${a.primary ? " primary" : ""}${a.danger ? " danger" : ""}" type="button" data-id="${esc(a.id)}">${esc(a.label || a.id)}</button>`).join("")}
|
||||
</div>
|
||||
</div></div>`;
|
||||
const mask = document.querySelector(".promptmask");
|
||||
mask.addEventListener("mousedown", (e) => { if (e.target === mask) finish("cancel", false); });
|
||||
document.querySelectorAll("button[data-id]").forEach((b) => {
|
||||
b.addEventListener("click", () => finish(b.dataset.id, !!document.getElementById("chk")?.checked));
|
||||
});
|
||||
// Focus the non-destructive default so Enter never blindly approves a
|
||||
// spend; the user has to tab or click onto the primary action.
|
||||
const first = document.querySelector('button[data-id="cancel"]') || document.querySelector("button");
|
||||
setTimeout(() => first && first.focus(), 0);
|
||||
});
|
||||
document.addEventListener("keydown", (e) => { if (e.key === "Escape") finish("cancel", false); });
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -1,364 +1,364 @@
|
|||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Aegis Wallet</title>
|
||||
<link rel="icon" type="image/svg+xml" href="data:image/svg+xml;utf8,%3Csvg%20xmlns%3D'http%3A//www.w3.org/2000/svg'%20viewBox%3D'0%200%2032%2032'%3E%3Cpolygon%20points%3D'16%2C2%2029%2C9%2029%2C23%2016%2C30%203%2C23%203%2C9'%20fill%3D'none'%20stroke%3D'%23d6ff3d'%20stroke-width%3D'2.5'%20stroke-linejoin%3D'round'/%3E%3Ccircle%20cx%3D'16'%20cy%3D'16'%20r%3D'4.3'%20fill%3D'none'%20stroke%3D'%23d6ff3d'%20stroke-width%3D'1.6'/%3E%3Ccircle%20cx%3D'16'%20cy%3D'16'%20r%3D'1.6'%20fill%3D'%23d6ff3d'/%3E%3Cpath%20d%3D'M16%2010.5%20v-2.5%20M16%2021.5%20v2.5%20M10.5%2016%20h-2.5%20M21.5%2016%20h2.5'%20stroke%3D'%23d6ff3d'%20stroke-width%3D'1.6'%20stroke-linecap%3D'round'/%3E%3C/svg%3E">
|
||||
<style>
|
||||
:root { color-scheme: light dark;
|
||||
--bg:#0e131c; --panel:#141a24; --card:#0f1621; --line:rgba(255,255,255,.09);
|
||||
--ink:#e7eaf1; --mut:#8b98a9; --dim:#5e6678; --acid:#d6ff3d; --danger:#f6768a; --ok:#5ad38a;
|
||||
--bch:#0ac18e; --trx:#ff060a; --trxNile:#4d9dff; }
|
||||
@media (prefers-color-scheme: light) {
|
||||
:root { --bg:#f8faff; --panel:#ffffff; --card:#f1f4fa; --line:rgba(0,0,0,.10);
|
||||
--ink:#1a1f2b; --mut:#5c6577; --dim:#8a93a5;
|
||||
/* Darker acid on light backgrounds — ~7:1 contrast on white. */
|
||||
--acid: #0AC18E; }
|
||||
}
|
||||
* { box-sizing: border-box; }
|
||||
html, body { margin: 0; height: 100%; }
|
||||
body { background: var(--bg); color: var(--ink);
|
||||
font: 13.5px/1.5 system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
|
||||
display: flex; flex-direction: column; }
|
||||
header { padding: 10px 14px 10px; border-bottom: 1px solid var(--line); background: var(--panel); position: relative; }
|
||||
.picker { display: flex; align-items: center; justify-content: space-between; gap: 8px; cursor: pointer; user-select: none; }
|
||||
.picker .t { display: flex; align-items: center; gap: 7px; font-weight: 600; min-width: 0; }
|
||||
.picker .t .badge { font-size: 15px; line-height: 1; }
|
||||
.picker .t .lbl { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||
.picker .caret { color: var(--mut); font-size: 10px; }
|
||||
.picker:hover { color: var(--acid); }
|
||||
.net { display: flex; align-items: center; gap: 6px; color: var(--dim); font-size: 11.5px; white-space: nowrap; }
|
||||
.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--dim); }
|
||||
.dot.on { background: var(--ok); } .dot.busy { background: #e0b341; }
|
||||
.bal { margin-top: 8px; font-variant-numeric: tabular-nums; }
|
||||
.bal .big { font-size: 22px; font-weight: 650; letter-spacing: .2px; }
|
||||
.bal .big small { font-size: 13px; color: var(--mut); font-weight: 500; margin-left: 4px; }
|
||||
.bal .sub { color: var(--dim); font-size: 11.5px; display: flex; justify-content: space-between; gap: 8px; }
|
||||
.bal .sub .netlbl { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||
#drop { position: absolute; left: 10px; right: 10px; top: 100%; background: var(--panel); border: 1px solid var(--line);
|
||||
border-radius: 10px; box-shadow: 0 8px 26px rgba(0,0,0,.3); z-index: 20; padding: 4px; margin-top: 4px; max-height: 60vh; overflow-y: auto; }
|
||||
#drop[hidden] { display: none; }
|
||||
#drop .row, #drop .coinrow { display: flex; align-items: center; gap: 9px; padding: 7px 8px; border-radius: 7px; cursor: pointer; }
|
||||
#drop .row:hover, #drop .coinrow:hover { background: rgba(255,255,255,.05); }
|
||||
#drop .row .m, #drop .coinrow .m { flex: 1; min-width: 0; }
|
||||
#drop .row .m .l, #drop .coinrow .m .l { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||
#drop .row .m .s, #drop .coinrow .m .s { color: var(--dim); font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||
#drop .row .v { color: var(--mut); font-size: 12px; font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
|
||||
#drop .row.on { background: rgba(214,255,61,.10); }
|
||||
#drop .coinrow .caret { color: var(--dim); font-size: 11px; }
|
||||
#drop hr { border: 0; border-top: 1px solid var(--line); margin: 6px 0; }
|
||||
#drop .addhdr { padding: 5px 8px 3px; color: var(--dim); font-size: 11px; text-transform: uppercase; letter-spacing: .04em; }
|
||||
#drop .netgroup { padding: 2px 4px 6px 40px; }
|
||||
#drop .netgroup[hidden] { display: none; }
|
||||
#drop .netchoice { padding: 6px 8px; border-radius: 6px; cursor: pointer; font-size: 12.5px; color: var(--mut); }
|
||||
#drop .netchoice:hover { background: rgba(255,255,255,.06); color: var(--ink); }
|
||||
.ttag { display: inline-block; font-size: 9.5px; letter-spacing: .06em; padding: 1px 5px; border-radius: 3px;
|
||||
background: rgba(224,179,65,.18); color: #e0b341; font-weight: 700; vertical-align: middle; margin-left: 2px; }
|
||||
#hNet { color: var(--dim); font-size: 11px; margin-left: 4px; font-weight: 500; }
|
||||
nav { display: flex; border-bottom: 1px solid var(--line); background: var(--panel); }
|
||||
nav button { flex: 1; padding: 9px 0 8px; border: 0; background: transparent; color: var(--mut); cursor: pointer;
|
||||
font: inherit; font-size: 12.5px; border-bottom: 2px solid transparent; }
|
||||
nav button.on { color: var(--acid); border-bottom-color: var(--acid); }
|
||||
nav button:hover { color: var(--ink); }
|
||||
main { flex: 1; overflow: auto; padding: 14px; }
|
||||
section[hidden] { display: none; }
|
||||
.card { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 12px; }
|
||||
.mono { font: 12.5px/1.45 ui-monospace, "Cascadia Code", Consolas, monospace; word-break: break-all; }
|
||||
.lbl { color: var(--dim); font-size: 11.5px; margin-bottom: 4px; }
|
||||
.btn { padding: 7px 12px; border-radius: 7px; border: 1px solid var(--line); background: var(--panel); color: var(--ink);
|
||||
cursor: pointer; font: inherit; font-size: 12.5px; }
|
||||
.btn:hover { border-color: rgba(214,255,61,.4); }
|
||||
.btn.primary { background: var(--acid); color: #0b0e14; border-color: transparent; font-weight: 650; }
|
||||
.btn.primary:disabled { opacity: .45; cursor: default; }
|
||||
.btn.danger { color: var(--danger); }
|
||||
.btn.sm { padding: 4px 9px; font-size: 12px; }
|
||||
.actions { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
|
||||
.qrwrap { display: grid; place-items: center; padding: 12px; background: #fff; border-radius: 10px; margin-bottom: 12px; }
|
||||
canvas { image-rendering: pixelated; }
|
||||
input[type=text], input[type=number], textarea { width: 100%; padding: 7px 9px; border-radius: 7px; background: var(--panel);
|
||||
border: 1px solid var(--line); color: var(--ink); font: inherit; font-size: 13px; outline: none; }
|
||||
input:focus, textarea:focus { border-color: rgba(214,255,61,.5); }
|
||||
textarea { resize: vertical; min-height: 96px; font: 12px/1.45 ui-monospace, Consolas, monospace; }
|
||||
.field { margin-bottom: 12px; }
|
||||
.hint { color: var(--dim); font-size: 11.5px; margin-top: 4px; }
|
||||
.amt { display: flex; gap: 6px; }
|
||||
.amt input { flex: 1; }
|
||||
.unit { display: flex; border: 1px solid var(--line); border-radius: 7px; overflow: hidden; }
|
||||
.unit button { border: 0; background: var(--panel); color: var(--mut); padding: 0 10px; cursor: pointer; font: inherit; font-size: 12px; }
|
||||
.unit button.on { background: rgba(214,255,61,.14); color: var(--acid); }
|
||||
.fee { display: flex; align-items: center; gap: 10px; }
|
||||
.fee input[type=range] { flex: 1; accent-color: var(--acid); }
|
||||
.fee .v { color: var(--mut); font-size: 12px; min-width: 70px; text-align: right; font-variant-numeric: tabular-nums; }
|
||||
.summary { display: grid; grid-template-columns: max-content 1fr; gap: 4px 12px; font-size: 12.5px; margin-top: 10px; }
|
||||
.summary .k { color: var(--dim); } .summary .v { text-align: right; font-variant-numeric: tabular-nums; }
|
||||
.msg { margin-top: 10px; font-size: 12.5px; padding: 8px 10px; border-radius: 7px; }
|
||||
.msg.err { background: rgba(246,118,138,.12); color: var(--danger); }
|
||||
.msg.ok { background: rgba(90,211,138,.12); color: var(--ok); }
|
||||
.msg a { color: inherit; }
|
||||
.tx { display: grid; grid-template-columns: 22px 1fr auto; gap: 2px 10px; padding: 9px 4px; border-bottom: 1px solid var(--line); cursor: pointer; }
|
||||
.tx:hover { background: rgba(255,255,255,.03); }
|
||||
.tx .ic { font-size: 15px; line-height: 1.3; }
|
||||
.tx .ic.in { color: var(--ok); } .tx .ic.out { color: var(--danger); }
|
||||
.tx .what { font-size: 12.5px; }
|
||||
.tx .when { color: var(--dim); font-size: 11.5px; grid-column: 2; }
|
||||
.tx .amt2 { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; font-size: 12.5px; }
|
||||
.tx .amt2.in { color: var(--ok); }
|
||||
.tx .conf { grid-column: 3; text-align: right; color: var(--dim); font-size: 11px; }
|
||||
.tx .conf.pending { color: #e0b341; }
|
||||
.empty { color: var(--dim); text-align: center; padding: 30px 10px; font-size: 12.5px; }
|
||||
.gate { padding: 40px 18px; text-align: center; color: var(--mut); }
|
||||
.gate .big { font-size: 28px; margin-bottom: 8px; }
|
||||
.gate b { color: var(--ink); }
|
||||
.kv { margin-top: 10px; }
|
||||
.kv .lbl { margin-top: 8px; }
|
||||
a.link { color: var(--acid); text-decoration: none; cursor: pointer; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<div class="picker" id="pickerBtn">
|
||||
<div class="t">
|
||||
<span class="badge" id="hBadge"></span>
|
||||
<span class="lbl" id="hLabel">Aegis Wallet</span>
|
||||
<span id="hNet"></span>
|
||||
</div>
|
||||
<div class="caret">▾</div>
|
||||
</div>
|
||||
<div id="drop" hidden></div>
|
||||
<div class="bal">
|
||||
<div class="big"><span id="balMain">—</span><small id="balTicker">—</small></div>
|
||||
<div class="sub">
|
||||
<span class="netlbl" id="netlbl">connecting…</span>
|
||||
<span class="net"><span class="dot" id="dot"></span></span>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<nav>
|
||||
<button data-tab="receive" class="on">Receive</button>
|
||||
<button data-tab="send">Send</button>
|
||||
<button data-tab="history">History</button>
|
||||
<button data-tab="settings">Settings</button>
|
||||
</nav>
|
||||
<main>
|
||||
<div id="gate" class="gate" hidden></div>
|
||||
<div id="tabs">
|
||||
<section id="tab-receive">
|
||||
<div class="qrwrap"><canvas id="qr" width="200" height="200"></canvas></div>
|
||||
<div class="card">
|
||||
<div class="lbl">Receiving address <span id="addrMeta"></span></div>
|
||||
<div class="mono" id="addr">—</div>
|
||||
<div class="actions">
|
||||
<button class="btn sm" id="copyAddr">Copy</button>
|
||||
<button class="btn sm" id="nextAddr" hidden>Next unused address</button>
|
||||
<button class="btn sm" id="viewAddr">Explorer</button>
|
||||
<button class="btn sm" id="openFaucet" hidden>Faucet</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card" id="tokensCard" hidden style="margin-top:12px">
|
||||
<div class="lbl">Tokens</div>
|
||||
<div id="tokensList" class="kv"></div>
|
||||
<div class="hint">SPL tokens held by this wallet. Send by picking one under the Send tab's Asset dropdown.</div>
|
||||
</div>
|
||||
</section>
|
||||
<section id="tab-send" hidden>
|
||||
<div class="field" id="sendAssetField" hidden>
|
||||
<div class="lbl">Asset</div>
|
||||
<select id="sendAsset"></select>
|
||||
<div class="hint">Pick the native coin or an SPL token in this wallet.</div>
|
||||
</div>
|
||||
<div class="field">
|
||||
<div class="lbl">Recipient</div>
|
||||
<input type="text" id="sendTo" spellcheck="false" autocomplete="off" placeholder="…">
|
||||
<div class="hint" id="sendToHint"></div>
|
||||
</div>
|
||||
<div class="field">
|
||||
<div class="lbl">Amount</div>
|
||||
<div class="amt">
|
||||
<input type="text" id="sendAmt" inputmode="decimal" autocomplete="off" placeholder="0.00">
|
||||
<div class="unit" id="unitPicker"></div>
|
||||
<button class="btn sm" id="sendMax" type="button">Max</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="field" id="feeField">
|
||||
<div class="lbl">Fee</div>
|
||||
<div class="fee"><input type="range" id="feeRate" min="1" max="5" step="1" value="1"><span class="v" id="feeLbl">1 sat/B</span></div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="summary">
|
||||
<div class="k">Amount</div><div class="v" id="sumAmt">—</div>
|
||||
<div class="k">Network fee</div><div class="v" id="sumFee">—</div>
|
||||
<div class="k">Total</div><div class="v" id="sumTotal">—</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="actions"><button class="btn primary" id="sendBtn" disabled>Send</button></div>
|
||||
<div class="msg" id="sendMsg" hidden></div>
|
||||
</section>
|
||||
<section id="tab-history" hidden>
|
||||
<div id="txlist"></div>
|
||||
</section>
|
||||
<section id="tab-settings" hidden>
|
||||
<div class="card" id="walletManage" style="margin-bottom:14px">
|
||||
<div class="lbl">This wallet</div>
|
||||
<div class="field" style="margin-top:6px;margin-bottom:8px">
|
||||
<input type="text" id="renameLabel" placeholder="Wallet name">
|
||||
</div>
|
||||
<div class="actions">
|
||||
<button class="btn sm" id="renameBtn">Rename</button>
|
||||
<button class="btn sm danger" id="removeBtn">Remove wallet</button>
|
||||
</div>
|
||||
<div class="hint" id="removeHint"></div>
|
||||
</div>
|
||||
|
||||
<div id="bchSettings" hidden>
|
||||
<div class="field">
|
||||
<div class="lbl">Derivation path (account)</div>
|
||||
<input type="text" id="setPath" spellcheck="false" placeholder="m/44'/145'/0'">
|
||||
<div class="hint">Changing this switches to a different set of addresses under the same wallet seed.</div>
|
||||
</div>
|
||||
<div class="field" id="bchServersRow">
|
||||
<div class="lbl">Electrum servers (shared across BCH mainnet wallets, one per line)</div>
|
||||
<textarea id="setServers" spellcheck="false"></textarea>
|
||||
<div class="hint" id="serverHint"></div>
|
||||
</div>
|
||||
<div class="actions">
|
||||
<button class="btn primary" id="applySettings">Apply</button>
|
||||
<button class="btn" id="resetServers">Reset servers</button>
|
||||
</div>
|
||||
<div class="card" style="margin-top:16px">
|
||||
<div class="lbl">Recovery info</div>
|
||||
<div class="hint">Keys come from your Theseus password vault under <span class="mono" id="purpose"></span>. The same vault seed on another machine recreates this wallet.</div>
|
||||
<div class="kv" id="recovery"></div>
|
||||
<div class="actions">
|
||||
<button class="btn" id="showXpub">Show account xpub</button>
|
||||
<button class="btn danger" id="showXprv">Show account private key</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="trxSettings" hidden>
|
||||
<div class="card">
|
||||
<div class="lbl">Recovery info</div>
|
||||
<div class="hint">Keys come from your Theseus password vault under <span class="mono" id="trxPurpose"></span>. Import into TronLink with the derivation path <span class="mono">m/44'/195'/0'/0/0</span> from the same vault seed.</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="scSettings" hidden>
|
||||
<div class="field">
|
||||
<div class="lbl">walletd URL</div>
|
||||
<input type="text" id="setWalletdUrl" spellcheck="false" placeholder="https://your-walletd.example/api">
|
||||
<div class="hint">Any public or self-hosted <span class="mono">go.sia.tech/walletd</span> in "full" index mode. The URL is per-wallet, so different Sia sub-accounts can point at different nodes. It is not shared with anyone else.</div>
|
||||
</div>
|
||||
<div class="actions">
|
||||
<button class="btn primary" id="applyWalletdUrl">Apply</button>
|
||||
</div>
|
||||
<div class="card" style="margin-top:16px">
|
||||
<div class="lbl">Recovery info</div>
|
||||
<div class="hint">Keys come from your Theseus password vault under <span class="mono" id="scPurpose"></span>. Address scheme: walletd <span class="mono">KeyFromSeed(seed, index)</span>.</div>
|
||||
<div class="kv" id="scRecovery"></div>
|
||||
<div class="actions">
|
||||
<button class="btn danger" id="showScSeed">Reveal wallet seed</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="dgbSettings" hidden>
|
||||
<div class="field">
|
||||
<div class="lbl">Address family</div>
|
||||
<select id="setDgbFamily"></select>
|
||||
<div class="hint">Picks the BIP purpose that shapes your DGB addresses. Switching rebuilds the wallet against a different set of addresses under the same seed — old funds don't move; they still live under the family they were received on.</div>
|
||||
</div>
|
||||
<div class="field">
|
||||
<div class="lbl">Derivation path (account)</div>
|
||||
<input type="text" id="setDgbPath" spellcheck="false" placeholder="m/84'/20'/0'">
|
||||
<div class="hint">Auto-filled from the family above. Edit only if you need a non-default account.</div>
|
||||
</div>
|
||||
<div class="actions">
|
||||
<button class="btn primary" id="applyDgbPath">Apply</button>
|
||||
</div>
|
||||
<div class="card" style="margin-top:16px">
|
||||
<div class="lbl">Recovery info</div>
|
||||
<div class="hint">Keys come from your Theseus password vault under <span class="mono" id="dgbPurpose"></span>. Any BIP39 tool set to <span class="mono">DGB</span> (coin type 20) at the same purpose can reproduce this wallet.</div>
|
||||
<div class="kv" id="dgbRecovery"></div>
|
||||
<div class="actions">
|
||||
<button class="btn" id="showDgbXpub">Show account xpub</button>
|
||||
<button class="btn danger" id="showDgbXprv">Show account private key</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="btcSettings" hidden>
|
||||
<div class="field">
|
||||
<div class="lbl">Address family</div>
|
||||
<select id="setBtcFamily"></select>
|
||||
<div class="hint">Picks the BIP purpose that shapes your Bitcoin addresses. Switching rebuilds the wallet against a different set of addresses under the same seed — old funds don't move; they still live under the family they were received on.</div>
|
||||
</div>
|
||||
<div class="field">
|
||||
<div class="lbl">Derivation path (account)</div>
|
||||
<input type="text" id="setBtcPath" spellcheck="false" placeholder="m/84'/0'/0'">
|
||||
<div class="hint">Auto-filled from the family above. Edit only if you need a non-default account.</div>
|
||||
</div>
|
||||
<div class="actions">
|
||||
<button class="btn primary" id="applyBtcPath">Apply</button>
|
||||
</div>
|
||||
<div class="card" style="margin-top:16px">
|
||||
<div class="lbl">Recovery info</div>
|
||||
<div class="hint">Keys come from your Theseus password vault under <span class="mono" id="btcPurpose"></span>. Any BIP39 tool at coin type 0 (mainnet) / 1 (testnet) and the same purpose can reproduce this wallet.</div>
|
||||
<div class="kv" id="btcRecovery"></div>
|
||||
<div class="actions">
|
||||
<button class="btn" id="showBtcXpub">Show account xpub</button>
|
||||
<button class="btn danger" id="showBtcXprv">Show account private key</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="ethSettings" hidden>
|
||||
<div class="field">
|
||||
<div class="lbl">RPC URL</div>
|
||||
<input type="text" id="setEthRpcUrl" spellcheck="false" placeholder="https://cloudflare-eth.com">
|
||||
<div class="hint">JSON-RPC endpoint Aegis reads balances and broadcasts from. Any provider works — public gateways (Cloudflare, PublicNode), Alchemy, Infura, or your own node. Stored per-wallet; not shared.</div>
|
||||
</div>
|
||||
<div class="actions">
|
||||
<button class="btn primary" id="applyEthRpc">Apply</button>
|
||||
</div>
|
||||
<div class="card" style="margin-top:16px">
|
||||
<div class="lbl">Recovery info</div>
|
||||
<div class="hint">Keys come from your Theseus password vault under <span class="mono" id="ethPurpose"></span>. Import into MetaMask / any Ethereum wallet using the derivation path <span class="mono">m/44'/60'/0'/0/0</span> from the same vault seed.</div>
|
||||
<div class="kv" id="ethRecovery"></div>
|
||||
<div class="actions">
|
||||
<button class="btn danger" id="showEthKey">Reveal private key</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="solSettings" hidden>
|
||||
<div class="field">
|
||||
<div class="lbl">RPC URL</div>
|
||||
<input type="text" id="setSolRpcUrl" spellcheck="false" placeholder="https://api.mainnet-beta.solana.com">
|
||||
<div class="hint">JSON-RPC endpoint. The public Solana RPCs are heavily rate-limited — for real use point Aegis at Helius / QuickNode / your own node.</div>
|
||||
</div>
|
||||
<div class="actions">
|
||||
<button class="btn primary" id="applySolRpc">Apply</button>
|
||||
</div>
|
||||
<div class="card" style="margin-top:16px">
|
||||
<div class="lbl">Recovery info</div>
|
||||
<div class="hint">Keys come from your Theseus password vault under <span class="mono" id="solPurpose"></span>. Import into Phantom / Solflare with the derivation path <span class="mono">m/44'/501'/0'/0'</span> from the same vault seed.</div>
|
||||
<div class="kv" id="solRecovery"></div>
|
||||
<div class="actions">
|
||||
<button class="btn danger" id="showSolKey">Reveal wallet seed</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card" style="margin-top:16px">
|
||||
<div class="lbl">Connected sites</div>
|
||||
<div class="hint">Sites allowed to see your address, allowances for silent BCH payments, and Tron dapps you've connected. Message signing always asks.</div>
|
||||
<div id="sites" class="kv"></div>
|
||||
</div>
|
||||
<div class="msg err" id="settingsMsg" hidden></div>
|
||||
</section>
|
||||
</div>
|
||||
</main>
|
||||
<script src="qr.js"></script>
|
||||
<script src="panel.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Aegis Wallet</title>
|
||||
<link rel="icon" type="image/svg+xml" href="data:image/svg+xml;utf8,%3Csvg%20xmlns%3D'http%3A//www.w3.org/2000/svg'%20viewBox%3D'0%200%2032%2032'%3E%3Cpolygon%20points%3D'16%2C2%2029%2C9%2029%2C23%2016%2C30%203%2C23%203%2C9'%20fill%3D'none'%20stroke%3D'%23d6ff3d'%20stroke-width%3D'2.5'%20stroke-linejoin%3D'round'/%3E%3Ccircle%20cx%3D'16'%20cy%3D'16'%20r%3D'4.3'%20fill%3D'none'%20stroke%3D'%23d6ff3d'%20stroke-width%3D'1.6'/%3E%3Ccircle%20cx%3D'16'%20cy%3D'16'%20r%3D'1.6'%20fill%3D'%23d6ff3d'/%3E%3Cpath%20d%3D'M16%2010.5%20v-2.5%20M16%2021.5%20v2.5%20M10.5%2016%20h-2.5%20M21.5%2016%20h2.5'%20stroke%3D'%23d6ff3d'%20stroke-width%3D'1.6'%20stroke-linecap%3D'round'/%3E%3C/svg%3E">
|
||||
<style>
|
||||
:root { color-scheme: light dark;
|
||||
--bg:#0e131c; --panel:#141a24; --card:#0f1621; --line:rgba(255,255,255,.09);
|
||||
--ink:#e7eaf1; --mut:#8b98a9; --dim:#5e6678; --acid:#d6ff3d; --danger:#f6768a; --ok:#5ad38a;
|
||||
--bch:#0ac18e; --trx:#ff060a; --trxNile:#4d9dff; }
|
||||
@media (prefers-color-scheme: light) {
|
||||
:root { --bg:#f8faff; --panel:#ffffff; --card:#f1f4fa; --line:rgba(0,0,0,.10);
|
||||
--ink:#1a1f2b; --mut:#5c6577; --dim:#8a93a5;
|
||||
/* Darker acid on light backgrounds — ~7:1 contrast on white. */
|
||||
--acid: #0AC18E; }
|
||||
}
|
||||
* { box-sizing: border-box; }
|
||||
html, body { margin: 0; height: 100%; }
|
||||
body { background: var(--bg); color: var(--ink);
|
||||
font: 13.5px/1.5 system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
|
||||
display: flex; flex-direction: column; }
|
||||
header { padding: 10px 14px 10px; border-bottom: 1px solid var(--line); background: var(--panel); position: relative; }
|
||||
.picker { display: flex; align-items: center; justify-content: space-between; gap: 8px; cursor: pointer; user-select: none; }
|
||||
.picker .t { display: flex; align-items: center; gap: 7px; font-weight: 600; min-width: 0; }
|
||||
.picker .t .badge { font-size: 15px; line-height: 1; }
|
||||
.picker .t .lbl { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||
.picker .caret { color: var(--mut); font-size: 10px; }
|
||||
.picker:hover { color: var(--acid); }
|
||||
.net { display: flex; align-items: center; gap: 6px; color: var(--dim); font-size: 11.5px; white-space: nowrap; }
|
||||
.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--dim); }
|
||||
.dot.on { background: var(--ok); } .dot.busy { background: #e0b341; }
|
||||
.bal { margin-top: 8px; font-variant-numeric: tabular-nums; }
|
||||
.bal .big { font-size: 22px; font-weight: 650; letter-spacing: .2px; }
|
||||
.bal .big small { font-size: 13px; color: var(--mut); font-weight: 500; margin-left: 4px; }
|
||||
.bal .sub { color: var(--dim); font-size: 11.5px; display: flex; justify-content: space-between; gap: 8px; }
|
||||
.bal .sub .netlbl { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||
#drop { position: absolute; left: 10px; right: 10px; top: 100%; background: var(--panel); border: 1px solid var(--line);
|
||||
border-radius: 10px; box-shadow: 0 8px 26px rgba(0,0,0,.3); z-index: 20; padding: 4px; margin-top: 4px; max-height: 60vh; overflow-y: auto; }
|
||||
#drop[hidden] { display: none; }
|
||||
#drop .row, #drop .coinrow { display: flex; align-items: center; gap: 9px; padding: 7px 8px; border-radius: 7px; cursor: pointer; }
|
||||
#drop .row:hover, #drop .coinrow:hover { background: rgba(255,255,255,.05); }
|
||||
#drop .row .m, #drop .coinrow .m { flex: 1; min-width: 0; }
|
||||
#drop .row .m .l, #drop .coinrow .m .l { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||
#drop .row .m .s, #drop .coinrow .m .s { color: var(--dim); font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||
#drop .row .v { color: var(--mut); font-size: 12px; font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
|
||||
#drop .row.on { background: rgb(from var(--acid) r g b / .10); }
|
||||
#drop .coinrow .caret { color: var(--dim); font-size: 11px; }
|
||||
#drop hr { border: 0; border-top: 1px solid var(--line); margin: 6px 0; }
|
||||
#drop .addhdr { padding: 5px 8px 3px; color: var(--dim); font-size: 11px; text-transform: uppercase; letter-spacing: .04em; }
|
||||
#drop .netgroup { padding: 2px 4px 6px 40px; }
|
||||
#drop .netgroup[hidden] { display: none; }
|
||||
#drop .netchoice { padding: 6px 8px; border-radius: 6px; cursor: pointer; font-size: 12.5px; color: var(--mut); }
|
||||
#drop .netchoice:hover { background: rgba(255,255,255,.06); color: var(--ink); }
|
||||
.ttag { display: inline-block; font-size: 9.5px; letter-spacing: .06em; padding: 1px 5px; border-radius: 3px;
|
||||
background: rgba(224,179,65,.18); color: #e0b341; font-weight: 700; vertical-align: middle; margin-left: 2px; }
|
||||
#hNet { color: var(--dim); font-size: 11px; margin-left: 4px; font-weight: 500; }
|
||||
nav { display: flex; border-bottom: 1px solid var(--line); background: var(--panel); }
|
||||
nav button { flex: 1; padding: 9px 0 8px; border: 0; background: transparent; color: var(--mut); cursor: pointer;
|
||||
font: inherit; font-size: 12.5px; border-bottom: 2px solid transparent; }
|
||||
nav button.on { color: var(--acid); border-bottom-color: var(--acid); }
|
||||
nav button:hover { color: var(--ink); }
|
||||
main { flex: 1; overflow: auto; padding: 14px; }
|
||||
section[hidden] { display: none; }
|
||||
.card { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 12px; }
|
||||
.mono { font: 12.5px/1.45 ui-monospace, "Cascadia Code", Consolas, monospace; word-break: break-all; }
|
||||
.lbl { color: var(--dim); font-size: 11.5px; margin-bottom: 4px; }
|
||||
.btn { padding: 7px 12px; border-radius: 7px; border: 1px solid var(--line); background: var(--panel); color: var(--ink);
|
||||
cursor: pointer; font: inherit; font-size: 12.5px; }
|
||||
.btn:hover { border-color: rgb(from var(--acid) r g b / .4); }
|
||||
.btn.primary { background: var(--acid); color: #0b0e14; border-color: transparent; font-weight: 650; }
|
||||
.btn.primary:disabled { opacity: .45; cursor: default; }
|
||||
.btn.danger { color: var(--danger); }
|
||||
.btn.sm { padding: 4px 9px; font-size: 12px; }
|
||||
.actions { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
|
||||
.qrwrap { display: grid; place-items: center; padding: 12px; background: #fff; border-radius: 10px; margin-bottom: 12px; }
|
||||
canvas { image-rendering: pixelated; }
|
||||
input[type=text], input[type=number], textarea { width: 100%; padding: 7px 9px; border-radius: 7px; background: var(--panel);
|
||||
border: 1px solid var(--line); color: var(--ink); font: inherit; font-size: 13px; outline: none; }
|
||||
input:focus, textarea:focus { border-color: rgb(from var(--acid) r g b / .5); }
|
||||
textarea { resize: vertical; min-height: 96px; font: 12px/1.45 ui-monospace, Consolas, monospace; }
|
||||
.field { margin-bottom: 12px; }
|
||||
.hint { color: var(--dim); font-size: 11.5px; margin-top: 4px; }
|
||||
.amt { display: flex; gap: 6px; }
|
||||
.amt input { flex: 1; }
|
||||
.unit { display: flex; border: 1px solid var(--line); border-radius: 7px; overflow: hidden; }
|
||||
.unit button { border: 0; background: var(--panel); color: var(--mut); padding: 0 10px; cursor: pointer; font: inherit; font-size: 12px; }
|
||||
.unit button.on { background: rgb(from var(--acid) r g b / .14); color: var(--acid); }
|
||||
.fee { display: flex; align-items: center; gap: 10px; }
|
||||
.fee input[type=range] { flex: 1; accent-color: var(--acid); }
|
||||
.fee .v { color: var(--mut); font-size: 12px; min-width: 70px; text-align: right; font-variant-numeric: tabular-nums; }
|
||||
.summary { display: grid; grid-template-columns: max-content 1fr; gap: 4px 12px; font-size: 12.5px; margin-top: 10px; }
|
||||
.summary .k { color: var(--dim); } .summary .v { text-align: right; font-variant-numeric: tabular-nums; }
|
||||
.msg { margin-top: 10px; font-size: 12.5px; padding: 8px 10px; border-radius: 7px; }
|
||||
.msg.err { background: rgba(246,118,138,.12); color: var(--danger); }
|
||||
.msg.ok { background: rgba(90,211,138,.12); color: var(--ok); }
|
||||
.msg a { color: inherit; }
|
||||
.tx { display: grid; grid-template-columns: 22px 1fr auto; gap: 2px 10px; padding: 9px 4px; border-bottom: 1px solid var(--line); cursor: pointer; }
|
||||
.tx:hover { background: rgba(255,255,255,.03); }
|
||||
.tx .ic { font-size: 15px; line-height: 1.3; }
|
||||
.tx .ic.in { color: var(--ok); } .tx .ic.out { color: var(--danger); }
|
||||
.tx .what { font-size: 12.5px; }
|
||||
.tx .when { color: var(--dim); font-size: 11.5px; grid-column: 2; }
|
||||
.tx .amt2 { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; font-size: 12.5px; }
|
||||
.tx .amt2.in { color: var(--ok); }
|
||||
.tx .conf { grid-column: 3; text-align: right; color: var(--dim); font-size: 11px; }
|
||||
.tx .conf.pending { color: #e0b341; }
|
||||
.empty { color: var(--dim); text-align: center; padding: 30px 10px; font-size: 12.5px; }
|
||||
.gate { padding: 40px 18px; text-align: center; color: var(--mut); }
|
||||
.gate .big { font-size: 28px; margin-bottom: 8px; }
|
||||
.gate b { color: var(--ink); }
|
||||
.kv { margin-top: 10px; }
|
||||
.kv .lbl { margin-top: 8px; }
|
||||
a.link { color: var(--acid); text-decoration: none; cursor: pointer; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<div class="picker" id="pickerBtn">
|
||||
<div class="t">
|
||||
<span class="badge" id="hBadge"></span>
|
||||
<span class="lbl" id="hLabel">Aegis Wallet</span>
|
||||
<span id="hNet"></span>
|
||||
</div>
|
||||
<div class="caret">▾</div>
|
||||
</div>
|
||||
<div id="drop" hidden></div>
|
||||
<div class="bal">
|
||||
<div class="big"><span id="balMain">—</span><small id="balTicker">—</small></div>
|
||||
<div class="sub">
|
||||
<span class="netlbl" id="netlbl">connecting…</span>
|
||||
<span class="net"><span class="dot" id="dot"></span></span>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<nav>
|
||||
<button data-tab="receive" class="on">Receive</button>
|
||||
<button data-tab="send">Send</button>
|
||||
<button data-tab="history">History</button>
|
||||
<button data-tab="settings">Settings</button>
|
||||
</nav>
|
||||
<main>
|
||||
<div id="gate" class="gate" hidden></div>
|
||||
<div id="tabs">
|
||||
<section id="tab-receive">
|
||||
<div class="qrwrap"><canvas id="qr" width="200" height="200"></canvas></div>
|
||||
<div class="card">
|
||||
<div class="lbl">Receiving address <span id="addrMeta"></span></div>
|
||||
<div class="mono" id="addr">—</div>
|
||||
<div class="actions">
|
||||
<button class="btn sm" id="copyAddr">Copy</button>
|
||||
<button class="btn sm" id="nextAddr" hidden>Next unused address</button>
|
||||
<button class="btn sm" id="viewAddr">Explorer</button>
|
||||
<button class="btn sm" id="openFaucet" hidden>Faucet</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card" id="tokensCard" hidden style="margin-top:12px">
|
||||
<div class="lbl">Tokens</div>
|
||||
<div id="tokensList" class="kv"></div>
|
||||
<div class="hint">SPL tokens held by this wallet. Send by picking one under the Send tab's Asset dropdown.</div>
|
||||
</div>
|
||||
</section>
|
||||
<section id="tab-send" hidden>
|
||||
<div class="field" id="sendAssetField" hidden>
|
||||
<div class="lbl">Asset</div>
|
||||
<select id="sendAsset"></select>
|
||||
<div class="hint">Pick the native coin or an SPL token in this wallet.</div>
|
||||
</div>
|
||||
<div class="field">
|
||||
<div class="lbl">Recipient</div>
|
||||
<input type="text" id="sendTo" spellcheck="false" autocomplete="off" placeholder="…">
|
||||
<div class="hint" id="sendToHint"></div>
|
||||
</div>
|
||||
<div class="field">
|
||||
<div class="lbl">Amount</div>
|
||||
<div class="amt">
|
||||
<input type="text" id="sendAmt" inputmode="decimal" autocomplete="off" placeholder="0.00">
|
||||
<div class="unit" id="unitPicker"></div>
|
||||
<button class="btn sm" id="sendMax" type="button">Max</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="field" id="feeField">
|
||||
<div class="lbl">Fee</div>
|
||||
<div class="fee"><input type="range" id="feeRate" min="1" max="5" step="1" value="1"><span class="v" id="feeLbl">1 sat/B</span></div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="summary">
|
||||
<div class="k">Amount</div><div class="v" id="sumAmt">—</div>
|
||||
<div class="k">Network fee</div><div class="v" id="sumFee">—</div>
|
||||
<div class="k">Total</div><div class="v" id="sumTotal">—</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="actions"><button class="btn primary" id="sendBtn" disabled>Send</button></div>
|
||||
<div class="msg" id="sendMsg" hidden></div>
|
||||
</section>
|
||||
<section id="tab-history" hidden>
|
||||
<div id="txlist"></div>
|
||||
</section>
|
||||
<section id="tab-settings" hidden>
|
||||
<div class="card" id="walletManage" style="margin-bottom:14px">
|
||||
<div class="lbl">This wallet</div>
|
||||
<div class="field" style="margin-top:6px;margin-bottom:8px">
|
||||
<input type="text" id="renameLabel" placeholder="Wallet name">
|
||||
</div>
|
||||
<div class="actions">
|
||||
<button class="btn sm" id="renameBtn">Rename</button>
|
||||
<button class="btn sm danger" id="removeBtn">Remove wallet</button>
|
||||
</div>
|
||||
<div class="hint" id="removeHint"></div>
|
||||
</div>
|
||||
|
||||
<div id="bchSettings" hidden>
|
||||
<div class="field">
|
||||
<div class="lbl">Derivation path (account)</div>
|
||||
<input type="text" id="setPath" spellcheck="false" placeholder="m/44'/145'/0'">
|
||||
<div class="hint">Changing this switches to a different set of addresses under the same wallet seed.</div>
|
||||
</div>
|
||||
<div class="field" id="bchServersRow">
|
||||
<div class="lbl">Electrum servers (shared across BCH mainnet wallets, one per line)</div>
|
||||
<textarea id="setServers" spellcheck="false"></textarea>
|
||||
<div class="hint" id="serverHint"></div>
|
||||
</div>
|
||||
<div class="actions">
|
||||
<button class="btn primary" id="applySettings">Apply</button>
|
||||
<button class="btn" id="resetServers">Reset servers</button>
|
||||
</div>
|
||||
<div class="card" style="margin-top:16px">
|
||||
<div class="lbl">Recovery info</div>
|
||||
<div class="hint">Keys come from your Theseus password vault under <span class="mono" id="purpose"></span>. The same vault seed on another machine recreates this wallet.</div>
|
||||
<div class="kv" id="recovery"></div>
|
||||
<div class="actions">
|
||||
<button class="btn" id="showXpub">Show account xpub</button>
|
||||
<button class="btn danger" id="showXprv">Show account private key</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="trxSettings" hidden>
|
||||
<div class="card">
|
||||
<div class="lbl">Recovery info</div>
|
||||
<div class="hint">Keys come from your Theseus password vault under <span class="mono" id="trxPurpose"></span>. Import into TronLink with the derivation path <span class="mono">m/44'/195'/0'/0/0</span> from the same vault seed.</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="scSettings" hidden>
|
||||
<div class="field">
|
||||
<div class="lbl">walletd URL</div>
|
||||
<input type="text" id="setWalletdUrl" spellcheck="false" placeholder="https://your-walletd.example/api">
|
||||
<div class="hint">Any public or self-hosted <span class="mono">go.sia.tech/walletd</span> in "full" index mode. The URL is per-wallet, so different Sia sub-accounts can point at different nodes. It is not shared with anyone else.</div>
|
||||
</div>
|
||||
<div class="actions">
|
||||
<button class="btn primary" id="applyWalletdUrl">Apply</button>
|
||||
</div>
|
||||
<div class="card" style="margin-top:16px">
|
||||
<div class="lbl">Recovery info</div>
|
||||
<div class="hint">Keys come from your Theseus password vault under <span class="mono" id="scPurpose"></span>. Address scheme: walletd <span class="mono">KeyFromSeed(seed, index)</span>.</div>
|
||||
<div class="kv" id="scRecovery"></div>
|
||||
<div class="actions">
|
||||
<button class="btn danger" id="showScSeed">Reveal wallet seed</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="dgbSettings" hidden>
|
||||
<div class="field">
|
||||
<div class="lbl">Address family</div>
|
||||
<select id="setDgbFamily"></select>
|
||||
<div class="hint">Picks the BIP purpose that shapes your DGB addresses. Switching rebuilds the wallet against a different set of addresses under the same seed — old funds don't move; they still live under the family they were received on.</div>
|
||||
</div>
|
||||
<div class="field">
|
||||
<div class="lbl">Derivation path (account)</div>
|
||||
<input type="text" id="setDgbPath" spellcheck="false" placeholder="m/84'/20'/0'">
|
||||
<div class="hint">Auto-filled from the family above. Edit only if you need a non-default account.</div>
|
||||
</div>
|
||||
<div class="actions">
|
||||
<button class="btn primary" id="applyDgbPath">Apply</button>
|
||||
</div>
|
||||
<div class="card" style="margin-top:16px">
|
||||
<div class="lbl">Recovery info</div>
|
||||
<div class="hint">Keys come from your Theseus password vault under <span class="mono" id="dgbPurpose"></span>. Any BIP39 tool set to <span class="mono">DGB</span> (coin type 20) at the same purpose can reproduce this wallet.</div>
|
||||
<div class="kv" id="dgbRecovery"></div>
|
||||
<div class="actions">
|
||||
<button class="btn" id="showDgbXpub">Show account xpub</button>
|
||||
<button class="btn danger" id="showDgbXprv">Show account private key</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="btcSettings" hidden>
|
||||
<div class="field">
|
||||
<div class="lbl">Address family</div>
|
||||
<select id="setBtcFamily"></select>
|
||||
<div class="hint">Picks the BIP purpose that shapes your Bitcoin addresses. Switching rebuilds the wallet against a different set of addresses under the same seed — old funds don't move; they still live under the family they were received on.</div>
|
||||
</div>
|
||||
<div class="field">
|
||||
<div class="lbl">Derivation path (account)</div>
|
||||
<input type="text" id="setBtcPath" spellcheck="false" placeholder="m/84'/0'/0'">
|
||||
<div class="hint">Auto-filled from the family above. Edit only if you need a non-default account.</div>
|
||||
</div>
|
||||
<div class="actions">
|
||||
<button class="btn primary" id="applyBtcPath">Apply</button>
|
||||
</div>
|
||||
<div class="card" style="margin-top:16px">
|
||||
<div class="lbl">Recovery info</div>
|
||||
<div class="hint">Keys come from your Theseus password vault under <span class="mono" id="btcPurpose"></span>. Any BIP39 tool at coin type 0 (mainnet) / 1 (testnet) and the same purpose can reproduce this wallet.</div>
|
||||
<div class="kv" id="btcRecovery"></div>
|
||||
<div class="actions">
|
||||
<button class="btn" id="showBtcXpub">Show account xpub</button>
|
||||
<button class="btn danger" id="showBtcXprv">Show account private key</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="ethSettings" hidden>
|
||||
<div class="field">
|
||||
<div class="lbl">RPC URL</div>
|
||||
<input type="text" id="setEthRpcUrl" spellcheck="false" placeholder="https://cloudflare-eth.com">
|
||||
<div class="hint">JSON-RPC endpoint Aegis reads balances and broadcasts from. Any provider works — public gateways (Cloudflare, PublicNode), Alchemy, Infura, or your own node. Stored per-wallet; not shared.</div>
|
||||
</div>
|
||||
<div class="actions">
|
||||
<button class="btn primary" id="applyEthRpc">Apply</button>
|
||||
</div>
|
||||
<div class="card" style="margin-top:16px">
|
||||
<div class="lbl">Recovery info</div>
|
||||
<div class="hint">Keys come from your Theseus password vault under <span class="mono" id="ethPurpose"></span>. Import into MetaMask / any Ethereum wallet using the derivation path <span class="mono">m/44'/60'/0'/0/0</span> from the same vault seed.</div>
|
||||
<div class="kv" id="ethRecovery"></div>
|
||||
<div class="actions">
|
||||
<button class="btn danger" id="showEthKey">Reveal private key</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="solSettings" hidden>
|
||||
<div class="field">
|
||||
<div class="lbl">RPC URL</div>
|
||||
<input type="text" id="setSolRpcUrl" spellcheck="false" placeholder="https://api.mainnet-beta.solana.com">
|
||||
<div class="hint">JSON-RPC endpoint. The public Solana RPCs are heavily rate-limited — for real use point Aegis at Helius / QuickNode / your own node.</div>
|
||||
</div>
|
||||
<div class="actions">
|
||||
<button class="btn primary" id="applySolRpc">Apply</button>
|
||||
</div>
|
||||
<div class="card" style="margin-top:16px">
|
||||
<div class="lbl">Recovery info</div>
|
||||
<div class="hint">Keys come from your Theseus password vault under <span class="mono" id="solPurpose"></span>. Import into Phantom / Solflare with the derivation path <span class="mono">m/44'/501'/0'/0'</span> from the same vault seed.</div>
|
||||
<div class="kv" id="solRecovery"></div>
|
||||
<div class="actions">
|
||||
<button class="btn danger" id="showSolKey">Reveal wallet seed</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card" style="margin-top:16px">
|
||||
<div class="lbl">Connected sites</div>
|
||||
<div class="hint">Sites allowed to see your address, allowances for silent BCH payments, and Tron dapps you've connected. Message signing always asks.</div>
|
||||
<div id="sites" class="kv"></div>
|
||||
</div>
|
||||
<div class="msg err" id="settingsMsg" hidden></div>
|
||||
</section>
|
||||
</div>
|
||||
</main>
|
||||
<script src="qr.js"></script>
|
||||
<script src="panel.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -1,90 +1,90 @@
|
|||
/* Screenshot editor — full-tab page. Matches the Theseus dark aesthetic
|
||||
from the sidebar. Light-mode swap is symmetric. */
|
||||
:root { color-scheme: light dark;
|
||||
--bg:#0e131c; --panel:#141a24; --panel2:#191f2b; --line:rgba(255,255,255,.09);
|
||||
--ink:#e7eaf1; --mut:#8b98a9; --dim:#5e6678; --acid:#d6ff3d;
|
||||
--danger:#ff5b5b; --board:#0a0d13; }
|
||||
@media (prefers-color-scheme: light) {
|
||||
:root { --bg:#f8faff; --panel:#ffffff; --panel2:#eff3fb; --line:rgba(0,0,0,.10);
|
||||
--ink:#1a1f2b; --mut:#5c6577; --dim:#8a93a5; --acid: #0AC18E;
|
||||
--board:#dde3ee; }
|
||||
}
|
||||
* { box-sizing: border-box; }
|
||||
html, body { margin: 0; height: 100%; }
|
||||
body { background: var(--bg); color: var(--ink);
|
||||
font: 13px/1.5 system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
|
||||
display: flex; flex-direction: column; overflow: hidden; }
|
||||
|
||||
/* Toolbar ---------------------------------------------------------------- */
|
||||
.toolbar { display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
|
||||
padding: 8px 10px; border-bottom: 1px solid var(--line);
|
||||
background: var(--panel); user-select: none;
|
||||
font: 12px ui-monospace, "Cascadia Code", Consolas, monospace; }
|
||||
.toolbar .name { color: var(--dim); font-size: 11.5px; margin-right: 4px; overflow: hidden;
|
||||
text-overflow: ellipsis; white-space: nowrap; max-width: 240px; }
|
||||
.toolbar .sep { width: 1px; height: 22px; background: var(--line); margin: 0 4px; }
|
||||
.toolbar .spacer { flex: 1; }
|
||||
.tool { border: 1px solid var(--line); background: var(--panel2); color: var(--ink);
|
||||
width: 30px; height: 30px; border-radius: 6px; cursor: pointer;
|
||||
display: inline-flex; align-items: center; justify-content: center;
|
||||
font: inherit; padding: 0; transition: background .1s, border-color .1s; }
|
||||
.tool:hover { border-color: rgba(214,255,61,.5); }
|
||||
.tool.active { background: rgba(214,255,61,.15); border-color: rgba(214,255,61,.7); color: var(--acid); }
|
||||
.tool:disabled { opacity: .4; cursor: default; }
|
||||
.tool svg { width: 16px; height: 16px; display: block; }
|
||||
.tool.wide { width: auto; padding: 0 10px; gap: 6px; }
|
||||
.tool.danger { color: var(--danger); }
|
||||
.tool.danger:hover { border-color: rgba(255,91,91,.5); }
|
||||
|
||||
.swatch { width: 22px; height: 22px; border-radius: 50%; padding: 0;
|
||||
border: 2px solid var(--line); cursor: pointer; }
|
||||
.swatch.active { border-color: var(--acid); outline: 1px solid rgba(214,255,61,.35); outline-offset: 1px; }
|
||||
|
||||
.width { border: 1px solid var(--line); background: var(--panel2); color: var(--ink);
|
||||
width: 30px; height: 30px; border-radius: 6px; cursor: pointer;
|
||||
display: inline-flex; align-items: center; justify-content: center;
|
||||
padding: 0; }
|
||||
.width.active { border-color: rgba(214,255,61,.7); background: rgba(214,255,61,.15); }
|
||||
.width .dot { border-radius: 50%; background: currentColor; color: var(--ink); }
|
||||
.width.active .dot { color: var(--acid); }
|
||||
|
||||
.text-input {
|
||||
position: absolute; z-index: 10;
|
||||
background: rgba(20,26,36,.92); color: var(--ink); border: 1px solid var(--acid);
|
||||
padding: 2px 6px; font: 15px/1.2 system-ui, sans-serif; outline: none;
|
||||
border-radius: 3px; min-width: 80px;
|
||||
}
|
||||
|
||||
/* Canvas board ----------------------------------------------------------- */
|
||||
.board { flex: 1; overflow: auto; background: var(--board);
|
||||
display: flex; align-items: flex-start; justify-content: center;
|
||||
padding: 20px; }
|
||||
.stage { position: relative; box-shadow: 0 0 0 1px var(--line), 0 8px 30px rgba(0,0,0,.35); }
|
||||
.stage canvas { display: block; background: #fff; }
|
||||
.stage canvas.draw { position: absolute; left: 0; top: 0; }
|
||||
.stage canvas.overlay { position: absolute; left: 0; top: 0; pointer-events: none; }
|
||||
|
||||
/* When a drawing tool is active, put the drawing canvas above overlay */
|
||||
.stage[data-tool="select"] canvas.draw { cursor: default; }
|
||||
.stage[data-tool="crop"] canvas.draw { cursor: crosshair; }
|
||||
.stage[data-tool="rect"] canvas.draw,
|
||||
.stage[data-tool="ellipse"] canvas.draw,
|
||||
.stage[data-tool="arrow"] canvas.draw,
|
||||
.stage[data-tool="blur"] canvas.draw { cursor: crosshair; }
|
||||
.stage[data-tool="pen"] canvas.draw { cursor: crosshair; }
|
||||
.stage[data-tool="text"] canvas.draw { cursor: text; }
|
||||
|
||||
.hint { position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%);
|
||||
background: rgba(11,14,20,.9); border: 1px solid var(--line);
|
||||
color: var(--ink); padding: 6px 10px; border-radius: 6px;
|
||||
font-size: 12px; pointer-events: none; opacity: 0; transition: opacity .15s; }
|
||||
.hint.on { opacity: 1; }
|
||||
|
||||
.toast { position: fixed; right: 16px; bottom: 16px;
|
||||
background: rgba(214,255,61,.15); color: var(--acid);
|
||||
border: 1px solid rgba(214,255,61,.5);
|
||||
padding: 8px 12px; border-radius: 6px; font-size: 12.5px;
|
||||
opacity: 0; transform: translateY(6px);
|
||||
transition: opacity .2s, transform .2s; pointer-events: none; }
|
||||
.toast.on { opacity: 1; transform: translateY(0); }
|
||||
.toast.err { color: #ffb0b0; background: rgba(255,60,60,.15); border-color: rgba(255,60,60,.5); }
|
||||
/* Screenshot editor — full-tab page. Matches the Theseus dark aesthetic
|
||||
from the sidebar. Light-mode swap is symmetric. */
|
||||
:root { color-scheme: light dark;
|
||||
--bg:#0e131c; --panel:#141a24; --panel2:#191f2b; --line:rgba(255,255,255,.09);
|
||||
--ink:#e7eaf1; --mut:#8b98a9; --dim:#5e6678; --acid:#d6ff3d;
|
||||
--danger:#ff5b5b; --board:#0a0d13; }
|
||||
@media (prefers-color-scheme: light) {
|
||||
:root { --bg:#f8faff; --panel:#ffffff; --panel2:#eff3fb; --line:rgba(0,0,0,.10);
|
||||
--ink:#1a1f2b; --mut:#5c6577; --dim:#8a93a5; --acid: #0AC18E;
|
||||
--board:#dde3ee; }
|
||||
}
|
||||
* { box-sizing: border-box; }
|
||||
html, body { margin: 0; height: 100%; }
|
||||
body { background: var(--bg); color: var(--ink);
|
||||
font: 13px/1.5 system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
|
||||
display: flex; flex-direction: column; overflow: hidden; }
|
||||
|
||||
/* Toolbar ---------------------------------------------------------------- */
|
||||
.toolbar { display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
|
||||
padding: 8px 10px; border-bottom: 1px solid var(--line);
|
||||
background: var(--panel); user-select: none;
|
||||
font: 12px ui-monospace, "Cascadia Code", Consolas, monospace; }
|
||||
.toolbar .name { color: var(--dim); font-size: 11.5px; margin-right: 4px; overflow: hidden;
|
||||
text-overflow: ellipsis; white-space: nowrap; max-width: 240px; }
|
||||
.toolbar .sep { width: 1px; height: 22px; background: var(--line); margin: 0 4px; }
|
||||
.toolbar .spacer { flex: 1; }
|
||||
.tool { border: 1px solid var(--line); background: var(--panel2); color: var(--ink);
|
||||
width: 30px; height: 30px; border-radius: 6px; cursor: pointer;
|
||||
display: inline-flex; align-items: center; justify-content: center;
|
||||
font: inherit; padding: 0; transition: background .1s, border-color .1s; }
|
||||
.tool:hover { border-color: rgb(from var(--acid) r g b / .5); }
|
||||
.tool.active { background: rgb(from var(--acid) r g b / .15); border-color: rgb(from var(--acid) r g b / .7); color: var(--acid); }
|
||||
.tool:disabled { opacity: .4; cursor: default; }
|
||||
.tool svg { width: 16px; height: 16px; display: block; }
|
||||
.tool.wide { width: auto; padding: 0 10px; gap: 6px; }
|
||||
.tool.danger { color: var(--danger); }
|
||||
.tool.danger:hover { border-color: rgba(255,91,91,.5); }
|
||||
|
||||
.swatch { width: 22px; height: 22px; border-radius: 50%; padding: 0;
|
||||
border: 2px solid var(--line); cursor: pointer; }
|
||||
.swatch.active { border-color: var(--acid); outline: 1px solid rgb(from var(--acid) r g b / .35); outline-offset: 1px; }
|
||||
|
||||
.width { border: 1px solid var(--line); background: var(--panel2); color: var(--ink);
|
||||
width: 30px; height: 30px; border-radius: 6px; cursor: pointer;
|
||||
display: inline-flex; align-items: center; justify-content: center;
|
||||
padding: 0; }
|
||||
.width.active { border-color: rgb(from var(--acid) r g b / .7); background: rgb(from var(--acid) r g b / .15); }
|
||||
.width .dot { border-radius: 50%; background: currentColor; color: var(--ink); }
|
||||
.width.active .dot { color: var(--acid); }
|
||||
|
||||
.text-input {
|
||||
position: absolute; z-index: 10;
|
||||
background: rgba(20,26,36,.92); color: var(--ink); border: 1px solid var(--acid);
|
||||
padding: 2px 6px; font: 15px/1.2 system-ui, sans-serif; outline: none;
|
||||
border-radius: 3px; min-width: 80px;
|
||||
}
|
||||
|
||||
/* Canvas board ----------------------------------------------------------- */
|
||||
.board { flex: 1; overflow: auto; background: var(--board);
|
||||
display: flex; align-items: flex-start; justify-content: center;
|
||||
padding: 20px; }
|
||||
.stage { position: relative; box-shadow: 0 0 0 1px var(--line), 0 8px 30px rgba(0,0,0,.35); }
|
||||
.stage canvas { display: block; background: #fff; }
|
||||
.stage canvas.draw { position: absolute; left: 0; top: 0; }
|
||||
.stage canvas.overlay { position: absolute; left: 0; top: 0; pointer-events: none; }
|
||||
|
||||
/* When a drawing tool is active, put the drawing canvas above overlay */
|
||||
.stage[data-tool="select"] canvas.draw { cursor: default; }
|
||||
.stage[data-tool="crop"] canvas.draw { cursor: crosshair; }
|
||||
.stage[data-tool="rect"] canvas.draw,
|
||||
.stage[data-tool="ellipse"] canvas.draw,
|
||||
.stage[data-tool="arrow"] canvas.draw,
|
||||
.stage[data-tool="blur"] canvas.draw { cursor: crosshair; }
|
||||
.stage[data-tool="pen"] canvas.draw { cursor: crosshair; }
|
||||
.stage[data-tool="text"] canvas.draw { cursor: text; }
|
||||
|
||||
.hint { position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%);
|
||||
background: rgba(11,14,20,.9); border: 1px solid var(--line);
|
||||
color: var(--ink); padding: 6px 10px; border-radius: 6px;
|
||||
font-size: 12px; pointer-events: none; opacity: 0; transition: opacity .15s; }
|
||||
.hint.on { opacity: 1; }
|
||||
|
||||
.toast { position: fixed; right: 16px; bottom: 16px;
|
||||
background: rgb(from var(--acid) r g b / .15); color: var(--acid);
|
||||
border: 1px solid rgb(from var(--acid) r g b / .5);
|
||||
padding: 8px 12px; border-radius: 6px; font-size: 12.5px;
|
||||
opacity: 0; transform: translateY(6px);
|
||||
transition: opacity .2s, transform .2s; pointer-events: none; }
|
||||
.toast.on { opacity: 1; transform: translateY(0); }
|
||||
.toast.err { color: #ffb0b0; background: rgba(255,60,60,.15); border-color: rgba(255,60,60,.5); }
|
||||
|
|
|
|||
|
|
@ -1,114 +1,114 @@
|
|||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Screenshot editor</title>
|
||||
<link rel="stylesheet" href="editor.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="toolbar" id="toolbar">
|
||||
<span class="name" id="name">screenshot</span>
|
||||
<span class="sep"></span>
|
||||
|
||||
<!-- Tool selector. Each button carries data-tool; buttons for the
|
||||
drawing shapes and crop go here. -->
|
||||
<button class="tool active" data-tool="select" title="Select / no tool">
|
||||
<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M3 2l10 5-4 1-1 4z"/></svg>
|
||||
</button>
|
||||
<button class="tool" data-tool="crop" title="Crop">
|
||||
<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M4 1v11h11M1 4h11v11"/></svg>
|
||||
</button>
|
||||
<button class="tool" data-tool="arrow" title="Arrow">
|
||||
<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"><path d="M3 13L13 3M13 3H8M13 3v5"/></svg>
|
||||
</button>
|
||||
<button class="tool" data-tool="rect" title="Rectangle">
|
||||
<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="2.5" y="3.5" width="11" height="9"/></svg>
|
||||
</button>
|
||||
<button class="tool" data-tool="ellipse" title="Ellipse">
|
||||
<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><ellipse cx="8" cy="8" rx="5.5" ry="4"/></svg>
|
||||
</button>
|
||||
<button class="tool" data-tool="pen" title="Pen (freehand)">
|
||||
<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"><path d="M2 14c1-3 3-6 6-8s5-3 6-3l-3 4c-2 1-4 3-6 4s-2 2-3 3z"/></svg>
|
||||
</button>
|
||||
<button class="tool" data-tool="text" title="Text label">
|
||||
<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M3 3h10M8 3v10M6 13h4"/></svg>
|
||||
</button>
|
||||
<button class="tool" data-tool="blur" title="Blur / mosaic redaction">
|
||||
<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5">
|
||||
<rect x="2.5" y="2.5" width="11" height="11"/>
|
||||
<path d="M5 6h1M8 6h1M11 6h1M5 9h1M8 9h1M11 9h1M5 12h1M8 12h1M11 12h1"/>
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
<span class="sep"></span>
|
||||
|
||||
<!-- Palette -->
|
||||
<button class="swatch active" data-color="#d6ff3d" style="background:#d6ff3d" title="Acid"></button>
|
||||
<button class="swatch" data-color="#ff3b30" style="background:#ff3b30" title="Red"></button>
|
||||
<button class="swatch" data-color="#ff9500" style="background:#ff9500" title="Orange"></button>
|
||||
<button class="swatch" data-color="#ffcc00" style="background:#ffcc00" title="Yellow"></button>
|
||||
<button class="swatch" data-color="#0a84ff" style="background:#0a84ff" title="Blue"></button>
|
||||
<button class="swatch" data-color="#bf5af2" style="background:#bf5af2" title="Purple"></button>
|
||||
<button class="swatch" data-color="#ffffff" style="background:#ffffff" title="White"></button>
|
||||
<button class="swatch" data-color="#000000" style="background:#000000" title="Black"></button>
|
||||
|
||||
<span class="sep"></span>
|
||||
|
||||
<!-- Stroke width -->
|
||||
<button class="width" data-width="2" title="Thin">
|
||||
<span class="dot" style="width:4px;height:4px"></span>
|
||||
</button>
|
||||
<button class="width active" data-width="4" title="Medium">
|
||||
<span class="dot" style="width:7px;height:7px"></span>
|
||||
</button>
|
||||
<button class="width" data-width="8" title="Thick">
|
||||
<span class="dot" style="width:10px;height:10px"></span>
|
||||
</button>
|
||||
|
||||
<span class="sep"></span>
|
||||
|
||||
<button class="tool" id="undo" title="Undo (Ctrl+Z)" disabled>
|
||||
<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"><path d="M3 8c0-3 2-5 5-5s5 2 5 5-2 5-5 5"/><path d="M6 5L3 8l3 3"/></svg>
|
||||
</button>
|
||||
<button class="tool" id="redo" title="Redo (Ctrl+Shift+Z)" disabled>
|
||||
<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"><path d="M13 8c0-3-2-5-5-5S3 5 3 8s2 5 5 5"/><path d="M10 5l3 3-3 3"/></svg>
|
||||
</button>
|
||||
|
||||
<span class="spacer"></span>
|
||||
|
||||
<button class="tool wide" id="apply-crop" title="Apply the current crop rectangle" hidden>
|
||||
<span>Apply crop</span>
|
||||
</button>
|
||||
<button class="tool wide" id="cancel-crop" title="Cancel crop" hidden>
|
||||
<span>Cancel</span>
|
||||
</button>
|
||||
|
||||
<button class="tool wide" id="copy" title="Copy PNG to clipboard">
|
||||
<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="4" y="4" width="9" height="10"/><path d="M3 12V3h9"/></svg>
|
||||
<span>Copy</span>
|
||||
</button>
|
||||
<button class="tool wide" id="save" title="Save PNG">
|
||||
<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M8 2v9M4 7l4 4 4-4M2 14h12"/></svg>
|
||||
<span>Save</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="board" id="board">
|
||||
<div class="stage" id="stage" data-tool="select">
|
||||
<!-- committed pixels (the "real" image after every applied edit) -->
|
||||
<canvas id="committed"></canvas>
|
||||
<!-- live preview during a drag (arrow / rect / etc.) -->
|
||||
<canvas id="draw" class="draw"></canvas>
|
||||
<!-- crop / blur selection rectangle chrome -->
|
||||
<canvas id="overlay" class="overlay"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="hint" id="hint"></div>
|
||||
<div class="toast" id="toast"></div>
|
||||
|
||||
<a id="download-link" style="display:none"></a>
|
||||
|
||||
<script src="editor.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Screenshot editor</title>
|
||||
<link rel="stylesheet" href="editor.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="toolbar" id="toolbar">
|
||||
<span class="name" id="name">screenshot</span>
|
||||
<span class="sep"></span>
|
||||
|
||||
<!-- Tool selector. Each button carries data-tool; buttons for the
|
||||
drawing shapes and crop go here. -->
|
||||
<button class="tool active" data-tool="select" title="Select / no tool">
|
||||
<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M3 2l10 5-4 1-1 4z"/></svg>
|
||||
</button>
|
||||
<button class="tool" data-tool="crop" title="Crop">
|
||||
<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M4 1v11h11M1 4h11v11"/></svg>
|
||||
</button>
|
||||
<button class="tool" data-tool="arrow" title="Arrow">
|
||||
<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"><path d="M3 13L13 3M13 3H8M13 3v5"/></svg>
|
||||
</button>
|
||||
<button class="tool" data-tool="rect" title="Rectangle">
|
||||
<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="2.5" y="3.5" width="11" height="9"/></svg>
|
||||
</button>
|
||||
<button class="tool" data-tool="ellipse" title="Ellipse">
|
||||
<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><ellipse cx="8" cy="8" rx="5.5" ry="4"/></svg>
|
||||
</button>
|
||||
<button class="tool" data-tool="pen" title="Pen (freehand)">
|
||||
<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"><path d="M2 14c1-3 3-6 6-8s5-3 6-3l-3 4c-2 1-4 3-6 4s-2 2-3 3z"/></svg>
|
||||
</button>
|
||||
<button class="tool" data-tool="text" title="Text label">
|
||||
<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M3 3h10M8 3v10M6 13h4"/></svg>
|
||||
</button>
|
||||
<button class="tool" data-tool="blur" title="Blur / mosaic redaction">
|
||||
<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5">
|
||||
<rect x="2.5" y="2.5" width="11" height="11"/>
|
||||
<path d="M5 6h1M8 6h1M11 6h1M5 9h1M8 9h1M11 9h1M5 12h1M8 12h1M11 12h1"/>
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
<span class="sep"></span>
|
||||
|
||||
<!-- Palette -->
|
||||
<button class="swatch active" data-color="var(--acid)" style="background:var(--acid)" title="Acid"></button>
|
||||
<button class="swatch" data-color="#ff3b30" style="background:#ff3b30" title="Red"></button>
|
||||
<button class="swatch" data-color="#ff9500" style="background:#ff9500" title="Orange"></button>
|
||||
<button class="swatch" data-color="#ffcc00" style="background:#ffcc00" title="Yellow"></button>
|
||||
<button class="swatch" data-color="#0a84ff" style="background:#0a84ff" title="Blue"></button>
|
||||
<button class="swatch" data-color="#bf5af2" style="background:#bf5af2" title="Purple"></button>
|
||||
<button class="swatch" data-color="#ffffff" style="background:#ffffff" title="White"></button>
|
||||
<button class="swatch" data-color="#000000" style="background:#000000" title="Black"></button>
|
||||
|
||||
<span class="sep"></span>
|
||||
|
||||
<!-- Stroke width -->
|
||||
<button class="width" data-width="2" title="Thin">
|
||||
<span class="dot" style="width:4px;height:4px"></span>
|
||||
</button>
|
||||
<button class="width active" data-width="4" title="Medium">
|
||||
<span class="dot" style="width:7px;height:7px"></span>
|
||||
</button>
|
||||
<button class="width" data-width="8" title="Thick">
|
||||
<span class="dot" style="width:10px;height:10px"></span>
|
||||
</button>
|
||||
|
||||
<span class="sep"></span>
|
||||
|
||||
<button class="tool" id="undo" title="Undo (Ctrl+Z)" disabled>
|
||||
<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"><path d="M3 8c0-3 2-5 5-5s5 2 5 5-2 5-5 5"/><path d="M6 5L3 8l3 3"/></svg>
|
||||
</button>
|
||||
<button class="tool" id="redo" title="Redo (Ctrl+Shift+Z)" disabled>
|
||||
<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"><path d="M13 8c0-3-2-5-5-5S3 5 3 8s2 5 5 5"/><path d="M10 5l3 3-3 3"/></svg>
|
||||
</button>
|
||||
|
||||
<span class="spacer"></span>
|
||||
|
||||
<button class="tool wide" id="apply-crop" title="Apply the current crop rectangle" hidden>
|
||||
<span>Apply crop</span>
|
||||
</button>
|
||||
<button class="tool wide" id="cancel-crop" title="Cancel crop" hidden>
|
||||
<span>Cancel</span>
|
||||
</button>
|
||||
|
||||
<button class="tool wide" id="copy" title="Copy PNG to clipboard">
|
||||
<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="4" y="4" width="9" height="10"/><path d="M3 12V3h9"/></svg>
|
||||
<span>Copy</span>
|
||||
</button>
|
||||
<button class="tool wide" id="save" title="Save PNG">
|
||||
<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M8 2v9M4 7l4 4 4-4M2 14h12"/></svg>
|
||||
<span>Save</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="board" id="board">
|
||||
<div class="stage" id="stage" data-tool="select">
|
||||
<!-- committed pixels (the "real" image after every applied edit) -->
|
||||
<canvas id="committed"></canvas>
|
||||
<!-- live preview during a drag (arrow / rect / etc.) -->
|
||||
<canvas id="draw" class="draw"></canvas>
|
||||
<!-- crop / blur selection rectangle chrome -->
|
||||
<canvas id="overlay" class="overlay"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="hint" id="hint"></div>
|
||||
<div class="toast" id="toast"></div>
|
||||
|
||||
<a id="download-link" style="display:none"></a>
|
||||
|
||||
<script src="editor.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -1,181 +1,181 @@
|
|||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Siacoin Wallet</title>
|
||||
<style>
|
||||
:root { color-scheme: light dark;
|
||||
--bg:#0e131c; --panel:#141a24; --card:#0f1621; --line:rgba(255,255,255,.09);
|
||||
--ink:#e7eaf1; --mut:#8b98a9; --dim:#5e6678; --acid:#d6ff3d; --danger:#f6768a; --ok:#5ad38a;
|
||||
--sia:#20ee82; }
|
||||
@media (prefers-color-scheme: light) {
|
||||
:root { --bg:#f8faff; --panel:#ffffff; --card:#f1f4fa; --line:rgba(0,0,0,.10);
|
||||
--ink:#1a1f2b; --mut:#5c6577; --dim:#8a93a5; --sia:#1abc6a;
|
||||
/* Darker acid on light backgrounds. */
|
||||
--acid: #0AC18E; }
|
||||
}
|
||||
* { box-sizing: border-box; }
|
||||
html, body { margin: 0; height: 100%; }
|
||||
body { background: var(--bg); color: var(--ink);
|
||||
font: 13.5px/1.5 system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
|
||||
display: flex; flex-direction: column; }
|
||||
header { padding: 12px 14px 10px; border-bottom: 1px solid var(--line); background: var(--panel); }
|
||||
header .row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
|
||||
header .t { font-weight: 600; display: flex; gap: 8px; align-items: center; }
|
||||
header .t .coin { color: var(--sia); font-size: 16px; }
|
||||
.net { display: flex; align-items: center; gap: 6px; color: var(--dim); font-size: 11.5px; white-space: nowrap; }
|
||||
.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--dim); }
|
||||
.dot.on { background: var(--ok); } .dot.busy { background: #e0b341; }
|
||||
.bal { margin-top: 8px; font-variant-numeric: tabular-nums; }
|
||||
.bal .big { font-size: 22px; font-weight: 650; letter-spacing: .2px; }
|
||||
.bal .big small { font-size: 13px; color: var(--mut); font-weight: 500; margin-left: 4px; }
|
||||
.bal .sub { color: var(--dim); font-size: 11.5px; }
|
||||
nav { display: flex; border-bottom: 1px solid var(--line); background: var(--panel); }
|
||||
nav button { flex: 1; padding: 9px 0 8px; border: 0; background: transparent; color: var(--mut); cursor: pointer;
|
||||
font: inherit; font-size: 12.5px; border-bottom: 2px solid transparent; }
|
||||
nav button.on { color: var(--acid); border-bottom-color: var(--acid); }
|
||||
nav button:hover { color: var(--ink); }
|
||||
main { flex: 1; overflow: auto; padding: 14px; }
|
||||
section[hidden] { display: none; }
|
||||
.card { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 12px; }
|
||||
.mono { font: 12.5px/1.45 ui-monospace, "Cascadia Code", Consolas, monospace; word-break: break-all; }
|
||||
.lbl { color: var(--dim); font-size: 11.5px; margin-bottom: 4px; }
|
||||
.btn { padding: 7px 12px; border-radius: 7px; border: 1px solid var(--line); background: var(--panel); color: var(--ink);
|
||||
cursor: pointer; font: inherit; font-size: 12.5px; }
|
||||
.btn:hover { border-color: rgba(214,255,61,.4); }
|
||||
.btn.primary { background: var(--acid); color: #0b0e14; border-color: transparent; font-weight: 650; }
|
||||
.btn.primary:disabled { opacity: .45; cursor: default; }
|
||||
.btn.danger { color: var(--danger); }
|
||||
.btn.sm { padding: 4px 9px; font-size: 12px; }
|
||||
.actions { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
|
||||
.qrwrap { display: grid; place-items: center; padding: 12px; background: #fff; border-radius: 10px; margin-bottom: 12px; }
|
||||
canvas { image-rendering: pixelated; }
|
||||
input[type=text], textarea { width: 100%; padding: 7px 9px; border-radius: 7px; background: var(--panel);
|
||||
border: 1px solid var(--line); color: var(--ink); font: inherit; font-size: 13px; outline: none; }
|
||||
input:focus, textarea:focus { border-color: rgba(214,255,61,.5); }
|
||||
.field { margin-bottom: 12px; }
|
||||
.hint { color: var(--dim); font-size: 11.5px; margin-top: 4px; }
|
||||
.amt { display: flex; gap: 6px; }
|
||||
.amt input { flex: 1; }
|
||||
.fee { display: flex; align-items: center; gap: 10px; }
|
||||
.fee input[type=range] { flex: 1; accent-color: var(--acid); }
|
||||
.fee .v { color: var(--mut); font-size: 12px; min-width: 70px; text-align: right; font-variant-numeric: tabular-nums; }
|
||||
.summary { display: grid; grid-template-columns: max-content 1fr; gap: 4px 12px; font-size: 12.5px; margin-top: 10px; }
|
||||
.summary .k { color: var(--dim); } .summary .v { text-align: right; font-variant-numeric: tabular-nums; }
|
||||
.msg { margin-top: 10px; font-size: 12.5px; padding: 8px 10px; border-radius: 7px; }
|
||||
.msg.err { background: rgba(246,118,138,.12); color: var(--danger); }
|
||||
.msg.ok { background: rgba(90,211,138,.12); color: var(--ok); }
|
||||
.tx { display: grid; grid-template-columns: 22px 1fr auto; gap: 2px 10px; padding: 9px 4px; border-bottom: 1px solid var(--line); cursor: pointer; }
|
||||
.tx:hover { background: rgba(255,255,255,.03); }
|
||||
.tx .ic { font-size: 15px; line-height: 1.3; }
|
||||
.tx .ic.in { color: var(--ok); } .tx .ic.out { color: var(--danger); }
|
||||
.tx .what { font-size: 12.5px; }
|
||||
.tx .when { color: var(--dim); font-size: 11.5px; grid-column: 2; }
|
||||
.tx .amt2 { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; font-size: 12.5px; }
|
||||
.tx .amt2.in { color: var(--ok); }
|
||||
.tx .conf { grid-column: 3; text-align: right; color: var(--dim); font-size: 11px; }
|
||||
.tx .conf.pending { color: #e0b341; }
|
||||
.empty { color: var(--dim); text-align: center; padding: 30px 10px; font-size: 12.5px; }
|
||||
.gate { padding: 40px 18px; text-align: center; color: var(--mut); }
|
||||
.gate .big { font-size: 28px; margin-bottom: 8px; }
|
||||
.gate b { color: var(--ink); }
|
||||
.gate input { margin-top: 14px; text-align: left; }
|
||||
.kv { margin-top: 10px; }
|
||||
.kv .lbl { margin-top: 8px; }
|
||||
a.link { color: var(--acid); text-decoration: none; cursor: pointer; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<div class="row">
|
||||
<div class="t"><span class="coin">Ⓢ</span><span>Siacoin</span></div>
|
||||
<div class="net"><span class="dot" id="dot"></span><span id="netlbl">connecting…</span></div>
|
||||
</div>
|
||||
<div class="bal">
|
||||
<div class="big"><span id="balSc">—</span><small>SC</small></div>
|
||||
<div class="sub" id="balSub">mainnet</div>
|
||||
</div>
|
||||
</header>
|
||||
<nav>
|
||||
<button data-tab="receive" class="on">Receive</button>
|
||||
<button data-tab="send">Send</button>
|
||||
<button data-tab="history">History</button>
|
||||
<button data-tab="settings">Settings</button>
|
||||
</nav>
|
||||
<main>
|
||||
<div id="gate" class="gate" hidden></div>
|
||||
<div id="tabs">
|
||||
<section id="tab-receive">
|
||||
<div class="qrwrap"><canvas id="qr" width="200" height="200"></canvas></div>
|
||||
<div class="card">
|
||||
<div class="lbl">Receiving address <span id="addrMeta"></span></div>
|
||||
<div class="mono" id="addr">—</div>
|
||||
<div class="actions">
|
||||
<button class="btn sm" id="copyAddr">Copy</button>
|
||||
<button class="btn sm" id="nextAddr">Next unused address</button>
|
||||
<button class="btn sm" id="viewAddr">Explorer</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section id="tab-send" hidden>
|
||||
<div class="field">
|
||||
<div class="lbl">Recipient</div>
|
||||
<input type="text" id="sendTo" spellcheck="false" autocomplete="off" placeholder="76-character Sia address">
|
||||
<div class="hint" id="sendToHint"></div>
|
||||
</div>
|
||||
<div class="field">
|
||||
<div class="lbl">Amount (SC)</div>
|
||||
<div class="amt">
|
||||
<input type="text" id="sendAmt" inputmode="decimal" autocomplete="off" placeholder="0.00">
|
||||
<button class="btn sm" id="sendMax" type="button">Max</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="field">
|
||||
<div class="lbl">Fee</div>
|
||||
<div class="fee"><input type="range" id="feeMult" min="1" max="3" step="1" value="1"><span class="v" id="feeLbl">normal</span></div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="summary">
|
||||
<div class="k">Amount</div><div class="v" id="sumAmt">—</div>
|
||||
<div class="k">Network fee</div><div class="v" id="sumFee">—</div>
|
||||
<div class="k">Total</div><div class="v" id="sumTotal">—</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="actions"><button class="btn primary" id="sendBtn" disabled>Send</button></div>
|
||||
<div class="msg" id="sendMsg" hidden></div>
|
||||
</section>
|
||||
<section id="tab-history" hidden>
|
||||
<div id="txlist"></div>
|
||||
</section>
|
||||
<section id="tab-settings" hidden>
|
||||
<div class="field">
|
||||
<div class="lbl">walletd node URL</div>
|
||||
<input type="text" id="setUrl" spellcheck="false" placeholder="https://host[:port]">
|
||||
<div class="hint" id="urlHint">Any walletd (v2) with index mode "full". Hosted providers put your access key in the path; it is stored locally only.</div>
|
||||
</div>
|
||||
<div class="actions">
|
||||
<button class="btn primary" id="applySettings">Apply</button>
|
||||
<button class="btn" id="refreshBtn">Rescan</button>
|
||||
</div>
|
||||
<div class="card" style="margin-top:16px">
|
||||
<div class="lbl">Recovery info</div>
|
||||
<div class="hint">Keys come from your Theseus password vault under <span class="mono">silentmode/addons/siawallet/mainnet/0</span>, using walletd's per-index key scheme. The same vault seed on another machine recreates this wallet.</div>
|
||||
<div class="kv" id="recovery"></div>
|
||||
<div class="actions">
|
||||
<button class="btn" id="showInfo">Show derivation</button>
|
||||
<button class="btn danger" id="showSeed">Show wallet seed</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card" style="margin-top:16px">
|
||||
<div class="lbl">Connected sites</div>
|
||||
<div class="hint">Sites allowed to read your address, and sites with a payment allowance they can spend without asking. Message signing always asks.</div>
|
||||
<div id="sites" class="kv"></div>
|
||||
</div>
|
||||
<div class="msg err" id="settingsMsg" hidden></div>
|
||||
</section>
|
||||
</div>
|
||||
</main>
|
||||
<script src="qr.js"></script>
|
||||
<script src="panel.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Siacoin Wallet</title>
|
||||
<style>
|
||||
:root { color-scheme: light dark;
|
||||
--bg:#0e131c; --panel:#141a24; --card:#0f1621; --line:rgba(255,255,255,.09);
|
||||
--ink:#e7eaf1; --mut:#8b98a9; --dim:#5e6678; --acid:#d6ff3d; --danger:#f6768a; --ok:#5ad38a;
|
||||
--sia:#20ee82; }
|
||||
@media (prefers-color-scheme: light) {
|
||||
:root { --bg:#f8faff; --panel:#ffffff; --card:#f1f4fa; --line:rgba(0,0,0,.10);
|
||||
--ink:#1a1f2b; --mut:#5c6577; --dim:#8a93a5; --sia:#1abc6a;
|
||||
/* Darker acid on light backgrounds. */
|
||||
--acid: #0AC18E; }
|
||||
}
|
||||
* { box-sizing: border-box; }
|
||||
html, body { margin: 0; height: 100%; }
|
||||
body { background: var(--bg); color: var(--ink);
|
||||
font: 13.5px/1.5 system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
|
||||
display: flex; flex-direction: column; }
|
||||
header { padding: 12px 14px 10px; border-bottom: 1px solid var(--line); background: var(--panel); }
|
||||
header .row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
|
||||
header .t { font-weight: 600; display: flex; gap: 8px; align-items: center; }
|
||||
header .t .coin { color: var(--sia); font-size: 16px; }
|
||||
.net { display: flex; align-items: center; gap: 6px; color: var(--dim); font-size: 11.5px; white-space: nowrap; }
|
||||
.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--dim); }
|
||||
.dot.on { background: var(--ok); } .dot.busy { background: #e0b341; }
|
||||
.bal { margin-top: 8px; font-variant-numeric: tabular-nums; }
|
||||
.bal .big { font-size: 22px; font-weight: 650; letter-spacing: .2px; }
|
||||
.bal .big small { font-size: 13px; color: var(--mut); font-weight: 500; margin-left: 4px; }
|
||||
.bal .sub { color: var(--dim); font-size: 11.5px; }
|
||||
nav { display: flex; border-bottom: 1px solid var(--line); background: var(--panel); }
|
||||
nav button { flex: 1; padding: 9px 0 8px; border: 0; background: transparent; color: var(--mut); cursor: pointer;
|
||||
font: inherit; font-size: 12.5px; border-bottom: 2px solid transparent; }
|
||||
nav button.on { color: var(--acid); border-bottom-color: var(--acid); }
|
||||
nav button:hover { color: var(--ink); }
|
||||
main { flex: 1; overflow: auto; padding: 14px; }
|
||||
section[hidden] { display: none; }
|
||||
.card { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 12px; }
|
||||
.mono { font: 12.5px/1.45 ui-monospace, "Cascadia Code", Consolas, monospace; word-break: break-all; }
|
||||
.lbl { color: var(--dim); font-size: 11.5px; margin-bottom: 4px; }
|
||||
.btn { padding: 7px 12px; border-radius: 7px; border: 1px solid var(--line); background: var(--panel); color: var(--ink);
|
||||
cursor: pointer; font: inherit; font-size: 12.5px; }
|
||||
.btn:hover { border-color: rgb(from var(--acid) r g b / .4); }
|
||||
.btn.primary { background: var(--acid); color: #0b0e14; border-color: transparent; font-weight: 650; }
|
||||
.btn.primary:disabled { opacity: .45; cursor: default; }
|
||||
.btn.danger { color: var(--danger); }
|
||||
.btn.sm { padding: 4px 9px; font-size: 12px; }
|
||||
.actions { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
|
||||
.qrwrap { display: grid; place-items: center; padding: 12px; background: #fff; border-radius: 10px; margin-bottom: 12px; }
|
||||
canvas { image-rendering: pixelated; }
|
||||
input[type=text], textarea { width: 100%; padding: 7px 9px; border-radius: 7px; background: var(--panel);
|
||||
border: 1px solid var(--line); color: var(--ink); font: inherit; font-size: 13px; outline: none; }
|
||||
input:focus, textarea:focus { border-color: rgb(from var(--acid) r g b / .5); }
|
||||
.field { margin-bottom: 12px; }
|
||||
.hint { color: var(--dim); font-size: 11.5px; margin-top: 4px; }
|
||||
.amt { display: flex; gap: 6px; }
|
||||
.amt input { flex: 1; }
|
||||
.fee { display: flex; align-items: center; gap: 10px; }
|
||||
.fee input[type=range] { flex: 1; accent-color: var(--acid); }
|
||||
.fee .v { color: var(--mut); font-size: 12px; min-width: 70px; text-align: right; font-variant-numeric: tabular-nums; }
|
||||
.summary { display: grid; grid-template-columns: max-content 1fr; gap: 4px 12px; font-size: 12.5px; margin-top: 10px; }
|
||||
.summary .k { color: var(--dim); } .summary .v { text-align: right; font-variant-numeric: tabular-nums; }
|
||||
.msg { margin-top: 10px; font-size: 12.5px; padding: 8px 10px; border-radius: 7px; }
|
||||
.msg.err { background: rgba(246,118,138,.12); color: var(--danger); }
|
||||
.msg.ok { background: rgba(90,211,138,.12); color: var(--ok); }
|
||||
.tx { display: grid; grid-template-columns: 22px 1fr auto; gap: 2px 10px; padding: 9px 4px; border-bottom: 1px solid var(--line); cursor: pointer; }
|
||||
.tx:hover { background: rgba(255,255,255,.03); }
|
||||
.tx .ic { font-size: 15px; line-height: 1.3; }
|
||||
.tx .ic.in { color: var(--ok); } .tx .ic.out { color: var(--danger); }
|
||||
.tx .what { font-size: 12.5px; }
|
||||
.tx .when { color: var(--dim); font-size: 11.5px; grid-column: 2; }
|
||||
.tx .amt2 { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; font-size: 12.5px; }
|
||||
.tx .amt2.in { color: var(--ok); }
|
||||
.tx .conf { grid-column: 3; text-align: right; color: var(--dim); font-size: 11px; }
|
||||
.tx .conf.pending { color: #e0b341; }
|
||||
.empty { color: var(--dim); text-align: center; padding: 30px 10px; font-size: 12.5px; }
|
||||
.gate { padding: 40px 18px; text-align: center; color: var(--mut); }
|
||||
.gate .big { font-size: 28px; margin-bottom: 8px; }
|
||||
.gate b { color: var(--ink); }
|
||||
.gate input { margin-top: 14px; text-align: left; }
|
||||
.kv { margin-top: 10px; }
|
||||
.kv .lbl { margin-top: 8px; }
|
||||
a.link { color: var(--acid); text-decoration: none; cursor: pointer; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<div class="row">
|
||||
<div class="t"><span class="coin">Ⓢ</span><span>Siacoin</span></div>
|
||||
<div class="net"><span class="dot" id="dot"></span><span id="netlbl">connecting…</span></div>
|
||||
</div>
|
||||
<div class="bal">
|
||||
<div class="big"><span id="balSc">—</span><small>SC</small></div>
|
||||
<div class="sub" id="balSub">mainnet</div>
|
||||
</div>
|
||||
</header>
|
||||
<nav>
|
||||
<button data-tab="receive" class="on">Receive</button>
|
||||
<button data-tab="send">Send</button>
|
||||
<button data-tab="history">History</button>
|
||||
<button data-tab="settings">Settings</button>
|
||||
</nav>
|
||||
<main>
|
||||
<div id="gate" class="gate" hidden></div>
|
||||
<div id="tabs">
|
||||
<section id="tab-receive">
|
||||
<div class="qrwrap"><canvas id="qr" width="200" height="200"></canvas></div>
|
||||
<div class="card">
|
||||
<div class="lbl">Receiving address <span id="addrMeta"></span></div>
|
||||
<div class="mono" id="addr">—</div>
|
||||
<div class="actions">
|
||||
<button class="btn sm" id="copyAddr">Copy</button>
|
||||
<button class="btn sm" id="nextAddr">Next unused address</button>
|
||||
<button class="btn sm" id="viewAddr">Explorer</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section id="tab-send" hidden>
|
||||
<div class="field">
|
||||
<div class="lbl">Recipient</div>
|
||||
<input type="text" id="sendTo" spellcheck="false" autocomplete="off" placeholder="76-character Sia address">
|
||||
<div class="hint" id="sendToHint"></div>
|
||||
</div>
|
||||
<div class="field">
|
||||
<div class="lbl">Amount (SC)</div>
|
||||
<div class="amt">
|
||||
<input type="text" id="sendAmt" inputmode="decimal" autocomplete="off" placeholder="0.00">
|
||||
<button class="btn sm" id="sendMax" type="button">Max</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="field">
|
||||
<div class="lbl">Fee</div>
|
||||
<div class="fee"><input type="range" id="feeMult" min="1" max="3" step="1" value="1"><span class="v" id="feeLbl">normal</span></div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="summary">
|
||||
<div class="k">Amount</div><div class="v" id="sumAmt">—</div>
|
||||
<div class="k">Network fee</div><div class="v" id="sumFee">—</div>
|
||||
<div class="k">Total</div><div class="v" id="sumTotal">—</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="actions"><button class="btn primary" id="sendBtn" disabled>Send</button></div>
|
||||
<div class="msg" id="sendMsg" hidden></div>
|
||||
</section>
|
||||
<section id="tab-history" hidden>
|
||||
<div id="txlist"></div>
|
||||
</section>
|
||||
<section id="tab-settings" hidden>
|
||||
<div class="field">
|
||||
<div class="lbl">walletd node URL</div>
|
||||
<input type="text" id="setUrl" spellcheck="false" placeholder="https://host[:port]">
|
||||
<div class="hint" id="urlHint">Any walletd (v2) with index mode "full". Hosted providers put your access key in the path; it is stored locally only.</div>
|
||||
</div>
|
||||
<div class="actions">
|
||||
<button class="btn primary" id="applySettings">Apply</button>
|
||||
<button class="btn" id="refreshBtn">Rescan</button>
|
||||
</div>
|
||||
<div class="card" style="margin-top:16px">
|
||||
<div class="lbl">Recovery info</div>
|
||||
<div class="hint">Keys come from your Theseus password vault under <span class="mono">silentmode/addons/siawallet/mainnet/0</span>, using walletd's per-index key scheme. The same vault seed on another machine recreates this wallet.</div>
|
||||
<div class="kv" id="recovery"></div>
|
||||
<div class="actions">
|
||||
<button class="btn" id="showInfo">Show derivation</button>
|
||||
<button class="btn danger" id="showSeed">Show wallet seed</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card" style="margin-top:16px">
|
||||
<div class="lbl">Connected sites</div>
|
||||
<div class="hint">Sites allowed to read your address, and sites with a payment allowance they can spend without asking. Message signing always asks.</div>
|
||||
<div id="sites" class="kv"></div>
|
||||
</div>
|
||||
<div class="msg err" id="settingsMsg" hidden></div>
|
||||
</section>
|
||||
</div>
|
||||
</main>
|
||||
<script src="qr.js"></script>
|
||||
<script src="panel.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
2703
chrome.html
2703
chrome.html
File diff suppressed because it is too large
Load diff
506
error.html
506
error.html
|
|
@ -1,253 +1,253 @@
|
|||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Load error</title>
|
||||
<style>
|
||||
:root { color-scheme: light dark;
|
||||
--bg:#0b0e14; --panel:#141a24; --panel2:#18202c; --line:rgba(255,255,255,.09);
|
||||
--ink:#e7eaf1; --mut:#8b98a9; --dim:#5e6678; --acid:#d6ff3d;
|
||||
--warn:#ffc75f; --err:#f6768a; --info:#4b7bec; }
|
||||
@media (prefers-color-scheme: light) {
|
||||
:root { --bg:#f6f8fb; --panel:#ffffff; --panel2:#f0f4f9; --line:rgba(0,0,0,.10);
|
||||
--ink:#1a1f2b; --mut:#5c6577; --dim:#8a93a5;
|
||||
/* Darker acid for light backgrounds — ~5.5:1 on white. */
|
||||
--acid: #0AC18E; }
|
||||
}
|
||||
* { box-sizing: border-box }
|
||||
html, body { margin: 0; height: 100% }
|
||||
body {
|
||||
background: radial-gradient(1100px 560px at 50% -12%, #16202e, var(--bg));
|
||||
color: var(--ink); font: 15px/1.6 system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
|
||||
display: grid; place-items: center; padding: 2rem 1.2rem;
|
||||
}
|
||||
.card { max-width: 640px; width: 100%; background: var(--panel); border: 1px solid var(--line);
|
||||
border-radius: 14px; padding: 2rem 2.2rem 1.7rem; }
|
||||
.head { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 1rem; }
|
||||
.icon { width: 42px; height: 42px; flex: none; border-radius: 10px; display: grid; place-items: center;
|
||||
font-size: 22px; background: rgba(246,118,138,.10); }
|
||||
.icon.warn { background: rgba(255,199,95,.10) }
|
||||
.icon.info { background: rgba(75,123,236,.10) }
|
||||
h1 { font-size: 1.15rem; font-weight: 600; margin: .1rem 0 .1rem; letter-spacing: .1px }
|
||||
.sub { color: var(--mut); font-size: 13.5px; margin: 0; }
|
||||
.body { color: var(--ink); font-size: 14px; line-height: 1.62; margin: 1rem 0 .6rem; }
|
||||
.body b { color: var(--acid); }
|
||||
.body .host { font-family: ui-monospace, monospace; background: var(--panel2); padding: 1px 6px;
|
||||
border-radius: 5px; color: var(--acid); word-break: break-all; }
|
||||
.tried { margin: 1rem 0 0; padding: 12px 14px; background: var(--panel2);
|
||||
border: 1px dashed var(--line); border-radius: 10px; font-size: 12.5px; color: var(--mut); }
|
||||
.tried .t { display: flex; gap: 8px; align-items: center; padding: 3px 0; }
|
||||
.tried .t .m { width: 12px; text-align: center; color: var(--err); }
|
||||
.tried .t .m.ok { color: var(--acid) }
|
||||
.suggest { margin: 1rem 0 0; padding: 12px 14px; background: var(--panel2);
|
||||
border: 1px solid rgba(214,255,61,.25); border-radius: 10px; font-size: 13px; color: var(--ink); }
|
||||
.suggest .lbl { color: var(--mut); font-size: 12px; margin-bottom: 6px; }
|
||||
.suggest .row { display: flex; flex-wrap: wrap; gap: 6px 8px; }
|
||||
.suggest a { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 6px;
|
||||
background: var(--panel); border: 1px solid var(--line); color: var(--acid);
|
||||
font-family: ui-monospace, monospace; font-size: 12.5px; text-decoration: none; cursor: pointer; }
|
||||
.suggest a:hover { border-color: rgba(214,255,61,.55); filter: brightness(1.05); }
|
||||
.actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 1.3rem; }
|
||||
.btn { font-family: inherit; font-size: 13.5px; padding: 9px 16px; border-radius: 9px;
|
||||
border: 1px solid var(--line); background: var(--panel2); color: var(--ink);
|
||||
cursor: pointer; transition: filter .1s, background .1s, border-color .1s; }
|
||||
.btn:hover { background: var(--panel); border-color: rgba(214,255,61,.35); filter: brightness(1.05); }
|
||||
.btn.primary { background: var(--acid); color: #0b0e14; border-color: transparent; font-weight: 600; }
|
||||
.btn.primary:hover { background: var(--acid); filter: brightness(1.08); }
|
||||
.details { margin-top: 1.2rem; padding-top: .9rem; border-top: 1px solid var(--line);
|
||||
font: 11.5px/1.55 ui-monospace, monospace; color: var(--dim); }
|
||||
.details .row { display: grid; grid-template-columns: 78px 1fr; gap: 8px; }
|
||||
.details .row b { color: var(--mut); font-weight: 500; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="card">
|
||||
<div class="head">
|
||||
<div class="icon" id="icon">✕</div>
|
||||
<div>
|
||||
<h1 id="title">Couldn't load this page</h1>
|
||||
<p class="sub" id="sub">The tab kept its address so you can edit and try again.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="body" id="body"></div>
|
||||
|
||||
<div class="tried" id="tried" hidden>
|
||||
<div class="t"><span class="m">✕</span> <span>Bitcoin Cash Domain Names (BCDN) — no record on chain</span></div>
|
||||
<div class="t"><span class="m">✕</span> <span>Clearnet DNS — no host at this name either</span></div>
|
||||
</div>
|
||||
|
||||
<div class="suggest" id="suggest" hidden>
|
||||
<div class="lbl">Did you mean</div>
|
||||
<div class="row" id="suggestRow"></div>
|
||||
</div>
|
||||
|
||||
<div class="actions" id="actions"></div>
|
||||
|
||||
<div class="details">
|
||||
<div class="row"><b>URL</b><span id="dUrl"></span></div>
|
||||
<div class="row"><b>Error</b><span id="dErr"></span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
const q = new URLSearchParams(location.search);
|
||||
let kind = q.get("kind") || "generic"; // offline | name-not-registered | name-unreachable | unreachable | tls | generic
|
||||
const host = q.get("host") || "";
|
||||
const url = q.get("url") || "";
|
||||
const code = q.get("code") || "";
|
||||
const desc = q.get("desc") || "";
|
||||
|
||||
// Offline is a special case: if the browser process itself has no
|
||||
// network, every load will fail here and we'd otherwise mis-report
|
||||
// BCNR-eligible names as "not registered" (we couldn't reach the
|
||||
// beacon to know). Detect it up front so the user sees a clear
|
||||
// "you're offline" instead of a false verdict about the name.
|
||||
if (typeof navigator !== "undefined" && navigator.onLine === false) kind = "offline";
|
||||
|
||||
const $ = (id) => document.getElementById(id);
|
||||
const el = (tag, cls, txt) => { const e = document.createElement(tag); if (cls) e.className = cls; if (txt != null) e.textContent = txt; return e; };
|
||||
const hostSpan = (h) => { const s = el("span", "host"); s.textContent = h || "(no host)"; return s; };
|
||||
|
||||
document.title = host ? "Error — " + host : "Load error";
|
||||
$("dUrl").textContent = url || "(none)";
|
||||
$("dErr").textContent = (code ? code + " " : "") + (desc || "");
|
||||
|
||||
// Kind → title, subtitle, body, actions.
|
||||
const configs = {
|
||||
"offline": {
|
||||
icon: "⌀", iconCls: "info",
|
||||
title: "You appear to be offline",
|
||||
sub: "No network connection detected",
|
||||
body: (b) => {
|
||||
b.append("This browser can't reach the network. Wi-Fi may be off, the cable may be unplugged, or a VPN / proxy may be dropping traffic. ");
|
||||
b.append("Reconnect and press ");
|
||||
const kbd = document.createElement("b"); kbd.textContent = "Retry"; b.append(kbd);
|
||||
b.append(".");
|
||||
if (host) {
|
||||
b.append(document.createElement("br"));
|
||||
b.append(document.createElement("br"));
|
||||
b.append("Trying to open ");
|
||||
b.append(hostSpan(host));
|
||||
b.append(" — the address is kept so you can retry once you're back online.");
|
||||
}
|
||||
},
|
||||
actions: ["retry", "home"],
|
||||
},
|
||||
"name-not-registered": {
|
||||
icon: "?", iconCls: "warn",
|
||||
title: "That name isn't registered",
|
||||
sub: "No BCDN record on chain, and no clearnet host at " + host,
|
||||
body: (b) => {
|
||||
b.append("Nothing answered when we asked for ");
|
||||
b.append(hostSpan(host));
|
||||
b.append(". Bitcoin Cash Domain Names had no record for it, and ordinary DNS has no host at that name either.");
|
||||
b.append(document.createElement("br"));
|
||||
b.append(document.createElement("br"));
|
||||
b.append("If it's supposed to be yours, register it on the chain. If you were guessing, try a search instead.");
|
||||
},
|
||||
tried: true,
|
||||
actions: ["register", "search", "retry", "home"],
|
||||
},
|
||||
"name-unreachable": {
|
||||
icon: "⌘", iconCls: "warn",
|
||||
title: "This name didn't resolve",
|
||||
sub: "Your DNS resolver didn't know " + host,
|
||||
body: (b) => {
|
||||
b.append("We couldn't turn ");
|
||||
b.append(hostSpan(host));
|
||||
b.append(" into an address. Your network's resolver may be blocking it, offline, or the name simply doesn't exist. BCDN was tried first — if the host is a BCDN name, it's not registered on the chain either.");
|
||||
},
|
||||
actions: ["retry", "search", "register", "home"],
|
||||
},
|
||||
"unreachable": {
|
||||
icon: "✕", iconCls: "",
|
||||
title: "This site is unreachable",
|
||||
sub: host ? ("Couldn't connect to " + host) : "The server didn't respond",
|
||||
body: (b) => {
|
||||
b.append("The name resolved, but the server at ");
|
||||
b.append(hostSpan(host));
|
||||
b.append(" didn't answer. It may be down, blocking your network, or reachable only through Tor.");
|
||||
},
|
||||
actions: ["retry", "tor-hint", "home"],
|
||||
},
|
||||
"tls": {
|
||||
icon: "!", iconCls: "warn",
|
||||
title: "The site's certificate isn't trustworthy",
|
||||
sub: host ? ("HTTPS handshake with " + host + " failed") : "Certificate error",
|
||||
body: (b) => {
|
||||
b.append("The server at ");
|
||||
b.append(hostSpan(host));
|
||||
b.append(" presented a certificate the browser couldn't verify. This can mean the certificate has expired, doesn't match the hostname, was self-signed, or that someone is intercepting the connection.");
|
||||
},
|
||||
actions: ["retry", "home"],
|
||||
},
|
||||
"generic": {
|
||||
icon: "✕", iconCls: "",
|
||||
title: "Couldn't load this page",
|
||||
sub: host ? ("Something went wrong loading " + host) : "Load failed",
|
||||
body: (b) => {
|
||||
b.append("Something interrupted the load of ");
|
||||
b.append(hostSpan(host));
|
||||
b.append(". Details are at the bottom of this page.");
|
||||
},
|
||||
actions: ["retry", "home"],
|
||||
},
|
||||
};
|
||||
const c = configs[kind] || configs.generic;
|
||||
$("icon").textContent = c.icon;
|
||||
$("icon").className = "icon" + (c.iconCls ? " " + c.iconCls : "");
|
||||
$("title").textContent = c.title;
|
||||
$("sub").textContent = c.sub;
|
||||
c.body($("body"));
|
||||
if (c.tried) $("tried").hidden = false;
|
||||
|
||||
// Actions — order matters (first is primary). "register" only when we can
|
||||
// construct a Sirius URL (need a host).
|
||||
const btnDefs = {
|
||||
retry: { label: "Retry", primary: true, fn: () => window.errorpage.retry(url) },
|
||||
search: { label: "Search for '" + host + "'", primary: false, fn: () => window.errorpage.searchFor(host) },
|
||||
register: { label: "Register on Sirius", primary: false, fn: () => window.errorpage.registerOnSirius(host) },
|
||||
home: { label: "Home", primary: false, fn: () => window.errorpage.goHome() },
|
||||
"tor-hint": {
|
||||
label: "Open Tor guide", primary: false,
|
||||
fn: () => window.errorpage.openExternal("https://silentmode.st/tools/#tor"),
|
||||
},
|
||||
};
|
||||
const actionsBox = $("actions");
|
||||
let primaryUsed = false;
|
||||
for (const a of c.actions) {
|
||||
const def = btnDefs[a]; if (!def) continue;
|
||||
if (a === "register" && !host) continue;
|
||||
if (a === "search" && !host) continue;
|
||||
const b = el("button", "btn" + (def.primary && !primaryUsed ? " primary" : ""), def.label);
|
||||
if (def.primary) primaryUsed = true;
|
||||
b.addEventListener("click", def.fn);
|
||||
actionsBox.appendChild(b);
|
||||
}
|
||||
|
||||
// "Did you mean" — for BCNR-name failures, ask main for near-matches in
|
||||
// the warm shared index (Levenshtein ≤ 2, same TLD). No network — the
|
||||
// index is local, so this works offline too. Clicking a suggestion
|
||||
// retries the load at that host, preserving the original path if any.
|
||||
if ((kind === "name-not-registered" || kind === "name-unreachable") && host && window.errorpage?.bnsSimilar) {
|
||||
window.errorpage.bnsSimilar(host).then((matches) => {
|
||||
if (!Array.isArray(matches) || !matches.length) return;
|
||||
const row = $("suggestRow");
|
||||
let origPath = "/";
|
||||
try { const u = new URL(url); origPath = u.pathname + u.search + u.hash; } catch {}
|
||||
for (const name of matches) {
|
||||
const a = el("a", null, name);
|
||||
a.href = "#";
|
||||
a.addEventListener("click", (ev) => {
|
||||
ev.preventDefault();
|
||||
window.errorpage.retry("https://" + name + origPath);
|
||||
});
|
||||
row.appendChild(a);
|
||||
}
|
||||
$("suggest").hidden = false;
|
||||
}).catch(() => {});
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Load error</title>
|
||||
<style>
|
||||
:root { color-scheme: light dark;
|
||||
--bg:#0b0e14; --panel:#141a24; --panel2:#18202c; --line:rgba(255,255,255,.09);
|
||||
--ink:#e7eaf1; --mut:#8b98a9; --dim:#5e6678; --acid:#d6ff3d;
|
||||
--warn:#ffc75f; --err:#f6768a; --info:#4b7bec; }
|
||||
@media (prefers-color-scheme: light) {
|
||||
:root { --bg:#f6f8fb; --panel:#ffffff; --panel2:#f0f4f9; --line:rgba(0,0,0,.10);
|
||||
--ink:#1a1f2b; --mut:#5c6577; --dim:#8a93a5;
|
||||
/* Darker acid for light backgrounds — ~5.5:1 on white. */
|
||||
--acid: #0AC18E; }
|
||||
}
|
||||
* { box-sizing: border-box }
|
||||
html, body { margin: 0; height: 100% }
|
||||
body {
|
||||
background: radial-gradient(1100px 560px at 50% -12%, #16202e, var(--bg));
|
||||
color: var(--ink); font: 15px/1.6 system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
|
||||
display: grid; place-items: center; padding: 2rem 1.2rem;
|
||||
}
|
||||
.card { max-width: 640px; width: 100%; background: var(--panel); border: 1px solid var(--line);
|
||||
border-radius: 14px; padding: 2rem 2.2rem 1.7rem; }
|
||||
.head { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 1rem; }
|
||||
.icon { width: 42px; height: 42px; flex: none; border-radius: 10px; display: grid; place-items: center;
|
||||
font-size: 22px; background: rgba(246,118,138,.10); }
|
||||
.icon.warn { background: rgba(255,199,95,.10) }
|
||||
.icon.info { background: rgba(75,123,236,.10) }
|
||||
h1 { font-size: 1.15rem; font-weight: 600; margin: .1rem 0 .1rem; letter-spacing: .1px }
|
||||
.sub { color: var(--mut); font-size: 13.5px; margin: 0; }
|
||||
.body { color: var(--ink); font-size: 14px; line-height: 1.62; margin: 1rem 0 .6rem; }
|
||||
.body b { color: var(--acid); }
|
||||
.body .host { font-family: ui-monospace, monospace; background: var(--panel2); padding: 1px 6px;
|
||||
border-radius: 5px; color: var(--acid); word-break: break-all; }
|
||||
.tried { margin: 1rem 0 0; padding: 12px 14px; background: var(--panel2);
|
||||
border: 1px dashed var(--line); border-radius: 10px; font-size: 12.5px; color: var(--mut); }
|
||||
.tried .t { display: flex; gap: 8px; align-items: center; padding: 3px 0; }
|
||||
.tried .t .m { width: 12px; text-align: center; color: var(--err); }
|
||||
.tried .t .m.ok { color: var(--acid) }
|
||||
.suggest { margin: 1rem 0 0; padding: 12px 14px; background: var(--panel2);
|
||||
border: 1px solid rgb(from var(--acid) r g b / .25); border-radius: 10px; font-size: 13px; color: var(--ink); }
|
||||
.suggest .lbl { color: var(--mut); font-size: 12px; margin-bottom: 6px; }
|
||||
.suggest .row { display: flex; flex-wrap: wrap; gap: 6px 8px; }
|
||||
.suggest a { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 6px;
|
||||
background: var(--panel); border: 1px solid var(--line); color: var(--acid);
|
||||
font-family: ui-monospace, monospace; font-size: 12.5px; text-decoration: none; cursor: pointer; }
|
||||
.suggest a:hover { border-color: rgb(from var(--acid) r g b / .55); filter: brightness(1.05); }
|
||||
.actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 1.3rem; }
|
||||
.btn { font-family: inherit; font-size: 13.5px; padding: 9px 16px; border-radius: 9px;
|
||||
border: 1px solid var(--line); background: var(--panel2); color: var(--ink);
|
||||
cursor: pointer; transition: filter .1s, background .1s, border-color .1s; }
|
||||
.btn:hover { background: var(--panel); border-color: rgb(from var(--acid) r g b / .35); filter: brightness(1.05); }
|
||||
.btn.primary { background: var(--acid); color: #0b0e14; border-color: transparent; font-weight: 600; }
|
||||
.btn.primary:hover { background: var(--acid); filter: brightness(1.08); }
|
||||
.details { margin-top: 1.2rem; padding-top: .9rem; border-top: 1px solid var(--line);
|
||||
font: 11.5px/1.55 ui-monospace, monospace; color: var(--dim); }
|
||||
.details .row { display: grid; grid-template-columns: 78px 1fr; gap: 8px; }
|
||||
.details .row b { color: var(--mut); font-weight: 500; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="card">
|
||||
<div class="head">
|
||||
<div class="icon" id="icon">✕</div>
|
||||
<div>
|
||||
<h1 id="title">Couldn't load this page</h1>
|
||||
<p class="sub" id="sub">The tab kept its address so you can edit and try again.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="body" id="body"></div>
|
||||
|
||||
<div class="tried" id="tried" hidden>
|
||||
<div class="t"><span class="m">✕</span> <span>Bitcoin Cash Domain Names (BCDN) — no record on chain</span></div>
|
||||
<div class="t"><span class="m">✕</span> <span>Clearnet DNS — no host at this name either</span></div>
|
||||
</div>
|
||||
|
||||
<div class="suggest" id="suggest" hidden>
|
||||
<div class="lbl">Did you mean</div>
|
||||
<div class="row" id="suggestRow"></div>
|
||||
</div>
|
||||
|
||||
<div class="actions" id="actions"></div>
|
||||
|
||||
<div class="details">
|
||||
<div class="row"><b>URL</b><span id="dUrl"></span></div>
|
||||
<div class="row"><b>Error</b><span id="dErr"></span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
const q = new URLSearchParams(location.search);
|
||||
let kind = q.get("kind") || "generic"; // offline | name-not-registered | name-unreachable | unreachable | tls | generic
|
||||
const host = q.get("host") || "";
|
||||
const url = q.get("url") || "";
|
||||
const code = q.get("code") || "";
|
||||
const desc = q.get("desc") || "";
|
||||
|
||||
// Offline is a special case: if the browser process itself has no
|
||||
// network, every load will fail here and we'd otherwise mis-report
|
||||
// BCNR-eligible names as "not registered" (we couldn't reach the
|
||||
// beacon to know). Detect it up front so the user sees a clear
|
||||
// "you're offline" instead of a false verdict about the name.
|
||||
if (typeof navigator !== "undefined" && navigator.onLine === false) kind = "offline";
|
||||
|
||||
const $ = (id) => document.getElementById(id);
|
||||
const el = (tag, cls, txt) => { const e = document.createElement(tag); if (cls) e.className = cls; if (txt != null) e.textContent = txt; return e; };
|
||||
const hostSpan = (h) => { const s = el("span", "host"); s.textContent = h || "(no host)"; return s; };
|
||||
|
||||
document.title = host ? "Error — " + host : "Load error";
|
||||
$("dUrl").textContent = url || "(none)";
|
||||
$("dErr").textContent = (code ? code + " " : "") + (desc || "");
|
||||
|
||||
// Kind → title, subtitle, body, actions.
|
||||
const configs = {
|
||||
"offline": {
|
||||
icon: "⌀", iconCls: "info",
|
||||
title: "You appear to be offline",
|
||||
sub: "No network connection detected",
|
||||
body: (b) => {
|
||||
b.append("This browser can't reach the network. Wi-Fi may be off, the cable may be unplugged, or a VPN / proxy may be dropping traffic. ");
|
||||
b.append("Reconnect and press ");
|
||||
const kbd = document.createElement("b"); kbd.textContent = "Retry"; b.append(kbd);
|
||||
b.append(".");
|
||||
if (host) {
|
||||
b.append(document.createElement("br"));
|
||||
b.append(document.createElement("br"));
|
||||
b.append("Trying to open ");
|
||||
b.append(hostSpan(host));
|
||||
b.append(" — the address is kept so you can retry once you're back online.");
|
||||
}
|
||||
},
|
||||
actions: ["retry", "home"],
|
||||
},
|
||||
"name-not-registered": {
|
||||
icon: "?", iconCls: "warn",
|
||||
title: "That name isn't registered",
|
||||
sub: "No BCDN record on chain, and no clearnet host at " + host,
|
||||
body: (b) => {
|
||||
b.append("Nothing answered when we asked for ");
|
||||
b.append(hostSpan(host));
|
||||
b.append(". Bitcoin Cash Domain Names had no record for it, and ordinary DNS has no host at that name either.");
|
||||
b.append(document.createElement("br"));
|
||||
b.append(document.createElement("br"));
|
||||
b.append("If it's supposed to be yours, register it on the chain. If you were guessing, try a search instead.");
|
||||
},
|
||||
tried: true,
|
||||
actions: ["register", "search", "retry", "home"],
|
||||
},
|
||||
"name-unreachable": {
|
||||
icon: "⌘", iconCls: "warn",
|
||||
title: "This name didn't resolve",
|
||||
sub: "Your DNS resolver didn't know " + host,
|
||||
body: (b) => {
|
||||
b.append("We couldn't turn ");
|
||||
b.append(hostSpan(host));
|
||||
b.append(" into an address. Your network's resolver may be blocking it, offline, or the name simply doesn't exist. BCDN was tried first — if the host is a BCDN name, it's not registered on the chain either.");
|
||||
},
|
||||
actions: ["retry", "search", "register", "home"],
|
||||
},
|
||||
"unreachable": {
|
||||
icon: "✕", iconCls: "",
|
||||
title: "This site is unreachable",
|
||||
sub: host ? ("Couldn't connect to " + host) : "The server didn't respond",
|
||||
body: (b) => {
|
||||
b.append("The name resolved, but the server at ");
|
||||
b.append(hostSpan(host));
|
||||
b.append(" didn't answer. It may be down, blocking your network, or reachable only through Tor.");
|
||||
},
|
||||
actions: ["retry", "tor-hint", "home"],
|
||||
},
|
||||
"tls": {
|
||||
icon: "!", iconCls: "warn",
|
||||
title: "The site's certificate isn't trustworthy",
|
||||
sub: host ? ("HTTPS handshake with " + host + " failed") : "Certificate error",
|
||||
body: (b) => {
|
||||
b.append("The server at ");
|
||||
b.append(hostSpan(host));
|
||||
b.append(" presented a certificate the browser couldn't verify. This can mean the certificate has expired, doesn't match the hostname, was self-signed, or that someone is intercepting the connection.");
|
||||
},
|
||||
actions: ["retry", "home"],
|
||||
},
|
||||
"generic": {
|
||||
icon: "✕", iconCls: "",
|
||||
title: "Couldn't load this page",
|
||||
sub: host ? ("Something went wrong loading " + host) : "Load failed",
|
||||
body: (b) => {
|
||||
b.append("Something interrupted the load of ");
|
||||
b.append(hostSpan(host));
|
||||
b.append(". Details are at the bottom of this page.");
|
||||
},
|
||||
actions: ["retry", "home"],
|
||||
},
|
||||
};
|
||||
const c = configs[kind] || configs.generic;
|
||||
$("icon").textContent = c.icon;
|
||||
$("icon").className = "icon" + (c.iconCls ? " " + c.iconCls : "");
|
||||
$("title").textContent = c.title;
|
||||
$("sub").textContent = c.sub;
|
||||
c.body($("body"));
|
||||
if (c.tried) $("tried").hidden = false;
|
||||
|
||||
// Actions — order matters (first is primary). "register" only when we can
|
||||
// construct a Sirius URL (need a host).
|
||||
const btnDefs = {
|
||||
retry: { label: "Retry", primary: true, fn: () => window.errorpage.retry(url) },
|
||||
search: { label: "Search for '" + host + "'", primary: false, fn: () => window.errorpage.searchFor(host) },
|
||||
register: { label: "Register on Sirius", primary: false, fn: () => window.errorpage.registerOnSirius(host) },
|
||||
home: { label: "Home", primary: false, fn: () => window.errorpage.goHome() },
|
||||
"tor-hint": {
|
||||
label: "Open Tor guide", primary: false,
|
||||
fn: () => window.errorpage.openExternal("https://silentmode.st/tools/#tor"),
|
||||
},
|
||||
};
|
||||
const actionsBox = $("actions");
|
||||
let primaryUsed = false;
|
||||
for (const a of c.actions) {
|
||||
const def = btnDefs[a]; if (!def) continue;
|
||||
if (a === "register" && !host) continue;
|
||||
if (a === "search" && !host) continue;
|
||||
const b = el("button", "btn" + (def.primary && !primaryUsed ? " primary" : ""), def.label);
|
||||
if (def.primary) primaryUsed = true;
|
||||
b.addEventListener("click", def.fn);
|
||||
actionsBox.appendChild(b);
|
||||
}
|
||||
|
||||
// "Did you mean" — for BCNR-name failures, ask main for near-matches in
|
||||
// the warm shared index (Levenshtein ≤ 2, same TLD). No network — the
|
||||
// index is local, so this works offline too. Clicking a suggestion
|
||||
// retries the load at that host, preserving the original path if any.
|
||||
if ((kind === "name-not-registered" || kind === "name-unreachable") && host && window.errorpage?.bnsSimilar) {
|
||||
window.errorpage.bnsSimilar(host).then((matches) => {
|
||||
if (!Array.isArray(matches) || !matches.length) return;
|
||||
const row = $("suggestRow");
|
||||
let origPath = "/";
|
||||
try { const u = new URL(url); origPath = u.pathname + u.search + u.hash; } catch {}
|
||||
for (const name of matches) {
|
||||
const a = el("a", null, name);
|
||||
a.href = "#";
|
||||
a.addEventListener("click", (ev) => {
|
||||
ev.preventDefault();
|
||||
window.errorpage.retry("https://" + name + origPath);
|
||||
});
|
||||
row.appendChild(a);
|
||||
}
|
||||
$("suggest").hidden = false;
|
||||
}).catch(() => {});
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
580
home.html
580
home.html
|
|
@ -1,290 +1,290 @@
|
|||
<!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: #0AC18E; }
|
||||
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" 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);
|
||||
// Fallback if the preload didn't bind (shouldn't happen). Startpage
|
||||
// over DuckDuckGo since that's Theseus's own default engine now.
|
||||
else window.location.href = "https://www.startpage.com/do/search?q=" + encodeURIComponent(q);
|
||||
});
|
||||
// Populate placeholder with the user's current default engine name so
|
||||
// "Search the web with <engine>" reflects reality. Silently no-ops if
|
||||
// the preload or IPC isn't available (dev-open of home.html in a plain
|
||||
// Chromium tab). Also refreshes on onEngines events would be nice but
|
||||
// main only broadcasts `engines` to chrome — home only queries at load,
|
||||
// which is fine because switching engines is a settings action that
|
||||
// usually implies a reload of the tab shortly after.
|
||||
if (window.home && window.home.getEngines) {
|
||||
window.home.getEngines().then((r) => {
|
||||
const name = r && r.engines && r.engines.find((x) => x.id === r.current)?.name;
|
||||
if (name) $("q").placeholder = "Search the web with " + name;
|
||||
}).catch(() => {});
|
||||
}
|
||||
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>
|
||||
<!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: rgb(from var(--acid) r g b / .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 rgb(from var(--acid) r g b / .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: rgb(from var(--acid) r g b / .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: rgb(from var(--acid) r g b / .10); color: var(--acid); }
|
||||
.b-navigator { background: rgba(75,123,236,.14); color: #7ea3ff; }
|
||||
.b-registrar { background: rgb(from var(--acid) r g b / .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: rgb(from var(--acid) r g b / .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: #0AC18E; }
|
||||
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" 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);
|
||||
// Fallback if the preload didn't bind (shouldn't happen). Startpage
|
||||
// over DuckDuckGo since that's Theseus's own default engine now.
|
||||
else window.location.href = "https://www.startpage.com/do/search?q=" + encodeURIComponent(q);
|
||||
});
|
||||
// Populate placeholder with the user's current default engine name so
|
||||
// "Search the web with <engine>" reflects reality. Silently no-ops if
|
||||
// the preload or IPC isn't available (dev-open of home.html in a plain
|
||||
// Chromium tab). Also refreshes on onEngines events would be nice but
|
||||
// main only broadcasts `engines` to chrome — home only queries at load,
|
||||
// which is fine because switching engines is a settings action that
|
||||
// usually implies a reload of the tab shortly after.
|
||||
if (window.home && window.home.getEngines) {
|
||||
window.home.getEngines().then((r) => {
|
||||
const name = r && r.engines && r.engines.find((x) => x.id === r.current)?.name;
|
||||
if (name) $("q").placeholder = "Search the web with " + name;
|
||||
}).catch(() => {});
|
||||
}
|
||||
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>
|
||||
|
|
|
|||
2268
settings.html
2268
settings.html
File diff suppressed because it is too large
Load diff
Loading…
Add table
Reference in a new issue