phase 2

2026-04-09 18:19:03 -03:00
parent 5921cd6562
commit 5b467ffba8
18 changed files with 1793 additions and 43 deletions
--- a/media/docs/index.html
+++ b/media/docs/index.html
@@ -0,0 +1,168 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<title>Media Transport — Architecture</title>
+<style>
+  * { box-sizing: border-box; margin: 0; padding: 0; }
+
+  body {
+    display: flex;
+    height: 100vh;
+    font-family: monospace;
+    background: #1e1e2e;
+    color: #cdd6f4;
+  }
+
+  nav {
+    width: 220px;
+    min-width: 220px;
+    background: #181825;
+    border-right: 1px solid #313244;
+    display: flex;
+    flex-direction: column;
+    padding: 1rem 0;
+  }
+
+  nav h1 {
+    font-size: 0.75rem;
+    text-transform: uppercase;
+    letter-spacing: 0.1em;
+    color: #6c7086;
+    padding: 0 1rem 0.75rem;
+    border-bottom: 1px solid #313244;
+    margin-bottom: 0.5rem;
+  }
+
+  nav a {
+    display: block;
+    padding: 0.5rem 1rem;
+    color: #cdd6f4;
+    text-decoration: none;
+    font-size: 0.85rem;
+    border-left: 3px solid transparent;
+    transition: background 0.1s, border-color 0.1s;
+  }
+
+  nav a:hover   { background: #313244; }
+  nav a.active  { border-left-color: #89b4fa; color: #89b4fa; background: #1e2d3e; }
+
+  nav .subtitle {
+    font-size: 0.7rem;
+    color: #6c7086;
+    padding: 0 1rem;
+    margin-top: 0.25rem;
+  }
+
+  nav .phase-badge {
+    font-size: 0.65rem;
+    color: #a6e3a1;
+    float: right;
+  }
+
+  nav .section {
+    font-size: 0.65rem;
+    text-transform: uppercase;
+    letter-spacing: 0.08em;
+    color: #6c7086;
+    padding: 1rem 1rem 0.25rem;
+  }
+
+  main {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+  }
+
+  header {
+    padding: 0.75rem 1.25rem;
+    background: #181825;
+    border-bottom: 1px solid #313244;
+    display: flex;
+    align-items: baseline;
+    gap: 0.75rem;
+  }
+
+  header h2 { font-size: 0.95rem; }
+  header .desc { font-size: 0.75rem; color: #6c7086; }
+
+  .viewer {
+    flex: 1;
+    overflow: auto;
+    padding: 1.5rem;
+    display: flex;
+    align-items: flex-start;
+    justify-content: center;
+    background: #1e1e2e;
+  }
+
+  .viewer object,
+  .viewer img {
+    max-width: 100%;
+    border-radius: 6px;
+    box-shadow: 0 4px 24px rgba(0,0,0,0.5);
+  }
+
+  .placeholder {
+    color: #6c7086;
+    font-size: 0.85rem;
+    margin-top: 4rem;
+  }
+</style>
+</head>
+<body>
+
+<nav>
+  <h1>Media Transport</h1>
+
+  <div class="section">Workspace</div>
+  <a href="#" data-svg="crates.svg" data-title="Crate Dependency Graph" data-desc="Workspace members, external deps, what's implemented vs stubbed">
+    Crate graph <span class="phase-badge">phase 2</span>
+  </a>
+
+  <div class="section">Client  (sender)</div>
+  <a href="#" data-svg="client-pipeline.svg" data-title="Client Pipeline" data-desc="KMS capture → VAAPI encode → TCP transport">
+    Pipeline <span class="phase-badge">phase 2</span>
+  </a>
+
+  <div class="section">Server  (receiver)</div>
+  <a href="#" data-svg="server-pipeline.svg" data-title="Server Pipeline" data-desc="Current stub + planned: NVDEC, scene detection, IPC, frame buffer">
+    Pipeline <span class="phase-badge">phase 2 stub</span>
+  </a>
+</nav>
+
+<main>
+  <header>
+    <h2 id="title">Select a diagram</h2>
+    <span class="desc" id="desc"></span>
+  </header>
+  <div class="viewer" id="viewer">
+    <p class="placeholder">← pick a diagram from the sidebar</p>
+  </div>
+</main>
+
+<script>
+  const viewer = document.getElementById('viewer');
+  const titleEl = document.getElementById('title');
+  const descEl  = document.getElementById('desc');
+
+  document.querySelectorAll('nav a').forEach(link => {
+    link.addEventListener('click', e => {
+      e.preventDefault();
+      document.querySelectorAll('nav a').forEach(l => l.classList.remove('active'));
+      link.classList.add('active');
+
+      titleEl.textContent = link.dataset.title;
+      descEl.textContent  = link.dataset.desc;
+
+      // Use <object> so SVG internal text/links work
+      viewer.innerHTML = `<object type="image/svg+xml" data="${link.dataset.svg}"></object>`;
+    });
+  });
+
+  // Auto-select first
+  document.querySelector('nav a').click();
+</script>
+</body>
+</html>