48 lines
3.1 KiB
HTML
48 lines
3.1 KiB
HTML
|
<!doctype html>
|
||
|
|
<html><head><meta charset="utf-8">
|
||
|
|
<style>
|
||
|
|
:root { color-scheme: dark; font-family: system-ui, sans-serif; }
|
||
|
|
html, body { margin: 0; height: 100%; background: transparent; }
|
||
|
|
.card { height: 100%; display: flex; flex-direction: column; background: #141b28;
|
||
|
|
border: 1px solid #ffffff24; border-radius: 10px; box-shadow: 0 12px 34px #000b; overflow: hidden; }
|
||
|
|
.head { display: flex; align-items: center; justify-content: space-between; padding: 8px 12px;
|
||
|
|
border-bottom: 1px solid #ffffff12; font-size: 12px; color: #b9c2d0; }
|
||
|
|
.head .x { border: none; background: transparent; color: #8b98a9; cursor: pointer; font-size: 13px; border-radius: 5px; padding: 1px 6px; }
|
||
|
|
.head .x:hover { background: #ffffff14; color: #fff; }
|
||
|
|
.body { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; padding: 11px 14px; font-size: 12px; overflow-y: auto; }
|
||
|
|
.k { color: #7f8aa0; } .v { color: #e7eaf1; }
|
||
|
|
.v code { font-family: ui-monospace, monospace; color: #bfeae4; word-break: break-all; }
|
||
|
|
.dotv { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #5e6678; margin-right: 6px; }
|
||
|
|
.dotv.chain { background: #d6ff3d; } .dotv.sia { background: #b39ddb; }
|
||
|
|
.dotv.server { background: #4fd1a5; } .dotv.web { background: #8b93a7; } .dotv.err { background: #f6768a; }
|
||
|
|
</style></head>
|
||
|
|
<body>
|
||
|
|
<div class="card">
|
||
|
|
<div class="head"><span>Site information</span><button class="x" id="x" title="Close">✕</button></div>
|
||
|
|
<div class="body" id="body"></div>
|
||
|
|
</div>
|
||
|
|
<script>
|
||
|
|
const $ = (id) => document.getElementById(id);
|
||
|
|
$("x").onclick = () => window.pop.close();
|
||
|
|
const esc = (s) => String(s || "").replace(/</g, "<");
|
||
|
|
const row = (k, v) => `<span class="k">${k}</span><span class="v">${v}</span>`;
|
||
|
|
window.pop.onData((d) => {
|
||
|
|
let html = "";
|
||
|
|
if (!d || d.kind === "home") html = row("Page", "Theseus home");
|
||
|
|
else if (d.kind === "web") html = row("Site", `<span class="dotv web"></span><code>${esc(d.host)}</code>`) + row("Resolved via", "ICANN DNS (web)") + row("Registry", "ICANN");
|
||
|
|
else if (d.kind === "resolving") html = row("Site", `<code>${esc(d.host)}</code>`) + row("Status", "resolving on the BCH chain…");
|
||
|
|
else if (d.kind === "nxdomain") html = row("Name", `<span class="dotv err"></span><code>${esc(d.host)}</code>`) + row("Status", "not registered (NXDOMAIN)");
|
||
|
|
else if (d.kind === "error") html = row("Status", `<span class="dotv err"></span>${esc(d.error || "resolution failed")}`);
|
||
|
|
else {
|
||
|
|
const cls = (d.source || "").includes("chain") ? "chain" : (d.source || "").includes("Sia") ? "sia" : (d.source || "").includes("server") ? "server" : "web";
|
||
|
|
html = row("Site", `<span class="dotv ${cls}"></span><code>${esc(d.host)}</code>`) +
|
||
|
|
row("Served from", esc(d.source) || "chain") +
|
||
|
|
row("Registry", (d.registry || "BCNR") + (d.tld ? " · ." + d.tld : "")) +
|
||
|
|
(d.records && d.records.length ? row("Records", `<code>${esc(d.records.join(", "))}</code>`) : "") +
|
||
|
|
(d.category ? row("Certificate", `<code>${esc(String(d.category).slice(0, 24))}…</code>`) : "");
|
||
|
|
}
|
||
|
|
$("body").innerHTML = html;
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
</body></html>
|