blog/samples/sample-dual-pane-explorer.html

<!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 style="display: flex; align-items: center; gap: 12px;">
      <span class="status-dot"></span>
      <span style="font-weight: 700;">RIVER ROOKS // TREE EXPLORER</span>
      <span style="color: var(--border-color);">|</span>
      <nav style="display: flex; gap: 8px; font-size: 0.78rem;">
        <a href="index.html" style="color: var(--text-primary); text-decoration: none;">Catalog</a>
        <span style="color: var(--border-color);">/</span>
        <a href="homepage.html" style="color: var(--text-muted); text-decoration: none;">Sample 1</a>
        <span style="color: var(--border-color);">/</span>
        <a href="homelab.html" style="color: var(--text-muted); text-decoration: none;">Homelab</a>
        <span style="color: var(--border-color);">/</span>
        <a href="public-services.html" style="color: var(--text-muted); text-decoration: none;">Services</a>
        <span style="color: var(--border-color);">/</span>
        <a href="sample-dashboard.html" style="color: var(--text-muted); text-decoration: none;">Dashboard</a>
      </nav>
    </div>
    <div>
      <span style="color: var(--text-muted);">HOST: pve-node02.lan [10GbE]</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, 'traefik')">traefik.md <span>[SVC]</span></div>
        <div class="tree-item" onclick="selectItem(this, 'truenas')">truenas.md <span>[SVC]</span></div>
        <div class="tree-item" onclick="selectItem(this, 'vaultwarden')">vaultwarden.md <span>[SVC]</span></div>
        <div class="tree-item" onclick="selectItem(this, 'forgejo')">forgejo.md <span>[SVC]</span></div>
        <div class="tree-item" onclick="selectItem(this, 'cyberchef')">cyberchef.md <span>[SVC]</span></div>

        <div class="tree-folder">▾ /notes/</div>
        <div class="tree-item" onclick="selectItem(this, 'spi-flash')">spi-flash.md <span>[BLOG]</span></div>
        <div class="tree-item" onclick="selectItem(this, 'ha-traefik')">ha-traefik.md <span>[BLOG]</span></div>
        <div class="tree-item" onclick="selectItem(this, 'posix-sh')">posix-sh.md <span>[BLOG]</span></div>
        <div class="tree-item" onclick="selectItem(this, 'ctf-heap')">ctf-heap.md <span>[BLOG]</span></div>

        <div class="tree-folder">▾ /modules/</div>
        <div class="tree-item" onclick="selectItem(this, 'shell-parser')">shell-parser.lua <span>[DEV]</span></div>
        <div class="tree-item" onclick="selectItem(this, 'mesh-builder')">wireguard-mesh.py <span>[DEV]</span></div>
        <div class="tree-item" onclick="selectItem(this, 'zero-logger')">zero-logger.go <span>[DEV]</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: Traefik Proxy -->
        <div class="doc-path">file:///home/river/services/traefik.md</div>
        <h1 class="doc-title">Service: Traefik Proxy (v3.1)</h1>
        
        <p>
          Edge HTTP reverse proxy and load balancer with dynamic Docker provider discovery and ACME Let's Encrypt TLS wildcard certificate management.
        </p>

        <div class="code-block">
          <div class="code-header">traefik.yml</div>
          <div class="code-content">
entryPoints:
  web:
    address: ":80"
  websecure:
    address: ":443"
certificatesResolvers:
  cloudflare:
    acme:
      dnsChallenge:
        provider: cloudflare
          </div>
        </div>

        <div class="tag-cluster">
          <span>[#core]</span>
          <span>[#docker-traefik]</span>
          <span>[PORT: 443/tcp]</span>
          <span>[STATUS: ONLINE]</span>
        </div>

      </div>
    </main>

  </div>

  <!-- Bottom Status Bar -->
  <footer class="status-bar">
    <div>UTF-8 | LF | POSIX Shell</div>
    <div>River Rooks • Canonical Content Dataset Compliant</div>
  </footer>

  <script>
    const docs = {
      'traefik': `
        <div class="doc-path">file:///home/river/services/traefik.md</div>
        <h1 class="doc-title">Service: Traefik Proxy (v3.1)</h1>
        <p>Edge HTTP reverse proxy and load balancer with dynamic Docker provider discovery and ACME Let's Encrypt TLS wildcard certificate management.</p>
        <div class="code-block">
          <div class="code-header">traefik.yml</div>
          <div class="code-content">
entryPoints:
  web:
    address: ":80"
  websecure:
    address: ":443"
certificatesResolvers:
  cloudflare:
    acme:
      dnsChallenge:
        provider: cloudflare
          </div>
        </div>
        <div class="tag-cluster"><span>[#core]</span><span>[#docker-traefik]</span><span>[PORT: 443/tcp]</span><span>[STATUS: ONLINE]</span></div>
      `,
      'truenas': `
        <div class="doc-path">file:///home/river/services/truenas.md</div>
        <h1 class="doc-title">Service: TrueNAS SCALE</h1>
        <p>Primary storage pool managing 48TB ZFS RaidZ2 array across 6x 16TB enterprise SAS drives with daily snapshots and NFS/SMB exports.</p>
        <div class="tag-cluster"><span>[#storage]</span><span>[#zfs]</span><span>[PORT: NFS / SMB]</span><span>[STATUS: ONLINE]</span></div>
      `,
      'vaultwarden': `
        <div class="doc-path">file:///home/river/services/vaultwarden.md</div>
        <h1 class="doc-title">Service: Vaultwarden Secrets</h1>
        <p>Lightweight Rust implementation of the Bitwarden API hosting encrypted credentials, SSH keys, and TOTP authentication tokens.</p>
        <div class="tag-cluster"><span>[#secrets]</span><span>[#security]</span><span>[PORT: 443/tcp]</span><span>[STATUS: 2FA/AUTH]</span></div>
      `,
      'forgejo': `
        <div class="doc-path">file:///home/river/services/forgejo.md</div>
        <h1 class="doc-title">Service: Forgejo Git Forge</h1>
        <p>Self-hosted Git forge hosting homelab infrastructure-as-code repos, Ansible playbooks, dotfiles, and CTF binary writeup scripts.</p>
        <div class="tag-cluster"><span>[#dev-git]</span><span>[#git]</span><span>[PORT: 3000/tcp]</span><span>[STATUS: PUBLIC]</span></div>
      `,
      'cyberchef': `
        <div class="doc-path">file:///home/river/services/cyberchef.md</div>
        <h1 class="doc-title">Service: CyberChef Workbench</h1>
        <p>Web-based data transformation Swiss Army knife for hex decoding, Base64 operations, regex extraction, and CTF payload analysis.</p>
        <div class="tag-cluster"><span>[#security-tool]</span><span>[#crypto]</span><span>[STATUS: PUBLIC]</span></div>
      `,
      'spi-flash': `
        <div class="doc-path">file:///home/river/notes/iot-firmware-spi-extraction.md</div>
        <h1 class="doc-title">Reverse Engineering IoT Firmware: SPI Flash Extraction</h1>
        <p>Physical hardware-level dumping of SPI flash memory chips using Bus Pirate and flashrom to bypass locked bootloaders.</p>
        <div class="code-block">
          <div class="code-header">extract_firmware.sh</div>
          <div class="code-content">
flashrom -p buspirate_spi:dev=/dev/ttyUSB0,spispeed=1M -r firmware_dump.bin
md5sum firmware_dump.bin
          </div>
        </div>
        <div class="tag-cluster"><span>[#firmware]</span><span>[#hardware]</span><span>[#security]</span><span>[DATE: 2026-07-20]</span></div>
      `,
      'ha-traefik': `
        <div class="doc-path">file:///home/river/notes/ha-traefik-docker.md</div>
        <h1 class="doc-title">Building a High-Availability Traefik Router</h1>
        <p>Architecting automated TLS wildcard certificate propagation and dynamic Docker container discovery failover routing.</p>
        <div class="tag-cluster"><span>[#homelab]</span><span>[#docker-traefik]</span><span>[DATE: 2026-07-15]</span></div>
      `,
      'posix-sh': `
        <div class="doc-path">file:///home/river/notes/posix-sh-vs-bash.md</div>
        <h1 class="doc-title">POSIX sh vs. Bash: Portability in Modern Scripts</h1>
        <p>Eliminating bashisms and adhering to IEEE Std 1003.1 for high-speed bootstrapping in Alpine and embedded targets.</p>
        <div class="tag-cluster"><span>[#posix-sh]</span><span>[#unix]</span><span>[DATE: 2026-07-10]</span></div>
      `,
      'ctf-heap': `
        <div class="doc-path">file:///home/river/notes/ctf-heap-glibc-2-35.md</div>
        <h1 class="doc-title">CTF Write-up: Heap Exploitation in glibc 2.35</h1>
        <p>Tcache safe-linking bypass and House of Apple file structure hijacking primitives for arbitrary code execution.</p>
        <div class="tag-cluster"><span>[#ctf]</span><span>[#binary-exploitation]</span><span>[DATE: 2026-06-28]</span></div>
      `,
      'shell-parser': `
        <div class="doc-path">file:///home/river/modules/posix-shell-parser.lua</div>
        <h1 class="doc-title">Module: Custom POSIX Shell Parser (v1.2.0)</h1>
        <p>Zero-allocation Lexer and AST parser written in Lua for real-time syntax coloring in modal editors.</p>
        <div class="code-block">
          <div class="code-header">lexer.lua</div>
          <div class="code-content">
local function tokenize(src)
  local tokens = {}
  for pos, char in ipairs(src) do
    if char == ";" or char == "|" then table.insert(tokens, { type = "OPERATOR", value = char }) end
  end
  return tokens
end
          </div>
        </div>
        <div class="tag-cluster"><span>[#lua]</span><span>[#ast-parser]</span><span>[VERSION: v1.2.0]</span></div>
      `,
      'mesh-builder': `
        <div class="doc-path">file:///home/river/modules/wireguard-mesh.py</div>
        <h1 class="doc-title">Module: WireGuard Mesh Topology Builder (v0.8.4)</h1>
        <p>Matrix topology generator creating atomic configuration files and key pairings across multi-cloud and homelab nodes.</p>
        <div class="tag-cluster"><span>[#networking]</span><span>[#wireguard]</span><span>[VERSION: v0.8.4]</span></div>
      `,
      'zero-logger': `
        <div class="doc-path">file:///home/river/modules/zero-alloc-logger.go</div>
        <h1 class="doc-title">Module: Zero-Allocation Logger (Go v2.1.1)</h1>
        <p>High-throughput structured JSON logger utilizing sync.Pool byte buffers to eliminate heap allocations (>500k ops/sec).</p>
        <div class="tag-cluster"><span>[#golang]</span><span>[#performance]</span><span>[VERSION: v2.1.1]</span></div>
      `,
      'whoami': `
        <div class="doc-path">file:///home/river/resume/whoami.md</div>
        <h1 class="doc-title">River Rooks - Systems Architecture &amp; Cybersecurity</h1>
        <p>Cybersecurity student at the University of Alabama College of Engineering, focusing on network forensics, self-hosted infrastructure, and bare-metal virtualization.</p>
        <div class="tag-cluster"><span>[#cybersecurity]</span><span>[#systems]</span><span>[UA COLLEGE OF ENGINEERING]</span></div>
      `,
      'stack': `
        <div class="doc-path">file:///home/river/resume/active_stack.conf</div>
        <h1 class="doc-title">Active Engineering Stack</h1>
        <div class="code-block">
          <div class="code-header">stack.conf</div>
          <div class="code-content">
DOMAINS="Network Forensics, Self-Hosted Infrastructure, Linux Kernel Hardening"
LANGUAGES="POSIX sh, Python, Go, Rust, Lua, ARM Assembly"
STACK="Traefik v3, WireGuard, Proxmox VE, TrueNAS SCALE, Neovim"
          </div>
        </div>
        <div class="tag-cluster"><span>[#arch-linux]</span><span>[#neovim]</span><span>[#wireguard]</span></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>