404 lines
22 KiB
HTML
404 lines
22 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
|
|
<meta http-equiv="Pragma" content="no-cache">
|
|
<meta http-equiv="Expires" content="0">
|
|
<title>Cuprate Node - Archipelago</title>
|
|
<style>
|
|
* { margin: 0; padding: 0; box-sizing: border-box; }
|
|
|
|
body {
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', sans-serif;
|
|
min-height: 100vh;
|
|
background: #000;
|
|
color: white;
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
.bg-layer {
|
|
position: fixed;
|
|
inset: 0;
|
|
z-index: -10;
|
|
background-image: url('assets/img/bg-network.jpg');
|
|
background-size: cover;
|
|
background-position: center;
|
|
opacity: .42;
|
|
}
|
|
|
|
.glass-card {
|
|
position: relative;
|
|
background: rgba(0, 0, 0, 0.60);
|
|
backdrop-filter: blur(24px);
|
|
-webkit-backdrop-filter: blur(24px);
|
|
box-shadow:
|
|
0 8px 24px rgba(0, 0, 0, 0.45),
|
|
inset 0 1px 0 rgba(255, 255, 255, 0.22);
|
|
border-radius: 1rem;
|
|
padding: 1.5rem;
|
|
}
|
|
|
|
.glass-button {
|
|
background-color: rgba(0, 0, 0, 0.6);
|
|
backdrop-filter: blur(18px);
|
|
border: 1px solid rgba(255, 255, 255, 0.18);
|
|
color: rgba(255, 255, 255, 0.9);
|
|
border-radius: 0.5rem;
|
|
padding: 0.4rem 0.9rem;
|
|
font-size: 0.8rem;
|
|
cursor: pointer;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.glass-button:hover { color: white; background-color: rgba(0, 0, 0, 0.7); }
|
|
|
|
.wrap { max-width: 1100px; margin: 0 auto; padding: 2rem 1rem 3rem; }
|
|
|
|
/* Match the Bitcoin dashboard's app-header rhythm: identity on the
|
|
left, compact live status cards on the right. */
|
|
.app-header { display:flex; align-items:center; justify-content:space-between; gap:1.5rem; flex-wrap:wrap; }
|
|
.app-header-id { display:flex; align-items:center; gap:1rem; min-width:0; }
|
|
.app-header-actions { display:flex; align-items:center; justify-content:flex-end; gap:.75rem; flex-wrap:wrap; margin-left:auto; }
|
|
.info-card { display:flex; align-items:center; gap:.75rem; background:rgba(0,0,0,.6); backdrop-filter:blur(24px); border-radius:.75rem; padding:.65rem .85rem; box-shadow:inset 0 1px 0 rgba(255,255,255,.16); min-height:3.25rem; }
|
|
.info-card .card-icon { width:1.25rem; height:1.25rem; color:rgba(255,255,255,.6); flex:0 0 auto; }
|
|
.info-card-copy { display:flex; flex-direction:column; gap:.15rem; }
|
|
.info-card-copy .sub { margin:0; font-size:.6875rem; }
|
|
.info-card-copy strong { font-size:.8125rem; font-weight:600; color:rgba(255,255,255,.95); white-space:nowrap; }
|
|
.node-mark { width:3.25rem; height:3.25rem; border-radius:.85rem; display:grid; place-items:center; background:#050505; border:1px solid rgba(255,255,255,.18); box-shadow:0 8px 24px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.2); }
|
|
.tabbar { display:flex; gap:.35rem; padding:.35rem; margin:1.25rem 0; background:rgba(0,0,0,.62); border:1px solid rgba(255,255,255,.12); border-radius:.85rem; overflow-x:auto; }
|
|
.tab-btn { flex:1 0 auto; border:0; border-radius:.6rem; padding:.65rem 1rem; background:transparent; color:rgba(255,255,255,.55); cursor:pointer; font-size:.8rem; font-weight:600; }
|
|
.tab-btn:hover { color:#fff; background:rgba(255,255,255,.06); }
|
|
.tab-btn.active { color:#fff; background:linear-gradient(135deg,rgba(247,147,26,.3),rgba(255,255,255,.08)); box-shadow:inset 0 1px 0 rgba(255,255,255,.15); }
|
|
[data-panel].tab-hidden { display:none; }
|
|
@media (max-width:700px) {
|
|
.wrap { padding:1rem 1rem calc(6.75rem + env(safe-area-inset-bottom, 0px)); }
|
|
.app-header { flex-direction:column; align-items:stretch; gap:1rem; }
|
|
.app-header-id { flex-direction:column; justify-content:center; text-align:center; }
|
|
.app-header-text { text-align:center; }
|
|
.app-header-actions { flex-direction:column; align-items:stretch; justify-content:center; gap:.6rem; margin-left:0; }
|
|
.app-header-actions > .info-card { width:100%; }
|
|
.tabbar { position:fixed; left:.75rem; right:.75rem; bottom:calc(.5rem + env(safe-area-inset-bottom, 0px)); z-index:40; margin:0; padding:.35rem; border-radius:1rem; box-shadow:0 10px 30px rgba(0,0,0,.65); }
|
|
.tab-btn { min-width:4.5rem; padding:.7rem .5rem; font-size:.7rem; }
|
|
}
|
|
|
|
header { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.5rem; }
|
|
header h1 { font-size: 1.6rem; font-weight: 700; letter-spacing: -0.02em; }
|
|
header h1 .accent { color: #f7931a; }
|
|
.sub { color: rgba(255, 255, 255, 0.55); font-size: 0.85rem; margin-top: 0.2rem; }
|
|
|
|
.pill {
|
|
display: inline-flex; align-items: center; gap: 0.45rem;
|
|
padding: 0.35rem 0.8rem; border-radius: 999px;
|
|
font-size: 0.78rem; font-weight: 600;
|
|
border: 1px solid rgba(255, 255, 255, 0.2);
|
|
background: rgba(255, 255, 255, 0.06);
|
|
}
|
|
.dot { width: 8px; height: 8px; border-radius: 50%; background: #777; }
|
|
.dot.online { background: #22c55e; box-shadow: 0 0 8px #22c55e; }
|
|
.dot.syncing { background: #f7931a; box-shadow: 0 0 8px #f7931a; }
|
|
.dot.offline { background: #ef4444; box-shadow: 0 0 8px #ef4444; }
|
|
.pill.online .dot { background: #22c55e; box-shadow: 0 0 8px #22c55e; }
|
|
.pill.syncing .dot { background: #f7931a; box-shadow: 0 0 8px #f7931a; }
|
|
.pill.offline .dot { background: #ef4444; box-shadow: 0 0 8px #ef4444; }
|
|
|
|
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1rem; }
|
|
|
|
.card-title {
|
|
font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em;
|
|
text-transform: uppercase; color: rgba(255, 255, 255, 0.5);
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.stat { display: flex; justify-content: space-between; align-items: baseline; padding: 0.45rem 0; border-bottom: 1px solid rgba(255, 255, 255, 0.07); }
|
|
.stat:last-child { border-bottom: none; }
|
|
.stat .label { color: rgba(255, 255, 255, 0.55); font-size: 0.82rem; }
|
|
.stat .value { font-variant-numeric: tabular-nums; font-weight: 600; font-size: 0.95rem; text-align: right; }
|
|
.stat .value.warn { color: #f7931a; }
|
|
.stat .value.err { color: #ef4444; }
|
|
.stat .value.ok { color: #22c55e; }
|
|
|
|
.height-hero { display: flex; align-items: baseline; gap: 0.6rem; margin-bottom: 0.75rem; }
|
|
.height-hero .big { font-size: 2.4rem; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
|
|
.height-hero .of { color: rgba(255, 255, 255, 0.45); font-size: 1rem; font-variant-numeric: tabular-nums; }
|
|
|
|
.progress { height: 8px; border-radius: 999px; background: rgba(255, 255, 255, 0.1); overflow: hidden; margin: 0.5rem 0 0.35rem; }
|
|
.progress-fill { height: 100%; width: 0%; border-radius: 999px; background: linear-gradient(90deg, #f7931a, #ffc46b); transition: width 0.6s ease; }
|
|
.progress-label { font-size: 0.75rem; color: rgba(255, 255, 255, 0.55); font-variant-numeric: tabular-nums; }
|
|
|
|
.notice {
|
|
margin-top: 1rem; padding: 0.9rem 1.1rem; border-radius: 0.75rem;
|
|
background: rgba(247, 147, 26, 0.08);
|
|
border: 1px solid rgba(247, 147, 26, 0.35);
|
|
font-size: 0.82rem; line-height: 1.5; color: rgba(255, 255, 255, 0.8);
|
|
}
|
|
.notice.error { background: rgba(239, 68, 68, 0.08); border-color: rgba(239, 68, 68, 0.4); }
|
|
.notice b { color: white; }
|
|
|
|
.endpoint {
|
|
display: flex; align-items: center; gap: 0.6rem;
|
|
background: rgba(255, 255, 255, 0.05);
|
|
border: 1px solid rgba(255, 255, 255, 0.12);
|
|
border-radius: 0.5rem; padding: 0.55rem 0.75rem;
|
|
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
|
|
font-size: 0.82rem; overflow-x: auto; white-space: nowrap;
|
|
}
|
|
.hint { font-size: 0.75rem; color: rgba(255, 255, 255, 0.45); margin-top: 0.6rem; line-height: 1.5; }
|
|
|
|
footer { margin-top: 2rem; text-align: center; color: rgba(255, 255, 255, 0.35); font-size: 0.72rem; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="bg-layer"></div>
|
|
<div class="wrap">
|
|
<header class="glass-card" style="padding:1.5rem;">
|
|
<div class="app-header">
|
|
<div class="app-header-id">
|
|
<div class="node-mark"><img src="assets/img/app-icons/cuprate.svg" alt="Cuprate" style="width:2.35rem;height:2.35rem;object-fit:contain"></div>
|
|
<div class="app-header-text">
|
|
<h1><span class="accent">Cuprate</span> Monero Node</h1>
|
|
<div class="sub">Rust implementation of the Monero protocol, on Archipelago</div>
|
|
</div>
|
|
</div>
|
|
<div class="app-header-actions">
|
|
<div class="info-card">
|
|
<div class="relative"><span class="dot" id="headerStatusDot"></span><span class="absolute inset-0 dot animate-ping opacity-50"></span></div>
|
|
<div class="info-card-copy"><div class="sub">Status</div><strong id="statusText">Connecting…</strong></div>
|
|
</div>
|
|
<div class="info-card">
|
|
<svg class="card-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0-3-4.03-3-9s1.343-9 3-9m-9 9a9 9 0 019-9" /></svg>
|
|
<div class="info-card-copy"><div class="sub">Network</div><strong id="headerNetwork">—</strong></div>
|
|
</div>
|
|
<div class="info-card">
|
|
<svg class="card-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 7h16M4 12h16M4 17h16" /></svg>
|
|
<div class="info-card-copy"><div class="sub">Height</div><strong id="headerHeight">—</strong></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<div id="offlineNotice" class="notice error" style="display:none;">
|
|
<b>Cuprate is not reachable.</b> The node may be stopped, still installing, or syncing.
|
|
Check the service status and try again shortly.
|
|
</div>
|
|
|
|
<nav class="tabbar" role="tablist" aria-label="Cuprate dashboard sections">
|
|
<button class="tab-btn active" data-tab="node" role="tab">Node</button>
|
|
<button class="tab-btn" data-tab="insights" role="tab">Insights</button>
|
|
<button class="tab-btn" data-tab="peers" role="tab">Peers</button>
|
|
<button class="tab-btn" data-tab="connect" role="tab">Connect</button>
|
|
</nav>
|
|
|
|
<div class="grid" style="margin-top:1rem;">
|
|
<div class="glass-card" data-panel="node">
|
|
<div class="card-title">Blockchain Sync</div>
|
|
<div class="height-hero">
|
|
<span class="big" id="height">—</span>
|
|
<span class="of" id="targetOf">of —</span>
|
|
</div>
|
|
<div class="progress"><div class="progress-fill" id="syncBar"></div></div>
|
|
<div class="progress-label" id="syncLabel">Waiting for node…</div>
|
|
<div class="stat"><span class="label">Network</span><span class="value" id="nettype">—</span></div>
|
|
<div class="stat"><span class="label">Uptime</span><span class="value" id="uptime">—</span></div>
|
|
<div class="stat"><span class="label">Node time</span><span class="value" id="nodeTime">—</span></div>
|
|
</div>
|
|
|
|
<div class="glass-card tab-hidden" data-panel="peers">
|
|
<div class="card-title">Peers & Traffic</div>
|
|
<div class="stat"><span class="label">Outgoing connections</span><span class="value" id="outConns">—</span></div>
|
|
<div class="stat"><span class="label">Incoming connections</span><span class="value" id="inConns">—</span></div>
|
|
<div class="stat"><span class="label">RPC connections</span><span class="value" id="rpcConns">—</span></div>
|
|
<div class="stat"><span class="label">Known peers (white)</span><span class="value" id="whitePeers">—</span></div>
|
|
<div class="stat"><span class="label">Known peers (gray)</span><span class="value" id="grayPeers">—</span></div>
|
|
<div class="stat"><span class="label">Mempool transactions</span><span class="value" id="txPool">—</span></div>
|
|
<div class="stat"><span class="label">Alt blocks</span><span class="value" id="altBlocks">—</span></div>
|
|
</div>
|
|
|
|
<div class="glass-card tab-hidden" data-panel="insights">
|
|
<div class="card-title">Chain & Disk</div>
|
|
<div class="stat"><span class="label">Difficulty</span><span class="value" id="difficulty">—</span></div>
|
|
<div class="stat"><span class="label">Chain size</span><span class="value" id="chainSize">—</span></div>
|
|
<div class="stat"><span class="label">Free disk</span><span class="value" id="freeSpace">—</span></div>
|
|
</div>
|
|
|
|
<div class="glass-card tab-hidden" data-panel="connect">
|
|
<div class="card-title">Connect a Wallet</div>
|
|
<div class="endpoint">
|
|
<span id="walletEndpoint">—</span>
|
|
<button class="glass-button" onclick="copyEndpoint(this)">Copy</button>
|
|
</div>
|
|
<div class="hint">
|
|
Restricted RPC — Monero's own safe-for-public subset, what Feather,
|
|
monero-wallet-rpc and the GUI use for a “remote node”. Full (unrestricted) RPC
|
|
stays container-loopback only and is never published.
|
|
</div>
|
|
<div class="stat" style="margin-top:0.9rem;"><span class="label">P2P port</span><span class="value" id="p2pPort">18183</span></div>
|
|
<div class="stat"><span class="label">Restricted RPC port</span><span class="value">18090</span></div>
|
|
</div>
|
|
</div>
|
|
|
|
<footer>
|
|
Cuprate is work-in-progress software; it independently validates Monero consensus rules.
|
|
Data served from this node's restricted RPC, refreshed every 15 seconds.
|
|
</footer>
|
|
</div>
|
|
|
|
<script>
|
|
const RPC = 'cuprate-rpc/';
|
|
const POLL_MS = 15000;
|
|
|
|
function tabular(n) { return Number(n || 0).toLocaleString('en-US'); }
|
|
|
|
function formatBytes(bytes) {
|
|
const n = Number(bytes);
|
|
if (!Number.isFinite(n) || n <= 0) return '—';
|
|
const units = ['B', 'KiB', 'MiB', 'GiB', 'TiB'];
|
|
let v = n, i = 0;
|
|
while (v >= 1024 && i < units.length - 1) { v /= 1024; i += 1; }
|
|
return `${v >= 100 || i === 0 ? tabular(Math.round(v)) : v.toFixed(1)} ${units[i]}`;
|
|
}
|
|
|
|
function formatUptime(secs) {
|
|
const s = Number(secs);
|
|
if (!Number.isFinite(s) || s < 0) return '—';
|
|
const d = Math.floor(s / 86400), h = Math.floor((s % 86400) / 3600), m = Math.floor((s % 3600) / 60);
|
|
if (d > 0) return `${d}d ${h}h`;
|
|
if (h > 0) return `${h}h ${m}m`;
|
|
return `${m}m`;
|
|
}
|
|
|
|
function setStat(id, value, cls) {
|
|
const el = document.getElementById(id);
|
|
el.textContent = (value === null || value === undefined || value === '') ? '—' : value;
|
|
el.className = 'value' + (cls ? ' ' + cls : '');
|
|
}
|
|
|
|
function setStatus(kind, text) {
|
|
document.getElementById('statusText').textContent = text;
|
|
const dot = document.getElementById('headerStatusDot');
|
|
dot.className = 'dot ' + kind;
|
|
document.getElementById('offlineNotice').style.display = (kind === 'offline') ? '' : 'none';
|
|
}
|
|
|
|
async function callRpc(endpoint) {
|
|
const response = await fetch(RPC + endpoint, {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: '{}',
|
|
cache: 'no-store',
|
|
});
|
|
if (!response.ok) throw new Error(`HTTP ${response.status}`);
|
|
const data = await response.json();
|
|
if (data && data.error) throw new Error(data.error);
|
|
return data;
|
|
}
|
|
|
|
function render(info, heightFallback) {
|
|
const height = info.height ?? heightFallback ?? 0;
|
|
// Monero's get_info returns target_height == 0 when the node is
|
|
// FULLY SYNCED — the field is the height being caught up to, not
|
|
// the chain tip, so `??` cannot substitute for the 0 case (a
|
|
// synced node would sit forever at "Syncing — 0.00%"). Treat
|
|
// 0/absent as "target is our own height" — the same sentinel
|
|
// core/archipelago/src/electrs_status.rs branches on.
|
|
const rawTarget = info.target_height ?? info.target ?? 0;
|
|
const target = rawTarget > 0 ? rawTarget : height;
|
|
document.getElementById('height').textContent = tabular(height);
|
|
document.getElementById('targetOf').textContent = `of ${tabular(target)}`;
|
|
|
|
const pct = target > 0 ? Math.min(100, (height / target) * 100) : 0;
|
|
document.getElementById('syncBar').style.width = pct.toFixed(2) + '%';
|
|
|
|
const synced = target > 0 && height >= target;
|
|
if (synced) {
|
|
document.getElementById('syncLabel').textContent = 'Fully synced';
|
|
setStatus('online', 'Synced');
|
|
} else {
|
|
const behind = Math.max(0, target - height);
|
|
document.getElementById('syncLabel').textContent =
|
|
`${pct.toFixed(2)}% — ${tabular(behind)} blocks behind`;
|
|
setStatus('syncing', 'Syncing');
|
|
}
|
|
|
|
const nettype = info.mainnet ? 'Mainnet'
|
|
: info.testnet ? 'Testnet'
|
|
: info.stagenet ? 'Stagenet'
|
|
: (info.net || info.nettype || '—');
|
|
setStat('nettype', nettype);
|
|
document.getElementById('headerNetwork').textContent = nettype;
|
|
document.getElementById('headerHeight').textContent = tabular(height);
|
|
|
|
const nowSecs = info.time ?? info.adjusted_time ?? Math.floor(Date.now() / 1000);
|
|
const started = info.start_time ?? info.startup_time;
|
|
setStat('uptime', started ? formatUptime(nowSecs - started) : '—');
|
|
setStat('nodeTime', new Date(nowSecs * 1000).toLocaleString());
|
|
|
|
setStat('outConns', tabular(info.outgoing_connections_count));
|
|
setStat('inConns', tabular(info.incoming_connections_count));
|
|
setStat('rpcConns', tabular(info.rpc_connections_count));
|
|
setStat('whitePeers', tabular(info.white_peerlist_size));
|
|
setStat('grayPeers', tabular(info.grey_peerlist_size));
|
|
setStat('txPool', tabular(info.tx_pool_size));
|
|
const alt = Number(info.alt_blocks_count || 0);
|
|
setStat('altBlocks', tabular(alt), alt > 0 ? 'warn' : undefined);
|
|
|
|
setStat('difficulty', tabular(info.difficulty));
|
|
setStat('chainSize', formatBytes(info.blocks_size ?? info.block_sizes?.[0]));
|
|
const free = info.free_space;
|
|
const freeWarn = Number.isFinite(free) && free > 0 && free < 50 * 1024 * 1024 * 1024;
|
|
setStat('freeSpace', formatBytes(free), freeWarn ? 'warn' : undefined);
|
|
|
|
if (!document.getElementById('walletEndpoint').textContent.includes(':')) {
|
|
document.getElementById('walletEndpoint').textContent =
|
|
`${window.location.hostname}:18090`;
|
|
}
|
|
}
|
|
|
|
async function refresh() {
|
|
let height = null;
|
|
try {
|
|
const h = await callRpc('get_height');
|
|
height = h.height;
|
|
} catch { /* get_info below carries the real error */ }
|
|
try {
|
|
const info = await callRpc('get_info');
|
|
render(info, height);
|
|
} catch {
|
|
setStatus('offline', 'Node offline');
|
|
if (height !== null) document.getElementById('height').textContent = tabular(height);
|
|
}
|
|
}
|
|
|
|
function copyEndpoint(btn) {
|
|
const text = document.getElementById('walletEndpoint').textContent;
|
|
const done = () => { btn.textContent = 'Copied'; setTimeout(() => { btn.textContent = 'Copy'; }, 1500); };
|
|
if (navigator.clipboard && window.isSecureContext) {
|
|
navigator.clipboard.writeText(text).then(done).catch(() => { done(); });
|
|
} else {
|
|
const ta = document.createElement('textarea');
|
|
ta.value = text;
|
|
document.body.appendChild(ta);
|
|
ta.select();
|
|
try { document.execCommand('copy'); } catch { /* best effort */ }
|
|
document.body.removeChild(ta);
|
|
done();
|
|
}
|
|
}
|
|
|
|
document.querySelectorAll('.tab-btn').forEach((button) => {
|
|
button.addEventListener('click', () => {
|
|
const tab = button.dataset.tab;
|
|
document.querySelectorAll('.tab-btn').forEach((b) => b.classList.toggle('active', b === button));
|
|
document.querySelectorAll('[data-panel]').forEach((panel) => panel.classList.toggle('tab-hidden', panel.dataset.panel !== tab));
|
|
});
|
|
});
|
|
|
|
// Height alone answers even while get_info is warming up; if both
|
|
// fail the offline card explains the disk gate as a likely cause.
|
|
refresh();
|
|
setInterval(refresh, POLL_MS);
|
|
</script>
|
|
</body>
|
|
</html>
|