mjallen/nix-config
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

hmm

Browse Source
This commit is contained in:
mjallen18
2026-04-07 20:36:32 -05:00
parent 928de1837b
commit 3234029ae5
10 changed files with 1039 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

225
packages/system/nebula-ui/templates/base.html Normal file
View File

@@ -0,0 +1,225 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Nebula UI — {{ network_name }}</title>
<style>
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
--bg: #0f1117;
--surface: #1a1d27;
--border: #2a2d3a;
--accent: #6c8ef5;
--accent2: #4ade80;
--text: #e2e4ef;
--muted: #7a7f9a;
--danger: #f87171;
--radius: 8px;
--font: 'Inter', ui-sans-serif, system-ui, sans-serif;
}
body {
background: var(--bg);
color: var(--text);
font-family: var(--font);
font-size: 14px;
min-height: 100vh;
}
header {
background: var(--surface);
border-bottom: 1px solid var(--border);
padding: 0 24px;
display: flex;
align-items: center;
gap: 32px;
height: 52px;
}
header .logo {
font-weight: 700;
font-size: 16px;
color: var(--accent);
letter-spacing: -.3px;
}
header nav a {
color: var(--muted);
text-decoration: none;
font-size: 13px;
padding: 6px 10px;
border-radius: var(--radius);
transition: color .15s, background .15s;
}
header nav a:hover,
header nav a.active {
color: var(--text);
background: var(--border);
}
main {
max-width: 960px;
margin: 0 auto;
padding: 32px 24px;
}
h1 { font-size: 22px; font-weight: 600; margin-bottom: 24px; }
h2 { font-size: 16px; font-weight: 600; margin-bottom: 16px; color: var(--muted); text-transform: uppercase; letter-spacing: .5px; }
.card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 20px 24px;
margin-bottom: 20px;
}
.badge {
display: inline-block;
padding: 2px 8px;
border-radius: 4px;
font-size: 11px;
font-weight: 600;
letter-spacing: .3px;
}
.badge-green { background: #14532d; color: var(--accent2); }
.badge-blue { background: #1e3a5f; color: var(--accent); }
.badge-red { background: #450a0a; color: var(--danger); }
.badge-gray { background: var(--border); color: var(--muted); }
table {
width: 100%;
border-collapse: collapse;
font-size: 13px;
}
th {
text-align: left;
padding: 8px 12px;
color: var(--muted);
border-bottom: 1px solid var(--border);
font-weight: 500;
}
td {
padding: 10px 12px;
border-bottom: 1px solid var(--border);
vertical-align: middle;
}
tr:last-child td { border-bottom: none; }
tr:hover td { background: rgba(255,255,255,.02); }
.mono { font-family: ui-monospace, 'Cascadia Code', monospace; font-size: 12px; }
.stat-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
gap: 12px;
margin-bottom: 20px;
}
.stat-box {
background: var(--bg);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 14px 16px;
}
.stat-box .label { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .5px; margin-bottom: 6px; }
.stat-box .value { font-size: 22px; font-weight: 700; color: var(--accent); }
.stat-box .unit { font-size: 11px; color: var(--muted); margin-left: 3px; }
form .field { margin-bottom: 16px; }
form label { display: block; font-size: 12px; color: var(--muted); margin-bottom: 5px; font-weight: 500; }
form input[type="text"] {
width: 100%;
background: var(--bg);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 9px 12px;
color: var(--text);
font-size: 14px;
outline: none;
transition: border-color .15s;
}
form input[type="text"]:focus { border-color: var(--accent); }
form input[type="text"]::placeholder { color: var(--muted); }
.btn {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 9px 18px;
border-radius: var(--radius);
border: none;
cursor: pointer;
font-size: 14px;
font-weight: 600;
transition: opacity .15s;
}
.btn:hover { opacity: .85; }
.btn-primary { background: var(--accent); color: #fff; }
.alert {
padding: 12px 16px;
border-radius: var(--radius);
margin-bottom: 20px;
font-size: 13px;
}
.alert-error { background: #450a0a; border: 1px solid #7f1d1d; color: var(--danger); }
.qr-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
margin-top: 20px;
}
@media (max-width: 640px) { .qr-grid { grid-template-columns: 1fr; } }
.qr-box {
background: #fff;
border-radius: var(--radius);
padding: 16px;
text-align: center;
}
.qr-box .qr-label {
font-size: 12px;
font-weight: 600;
color: #333;
margin-bottom: 10px;
text-transform: uppercase;
letter-spacing: .5px;
}
.qr-box svg { max-width: 100%; height: auto; }
details { margin-top: 16px; }
summary { cursor: pointer; color: var(--muted); font-size: 12px; }
pre {
margin-top: 10px;
background: var(--bg);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 12px;
font-family: ui-monospace, monospace;
font-size: 12px;
white-space: pre-wrap;
word-break: break-all;
color: var(--text);
}
.no-data { color: var(--muted); font-size: 13px; padding: 20px 0; text-align: center; }
</style>
</head>
<body>
<header>
<span class="logo">nebula-ui</span>
<nav>
<a href="/" {% if request.url.path == "/" %}class="active"{% endif %}>Stats</a>
<a href="/sign" {% if request.url.path == "/sign" %}class="active"{% endif %}>Sign Certificate</a>
</nav>
<span style="margin-left:auto; color:var(--muted); font-size:12px;">{{ network_name }}</span>
</header>
<main>
{% block content %}{% endblock %}
</main>
</body>
</html>