USB3.0 to Ethernet Molecule

<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="usb" aria-selected="true">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 = "usb";

  // 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>