<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="aspect-ratio" content="4:3">
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body {
      font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
      background: #f8f9fa;
      color: #1e2945;
      padding: 12px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100%;
    }

    .toolbar {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 12px;
    }

    .toggle-btn {
      background: #ffffff;
      border: 2px solid #2563eb;
      color: #2563eb;
      font-size: 14px;
      font-weight: 700;
      padding: 6px 16px;
      border-radius: 20px;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      transition: background 0.2s, color 0.2s;
    }
    .toggle-btn:hover {
      background: #2563eb;
      color: #ffffff;
    }

    .grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
      width: 100%;
      max-width: 600px;
    }

    @media (max-width: 480px) {
      .grid {
        grid-template-columns: 1fr;
      }
    }

    .panel {
      background: #ffffff;
      border: 1.5px solid #e2e8f0;
      border-radius: 12px;
      padding: 12px;
      display: flex;
      flex-direction: column;
      align-items: center;
      position: relative;
    }

    .panel.highlight {
      border-color: #2563eb;
      box-shadow: 0 0 0 1px #2563eb;
    }

    .badge {
      font-size: 11px;
      font-weight: 700;
      padding: 3px 8px;
      border-radius: 10px;
      margin-bottom: 6px;
      text-align: center;
    }

    .badge-gray {
      background: #f1f5f9;
      color: #64748b;
    }

    .badge-blue {
      background: #eff6ff;
      color: #2563eb;
      border: 1px solid #bfdbfe;
    }

    .panel-title {
      font-size: 15px;
      font-weight: 700;
      margin-bottom: 4px;
    }

    .svg-container {
      width: 100%;
      max-width: 180px;
      height: auto;
    }

    .wire {
      stroke: #64748b;
      stroke-width: 2.5;
      stroke-linecap: round;
      stroke-linejoin: round;
      fill: none;
    }

    .wire-active {
      stroke: #2563eb;
    }

    .wire-danger {
      stroke: #dc2626;
    }

    .schematic-text {
      font-size: 12px;
      font-weight: 700;
      fill: #1e2945;
      text-anchor: middle;
      font-family: inherit;
    }

    .status-tag {
      font-size: 11px;
      font-weight: 700;
      margin-top: 6px;
      padding: 2px 8px;
      border-radius: 4px;
      text-align: center;
    }

    .status-danger {
      background: #fee2e2;
      color: #991b1b;
    }

    .status-safe {
      background: #dcfce7;
      color: #166534;
    }

    .status-on {
      background: #eff6ff;
      color: #1e40af;
    }
  </style>
</head>
<body>

  <div class="toolbar">
    <button class="toggle-btn" id="stateBtn" onclick="toggleState()">
      <span id="btnIcon">⚡</span>
      <span id="btnText">Switch: OFF</span>
    </button>
  </div>

  <div class="grid">
    
    <div class="panel" id="panelNpn">
      <span class="badge badge-gray">Low-Side Switch</span>
      <div class="panel-title">NPN Transistor</div>
      
      <svg class="svg-container" viewBox="0 0 160 210">
        
        <line x1="40" y1="18" x2="120" y2="18" stroke="#1e2945" stroke-width="2.5" stroke-linecap="round"/>
        <text x="80" y="12" class="schematic-text">+V_CC</text>

        
        <line x1="80" y1="18" x2="80" y2="38" class="wire" id="npnWire1"/>

        
        <rect x="56" y="38" width="48" height="34" rx="4" fill="#f8fafc" stroke="#1e2945" stroke-width="2"/>
        <text x="80" y="59" class="schematic-text">LOAD</text>

        
        <line x1="80" y1="72" x2="80" y2="100" class="wire" id="npnWire2"/>

        
        <g transform="translate(80, 118)">
          
          <line x1="-12" y1="-14" x2="-12" y2="14" stroke="#1e2945" stroke-width="3" stroke-linecap="round"/>
          
          <line x1="-32" y1="0" x2="-12" y2="0" stroke="#1e2945" stroke-width="2"/>
          <text x="-40" y="4" class="schematic-text" style="font-size:10px;">B</text>
          
          
          <line x1="-12" y1="-7" x2="10" y2="-18" stroke="#1e2945" stroke-width="2"/>
          <line x1="10" y1="-18" x2="10" y2="-28" stroke="#1e2945" stroke-width="2"/>
          <text x="20" y="-18" class="schematic-text" style="font-size:9px;">C</text>

          
          <line x1="-12" y1="7" x2="10" y2="18" stroke="#1e2945" stroke-width="2"/>
          <line x1="10" y1="18" x2="10" y2="28" stroke="#1e2945" stroke-width="2"/>
          
          <polygon points="10,18 2,12 5,20" fill="#1e2945"/>
          <text x="20" y="24" class="schematic-text" style="font-size:9px;">E</text>
        </g>

        
        <line x1="90" y1="146" x2="90" y2="175" class="wire" id="npnWire3"/>

        
        <line x1="72" y1="175" x2="108" y2="175" stroke="#1e2945" stroke-width="2.5" stroke-linecap="round"/>
        <line x1="78" y1="181" x2="102" y2="181" stroke="#1e2945" stroke-width="2" stroke-linecap="round"/>
        <line x1="84" y1="187" x2="96" y2="187" stroke="#1e2945" stroke-width="1.5" stroke-linecap="round"/>
        <text x="90" y="202" class="schematic-text" style="font-size:10px;">0V (GND)</text>
      </svg>

      <div class="status-tag status-danger" id="npnStatus">Load floating at +V_CC</div>
    </div>

    
    <div class="panel highlight" id="panelPnp">
      <span class="badge badge-blue">✓ Safer: 0V when OFF</span>
      <div class="panel-title">High-Side (PNP)</div>

      <svg class="svg-container" viewBox="0 0 160 210">
        
        <line x1="40" y1="18" x2="120" y2="18" stroke="#1e2945" stroke-width="2.5" stroke-linecap="round"/>
        <text x="80" y="12" class="schematic-text">+V_CC</text>

        
        <line x1="90" y1="18" x2="90" y2="40" class="wire" id="pnpWire1"/>

        
        <g transform="translate(80, 58)">
          
          <line x1="-12" y1="-14" x2="-12" y2="14" stroke="#1e2945" stroke-width="3" stroke-linecap="round"/>
          
          <line x1="-32" y1="0" x2="-12" y2="0" stroke="#1e2945" stroke-width="2"/>
          <text x="-40" y="4" class="schematic-text" style="font-size:10px;">B</text>

          
          <line x1="-12" y1="-7" x2="10" y2="-18" stroke="#1e2945" stroke-width="2"/>
          <line x1="10" y1="-18" x2="10" y2="-28" stroke="#1e2945" stroke-width="2"/>
          
          <polygon points="-5,-10 3,-18 -4,-16" fill="#1e2945"/>
          <text x="20" y="-18" class="schematic-text" style="font-size:9px;">E</text>

          
          <line x1="-12" y1="7" x2="10" y2="18" stroke="#1e2945" stroke-width="2"/>
          <line x1="10" y1="18" x2="10" y2="28" stroke="#1e2945" stroke-width="2"/>
          <text x="20" y="24" class="schematic-text" style="font-size:9px;">C</text>
        </g>

        
        <line x1="90" y1="86" x2="80" y2="104" class="wire" id="pnpWire2"/>

        
        <rect x="56" y="104" width="48" height="34" rx="4" fill="#f8fafc" stroke="#1e2945" stroke-width="2"/>
        <text x="80" y="125" class="schematic-text">LOAD</text>

        
        <line x1="80" y1="138" x2="80" y2="175" class="wire" id="pnpWire3"/>

        
        <line x1="62" y1="175" x2="98" y2="175" stroke="#1e2945" stroke-width="2.5" stroke-linecap="round"/>
        <line x1="68" y1="181" x2="92" y2="181" stroke="#1e2945" stroke-width="2" stroke-linecap="round"/>
        <line x1="74" y1="187" x2="86" y2="187" stroke="#1e2945" stroke-width="1.5" stroke-linecap="round"/>
        <text x="80" y="202" class="schematic-text" style="font-size:10px;">0V (GND)</text>
      </svg>

      <div class="status-tag status-safe" id="pnpStatus">Load safe at 0V</div>
    </div>
  </div>

  <script>
    let isOn = false;

    function toggleState() {
      isOn = !isOn;
      const btnText = document.getElementById('btnText');
      const npnStatus = document.getElementById('npnStatus');
      const pnpStatus = document.getElementById('pnpStatus');

      const npnW1 = document.getElementById('npnWire1');
      const npnW2 = document.getElementById('npnWire2');
      const npnW3 = document.getElementById('npnWire3');

      const pnpW1 = document.getElementById('pnpWire1');
      const pnpW2 = document.getElementById('pnpWire2');
      const pnpW3 = document.getElementById('pnpWire3');

      if (isOn) {
        btnText.textContent = 'Switch: ON (Active)';
        
        npnStatus.className = 'status-tag status-on';
        npnStatus.textContent = 'Current Flows (ON)';
        npnW1.style.stroke = '#2563eb';
        npnW2.style.stroke = '#2563eb';
        npnW3.style.stroke = '#2563eb';

        pnpStatus.className = 'status-tag status-on';
        pnpStatus.textContent = 'Current Flows (ON)';
        pnpW1.style.stroke = '#2563eb';
        pnpW2.style.stroke = '#2563eb';
        pnpW3.style.stroke = '#2563eb';
      } else {
        btnText.textContent = 'Switch: OFF';

        npnStatus.className = 'status-tag status-danger';
        npnStatus.textContent = 'Load floating at +V_CC';
        npnW1.style.stroke = '#dc2626';
        npnW2.style.stroke = '#dc2626';
        npnW3.style.stroke = '#64748b';

        pnpStatus.className = 'status-tag status-safe';
        pnpStatus.textContent = 'Load safe at 0V';
        pnpW1.style.stroke = '#dc2626';
        pnpW2.style.stroke = '#64748b';
        pnpW3.style.stroke = '#64748b';
      }
    }

    // Initialize OFF state
    toggleState();
    toggleState();
  </script>
</body>
</html>

PNP High-Side Transistor Switching Circuits

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="aspect-ratio" content="4:3">
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body {
      font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
      background: transparent;
      color: #1e2945;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      min-height: 100%;
      padding: 8px 4px;
      user-select: none;
      -webkit-user-select: none;
    }

    /* Top Controls */
    .controls {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 6px;
    }
    .toggle-btn {
      appearance: none;
      border: 2px solid #22b7ff;
      background: #f0f9ff;
      color: #0284c7;
      font-size: 14px;
      font-weight: 700;
      padding: 6px 16px;
      border-radius: 20px;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      transition: background 0.2s, color 0.2s, border-color 0.2s;
    }
    .toggle-btn.high {
      background: #22b7ff;
      color: #ffffff;
      border-color: #0284c7;
    }
    .toggle-led {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: #94a3b8;
      transition: background 0.2s, box-shadow 0.2s;
    }
    .toggle-btn.high .toggle-led {
      background: #22c55e;
      box-shadow: 0 0 8px #22c55e;
    }

    /* Columns Layout */
    .columns {
      display: flex;
      width: 100%;
      max-width: 660px;
      justify-content: space-around;
      gap: 8px;
    }
    .circuit-col {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      min-width: 0;
    }

    /* Column Headers */
    .col-title {
      font-size: 13px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      margin-bottom: 2px;
      display: flex;
      align-items: center;
      gap: 4px;
    }
    .col-title.success { color: #16a34a; }
    .col-title.danger { color: #dc2626; }

    /* SVG Schematic */
    .schematic-svg {
      width: 100%;
      max-width: 270px;
      height: auto;
      overflow: visible;
    }

    /* Wire States */
    .wire {
      stroke: #94a3b8;
      stroke-width: 2.5;
      stroke-linecap: round;
      stroke-linejoin: round;
      fill: none;
      transition: stroke 0.25s ease;
    }
    .wire-power { stroke: #ea580c; }
    .wire-gnd { stroke: #64748b; }
    
    .wire.active-on { stroke: #16a34a; }
    .wire.active-hi { stroke: #2563eb; }
    .wire.choked { stroke: #f59e0b; stroke-dasharray: 4 3; }

    /* Motor Component */
    .motor-body {
      fill: #ffffff;
      stroke: #64748b;
      stroke-width: 2;
      transition: stroke 0.25s, fill 0.25s;
    }
    .motor-blade {
      transform-origin: 130px 65px;
      stroke: #64748b;
      stroke-width: 2;
    }
    .high-side-blade {
      transform-origin: 130px 145px;
    }
    .spinning {
      animation: spin 0.7s linear infinite;
    }
    @keyframes spin {
      100% { transform: rotate(360deg); }
    }

    /* Status & Math Box */
    .math-box {
      width: 100%;
      max-width: 270px;
      text-align: center;
      padding: 6px 8px;
      border-radius: 8px;
      font-size: 12px;
      font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
      font-weight: 600;
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      margin-top: 4px;
      transition: border-color 0.25s, background 0.25s;
    }
    .math-box.on {
      background: #f0fdf4;
      border-color: #86efac;
      color: #15803d;
    }
    .math-box.warn {
      background: #fffbeb;
      border-color: #fde68a;
      color: #b45309;
    }
    .math-box.off {
      background: #f8fafc;
      border-color: #e2e8f0;
      color: #64748b;
    }

    .status-badge {
      display: inline-block;
      font-size: 11px;
      font-weight: 800;
      padding: 2px 6px;
      border-radius: 4px;
      margin-top: 3px;
      font-family: system-ui, sans-serif;
    }
    .status-badge.on { background: #dcfce7; color: #166534; }
    .status-badge.choke { background: #fee2e2; color: #991b1b; }
    .status-badge.off { background: #e2e8f0; color: #475569; }
  </style>
</head>
<body>

  
  <div class="controls">
    <button id="toggleBtn" class="toggle-btn high" onclick="toggleGPIO()">
      <span class="toggle-led"></span>
      <span id="btnLabel">GPIO: 5V (HIGH)</span>
    </button>
  </div>

  
  <div class="columns">

    
    <div class="circuit-col">
      <div class="col-title success">✓ Low-Side Switch</div>
      
      <svg class="schematic-svg" viewBox="0 0 260 215">
        
        <line x1="70" y1="18" x2="190" y2="18" class="wire wire-power" />
        <text x="130" y="12" font-size="11" font-weight="bold" fill="#ea580c" text-anchor="middle">+12V (V_DD)</text>
        
        
        <line id="ls-w-supply" x1="130" y1="18" x2="130" y2="45" class="wire wire-power" />

        
        <circle id="ls-motor-body" cx="130" cy="65" r="18" class="motor-body" />
        <g id="ls-motor-rotor" class="motor-blade spinning">
          <line x1="130" y1="52" x2="130" y2="78" />
          <line x1="117" y1="65" x2="143" y2="65" />
        </g>
        <text x="130" y="69" font-size="12" font-weight="900" fill="#334155" text-anchor="middle" pointer-events="none">M</text>
        <text x="160" y="68" font-size="10" font-weight="bold" fill="#64748b">Load</text>

        
        <line id="ls-w-drain" x1="130" y1="83" x2="130" y2="115" class="wire active-on" />
        <text x="142" y="118" font-size="11" font-weight="bold" fill="#475569">D</text>

        
        
        <line x1="130" y1="115" x2="130" y2="123" class="wire active-on" id="ls-fet-d" />
        <line x1="130" y1="127" x2="130" y2="137" class="wire active-on" id="ls-fet-b" />
        <line x1="130" y1="141" x2="130" y2="149" class="wire active-on" id="ls-fet-s" />
        
        
        <line x1="123" y1="118" x2="123" y2="146" class="wire" stroke-width="3" />
        <line id="ls-w-gate" x1="40" y1="132" x2="123" y2="132" class="wire active-hi" />
        <text x="112" y="128" font-size="11" font-weight="bold" fill="#475569">G</text>

        
        <circle cx="40" cy="132" r="3" fill="#2563eb" id="ls-gpio-dot" />
        <text id="ls-vg-text" x="38" y="122" font-size="11" font-weight="bold" fill="#2563eb" text-anchor="end">V_G=5V</text>

        
        <path d="M 124 132 L 130 130 L 130 134 Z" fill="#16a34a" id="ls-fet-arrow" />
        <line id="ls-w-source" x1="130" y1="149" x2="130" y2="175" class="wire wire-gnd" />
        <text x="142" y="152" font-size="11" font-weight="bold" fill="#475569">S</text>

        
        <text x="142" y="172" font-size="10" font-weight="bold" fill="#64748b">V_S=0V</text>

        
        <line x1="115" y1="175" x2="145" y2="175" class="wire wire-gnd" />
        <line x1="121" y1="180" x2="139" y2="180" class="wire wire-gnd" />
        <line x1="126" y1="185" x2="134" y2="185" class="wire wire-gnd" />
        <text x="130" y="198" font-size="10" font-weight="bold" fill="#64748b" text-anchor="middle">0V (GND)</text>
      </svg>

      <div id="ls-math" class="math-box on">
        <div>V_GS = 5V - 0V = +5V</div>
        <div class="status-badge on" id="ls-badge">V_GS &gt; V_th → FULLY ON (12V)</div>
      </div>
    </div>

    
    <div class="circuit-col">
      <div class="col-title danger">✗ High-Side Switch</div>

      <svg class="schematic-svg" viewBox="0 0 260 215">
        
        <line x1="70" y1="18" x2="190" y2="18" class="wire wire-power" />
        <text x="130" y="12" font-size="11" font-weight="bold" fill="#ea580c" text-anchor="middle">+12V (V_DD)</text>

        
        <line x1="130" y1="18" x2="130" y2="45" class="wire wire-power" />
        <text x="142" y="48" font-size="11" font-weight="bold" fill="#475569">D</text>

        
        <line x1="130" y1="45" x2="130" y2="53" class="wire wire-power" />
        <line x1="130" y1="57" x2="130" y2="67" class="wire wire-power" />
        <line x1="130" y1="71" x2="130" y2="79" class="wire wire-power" />
        
        
        <line x1="123" y1="48" x2="123" y2="76" class="wire" stroke-width="3" />
        <line id="hs-w-gate" x1="40" y1="62" x2="123" y2="62" class="wire active-hi" />
        <text x="112" y="58" font-size="11" font-weight="bold" fill="#475569">G</text>

        
        <circle cx="40" cy="62" r="3" fill="#2563eb" id="hs-gpio-dot" />
        <text id="hs-vg-text" x="38" y="52" font-size="11" font-weight="bold" fill="#2563eb" text-anchor="end">V_G=5V</text>

        
        <path d="M 124 62 L 130 60 L 130 64 Z" fill="#64748b" id="hs-fet-arrow" />
        <text x="142" y="82" font-size="11" font-weight="bold" fill="#475569">S</text>

        
        <line id="hs-w-source" x1="130" y1="79" x2="130" y2="125" class="wire choked" />
        <text id="hs-vs-label" x="142" y="104" font-size="10" font-weight="bold" fill="#d97706">V_S rises!</text>

        
        <circle id="hs-motor-body" cx="130" cy="145" r="18" class="motor-body" />
        <g id="hs-motor-rotor" class="motor-blade high-side-blade">
          <line x1="130" y1="132" x2="130" y2="158" />
          <line x1="117" y1="145" x2="143" y2="145" />
        </g>
        <text x="130" y="149" font-size="12" font-weight="900" fill="#334155" text-anchor="middle" pointer-events="none">M</text>
        <text x="160" y="148" font-size="10" font-weight="bold" fill="#64748b">Load</text>

        
        <line x1="130" y1="163" x2="130" y2="180" class="wire wire-gnd" />

        
        <line x1="115" y1="180" x2="145" y2="180" class="wire wire-gnd" />
        <line x1="121" y1="185" x2="139" y2="185" class="wire wire-gnd" />
        <line x1="126" y1="190" x2="134" y2="190" class="wire wire-gnd" />
        <text x="130" y="203" font-size="10" font-weight="bold" fill="#64748b" text-anchor="middle">0V (GND)</text>
      </svg>

      <div id="hs-math" class="math-box warn">
        <div id="hs-math-calc">V_GS = 5V - 12V &lt; 0V</div>
        <div class="status-badge choke" id="hs-badge">CHOKES OFF (Needs Gate &gt; 14V)</div>
      </div>
    </div>

  </div>

  <script>
    let isHigh = true;

    function toggleGPIO() {
      isHigh = !isHigh;
      updateState();
    }

    function updateState() {
      const btn = document.getElementById('toggleBtn');
      const btnLabel = document.getElementById('btnLabel');

      // Left Elements
      const lsMotorRotor = document.getElementById('ls-motor-rotor');
      const lsMotorBody = document.getElementById('ls-motor-body');
      const lsWDrain = document.getElementById('ls-w-drain');
      const lsWGate = document.getElementById('ls-w-gate');
      const lsFetD = document.getElementById('ls-fet-d');
      const lsFetB = document.getElementById('ls-fet-b');
      const lsFetS = document.getElementById('ls-fet-s');
      const lsFetArrow = document.getElementById('ls-fet-arrow');
      const lsVgText = document.getElementById('ls-vg-text');
      const lsGpioDot = document.getElementById('ls-gpio-dot');
      const lsMath = document.getElementById('ls-math');
      const lsBadge = document.getElementById('ls-badge');

      // Right Elements
      const hsWGate = document.getElementById('hs-w-gate');
      const hsWSource = document.getElementById('hs-w-source');
      const hsVsLabel = document.getElementById('hs-vs-label');
      const hsVgText = document.getElementById('hs-vg-text');
      const hsGpioDot = document.getElementById('hs-gpio-dot');
      const hsMath = document.getElementById('hs-math');
      const hsMathCalc = document.getElementById('hs-math-calc');
      const hsBadge = document.getElementById('hs-badge');

      if (isHigh) {
        // Button
        btn.classList.add('high');
        btnLabel.textContent = 'GPIO: 5V (HIGH)';

        // Left Circuit: Fully ON
        lsMotorRotor.classList.add('spinning');
        lsMotorBody.style.stroke = '#16a34a';
        lsMotorBody.style.fill = '#f0fdf4';
        lsWDrain.className.baseVal = 'wire active-on';
        lsFetD.className.baseVal = 'wire active-on';
        lsFetB.className.baseVal = 'wire active-on';
        lsFetS.className.baseVal = 'wire active-on';
        lsFetArrow.setAttribute('fill', '#16a34a');
        lsWGate.className.baseVal = 'wire active-hi';
        lsVgText.textContent = 'V_G=5V';
        lsVgText.setAttribute('fill', '#2563eb');
        lsGpioDot.setAttribute('fill', '#2563eb');

        lsMath.className = 'math-box on';
        lsMath.children[0].textContent = 'V_GS = 5V - 0V = +5V';
        lsBadge.className = 'status-badge on';
        lsBadge.textContent = 'V_GS > V_th → FULLY ON (12V)';

        // Right Circuit: Choked / Gate Booster Required
        hsWGate.className.baseVal = 'wire active-hi';
        hsWSource.className.baseVal = 'wire choked';
        hsVsLabel.textContent = 'V_S rises!';
        hsVsLabel.setAttribute('fill', '#d97706');
        hsVgText.textContent = 'V_G=5V';
        hsVgText.setAttribute('fill', '#2563eb');
        hsGpioDot.setAttribute('fill', '#2563eb');

        hsMath.className = 'math-box warn';
        hsMathCalc.textContent = 'V_GS = 5V - V_S < V_th';
        hsBadge.className = 'status-badge choke';
        hsBadge.textContent = 'CHOKES OFF (Needs Gate > 14V)';

      } else {
        // Button
        btn.classList.remove('high');
        btnLabel.textContent = 'GPIO: 0V (LOW)';

        // Left Circuit: OFF
        lsMotorRotor.classList.remove('spinning');
        lsMotorBody.style.stroke = '#64748b';
        lsMotorBody.style.fill = '#ffffff';
        lsWDrain.className.baseVal = 'wire';
        lsFetD.className.baseVal = 'wire';
        lsFetB.className.baseVal = 'wire';
        lsFetS.className.baseVal = 'wire';
        lsFetArrow.setAttribute('fill', '#64748b');
        lsWGate.className.baseVal = 'wire';
        lsVgText.textContent = 'V_G=0V';
        lsVgText.setAttribute('fill', '#64748b');
        lsGpioDot.setAttribute('fill', '#64748b');

        lsMath.className = 'math-box off';
        lsMath.children[0].textContent = 'V_GS = 0V - 0V = 0V';
        lsBadge.className = 'status-badge off';
        lsBadge.textContent = 'V_GS < V_th → OFF (0V)';

        // Right Circuit: OFF
        hsWGate.className.baseVal = 'wire';
        hsWSource.className.baseVal = 'wire';
        hsVsLabel.textContent = 'V_S=0V';
        hsVsLabel.setAttribute('fill', '#64748b');
        hsVgText.textContent = 'V_G=0V';
        hsVgText.setAttribute('fill', '#64748b');
        hsGpioDot.setAttribute('fill', '#64748b');

        hsMath.className = 'math-box off';
        hsMathCalc.textContent = 'V_GS = 0V - 0V = 0V';
        hsBadge.className = 'status-badge off';
        hsBadge.textContent = 'V_GS < V_th → OFF (0V)';
      }
    }
  </script>
</body>
</html>

N-Channel Enhancement MOSFET Switching Characteristics

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body {
      width: 100%;
      background: #ffffff;
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      color: #1e293b;
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 12px 10px 8px;
      user-select: none;
    }
    .badge {
      background: #eff6ff;
      border: 1px solid #bfdbfe;
      color: #1d4ed8;
      font-size: 12.5px;
      font-weight: 700;
      padding: 5px 14px;
      border-radius: 20px;
      text-align: center;
      margin-bottom: 8px;
    }
    .btn-row {
      display: flex;
      gap: 6px;
      margin-bottom: 6px;
      flex-wrap: wrap;
      justify-content: center;
    }
    .mode-btn {
      background: #f8fafc;
      border: 1px solid #cbd5e1;
      color: #334155;
      padding: 5px 11px;
      font-size: 12px;
      font-weight: 600;
      border-radius: 6px;
      cursor: pointer;
      transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
    }
    .mode-btn:hover {
      background: #f1f5f9;
      border-color: #94a3b8;
    }
    .mode-btn.active {
      background: #2563eb;
      border-color: #2563eb;
      color: #ffffff;
      box-shadow: 0 2px 6px rgba(37,99,235,0.25);
    }
    .graph-container {
      width: 100%;
      max-width: 530px;
      position: relative;
    }
    svg {
      width: 100%;
      height: auto;
      display: block;
      overflow: visible;
    }
    .axis { stroke: #1e293b; stroke-width: 1.75; }
    .grid { stroke: #e2e8f0; stroke-width: 1; stroke-dasharray: 2,2; }
    .axis-label { font-size: 11.5px; fill: #1e293b; font-weight: 700; }
    .tick-label { font-size: 10.5px; fill: #334155; font-weight: 600; text-anchor: middle; }
    .curve { fill: none; stroke-width: 2.5; stroke-linecap: round; transition: opacity 0.3s ease; }
    .curve-label { font-size: 10.5px; font-weight: 700; }
    .region { transition: opacity 0.3s ease; }
    .region-label { font-size: 11px; font-weight: 800; text-anchor: middle; pointer-events: none; }
    .boundary-label { font-size: 9.5px; font-weight: 700; fill: #475569; }
    .state-dot { transition: transform 0.4s ease, opacity 0.3s ease; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.25)); }
  </style>
</head>
<body>

  <div class="badge">Digital Switching uses Cutoff (OFF) &amp; Ohmic (Fully ON)</div>

  <div class="btn-row">
    <button class="mode-btn active" onclick="setMode('all')">Overview</button>
    <button class="mode-btn" onclick="setMode('cutoff')">1. Cutoff (OFF)</button>
    <button class="mode-btn" onclick="setMode('ohmic')">2. Ohmic (ON)</button>
    <button class="mode-btn" onclick="setMode('sat')">3. Saturation</button>
  </div>

  <div class="graph-container">
    <svg viewBox="0 0 530 335" id="mosfetGraph">
      <defs>
        <pattern id="gridPattern" width="40" height="26" patternUnits="userSpaceOnUse">
          <path d="M 40 0 L 0 0 0 26" fill="none" stroke="#f1f5f9" stroke-width="1"/>
        </pattern>
      </defs>

      
      <rect x="50" y="30" width="400" height="260" fill="url(#gridPattern)" />

      
      
      <path id="ohmicRegion" class="region" fill="#16a34a" fill-opacity="0.16" />

      
      <path id="satRegion" class="region" fill="#ea580c" fill-opacity="0.12" />

      
      <rect id="cutoffRegion" class="region" x="50" y="282" width="400" height="12" fill="#dc2626" fill-opacity="0.22" rx="2" />

      
      <path id="boundaryCurve" fill="none" stroke="#475569" stroke-width="1.75" stroke-dasharray="4,4" />

      
      <text class="boundary-label" x="252" y="152" transform="rotate(-40 252 152)">Boundary: V_DS = V_GS - V_th</text>

      
      <g id="regionLabels">
        <text class="region-label" x="140" y="95" fill="#15803d">
          OHMIC / LINEAR
          <tspan x="140" dy="13" font-size="9.5px" font-weight="600">Low R_DS(on) • Closed Switch</tspan>
        </text>
        <text class="region-label" x="355" y="105" fill="#c2410c">
          SATURATION / ACTIVE
          <tspan x="355" dy="13" font-size="9.5px" font-weight="600">Amplifier Mode (Constant I_D)</tspan>
        </text>
        <text class="region-label" x="250" y="278" fill="#b91c1c" font-size="10px">
          CUTOFF REGION (V_GS &lt; V_th • Open Switch: I_D ≈ 0)
        </text>
      </g>

      
      <line x1="50" y1="290" x2="456" y2="290" class="axis" />
      <line x1="50" y1="290" x2="50" y2="24" class="axis" />

      
      <path d="M 456 287 L 462 290 L 456 293 Z" fill="#1e293b" />
      <path d="M 47 24 L 50 18 L 53 24 Z" fill="#1e293b" />

      
      <text class="axis-label" x="250" y="325" text-anchor="middle">Drain-Source Voltage V_DS (V)</text>
      <text class="axis-label" x="18" y="160" text-anchor="middle" transform="rotate(-90 18 160)">Drain Current I_D (A)</text>

      
      <g id="xTicks"></g>
      <g id="yTicks"></g>

      
      <g id="curvesGroup"></g>

      
      <g id="activeMarker" opacity="0">
        <circle id="markerDot" cx="0" cy="0" r="6.5" fill="#2563eb" stroke="#ffffff" stroke-width="2" class="state-dot"/>
        <text id="markerText" x="0" y="-10" font-size="11px" font-weight="800" fill="#0f172a" text-anchor="middle">ON</text>
      </g>
    </svg>
  </div>

  <script>
    // Coordinate mapping:
    // X: 0 to 10 V -> x: 50 to 450 (40 px / V)
    // Y: 0 to 10 A -> y: 290 to 30 (26 px / A)
    const toSvgX = v => 50 + v * 40;
    const toSvgY = i => 290 - i * 26;

    // Mathematical parameters: V_th = 2.0 V, k = 0.15 A/V^2
    const Vth = 2.0;
    const k = 0.15;

    // Generate accurate boundary locus points (where V_DS = V_OV = V_GS - V_th => I_D = k * V_DS^2)
    // Up to I_D = 10A => V_DS_max = sqrt(10 / 0.15) ≈ 8.165 V
    const vdsMaxLocus = Math.sqrt(10 / k);
    let locusPoints = [];
    for (let v = 0; v <= vdsMaxLocus; v += 0.1) {
      const id = k * v * v;
      locusPoints.push({ x: toSvgX(v), y: toSvgY(id) });
    }
    const finalLocusPt = { x: toSvgX(vdsMaxLocus), y: toSvgY(10) };
    locusPoints.push(finalLocusPt);

    // Boundary Curve Path
    let boundaryD = `M ${locusPoints[0].x.toFixed(1)} ${locusPoints[0].y.toFixed(1)}`;
    for (let i = 1; i < locusPoints.length; i++) {
      boundaryD += ` L ${locusPoints[i].x.toFixed(1)} ${locusPoints[i].y.toFixed(1)}`;
    }
    document.getElementById('boundaryCurve').setAttribute('d', boundaryD);

    // Ohmic Region Path: Area to the LEFT of the boundary (enclosed by Y-axis, top edge, and locus)
    let ohmicD = `M 50 290 L 50 30 L ${finalLocusPt.x.toFixed(1)} 30`;
    for (let i = locusPoints.length - 1; i >= 0; i--) {
      ohmicD += ` L ${locusPoints[i].x.toFixed(1)} ${locusPoints[i].y.toFixed(1)}`;
    }
    ohmicD += ' Z';
    document.getElementById('ohmicRegion').setAttribute('d', ohmicD);

    // Saturation Region Path: Area to the RIGHT of the boundary (enclosed by locus, top edge, right edge, and bottom)
    let satD = `M 50 290`;
    for (let i = 0; i < locusPoints.length; i++) {
      satD += ` L ${locusPoints[i].x.toFixed(1)} ${locusPoints[i].y.toFixed(1)}`;
    }
    satD += ` L 450 30 L 450 290 Z`;
    document.getElementById('satRegion').setAttribute('d', satD);

    // Render Ticks with high contrast
    const xTicksGroup = document.getElementById('xTicks');
    for (let v = 0; v <= 10; v += 2) {
      const x = toSvgX(v);
      xTicksGroup.innerHTML += `
        <line x1="${x}" y1="290" x2="${x}" y2="295" stroke="#334155" stroke-width="1.5"/>
        <text class="tick-label" x="${x}" y="308">${v}V</text>
      `;
    }

    const yTicksGroup = document.getElementById('yTicks');
    for (let i = 0; i <= 10; i += 2) {
      const y = toSvgY(i);
      yTicksGroup.innerHTML += `
        <line x1="45" y1="${y}" x2="50" y2="${y}" stroke="#334155" stroke-width="1.5"/>
        <text class="tick-label" x="40" y="${y + 3.5}" text-anchor="end">${i}A</text>
      `;
    }

    // Characteristic Curves Data
    const curvesData = [
      { vgs: 10, color: '#1d4ed8' },
      { vgs: 5,  color: '#0284c7' },
      { vgs: 4,  color: '#0f766e' },
      { vgs: 3,  color: '#475569' }
    ];

    function generatePath(vgs) {
      let d = `M ${toSvgX(0)} ${toSvgY(0)}`;
      const vov = Math.max(0, vgs - Vth);
      for (let vds = 0.05; vds <= 10.02; vds += 0.1) {
        let id = 0;
        if (vds < vov) {
          id = k * (2 * vov * vds - vds * vds);
        } else {
          id = k * vov * vov;
        }
        d += ` L ${toSvgX(vds).toFixed(1)} ${toSvgY(id).toFixed(1)}`;
      }
      return d;
    }

    // Render Curves & Curve Labels
    const curvesGroup = document.getElementById('curvesGroup');
    curvesData.forEach(c => {
      const pathD = generatePath(c.vgs);
      const vov = c.vgs - Vth;
      const finalId = c.vgs >= 10 ? k * (2 * vov * 10 - 100) : k * vov * vov;
      const labelY = toSvgY(finalId);

      curvesGroup.innerHTML += `
        <path class="curve" id="curve-${c.vgs}" d="${pathD}" stroke="${c.color}"/>
        <text class="curve-label" x="455" y="${labelY + 3.5}" fill="${c.color}">V_GS = ${c.vgs}V</text>
      `;
    });

    // Interactive Mode Controls
    function setMode(mode) {
      document.querySelectorAll('.mode-btn').forEach(btn => btn.classList.remove('active'));
      const activeBtn = Array.from(document.querySelectorAll('.mode-btn')).find(b => b.getAttribute('onclick').includes(mode));
      if (activeBtn) activeBtn.classList.add('active');

      const ohmic = document.getElementById('ohmicRegion');
      const sat = document.getElementById('satRegion');
      const cutoff = document.getElementById('cutoffRegion');
      const marker = document.getElementById('activeMarker');
      const dot = document.getElementById('markerDot');
      const markerText = document.getElementById('markerText');

      if (mode === 'all') {
        ohmic.style.opacity = '1';
        sat.style.opacity = '1';
        cutoff.style.opacity = '1';
        marker.style.opacity = '0';
        curvesData.forEach(c => document.getElementById(`curve-${c.vgs}`).style.opacity = '1');
      } else if (mode === 'cutoff') {
        ohmic.style.opacity = '0.08';
        sat.style.opacity = '0.08';
        cutoff.style.opacity = '1';
        marker.style.opacity = '1';
        dot.setAttribute('cx', toSvgX(8.5));
        dot.setAttribute('cy', toSvgY(0));
        dot.setAttribute('fill', '#dc2626');
        markerText.setAttribute('x', toSvgX(8.5));
        markerText.setAttribute('y', toSvgY(0) - 10);
        markerText.textContent = 'OFF (Open: I_D = 0)';
        curvesData.forEach(c => document.getElementById(`curve-${c.vgs}`).style.opacity = '0.2');
      } else if (mode === 'ohmic') {
        ohmic.style.opacity = '1';
        sat.style.opacity = '0.08';
        cutoff.style.opacity = '0.08';
        marker.style.opacity = '1';
        const vdsOn = 0.7;
        const vov = 10 - Vth;
        const idOn = k * (2 * vov * vdsOn - vdsOn * vdsOn);
        dot.setAttribute('cx', toSvgX(vdsOn));
        dot.setAttribute('cy', toSvgY(idOn));
        dot.setAttribute('fill', '#16a34a');
        markerText.setAttribute('x', toSvgX(vdsOn) + 38);
        markerText.setAttribute('y', toSvgY(idOn) - 6);
        markerText.textContent = 'ON (Low R_DS(on))';
        curvesData.forEach(c => document.getElementById(`curve-${c.vgs}`).style.opacity = c.vgs === 10 ? '1' : '0.2');
      } else if (mode === 'sat') {
        ohmic.style.opacity = '0.08';
        sat.style.opacity = '1';
        cutoff.style.opacity = '0.08';
        marker.style.opacity = '1';
        const satVds = 6.0;
        const satId = k * 9; // V_GS = 5V curve saturation
        dot.setAttribute('cx', toSvgX(satVds));
        dot.setAttribute('cy', toSvgY(satId));
        dot.setAttribute('fill', '#ea580c');
        markerText.setAttribute('x', toSvgX(satVds));
        markerText.setAttribute('y', toSvgY(satId) - 10);
        markerText.textContent = 'Linear Amp (High Heat)';
        curvesData.forEach(c => document.getElementById(`curve-${c.vgs}`).style.opacity = c.vgs === 5 ? '1' : '0.25');
      }
    }
  </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="aspect-ratio" content="4:3">
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    }

    body {
      background: #ffffff;
      color: #1e2945;
      padding: 16px;
      display: flex;
      flex-direction: column;
      gap: 12px;
      user-select: none;
    }

    /* Controls Header */
    .header-bar {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 8px;
    }

    .step-tabs {
      display: flex;
      gap: 6px;
      flex: 1;
    }

    .tab-btn {
      flex: 1;
      padding: 6px 4px;
      font-size: 13px;
      font-weight: 600;
      border: 1px solid #e2e8f0;
      background: #f8fafc;
      color: #64748b;
      border-radius: 6px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 4px;
      transition: all 0.25s ease;
    }

    .tab-btn.active {
      background: #eff6ff;
      border-color: #2563eb;
      color: #2563eb;
      box-shadow: 0 0 0 1px #2563eb;
    }

    .tab-badge {
      width: 18px;
      height: 18px;
      border-radius: 50%;
      background: #cbd5e1;
      color: #ffffff;
      font-size: 11px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .tab-btn.active .tab-badge {
      background: #2563eb;
    }

    .play-btn {
      padding: 6px 12px;
      font-size: 13px;
      font-weight: 600;
      border: 1px solid #cbd5e1;
      background: #ffffff;
      color: #1e2945;
      border-radius: 6px;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 4px;
    }

    .play-btn:active {
      background: #f1f5f9;
    }

    /* Steps Stack */
    .steps-container {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .step-card {
      background: #ffffff;
      border: 1.5px solid #e2e8f0;
      border-radius: 8px;
      padding: 10px 14px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      opacity: 0.45;
      filter: grayscale(40%);
      transition: all 0.3s ease;
    }

    .step-card.active {
      opacity: 1;
      filter: grayscale(0%);
      border-color: #2563eb;
      background: #f8fafc;
      box-shadow: 0 2px 8px rgba(37, 99, 235, 0.08);
    }

    .step-card.completed {
      opacity: 0.85;
      filter: grayscale(0%);
      border-color: #cbd5e1;
      background: #ffffff;
    }

    .step-left {
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .step-num {
      width: 24px;
      height: 24px;
      border-radius: 50%;
      background: #94a3b8;
      color: #ffffff;
      font-size: 12px;
      font-weight: 700;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }

    .step-card.active .step-num {
      background: #2563eb;
    }

    .step-card.completed .step-num {
      background: #16a34a;
    }

    .step-title {
      font-size: 12px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      color: #64748b;
    }

    .step-card.active .step-title {
      color: #2563eb;
    }

    /* Math and Values */
    .math-content {
      font-size: 15px;
      font-weight: 600;
      display: flex;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
      justify-content: flex-end;
    }

    .tag {
      display: inline-flex;
      align-items: center;
      padding: 2px 8px;
      border-radius: 4px;
      font-size: 13px;
      font-weight: 600;
    }

    .tag-blue {
      background: #dbeafe;
      color: #1d4ed8;
      border: 1px solid #bfdbfe;
    }

    .tag-orange {
      background: #ffedd5;
      color: #c2410c;
      border: 1px solid #fed7aa;
    }

    .tag-gray {
      background: #f1f5f9;
      color: #475569;
      border: 1px solid #e2e8f0;
    }

    .math-sym {
      color: #64748b;
      font-weight: 400;
    }

    /* Final Result & Status */
    .result-pill {
      background: #dcfce7;
      border: 1px solid #86efac;
      color: #15803d;
      padding: 4px 10px;
      border-radius: 6px;
      font-size: 15px;
      font-weight: 700;
    }

    /* Thermal Safety Gauge */
    .status-panel {
      margin-top: 2px;
      background: #f0fdf4;
      border: 1px solid #bbf7d0;
      border-radius: 8px;
      padding: 10px 14px;
      display: flex;
      flex-direction: column;
      gap: 6px;
    }

    .status-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 12px;
      font-weight: 700;
    }

    .safe-badge {
      display: flex;
      align-items: center;
      gap: 4px;
      color: #15803d;
    }

    .limit-label {
      color: #64748b;
      font-weight: 600;
    }

    .gauge-track {
      height: 8px;
      background: #e2e8f0;
      border-radius: 4px;
      overflow: hidden;
      position: relative;
    }

    .gauge-fill {
      height: 100%;
      width: 45%;
      background: #22c55e;
      border-radius: 4px;
      transition: width 0.4s ease;
    }

    .gauge-limit-marker {
      position: absolute;
      left: 50%;
      top: 0;
      bottom: 0;
      width: 2px;
      background: #94a3b8;
    }

    .status-sub {
      font-size: 12px;
      font-weight: 600;
      color: #166534;
      text-align: center;
    }

    @media (max-width: 450px) {
      body {
        padding: 10px;
        gap: 8px;
      }
      .math-content {
        font-size: 13px;
      }
      .tag {
        font-size: 11px;
        padding: 2px 6px;
      }
      .step-title {
        display: none;
      }
    }
  </style>
</head>
<body>

  
  <div class="header-bar">
    <div class="step-tabs">
      <button class="tab-btn active" id="tab0" onclick="goToStep(0)">
        <span class="tab-badge">1</span> Given
      </button>
      <button class="tab-btn" id="tab1" onclick="goToStep(1)">
        <span class="tab-badge">2</span> Formula
      </button>
      <button class="tab-btn" id="tab2" onclick="goToStep(2)">
        <span class="tab-badge">3</span> Substitute
      </button>
      <button class="tab-btn" id="tab3" onclick="goToStep(3)">
        <span class="tab-badge">4</span> Result
      </button>
    </div>
    <button class="play-btn" id="playBtn" onclick="togglePlay()">
      <span id="playIcon">⏸</span>
    </button>
  </div>

  
  <div class="steps-container">
    
    <div class="step-card active" id="card0" onclick="goToStep(0)">
      <div class="step-left">
        <div class="step-num" id="num0">1</div>
        <div class="step-title">Given</div>
      </div>
      <div class="math-content">
        <span class="tag tag-blue">I<sub>D</sub> = 6.0 A</span>
        <span class="tag tag-orange">R<sub>DS(on)</sub> = 0.025 Ω</span>
        <span class="tag tag-gray">V<sub>GS</sub> = 5.0 V</span>
      </div>
    </div>

    
    <div class="step-card" id="card1" onclick="goToStep(1)">
      <div class="step-left">
        <div class="step-num" id="num1">2</div>
        <div class="step-title">Formula</div>
      </div>
      <div class="math-content">
        <span>P<sub>loss</sub></span>
        <span class="math-sym">=</span>
        <span style="color:#1d4ed8">(I<sub>D</sub>)<sup>2</sup></span>
        <span class="math-sym">×</span>
        <span style="color:#c2410c">R<sub>DS(on)</sub></span>
      </div>
    </div>

    
    <div class="step-card" id="card2" onclick="goToStep(2)">
      <div class="step-left">
        <div class="step-num" id="num2">3</div>
        <div class="step-title">Substitute</div>
      </div>
      <div class="math-content">
        <span>P<sub>loss</sub></span>
        <span class="math-sym">=</span>
        <span class="tag tag-blue">(6.0 A)<sup>2</sup></span>
        <span class="math-sym">×</span>
        <span class="tag tag-orange">0.025 Ω</span>
        <span class="math-sym">=</span>
        <span style="color:#1e2945">36 × 0.025</span>
      </div>
    </div>

    
    <div class="step-card" id="card3" onclick="goToStep(3)">
      <div class="step-left">
        <div class="step-num" id="num3">4</div>
        <div class="step-title">Result</div>
      </div>
      <div class="math-content">
        <span>P<sub>loss</sub></span>
        <span class="math-sym">=</span>
        <div class="result-pill">0.90 W (900 mW)</div>
      </div>
    </div>
  </div>

  
  <div class="status-panel" id="statusPanel">
    <div class="status-header">
      <span class="safe-badge">✓ Under 1.0 W Threshold</span>
      <span class="limit-label">TO-220 Air Limit ≈ 1.0 W</span>
    </div>
    <div class="gauge-track">
      <div class="gauge-limit-marker" title="1W limit"></div>
      <div class="gauge-fill" id="gaugeFill"></div>
    </div>
    <div class="status-sub">Safe for TO-220 package without a large heatsink!</div>
  </div>

  <script>
    let currentStep = 0;
    const totalSteps = 4;
    let isPlaying = true;
    let intervalTimer = null;

    function renderStep() {
      for (let i = 0; i < totalSteps; i++) {
        const tab = document.getElementById('tab' + i);
        const card = document.getElementById('card' + i);
        const num = document.getElementById('num' + i);

        tab.classList.remove('active');
        card.classList.remove('active', 'completed');

        if (i === currentStep) {
          tab.classList.add('active');
          card.classList.add('active');
          num.textContent = (i + 1);
        } else if (i < currentStep) {
          card.classList.add('completed');
          num.textContent = '✓';
        } else {
          num.textContent = (i + 1);
        }
      }

      // Gauge animation
      const gauge = document.getElementById('gaugeFill');
      if (currentStep === 3) {
        gauge.style.width = '45%';
        gauge.style.background = '#22c55e';
      } else {
        gauge.style.width = ((currentStep + 1) * 11.25) + '%';
      }
    }

    function goToStep(index) {
      currentStep = index;
      renderStep();
    }

    function nextStep() {
      currentStep = (currentStep + 1) % totalSteps;
      renderStep();
    }

    function togglePlay() {
      isPlaying = !isPlaying;
      document.getElementById('playIcon').textContent = isPlaying ? '⏸' : '▶';
      if (isPlaying) {
        startTimer();
      } else {
        clearInterval(intervalTimer);
      }
    }

    function startTimer() {
      clearInterval(intervalTimer);
      intervalTimer = setInterval(() => {
        nextStep();
      }, 3500);
    }

    // Initialize
    renderStep();
    startTimer();
  </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="aspect-ratio" content="1:1">
  <title>Logic-Level vs Standard MOSFET</title>
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; font-family: system-ui, -apple-system, sans-serif; }
    body {
      background: #f8fafc;
      color: #1e293b;
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 12px;
      min-height: 100%;
    }

    .controls {
      display: flex;
      gap: 8px;
      background: #e2e8f0;
      padding: 4px;
      border-radius: 8px;
      margin-bottom: 12px;
    }
    .btn-toggle {
      border: none;
      background: transparent;
      padding: 6px 14px;
      border-radius: 6px;
      font-size: 13px;
      font-weight: 600;
      color: #64748b;
      cursor: pointer;
      transition: all 0.2s ease;
    }
    .btn-toggle.active {
      background: #ffffff;
      color: #0284c7;
      box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    }

    .grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
      width: 100%;
      max-width: 600px;
    }

    .card-panel {
      background: #ffffff;
      border-radius: 12px;
      border: 1.5px solid #e2e8f0;
      padding: 12px 10px;
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      transition: border-color 0.3s ease;
    }
    .card-panel.danger { border-color: #f87171; background: #fffdfd; }
    .card-panel.success { border-color: #4ade80; background: #fdfefe; }

    .part-id {
      font-size: 15px;
      font-weight: 700;
      color: #0f172a;
    }
    .part-sub {
      font-size: 12px;
      color: #64748b;
      margin-bottom: 8px;
    }

    .badge {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      padding: 4px 8px;
      border-radius: 6px;
      font-size: 12px;
      font-weight: 600;
      margin-bottom: 10px;
      min-height: 24px;
    }
    .badge-warn { background: #fee2e2; color: #dc2626; }
    .badge-ok { background: #dcfce7; color: #16a34a; }

    .channel-view {
      width: 100%;
      height: 90px;
      position: relative;
      background: #f1f5f9;
      border-radius: 8px;
      overflow: hidden;
      margin-bottom: 10px;
      border: 1px solid #cbd5e1;
    }

    /* Channel schematic representation */
    .gate-bar {
      position: absolute;
      top: 6px;
      left: 20%;
      right: 20%;
      height: 6px;
      background: #3b82f6;
      border-radius: 3px;
    }
    .oxide-layer {
      position: absolute;
      top: 13px;
      left: 15%;
      right: 15%;
      height: 3px;
      background: #cbd5e1;
    }
    .terminal {
      position: absolute;
      bottom: 8px;
      width: 22px;
      height: 40px;
      background: #64748b;
      border-radius: 4px;
      color: #fff;
      font-size: 10px;
      font-weight: bold;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .term-d { left: 8px; }
    .term-s { right: 8px; }

    .channel-flow {
      position: absolute;
      bottom: 18px;
      left: 30px;
      right: 30px;
      border-radius: 4px;
      transition: height 0.3s ease, background-color 0.3s ease, opacity 0.3s ease;
    }

    .heat-indicator {
      position: absolute;
      top: 26px;
      left: 50%;
      transform: translateX(-50%);
      font-size: 20px;
      transition: opacity 0.3s ease;
    }

    .stats {
      width: 100%;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 4px;
      margin-top: auto;
      background: #f8fafc;
      padding: 6px;
      border-radius: 6px;
    }
    .stat-item {
      display: flex;
      flex-direction: column;
    }
    .stat-lbl { font-size: 10px; color: #64748b; font-weight: 600; }
    .stat-val { font-size: 13px; font-weight: 700; color: #0f172a; }
    .stat-val.hot { color: #dc2626; }
    .stat-val.cool { color: #16a34a; }

    @media (max-width: 400px) {
      .grid { grid-template-columns: 1fr; gap: 8px; }
      .badge { font-size: 11px; }
    }
  </style>
</head>
<body>

  <div class="controls">
    <button class="btn-toggle active" id="btn33" onclick="setDrive('3.3V')">V_GS = 3.3V (MCU Pin)</button>
    <button class="btn-toggle" id="btn10" onclick="setDrive('10V')">V_GS = 10V (Gate Driver)</button>
  </div>

  <div class="grid">
    
    <div class="card-panel danger" id="cardStd">
      <div class="part-id">IRF540N</div>
      <div class="part-sub">Standard Power MOSFET</div>
      
      <div class="badge badge-warn" id="badgeStd">⚠️ Trapped in active region</div>

      <div class="channel-view">
        <div class="gate-bar"></div>
        <div class="oxide-layer"></div>
        <div class="terminal term-d">D</div>
        <div class="terminal term-s">S</div>
        <div class="channel-flow" id="flowStd" style="height: 5px; background: #f87171;"></div>
        <div class="heat-indicator" id="heatStd">🔥</div>
      </div>

      <div class="stats">
        <div class="stat-item">
          <span class="stat-lbl">V_DS DROP</span>
          <span class="stat-val hot" id="vdsStd">4.0 V</span>
        </div>
        <div class="stat-item">
          <span class="stat-lbl">HEAT LOSS</span>
          <span class="stat-val hot" id="pwrStd">24 W</span>
        </div>
      </div>
    </div>

    
    <div class="card-panel success" id="cardLogic">
      <div class="part-id">IRLZ44N</div>
      <div class="part-sub">Logic-Level MOSFET</div>
      
      <div class="badge badge-ok" id="badgeLogic">✓ Fully in ohmic region</div>

      <div class="channel-view">
        <div class="gate-bar"></div>
        <div class="oxide-layer"></div>
        <div class="terminal term-d">D</div>
        <div class="terminal term-s">S</div>
        <div class="channel-flow" id="flowLogic" style="height: 22px; background: #22c55e;"></div>
        <div class="heat-indicator" id="heatLogic" style="opacity: 0;">❄️</div>
      </div>

      <div class="stats">
        <div class="stat-item">
          <span class="stat-lbl">V_DS DROP</span>
          <span class="stat-val cool" id="vdsLogic">0.17 V</span>
        </div>
        <div class="stat-item">
          <span class="stat-lbl">HEAT LOSS</span>
          <span class="stat-val cool" id="pwrLogic">1.0 W</span>
        </div>
      </div>
    </div>
  </div>

  <script>
    function setDrive(voltage) {
      const is33 = (voltage === '3.3V');
      document.getElementById('btn33').classList.toggle('active', is33);
      document.getElementById('btn10').classList.toggle('active', !is33);

      const cardStd = document.getElementById('cardStd');
      const badgeStd = document.getElementById('badgeStd');
      const flowStd = document.getElementById('flowStd');
      const heatStd = document.getElementById('heatStd');
      const vdsStd = document.getElementById('vdsStd');
      const pwrStd = document.getElementById('pwrStd');

      if (is33) {
        cardStd.className = 'card-panel danger';
        badgeStd.className = 'badge badge-warn';
        badgeStd.innerHTML = '⚠️ Trapped in active region';
        flowStd.style.height = '5px';
        flowStd.style.background = '#f87171';
        heatStd.style.opacity = '1';
        vdsStd.className = 'stat-val hot';
        vdsStd.textContent = '4.0 V';
        pwrStd.className = 'stat-val hot';
        pwrStd.textContent = '24 W';
      } else {
        cardStd.className = 'card-panel success';
        badgeStd.className = 'badge badge-ok';
        badgeStd.innerHTML = '✓ Fully in ohmic region';
        flowStd.style.height = '22px';
        flowStd.style.background = '#22c55e';
        heatStd.style.opacity = '0';
        vdsStd.className = 'stat-val cool';
        vdsStd.textContent = '0.26 V';
        pwrStd.className = 'stat-val cool';
        pwrStd.textContent = '1.6 W';
      }
    }
  </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="aspect-ratio" content="4:3">
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body {
      font-family: system-ui, -apple-system, sans-serif;
      background: #f8f9fa;
      color: #1e2945;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      min-height: 100%;
      padding: 12px;
      user-select: none;
    }

    .controls {
      display: flex;
      gap: 6px;
      background: #e2e8f0;
      padding: 4px;
      border-radius: 8px;
      width: 100%;
      max-width: 440px;
    }

    .btn {
      flex: 1;
      border: none;
      background: transparent;
      padding: 8px 6px;
      font-size: 13px;
      font-weight: 700;
      color: #64748b;
      border-radius: 6px;
      cursor: pointer;
      transition: all 0.2s ease;
      text-align: center;
    }

    .btn.active {
      background: #ffffff;
      color: #1e2945;
      box-shadow: 0 1px 4px rgba(0,0,0,0.1);
    }

    .schematic-box {
      width: 100%;
      max-width: 480px;
      aspect-ratio: 5 / 3.4;
      position: relative;
    }

    svg {
      width: 100%;
      height: 100%;
      overflow: visible;
    }

    /* Animated current paths */
    .flow-line {
      stroke-dasharray: 6 6;
      animation: dash 1s linear infinite;
    }

    @keyframes dash {
      to { stroke-dashoffset: -12; }
    }

    .motor-spin {
      transform-origin: 390px 105px;
      animation: spin 0.8s linear infinite;
    }

    @keyframes spin {
      100% { transform: rotate(360deg); }
    }

    .tag {
      font-size: 11px;
      font-weight: 700;
      fill: #64748b;
    }

    .val {
      font-size: 13px;
      font-weight: 800;
    }

    .status-bar {
      width: 100%;
      max-width: 440px;
      padding: 8px 12px;
      border-radius: 8px;
      font-size: 13px;
      font-weight: 700;
      text-align: center;
      transition: all 0.3s ease;
    }

    .status-fail { background: #fee2e2; color: #b91c1c; }
    .status-off  { background: #f1f5f9; color: #475569; }
    .status-on   { background: #dcfce7; color: #15803d; }
  </style>
</head>
<body>

  <div class="controls">
    <button class="btn" id="btnDirect" onclick="setMode('direct')">Direct Drive</button>
    <button class="btn" id="btnOff" onclick="setMode('off')">MOSFET OFF</button>
    <button class="btn active" id="btnOn" onclick="setMode('on')">MOSFET ON</button>
  </div>

  <div class="schematic-box">
    <svg viewBox="0 0 500 340">
      <defs>
        
        <filter id="greenGlow" x="-20%" y="-20%" width="140%" height="140%">
          <feDropShadow dx="0" dy="0" stdDeviation="3" flood-color="#22c55e" flood-opacity="0.6"/>
        </filter>
        <filter id="redGlow" x="-20%" y="-20%" width="140%" height="140%">
          <feDropShadow dx="0" dy="0" stdDeviation="3" flood-color="#ef4444" flood-opacity="0.8"/>
        </filter>
      </defs>

      
      <path d="M 330 35 L 450 35" stroke="#ea580c" stroke-width="3" stroke-linecap="round"/>
      <text x="390" y="24" text-anchor="middle" fill="#ea580c" class="val">+12V Rail</text>

      <path d="M 360 305 L 420 305 M 370 311 L 410 311 M 380 317 L 400 317" stroke="#64748b" stroke-width="2.5" stroke-linecap="round"/>
      <text x="390" y="333" text-anchor="middle" class="tag">0V (GND)</text>

      
      <rect x="20" y="115" width="110" height="110" rx="8" fill="#ffffff" stroke="#cbd5e1" stroke-width="2"/>
      <text x="75" y="145" text-anchor="middle" class="val" fill="#1e2945">MCU</text>
      <text x="75" y="165" text-anchor="middle" class="tag">GPIO Pin</text>
      <text id="mcuVolt" x="75" y="195" text-anchor="middle" class="val" fill="#2563eb">3.3V</text>
      <text id="mcuCurr" x="75" y="212" text-anchor="middle" class="tag">0 mA</text>

      
      <g>
        <circle cx="390" cy="105" r="26" fill="#ffffff" stroke="#1e2945" stroke-width="2.5"/>
        <text x="390" y="111" text-anchor="middle" font-size="18" font-weight="900" fill="#1e2945">M</text>
        <g id="motorFan" class="motor-spin">
          <line x1="390" y1="84" x2="390" y2="126" stroke="#94a3b8" stroke-width="2"/>
          <line x1="369" y1="105" x2="411" y2="105" stroke="#94a3b8" stroke-width="2"/>
        </g>
        <text x="445" y="102" class="val" fill="#1e2945">Motor</text>
        <text x="445" y="118" class="tag">12V / 10A</text>
      </g>

      
      <g id="layerDirect" style="display:none;">
        <path d="M 130 170 L 390 170 L 390 131" fill="none" stroke="#ef4444" stroke-width="3" stroke-dasharray="4 4"/>
        <path d="M 390 35 L 390 79" fill="none" stroke="#ea580c" stroke-width="3"/>
        <path d="M 390 170 L 390 305" fill="none" stroke="#ef4444" stroke-width="3"/>
        <circle cx="260" cy="170" r="14" fill="#fee2e2" stroke="#ef4444" stroke-width="2"/>
        <text x="260" y="175" text-anchor="middle" font-size="14" font-weight="900" fill="#ef4444">✕</text>
        <text x="260" y="202" text-anchor="middle" font-size="12" font-weight="800" fill="#ef4444">OVERLOAD</text>
        <text x="260" y="217" text-anchor="middle" class="tag">Pin rating: 20mA max</text>
      </g>

      
      <g id="layerMosfet">
        
        <path d="M 130 170 L 230 170" fill="none" id="gateWire" stroke="#2563eb" stroke-width="3"/>
        
        
        <line x1="230" y1="145" x2="230" y2="195" stroke="#2563eb" stroke-width="3.5" stroke-linecap="round"/>
        
        
        <rect x="233" y="142" width="6" height="56" fill="#f8f9fa"/>
        
        
        <line x1="242" y1="145" x2="242" y2="157" stroke="#1e2945" stroke-width="3.5" stroke-linecap="round"/>
        <line x1="242" y1="164" x2="242" y2="176" stroke="#1e2945" stroke-width="3.5" stroke-linecap="round"/>
        <line x1="242" y1="183" x2="242" y2="195" stroke="#1e2945" stroke-width="3.5" stroke-linecap="round"/>

        
        <line id="channelOn" x1="242" y1="145" x2="242" y2="195" stroke="#22c55e" stroke-width="4" stroke-linecap="round" filter="url(#greenGlow)"/>

        
        <path d="M 242 151 L 270 151 L 270 70 L 390 70 L 390 79" fill="none" stroke="#1e2945" stroke-width="3"/>
        
        
        <path d="M 390 35 L 390 79" fill="none" stroke="#1e2945" stroke-width="3"/>

        
        <path d="M 242 189 L 270 189 L 270 270 L 390 270 L 390 305" fill="none" stroke="#1e2945" stroke-width="3"/>
        
        
        <path id="powerFlow" d="M 390 35 L 390 79 M 390 131 L 390 70 L 270 70 L 270 151 L 242 151 L 242 189 L 270 189 L 270 270 L 390 270 L 390 305" 
              fill="none" stroke="#22c55e" stroke-width="4" class="flow-line" filter="url(#greenGlow)"/>

        
        <text x="218" y="136" text-anchor="end" class="val" fill="#2563eb">G</text>
        <text x="218" y="150" text-anchor="end" class="tag">Gate (Isolated)</text>

        <text x="280" y="145" class="val" fill="#1e2945">D</text>
        <text x="295" y="145" class="tag">Drain (In)</text>

        <text x="280" y="200" class="val" fill="#1e2945">S</text>
        <text x="295" y="200" class="tag">Source (Out)</text>
      </g>
    </svg>
  </div>

  <div id="statusBar" class="status-bar status-on">
    Gate: 3.3V (0A) → 10A Motor ON
  </div>

  <script>
    function setMode(mode) {
      const btnDirect = document.getElementById('btnDirect');
      const btnOff = document.getElementById('btnOff');
      const btnOn = document.getElementById('btnOn');
      
      const layerDirect = document.getElementById('layerDirect');
      const layerMosfet = document.getElementById('layerMosfet');
      const channelOn = document.getElementById('channelOn');
      const powerFlow = document.getElementById('powerFlow');
      const motorFan = document.getElementById('motorFan');
      
      const mcuVolt = document.getElementById('mcuVolt');
      const mcuCurr = document.getElementById('mcuCurr');
      const gateWire = document.getElementById('gateWire');
      const statusBar = document.getElementById('statusBar');

      // Reset active buttons
      [btnDirect, btnOff, btnOn].forEach(b => b.classList.remove('active'));

      if (mode === 'direct') {
        btnDirect.classList.add('active');
        layerDirect.style.display = 'block';
        layerMosfet.style.display = 'none';
        motorFan.style.display = 'none';
        
        mcuVolt.textContent = '0V / FAIL';
        mcuVolt.setAttribute('fill', '#ef4444');
        mcuCurr.textContent = 'Overcurrent!';
        mcuCurr.setAttribute('fill', '#ef4444');
        
        statusBar.className = 'status-bar status-fail';
        statusBar.textContent = '❌ MCU Damaged: 20mA limit exceeded';
      } 
      else if (mode === 'off') {
        btnOff.classList.add('active');
        layerDirect.style.display = 'none';
        layerMosfet.style.display = 'block';
        channelOn.style.display = 'none';
        powerFlow.style.display = 'none';
        motorFan.style.display = 'none';
        
        mcuVolt.textContent = '0V';
        mcuVolt.setAttribute('fill', '#64748b');
        mcuCurr.textContent = '0 mA';
        mcuCurr.setAttribute('fill', '#64748b');
        gateWire.setAttribute('stroke', '#94a3b8');
        
        statusBar.className = 'status-bar status-off';
        statusBar.textContent = 'Gate: 0V → Channel Open → Motor OFF';
      } 
      else if (mode === 'on') {
        btnOn.classList.add('active');
        layerDirect.style.display = 'none';
        layerMosfet.style.display = 'block';
        channelOn.style.display = 'block';
        powerFlow.style.display = 'block';
        motorFan.style.display = 'block';
        
        mcuVolt.textContent = '3.3V';
        mcuVolt.setAttribute('fill', '#2563eb');
        mcuCurr.textContent = '0 mA (Voltage only)';
        mcuCurr.setAttribute('fill', '#64748b');
        gateWire.setAttribute('stroke', '#2563eb');
        
        statusBar.className = 'status-bar status-on';
        statusBar.textContent = 'Gate: 3.3V (0A) → 10A Motor ON';
      }
    }

    // Initialize in ON state
    setMode('on');
  </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="aspect-ratio" content="4:3">
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body {
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      background: #f8fafc;
      color: #1e293b;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-start;
      padding: 12px;
      user-select: none;
    }

    .controls {
      display: flex;
      gap: 8px;
      margin-bottom: 10px;
      width: 100%;
      max-width: 480px;
    }

    .btn {
      flex: 1;
      padding: 8px 12px;
      font-size: 13px;
      font-weight: 600;
      border-radius: 8px;
      border: 1px solid #cbd5e1;
      background: #ffffff;
      color: #475569;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      transition: background 0.2s, color 0.2s, box-shadow 0.2s, border-color 0.2s;
    }

    .btn.active {
      background: #2563eb;
      color: #ffffff;
      border-color: #2563eb;
      box-shadow: 0 2px 6px rgba(37, 99, 235, 0.25);
    }

    .svg-container {
      width: 100%;
      max-width: 480px;
      position: relative;
    }

    svg {
      width: 100%;
      height: auto;
      display: block;
      overflow: visible;
    }

    /* Transition states */
    .gate-charge {
      transition: opacity 0.35s ease;
    }
    .channel-layer {
      transition: opacity 0.35s ease, transform 0.35s ease;
      transform-origin: center top;
    }
    .current-flow {
      transition: opacity 0.35s ease;
    }
    .holes-layer {
      transition: opacity 0.35s ease;
    }

    .status-badge {
      font-size: 12px;
      font-weight: 700;
      letter-spacing: 0.5px;
      text-transform: uppercase;
      fill: #64748b;
      transition: fill 0.3s;
    }
    .status-badge.on {
      fill: #16a34a;
    }
  </style>
</head>
<body>

  <div class="controls">
    <button class="btn active" id="btnOff" onclick="setState('off')">
      V<sub>GS</sub> = 0V (OFF)
    </button>
    <button class="btn" id="btnOn" onclick="setState('on')">
      V<sub>GS</sub> &gt; V<sub>th</sub> (ON)
    </button>
  </div>

  <div class="svg-container">
    <svg viewBox="0 0 460 310">
      <defs>
        
        <linearGradient id="pSubGrad" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0%" stop-color="#ede9fe"/>
          <stop offset="100%" stop-color="#ddd6fe"/>
        </linearGradient>

        <linearGradient id="nWellGrad" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0%" stop-color="#86efac"/>
          <stop offset="100%" stop-color="#4ade80"/>
        </linearGradient>

        <linearGradient id="gateGrad" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0%" stop-color="#3b82f6"/>
          <stop offset="100%" stop-color="#2563eb"/>
        </linearGradient>

        <linearGradient id="channelGrad" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0%" stop-color="#22c55e"/>
          <stop offset="100%" stop-color="#16a34a"/>
        </linearGradient>

        
        <marker id="arrow" viewBox="0 0 10 10" refX="6" refY="5" markerWidth="6" markerHeight="6" orient="auto-start-reverse">
          <path d="M 0 1.5 L 8 5 L 0 8.5 z" fill="#15803d"/>
        </marker>
      </defs>

      
      
      <path d="M 95 30 L 95 105" stroke="#64748b" stroke-width="2.5" stroke-linecap="round"/>
      <circle cx="95" cy="30" r="4" fill="#64748b"/>
      <text x="95" y="20" font-size="13" font-weight="700" text-anchor="middle" fill="#334155">Source</text>

      
      <path d="M 230 30 L 230 70" stroke="#2563eb" stroke-width="2.5" stroke-linecap="round"/>
      <circle cx="230" cy="30" r="4" fill="#2563eb"/>
      <text x="230" y="20" font-size="13" font-weight="700" text-anchor="middle" fill="#1d4ed8">Gate</text>

      
      <path d="M 365 30 L 365 105" stroke="#64748b" stroke-width="2.5" stroke-linecap="round"/>
      <circle cx="365" cy="30" r="4" fill="#64748b"/>
      <text x="365" y="20" font-size="13" font-weight="700" text-anchor="middle" fill="#334155">Drain</text>

      
      <rect x="25" y="115" width="410" height="175" rx="8" fill="url(#pSubGrad)" stroke="#c4b5fd" stroke-width="1.5"/>

      
      
      <rect x="50" y="115" width="90" height="65" rx="5" fill="url(#nWellGrad)" stroke="#22c55e" stroke-width="1.5"/>
      <text x="95" y="152" font-size="14" font-weight="700" text-anchor="middle" fill="#14532d">N+</text>

      
      <rect x="320" y="115" width="90" height="65" rx="5" fill="url(#nWellGrad)" stroke="#22c55e" stroke-width="1.5"/>
      <text x="365" y="152" font-size="14" font-weight="700" text-anchor="middle" fill="#14532d">N+</text>

      
      <rect x="70" y="105" width="50" height="10" rx="2" fill="#94a3b8"/>
      <rect x="340" y="105" width="50" height="10" rx="2" fill="#94a3b8"/>

      
      <g id="channelGroup" class="channel-layer" style="opacity: 0;">
        <rect x="140" y="115" width="180" height="18" fill="url(#channelGrad)"/>
        
        <text x="160" y="129" font-size="11" font-weight="bold" fill="#ffffff" text-anchor="middle">e⁻</text>
        <text x="195" y="129" font-size="11" font-weight="bold" fill="#ffffff" text-anchor="middle">e⁻</text>
        <text x="230" y="129" font-size="11" font-weight="bold" fill="#ffffff" text-anchor="middle">e⁻</text>
        <text x="265" y="129" font-size="11" font-weight="bold" fill="#ffffff" text-anchor="middle">e⁻</text>
        <text x="300" y="129" font-size="11" font-weight="bold" fill="#ffffff" text-anchor="middle">e⁻</text>
      </g>

      
      <g id="currentFlow" class="current-flow" style="opacity: 0;">
        <path d="M 115 145 C 170 120, 290 120, 345 145" fill="none" stroke="#15803d" stroke-width="3" stroke-dasharray="6,4" marker-end="url(#arrow)"/>
        <text x="230" y="160" font-size="12" font-weight="700" fill="#15803d" text-anchor="middle">Current Flow (I_D)</text>
      </g>

      
      <g id="holesGroup" class="holes-layer" style="opacity: 1;">
        <circle cx="170" cy="130" r="7" fill="#c4b5fd" stroke="#7c3aed" stroke-width="1.2"/>
        <text x="170" y="134" font-size="10" font-weight="bold" fill="#5b21b6" text-anchor="middle">+</text>

        <circle cx="210" cy="138" r="7" fill="#c4b5fd" stroke="#7c3aed" stroke-width="1.2"/>
        <text x="210" y="142" font-size="10" font-weight="bold" fill="#5b21b6" text-anchor="middle">+</text>

        <circle cx="250" cy="130" r="7" fill="#c4b5fd" stroke="#7c3aed" stroke-width="1.2"/>
        <text x="250" y="134" font-size="10" font-weight="bold" fill="#5b21b6" text-anchor="middle">+</text>

        <circle cx="290" cy="138" r="7" fill="#c4b5fd" stroke="#7c3aed" stroke-width="1.2"/>
        <text x="290" y="142" font-size="10" font-weight="bold" fill="#5b21b6" text-anchor="middle">+</text>

        <text x="230" y="164" font-size="12" font-weight="600" fill="#6b21a8" text-anchor="middle">No Conduction Path</text>
      </g>

      
      <rect x="140" y="103" width="180" height="12" fill="#cbd5e1" stroke="#94a3b8" stroke-width="1"/>
      <text x="230" y="112" font-size="9.5" font-weight="700" text-anchor="middle" fill="#475569">SiO₂ Insulator</text>

      
      <rect x="150" y="70" width="160" height="33" rx="3" fill="url(#gateGrad)" stroke="#1d4ed8" stroke-width="1.5"/>
      <text x="230" y="87" font-size="12" font-weight="700" text-anchor="middle" fill="#ffffff">Gate Metal</text>

      
      <g id="gateCharges" class="gate-charge" style="opacity: 0;">
        <text x="165" y="99" font-size="11" font-weight="bold" fill="#fef08a" text-anchor="middle">+</text>
        <text x="190" y="99" font-size="11" font-weight="bold" fill="#fef08a" text-anchor="middle">+</text>
        <text x="215" y="99" font-size="11" font-weight="bold" fill="#fef08a" text-anchor="middle">+</text>
        <text x="245" y="99" font-size="11" font-weight="bold" fill="#fef08a" text-anchor="middle">+</text>
        <text x="270" y="99" font-size="11" font-weight="bold" fill="#fef08a" text-anchor="middle">+</text>
        <text x="295" y="99" font-size="11" font-weight="bold" fill="#fef08a" text-anchor="middle">+</text>
      </g>

      
      <text x="230" y="240" font-size="14" font-weight="700" text-anchor="middle" fill="#6b21a8">P-Type Silicon Substrate</text>

      
      <circle cx="100" cy="240" r="6" fill="#ddd6fe" stroke="#8b5cf6" stroke-width="1"/>
      <text x="100" y="244" font-size="9" font-weight="bold" fill="#6d28d9" text-anchor="middle">+</text>

      <circle cx="360" cy="240" r="6" fill="#ddd6fe" stroke="#8b5cf6" stroke-width="1"/>
      <text x="360" y="244" font-size="9" font-weight="bold" fill="#6d28d9" text-anchor="middle">+</text>

      
      <text id="statusText" class="status-badge" x="230" y="275" text-anchor="middle">Channel: OFF (Isolated)</text>
    </svg>
  </div>

  <script>
    function setState(state) {
      const isON = (state === 'on');

      // Update buttons
      document.getElementById('btnOff').classList.toggle('active', !isON);
      document.getElementById('btnOn').classList.toggle('active', isON);

      // Update diagram layers
      document.getElementById('channelGroup').style.opacity = isON ? '1' : '0';
      document.getElementById('currentFlow').style.opacity = isON ? '1' : '0';
      document.getElementById('gateCharges').style.opacity = isON ? '1' : '0';
      document.getElementById('holesGroup').style.opacity = isON ? '0' : '1';

      // Update status text
      const statusText = document.getElementById('statusText');
      if (isON) {
        statusText.textContent = 'Channel: ON (Inversion Layer Conducts)';
        statusText.classList.add('on');
      } else {
        statusText.textContent = 'Channel: OFF (Isolated)';
        statusText.classList.remove('on');
      }
    }
  </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>High-Side P-MOSFET Switch</title>
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      background: #ffffff;
      color: #1e2945;
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 10px;
      user-select: none;
    }
    .controls {
      display: flex;
      gap: 8px;
      margin-bottom: 6px;
      width: 100%;
      max-width: 440px;
      justify-content: center;
    }
    .toggle-btn {
      flex: 1;
      padding: 8px 12px;
      font-size: 13px;
      font-weight: 700;
      border-radius: 6px;
      border: 1px solid #cbd5e1;
      background: #f1f5f9;
      color: #475569;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background 0.15s, color 0.15s, border-color 0.15s;
    }
    .toggle-btn:hover {
      background: #e2e8f0;
    }
    .toggle-btn.active {
      background: #0284c7;
      color: #ffffff;
      border-color: #0284c7;
      box-shadow: 0 2px 6px rgba(2, 132, 199, 0.25);
    }
    .schematic-box {
      width: 100%;
      max-width: 440px;
      position: relative;
    }
    svg {
      width: 100%;
      height: auto;
      display: block;
    }
    .status-bar {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 6px;
      width: 100%;
      max-width: 440px;
      margin-top: 6px;
    }
    .status-card {
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      border-radius: 6px;
      padding: 6px 4px;
      text-align: center;
    }
    .status-card .label {
      font-size: 10px;
      font-weight: 600;
      color: #64748b;
      text-transform: uppercase;
      letter-spacing: 0.2px;
    }
    .status-card .val {
      font-size: 13px;
      font-weight: 700;
      color: #0f172a;
      margin-top: 2px;
      transition: color 0.15s;
    }
    .val.active {
      color: #0284c7;
    }
    .val.on {
      color: #16a34a;
    }
  </style>
</head>
<body>

  <div class="controls">
    <button id="btnLow" class="toggle-btn active" onclick="setState(false)">
      <span>Logic LOW (0V)</span>
    </button>
    <button id="btnHigh" class="toggle-btn" onclick="setState(true)">
      <span>Logic HIGH (3.3V)</span>
    </button>
  </div>

  <div class="schematic-box">
    <svg viewBox="0 0 440 330">
      
      
      <line x1="25" y1="25" x2="415" y2="25" stroke="#dc2626" stroke-width="2.5" stroke-linecap="round"/>
      <text x="30" y="18" fill="#dc2626" font-size="12" font-weight="bold">+24V (V_DD)</text>

      
      <line x1="25" y1="305" x2="415" y2="305" stroke="#475569" stroke-width="2.5" stroke-linecap="round"/>
      <text x="30" y="322" fill="#475569" font-size="12" font-weight="bold">GND (0V)</text>

      
      
      <line x1="30" y1="245" x2="55" y2="245" stroke="#1e2945" stroke-width="2"/>
      <circle cx="30" cy="245" r="4" fill="#0284c7"/>
      <text id="txtCtrlIn" x="25" y="235" fill="#0284c7" font-size="11" font-weight="bold" text-anchor="start">IN: 0V</text>

      
      <rect x="55" y="238" width="34" height="14" fill="#ffffff" stroke="#1e2945" stroke-width="2" rx="2"/>
      <text x="72" y="233" fill="#64748b" font-size="10" font-weight="600" text-anchor="middle">4.7kΩ</text>

      <line x1="89" y1="245" x2="120" y2="245" stroke="#1e2945" stroke-width="2"/>

      
      
      <line x1="120" y1="232" x2="120" y2="258" stroke="#1e2945" stroke-width="3"/>
      
      <line x1="120" y1="238" x2="145" y2="225" stroke="#1e2945" stroke-width="2"/>
      
      <line x1="120" y1="252" x2="145" y2="265" stroke="#1e2945" stroke-width="2"/>
      <line x1="145" y1="265" x2="145" y2="305" stroke="#1e2945" stroke-width="2"/>
      <polygon points="134,256 143,264 132,266" fill="#1e2945"/>
      <text x="102" y="272" fill="#1e2945" font-size="11" font-weight="bold">NPN</text>

      
      
      <line x1="145" y1="25" x2="145" y2="55" stroke="#1e2945" stroke-width="2"/>
      <rect x="136" y="55" width="18" height="32" fill="#ffffff" stroke="#1e2945" stroke-width="2" rx="2"/>
      <text x="128" y="74" fill="#64748b" font-size="10" font-weight="600" text-anchor="end">R1 (10k)</text>

      
      <line x1="145" y1="87" x2="145" y2="135" stroke="#1e2945" stroke-width="2"/>
      <line x1="145" y1="110" x2="275" y2="110" stroke="#1e2945" stroke-width="2"/>
      <circle cx="145" cy="110" r="3.5" fill="#1e2945"/>

      
      <rect x="136" y="135" width="18" height="32" fill="#ffffff" stroke="#1e2945" stroke-width="2" rx="2"/>
      <text x="128" y="154" fill="#64748b" font-size="10" font-weight="600" text-anchor="end">R2 (14k)</text>
      
      <line x1="145" y1="167" x2="145" y2="225" stroke="#1e2945" stroke-width="2"/>

      
      <g id="badgeGate">
        <rect x="165" y="90" width="76" height="18" fill="#f8fafc" stroke="#cbd5e1" stroke-width="1.5" rx="3"/>
        <text id="txtVgate" x="203" y="103" fill="#0f172a" font-size="10" font-weight="bold" text-anchor="middle">V_G = +24V</text>
      </g>
      <g id="badgeVgs">
        <rect x="165" y="112" width="76" height="18" fill="#ffffff" stroke="#cbd5e1" stroke-width="1" rx="3"/>
        <text id="txtVgs" x="203" y="125" fill="#64748b" font-size="10" font-weight="bold" text-anchor="middle">V_GS = 0V</text>
      </g>

      
      
      <text x="272" y="80" fill="#64748b" font-size="10" font-weight="bold" text-anchor="end">Gate (G)</text>

      
      <line x1="305" y1="25" x2="305" y2="85" stroke="#1e2945" stroke-width="2"/>
      <text x="315" y="48" fill="#64748b" font-size="10" font-weight="bold">Source (S)</text>

      
      <line x1="275" y1="85" x2="275" y2="135" stroke="#1e2945" stroke-width="2.5"/>
      
      <line x1="287" y1="78" x2="287" y2="94" stroke="#1e2945" stroke-width="2.5"/>
      <line x1="287" y1="102" x2="287" y2="118" stroke="#1e2945" stroke-width="2.5"/>
      <line x1="287" y1="126" x2="287" y2="142" stroke="#1e2945" stroke-width="2.5"/>

      
      <line x1="287" y1="86" x2="305" y2="86" stroke="#1e2945" stroke-width="2"/>
      <line x1="287" y1="134" x2="305" y2="134" stroke="#1e2945" stroke-width="2"/>
      <line x1="305" y1="134" x2="305" y2="170" stroke="#1e2945" stroke-width="2"/>

      
      <line x1="287" y1="110" x2="305" y2="110" stroke="#1e2945" stroke-width="2"/>
      <line x1="305" y1="86" x2="305" y2="110" stroke="#1e2945" stroke-width="2"/>
      <polygon points="299,106 290,110 299,114" fill="#1e2945"/>

      <text x="315" y="160" fill="#64748b" font-size="10" font-weight="bold">Drain (D)</text>
      <text x="325" y="110" fill="#1e2945" font-size="11" font-weight="bold">P-FET</text>

      
      <line x1="305" y1="170" x2="305" y2="200" stroke="#1e2945" stroke-width="2"/>

      
      <circle id="loadGlow" cx="305" cy="225" r="24" fill="#f8fafc" stroke="#94a3b8" stroke-width="2"/>
      
      <path d="M 298 232 L 302 218 L 308 218 L 312 232" fill="none" stroke="#64748b" stroke-width="1.8"/>
      <text id="txtLoadState" x="305" y="263" fill="#64748b" font-size="10" font-weight="bold" text-anchor="middle">LOAD: OFF</text>

      
      <line x1="305" y1="249" x2="305" y2="305" stroke="#1e2945" stroke-width="2"/>

      
      <line id="pathDivider" x1="145" y1="25" x2="145" y2="305" stroke="#0284c7" stroke-width="2.5" stroke-dasharray="4 4" opacity="0"/>
      <line id="pathLoad" x1="305" y1="25" x2="305" y2="305" stroke="#16a34a" stroke-width="3" stroke-dasharray="6 4" opacity="0"/>
    </svg>
  </div>

  <div class="status-bar">
    <div class="status-card">
      <div class="label">NPN Switch</div>
      <div id="statNpn" class="val">OFF</div>
    </div>
    <div class="status-card">
      <div class="label">P-FET Gate (V_GS)</div>
      <div id="statVgs" class="val">0 V (OFF)</div>
    </div>
    <div class="status-card">
      <div class="label">Load Voltage</div>
      <div id="statLoad" class="val">0 V</div>
    </div>
  </div>

  <script>
    function setState(high) {
      const btnLow = document.getElementById('btnLow');
      const btnHigh = document.getElementById('btnHigh');
      const txtCtrlIn = document.getElementById('txtCtrlIn');
      const txtVgate = document.getElementById('txtVgate');
      const txtVgs = document.getElementById('txtVgs');
      const txtLoadState = document.getElementById('txtLoadState');
      const loadGlow = document.getElementById('loadGlow');
      const pathDivider = document.getElementById('pathDivider');
      const pathLoad = document.getElementById('pathLoad');

      const statNpn = document.getElementById('statNpn');
      const statVgs = document.getElementById('statVgs');
      const statLoad = document.getElementById('statLoad');

      if (high) {
        btnLow.classList.remove('active');
        btnHigh.classList.add('active');

        txtCtrlIn.textContent = "IN: +3.3V";
        txtCtrlIn.setAttribute('fill', '#16a34a');

        txtVgate.textContent = "V_G ≈ +10V";
        txtVgs.textContent = "V_GS = -14V";
        txtVgs.setAttribute('fill', '#dc2626');

        txtLoadState.textContent = "LOAD: +24V (ON)";
        txtLoadState.setAttribute('fill', '#16a34a');

        loadGlow.setAttribute('fill', '#fef08a');
        loadGlow.setAttribute('stroke', '#eab308');

        pathDivider.setAttribute('opacity', '1');
        pathLoad.setAttribute('opacity', '1');

        statNpn.textContent = "ON (Sat)";
        statNpn.className = "val active";

        statVgs.textContent = "-14 V (ON)";
        statVgs.className = "val active";

        statLoad.textContent = "+24 V";
        statLoad.className = "val on";
      } else {
        btnHigh.classList.remove('active');
        btnLow.classList.add('active');

        txtCtrlIn.textContent = "IN: 0V";
        txtCtrlIn.setAttribute('fill', '#0284c7');

        txtVgate.textContent = "V_G = +24V";
        txtVgs.textContent = "V_GS = 0V";
        txtVgs.setAttribute('fill', '#64748b');

        txtLoadState.textContent = "LOAD: OFF";
        txtLoadState.setAttribute('fill', '#64748b');

        loadGlow.setAttribute('fill', '#f8fafc');
        loadGlow.setAttribute('stroke', '#94a3b8');

        pathDivider.setAttribute('opacity', '0');
        pathLoad.setAttribute('opacity', '0');

        statNpn.textContent = "OFF";
        statNpn.className = "val";

        statVgs.textContent = "0 V (OFF)";
        statVgs.className = "val";

        statLoad.textContent = "0 V";
        statLoad.className = "val";
      }
    }

    // Initialize state
    setState(false);
  </script>
</body>
</html>

P-Channel Enhancement MOSFETs for High-Side Load Switching

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="aspect-ratio" content="1:1">
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body {
      font-family: system-ui, -apple-system, sans-serif;
      background: #ffffff;
      color: #1e2945;
      padding: 12px;
      display: flex;
      flex-direction: column;
      gap: 12px;
      max-width: 540px;
      margin: 0 auto;
    }
    
    /* Voltage Slider Bar */
    .ctrl-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      border-radius: 8px;
      padding: 10px 14px;
      gap: 12px;
    }
    .ctrl-label {
      font-weight: 700;
      font-size: 15px;
      display: flex;
      align-items: center;
      gap: 6px;
      white-space: nowrap;
    }
    .vcc-badge {
      background: #0284c7;
      color: #ffffff;
      font-weight: 800;
      font-size: 16px;
      padding: 2px 8px;
      border-radius: 6px;
      min-width: 58px;
      text-align: center;
    }
    .slider {
      flex: 1;
      height: 6px;
      accent-color: #0284c7;
      cursor: pointer;
    }

    /* Main Grid: Schematic + 3 Stage Cards */
    .content-grid {
      display: grid;
      grid-template-columns: 1fr 1.35fr;
      gap: 12px;
      align-items: stretch;
    }
    @media (max-width: 440px) {
      .content-grid {
        grid-template-columns: 1fr;
      }
    }

    /* Schematic Box */
    .schematic-box {
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      border-radius: 8px;
      padding: 8px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }
    svg {
      width: 100%;
      max-width: 180px;
      height: auto;
      overflow: visible;
    }

    /* Steps Column */
    .steps-col {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }
    .step-card {
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-left: 4px solid #0284c7;
      border-radius: 6px;
      padding: 8px 10px;
      display: flex;
      flex-direction: column;
      gap: 3px;
    }
    .step-title {
      font-size: 12px;
      font-weight: 700;
      color: #64748b;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      display: flex;
      justify-content: space-between;
    }
    .calc-row {
      font-size: 14px;
      font-weight: 600;
      color: #1e2945;
      display: flex;
      align-items: baseline;
      justify-content: space-between;
    }
    .val-highlight {
      color: #0284c7;
      font-weight: 800;
      font-size: 15px;
    }
    .math-sub {
      font-size: 11px;
      color: #64748b;
      font-family: monospace;
    }

    /* Safety Status Bar */
    .status-bar {
      display: flex;
      justify-content: space-between;
      align-items: center;
      background: #f0fdf4;
      border: 1px solid #bbf7d0;
      border-radius: 6px;
      padding: 6px 12px;
      font-size: 13px;
      font-weight: 600;
      color: #166534;
    }
  </style>
</head>
<body>

  
  <div class="ctrl-row">
    <div class="ctrl-label">
      <span>V<sub>CC</sub></span>
      <span class="vcc-badge" id="vccText">24 V</span>
    </div>
    <input type="range" class="slider" id="vccSlider" min="12" max="48" step="1" value="24">
  </div>

  <div class="content-grid">
    
    <div class="schematic-box">
      <svg viewBox="0 0 160 220">
        
        <line x1="20" y1="20" x2="140" y2="20" stroke="#0284c7" stroke-width="2.5" />
        <text x="142" y="24" font-size="11" font-weight="700" fill="#0284c7" id="svgVcc">24V</text>
        
        
        
        <line x1="120" y1="20" x2="120" y2="50" stroke="#1e2945" stroke-width="2" />
        
        <line x1="108" y1="50" x2="128" y2="50" stroke="#1e2945" stroke-width="2" />
        <line x1="108" y1="60" x2="128" y2="60" stroke="#1e2945" stroke-width="2" />
        <line x1="108" y1="70" x2="128" y2="70" stroke="#1e2945" stroke-width="2" />
        
        <line x1="102" y1="46" x2="102" y2="74" stroke="#1e2945" stroke-width="2" />
        
        <line x1="60" y1="60" x2="102" y2="60" stroke="#1e2945" stroke-width="2" />
        
        <line x1="120" y1="70" x2="120" y2="95" stroke="#1e2945" stroke-width="2" />
        <rect x="108" y="95" width="24" height="22" fill="#fff" stroke="#1e2945" stroke-width="1.5" />
        <text x="120" y="110" font-size="9" font-weight="600" text-anchor="middle" fill="#64748b">LOAD</text>
        <line x1="120" y1="117" x2="120" y2="135" stroke="#1e2945" stroke-width="2" />
        
        <line x1="110" y1="135" x2="130" y2="135" stroke="#1e2945" stroke-width="1.5" />

        
        <line x1="60" y1="20" x2="60" y2="30" stroke="#1e2945" stroke-width="2" />
        <rect x="52" y="30" width="16" height="20" fill="#fff" stroke="#1e2945" stroke-width="1.5" />
        <text x="46" y="44" font-size="10" font-weight="700" text-anchor="end" fill="#0284c7">R1</text>
        <line x1="60" y1="50" x2="60" y2="75" stroke="#1e2945" stroke-width="2" />
        <circle cx="60" cy="60" r="3" fill="#0284c7" />

        
        <rect x="52" y="75" width="16" height="22" fill="#fff" stroke="#0284c7" stroke-width="2" />
        <text x="46" y="90" font-size="10" font-weight="700" text-anchor="end" fill="#0284c7" id="svgR2">14k</text>
        <line x1="60" y1="97" x2="60" y2="120" stroke="#1e2945" stroke-width="2" />

        
        
        <line x1="60" y1="120" x2="60" y2="135" stroke="#1e2945" stroke-width="2" />
        
        <line x1="45" y1="135" x2="45" y2="155" stroke="#1e2945" stroke-width="2" />
        <line x1="45" y1="140" x2="60" y2="135" stroke="#1e2945" stroke-width="2" />
        <line x1="45" y1="150" x2="60" y2="155" stroke="#1e2945" stroke-width="2" />
        
        <polygon points="56,151 62,156 58,157" fill="#1e2945" />
        
        <line x1="60" y1="155" x2="60" y2="175" stroke="#1e2945" stroke-width="2" />
        <line x1="50" y1="175" x2="70" y2="175" stroke="#1e2945" stroke-width="2" />
        <line x1="54" y1="179" x2="66" y2="179" stroke="#1e2945" stroke-width="1.5" />
        <line x1="57" y1="183" x2="63" y2="183" stroke="#1e2945" stroke-width="1" />

        
        <line x1="45" y1="145" x2="35" y2="145" stroke="#1e2945" stroke-width="2" />
        <rect x="15" y="137" width="20" height="16" fill="#fff" stroke="#1e2945" stroke-width="1.5" />
        <text x="25" y="132" font-size="9" font-weight="700" text-anchor="middle" fill="#64748b">RB</text>
        <line x1="15" y1="145" x2="5" y2="145" stroke="#1e2945" stroke-width="2" />
        <circle cx="5" cy="145" r="2.5" fill="#1e2945" />
        <text x="5" y="160" font-size="9" font-weight="600" text-anchor="middle" fill="#1e2945">3.3V</text>
      </svg>
    </div>

    
    <div class="steps-col">
      
      <div class="step-card">
        <div class="step-title">
          <span>1. Gate Sizing</span>
          <span style="color:#0284c7;">V<sub>GS</sub> = −10 V</span>
        </div>
        <div class="calc-row">
          <span>R1:R2</span>
          <span class="val-highlight" id="rRatio">10k : 14k Ω</span>
        </div>
        <div class="math-sub" id="r2Math">R2 = (24V − 10V) / 1mA</div>
      </div>

      
      <div class="step-card">
        <div class="step-title">
          <span>2. Collector Current</span>
          <span>I<sub>C</sub> Check</span>
        </div>
        <div class="calc-row">
          <span>I<sub>C</sub> = 10 V / 10 kΩ</span>
          <span class="val-highlight">1.0 mA</span>
        </div>
        <div class="math-sub">P<sub>string</sub> = 24 mW (low heat)</div>
      </div>

      
      <div class="step-card">
        <div class="step-title">
          <span>3. Base Saturation</span>
          <span>β<sub>sat</sub> = 10</span>
        </div>
        <div class="calc-row">
          <span>R<sub>B</sub> (3.3V Logic)</span>
          <span class="val-highlight">26 kΩ</span>
        </div>
        <div class="math-sub">(3.3V − 0.7V) / 0.1mA</div>
      </div>
    </div>
  </div>

  
  <div class="status-bar">
    <span>✦ Safe Gate Clamp: V<sub>GS</sub> = −10.0 V</span>
    <span>V<sub>GS,max</sub> ±20V OK ✓</span>
  </div>

  <script>
    const slider = document.getElementById('vccSlider');
    const vccText = document.getElementById('vccText');
    const svgVcc = document.getElementById('svgVcc');
    const svgR2 = document.getElementById('svgR2');
    const rRatio = document.getElementById('rRatio');
    const r2Math = document.getElementById('r2Math');

    function update() {
      const vcc = parseInt(slider.value, 10);
      const r1 = 10; // 10k fixed for 1mA at 10V
      const r2 = vcc - 10; // (Vcc - 10V) / 1mA

      vccText.textContent = vcc + ' V';
      svgVcc.textContent = vcc + 'V';
      svgR2.textContent = r2 + 'k';
      rRatio.textContent = '10k : ' + r2 + 'k Ω';
      r2Math.textContent = 'R2 = (' + vcc + 'V − 10V) / 1mA = ' + r2 + 'kΩ';
    }

    slider.addEventListener('input', update);
    update();
  </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body {
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      background: #f8fafc;
      color: #1e293b;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-start;
      padding: 12px;
      min-height: 100vh;
      box-sizing: border-box;
      user-select: none;
    }

    .toolbar {
      display: flex;
      gap: 10px;
      width: 100%;
      max-width: 440px;
      justify-content: center;
      margin-bottom: 6px;
    }

    .btn {
      flex: 1;
      padding: 8px 14px;
      font-size: 13px;
      font-weight: 600;
      border-radius: 6px;
      border: 1px solid #cbd5e1;
      background: #ffffff;
      color: #475569;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
    }

    .btn:hover {
      background: #f1f5f9;
    }

    .btn.active {
      background: #0284c7;
      border-color: #0284c7;
      color: #ffffff;
      box-shadow: 0 2px 6px rgba(2, 132, 199, 0.25);
    }

    .btn-surge.active {
      background: #dc2626;
      border-color: #dc2626;
      color: #ffffff;
      box-shadow: 0 2px 6px rgba(220, 38, 38, 0.25);
    }

    .circuit-container {
      width: 100%;
      max-width: 480px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    svg {
      width: 100%;
      height: auto;
      max-height: 440px;
      display: block;
    }

    /* Schematic styles */
    .wire { stroke: #334155; stroke-width: 2.5; fill: none; stroke-linecap: round; stroke-linejoin: round; }
    .component-box { fill: #ffffff; stroke: #334155; stroke-width: 2; }
    .symbol-text { font-size: 12px; font-weight: 700; fill: #1e293b; font-family: monospace; }
    .val-text { font-size: 11px; font-weight: 600; fill: #64748b; font-family: system-ui, sans-serif; }
    
    .pulse-dot {
      animation: flow 1s infinite linear;
    }

    @keyframes flow {
      0% { stroke-dashoffset: 24; }
      100% { stroke-dashoffset: 0; }
    }

    .status-banner {
      margin-top: 6px;
      padding: 6px 12px;
      border-radius: 6px;
      font-size: 12px;
      font-weight: 500;
      text-align: center;
      max-width: 440px;
      width: 100%;
      background: #e0f2fe;
      color: #0369a1;
      border: 1px solid #bae6fd;
      transition: all 0.2s ease;
    }

    .status-banner.surge {
      background: #fee2e2;
      color: #991b1b;
      border-color: #fecaca;
    }
  </style>
</head>
<body>

  <div class="toolbar">
    <button id="btnNormal" class="btn active" onclick="setMode('normal')">
      <span>●</span> Normal (+12V)
    </button>
    <button id="btnSurge" class="btn btn-surge" onclick="setMode('surge')">
      <span>⚡</span> Surge (+40V Spike)
    </button>
  </div>

  <div class="circuit-container">
    <svg viewBox="0 0 460 305">
      <defs>
        
        <g id="gnd">
          <line x1="-12" y1="0" x2="12" y2="0" stroke="#334155" stroke-width="2.5" stroke-linecap="round"/>
          <line x1="-8" y1="4" x2="8" y2="4" stroke="#334155" stroke-width="2" stroke-linecap="round"/>
          <line x1="-3" y1="8" x2="3" y2="8" stroke="#334155" stroke-width="1.5" stroke-linecap="round"/>
        </g>
        
        
        <filter id="glow-blue" x="-40%" y="-40%" width="180%" height="180%">
          <feGaussianBlur stdDeviation="3.5" result="blur" />
          <feComposite in="SourceGraphic" in2="blur" operator="over" />
        </filter>
      </defs>

      
      <line id="topRail" x1="40" y1="36" x2="385" y2="36" class="wire" />
      <circle cx="40" cy="36" r="4" fill="#334155" />
      
      
      <g transform="translate(40, 16)">
        <rect id="vinBadge" x="-6" y="-12" width="76" height="20" rx="4" fill="#f1f5f9" stroke="#cbd5e1" stroke-width="1.5"/>
        <text id="vinText" x="32" y="2" text-anchor="middle" font-size="11" font-weight="700" fill="#0f172a" font-family="monospace">V_IN: +12V</text>
      </g>

      
      <g id="vgsGauge" transform="translate(295, 16)">
        <rect id="vgsBg" x="-36" y="-12" width="72" height="20" rx="4" fill="#eff6ff" stroke="#3b82f6" stroke-width="1.5"/>
        <text id="vgsText" x="0" y="2" text-anchor="middle" font-size="11" font-weight="700" fill="#1d4ed8" font-family="monospace">V_GS: -12V</text>
      </g>

      
      
      <line x1="385" y1="36" x2="385" y2="68" class="wire" />
      
      <g id="pmos" transform="translate(385, 96)">
        
        <line x1="-28" y1="-14" x2="-28" y2="14" stroke="#334155" stroke-width="3" stroke-linecap="round" />
        <line x1="-40" y1="0" x2="-28" y2="0" stroke="#334155" stroke-width="2.5" /> 
        
        
        <line x1="-20" y1="-18" x2="-20" y2="-8" stroke="#334155" stroke-width="2.5" />
        <line x1="-20" y1="-5" x2="-20" y2="5" stroke="#334155" stroke-width="2.5" />
        <line x1="-20" y1="8" x2="-20" y2="18" stroke="#334155" stroke-width="2.5" />
        
        
        <line x1="-20" y1="-14" x2="0" y2="-14" stroke="#334155" stroke-width="2.5" />
        <line x1="0" y1="-28" x2="0" y2="-14" stroke="#334155" stroke-width="2.5" />
        
        
        <line x1="-20" y1="14" x2="0" y2="14" stroke="#334155" stroke-width="2.5" />
        <line x1="0" y1="14" x2="0" y2="28" stroke="#334155" stroke-width="2.5" />
        
        
        <polygon points="-10,-14 -3,-18 -3,-10" fill="#334155" />

        <text x="14" y="-3" class="symbol-text">Q1</text>
        <text x="14" y="11" class="val-text">P-CH</text>
      </g>

      
      <line x1="385" y1="124" x2="385" y2="152" class="wire" />
      <rect x="370" y="152" width="30" height="42" rx="3" class="component-box" />
      <text x="385" y="177" class="symbol-text" font-size="11" text-anchor="middle">LOAD</text>
      <line x1="385" y1="194" x2="385" y2="225" class="wire" />
      <use href="#gnd" x="385" y="225" />

      
      
      <circle cx="215" cy="36" r="3.5" fill="#334155" />
      <line x1="215" y1="36" x2="215" y2="52" class="wire" />
      
      
      <line x1="160" y1="52" x2="265" y2="52" class="wire" />
      <line x1="160" y1="52" x2="160" y2="68" class="wire" />
      <line x1="265" y1="52" x2="265" y2="72" class="wire" />

      
      <g transform="translate(160, 68)">
        <rect x="-11" y="0" width="22" height="42" rx="2" class="component-box" />
        <text x="-18" y="21" class="symbol-text" text-anchor="end">R1</text>
        <text x="-18" y="34" class="val-text" text-anchor="end">10kΩ</text>
      </g>
      <line x1="160" y1="110" x2="160" y2="128" class="wire" />

      
      <g id="zenerGroup">
        
        <line x1="265" y1="52" x2="265" y2="72" class="wire" />
        
        <path id="zenerBar" d="M 255,68 L 255,72 L 275,72 L 275,76" stroke="#334155" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/>
        
        <polygon id="zenerTri" points="265,72 255,92 275,92" fill="#ffffff" stroke="#334155" stroke-width="2.2" stroke-linejoin="round"/>
        
        <line x1="265" y1="92" x2="265" y2="128" class="wire" />
        
        
        <text x="283" y="78" class="symbol-text" text-anchor="start">D_Z</text>
        <text id="zenerVal" x="283" y="93" class="val-text" text-anchor="start">12V Zener</text>
      </g>

      
      <line x1="160" y1="128" x2="265" y2="128" class="wire" />
      <circle cx="215" cy="128" r="3.5" fill="#334155" />
      
      
      <line x1="215" y1="128" x2="345" y2="128" class="wire" />
      <line x1="345" y1="128" x2="345" y2="96" class="wire" />

      
      <line x1="215" y1="128" x2="215" y2="152" class="wire" />

      
      <g transform="translate(215, 152)">
        <rect id="r2Box" x="-11" y="0" width="22" height="42" rx="2" class="component-box" />
        <text x="-18" y="20" class="symbol-text" text-anchor="end">R2</text>
        <text x="-18" y="33" class="val-text" text-anchor="end">1kΩ</text>
      </g>

      
      <g id="r2Callout" transform="translate(238, 172)">
        <rect id="r2DropBg" x="0" y="-10" width="58" height="20" rx="3" fill="#f8fafc" stroke="#cbd5e1" stroke-width="1.2"/>
        <text id="r2DropText" x="29" y="4" text-anchor="middle" font-size="11" font-weight="700" fill="#475569" font-family="monospace">ΔV: 0V</text>
      </g>

      <line x1="215" y1="194" x2="215" y2="218" class="wire" />

      
      <g transform="translate(215, 218)">
        <circle cx="0" cy="0" r="3" fill="#334155" />
        <line x1="0" y1="0" x2="13" y2="18" stroke="#334155" stroke-width="2.5" stroke-linecap="round" />
        <circle cx="0" cy="22" r="3" fill="#334155" />
        <text x="20" y="14" class="val-text" font-weight="600">ON (GND)</text>
      </g>
      <line x1="215" y1="240" x2="215" y2="258" class="wire" />
      <use href="#gnd" x="215" y="258" />

      
      <path id="surgePath" d="M 40,36 L 215,36 L 265,52 L 265,128 L 215,128 L 215,240" fill="none" stroke="#ef4444" stroke-width="3" stroke-dasharray="6,6" style="display:none;" class="pulse-dot" />

    </svg>
  </div>

  <div id="statusBanner" class="status-banner">
    Normal Operation: Rail is at +12V. Gate is pulled low; V_GS is safely clamped at -12V.
  </div>

  <script>
    function setMode(mode) {
      const btnNormal = document.getElementById('btnNormal');
      const btnSurge = document.getElementById('btnSurge');
      
      const vinText = document.getElementById('vinText');
      const vinBadge = document.getElementById('vinBadge');
      const vgsText = document.getElementById('vgsText');
      const vgsBg = document.getElementById('vgsBg');
      const r2DropText = document.getElementById('r2DropText');
      const r2DropBg = document.getElementById('r2DropBg');
      const r2Box = document.getElementById('r2Box');
      const zenerTri = document.getElementById('zenerTri');
      const zenerBar = document.getElementById('zenerBar');
      const zenerVal = document.getElementById('zenerVal');
      const surgePath = document.getElementById('surgePath');
      const statusBanner = document.getElementById('statusBanner');

      if (mode === 'surge') {
        btnSurge.classList.add('active');
        btnNormal.classList.remove('active');

        // Surge state: +40V spike clamped to -12V
        vinText.textContent = "V_IN: +40V";
        vinBadge.setAttribute("fill", "#fee2e2");
        vinBadge.setAttribute("stroke", "#ef4444");
        vinText.setAttribute("fill", "#b91c1c");

        vgsText.textContent = "V_GS: -12V";
        vgsBg.setAttribute("fill", "#dbeafe");
        vgsBg.setAttribute("stroke", "#0284c7");
        vgsText.setAttribute("fill", "#0369a1");

        r2DropText.textContent = "ΔV: 28V";
        r2DropText.setAttribute("fill", "#b45309");
        r2DropBg.setAttribute("fill", "#fef3c7");
        r2DropBg.setAttribute("stroke", "#f59e0b");
        r2Box.style.stroke = "#d97706";
        r2Box.style.fill = "#fffbeb";

        // Zener breakdown glow
        zenerTri.setAttribute("fill", "#0284c7");
        zenerTri.setAttribute("stroke", "#0284c7");
        zenerBar.setAttribute("stroke", "#0284c7");
        zenerVal.textContent = "CLAMPING ✦";
        zenerVal.style.fill = "#0284c7";
        zenerVal.style.fontWeight = "700";
        document.getElementById('zenerGroup').style.filter = "url(#glow-blue)";

        surgePath.style.display = "block";
        statusBanner.className = "status-banner surge";
        statusBanner.textContent = "Surge (+40V): Zener clamps V_GS to safe -12V; excess 28V drops harmlessly across R2.";
      } else {
        btnNormal.classList.add('active');
        btnSurge.classList.remove('active');

        // Normal state: +12V rail
        vinText.textContent = "V_IN: +12V";
        vinBadge.setAttribute("fill", "#f1f5f9");
        vinBadge.setAttribute("stroke", "#cbd5e1");
        vinText.setAttribute("fill", "#0f172a");

        vgsText.textContent = "V_GS: -12V";
        vgsBg.setAttribute("fill", "#eff6ff");
        vgsBg.setAttribute("stroke", "#3b82f6");
        vgsText.setAttribute("fill", "#1d4ed8");

        r2DropText.textContent = "ΔV: 0V";
        r2DropText.setAttribute("fill", "#475569");
        r2DropBg.setAttribute("fill", "#f8fafc");
        r2DropBg.setAttribute("stroke", "#cbd5e1");
        r2Box.style.stroke = "#334155";
        r2Box.style.fill = "#ffffff";

        // Zener normal
        zenerTri.setAttribute("fill", "#ffffff");
        zenerTri.setAttribute("stroke", "#334155");
        zenerBar.setAttribute("stroke", "#334155");
        zenerVal.textContent = "12V Zener";
        zenerVal.style.fill = "#64748b";
        zenerVal.style.fontWeight = "600";
        document.getElementById('zenerGroup').style.filter = "none";

        surgePath.style.display = "none";
        statusBanner.className = "status-banner";
        statusBanner.textContent = "Normal Operation: Rail is at +12V. Gate is pulled low; V_GS is safely clamped at -12V.";
      }
    }
  </script>
</body>
</html>

ELEC-7.2

Aligned learning resources

Related diagrams