added more specs and rebuilt for simpler additions
This commit is contained in:
venus
869
samples/homelab.html
Normal file
869
samples/homelab.html
Normal file
@@ -0,0 +1,869 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>River Rooks | Homelab Lander & Infrastructure Catalog</title>
|
||||
<meta name="description" content="Public landing page and operational directory for River Rooks self-hosted homelab infrastructure, services, hardware nodes, and network topology.">
|
||||
<style>
|
||||
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital,wght@0,400;0,500;0,700;1,400&family=Inter:wght@400;500;700&family=JetBrains+Mono:ital,wght@0,400;0,500;1,400&display=swap');
|
||||
|
||||
:root {
|
||||
--bg-canvas: #0d0f12; /* Deep slate/charcoal */
|
||||
--bg-surface: #121417; /* Solid surface container */
|
||||
--bg-surface-alt: #181b21; /* Slightly lighter surface card */
|
||||
--border-color: #2b303b; /* Low-contrast 1px border */
|
||||
--border-active: #00f0ff; /* Active Cyan border */
|
||||
--text-primary: #e0e6f0; /* Off-white prose */
|
||||
--text-muted: #8a95a5; /* Monospaced metadata gray */
|
||||
--accent: #00f0ff; /* High-visibility Cyan terminal accent */
|
||||
--accent-green: #00ff66; /* ANSI Green for online status */
|
||||
--accent-amber: #ffb000; /* Amber for alerts / tags */
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--bg-canvas);
|
||||
color: var(--text-primary);
|
||||
font-family: 'Inter', sans-serif;
|
||||
line-height: 1.65;
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
/* Sticky Navigation Header */
|
||||
.sticky-header {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
height: 56px;
|
||||
background-color: var(--bg-canvas);
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 0 24px;
|
||||
z-index: 100;
|
||||
font-family: 'IBM Plex Mono', monospace;
|
||||
}
|
||||
|
||||
.logo-container {
|
||||
font-weight: 700;
|
||||
font-size: 0.92rem;
|
||||
color: var(--text-primary);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.logo-prompt {
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
.header-nav {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.nav-link {
|
||||
color: var(--text-primary);
|
||||
text-decoration: none;
|
||||
font-size: 0.82rem;
|
||||
padding: 4px 8px;
|
||||
border: 1px solid transparent;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
transition: none; /* Instant snap */
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.nav-link:hover {
|
||||
background-color: var(--accent);
|
||||
color: var(--bg-canvas);
|
||||
}
|
||||
|
||||
.nav-link:focus {
|
||||
outline: 2px solid var(--accent);
|
||||
outline-offset: -2px;
|
||||
}
|
||||
|
||||
.nav-link.active::before {
|
||||
content: "> ";
|
||||
color: var(--accent);
|
||||
margin-right: 4px;
|
||||
}
|
||||
|
||||
.nav-link.active:hover::before {
|
||||
color: var(--bg-canvas);
|
||||
}
|
||||
|
||||
/* Outer Wrapper */
|
||||
.page-wrapper {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding: 40px 24px 60px 24px;
|
||||
}
|
||||
|
||||
.content-container {
|
||||
width: 100%;
|
||||
max-width: 1000px;
|
||||
}
|
||||
|
||||
/* Identity Header */
|
||||
.identity-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
flex-wrap: wrap;
|
||||
gap: 16px;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.header-titles {
|
||||
flex: 1;
|
||||
min-width: 280px;
|
||||
}
|
||||
|
||||
.site-h1 {
|
||||
font-family: 'IBM Plex Mono', monospace;
|
||||
font-size: 2rem;
|
||||
font-weight: 700;
|
||||
color: var(--text-primary);
|
||||
margin-bottom: 6px;
|
||||
letter-spacing: -0.02em;
|
||||
}
|
||||
|
||||
.status-line {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
font-family: 'IBM Plex Mono', monospace;
|
||||
font-size: 0.85rem;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.status-dot {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
background-color: var(--accent-green);
|
||||
display: inline-block;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.system-badge-box {
|
||||
font-family: 'IBM Plex Mono', monospace;
|
||||
font-size: 0.78rem;
|
||||
background-color: var(--bg-surface);
|
||||
border: 1px solid var(--border-color);
|
||||
padding: 10px 14px;
|
||||
border-radius: 4px;
|
||||
color: var(--text-muted);
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.system-badge-box strong {
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
/* Dividers */
|
||||
.section-divider {
|
||||
border: 0;
|
||||
border-top: 1px solid var(--border-color);
|
||||
margin: 32px 0;
|
||||
}
|
||||
|
||||
/* Terminal Status Block */
|
||||
.terminal-block {
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 4px;
|
||||
background-color: var(--bg-surface);
|
||||
font-family: 'JetBrains Mono', monospace;
|
||||
overflow: hidden;
|
||||
margin-bottom: 36px;
|
||||
}
|
||||
|
||||
.terminal-header {
|
||||
background-color: var(--bg-canvas);
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
padding: 8px 16px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
font-size: 0.78rem;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.terminal-title {
|
||||
color: var(--text-primary);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.terminal-body {
|
||||
padding: 16px;
|
||||
font-size: 0.84rem;
|
||||
line-height: 1.55;
|
||||
}
|
||||
|
||||
.cmd-line {
|
||||
color: var(--text-muted);
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.prompt {
|
||||
color: var(--accent);
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.cmd-output {
|
||||
color: var(--text-primary);
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
|
||||
.highlight-green {
|
||||
color: var(--accent-green);
|
||||
}
|
||||
|
||||
.highlight-cyan {
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
.highlight-amber {
|
||||
color: var(--accent-amber);
|
||||
}
|
||||
|
||||
.cursor-block {
|
||||
display: inline-block;
|
||||
width: 8px;
|
||||
height: 15px;
|
||||
background-color: var(--text-primary);
|
||||
margin-left: 4px;
|
||||
vertical-align: middle;
|
||||
animation: blink 1s steps(2, start) infinite;
|
||||
}
|
||||
|
||||
@keyframes blink {
|
||||
to { visibility: hidden; }
|
||||
}
|
||||
|
||||
/* Section Headings */
|
||||
.section-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: baseline;
|
||||
margin-bottom: 16px;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-family: 'IBM Plex Mono', monospace;
|
||||
font-size: 1.15rem;
|
||||
font-weight: 700;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.section-meta {
|
||||
font-family: 'IBM Plex Mono', monospace;
|
||||
font-size: 0.8rem;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
/* Interactive Filter Controls */
|
||||
.filter-bar {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
margin-bottom: 24px;
|
||||
font-family: 'IBM Plex Mono', monospace;
|
||||
}
|
||||
|
||||
.filter-btn {
|
||||
background-color: var(--bg-surface);
|
||||
color: var(--text-muted);
|
||||
border: 1px solid var(--border-color);
|
||||
padding: 6px 12px;
|
||||
font-size: 0.8rem;
|
||||
cursor: pointer;
|
||||
font-family: inherit;
|
||||
border-radius: 4px;
|
||||
transition: none; /* Instant snap */
|
||||
}
|
||||
|
||||
.filter-btn:hover {
|
||||
color: var(--text-primary);
|
||||
border-color: var(--accent);
|
||||
}
|
||||
|
||||
.filter-btn.active {
|
||||
background-color: var(--accent);
|
||||
color: var(--bg-canvas);
|
||||
border-color: var(--accent);
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.filter-btn:focus {
|
||||
outline: 2px solid var(--accent);
|
||||
outline-offset: 1px;
|
||||
}
|
||||
|
||||
/* Services Card Grid */
|
||||
.services-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
|
||||
gap: 16px;
|
||||
margin-bottom: 36px;
|
||||
}
|
||||
|
||||
.service-card {
|
||||
background-color: var(--bg-surface);
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 4px;
|
||||
padding: 18px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
transition: none;
|
||||
}
|
||||
|
||||
.service-card:hover {
|
||||
border-color: var(--border-active);
|
||||
}
|
||||
|
||||
.service-card-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.service-name {
|
||||
font-family: 'IBM Plex Mono', monospace;
|
||||
font-size: 1rem;
|
||||
font-weight: 700;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.service-card:hover .service-name {
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
.service-tag {
|
||||
font-family: 'IBM Plex Mono', monospace;
|
||||
font-size: 0.75rem;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.service-desc {
|
||||
font-size: 0.88rem;
|
||||
color: var(--text-muted);
|
||||
margin-bottom: 16px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.service-footer {
|
||||
font-family: 'IBM Plex Mono', monospace;
|
||||
font-size: 0.78rem;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding-top: 10px;
|
||||
border-top: 1px solid var(--border-color);
|
||||
}
|
||||
|
||||
.service-port {
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.service-status {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.status-text-online {
|
||||
color: var(--accent-green);
|
||||
}
|
||||
|
||||
.status-text-active {
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
/* Hardware Nodes & Metrics Table */
|
||||
.nodes-container {
|
||||
background-color: var(--bg-surface);
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 4px;
|
||||
overflow-x: auto;
|
||||
margin-bottom: 36px;
|
||||
}
|
||||
|
||||
.nodes-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
font-family: 'IBM Plex Mono', monospace;
|
||||
font-size: 0.83rem;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.nodes-table th {
|
||||
background-color: var(--bg-canvas);
|
||||
color: var(--text-primary);
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
padding: 10px 14px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.nodes-table td {
|
||||
padding: 12px 14px;
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
color: var(--text-primary);
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.nodes-table tr:last-child td {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.nodes-table tr:hover td {
|
||||
background-color: var(--bg-surface-alt);
|
||||
}
|
||||
|
||||
.node-hostname {
|
||||
font-weight: 700;
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
.metric-bar {
|
||||
color: var(--accent-green);
|
||||
}
|
||||
|
||||
/* Network Topology ASCII Block */
|
||||
.topology-block {
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 4px;
|
||||
background-color: var(--bg-surface);
|
||||
font-family: 'JetBrains Mono', monospace;
|
||||
padding: 18px;
|
||||
font-size: 0.8rem;
|
||||
line-height: 1.4;
|
||||
overflow-x: auto;
|
||||
color: var(--text-muted);
|
||||
margin-bottom: 36px;
|
||||
}
|
||||
|
||||
.topology-title {
|
||||
color: var(--text-primary);
|
||||
font-weight: 700;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
/* Piped Footer Links */
|
||||
.footer-links {
|
||||
font-family: 'IBM Plex Mono', monospace;
|
||||
font-size: 0.85rem;
|
||||
color: var(--text-muted);
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 12px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.footer-link {
|
||||
color: var(--text-primary);
|
||||
text-decoration: none;
|
||||
padding: 2px 6px;
|
||||
transition: none; /* Zero-delay snap */
|
||||
}
|
||||
|
||||
.footer-link:hover {
|
||||
background-color: var(--accent);
|
||||
color: var(--bg-canvas);
|
||||
}
|
||||
|
||||
.footer-link:focus {
|
||||
outline: 2px solid var(--accent);
|
||||
outline-offset: -2px;
|
||||
}
|
||||
|
||||
.pipe {
|
||||
color: var(--border-color);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- Sticky Header -->
|
||||
<header class="sticky-header">
|
||||
<div class="logo-container">
|
||||
<span class="logo-prompt">$</span> agy --page=homelab
|
||||
</div>
|
||||
<nav class="header-nav" aria-label="Main Navigation">
|
||||
<a href="index.html" class="nav-link">Catalog</a>
|
||||
<a href="homepage.html" class="nav-link">Sample 1</a>
|
||||
<a href="split-panel.html" class="nav-link">Sample 2</a>
|
||||
<a href="companion.html" class="nav-link">Sample 3</a>
|
||||
<a href="document-flow.html" class="nav-link">Sample 4</a>
|
||||
<a href="portfolio.html" class="nav-link">Sample 5</a>
|
||||
<a href="homelab.html" class="nav-link active">Sample 6 (Homelab)</a>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<!-- Page Content Container -->
|
||||
<div class="page-wrapper">
|
||||
<main class="content-container">
|
||||
|
||||
<!-- Identity & Status Banner -->
|
||||
<header class="identity-header">
|
||||
<div class="header-titles">
|
||||
<h1 class="site-h1">Homelab Lander & Infrastructure</h1>
|
||||
<div class="status-line">
|
||||
<span class="status-dot"></span>
|
||||
<span>CLUSTER ONLINE | 10GbE BACKBONE | TRAEFIK V3 EDGE PROXY</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="system-badge-box">
|
||||
<div><strong>SYSTEM UPTIME:</strong> 99.98% (42d 14h)</div>
|
||||
<div><strong>LOCATION:</strong> ALABAMA DCs / RACK-01</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<!-- Under Construction / System Telemetry Terminal Block -->
|
||||
<section aria-label="System Diagnostics Terminal">
|
||||
<div class="terminal-block">
|
||||
<div class="terminal-header">
|
||||
<span class="terminal-title">/var/log/homelab-status.log</span>
|
||||
<span>STDOUT [TTY1]</span>
|
||||
</div>
|
||||
<div class="terminal-body">
|
||||
<div class="cmd-line"><span class="prompt">$</span> homelab-ctl status --output=summary</div>
|
||||
<div class="cmd-output">[<span class="highlight-green">OK</span>] Edge Router: OPNsense 24.7 (10GbE SFP+ WAN/LAN)
|
||||
[<span class="highlight-green">OK</span>] Reverse Proxy: Traefik v3.1 (Auto Let's Encrypt TLS Wildcard)
|
||||
[<span class="highlight-green">OK</span>] Virtualization: Proxmox VE 8.2 Cluster (3 Bare-Metal Nodes)
|
||||
[<span class="highlight-green">OK</span>] ZFS Array: TrueNAS SCALE (48TB RaidZ2 Pool, 0 Degradation)
|
||||
[<span class="highlight-cyan">INFO</span>] Active Wireguard Mesh Peers: 14 Connected
|
||||
[<span class="highlight-amber">WARN</span>] Sonarr Queue: 2 downloads pending verification<span class="cursor-block"></span></div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Homelab Services Directory -->
|
||||
<section aria-label="Services Directory">
|
||||
<div class="section-header">
|
||||
<h2 class="section-title">services_directory</h2>
|
||||
<span class="section-meta">12 Active Micro-services</span>
|
||||
</div>
|
||||
|
||||
<!-- Filter Bar -->
|
||||
<div class="filter-bar" id="filterBar" role="tablist" aria-label="Filter Services">
|
||||
<button class="filter-btn active" data-filter="all" role="tab" aria-selected="true">All Services</button>
|
||||
<button class="filter-btn" data-filter="core" role="tab">Core & Network</button>
|
||||
<button class="filter-btn" data-filter="compute" role="tab">Compute & Storage</button>
|
||||
<button class="filter-btn" data-filter="media" role="tab">Media & Automation</button>
|
||||
<button class="filter-btn" data-filter="monitoring" role="tab">Monitoring & Sec</button>
|
||||
</div>
|
||||
|
||||
<!-- Services Cards Grid -->
|
||||
<div class="services-grid" id="servicesGrid">
|
||||
|
||||
<!-- Traefik -->
|
||||
<article class="service-card" data-category="core">
|
||||
<div class="service-card-header">
|
||||
<h3 class="service-name">Traefik Proxy</h3>
|
||||
<span class="service-tag">[#core]</span>
|
||||
</div>
|
||||
<p class="service-desc">Edge HTTP reverse proxy and load balancer with dynamic Docker provider discovery and ACME TLS certificate management.</p>
|
||||
<div class="service-footer">
|
||||
<span class="service-port">443/tcp (TLS)</span>
|
||||
<span class="service-status status-text-online"><span class="status-dot"></span> ONLINE</span>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<!-- OPNsense -->
|
||||
<article class="service-card" data-category="core">
|
||||
<div class="service-card-header">
|
||||
<h3 class="service-name">OPNsense Firewall</h3>
|
||||
<span class="service-tag">[#core]</span>
|
||||
</div>
|
||||
<p class="service-desc">Hardened FreeBSD firewall routing 10GbE traffic with VLAN isolation, Suricata IDS/IPS, and Unbound DNS.</p>
|
||||
<div class="service-footer">
|
||||
<span class="service-port">VLAN 10 / Mgmt</span>
|
||||
<span class="service-status status-text-online"><span class="status-dot"></span> ACTIVE</span>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<!-- Proxmox VE -->
|
||||
<article class="service-card" data-category="compute">
|
||||
<div class="service-card-header">
|
||||
<h3 class="service-name">Proxmox VE</h3>
|
||||
<span class="service-tag">[#compute]</span>
|
||||
</div>
|
||||
<p class="service-desc">Enterprise hypervisor cluster hosting Debian LXC containers and KVM virtual machines with Ceph & ZFS backend.</p>
|
||||
<div class="service-footer">
|
||||
<span class="service-port">8006/tcp</span>
|
||||
<span class="service-status status-text-online"><span class="status-dot"></span> ONLINE</span>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<!-- TrueNAS SCALE -->
|
||||
<article class="service-card" data-category="compute">
|
||||
<div class="service-card-header">
|
||||
<h3 class="service-name">TrueNAS SCALE</h3>
|
||||
<span class="service-tag">[#storage]</span>
|
||||
</div>
|
||||
<p class="service-desc">Primary network attached storage managing 48TB ZFS RaidZ2 array, NFS shares, SMB datasets, and daily scrub jobs.</p>
|
||||
<div class="service-footer">
|
||||
<span class="service-port">NFS / SMB</span>
|
||||
<span class="service-status status-text-online"><span class="status-dot"></span> ONLINE</span>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<!-- AdGuard Home -->
|
||||
<article class="service-card" data-category="core">
|
||||
<div class="service-card-header">
|
||||
<h3 class="service-name">AdGuard Home</h3>
|
||||
<span class="service-tag">[#dns]</span>
|
||||
</div>
|
||||
<p class="service-desc">Network-wide DNS sinkhole filtering trackers and ad domains across all VLANs with DNS-over-HTTPS upstream resolvers.</p>
|
||||
<div class="service-footer">
|
||||
<span class="service-port">53/udp, 853/tcp</span>
|
||||
<span class="service-status status-text-active"><span class="status-dot"></span> PROTECTED</span>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<!-- WireGuard Mesh -->
|
||||
<article class="service-card" data-category="core">
|
||||
<div class="service-card-header">
|
||||
<h3 class="service-name">WireGuard Mesh</h3>
|
||||
<span class="service-tag">[#vpn]</span>
|
||||
</div>
|
||||
<p class="service-desc">High-performance encrypted point-to-point VPN tunnel connecting remote laptops and mobile endpoints to homelab subnet.</p>
|
||||
<div class="service-footer">
|
||||
<span class="service-port">51820/udp</span>
|
||||
<span class="service-status status-text-online"><span class="status-dot"></span> 14 PEERS</span>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<!-- Jellyfin Media -->
|
||||
<article class="service-card" data-category="media">
|
||||
<div class="service-card-header">
|
||||
<h3 class="service-name">Jellyfin Media</h3>
|
||||
<span class="service-tag">[#media]</span>
|
||||
</div>
|
||||
<p class="service-desc">FOSS media streaming engine leveraging Intel QuickSync GPU hardware acceleration for 4K HDR transcoding.</p>
|
||||
<div class="service-footer">
|
||||
<span class="service-port">8096/tcp</span>
|
||||
<span class="service-status status-text-online"><span class="status-dot"></span> READY</span>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<!-- Arr Automation Suite -->
|
||||
<article class="service-card" data-category="media">
|
||||
<div class="service-card-header">
|
||||
<h3 class="service-name">Arr Stack (Sonarr/Radarr)</h3>
|
||||
<span class="service-tag">[#automation]</span>
|
||||
</div>
|
||||
<p class="service-desc">Automated content indexing, Prowlarr torrent/Usenet management, and SABnzbd queue downloader pipeline.</p>
|
||||
<div class="service-footer">
|
||||
<span class="service-port">8989 / 7878</span>
|
||||
<span class="service-status status-text-online"><span class="status-dot"></span> RUNNING</span>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<!-- Prometheus + Grafana -->
|
||||
<article class="service-card" data-category="monitoring">
|
||||
<div class="service-card-header">
|
||||
<h3 class="service-name">Grafana & Prometheus</h3>
|
||||
<span class="service-tag">[#telemetry]</span>
|
||||
</div>
|
||||
<p class="service-desc">Time-series metric collection with Node Exporter, Telegraf agents, and live cluster performance dashboards.</p>
|
||||
<div class="service-footer">
|
||||
<span class="service-port">3000 / 9090</span>
|
||||
<span class="service-status status-text-active"><span class="status-dot"></span> SCRAPING</span>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<!-- Uptime Kuma -->
|
||||
<article class="service-card" data-category="monitoring">
|
||||
<div class="service-card-header">
|
||||
<h3 class="service-name">Uptime Kuma</h3>
|
||||
<span class="service-tag">[#status]</span>
|
||||
</div>
|
||||
<p class="service-desc">Synthetic HTTP, Ping, and TCP health monitor broadcasting real-time service status alerts to Discord webhooks.</p>
|
||||
<div class="service-footer">
|
||||
<span class="service-port">3001/tcp</span>
|
||||
<span class="service-status status-text-online"><span class="status-dot"></span> 100% HEALTH</span>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<!-- Vaultwarden -->
|
||||
<article class="service-card" data-category="monitoring">
|
||||
<div class="service-card-header">
|
||||
<h3 class="service-name">Vaultwarden</h3>
|
||||
<span class="service-tag">[#security]</span>
|
||||
</div>
|
||||
<p class="service-desc">Lightweight Rust implementation of the Bitwarden API hosting encrypted credentials, SSH keys, and TOTP tokens.</p>
|
||||
<div class="service-footer">
|
||||
<span class="service-port">443/tcp (E2EE)</span>
|
||||
<span class="service-status status-text-active"><span class="status-dot"></span> LOCKED</span>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<!-- Forgejo Git -->
|
||||
<article class="service-card" data-category="compute">
|
||||
<div class="service-card-header">
|
||||
<h3 class="service-name">Forgejo Git Server</h3>
|
||||
<span class="service-tag">[#git]</span>
|
||||
</div>
|
||||
<p class="service-desc">Self-hosted Git forge hosting homelab infrastructure-as-code repos, Ansible playbooks, and Docker compose files.</p>
|
||||
<div class="service-footer">
|
||||
<span class="service-port">3000/tcp, 2222/ssh</span>
|
||||
<span class="service-status status-text-online"><span class="status-dot"></span> ONLINE</span>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<!-- Bare-Metal Hardware Nodes Grid -->
|
||||
<section aria-label="Hardware Topology">
|
||||
<div class="section-header">
|
||||
<h2 class="section-title">hardware_nodes</h2>
|
||||
<span class="section-meta">3 Physical Bare-Metal Servers</span>
|
||||
</div>
|
||||
|
||||
<div class="nodes-container">
|
||||
<table class="nodes-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Hostname</th>
|
||||
<th>Role & OS</th>
|
||||
<th>Hardware Spec</th>
|
||||
<th>CPU Load</th>
|
||||
<th>RAM Util</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="node-hostname">gw-node01.lan</td>
|
||||
<td>OPNsense 24.7</td>
|
||||
<td>Intel N100 (4C/4T) | 16GB DDR5 | 2.5GbE</td>
|
||||
<td><span class="metric-bar">[██░░░░░░░░]</span> 18%</td>
|
||||
<td><span class="metric-bar">[███░░░░░░░]</span> 32%</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="node-hostname">pve-node02.lan</td>
|
||||
<td>Proxmox VE 8.2</td>
|
||||
<td>AMD Ryzen 9 5900X (12C/24T) | 128GB ECC | NVMe</td>
|
||||
<td><span class="metric-bar">[████░░░░░░]</span> 42%</td>
|
||||
<td><span class="metric-bar">[███████░░░]</span> 68%</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="node-hostname">nas-node03.lan</td>
|
||||
<td>TrueNAS SCALE</td>
|
||||
<td>Intel Xeon E-2278G (8C/16T) | 64GB ECC | 6x16TB ZFS</td>
|
||||
<td><span class="metric-bar">[██░░░░░░░░]</span> 24%</td>
|
||||
<td><span class="metric-bar">[████████░░]</span> 81%</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Network Topology Diagram -->
|
||||
<section aria-label="Network Architecture">
|
||||
<div class="section-header">
|
||||
<h2 class="section-title">network_topology</h2>
|
||||
<span class="section-meta">ASCII Architecture Map</span>
|
||||
</div>
|
||||
|
||||
<div class="topology-block">
|
||||
<div class="topology-title">// Network Edge & Traffic Routing Flow</div>
|
||||
[ WAN / INTERNET ]
|
||||
│
|
||||
▼
|
||||
┌─────────────────────────┐
|
||||
│ OPNsense Edge Gateway │ (10GbE SFP+ / Firewall / IDS)
|
||||
└───────────┬─────────────┘
|
||||
│
|
||||
├───────────────► [ WireGuard Mesh VPN ] (51820/udp Remote Access)
|
||||
│
|
||||
▼
|
||||
┌─────────────────────────┐
|
||||
│ Traefik v3 Reverse Proxy│ (Auto TLS Certs / Authelia 2FA)
|
||||
└───────────┬─────────────┘
|
||||
│
|
||||
┌─────────┴───────────────────────┬─────────────────────────┐
|
||||
▼ ▼ ▼
|
||||
┌─────────────────────────┐ ┌───────────────────────┐ ┌─────────────────────────┐
|
||||
│ VLAN 10: Management │ │ VLAN 20: Services │ │ VLAN 30: Storage Pool │
|
||||
│ • Proxmox VE (8006) │ │ • Grafana (3000) │ │ • TrueNAS ZFS (SMB/NFS) │
|
||||
│ • AdGuard Home (53) │ │ • Jellyfin Media │ │ • MinIO S3 Bucket │
|
||||
└─────────────────────────┘ └───────────────────────┘ └─────────────────────────┘
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<!-- Piped Contact & Catalog Footer -->
|
||||
<footer class="footer-links">
|
||||
<a href="index.html" class="footer-link">Spec Catalog</a>
|
||||
<span class="pipe">|</span>
|
||||
<a href="https://github.com" target="_blank" rel="noopener" class="footer-link">GitHub</a>
|
||||
<span class="pipe">|</span>
|
||||
<a href="mailto:river@example.com" class="footer-link">Email</a>
|
||||
<span class="pipe">|</span>
|
||||
<a href="#" class="footer-link">PGP Key</a>
|
||||
<span class="pipe">|</span>
|
||||
<span style="font-size:0.78rem; color:var(--text-muted);">HOSTED ON SELF-HEALED K3S CLUSTER</span>
|
||||
</footer>
|
||||
|
||||
</main>
|
||||
</div>
|
||||
|
||||
<!-- Pure Vanilla JS Filter Logic -->
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
const filterBtns = document.querySelectorAll('#filterBar .filter-btn');
|
||||
const serviceCards = document.querySelectorAll('#servicesGrid .service-card');
|
||||
|
||||
filterBtns.forEach(btn => {
|
||||
btn.addEventListener('click', () => {
|
||||
// Remove active class from all buttons
|
||||
filterBtns.forEach(b => {
|
||||
b.classList.remove('active');
|
||||
b.setAttribute('aria-selected', 'false');
|
||||
});
|
||||
|
||||
// Add active class to clicked button
|
||||
btn.classList.add('active');
|
||||
btn.setAttribute('aria-selected', 'true');
|
||||
|
||||
const filter = btn.getAttribute('data-filter');
|
||||
|
||||
// Toggle service cards visibility based on category
|
||||
serviceCards.forEach(card => {
|
||||
const category = card.getAttribute('data-category');
|
||||
if (filter === 'all' || category === filter) {
|
||||
card.style.display = 'flex';
|
||||
} else {
|
||||
card.style.display = 'none';
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -3,83 +3,368 @@
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Design Spec Samples Catalog</title>
|
||||
<title>Design Spec Samples Catalog | Dynamic Registry</title>
|
||||
<style>
|
||||
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;700&family=Inter:wght@400;500;700&family=JetBrains+Mono:wght@400;500&display=swap');
|
||||
|
||||
:root {
|
||||
--bg-canvas: #0d0f12;
|
||||
--bg-surface: #121417;
|
||||
--bg-elevated: #1c1f26;
|
||||
--border-color: #2b303b;
|
||||
--text-primary: #e0e6f0;
|
||||
--text-muted: #8a95a5;
|
||||
--accent-cyan: #00f0ff;
|
||||
--accent-green: #00e676;
|
||||
--accent-amber: #ffb700;
|
||||
}
|
||||
|
||||
* { box-sizing: border-box; margin: 0; padding: 0; }
|
||||
|
||||
body {
|
||||
background-color: #0d0f12;
|
||||
color: #e0e6f0;
|
||||
font-family: 'IBM Plex Mono', 'JetBrains Mono', monospace;
|
||||
max-width: 600px;
|
||||
margin: 80px auto;
|
||||
padding: 20px;
|
||||
background-color: var(--bg-canvas);
|
||||
color: var(--text-primary);
|
||||
font-family: 'Inter', sans-serif;
|
||||
line-height: 1.6;
|
||||
max-width: 860px;
|
||||
margin: 40px auto;
|
||||
padding: 0 20px;
|
||||
}
|
||||
h1 {
|
||||
font-size: 1.5rem;
|
||||
border-bottom: 1px solid #2b303b;
|
||||
padding-bottom: 10px;
|
||||
margin-bottom: 30px;
|
||||
|
||||
/* Header Identity */
|
||||
.catalog-header {
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
padding-bottom: 16px;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
ul {
|
||||
list-style-type: none;
|
||||
padding: 0;
|
||||
|
||||
.catalog-title {
|
||||
font-family: 'IBM Plex Mono', monospace;
|
||||
font-size: 1.6rem;
|
||||
font-weight: 700;
|
||||
color: var(--text-primary);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
}
|
||||
li {
|
||||
margin: 20px 0;
|
||||
padding: 15px;
|
||||
border: 1px solid #2b303b;
|
||||
|
||||
.status-dot {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
background-color: var(--accent-cyan);
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.catalog-meta {
|
||||
font-family: 'IBM Plex Mono', monospace;
|
||||
font-size: 0.82rem;
|
||||
color: var(--text-muted);
|
||||
margin-top: 6px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
/* Search Filter Input Bar */
|
||||
.filter-bar {
|
||||
margin-bottom: 24px;
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.search-input {
|
||||
background-color: var(--bg-surface);
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 4px;
|
||||
background-color: #121417;
|
||||
color: var(--text-primary);
|
||||
font-family: 'JetBrains Mono', monospace;
|
||||
font-size: 0.85rem;
|
||||
padding: 10px 14px;
|
||||
width: 100%;
|
||||
outline: none;
|
||||
}
|
||||
a {
|
||||
color: #ffb000;
|
||||
|
||||
.search-input:focus {
|
||||
border-color: var(--accent-cyan);
|
||||
}
|
||||
|
||||
/* Dynamic Catalog Cards List */
|
||||
.samples-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.sample-card {
|
||||
background-color: var(--bg-surface);
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 4px;
|
||||
padding: 16px;
|
||||
transition: none; /* Instant snap */
|
||||
}
|
||||
|
||||
.sample-card:hover {
|
||||
border-color: var(--accent-cyan);
|
||||
background-color: var(--bg-elevated);
|
||||
}
|
||||
|
||||
.sample-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.sample-link {
|
||||
font-family: 'IBM Plex Mono', monospace;
|
||||
font-size: 1.05rem;
|
||||
font-weight: 700;
|
||||
color: var(--text-primary);
|
||||
text-decoration: none;
|
||||
font-weight: bold;
|
||||
transition: none;
|
||||
}
|
||||
a:hover {
|
||||
text-decoration: underline;
|
||||
|
||||
.sample-link:hover {
|
||||
color: var(--accent-cyan);
|
||||
}
|
||||
p {
|
||||
color: #8a95a5;
|
||||
font-size: 0.9rem;
|
||||
margin-top: 8px;
|
||||
margin-bottom: 0;
|
||||
line-height: 1.5;
|
||||
|
||||
.badge {
|
||||
font-family: 'IBM Plex Mono', monospace;
|
||||
font-size: 0.72rem;
|
||||
padding: 2px 6px;
|
||||
border-radius: 2px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.badge-html { background-color: rgba(0, 240, 255, 0.15); color: var(--accent-cyan); }
|
||||
.badge-md { background-color: rgba(255, 183, 0, 0.15); color: var(--accent-amber); }
|
||||
|
||||
.sample-filename {
|
||||
font-family: 'JetBrains Mono', monospace;
|
||||
font-size: 0.78rem;
|
||||
color: var(--text-muted);
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.sample-desc {
|
||||
font-size: 0.88rem;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
/* Footer */
|
||||
.catalog-footer {
|
||||
margin-top: 40px;
|
||||
padding-top: 16px;
|
||||
border-top: 1px solid var(--border-color);
|
||||
font-family: 'IBM Plex Mono', monospace;
|
||||
font-size: 0.78rem;
|
||||
color: var(--text-muted);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h1>Design Spec Samples</h1>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="homepage.html">Sample 1: Developer Homepage (Terminal/Minimalist Spec)</a>
|
||||
<p>
|
||||
A premium, dark-mode native developer homepage modeled after modern, high-density terminal setups and IDEs. Adheres strictly to the guidelines: no glassmorphism, no rounded blobs, and pure solid color layouts.
|
||||
</p>
|
||||
</li>
|
||||
<li>
|
||||
<a href="split-panel.html">Sample 2: Split Panel Layout (ASCII Animation & Scrollable Tiles)</a>
|
||||
<p>
|
||||
A dashboard/panel layout with a sticky site nav header, a left panel featuring an animated terminal ASCII character, and a right panel containing a scrollable feed of developer project cards.
|
||||
</p>
|
||||
</li>
|
||||
<li>
|
||||
<a href="companion.html">Sample 3: Companion Layout (Interactive Daemon & Ultra-Minimal Cards)</a>
|
||||
<p>
|
||||
A 50/50 vertical split layout page where the left column contains content cards and the right column houses a persistent, reactive ASCII companion. Employs ultra-minimal borders and discrete state updates.
|
||||
</p>
|
||||
</li>
|
||||
<li>
|
||||
<a href="document-flow.html">Sample 4: Document Flow Layout (Scroll-Tracker Daemon & Seamless Document Stream)</a>
|
||||
<p>
|
||||
A continuous document reading flow that removes 4-sided bounding boxes and master-detail click affordances. Features a fixed left pane with an IntersectionObserver scroll-tracker daemon.
|
||||
</p>
|
||||
</li>
|
||||
<li>
|
||||
<a href="portfolio.html">Sample 5: River Rooks Portfolio (Single-Page Landing Page)</a>
|
||||
<p>
|
||||
A temporary, single-column digital business card and landing page conforming strictly to portfolio-spec.md. Features a 65ch centered flow, 8x8px active status dot, terminal stdout block, active stack tags, and piped link footer.
|
||||
</p>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<header class="catalog-header">
|
||||
<h1 class="catalog-title">
|
||||
<span class="status-dot"></span>
|
||||
DESIGN SPEC SAMPLES CATALOG
|
||||
</h1>
|
||||
<div class="catalog-meta">
|
||||
<span>PATH: /samples/</span>
|
||||
<span id="file-counter">SCANNING DIRECTORY...</span>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- Filter Input -->
|
||||
<div class="filter-bar">
|
||||
<input type="text" id="search-box" class="search-input" placeholder="Search samples by name, keyword, or filename... ($ grep -i)" oninput="filterSamples()">
|
||||
</div>
|
||||
|
||||
<!-- Dynamic Catalog Container -->
|
||||
<main id="samples-container" class="samples-list">
|
||||
<!-- Rendered dynamically by JavaScript -->
|
||||
</main>
|
||||
|
||||
<footer class="catalog-footer">
|
||||
<div>Unified Design Language Compliant</div>
|
||||
<div>POSIX / Terminal Minimalist Spec</div>
|
||||
</footer>
|
||||
|
||||
<script>
|
||||
// Known files catalog with fallback metadata definitions
|
||||
const knownFiles = [
|
||||
{
|
||||
file: 'unified-design-specification.md',
|
||||
title: 'Unified Design Specification (Master Brief)',
|
||||
type: 'md',
|
||||
desc: 'The master specification uniting Homelab Services Directory, Technical Blog/Notes, and Resume/Portfolio into a dark slate (#0d0f12), dual-typography (IBM Plex Mono + Inter), instant snap interaction language.'
|
||||
},
|
||||
{
|
||||
file: 'sample-dashboard.html',
|
||||
title: 'Sample 8: Terminal Workspace Dashboard (3-Tile Split)',
|
||||
type: 'html',
|
||||
desc: 'A 3-tile modal editor workspace layout (Neovim/Tmux style) featuring live homelab services, resume bio, article log stream, and interactive vim command bar.'
|
||||
},
|
||||
{
|
||||
file: 'sample-command-center.html',
|
||||
title: 'Sample 9: Command Center (Zed/Ghostty Tabbed Utility)',
|
||||
type: 'html',
|
||||
desc: 'A tabbed single-pane utility layout inspired by Zed Editor and Ghostty. Features keyboard navigation hotkeys [1], [2], [3] for Services, Blog, and Resume tabs.'
|
||||
},
|
||||
{
|
||||
file: 'sample-dual-pane-explorer.html',
|
||||
title: 'Sample 10: Dual-Pane Tree Explorer (Helix File Tree)',
|
||||
type: 'html',
|
||||
desc: 'A split-screen file-tree explorer featuring a left tree sidebar, document view container, and an interactive ASCII daemon mascot (sys-daemon) reacting to item selection.'
|
||||
},
|
||||
{
|
||||
file: 'homepage.html',
|
||||
title: 'Sample 1: Developer Homepage (Terminal Minimalist Spec)',
|
||||
type: 'html',
|
||||
desc: 'A dark-mode native developer homepage modeled after modern, high-density terminal setups and IDEs. Adheres strictly to zero glassmorphism and solid color layouts.'
|
||||
},
|
||||
{
|
||||
file: 'split-panel.html',
|
||||
title: 'Sample 2: Split Panel Layout (ASCII Animation & Scrollable Tiles)',
|
||||
type: 'html',
|
||||
desc: 'A dashboard layout with a sticky site nav header, left panel with animated terminal ASCII character, and right panel with scrollable developer project cards.'
|
||||
},
|
||||
{
|
||||
file: 'companion.html',
|
||||
title: 'Sample 3: Companion Layout (Interactive Daemon & Minimal Cards)',
|
||||
type: 'html',
|
||||
desc: 'A 50/50 vertical split layout with content cards on the left and a persistent, reactive ASCII companion on the right with discrete state updates.'
|
||||
},
|
||||
{
|
||||
file: 'document-flow.html',
|
||||
title: 'Sample 4: Document Flow Layout (Scroll-Tracker Daemon)',
|
||||
type: 'html',
|
||||
desc: 'A continuous document reading flow removing 4-sided bounding boxes, featuring a left pane with an IntersectionObserver scroll-tracker daemon.'
|
||||
},
|
||||
{
|
||||
file: 'portfolio.html',
|
||||
title: 'Sample 5: River Rooks Portfolio (Single-Page Business Card)',
|
||||
type: 'html',
|
||||
desc: 'A single-column digital business card landing page conforming to portfolio-spec.md with terminal stdout block, active stack tags, and piped footer.'
|
||||
},
|
||||
{
|
||||
file: 'homelab.html',
|
||||
title: 'Sample 6: Homelab Lander & Infrastructure Directory',
|
||||
type: 'html',
|
||||
desc: 'A public-facing lander for self-hosted homelab infrastructure featuring category filters, service cards, telemetry, and ASCII network topology routing map.'
|
||||
},
|
||||
{
|
||||
file: 'public-services.html',
|
||||
title: 'Sample 7: Public Services & Applications Portal',
|
||||
type: 'html',
|
||||
desc: 'A quick-access launcher portal for self-hosted web tools (Git forge, CyberChef, Stirling PDF, media) with search, filters, and access level badges.'
|
||||
},
|
||||
{
|
||||
file: 'design-specification.md',
|
||||
title: 'Design Specification (Primary Technical Brief)',
|
||||
type: 'md',
|
||||
desc: 'Primary specification document detailing technical web architecture guidelines, typography rules, color palette, and global anti-pattern constraints.'
|
||||
},
|
||||
{
|
||||
file: 'portfolio-spec.md',
|
||||
title: 'Portfolio Specification (Landing Page Brief)',
|
||||
type: 'md',
|
||||
desc: 'Specification sheet for the single-page under-construction portfolio card layout.'
|
||||
},
|
||||
{
|
||||
file: 'sample3-spec-sheet.md',
|
||||
title: 'Sample 3 Specification (Companion Layout Brief)',
|
||||
type: 'md',
|
||||
desc: 'Specification sheet detailing the split-screen ASCII companion interaction suppression policy.'
|
||||
}
|
||||
];
|
||||
|
||||
let allItems = [];
|
||||
|
||||
async function initCatalog() {
|
||||
allItems = [...knownFiles];
|
||||
|
||||
// Attempt dynamic discovery via fetch directory listing if web server supports autoindex
|
||||
try {
|
||||
const response = await fetch('./');
|
||||
if (response.ok) {
|
||||
const htmlText = await textResponse(response);
|
||||
const parser = new DOMParser();
|
||||
const doc = parser.parseFromString(htmlText, 'text/html');
|
||||
const links = Array.from(doc.querySelectorAll('a'))
|
||||
.map(a => a.getAttribute('href'))
|
||||
.filter(href => href && (href.endsWith('.html') || href.endsWith('.md')) && href !== 'index.html');
|
||||
|
||||
// Merge dynamically discovered files if any are missing from knownFiles
|
||||
links.forEach(href => {
|
||||
const cleanName = href.replace('./', '');
|
||||
if (!allItems.some(item => item.file === cleanName)) {
|
||||
const isHtml = cleanName.endsWith('.html');
|
||||
allItems.push({
|
||||
file: cleanName,
|
||||
title: cleanName,
|
||||
type: isHtml ? 'html' : 'md',
|
||||
desc: `Dynamically discovered ${isHtml ? 'HTML sample' : 'Markdown specification'} file.`
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
} catch (err) {
|
||||
console.log('Directory autoindex fetch skipped, rendering fallback manifest.');
|
||||
}
|
||||
|
||||
renderCatalog(allItems);
|
||||
}
|
||||
|
||||
async function textResponse(res) {
|
||||
return await res.text();
|
||||
}
|
||||
|
||||
function renderCatalog(items) {
|
||||
const container = document.getElementById('samples-container');
|
||||
const counter = document.getElementById('file-counter');
|
||||
|
||||
counter.innerText = `${items.length} FILES INDEXED`;
|
||||
container.innerHTML = '';
|
||||
|
||||
if (items.length === 0) {
|
||||
container.innerHTML = `<div style="color: var(--text-muted); font-family: monospace;">No matching sample files found.</div>`;
|
||||
return;
|
||||
}
|
||||
|
||||
items.forEach(item => {
|
||||
const card = document.createElement('div');
|
||||
card.className = 'sample-card';
|
||||
|
||||
const badgeClass = item.type === 'html' ? 'badge-html' : 'badge-md';
|
||||
const badgeLabel = item.type === 'html' ? 'HTML SAMPLE' : 'MARKDOWN SPEC';
|
||||
|
||||
card.innerHTML = `
|
||||
<div class="sample-header">
|
||||
<a href="${item.file}" class="sample-link">${item.title}</a>
|
||||
<span class="badge ${badgeClass}">${badgeLabel}</span>
|
||||
</div>
|
||||
<div class="sample-filename">file:///samples/${item.file}</div>
|
||||
<div class="sample-desc">${item.desc}</div>
|
||||
`;
|
||||
|
||||
container.appendChild(card);
|
||||
});
|
||||
}
|
||||
|
||||
function filterSamples() {
|
||||
const query = document.getElementById('search-box').value.toLowerCase().trim();
|
||||
const filtered = allItems.filter(item =>
|
||||
item.title.toLowerCase().includes(query) ||
|
||||
item.file.toLowerCase().includes(query) ||
|
||||
item.desc.toLowerCase().includes(query)
|
||||
);
|
||||
renderCatalog(filtered);
|
||||
}
|
||||
|
||||
document.addEventListener('DOMContentLoaded', initCatalog);
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
901
samples/public-services.html
Normal file
901
samples/public-services.html
Normal file
@@ -0,0 +1,901 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>River Rooks | Public Services & Applications Portal</title>
|
||||
<meta name="description" content="Public portal for River Rooks self-hosted web applications, developer utilities, media services, and public identity endpoints.">
|
||||
<style>
|
||||
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital,wght@0,400;0,500;0,700;1,400&family=Inter:wght@400;500;700&family=JetBrains+Mono:ital,wght@0,400;0,500;1,400&display=swap');
|
||||
|
||||
:root {
|
||||
--bg-canvas: #0d0f12; /* Deep slate/charcoal */
|
||||
--bg-surface: #121417; /* Solid surface container */
|
||||
--bg-surface-alt: #181b21; /* Slightly lighter surface card */
|
||||
--border-color: #2b303b; /* Low-contrast 1px border */
|
||||
--border-active: #ffb000; /* Active Amber border */
|
||||
--text-primary: #e0e6f0; /* Off-white prose */
|
||||
--text-muted: #8a95a5; /* Monospaced metadata gray */
|
||||
--accent: #ffb000; /* High-visibility Amber terminal accent */
|
||||
--accent-cyan: #00f0ff; /* Cyan secondary accent */
|
||||
--accent-green: #00ff66; /* Green status indicator */
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--bg-canvas);
|
||||
color: var(--text-primary);
|
||||
font-family: 'Inter', sans-serif;
|
||||
line-height: 1.65;
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
/* Sticky Navigation Header */
|
||||
.sticky-header {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
height: 56px;
|
||||
background-color: var(--bg-canvas);
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 0 24px;
|
||||
z-index: 100;
|
||||
font-family: 'IBM Plex Mono', monospace;
|
||||
}
|
||||
|
||||
.logo-container {
|
||||
font-weight: 700;
|
||||
font-size: 0.92rem;
|
||||
color: var(--text-primary);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.logo-prompt {
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
.header-nav {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.nav-link {
|
||||
color: var(--text-primary);
|
||||
text-decoration: none;
|
||||
font-size: 0.82rem;
|
||||
padding: 4px 8px;
|
||||
border: 1px solid transparent;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
transition: none; /* Zero-delay snap */
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.nav-link:hover {
|
||||
background-color: var(--accent);
|
||||
color: var(--bg-canvas);
|
||||
}
|
||||
|
||||
.nav-link:focus {
|
||||
outline: 2px solid var(--accent);
|
||||
outline-offset: -2px;
|
||||
}
|
||||
|
||||
.nav-link.active::before {
|
||||
content: "> ";
|
||||
color: var(--accent);
|
||||
margin-right: 4px;
|
||||
}
|
||||
|
||||
.nav-link.active:hover::before {
|
||||
color: var(--bg-canvas);
|
||||
}
|
||||
|
||||
/* Main Page Wrapper */
|
||||
.page-wrapper {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding: 40px 24px 60px 24px;
|
||||
}
|
||||
|
||||
.content-container {
|
||||
width: 100%;
|
||||
max-width: 1000px;
|
||||
}
|
||||
|
||||
/* Hero Banner */
|
||||
.hero-header {
|
||||
margin-bottom: 28px;
|
||||
}
|
||||
|
||||
.site-title {
|
||||
font-family: 'IBM Plex Mono', monospace;
|
||||
font-size: 2.2rem;
|
||||
font-weight: 700;
|
||||
color: var(--text-primary);
|
||||
margin-bottom: 8px;
|
||||
letter-spacing: -0.02em;
|
||||
}
|
||||
|
||||
.site-subtitle {
|
||||
font-size: 1rem;
|
||||
color: var(--text-muted);
|
||||
max-width: 70ch;
|
||||
}
|
||||
|
||||
/* Dividers */
|
||||
.section-divider {
|
||||
border: 0;
|
||||
border-top: 1px solid var(--border-color);
|
||||
margin: 32px 0;
|
||||
}
|
||||
|
||||
/* Search & Filter Controls */
|
||||
.controls-panel {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
margin-bottom: 32px;
|
||||
background-color: var(--bg-surface);
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 4px;
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.search-box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background-color: var(--bg-canvas);
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 4px;
|
||||
padding: 8px 12px;
|
||||
font-family: 'IBM Plex Mono', monospace;
|
||||
font-size: 0.88rem;
|
||||
}
|
||||
|
||||
.search-prompt {
|
||||
color: var(--accent);
|
||||
margin-right: 10px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.search-input {
|
||||
background: none;
|
||||
border: none;
|
||||
color: var(--text-primary);
|
||||
font-family: inherit;
|
||||
font-size: inherit;
|
||||
width: 100%;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.search-input::placeholder {
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.filter-bar {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
font-family: 'IBM Plex Mono', monospace;
|
||||
}
|
||||
|
||||
.filter-btn {
|
||||
background-color: var(--bg-canvas);
|
||||
color: var(--text-muted);
|
||||
border: 1px solid var(--border-color);
|
||||
padding: 6px 12px;
|
||||
font-size: 0.8rem;
|
||||
cursor: pointer;
|
||||
font-family: inherit;
|
||||
border-radius: 4px;
|
||||
transition: none; /* Instant snap */
|
||||
}
|
||||
|
||||
.filter-btn:hover {
|
||||
color: var(--text-primary);
|
||||
border-color: var(--accent);
|
||||
}
|
||||
|
||||
.filter-btn.active {
|
||||
background-color: var(--accent);
|
||||
color: var(--bg-canvas);
|
||||
border-color: var(--accent);
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.filter-btn:focus {
|
||||
outline: 2px solid var(--accent);
|
||||
outline-offset: 1px;
|
||||
}
|
||||
|
||||
/* Section Headers */
|
||||
.section-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: baseline;
|
||||
margin-bottom: 16px;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-family: 'IBM Plex Mono', monospace;
|
||||
font-size: 1.15rem;
|
||||
font-weight: 700;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.section-meta {
|
||||
font-family: 'IBM Plex Mono', monospace;
|
||||
font-size: 0.8rem;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
/* Featured Services Grid */
|
||||
.featured-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
|
||||
gap: 16px;
|
||||
margin-bottom: 36px;
|
||||
}
|
||||
|
||||
.featured-card {
|
||||
background-color: var(--bg-surface);
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 4px;
|
||||
padding: 20px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.featured-card:hover {
|
||||
border-color: var(--accent);
|
||||
}
|
||||
|
||||
.featured-badge {
|
||||
align-self: flex-start;
|
||||
font-family: 'IBM Plex Mono', monospace;
|
||||
font-size: 0.72rem;
|
||||
font-weight: 700;
|
||||
color: var(--bg-canvas);
|
||||
background-color: var(--accent);
|
||||
padding: 2px 6px;
|
||||
border-radius: 2px;
|
||||
margin-bottom: 12px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.service-title {
|
||||
font-family: 'IBM Plex Mono', monospace;
|
||||
font-size: 1.1rem;
|
||||
font-weight: 700;
|
||||
color: var(--text-primary);
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.featured-card:hover .service-title {
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
.service-body {
|
||||
font-size: 0.9rem;
|
||||
color: var(--text-muted);
|
||||
margin-bottom: 20px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.action-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
font-family: 'IBM Plex Mono', monospace;
|
||||
font-size: 0.82rem;
|
||||
padding-top: 12px;
|
||||
border-top: 1px solid var(--border-color);
|
||||
}
|
||||
|
||||
.access-tag {
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.launch-btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
background-color: var(--bg-canvas);
|
||||
color: var(--text-primary);
|
||||
border: 1px solid var(--border-color);
|
||||
padding: 6px 12px;
|
||||
text-decoration: none;
|
||||
font-weight: 500;
|
||||
border-radius: 4px;
|
||||
transition: none;
|
||||
}
|
||||
|
||||
.launch-btn:hover {
|
||||
background-color: var(--accent);
|
||||
color: var(--bg-canvas);
|
||||
border-color: var(--accent);
|
||||
}
|
||||
|
||||
.launch-btn:focus {
|
||||
outline: 2px solid var(--accent);
|
||||
outline-offset: 1px;
|
||||
}
|
||||
|
||||
/* All Public Services Grid */
|
||||
.services-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
|
||||
gap: 16px;
|
||||
margin-bottom: 36px;
|
||||
}
|
||||
|
||||
.service-card {
|
||||
background-color: var(--bg-surface);
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 4px;
|
||||
padding: 18px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
transition: none;
|
||||
}
|
||||
|
||||
.service-card:hover {
|
||||
border-color: var(--border-active);
|
||||
}
|
||||
|
||||
.card-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.card-title {
|
||||
font-family: 'IBM Plex Mono', monospace;
|
||||
font-size: 1rem;
|
||||
font-weight: 700;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.service-card:hover .card-title {
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
.card-category {
|
||||
font-family: 'IBM Plex Mono', monospace;
|
||||
font-size: 0.75rem;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.card-desc {
|
||||
font-size: 0.88rem;
|
||||
color: var(--text-muted);
|
||||
margin-bottom: 16px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.card-footer {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
font-family: 'IBM Plex Mono', monospace;
|
||||
font-size: 0.78rem;
|
||||
padding-top: 10px;
|
||||
border-top: 1px solid var(--border-color);
|
||||
}
|
||||
|
||||
.badge-access {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.dot-public {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
background-color: var(--accent-green);
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.dot-auth {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
background-color: var(--accent);
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.direct-link {
|
||||
color: var(--text-primary);
|
||||
text-decoration: none;
|
||||
padding: 3px 8px;
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 3px;
|
||||
background-color: var(--bg-canvas);
|
||||
}
|
||||
|
||||
.direct-link:hover {
|
||||
background-color: var(--accent);
|
||||
color: var(--bg-canvas);
|
||||
border-color: var(--accent);
|
||||
}
|
||||
|
||||
/* Public Identity & Quick Keys Box */
|
||||
.identity-box {
|
||||
background-color: var(--bg-surface);
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 4px;
|
||||
padding: 20px;
|
||||
font-family: 'JetBrains Mono', monospace;
|
||||
margin-bottom: 36px;
|
||||
}
|
||||
|
||||
.identity-title {
|
||||
font-size: 1rem;
|
||||
font-weight: 700;
|
||||
color: var(--text-primary);
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
|
||||
.key-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 10px 0;
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
font-size: 0.83rem;
|
||||
flex-wrap: wrap;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.key-row:last-child {
|
||||
border-bottom: none;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
.key-label {
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.key-value {
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.copy-btn {
|
||||
background-color: var(--bg-canvas);
|
||||
color: var(--text-primary);
|
||||
border: 1px solid var(--border-color);
|
||||
padding: 4px 8px;
|
||||
font-family: inherit;
|
||||
font-size: 0.75rem;
|
||||
cursor: pointer;
|
||||
border-radius: 3px;
|
||||
transition: none;
|
||||
}
|
||||
|
||||
.copy-btn:hover {
|
||||
background-color: var(--accent);
|
||||
color: var(--bg-canvas);
|
||||
}
|
||||
|
||||
/* Piped Footer Links */
|
||||
.footer-links {
|
||||
font-family: 'IBM Plex Mono', monospace;
|
||||
font-size: 0.85rem;
|
||||
color: var(--text-muted);
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 12px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.footer-link {
|
||||
color: var(--text-primary);
|
||||
text-decoration: none;
|
||||
padding: 2px 6px;
|
||||
transition: none; /* Zero-delay snap */
|
||||
}
|
||||
|
||||
.footer-link:hover {
|
||||
background-color: var(--accent);
|
||||
color: var(--bg-canvas);
|
||||
}
|
||||
|
||||
.footer-link:focus {
|
||||
outline: 2px solid var(--accent);
|
||||
outline-offset: -2px;
|
||||
}
|
||||
|
||||
.pipe {
|
||||
color: var(--border-color);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- Sticky Header -->
|
||||
<header class="sticky-header">
|
||||
<div class="logo-container">
|
||||
<span class="logo-prompt">$</span> agy --page=public-services
|
||||
</div>
|
||||
<nav class="header-nav" aria-label="Main Navigation">
|
||||
<a href="index.html" class="nav-link">Catalog</a>
|
||||
<a href="homepage.html" class="nav-link">Sample 1</a>
|
||||
<a href="split-panel.html" class="nav-link">Sample 2</a>
|
||||
<a href="companion.html" class="nav-link">Sample 3</a>
|
||||
<a href="document-flow.html" class="nav-link">Sample 4</a>
|
||||
<a href="portfolio.html" class="nav-link">Sample 5</a>
|
||||
<a href="homelab.html" class="nav-link">Sample 6</a>
|
||||
<a href="public-services.html" class="nav-link active">Sample 7 (Public Services)</a>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<!-- Page Content Area -->
|
||||
<div class="page-wrapper">
|
||||
<main class="content-container">
|
||||
|
||||
<!-- Hero Header -->
|
||||
<header class="hero-header">
|
||||
<h1 class="site-title">Public Services Portal</h1>
|
||||
<p class="site-subtitle">
|
||||
Direct access to public self-hosted web applications, developer utilities, repository mirrors, and interactive tools operated by River Rooks.
|
||||
</p>
|
||||
</header>
|
||||
|
||||
<!-- Instant Search & Category Filter Controls -->
|
||||
<section aria-label="Search and Filter Controls">
|
||||
<div class="controls-panel">
|
||||
<div class="search-box">
|
||||
<span class="search-prompt">$ search_services</span>
|
||||
<input type="text" id="searchInput" class="search-input" placeholder="type service name, tag, or technology..." aria-label="Search Public Services">
|
||||
</div>
|
||||
<div class="filter-bar" id="filterBar" role="tablist" aria-label="Service Categories">
|
||||
<button class="filter-btn active" data-filter="all" role="tab" aria-selected="true">All Services</button>
|
||||
<button class="filter-btn" data-filter="dev" role="tab">Developer Services</button>
|
||||
<button class="filter-btn" data-filter="tools" role="tab">Utilities & Tools</button>
|
||||
<button class="filter-btn" data-filter="media" role="tab">Media & Content</button>
|
||||
<button class="filter-btn" data-filter="security" role="tab">Identity & Security</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Featured Services Section -->
|
||||
<section aria-label="Featured Public Services">
|
||||
<div class="section-header">
|
||||
<h2 class="section-title">featured_flagships</h2>
|
||||
<span class="section-meta">Primary Public Endpoints</span>
|
||||
</div>
|
||||
|
||||
<div class="featured-grid">
|
||||
|
||||
<!-- Forgejo -->
|
||||
<article class="featured-card">
|
||||
<div>
|
||||
<span class="featured-badge">Open Source Git Forge</span>
|
||||
<h3 class="service-title">Forgejo Repositories</h3>
|
||||
<p class="service-body">
|
||||
Self-hosted Git platform hosting public source code for network security scripts, Neovim dotfiles, Ansible playbooks, and Docker compose templates.
|
||||
</p>
|
||||
</div>
|
||||
<div class="action-row">
|
||||
<span class="access-tag">Access: Public Read</span>
|
||||
<a href="#" class="launch-btn">Explore Repos ↗</a>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<!-- CyberChef -->
|
||||
<article class="featured-card">
|
||||
<div>
|
||||
<span class="featured-badge">Security Utility</span>
|
||||
<h3 class="service-title">CyberChef Workbench</h3>
|
||||
<p class="service-body">
|
||||
Web-based data transformation tool for hex decoding, Base64 operations, regex extraction, cryptographic hashing, and CTF payload analysis.
|
||||
</p>
|
||||
</div>
|
||||
<div class="action-row">
|
||||
<span class="access-tag">Access: Open Web</span>
|
||||
<a href="#" class="launch-btn">Launch App ↗</a>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<!-- Stirling PDF -->
|
||||
<article class="featured-card">
|
||||
<div>
|
||||
<span class="featured-badge">Document Tools</span>
|
||||
<h3 class="service-title">Stirling PDF Studio</h3>
|
||||
<p class="service-body">
|
||||
Locally hosted document processing suite for merging, splitting, OCR extraction, password encryption, and PDF page manipulation.
|
||||
</p>
|
||||
</div>
|
||||
<div class="action-row">
|
||||
<span class="access-tag">Access: Open Web</span>
|
||||
<a href="#" class="launch-btn">Launch App ↗</a>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<!-- All Public Services Catalog Grid -->
|
||||
<section aria-label="Complete Public Services Directory">
|
||||
<div class="section-header">
|
||||
<h2 class="section-title">services_catalog</h2>
|
||||
<span class="section-meta" id="resultCount">Showing 9 Services</span>
|
||||
</div>
|
||||
|
||||
<div class="services-grid" id="servicesGrid">
|
||||
|
||||
<!-- Forgejo Git -->
|
||||
<article class="service-card" data-category="dev" data-search="forgejo git repo code source open">
|
||||
<div>
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Forgejo Git Forge</h3>
|
||||
<span class="card-category">[#dev-git]</span>
|
||||
</div>
|
||||
<p class="card-desc">Public repository mirror for software projects, dotfiles, and CTF writeups.</p>
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
<span class="badge-access"><span class="dot-public"></span> PUBLIC</span>
|
||||
<a href="#" class="direct-link">git.rooks.dev ↗</a>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<!-- CyberChef -->
|
||||
<article class="service-card" data-category="tools" data-search="cyberchef decode base64 crypto hex ctf">
|
||||
<div>
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">CyberChef Workbench</h3>
|
||||
<span class="card-category">[#security-tool]</span>
|
||||
</div>
|
||||
<p class="card-desc">Cyber Swiss Army Knife for encoding, decoding, hashing, and data parsing.</p>
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
<span class="badge-access"><span class="dot-public"></span> PUBLIC</span>
|
||||
<a href="#" class="direct-link">chef.rooks.dev ↗</a>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<!-- Stirling PDF -->
|
||||
<article class="service-card" data-category="tools" data-search="pdf stirling merge split ocr document">
|
||||
<div>
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Stirling PDF Studio</h3>
|
||||
<span class="card-category">[#pdf-tools]</span>
|
||||
</div>
|
||||
<p class="card-desc">Complete PDF manipulation tool for merging, splitting, and OCR scanning.</p>
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
<span class="badge-access"><span class="dot-public"></span> PUBLIC</span>
|
||||
<a href="#" class="direct-link">pdf.rooks.dev ↗</a>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<!-- Hedgedoc -->
|
||||
<article class="service-card" data-category="dev" data-search="hedgedoc codimd markdown notes collab">
|
||||
<div>
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">HedgeDoc Collaborative</h3>
|
||||
<span class="card-category">[#markdown]</span>
|
||||
</div>
|
||||
<p class="card-desc">Real-time collaborative Markdown editor for technical specs and meeting notes.</p>
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
<span class="badge-access"><span class="dot-public"></span> OPEN</span>
|
||||
<a href="#" class="direct-link">pad.rooks.dev ↗</a>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<!-- Jellyfin Media -->
|
||||
<article class="service-card" data-category="media" data-search="jellyfin video stream media movie tv">
|
||||
<div>
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Jellyfin Media Portal</h3>
|
||||
<span class="card-category">[#media-video]</span>
|
||||
</div>
|
||||
<p class="card-desc">Personal video library with 4K HDR hardware acceleration and mobile streaming.</p>
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
<span class="badge-access"><span class="dot-auth"></span> ACCOUNT REQ</span>
|
||||
<a href="#" class="direct-link">watch.rooks.dev ↗</a>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<!-- Audiobookshelf -->
|
||||
<article class="service-card" data-category="media" data-search="audiobookshelf audio book podcast library">
|
||||
<div>
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Audiobookshelf</h3>
|
||||
<span class="card-category">[#media-audio]</span>
|
||||
</div>
|
||||
<p class="card-desc">Self-hosted audiobook and podcast server with position syncing across devices.</p>
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
<span class="badge-access"><span class="dot-auth"></span> INVITE ONLY</span>
|
||||
<a href="#" class="direct-link">listen.rooks.dev ↗</a>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<!-- Calibre-Web -->
|
||||
<article class="service-card" data-category="media" data-search="calibre ebook pdf book reading library">
|
||||
<div>
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Calibre-Web Library</h3>
|
||||
<span class="card-category">[#ebooks]</span>
|
||||
</div>
|
||||
<p class="card-desc">E-book library catalog with e-reader OPDS feed and browser reading support.</p>
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
<span class="badge-access"><span class="dot-public"></span> PUBLIC READ</span>
|
||||
<a href="#" class="direct-link">read.rooks.dev ↗</a>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<!-- Vaultwarden -->
|
||||
<article class="service-card" data-category="security" data-search="vaultwarden bitwarden password vault secrets 2fa">
|
||||
<div>
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Vaultwarden Password Vault</h3>
|
||||
<span class="card-category">[#secrets]</span>
|
||||
</div>
|
||||
<p class="card-desc">End-to-end encrypted password manager endpoint for authorized client syncing.</p>
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
<span class="badge-access"><span class="dot-auth"></span> 2FA / AUTH</span>
|
||||
<a href="#" class="direct-link">vault.rooks.dev ↗</a>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<!-- Matrix Synapse -->
|
||||
<article class="service-card" data-category="security" data-search="matrix chat element federation identity messaging">
|
||||
<div>
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Matrix Federated Chat</h3>
|
||||
<span class="card-category">[#messaging]</span>
|
||||
</div>
|
||||
<p class="card-desc">Federated Matrix homeserver for encrypted messaging and public discussion rooms.</p>
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
<span class="badge-access"><span class="dot-public"></span> FEDERATED</span>
|
||||
<a href="#" class="direct-link">matrix.rooks.dev ↗</a>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<!-- Public Identity & Key Verification Section -->
|
||||
<section aria-label="Identity and Public Keys">
|
||||
<div class="section-header">
|
||||
<h2 class="section-title">public_keys_&_verification</h2>
|
||||
<span class="section-meta">Cryptographic Identity</span>
|
||||
</div>
|
||||
|
||||
<div class="identity-box">
|
||||
<div class="identity-title">// Public Endpoints & Cryptographic Fingerprints</div>
|
||||
|
||||
<div class="key-row">
|
||||
<div>
|
||||
<span class="key-label">PGP Key Fingerprint:</span><br>
|
||||
<span class="key-value">3F8A B29C 7D1E 4056 9912 A8B0 C4D3 E2F1 8091 22A4</span>
|
||||
</div>
|
||||
<button class="copy-btn" onclick="navigator.clipboard.writeText('3F8AB29C7D1E40569912A8B0C4D3E2F1809122A4')">Copy Key Fingerprint</button>
|
||||
</div>
|
||||
|
||||
<div class="key-row">
|
||||
<div>
|
||||
<span class="key-label">Matrix Handle:</span><br>
|
||||
<span class="key-value">@river:rooks.dev</span>
|
||||
</div>
|
||||
<button class="copy-btn" onclick="navigator.clipboard.writeText('@river:rooks.dev')">Copy Matrix ID</button>
|
||||
</div>
|
||||
|
||||
<div class="key-row">
|
||||
<div>
|
||||
<span class="key-label">Public SSH Key:</span><br>
|
||||
<span class="key-value">ssh-ed25519 AAAAC3NzaC1lZDI1NTE5AAAAIH8q882a... river@rooks.dev</span>
|
||||
</div>
|
||||
<button class="copy-btn" onclick="navigator.clipboard.writeText('ssh-ed25519 AAAAC3NzaC1lZDI1NTE5AAAAIH8q882aZ9kX1m2pL3vN4qR5sT6uV7wX8yZ9river@rooks.dev')">Copy Public Key</button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<!-- Piped Contact Footer -->
|
||||
<footer class="footer-links">
|
||||
<a href="index.html" class="footer-link">Spec Catalog</a>
|
||||
<span class="pipe">|</span>
|
||||
<a href="https://github.com" target="_blank" rel="noopener" class="footer-link">GitHub</a>
|
||||
<span class="pipe">|</span>
|
||||
<a href="mailto:river@example.com" class="footer-link">Email Contact</a>
|
||||
<span class="pipe">|</span>
|
||||
<a href="#" class="footer-link">Download PGP Key</a>
|
||||
<span class="pipe">|</span>
|
||||
<span style="font-size:0.78rem; color:var(--text-muted);">PUBLIC SERVICES PORTAL v2.4</span>
|
||||
</footer>
|
||||
|
||||
</main>
|
||||
</div>
|
||||
|
||||
<!-- Pure Vanilla JS Search & Filter Script -->
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
const searchInput = document.getElementById('searchInput');
|
||||
const filterBtns = document.querySelectorAll('#filterBar .filter-btn');
|
||||
const serviceCards = document.querySelectorAll('#servicesGrid .service-card');
|
||||
const resultCount = document.getElementById('resultCount');
|
||||
|
||||
let currentFilter = 'all';
|
||||
let currentQuery = '';
|
||||
|
||||
function updateResults() {
|
||||
let visibleCount = 0;
|
||||
|
||||
serviceCards.forEach(card => {
|
||||
const category = card.getAttribute('data-category');
|
||||
const searchData = card.getAttribute('data-search').toLowerCase();
|
||||
const cardText = card.innerText.toLowerCase();
|
||||
|
||||
const matchesCategory = (currentFilter === 'all' || category === currentFilter);
|
||||
const matchesQuery = currentQuery === '' || searchData.includes(currentQuery) || cardText.includes(currentQuery);
|
||||
|
||||
if (matchesCategory && matchesQuery) {
|
||||
card.style.display = 'flex';
|
||||
visibleCount++;
|
||||
} else {
|
||||
card.style.display = 'none';
|
||||
}
|
||||
});
|
||||
|
||||
resultCount.textContent = `Showing ${visibleCount} Service${visibleCount !== 1 ? 's' : ''}`;
|
||||
}
|
||||
|
||||
// Filter Buttons Click Listener
|
||||
filterBtns.forEach(btn => {
|
||||
btn.addEventListener('click', () => {
|
||||
filterBtns.forEach(b => {
|
||||
b.classList.remove('active');
|
||||
b.setAttribute('aria-selected', 'false');
|
||||
});
|
||||
|
||||
btn.classList.add('active');
|
||||
btn.setAttribute('aria-selected', 'true');
|
||||
|
||||
currentFilter = btn.getAttribute('data-filter');
|
||||
updateResults();
|
||||
});
|
||||
});
|
||||
|
||||
// Search Input Listener
|
||||
searchInput.addEventListener('input', (e) => {
|
||||
currentQuery = e.target.value.trim().toLowerCase();
|
||||
updateResults();
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
485
samples/sample-command-center.html
Normal file
485
samples/sample-command-center.html
Normal file
@@ -0,0 +1,485 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>River Rooks | Command Center</title>
|
||||
<style>
|
||||
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;700&family=Inter:wght@400;500;700&family=JetBrains+Mono:wght@400;500;700&display=swap');
|
||||
|
||||
:root {
|
||||
--bg-canvas: #0d0f12;
|
||||
--bg-surface: #121417;
|
||||
--bg-elevated: #1c1f26;
|
||||
--border-color: #2b303b;
|
||||
--text-primary: #e0e6f0;
|
||||
--text-muted: #8a95a5;
|
||||
--accent-cyan: #00f0ff;
|
||||
--accent-green: #00e676;
|
||||
--accent-amber: #ffb700;
|
||||
}
|
||||
|
||||
* { box-sizing: border-box; margin: 0; padding: 0; }
|
||||
|
||||
body {
|
||||
background-color: var(--bg-canvas);
|
||||
color: var(--text-primary);
|
||||
font-family: 'Inter', sans-serif;
|
||||
line-height: 1.6;
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
/* Command Center Top Navigation Header */
|
||||
.app-header {
|
||||
background-color: var(--bg-surface);
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
padding: 0 16px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
height: 48px;
|
||||
}
|
||||
|
||||
.brand-title {
|
||||
font-family: 'IBM Plex Mono', monospace;
|
||||
font-size: 0.95rem;
|
||||
font-weight: 700;
|
||||
color: var(--text-primary);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.status-dot {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
background-color: var(--accent-cyan);
|
||||
}
|
||||
|
||||
/* Zed-Style Editor Tabs */
|
||||
.nav-tabs {
|
||||
display: flex;
|
||||
gap: 2px;
|
||||
height: 100%;
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.tab-btn {
|
||||
background-color: var(--bg-canvas);
|
||||
border: 1px solid var(--border-color);
|
||||
border-bottom: none;
|
||||
color: var(--text-muted);
|
||||
font-family: 'IBM Plex Mono', monospace;
|
||||
font-size: 0.82rem;
|
||||
padding: 8px 16px;
|
||||
cursor: pointer;
|
||||
border-top-left-radius: 4px;
|
||||
border-top-right-radius: 4px;
|
||||
transition: none; /* Instant snap */
|
||||
}
|
||||
|
||||
.tab-btn:hover {
|
||||
color: var(--text-primary);
|
||||
background-color: var(--bg-elevated);
|
||||
}
|
||||
|
||||
.tab-btn.active {
|
||||
background-color: var(--bg-surface);
|
||||
color: var(--accent-cyan);
|
||||
border-top: 2px solid var(--accent-cyan);
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
/* Main Container */
|
||||
.container {
|
||||
max-width: 900px;
|
||||
width: 100%;
|
||||
margin: 32px auto;
|
||||
padding: 0 20px;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.tab-pane {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.tab-pane.active {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* Panel Component */
|
||||
.panel {
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 4px;
|
||||
background-color: var(--bg-surface);
|
||||
overflow: hidden;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.panel-header {
|
||||
background-color: var(--bg-canvas);
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
padding: 10px 16px;
|
||||
font-family: 'IBM Plex Mono', monospace;
|
||||
font-size: 0.85rem;
|
||||
font-weight: 700;
|
||||
color: var(--text-muted);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.panel-body {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
/* Services Grid (Tab 1) */
|
||||
.services-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.service-box {
|
||||
border: 1px solid var(--border-color);
|
||||
background-color: var(--bg-canvas);
|
||||
padding: 14px;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.service-box:hover {
|
||||
border-color: var(--accent-cyan);
|
||||
}
|
||||
|
||||
.service-title {
|
||||
font-family: 'IBM Plex Mono', monospace;
|
||||
font-weight: 700;
|
||||
font-size: 0.92rem;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.service-title a {
|
||||
color: var(--text-primary);
|
||||
text-decoration: none;
|
||||
transition: none;
|
||||
}
|
||||
|
||||
.service-title a:hover {
|
||||
color: var(--accent-cyan);
|
||||
}
|
||||
|
||||
.badge-status {
|
||||
font-size: 0.75rem;
|
||||
padding: 2px 6px;
|
||||
border-radius: 2px;
|
||||
font-family: 'IBM Plex Mono', monospace;
|
||||
}
|
||||
|
||||
.badge-online { background-color: rgba(0, 230, 118, 0.15); color: var(--accent-green); }
|
||||
.badge-internal { background-color: rgba(255, 183, 0, 0.15); color: var(--accent-amber); }
|
||||
|
||||
.service-desc {
|
||||
font-size: 0.85rem;
|
||||
color: var(--text-muted);
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.service-stats {
|
||||
font-family: 'IBM Plex Mono', monospace;
|
||||
font-size: 0.75rem;
|
||||
color: var(--text-muted);
|
||||
border-top: 1px solid var(--border-color);
|
||||
padding-top: 8px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
/* Blog Archive Table (Tab 2) */
|
||||
.blog-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
font-family: 'IBM Plex Mono', monospace;
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
.blog-table th {
|
||||
text-align: left;
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
padding: 10px;
|
||||
color: var(--text-muted);
|
||||
font-size: 0.78rem;
|
||||
}
|
||||
|
||||
.blog-table td {
|
||||
padding: 12px 10px;
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
}
|
||||
|
||||
.blog-table tr:hover td {
|
||||
background-color: var(--bg-canvas);
|
||||
}
|
||||
|
||||
.post-link {
|
||||
color: var(--text-primary);
|
||||
text-decoration: none;
|
||||
font-weight: 500;
|
||||
transition: none;
|
||||
}
|
||||
|
||||
.post-link:hover {
|
||||
color: var(--accent-cyan);
|
||||
}
|
||||
|
||||
.tag-badge {
|
||||
color: var(--text-muted);
|
||||
font-size: 0.78rem;
|
||||
}
|
||||
|
||||
/* Resume Config Document (Tab 3) */
|
||||
.conf-block {
|
||||
background-color: var(--bg-canvas);
|
||||
border: 1px solid var(--border-color);
|
||||
padding: 16px;
|
||||
font-family: 'JetBrains Mono', monospace;
|
||||
font-size: 0.85rem;
|
||||
border-radius: 4px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.conf-key { color: var(--accent-cyan); }
|
||||
.conf-val { color: var(--text-primary); }
|
||||
.conf-comment { color: var(--text-muted); }
|
||||
|
||||
.btn-action {
|
||||
background-color: var(--bg-elevated);
|
||||
border: 1px solid var(--border-color);
|
||||
color: var(--text-primary);
|
||||
font-family: 'IBM Plex Mono', monospace;
|
||||
font-size: 0.85rem;
|
||||
padding: 8px 16px;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
display: inline-block;
|
||||
transition: none;
|
||||
}
|
||||
|
||||
.btn-action:hover {
|
||||
background-color: var(--accent-cyan);
|
||||
color: var(--bg-canvas);
|
||||
}
|
||||
|
||||
/* Footer */
|
||||
.cmd-footer {
|
||||
border-top: 1px solid var(--border-color);
|
||||
background-color: var(--bg-surface);
|
||||
padding: 12px 20px;
|
||||
font-family: 'IBM Plex Mono', monospace;
|
||||
font-size: 0.8rem;
|
||||
color: var(--text-muted);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- Top App Bar & Zed-style Tabs -->
|
||||
<header class="app-header">
|
||||
<div class="brand-title">
|
||||
<span class="status-dot"></span>
|
||||
RIVER ROOKS // COMMAND CENTER
|
||||
</div>
|
||||
|
||||
<nav class="nav-tabs">
|
||||
<button class="tab-btn active" onclick="switchTab('services')">[1] ~/services</button>
|
||||
<button class="tab-btn" onclick="switchTab('blog')">[2] ~/blog</button>
|
||||
<button class="tab-btn" onclick="switchTab('resume')">[3] ~/resume</button>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<!-- Main Container -->
|
||||
<main class="container">
|
||||
|
||||
<!-- Tab 1: Homelab & Public Services Directory -->
|
||||
<div id="tab-services" class="tab-pane active">
|
||||
<div class="panel">
|
||||
<div class="panel-header">
|
||||
<span>/etc/services.d/manifest.json</span>
|
||||
<span>4 SERVICES OPERATIONAL</span>
|
||||
</div>
|
||||
<div class="panel-body">
|
||||
<div class="services-grid">
|
||||
|
||||
<div class="service-box">
|
||||
<div class="service-title">
|
||||
<a href="https://grafana.local" target="_blank">grafana.homelab</a>
|
||||
<span class="badge-status badge-online">ONLINE</span>
|
||||
</div>
|
||||
<p class="service-desc">Real-time metrics, Prometheus scraping, & homelab telemetry dashboards.</p>
|
||||
<div class="service-stats">
|
||||
<span>PING: 4ms</span>
|
||||
<span>TRAEFIK HTTPS</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="service-box">
|
||||
<div class="service-title">
|
||||
<a href="https://vault.local" target="_blank">vault.homelab</a>
|
||||
<span class="badge-status badge-online">ONLINE</span>
|
||||
</div>
|
||||
<p class="service-desc">HashiCorp Vault secret storage, certificate authority, & mTLS renewal.</p>
|
||||
<div class="service-stats">
|
||||
<span>PING: 2ms</span>
|
||||
<span>SEALED: FALSE</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="service-box">
|
||||
<div class="service-title">
|
||||
<a href="https://nextcloud.local" target="_blank">cloud.homelab</a>
|
||||
<span class="badge-status badge-online">ONLINE</span>
|
||||
</div>
|
||||
<p class="service-desc">Encrypted private cloud file storage & automated system backup target.</p>
|
||||
<div class="service-stats">
|
||||
<span>PING: 6ms</span>
|
||||
<span>STORAGE: 1.2TB</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="service-box">
|
||||
<div class="service-title">
|
||||
<a href="https://wireguard.local" target="_blank">wireguard.homelab</a>
|
||||
<span class="badge-status badge-internal">INTERNAL</span>
|
||||
</div>
|
||||
<p class="service-desc">WireGuard mesh VPN gateway connecting cloud VPS instances to homelab node.</p>
|
||||
<div class="service-stats">
|
||||
<span>PING: 12ms</span>
|
||||
<span>PEERS: 6 ACTIVE</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Tab 2: Technical Notes & Blog Archive -->
|
||||
<div id="tab-blog" class="tab-pane">
|
||||
<div class="panel">
|
||||
<div class="panel-header">
|
||||
<span>/var/log/articles.index</span>
|
||||
<span>POST COUNT: 4</span>
|
||||
</div>
|
||||
<div class="panel-body" style="padding: 0;">
|
||||
<table class="blog-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>DATE</th>
|
||||
<th>TITLE</th>
|
||||
<th>TAGS</th>
|
||||
<th>READ TIME</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>2026-08-02</td>
|
||||
<td><a href="#" class="post-link">Hardening Traefik Ingress with HashiCorp Vault mTLS</a></td>
|
||||
<td><span class="tag-badge">[#homelab] [#traefik]</span></td>
|
||||
<td>8 min</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>2026-07-18</td>
|
||||
<td><a href="#" class="post-link">DEFCON CTF Qualifier: Memory Corruption & Heap Exploitation</a></td>
|
||||
<td><span class="tag-badge">[#ctf] [#binary]</span></td>
|
||||
<td>14 min</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>2026-06-29</td>
|
||||
<td><a href="#" class="post-link">Custom Linux Kernel Compilation for BPF Network Tracing</a></td>
|
||||
<td><span class="tag-badge">[#linux] [#ebpf]</span></td>
|
||||
<td>11 min</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>2026-05-14</td>
|
||||
<td><a href="#" class="post-link">Minimalist Dotfiles & Hyprland Keybindings Optimization</a></td>
|
||||
<td><span class="tag-badge">[#hyprland] [#dots]</span></td>
|
||||
<td>5 min</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Tab 3: Resume & Engineering Profile -->
|
||||
<div id="tab-resume" class="tab-pane">
|
||||
<div class="panel">
|
||||
<div class="panel-header">
|
||||
<span>/etc/river_rooks.conf</span>
|
||||
<span>POSIX SPECIFICATION</span>
|
||||
</div>
|
||||
<div class="panel-body">
|
||||
|
||||
<div class="conf-block">
|
||||
<span class="conf-comment"># Identity & System Purpose</span><br>
|
||||
<span class="conf-key">AUTHOR</span> = <span class="conf-val">"River Rooks"</span><br>
|
||||
<span class="conf-key">ROLE</span> = <span class="conf-val">"Systems Architect & Cybersecurity Researcher"</span><br>
|
||||
<span class="conf-key">AFFILIATION</span> = <span class="conf-val">"University of Alabama College of Engineering"</span><br><br>
|
||||
|
||||
<span class="conf-comment"># Active Skillset Matrix</span><br>
|
||||
<span class="conf-key">DOMAINS</span> = [<span class="conf-val">"Network Forensics"</span>, <span class="conf-val">"Self-Hosted Infrastructure"</span>, <span class="conf-val">"Linux Kernel Hardening"</span>]<br>
|
||||
<span class="conf-key">LANGUAGES</span> = [<span class="conf-val">"POSIX sh"</span>, <span class="conf-val">"Python"</span>, <span class="conf-val">"C"</span>, <span class="conf-val">"Lua"</span>]<br>
|
||||
<span class="conf-key">TOOLS</span> = [<span class="conf-val">"Docker"</span>, <span class="conf-val">"Traefik"</span>, <span class="conf-val">"WireGuard"</span>, <span class="conf-val">"Neovim"</span>, <span class="conf-val">"Arch Linux"</span>]
|
||||
</div>
|
||||
|
||||
<p style="font-size: 0.92rem; margin-bottom: 16px;">
|
||||
Focused on building resilient, zero-trust network architectures and low-noise self-hosted environments.
|
||||
Proven CTF participant and open-source dotfiles maintainer.
|
||||
</p>
|
||||
|
||||
<div style="display: flex; gap: 12px;">
|
||||
<a href="#" class="btn-action">Download Resume (.PDF)</a>
|
||||
<a href="#" class="btn-action">Fetch PGP Key</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</main>
|
||||
|
||||
<!-- Command Center Footer -->
|
||||
<footer class="cmd-footer">
|
||||
<div>Keyboard Navigation: Press <kbd>1</kbd>, <kbd>2</kbd>, or <kbd>3</kbd> to switch tabs</div>
|
||||
<div>Ghostty / Zed Terminal Interface</div>
|
||||
</footer>
|
||||
|
||||
<script>
|
||||
function switchTab(tabId) {
|
||||
document.querySelectorAll('.tab-btn').forEach(btn => btn.classList.remove('active'));
|
||||
document.querySelectorAll('.tab-pane').forEach(pane => pane.classList.remove('active'));
|
||||
|
||||
if (tabId === 'services') {
|
||||
document.querySelectorAll('.tab-btn')[0].classList.add('active');
|
||||
document.getElementById('tab-services').classList.add('active');
|
||||
} else if (tabId === 'blog') {
|
||||
document.querySelectorAll('.tab-btn')[1].classList.add('active');
|
||||
document.getElementById('tab-blog').classList.add('active');
|
||||
} else if (tabId === 'resume') {
|
||||
document.querySelectorAll('.tab-btn')[2].classList.add('active');
|
||||
document.getElementById('tab-resume').classList.add('active');
|
||||
}
|
||||
}
|
||||
|
||||
document.addEventListener('keydown', (e) => {
|
||||
if (e.key === '1') switchTab('services');
|
||||
if (e.key === '2') switchTab('blog');
|
||||
if (e.key === '3') switchTab('resume');
|
||||
});
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
434
samples/sample-dashboard.html
Normal file
434
samples/sample-dashboard.html
Normal file
@@ -0,0 +1,434 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>River Rooks | Terminal Workspace Dashboard</title>
|
||||
<style>
|
||||
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;700&family=Inter:wght@400;500;700&family=JetBrains+Mono:wght@400;500;700&display=swap');
|
||||
|
||||
:root {
|
||||
--bg-canvas: #0d0f12;
|
||||
--bg-surface: #121417;
|
||||
--bg-elevated: #1c1f26;
|
||||
--border-color: #2b303b;
|
||||
--text-primary: #e0e6f0;
|
||||
--text-muted: #8a95a5;
|
||||
--accent-cyan: #00f0ff;
|
||||
--accent-green: #00e676;
|
||||
--accent-amber: #ffb700;
|
||||
}
|
||||
|
||||
* { box-sizing: border-box; margin: 0; padding: 0; }
|
||||
|
||||
body {
|
||||
background-color: var(--bg-canvas);
|
||||
color: var(--text-primary);
|
||||
font-family: 'Inter', sans-serif;
|
||||
line-height: 1.6;
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
/* Top Mode/Status Header */
|
||||
.top-bar {
|
||||
background-color: var(--bg-surface);
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
padding: 8px 16px;
|
||||
font-family: 'IBM Plex Mono', monospace;
|
||||
font-size: 0.82rem;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.mode-tag {
|
||||
background-color: var(--accent-cyan);
|
||||
color: var(--bg-canvas);
|
||||
padding: 2px 8px;
|
||||
font-weight: 700;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.filepath {
|
||||
color: var(--text-primary);
|
||||
margin-left: 12px;
|
||||
}
|
||||
|
||||
.status-group {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.status-dot {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
background-color: var(--accent-green);
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
/* Tiled Grid Layout */
|
||||
.dashboard-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 300px 1fr 340px;
|
||||
gap: 16px;
|
||||
padding: 16px;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
.dashboard-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
/* Tile Container */
|
||||
.tile {
|
||||
background-color: var(--bg-surface);
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 4px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.tile-header {
|
||||
background-color: var(--bg-canvas);
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
padding: 8px 14px;
|
||||
font-family: 'IBM Plex Mono', monospace;
|
||||
font-size: 0.85rem;
|
||||
font-weight: 700;
|
||||
color: var(--text-primary);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.tile-body {
|
||||
padding: 16px;
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
/* Services List (Left Tile) */
|
||||
.service-card {
|
||||
border: 1px solid var(--border-color);
|
||||
background-color: var(--bg-canvas);
|
||||
padding: 12px;
|
||||
margin-bottom: 12px;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.service-head {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
font-family: 'IBM Plex Mono', monospace;
|
||||
font-size: 0.85rem;
|
||||
font-weight: 700;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.service-head a {
|
||||
color: var(--text-primary);
|
||||
text-decoration: none;
|
||||
transition: none;
|
||||
}
|
||||
|
||||
.service-head a:hover {
|
||||
color: var(--accent-cyan);
|
||||
}
|
||||
|
||||
.service-meta {
|
||||
font-family: 'IBM Plex Mono', monospace;
|
||||
font-size: 0.75rem;
|
||||
color: var(--text-muted);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.badge-online { color: var(--accent-green); }
|
||||
.badge-internal { color: var(--accent-amber); }
|
||||
|
||||
/* Resume / Main Content (Center Tile) */
|
||||
.hero-title {
|
||||
font-family: 'IBM Plex Mono', monospace;
|
||||
font-size: 1.8rem;
|
||||
font-weight: 700;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
font-family: 'IBM Plex Mono', monospace;
|
||||
font-size: 0.85rem;
|
||||
color: var(--accent-cyan);
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.bio-prose {
|
||||
font-size: 0.95rem;
|
||||
max-width: 65ch;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-family: 'IBM Plex Mono', monospace;
|
||||
font-size: 1rem;
|
||||
font-weight: 700;
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
padding-bottom: 6px;
|
||||
margin: 20px 0 12px 0;
|
||||
}
|
||||
|
||||
.project-card {
|
||||
border: 1px solid var(--border-color);
|
||||
padding: 12px;
|
||||
margin-bottom: 12px;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.project-card:hover {
|
||||
background-color: var(--bg-elevated);
|
||||
}
|
||||
|
||||
.project-title {
|
||||
font-family: 'IBM Plex Mono', monospace;
|
||||
font-size: 0.9rem;
|
||||
font-weight: 700;
|
||||
color: var(--accent-cyan);
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.tag-cluster {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
font-family: 'IBM Plex Mono', monospace;
|
||||
font-size: 0.78rem;
|
||||
color: var(--text-muted);
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
/* Notes / Log Stream (Right Tile) */
|
||||
.article-item {
|
||||
padding: 10px 0;
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
}
|
||||
|
||||
.article-item:last-child { border-bottom: none; }
|
||||
|
||||
.article-date {
|
||||
font-family: 'IBM Plex Mono', monospace;
|
||||
font-size: 0.75rem;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.article-link {
|
||||
font-family: 'IBM Plex Mono', monospace;
|
||||
font-size: 0.85rem;
|
||||
font-weight: 700;
|
||||
color: var(--text-primary);
|
||||
text-decoration: none;
|
||||
display: block;
|
||||
margin: 2px 0;
|
||||
transition: none;
|
||||
}
|
||||
|
||||
.article-link:hover {
|
||||
color: var(--accent-cyan);
|
||||
}
|
||||
|
||||
/* Command Prompt Bar */
|
||||
.cmd-footer {
|
||||
background-color: var(--bg-surface);
|
||||
border-top: 1px solid var(--border-color);
|
||||
padding: 8px 16px;
|
||||
font-family: 'JetBrains Mono', monospace;
|
||||
font-size: 0.82rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.prompt-symbol { color: var(--accent-cyan); font-weight: bold; }
|
||||
.cmd-input {
|
||||
background: none;
|
||||
border: none;
|
||||
color: var(--text-primary);
|
||||
font-family: inherit;
|
||||
font-size: inherit;
|
||||
width: 100%;
|
||||
outline: none;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- Top Status Navigation -->
|
||||
<header class="top-bar">
|
||||
<div>
|
||||
<span class="mode-tag">NORMAL</span>
|
||||
<span class="filepath">/home/river/dashboard.workspace</span>
|
||||
</div>
|
||||
<div class="status-group">
|
||||
<span><span class="status-dot"></span> TRAEFIK: MESH_OK</span>
|
||||
<span>SYS_LOAD: 0.14</span>
|
||||
<span>UPTIME: 99.98%</span>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- Main 3-Tile Dashboard -->
|
||||
<main class="dashboard-grid">
|
||||
|
||||
<!-- Left Tile: Homelab Services Directory -->
|
||||
<section class="tile">
|
||||
<div class="tile-header">
|
||||
<span>/etc/services</span>
|
||||
<span>[4 ACTIVE]</span>
|
||||
</div>
|
||||
<div class="tile-body">
|
||||
|
||||
<div class="service-card">
|
||||
<div class="service-head">
|
||||
<a href="https://grafana.local" target="_blank">grafana.homelab</a>
|
||||
<span class="badge-online">[ONLINE]</span>
|
||||
</div>
|
||||
<p style="font-size: 0.8rem; color: var(--text-muted); margin-bottom: 6px;">Telemetry & Prometheus monitoring dashboards.</p>
|
||||
<div class="service-meta">
|
||||
<span>PORT: :3000</span>
|
||||
<span>HTTPS</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="service-card">
|
||||
<div class="service-head">
|
||||
<a href="https://vault.local" target="_blank">vault.homelab</a>
|
||||
<span class="badge-online">[ONLINE]</span>
|
||||
</div>
|
||||
<p style="font-size: 0.8rem; color: var(--text-muted); margin-bottom: 6px;">HashiCorp Vault secret storage & certificates.</p>
|
||||
<div class="service-meta">
|
||||
<span>PORT: :8200</span>
|
||||
<span>mTLS</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="service-card">
|
||||
<div class="service-head">
|
||||
<a href="https://nextcloud.local" target="_blank">cloud.homelab</a>
|
||||
<span class="badge-online">[ONLINE]</span>
|
||||
</div>
|
||||
<p style="font-size: 0.8rem; color: var(--text-muted); margin-bottom: 6px;">Private encrypted document & data storage.</p>
|
||||
<div class="service-meta">
|
||||
<span>PORT: :443</span>
|
||||
<span>HTTPS</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="service-card">
|
||||
<div class="service-head">
|
||||
<a href="https://wireguard.local" target="_blank">vpn.homelab</a>
|
||||
<span class="badge-internal">[INTERNAL]</span>
|
||||
</div>
|
||||
<p style="font-size: 0.8rem; color: var(--text-muted); margin-bottom: 6px;">WireGuard mesh overlay network ingress.</p>
|
||||
<div class="service-meta">
|
||||
<span>UDP: :51820</span>
|
||||
<span>VPN</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Center Tile: Engineering Resume & Bio -->
|
||||
<section class="tile">
|
||||
<div class="tile-header">
|
||||
<span>~/whoami.md</span>
|
||||
<span>RESUME</span>
|
||||
</div>
|
||||
<div class="tile-body">
|
||||
<h1 class="hero-title">River Rooks</h1>
|
||||
<div class="subtitle">SYSTEMS ARCHITECT & CYBERSECURITY RESEARCHER</div>
|
||||
|
||||
<p class="bio-prose">
|
||||
Computer Science & Cybersecurity student at the University of Alabama College of Engineering.
|
||||
Specializing in low-level network forensics, self-hosted infrastructure resilience, and hardened Linux kernel configurations.
|
||||
</p>
|
||||
|
||||
<h2 class="section-title">active_stack</h2>
|
||||
<div class="tag-cluster">
|
||||
<span>[#network-forensics]</span>
|
||||
<span>[#docker-traefik]</span>
|
||||
<span>[#arch-linux]</span>
|
||||
<span>[#neovim]</span>
|
||||
<span>[#wireguard]</span>
|
||||
<span>[#posix-sh]</span>
|
||||
<span>[#python]</span>
|
||||
<span>[#hashicorp-vault]</span>
|
||||
</div>
|
||||
|
||||
<h2 class="section-title">featured_projects</h2>
|
||||
|
||||
<div class="project-card">
|
||||
<div class="project-title">mesh-topology-builder</div>
|
||||
<p style="font-size: 0.85rem; color: var(--text-primary);">
|
||||
Automated WireGuard mesh network provisioner written in POSIX shell and Python. Generates deterministic keypairs and Traefik routing rules.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="project-card">
|
||||
<div class="project-title">pcap-forensics-parser</div>
|
||||
<p style="font-size: 0.85rem; color: var(--text-primary);">
|
||||
High-throughput PCAP packet analyzer built for CTF competitions to detect anomalous TCP handshake flags and hidden ICMP payloads.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Right Tile: Technical Notes & Blog Stream -->
|
||||
<section class="tile">
|
||||
<div class="tile-header">
|
||||
<span>/var/log/articles.log</span>
|
||||
<span>NOTES</span>
|
||||
</div>
|
||||
<div class="tile-body">
|
||||
|
||||
<div class="article-item">
|
||||
<div class="article-date">2026-08-02 | #HOMELAB</div>
|
||||
<a href="#" class="article-link">Hardening Traefik Ingress with HashiCorp Vault mTLS</a>
|
||||
<p style="font-size: 0.78rem; color: var(--text-muted);">Zero-trust certificate auto-renewal pipeline configuration.</p>
|
||||
</div>
|
||||
|
||||
<div class="article-item">
|
||||
<div class="article-date">2026-07-18 | #CTF</div>
|
||||
<a href="#" class="article-link">DEFCON CTF Qualifier: Memory Corruption & Heap Exploitation</a>
|
||||
<p style="font-size: 0.78rem; color: var(--text-muted);">Deconstructing glibc malloc chunk metadata manipulation.</p>
|
||||
</div>
|
||||
|
||||
<div class="article-item">
|
||||
<div class="article-date">2026-06-29 | #LINUX</div>
|
||||
<a href="#" class="article-link">Custom Linux Kernel Compilation for BPF Network Tracing</a>
|
||||
<p style="font-size: 0.78rem; color: var(--text-muted);">Configuring eBPF probe hooks for real-time socket inspection.</p>
|
||||
</div>
|
||||
|
||||
<div class="article-item">
|
||||
<div class="article-date">2026-05-14 | #HYPRLAND</div>
|
||||
<a href="#" class="article-link">Minimalist Dotfiles & Hyprland Keybindings Optimization</a>
|
||||
<p style="font-size: 0.78rem; color: var(--text-muted);">Ergonomic modal editing & window tiling configuration setup.</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</main>
|
||||
|
||||
<!-- Interactive Terminal Footer Bar -->
|
||||
<footer class="cmd-footer">
|
||||
<span class="prompt-symbol">$</span>
|
||||
<input type="text" class="cmd-input" placeholder="Type :help, :open <service>, or press Ctrl+K for commands..." readonly>
|
||||
</footer>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
384
samples/sample-dual-pane-explorer.html
Normal file
384
samples/sample-dual-pane-explorer.html
Normal file
@@ -0,0 +1,384 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>River Rooks | Dual Pane Explorer</title>
|
||||
<style>
|
||||
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital,wght@0,400;0,500;0,700;1,400&family=Inter:wght@400;500;700&family=JetBrains+Mono:wght@400;500&display=swap');
|
||||
|
||||
:root {
|
||||
--bg-canvas: #0d0f12;
|
||||
--bg-surface: #121417;
|
||||
--bg-elevated: #1c1f26;
|
||||
--border-color: #2b303b;
|
||||
--text-primary: #e0e6f0;
|
||||
--text-muted: #8a95a5;
|
||||
--accent-cyan: #00f0ff;
|
||||
--accent-green: #00e676;
|
||||
--accent-amber: #ffb700;
|
||||
}
|
||||
|
||||
* { box-sizing: border-box; margin: 0; padding: 0; }
|
||||
|
||||
body {
|
||||
background-color: var(--bg-canvas);
|
||||
color: var(--text-primary);
|
||||
font-family: 'Inter', sans-serif;
|
||||
line-height: 1.6;
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* Top Breadcrumb Bar */
|
||||
.top-nav {
|
||||
background-color: var(--bg-surface);
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
height: 42px;
|
||||
padding: 0 16px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
font-family: 'IBM Plex Mono', monospace;
|
||||
font-size: 0.82rem;
|
||||
}
|
||||
|
||||
.status-dot {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
background-color: var(--accent-green);
|
||||
display: inline-block;
|
||||
margin-right: 6px;
|
||||
}
|
||||
|
||||
/* Dual Pane Layout Container */
|
||||
.split-view {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
height: calc(100vh - 42px - 28px);
|
||||
}
|
||||
|
||||
/* Left Sidebar Tree (280px) */
|
||||
.sidebar {
|
||||
width: 280px;
|
||||
background-color: var(--bg-surface);
|
||||
border-right: 1px solid var(--border-color);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
font-family: 'IBM Plex Mono', monospace;
|
||||
font-size: 0.82rem;
|
||||
}
|
||||
|
||||
.sidebar-header {
|
||||
padding: 10px 14px;
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
font-weight: 700;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.tree-view {
|
||||
padding: 12px;
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.tree-folder {
|
||||
font-weight: 700;
|
||||
color: var(--text-primary);
|
||||
margin: 8px 0 4px 0;
|
||||
}
|
||||
|
||||
.tree-item {
|
||||
padding: 4px 8px 4px 16px;
|
||||
color: var(--text-muted);
|
||||
cursor: pointer;
|
||||
border-radius: 2px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
transition: none;
|
||||
}
|
||||
|
||||
.tree-item:hover {
|
||||
color: var(--accent-cyan);
|
||||
background-color: var(--bg-elevated);
|
||||
}
|
||||
|
||||
.tree-item.active {
|
||||
color: var(--accent-cyan);
|
||||
background-color: var(--bg-canvas);
|
||||
border-left: 2px solid var(--accent-cyan);
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
/* Bottom ASCII Companion Panel */
|
||||
.sidebar-companion {
|
||||
border-top: 1px solid var(--border-color);
|
||||
padding: 10px;
|
||||
background-color: var(--bg-canvas);
|
||||
font-family: 'JetBrains Mono', monospace;
|
||||
font-size: 0.72rem;
|
||||
color: var(--text-muted);
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.companion-art {
|
||||
color: var(--accent-cyan);
|
||||
white-space: pre;
|
||||
}
|
||||
|
||||
/* Right Document Viewer */
|
||||
.main-pane {
|
||||
flex: 1;
|
||||
padding: 28px;
|
||||
overflow-y: auto;
|
||||
background-color: var(--bg-canvas);
|
||||
}
|
||||
|
||||
.doc-container {
|
||||
max-width: 65ch;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.doc-path {
|
||||
font-family: 'IBM Plex Mono', monospace;
|
||||
font-size: 0.8rem;
|
||||
color: var(--text-muted);
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.doc-title {
|
||||
font-family: 'IBM Plex Mono', monospace;
|
||||
font-size: 1.8rem;
|
||||
font-weight: 700;
|
||||
margin-bottom: 16px;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.code-block {
|
||||
border: 1px solid var(--border-color);
|
||||
background-color: var(--bg-surface);
|
||||
font-family: 'JetBrains Mono', monospace;
|
||||
font-size: 0.82rem;
|
||||
border-radius: 4px;
|
||||
margin: 16px 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.code-header {
|
||||
background-color: var(--bg-canvas);
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
padding: 6px 12px;
|
||||
font-size: 0.75rem;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.code-content {
|
||||
padding: 12px;
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.tag-cluster {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
font-family: 'IBM Plex Mono', monospace;
|
||||
font-size: 0.78rem;
|
||||
color: var(--text-muted);
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
/* Bottom Status Bar */
|
||||
.status-bar {
|
||||
height: 28px;
|
||||
background-color: var(--bg-surface);
|
||||
border-top: 1px solid var(--border-color);
|
||||
padding: 0 16px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
font-family: 'IBM Plex Mono', monospace;
|
||||
font-size: 0.75rem;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- Top Breadcrumbs Bar -->
|
||||
<header class="top-nav">
|
||||
<div>
|
||||
<span class="status-dot"></span>
|
||||
<span>RIVER ROOKS // TREE EXPLORER</span>
|
||||
</div>
|
||||
<div>
|
||||
<span>POSITION: /home/river/services/grafana.md</span>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- Dual Split View -->
|
||||
<div class="split-view">
|
||||
|
||||
<!-- Left Explorer Sidebar -->
|
||||
<aside class="sidebar">
|
||||
<div class="sidebar-header">FILE SYSTEM EXPLORER</div>
|
||||
|
||||
<div class="tree-view">
|
||||
<div class="tree-folder">▾ /services/</div>
|
||||
<div class="tree-item active" onclick="selectItem(this, 'grafana')">grafana.md <span>[SVC]</span></div>
|
||||
<div class="tree-item" onclick="selectItem(this, 'vault')">vault.md <span>[SVC]</span></div>
|
||||
<div class="tree-item" onclick="selectItem(this, 'wireguard')">wireguard.md <span>[SVC]</span></div>
|
||||
|
||||
<div class="tree-folder">▾ /notes/</div>
|
||||
<div class="tree-item" onclick="selectItem(this, 'traefik-note')">traefik-mtls.md <span>[BLOG]</span></div>
|
||||
<div class="tree-item" onclick="selectItem(this, 'ctf-note')">defcon-ctf.md <span>[BLOG]</span></div>
|
||||
|
||||
<div class="tree-folder">▾ /resume/</div>
|
||||
<div class="tree-item" onclick="selectItem(this, 'whoami')">whoami.md <span>[CV]</span></div>
|
||||
<div class="tree-item" onclick="selectItem(this, 'stack')">active_stack.conf <span>[CV]</span></div>
|
||||
</div>
|
||||
|
||||
<!-- ASCII Companion Panel -->
|
||||
<div class="sidebar-companion">
|
||||
<div class="companion-art" id="mascot-art">
|
||||
/\___/\
|
||||
( o o ) sys-daemon
|
||||
( =^= ) STATUS: IDLE
|
||||
\__*__/ LOG: ready█
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<!-- Right Main Document View -->
|
||||
<main class="main-pane">
|
||||
<div class="doc-container" id="doc-view">
|
||||
|
||||
<!-- Default Content: Grafana Service -->
|
||||
<div class="doc-path">file:///home/river/services/grafana.md</div>
|
||||
<h1 class="doc-title">Service: grafana.homelab</h1>
|
||||
|
||||
<p>
|
||||
Primary telemetry and Prometheus monitoring dashboard. Aggregates host node resource usage, Docker container stats, and Traefik router throughput.
|
||||
</p>
|
||||
|
||||
<div class="code-block">
|
||||
<div class="code-header">docker-compose.yml</div>
|
||||
<div class="code-content">
|
||||
<span style="color: var(--accent-cyan);">services:</span>
|
||||
<span style="color: var(--accent-cyan);">grafana:</span>
|
||||
image: grafana/grafana-oss:latest
|
||||
container_name: homelab_grafana
|
||||
ports:
|
||||
- "3000:3000"
|
||||
restart: unless-stopped
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="tag-cluster">
|
||||
<span>[#homelab]</span>
|
||||
<span>[#prometheus]</span>
|
||||
<span>[#telemetry]</span>
|
||||
<span>[STATUS: ONLINE]</span>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</main>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Bottom Status Bar -->
|
||||
<footer class="status-bar">
|
||||
<div>UTF-8 | LF | POSIX Shell</div>
|
||||
<div>Use Arrow Keys / Mouse to inspect workspace items</div>
|
||||
</footer>
|
||||
|
||||
<script>
|
||||
const docs = {
|
||||
'grafana': `
|
||||
<div class="doc-path">file:///home/river/services/grafana.md</div>
|
||||
<h1 class="doc-title">Service: grafana.homelab</h1>
|
||||
<p>Primary telemetry and Prometheus monitoring dashboard. Aggregates host node resource usage, Docker container stats, and Traefik router throughput.</p>
|
||||
<div class="code-block">
|
||||
<div class="code-header">docker-compose.yml</div>
|
||||
<div class="code-content">
|
||||
<span style="color: var(--accent-cyan);">services:</span>
|
||||
<span style="color: var(--accent-cyan);">grafana:</span>
|
||||
image: grafana/grafana-oss:latest
|
||||
container_name: homelab_grafana
|
||||
ports:
|
||||
- "3000:3000"
|
||||
restart: unless-stopped
|
||||
</div>
|
||||
</div>
|
||||
<div class="tag-cluster"><span>[#homelab]</span><span>[#prometheus]</span><span>[#telemetry]</span><span>[STATUS: ONLINE]</span></div>
|
||||
`,
|
||||
'vault': `
|
||||
<div class="doc-path">file:///home/river/services/vault.md</div>
|
||||
<h1 class="doc-title">Service: vault.homelab</h1>
|
||||
<p>HashiCorp Vault cluster managing secrets, SSH keys, internal PKI certificates, and mTLS auto-renewal for homelab nodes.</p>
|
||||
<div class="code-block">
|
||||
<div class="code-header">vault-config.hcl</div>
|
||||
<div class="code-content">
|
||||
storage "file" { path = "/vault/file" }
|
||||
listener "tcp" { address = "0.0.0.0:8200" tls_disable = 0 }
|
||||
ui = true
|
||||
</div>
|
||||
</div>
|
||||
<div class="tag-cluster"><span>[#vault]</span><span>[#security]</span><span>[#mtls]</span><span>[STATUS: ONLINE]</span></div>
|
||||
`,
|
||||
'wireguard': `
|
||||
<div class="doc-path">file:///home/river/services/wireguard.md</div>
|
||||
<h1 class="doc-title">Service: wireguard.homelab</h1>
|
||||
<p>Encrypted WireGuard mesh network ingress connecting offsite cloud VPS nodes directly to the internal homelab network.</p>
|
||||
<div class="tag-cluster"><span>[#networking]</span><span>[#wireguard]</span><span>[#vpn]</span><span>[STATUS: INTERNAL]</span></div>
|
||||
`,
|
||||
'traefik-note': `
|
||||
<div class="doc-path">file:///home/river/notes/traefik-mtls.md</div>
|
||||
<h1 class="doc-title">Hardening Traefik Ingress with HashiCorp Vault mTLS</h1>
|
||||
<p>Technical write-up detailing zero-trust certificate auto-renewal pipelines using Vault PKI backend and Traefik dynamic configuration reloads.</p>
|
||||
<div class="tag-cluster"><span>[#blog]</span><span>[#traefik]</span><span>[#security]</span><span>[DATE: 2026-08-02]</span></div>
|
||||
`,
|
||||
'ctf-note': `
|
||||
<div class="doc-path">file:///home/river/notes/defcon-ctf.md</div>
|
||||
<h1 class="doc-title">DEFCON CTF Qualifier: Memory Corruption Write-Up</h1>
|
||||
<p>Deep-dive analysis on exploitation techniques involving glibc malloc heap metadata corruption and arbitrary write primitives.</p>
|
||||
<div class="tag-cluster"><span>[#ctf]</span><span>[#binary]</span><span>[#pwn]</span><span>[DATE: 2026-07-18]</span></div>
|
||||
`,
|
||||
'whoami': `
|
||||
<div class="doc-path">file:///home/river/resume/whoami.md</div>
|
||||
<h1 class="doc-title">River Rooks - Biography</h1>
|
||||
<p>Cybersecurity student at the University of Alabama College of Engineering, focusing on network forensics, self-hosted infrastructure, and hardened kernel configs.</p>
|
||||
<div class="tag-cluster"><span>[#cs]</span><span>[#cybersecurity]</span><span>[#resume]</span></div>
|
||||
`,
|
||||
'stack': `
|
||||
<div class="doc-path">file:///home/river/resume/active_stack.conf</div>
|
||||
<h1 class="doc-title">Active Engineering Stack</h1>
|
||||
<p>System configuration & tech stack specifications:</p>
|
||||
<div class="code-block">
|
||||
<div class="code-header">stack.conf</div>
|
||||
<div class="code-content">
|
||||
LANGUAGES="POSIX sh, Python, C, Lua"
|
||||
TOOLS="Docker, Traefik, WireGuard, HashiCorp Vault, Neovim"
|
||||
OS="Arch Linux / POSIX Compliance"
|
||||
</div>
|
||||
</div>
|
||||
`
|
||||
};
|
||||
|
||||
function selectItem(element, docKey) {
|
||||
document.querySelectorAll('.tree-item').forEach(el => el.classList.remove('active'));
|
||||
element.classList.add('active');
|
||||
document.getElementById('doc-view').innerHTML = docs[docKey] || '';
|
||||
|
||||
// Update mascot state
|
||||
const mascot = document.getElementById('mascot-art');
|
||||
mascot.innerText = ` /\\___/\\\n ( - - ) sys-daemon\n ( =o= ) STATUS: READING\n \\__*__/ LOG: ${docKey}_`;
|
||||
|
||||
setTimeout(() => {
|
||||
mascot.innerText = ` /\\___/\\\n ( o o ) sys-daemon\n ( =^= ) STATUS: IDLE\n \\__*__/ LOG: ready█`;
|
||||
}, 1200);
|
||||
}
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
86
samples/unified-design-specification.md
Normal file
86
samples/unified-design-specification.md
Normal file
@@ -0,0 +1,86 @@
|
||||
# Unified Design Specification: Homelab, Blog & Engineering Portfolio
|
||||
|
||||
**Target Platform:** Integrated Personal Site (Public Services Directory, Technical Blog/Notes, Engineering Resume)
|
||||
**Design Philosophy:** High-signal, low-noise. Developer-centric minimalism, modal text editor & terminal emulator craftsmanship.
|
||||
**Vibe References:** Zed Editor, Ghostty, Noctalia.dev, Tiling Window Managers (Hyprland/i3).
|
||||
**Strict Anti-Patterns:** Zero glassmorphism, zero glows/shadows, zero gradients, zero spring animations, zero rounded SaaS "blobs".
|
||||
|
||||
---
|
||||
|
||||
## 1. Executive Summary & Unified Purpose
|
||||
|
||||
This specification unites the design language across three primary user goals:
|
||||
1. **Services Directory:** Instant access, routing links, and status visibility for self-hosted homelab services and public utilities.
|
||||
2. **Technical Notes & Blog:** High-density, comfortable reading experience for deep technical writing (CTF write-ups, architecture specs, config guides, code snippets).
|
||||
3. **Engineering Resume & Portfolio:** A crisp, high-craft presentation of skills, project archives, and active tech stack designed to impress technical recruiters and engineering leaders.
|
||||
|
||||
---
|
||||
|
||||
## 2. Unified Design Language & Rules
|
||||
|
||||
### Global Constraints
|
||||
* **NO Glassmorphism:** Zero `backdrop-filter: blur()`, frosted glass, or translucent overlays.
|
||||
* **NO Glows or Drop Shadows:** Depth is constructed exclusively via subtle surface color contrast and 1px solid borders.
|
||||
* **NO Gradients:** Pure, solid color tokens across canvas, surfaces, and accent elements.
|
||||
* **NO Spring/Float Animations:** Interactions feature instant snapped state transitions (`transition: none;`) or binary 1Hz blinking cursors/indicators.
|
||||
* **Minimal Radii:** Sharp corners preferred. Border radii capped strictly at `0px` to `4px`.
|
||||
|
||||
### Geometry & Spatial Hierarchy
|
||||
* **Grid Baseline:** Strict 4pt / 8pt baseline grid for consistent spacing and padding.
|
||||
* **Reading Density:** Article and prose containers capped at `65ch` max width.
|
||||
* **Dividers:** Clean 1px solid horizontal lines (`<hr>`) used to delineate major structural sections.
|
||||
|
||||
---
|
||||
|
||||
## 3. Unified Color Palette
|
||||
|
||||
The color system is dark-mode native, built from muted charcoal slate tones reminiscent of modern terminal emulators and modal text editors.
|
||||
|
||||
| Token Key | Hex Value | Application & Role |
|
||||
| :--- | :--- | :--- |
|
||||
| `--bg-canvas` | `#0d0f12` | Main canvas background (deep charcoal slate). |
|
||||
| `--bg-surface` | `#121417` | Card backgrounds, terminal blocks, sidebars. |
|
||||
| `--bg-elevated` | `#1c1f26` | Hovered card state, active tab surface. |
|
||||
| `--border-color` | `#2b303b` | Structural 1px grid lines, card borders, horizontal dividers. |
|
||||
| `--text-primary` | `#e0e6f0` | Off-white primary text for headings and body prose. |
|
||||
| `--text-muted` | `#8a95a5` | Monospaced metadata, timestamps, tags, labels, status text. |
|
||||
| `--accent-cyan` | `#00f0ff` | Primary active accent (terminal prompt, active nav snap, focus outline). |
|
||||
| `--accent-green` | `#00e676` | Status indicator: Online / Operational / Verified. |
|
||||
| `--accent-amber` | `#ffb700` | Status indicator: Under Construction / Maintenance / Warning. |
|
||||
|
||||
---
|
||||
|
||||
## 4. Digital & Typographical Language
|
||||
|
||||
### Dual Typography Hierarchy
|
||||
* **Monospace Layer (`IBM Plex Mono`, `JetBrains Mono`):**
|
||||
- **Usage:** Headings (`H1`-`H3`), navigation links, breadcrumbs, tags, terminal code blocks, timestamps, metadata, and keyboard shortcuts (`<kbd>`).
|
||||
- **Weights:** Medium (500), Bold (700).
|
||||
* **Prose Layer (`Inter`, `Geist Sans`):**
|
||||
- **Usage:** Article body prose, project summaries, resume biography.
|
||||
- **Line Height:** `1.65` to `1.7`.
|
||||
- **Weight:** Regular (400).
|
||||
|
||||
### Digital Interface Conventions
|
||||
* **POSIX-Style Path Headers:** Titles and section markers formatted as file paths (e.g., `/var/log/status.txt`, `/etc/services`, `~/notes/ctf-2026.md`).
|
||||
* **Active Status Dots:** Rigid 8x8px square indicators (`.status-dot`) signaling system state (Cyan/Green for operational, Amber for construction).
|
||||
* **Metadata Tag Cluster:** Monospaced bracketed tags (e.g., `[#homelab]`, `[#docker-traefik]`, `[#cybersecurity]`).
|
||||
* **Instantaneous Snap Hover:** Interactive elements transition without delay (`transition: none;`), snapping text to Cyan (`#00f0ff`) or inverting background colors.
|
||||
* **Keyboard Shortcut Badges (`<kbd>`):** Crisp, 1px bordered boxes depicting keys (e.g., `Ctrl` + `K`, `Tab`).
|
||||
|
||||
---
|
||||
|
||||
## 5. Functional Layout Modules
|
||||
|
||||
### A. Homelab & Public Services Directory
|
||||
* Dense tabular grid listing self-hosted apps and public APIs.
|
||||
* Displays service name, description, status badge (`[ONLINE]`, `[INTERNAL]`, `[PUBLIC]`), and routing link.
|
||||
|
||||
### B. Technical Notes & Blog
|
||||
* Tabular article archive indexed by date, title, reading duration, and tags.
|
||||
* Terminal-style code snippets with filename headers (e.g., `traefik.yml`) and copy utility.
|
||||
|
||||
### C. Resume & Portfolio Showcase
|
||||
* Header identity block with `whoami` summary and active stack cluster.
|
||||
* Project showcase cards featuring instant snap state.
|
||||
* Optional integrated ASCII companion daemon (`sys-daemon`) for interactive module inspection.
|
||||
Reference in New Issue
Block a user