adom-schematic-viewer - src/app.html

Overview Files Skills Discover Packages Releases Dependencies Issues Breadcrumbs Pull Requests Activity
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>adom-schematic-viewer</title>
<style>
  :root { color-scheme: dark; --bg:#0d1117; --panel:#161b22cc; --line:#30363d; --txt:#c9d1d9; --muted:#8b949e; --accent:#00e6dc; }
  * { box-sizing: border-box; }
  html, body { margin: 0; height: 100%; background: var(--bg); color: var(--txt); font: 13px/1.4 ui-sans-serif, system-ui, sans-serif; overflow: hidden; }
  #svgbox { position: absolute; inset: 0; cursor: grab; background: #1c2128; }
  #svgbox:active { cursor: grabbing; }
  #svgbox svg { display: block; }
  .empty { position: absolute; inset: 0; display: grid; place-items: center; color: var(--muted); }

  /* component hotspots: transparent hit targets (no visual). */
  #svgbox svg .adom-comp { pointer-events: fill; cursor: pointer; }
  /* Hover highlight = KiCad's selection look: the symbol keeps its own colours and
     gains a bright halo around its strokes. Rest of the sheet untouched (no dim,
     no box, no recolour). KiCad haloes white on its dark theme; the SVG export is
     light, so we halo in the accent so it actually reads. */
  #svgbox svg .adom-sheet .symhl {
    filter: drop-shadow(0 0 .1px #00b3a6) drop-shadow(0 0 .1px #00b3a6) drop-shadow(0 0 .1px #00b3a6);
  }

  .panel { position: absolute; background: var(--panel); backdrop-filter: blur(8px); border: 1px solid var(--line); border-radius: 10px; }
  #side { top: 12px; right: 12px; width: 220px; max-height: 94vh; padding: 10px 12px; display: flex; flex-direction: column; }
  #side h1 { margin: 0 0 8px; font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
  .sec-h { font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); font-weight: 600; margin: 2px 0 5px; border-bottom: 1px solid var(--line); padding-bottom: 3px; }
  #complist { overflow-y: auto; max-height: 74vh; }
  .crow { padding: 3px 7px; border-radius: 5px; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .crow b { color: var(--accent); }
  .crow:hover { background: #1c2a2a; }
  .crow.sel { background: var(--accent); color: #06232a; }
  .crow.sel b { color: #06232a; }
  #fitbtn { margin-top: 8px; width: 100%; background: #17231c; color: var(--txt); border: 1px solid var(--line); border-radius: 7px; padding: 5px; cursor: pointer; }
  #fitbtn:hover { border-color: var(--accent); }
  #stat { bottom: 12px; left: 12px; padding: 6px 11px; color: var(--muted); }
  .muted { color: var(--muted); }

  /* follows the cursor and flips away from the viewport edges (same as the
     layout viewer); a click pins it where it currently sits, and only then does
     it accept pointer events so the JLC/wiki/datasheet links are clickable. */
  #card { position: fixed; z-index: 9999; display: none; min-width: 210px; max-width: 300px; padding: 10px 12px; pointer-events: none; }
  /* abridged hover card (small/embedded screens): ref · MPN · stock only */
  #card.brief { min-width: 0; max-width: 230px; padding: 7px 9px; }
  #card.brief .ci-h { margin-bottom: 4px; padding-bottom: 4px; }
  #card.brief .ci-ref { font-size: 13px; }
  #card.pinned { pointer-events: auto; box-shadow: 0 0 0 1px var(--accent); }
  #card.pinned .ci-h::after { content: "📌"; font-size: 11px; opacity: .7; }
  .ci-h { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 5px; padding-bottom: 5px; border-bottom: 1px solid var(--line); }
  .ci-ref { font-weight: 700; color: var(--accent); font-size: 15px; }
  .ci-val { color: var(--txt); }
  .ci-desc { color: var(--muted); font-size: 12px; margin-bottom: 6px; }
  .ci-row { display: flex; justify-content: space-between; gap: 10px; padding: 1px 0; }
  .ci-k { color: var(--muted); }
  .ci-v { text-align: right; word-break: break-word; }
  .ci-enrich { margin-top: 7px; padding-top: 7px; border-top: 1px solid var(--line); }
  .pills { display: flex; flex-wrap: wrap; gap: 5px; }
  .pill { background: #17231c; border: 1px solid var(--line); border-radius: 999px; padding: 1px 8px; font-size: 11px; }
  .pill.ok { color: #57d97e; border-color: #2c5a3a; }
  .pill.no { color: #e08a8a; border-color: #5a2c2c; }
  .pill.tier { color: #f2d060; }
  .pill.pop { color: #cba6ff; }
  .ci-mfr { color: var(--txt); font-size: 12px; margin-bottom: 5px; }
  .ci-links { margin-top: 6px; display: flex; gap: 12px; }
  .ci-lnk, .ci-ds { color: #6bb3ff; text-decoration: none; font-size: 12px; }
  .ci-ds { display: inline-block; margin-top: 6px; }
</style>
</head>
<body>
  <div id="svgbox"><div class="empty">loading…</div></div>
  <div id="side" class="panel">
    <h1>adom-schematic-viewer</h1>
    <div class="sec-h">Components</div>
    <div id="complist"></div>
    <button id="fitbtn">Fit</button>
  </div>
  <div id="stat" class="panel"></div>
  <div id="card" class="panel"></div>
  <script src="viewer.js"></script>
</body>
</html>