PCB Footprint Creator - demo-sot23.html

Overview Files Versions Dependencies Discussions Activity
Raw
<!DOCTYPE html>
<html><head><script>(function(){var n=0;function show(p,m){var el=document.createElement('div');el.style.cssText='position:fixed;left:0;right:0;background:#e04040;color:#fff;padding:6px 12px;z-index:'+(99999-n)+';font:13px/1.4 monospace;white-space:pre-wrap;border-bottom:1px solid #b02020;top:'+n*30+'px';el.textContent=p+m;document.body.appendChild(el);n++}window.onerror=function(msg,src,line){show('ERROR '+(src||'').split('/').pop()+':'+line+' \u2014 ',msg)};window.addEventListener('unhandledrejection',function(e){show('REJECT \u2014 ',e.reason&&e.reason.message||e.reason||'unknown')})})()</script><meta charset="utf-8"><title>FpView Demo - SOT-23-3</title>
<style>
*{margin:0;padding:0;box-sizing:border-box}
body{background:#0a0a0a;color:#e6edf3;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;overflow:hidden;height:100vh;display:flex;flex-direction:column}
.toolbar{display:flex;align-items:center;gap:8px;padding:6px 12px;background:#161b22;border-bottom:1px solid #30363d;flex-shrink:0}
.toolbar .title{font-size:13px;font-weight:600;color:#e6edf3}
.badge{font-size:10px;background:#1a3a2a;color:#3fb950;padding:2px 8px;border-radius:10px;font-weight:500}
.toolbar .spacer{flex:1}
.btn{font-size:11px;padding:3px 10px;background:#21262d;color:#8b949e;border:1px solid #30363d;border-radius:4px;cursor:pointer}
.btn.active{color:#e6edf3;background:#30363d}
.viewer{flex:1;position:relative;overflow:hidden;background:#0a0a0a}
.grid-bg{position:absolute;inset:0;background-image:radial-gradient(circle,#1a1f26 1px,transparent 1px);background-size:20px 20px}
.fp-container{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}
.info-bar{display:flex;gap:16px;padding:6px 12px;background:#0d1117;border-top:1px solid #30363d;font-size:11px;color:#8b949e;flex-shrink:0}
.info-bar span{white-space:nowrap}
.info-bar .label{color:#484f58}
/* SVG footprint */
.pad{fill:#b87333;stroke:#d4956a;stroke-width:0.02}
.pad:hover{fill:#00b8b1;stroke:#00d4cc;stroke-width:0.03}
.silk{fill:none;stroke:#00e5ff;stroke-width:0.04}
.fab{fill:none;stroke:#666;stroke-width:0.04}
.court{fill:none;stroke:#ff00ff;stroke-width:0.02;stroke-dasharray:0.06 0.04}
.pin1{fill:#ff0;stroke:none}
.solder{fill:#d4aa70;opacity:0.85}
.tooltip{display:none;position:absolute;background:#1c2128;border:1px solid #30363d;border-radius:6px;padding:8px 10px;font-size:11px;color:#e6edf3;pointer-events:none;min-width:160px;z-index:10}
.tooltip .sig{color:#00b8b1;font-weight:600}
.tooltip .dim{color:#8b949e;font-size:10px}
.tooltip .desc{color:#8b949e;margin-top:4px;font-size:10px;line-height:1.4}
.note{position:absolute;bottom:8px;right:12px;font-size:10px;color:#484f58}
</style></head><body>
<div class="toolbar">
  <span class="title">SOT-23-3</span>
  <span class="badge">Footprint</span>
  <span class="spacer"></span>
  <button class="btn active">Grid</button>
  <button class="btn active">Solder</button>
  <button class="btn">Labels</button>
  <button class="btn">Regen</button>
</div>
<div class="viewer">
  <div class="grid-bg"></div>
  <div class="fp-container">
    <svg viewBox="-1.5 -2.2 3 4.4" width="260" height="380">
      <!-- Courtyard -->
      <rect x="-1.2" y="-1.8" width="2.4" height="3.6" class="court"/>
      <!-- Fab outline -->
      <rect x="-0.65" y="-1.45" width="1.3" height="2.9" rx="0.05" class="fab"/>
      <!-- Pin 1 marker -->
      <polygon points="-0.85,-1.6 -0.65,-1.6 -0.75,-1.45" class="pin1"/>
      <!-- Pads -->
      <rect x="-1.1" y="-1.1" width="0.7" height="0.46" rx="0.04" class="pad" data-pad="1" data-sig="B/G" data-desc="Base/Gate terminal"/>
      <rect x="-1.1" y="0.64" width="0.7" height="0.46" rx="0.04" class="pad" data-pad="2" data-sig="E/S" data-desc="Emitter/Source terminal"/>
      <rect x="0.4" y="-0.23" width="0.7" height="0.46" rx="0.04" class="pad" data-pad="3" data-sig="C/D" data-desc="Collector/Drain terminal"/>
      <!-- Solder blobs -->
      <g class="solder-layer">
        <circle cx="-0.88" cy="-0.99" r="0.1" class="solder"/><circle cx="-0.63" cy="-0.99" r="0.1" class="solder"/>
        <circle cx="-0.88" cy="-0.74" r="0.1" class="solder"/><circle cx="-0.63" cy="-0.74" r="0.1" class="solder"/>
        <circle cx="-0.88" cy="0.77" r="0.1" class="solder"/><circle cx="-0.63" cy="0.77" r="0.1" class="solder"/>
        <circle cx="-0.88" cy="1.02" r="0.1" class="solder"/><circle cx="-0.63" cy="1.02" r="0.1" class="solder"/>
        <circle cx="0.63" cy="-0.1" r="0.1" class="solder"/><circle cx="0.88" cy="-0.1" r="0.1" class="solder"/>
        <circle cx="0.63" cy="0.15" r="0.1" class="solder"/><circle cx="0.88" cy="0.15" r="0.1" class="solder"/>
      </g>
    </svg>
  </div>
  <div class="tooltip" id="tip"></div>
  <div class="note">Demo — simulated data</div>
</div>
<div class="info-bar">
  <span><span class="label">Mfr</span> Generic</span>
  <span><span class="label">Pads</span> 3 SMD</span>
  <span><span class="label">Body</span> 1.3 x 2.9 mm</span>
  <span><span class="label">Pitch</span> 0.95 mm</span>
  <span><span class="label">Courtyard</span> 2.4 x 3.6 mm</span>
</div>
<script>
const tip=document.getElementById('tip');
document.querySelectorAll('.pad').forEach(p=>{
  p.addEventListener('mouseenter',e=>{
    const r=e.target.getBoundingClientRect();
    tip.innerHTML='<div>Pad <b>'+p.dataset.pad+'</b> <span class="sig">'+p.dataset.sig+'</span></div><div class="desc">'+p.dataset.desc+'</div>';
    tip.style.display='block';
    tip.style.left=(r.right+8)+'px';
    tip.style.top=(r.top)+'px';
  });
  p.addEventListener('mouseleave',()=>{tip.style.display='none'});
});
</script>
</body></html>