app
Adom Library
Public Made by Adomby adom
adom-lbr — the EDA library translator. Bring a component in from any supported EDA tool and convert it to any other (KiCad ⇄ Altium ⇄ EAGLE/Fusion) through one canonical adom-lbr JSON — symbol + footprint + 3D + pin↔pad map. Altium is written natively (no Altium needed). Includes the adom-lbr Manager: browse wiki components and view symbol/footprint/3D + the per-EDA layer stackup.
← Commit history
Manager: canonical Adom app-shell header (dot+brand+subtitle, teal accent) matching adom-symbol/adom-footprint + live wiki source badge/tooltip (2.1.2)
1 file changed
+28−11
src/manage.html+28−11@@ -6,9 +6,17 @@ <title>adom-lbr Manager</title> <script type="module" src="https://unpkg.com/@google/[email protected]/dist/model-viewer.min.js"></script> <style>- :root{--bg:#0f1115;--panel:#171a21;--edge:#252a34;--ink:#e6e9ef;--mut:#8b93a3;--acc:#6ea8fe}+ :root{--bg:#0d1117;--panel:#171a21;--edge:#222b38;--ink:#e6edf3;--mut:#8b949e;--acc:#00b8b1;--dot:#00e6dc} *{box-sizing:border-box}- body{margin:0;font:14px/1.5 -apple-system,Segoe UI,Roboto,sans-serif;background:var(--bg);color:var(--ink);height:100vh;display:flex}+ body{margin:0;font:14px/1.5 -apple-system,Segoe UI,Roboto,sans-serif;background:var(--bg);color:var(--ink);height:100vh;display:flex;flex-direction:column}+ /* Canonical Adom app-shell header — matches adom-symbol / adom-footprint (adom-ui-design). */+ #appbar{display:flex;align-items:center;gap:10px;padding:12px 18px;border-bottom:1px solid var(--edge);background:var(--panel);flex:0 0 auto}+ #appbar .dot{width:10px;height:10px;border-radius:50%;background:var(--dot);box-shadow:0 0 12px var(--dot)}+ #appbar .brand{font-weight:700}+ #appbar .brand span{color:var(--mut);font-weight:400}+ #appbar .src{margin-left:auto;display:inline-flex;align-items:center;gap:6px;font:12px ui-monospace,monospace;color:var(--mut);background:#0d0f14;border:1px solid var(--edge);border-radius:7px;padding:4px 9px;cursor:help}+ #appbar .src b{color:var(--acc);font-weight:600}+ #shell{flex:1;display:flex;min-height:0} #list{width:300px;min-width:300px;border-right:1px solid var(--edge);background:var(--panel);display:flex;flex-direction:column} #list h1{font-size:15px;margin:0;padding:14px 16px;border-bottom:1px solid var(--edge);letter-spacing:.02em} #list h1 small{color:var(--mut);font-weight:400}@@ -16,7 +24,7 @@ #rows{overflow:auto;flex:1} .row{padding:10px 16px;border-bottom:1px solid var(--edge);cursor:pointer} .row:hover{background:#1e222b}- .row.sel{background:#243049;border-left:3px solid var(--acc);padding-left:13px}+ .row.sel{background:#123331;border-left:3px solid var(--acc);padding-left:13px} .row .mpn{font-weight:600} .row .sub{color:var(--mut);font-size:12px} #view{flex:1;overflow:auto;padding:18px}@@ -44,19 +52,26 @@ .stacktitle{margin:22px 0 6px;font-size:13px;text-transform:uppercase;letter-spacing:.05em;color:var(--mut)} .err{color:#f87171;padding:16px} .card .body [data-num]{cursor:pointer}- .pinhi .pinvis{stroke:#6ea8fe !important;vector-effect:non-scaling-stroke;stroke-width:3}- rect.pad.pinhi{stroke:#6ea8fe;vector-effect:non-scaling-stroke;stroke-width:3}+ .pinhi .pinvis{stroke:var(--acc) !important;vector-effect:non-scaling-stroke;stroke-width:3}+ rect.pad.pinhi{stroke:var(--acc);vector-effect:non-scaling-stroke;stroke-width:3} #tip{position:fixed;z-index:9999;background:#0d1117;border:1px solid var(--acc);color:var(--ink);font:12px ui-monospace,monospace;padding:3px 8px;border-radius:6px;pointer-events:none;display:none;white-space:nowrap} #tip b{color:var(--acc)} </style> </head> <body>- <aside id="list">- <h1>adom-lbr <small>Manager</small></h1>- <input id="q" placeholder="filter components…">- <div id="rows"></div>- </aside>- <main id="view"><div id="hint">← pick a component from the list to open its viewer</div></main>+ <header id="appbar">+ <span class="dot"></span>+ <span class="brand">adom-lbr <span>· Library Manager</span></span>+ <span class="src" id="src" title="Live from the Adom Wiki. The component list and every symbol / footprint / 3D (.glb) file is fetched from wiki.adom.inc on demand — nothing is stored in this container. SVGs render on the fly per click.">◍ <b>wiki.adom.inc</b></span>+ </header>+ <div id="shell">+ <aside id="list">+ <h1>Components <small id="count"></small></h1>+ <input id="q" placeholder="filter components…">+ <div id="rows"></div>+ </aside>+ <main id="view"><div id="hint">← pick a component from the list to open its viewer</div></main>+ </div> <script> const COLORS={Silkscreen:'#d8b4fe',Courtyard:'#4ade80','Fabrication / Assembly':'#f472b6',Copper:'#f59e0b',Other:'#94a3b8'};@@ -66,6 +81,8 @@ async function loadList(){ try{ const r=await fetch('api/components').then(r=>r.json()); all=r.components||[];+ document.getElementById('count').textContent=all.length?all.length:'';+ document.getElementById('src').innerHTML='◍ <b>wiki.adom.inc</b> · '+all.length+' parts'; render(); }catch(e){ document.getElementById('rows').innerHTML='<div class="row" style="color:#f87171;cursor:default">failed to load list — retry</div>';