<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Lumina</title>
<script src="/main.js"></script>
<style>
:root {
--bg1: #121212;
--bg2: #101010;
--fg1: #2ecc71;
--fg2: #5787ff;
--border: #5f87ff;
--fonts-mono: Roboto Mono, Inconsolata, Source Code Pro, IBM Plex Mono, monospace, monospace;
}
body {
background-color: var(--bg2);
color: var(--fg1);
font-family: var(--fonts-mono);
margin: 1rem;
}
#genesis-hash {
text-align: center;
}
#genesis-hash,
#bootnodes {
padding: 0.5rem;
font-family: var(--fonts-mono);
}
#network-id,
#start {
padding: 0.5rem 1rem;
}
*:disabled {
opacity: 0.7;
}
.config {
background-color: var(--bg1);
color: var(--fg1);
border: 1px solid var(--border);
}
.config:focus,
.config:focus-visible {
border: 1px solid var(--fg1);
outline: none;
}
.button {
background-color: var(--bg1);
color: var(--fg1);
border: 1px solid var(--border);
}
.button:focus,
.button:focus-visible {
border: 1px solid var(--fg1);
outline: none;
}
.status {
margin: 1rem 0 1rem 0.5rem;
visibility: hidden;
color: var(--fg2);
}
.event-logs {
background-color: var(--bg1);
color: var(--fg1);
border: 1px solid var(--border);
font-family: var(--fonts-mono);
}
h2.status {
margin: 2rem 0 1rem 0;
color: var(--fg1);
}
.latest-block {
margin: 0.5rem 1rem;
}
.status-value {
margin-left: 0.5rem;
color: var(--fg1);
}
</style>
</head>
<body>
<h1>Lumina</h1>
<h3>Network</h3>
<select id="network-id" class="config">
<option value="0">Mainnet</option>
<option value="1">Arabica</option>
<option value="2">Mocha</option>
<option value="3">Private</option>
</select>
<h3>Bootnodes</h3>
<textarea id="bootnodes" class="config" cols=120 rows=8></textarea>
<div>
<button id="start-stop" class="button" id="start-stop"><b>Start</b></button>
</div>
<h2 class="event_logs">Event Logs</h2>
<textarea readonly id="event-logs" class="event-logs" cols=120 rows=8></textarea>
<h2 class="status">Status</h2>
<div class="status">
<b>PeerId:</b>
<span class="status-value" id="peer-id"></span>
</div>
<div class="status">
<b>Synchronised header ranges:</b>
<span class="status-value" id="stored-ranges"></span>
</div>
<div class="status">
<b>Latest block:</b>
<div class="latest-block">
<b>Height:</b>
<span class="status-value" id="block-height"></span>
</div>
<div class="latest-block">
<b>Hash:</b>
<span class="status-value" id="block-hash"></span>
</div>
<div class="latest-block">
<b>Data square size:</b>
<span class="status-value" id="block-data-square"></span>
</div>
</div>
<div class="status">
<b>Peers:</b>
<div class="status-value" id="peers"></div>
</div>
</body>
</html>