USB3.0 to Ethernet Molecule

@@ -0,0 +1,177 @@+<style>+  :root {+    --bg: #0d1117;+    --panel: #161b22;+    --line: #262d36;+    --fg: #e6edf3;+    --muted: #8b949e;+    --accent: #2dd4bf;+    --accent-2: #4f8cff;+    --radius-s: 8px;+    --radius-m: 12px;+    --radius-pill: 999px;+  }+  * { box-sizing: border-box; }+  body {+    margin: 0;+    background: var(--bg);+    color: var(--fg);+    font-family: "Familjen Grotesk", "Satoshi", "Inter", sans-serif;+    line-height: 1.55;+  }+  .wrap { max-width: 1180px; margin: 0 auto; padding: 20px 16px 40px; }++  .intro { margin: 0 0 20px; }+  .intro h2 {+    font-size: 18px; font-weight: 600; margin: 0 0 6px;+    letter-spacing: -0.01em;+  }+  .intro p { margin: 0; color: var(--muted); font-size: 14px; max-width: 76ch; }++  .bar {+    display: flex; align-items: center; gap: 6px;+    height: 44px; padding: 0 6px;+    background: var(--panel);+    border: 1px solid var(--line);+    border-radius: var(--radius-m) var(--radius-m) 0 0;+    overflow-x: auto;+  }+  .bar .spacer { flex: 1; }+  .tab {+    appearance: none; border: 0; cursor: pointer;+    background: transparent; color: var(--muted);+    font: inherit; font-size: 13px; font-weight: 500;+    padding: 6px 12px; border-radius: var(--radius-pill);+    white-space: nowrap; transition: background .12s, color .12s;+  }+  .tab:hover { color: var(--fg); background: #1e242c; }+  .tab[aria-selected="true"] { color: #04211d; background: var(--accent); }+  .sub .tab[aria-selected="true"] { color: #04121f; background: var(--accent-2); }++  .sub {+    display: flex; align-items: center; gap: 6px;+    height: 38px; padding: 0 6px;+    background: #10151c;+    border: 1px solid var(--line); border-top: 0;+    overflow-x: auto;+  }+  .sub[hidden] { display: none; }++  .stage {+    border: 1px solid var(--line); border-top: 0;+    border-radius: 0 0 var(--radius-m) var(--radius-m);+    background: var(--panel);+    height: 660px; position: relative; overflow: hidden;+  }+  .frame {+    position: absolute; inset: 0;+    width: 100%; height: 100%;+    border: 0; display: block; background: var(--panel);+  }+  .frame[hidden] { display: none; }++  .hint {+    margin: 10px 2px 0; color: var(--muted); font-size: 12.5px;+    display: flex; align-items: flex-start; gap: 8px;+  }+  .hint svg { flex: 0 0 auto; margin-top: 2px; }+  code {+    font-family: "JetBrains Mono", ui-monospace, monospace;+    font-size: 12px; background: #10151c;+    border: 1px solid var(--line); border-radius: var(--radius-s);+    padding: 1px 5px;+  }+  @media (max-width: 640px) { .stage { height: 460px; } }+</style>++<div class="wrap">+  <div class="intro">+    <h2>Board viewers</h2>+    <p>+      Interactive layout and schematic for this molecule, rendered from the KiCad source+      in this repo. The layout view supports pan and zoom, per-side layer toggles, and+      net highlighting across all 60 nets. Click any trace, pad, via or zone to light up+      its whole net.+    </p>+  </div>++  <div class="bar" role="tablist" aria-label="Board views">+    <button class="tab" role="tab" data-view="layout" aria-selected="true">Layout</button>+    <button class="tab" role="tab" data-view="schematic" aria-selected="false">Schematic</button>+    <span class="spacer"></span>+  </div>++  <div class="sub" id="sheets" role="tablist" aria-label="Schematic sheets" hidden>+    <button class="tab" role="tab" data-sheet="root" aria-selected="true">Root</button>+    <button class="tab" role="tab" data-sheet="usb" aria-selected="false">USB</button>+    <button class="tab" role="tab" data-sheet="data" aria-selected="false">Data</button>+    <button class="tab" role="tab" data-sheet="ethernet" aria-selected="false">Ethernet</button>+    <button class="tab" role="tab" data-sheet="power" aria-selected="false">Power</button>+  </div>++  <div class="stage" id="stage"></div>++  <p class="hint">+    <svg width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.4">+      <circle cx="8" cy="8" r="6.4"/><path d="M8 7.2v4M8 4.9v.9"/>+    </svg>+    <span>+      Views are static exports and work offline. Live stock, price and vouch data are not+      available inside the page sandbox. For those, open the board in+      <code>adom-layout-viewer serve</code>.+    </span>+  </p>+</div>++<script>+(function () {+  var BASE = "/blob/component/usb3-to-ethernet-dataonly-molecule/viewers/";+  var stage = document.getElementById("stage");+  var sheetBar = document.getElementById("sheets");+  var frames = {};+  var view = "layout";+  var sheet = "root";++  // Build (or reveal) one iframe per view, loading each only on first use so the+  // page does not pull several MB of viewer up front.+  function show(key, file) {+    Object.keys(frames).forEach(function (k) { frames[k].hidden = k !== key; });+    if (frames[key]) return;+    var f = document.createElement("iframe");+    f.className = "frame";+    f.setAttribute("sandbox", "allow-scripts");+    f.setAttribute("loading", "lazy");+    f.setAttribute("title", key);+    f.src = BASE + file;+    frames[key] = f;+    stage.appendChild(f);+  }++  function render() {+    if (view === "layout") {+      sheetBar.hidden = true;+      show("layout", "layout.html");+    } else {+      sheetBar.hidden = false;+      show("sch-" + sheet, "sch-" + sheet + ".html");+    }+  }++  function wire(bar, attr, onPick) {+    bar.addEventListener("click", function (e) {+      var btn = e.target.closest("[" + attr + "]");+      if (!btn) return;+      Array.prototype.forEach.call(bar.querySelectorAll("[role=tab]"), function (t) {+        t.setAttribute("aria-selected", String(t === btn));+      });+      onPick(btn.getAttribute(attr));+      render();+    });+  }++  wire(document.querySelector(".bar"), "data-view", function (v) { view = v; });+  wire(sheetBar, "data-sheet", function (s) { sheet = s; });++  render();+})();+</script>