<!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; -webkit-tap-highlight-color: transparent; }
    body {
      width: 100%;
      background: #f8f9fa;
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      color: #1e2945;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 8px;
      user-select: none;
    }

    .circuit-container {
      width: 100%;
      max-width: 680px;
      position: relative;
    }

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

    /* Wires */
    .wire {
      fill: none;
      stroke-width: 3.5;
      stroke-linecap: round;
      stroke-linejoin: round;
      transition: stroke 0.25s ease;
    }
    .wire-0 { stroke: #64748b; }
    .wire-1 { stroke: #16a34a; }

    /* Junction dots */
    .junction {
      transition: fill 0.25s ease;
    }
    .junction-0 { fill: #64748b; }
    .junction-1 { fill: #16a34a; }

    /* Gate shapes */
    .gate-body {
      fill: #ffffff;
      stroke: #1e2945;
      stroke-width: 2.2;
    }

    /* Interactive switch styling */
    .switch-group {
      cursor: pointer;
    }
    .switch-group:focus {
      outline: none;
    }
    .switch-bg {
      transition: fill 0.25s ease;
    }
    .switch-knob {
      transition: transform 0.25s ease, fill 0.25s ease;
    }

    /* Badges */
    .badge-box {
      rx: 6;
      stroke-width: 1.5;
    }
    .badge-x {
      fill: #f0f9ff;
      stroke: #0284c7;
    }
    .badge-y {
      fill: #fffbeb;
      stroke: #d97706;
    }
    .badge-q {
      fill: #f5f3ff;
      stroke: #7c3aed;
    }

    /* Output LED Glow */
    .output-glow-0 { fill: #94a3b8; filter: drop-shadow(0 0 2px rgba(148,163,184,0.4)); }
    .output-glow-1 { fill: #16a34a; filter: drop-shadow(0 0 8px rgba(22,163,74,0.8)); }

    /* Mini Truth Table */
    .table-container {
      width: 100%;
      max-width: 620px;
      margin-top: 4px;
      display: grid;
      grid-template-columns: repeat(8, 1fr);
      gap: 3px;
      font-size: 11px;
      font-weight: 600;
    }
    .tt-col {
      display: flex;
      flex-direction: column;
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 6px;
      overflow: hidden;
      cursor: pointer;
      transition: border-color 0.2s, box-shadow 0.2s, background-color 0.2s;
    }
    .tt-col:hover {
      border-color: #94a3b8;
    }
    .tt-col.active {
      border-color: #0284c7;
      background: #eff6ff;
      box-shadow: 0 0 0 1.5px #0284c7;
    }
    .tt-cell {
      padding: 2px 0;
      text-align: center;
      line-height: 1.2;
    }
    .tt-head {
      background: #f1f5f9;
      color: #475569;
      font-size: 9px;
      border-bottom: 1px solid #e2e8f0;
    }
    .tt-col.active .tt-head {
      background: #dbeafe;
      color: #0369a1;
      border-bottom-color: #bfdbfe;
    }
    .val-1 { color: #16a34a; font-weight: 700; }
    .val-0 { color: #64748b; }
  </style>
</head>
<body>

<div class="circuit-container">
  <svg viewBox="0 0 660 300" aria-label="Interactive Logic Circuit">
    
    <defs>
      <filter id="shadow" x="-10%" y="-10%" width="120%" height="120%">
        <feDropShadow dx="0" dy="1.5" stdDeviation="1.5" flood-color="#000" flood-opacity="0.08"/>
      </filter>
    </defs>

    
    
    <path id="wireA" class="wire wire-0" d="M 68,52 L 205,52" />
    
    
    <path id="wireB_main" class="wire wire-0" d="M 68,135 L 125,135" />
    <path id="wireB_up" class="wire wire-0" d="M 125,135 L 125,76 L 205,76" />
    <path id="wireB_down" class="wire wire-0" d="M 125,135 L 125,194 L 205,194" />
    <circle id="juncB" class="junction junction-0" cx="125" cy="135" r="4.5" />

    
    <path id="wireC" class="wire wire-0" d="M 68,218 L 205,218" />

    
    <path id="wireX" class="wire wire-0" d="M 252,64 L 388,64 L 388,129 L 432,129" />

    
    <path id="wireY" class="wire wire-0" d="M 258,206 L 388,206 L 388,141 L 432,141" />

    
    <path id="wireQ" class="wire wire-0" d="M 476,135 L 536,135" />

    
    <g filter="url(#shadow)">
      <path class="gate-body" d="M 205,42 L 227,42 A 22,22 0 0,1 227,86 L 205,86 Z" />
    </g>

    
    <g filter="url(#shadow)">
      <path class="gate-body" d="M 205,184 Q 227,184 246,206 Q 227,228 205,228 Q 217,206 205,184 Z" />
      <circle class="gate-body" cx="251" cy="206" r="4" />
    </g>

    
    <g filter="url(#shadow)">
      
      <path d="M 426,115 Q 438,135 426,155" fill="none" stroke="#1e2945" stroke-width="2.2" stroke-linecap="round" />
      
      <path class="gate-body" d="M 432,115 Q 454,115 472,135 Q 454,155 432,155 Q 444,135 432,115 Z" />
    </g>

    
    <g transform="translate(262, 48)">
      <rect class="badge-box badge-x" x="0" y="0" width="108" height="32" filter="url(#shadow)" />
      <text x="54" y="16" fill="#0369a1" font-size="11" font-weight="700" text-anchor="middle">Node X = A · B</text>
      <text id="valX" x="54" y="27" fill="#0284c7" font-size="10" font-weight="800" text-anchor="middle">X = 0</text>
    </g>

    
    <g transform="translate(262, 190)">
      <rect class="badge-box badge-y" x="0" y="0" width="108" height="32" filter="url(#shadow)" />
      <text x="54" y="16" fill="#b45309" font-size="11" font-weight="700" text-anchor="middle">Node Y = ¬(B + C)</text>
      <text id="valY" x="54" y="27" fill="#d97706" font-size="10" font-weight="800" text-anchor="middle">Y = 1</text>
    </g>

    
    <g transform="translate(536, 114)">
      <rect class="badge-box badge-q" x="0" y="0" width="112" height="42" filter="url(#shadow)" />
      <text x="56" y="17" fill="#6d28d9" font-size="12" font-weight="700" text-anchor="middle">Q = X ⊕ Y</text>
      <circle id="ledQ" class="output-glow-0" cx="44" cy="29" r="5" />
      <text id="valQ" x="62" y="33" fill="#4338ca" font-size="13" font-weight="800">Q = 0</text>
    </g>

    
    
    <g id="btnA" class="switch-group" transform="translate(14, 38)" role="button" tabindex="0" aria-label="Toggle Input A">
      <text x="0" y="19" font-size="14" font-weight="800" fill="#1e2945">A</text>
      <rect id="bgA" class="switch-bg" x="18" y="4" width="34" height="20" rx="10" fill="#cbd5e1" />
      <circle id="knobA" class="switch-knob" cx="28" cy="14" r="8" fill="#ffffff" filter="url(#shadow)" />
      <text id="labelA" x="35" y="18" font-size="10" font-weight="800" fill="#64748b" text-anchor="middle">0</text>
    </g>

    
    <g id="btnB" class="switch-group" transform="translate(14, 121)" role="button" tabindex="0" aria-label="Toggle Input B">
      <text x="0" y="19" font-size="14" font-weight="800" fill="#1e2945">B</text>
      <rect id="bgB" class="switch-bg" x="18" y="4" width="34" height="20" rx="10" fill="#cbd5e1" />
      <circle id="knobB" class="switch-knob" cx="28" cy="14" r="8" fill="#ffffff" filter="url(#shadow)" />
      <text id="labelB" x="35" y="18" font-size="10" font-weight="800" fill="#64748b" text-anchor="middle">0</text>
    </g>

    
    <g id="btnC" class="switch-group" transform="translate(14, 204)" role="button" tabindex="0" aria-label="Toggle Input C">
      <text x="0" y="19" font-size="14" font-weight="800" fill="#1e2945">C</text>
      <rect id="bgC" class="switch-bg" x="18" y="4" width="34" height="20" rx="10" fill="#cbd5e1" />
      <circle id="knobC" class="switch-knob" cx="28" cy="14" r="8" fill="#ffffff" filter="url(#shadow)" />
      <text id="labelC" x="35" y="18" font-size="10" font-weight="800" fill="#64748b" text-anchor="middle">0</text>
    </g>
  </svg>

  
  <div class="table-container" id="truthTable" aria-label="Complete truth table for schematic">
    
  </div>
</div>

<script>
  let state = { A: 0, B: 0, C: 0 };

  const tableContainer = document.getElementById('truthTable');
  
  // Build 8-row truth table columns
  for (let i = 0; i < 8; i++) {
    const a = (i >> 2) & 1;
    const b = (i >> 1) & 1;
    const c = i & 1;
    const x = a & b;
    const y = (b | c) ? 0 : 1;
    const q = x ^ y;

    const col = document.createElement('div');
    col.className = 'tt-col';
    col.id = `row-${a}${b}${c}`;
    col.innerHTML = `
      <div class="tt-cell tt-head">A B C</div>
      <div class="tt-cell">${a} ${b} ${c}</div>
      <div class="tt-cell tt-head">X · Y</div>
      <div class="tt-cell">${x} · ${y}</div>
      <div class="tt-cell tt-head">Q</div>
      <div class="tt-cell ${q ? 'val-1' : 'val-0'}">${q}</div>
    `;
    col.addEventListener('click', () => {
      state.A = a;
      state.B = b;
      state.C = c;
      render();
    });
    tableContainer.appendChild(col);
  }

  function updateSwitch(prefix, val) {
    const bg = document.getElementById('bg' + prefix);
    const knob = document.getElementById('knob' + prefix);
    const lbl = document.getElementById('label' + prefix);
    
    if (val === 1) {
      bg.setAttribute('fill', '#16a34a');
      knob.setAttribute('cx', '42');
      lbl.setAttribute('x', '25');
      lbl.setAttribute('fill', '#ffffff');
      lbl.textContent = '1';
    } else {
      bg.setAttribute('fill', '#cbd5e1');
      knob.setAttribute('cx', '28');
      lbl.setAttribute('x', '41');
      lbl.setAttribute('fill', '#64748b');
      lbl.textContent = '0';
    }
  }

  function setWire(id, val) {
    const el = document.getElementById(id);
    if (!el) return;
    el.classList.toggle('wire-1', val === 1);
    el.classList.toggle('wire-0', val === 0);
  }

  function setJunction(id, val) {
    const el = document.getElementById(id);
    if (!el) return;
    el.classList.toggle('junction-1', val === 1);
    el.classList.toggle('junction-0', val === 0);
  }

  function render() {
    const { A, B, C } = state;
    const X = A & B;
    const Y = (B | C) ? 0 : 1;
    const Q = X ^ Y;

    // Switches
    updateSwitch('A', A);
    updateSwitch('B', B);
    updateSwitch('C', C);

    // Wires
    setWire('wireA', A);
    setWire('wireB_main', B);
    setWire('wireB_up', B);
    setWire('wireB_down', B);
    setJunction('juncB', B);
    setWire('wireC', C);

    setWire('wireX', X);
    setWire('wireY', Y);
    setWire('wireQ', Q);

    // Badges
    document.getElementById('valX').textContent = `X = ${X}`;
    document.getElementById('valY').textContent = `Y = ${Y}`;
    document.getElementById('valQ').textContent = `Q = ${Q}`;

    // LED
    const led = document.getElementById('ledQ');
    led.className.baseVal = Q === 1 ? 'output-glow-1' : 'output-glow-0';

    // Truth Table active column
    document.querySelectorAll('.tt-col').forEach(el => el.classList.remove('active'));
    const activeCol = document.getElementById(`row-${A}${B}${C}`);
    if (activeCol) activeCol.classList.add('active');
  }

  function setupToggle(btnId, key) {
    const btn = document.getElementById(btnId);
    const toggle = () => {
      state[key] = state[key] === 1 ? 0 : 1;
      render();
    };
    btn.addEventListener('click', toggle);
    btn.addEventListener('keydown', (e) => {
      if (e.key === 'Enter' || e.key === ' ') {
        e.preventDefault();
        toggle();
      }
    });
  }

  setupToggle('btnA', 'A');
  setupToggle('btnB', 'B');
  setupToggle('btnC', 'C');

  render();
</script>

</body>
</html>

Constructing Truth Tables from Logic 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="1:1">
  <title>Truth Table Builder</title>
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body {
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      color: #1e2945;
      background: #ffffff;
      padding: 12px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 12px;
    }

    /* Controls Bar */
    .controls {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      width: 100%;
      max-width: 540px;
      justify-content: center;
    }
    .btn-step {
      background: #f1f5f9;
      border: 1px solid #cbd5e1;
      border-radius: 6px;
      padding: 6px 10px;
      font-size: 13px;
      font-weight: 600;
      color: #475569;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 5px;
      box-shadow: none;
      transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
    }
    .btn-step.active {
      background: #22b7ff;
      border-color: #0284c7;
      color: #ffffff;
    }
    .btn-play {
      background: #f8fafc;
      border: 1px solid #cbd5e1;
      border-radius: 6px;
      padding: 6px 12px;
      font-size: 13px;
      font-weight: 600;
      color: #1e2945;
      cursor: pointer;
    }

    /* Formula / Operation indicator */
    .formula-bar {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      font-size: 13px;
      font-weight: 700;
      min-height: 28px;
    }
    .badge {
      display: inline-block;
      padding: 3px 8px;
      border-radius: 4px;
      font-size: 12px;
    }
    .badge-in { background: #e0f2fe; color: #0369a1; }
    .badge-x  { background: #ede9fe; color: #6d28d9; }
    .badge-y  { background: #fef3c7; color: #b45309; }
    .badge-q  { background: #dcfce7; color: #15803d; }

    /* Truth Table */
    .table-wrap {
      width: 100%;
      max-width: 540px;
      border-collapse: collapse;
      font-variant-numeric: tabular-nums;
    }
    th, td {
      text-align: center;
      padding: 5px 4px;
      font-size: 13px;
      border-bottom: 1px solid #e2e8f0;
      transition: background-color 0.25s ease, color 0.25s ease, opacity 0.25s ease;
    }
    th {
      font-weight: 700;
      font-size: 12px;
      background: #f8fafc;
      color: #64748b;
      border-top: 1px solid #e2e8f0;
    }
    .col-sep {
      border-right: 2px solid #cbd5e1;
    }

    /* Highlights for active computation */
    .hl-in {
      background-color: #f0f9ff;
      color: #0369a1;
      font-weight: 700;
    }
    .hl-x {
      background-color: #f5f3ff;
      color: #6d28d9;
      font-weight: 700;
    }
    .hl-y {
      background-color: #fffbeb;
      color: #b45309;
      font-weight: 700;
    }
    .hl-q {
      background-color: #f0fdf4;
      color: #15803d;
      font-weight: 800;
    }

    /* Hidden values before step */
    .val-hidden {
      opacity: 0.15;
      color: #94a3b8;
    }
    .val-visible {
      opacity: 1;
    }
    
    .logic-label {
      font-size: 10px;
      display: block;
      font-weight: 500;
      margin-top: 1px;
    }
  </style>
</head>
<body>

  
  <div class="controls">
    <button class="btn-step active" id="btn0" onclick="setStep(0)">1: Inputs</button>
    <button class="btn-step" id="btn1" onclick="setStep(1)">2: Node X</button>
    <button class="btn-step" id="btn2" onclick="setStep(2)">3: Node Y</button>
    <button class="btn-step" id="btn3" onclick="setStep(3)">4: Output Q</button>
    <button class="btn-play" id="playBtn" onclick="togglePlay()">⏸</button>
  </div>

  
  <div class="formula-bar" id="formulaDisplay">
    <span class="badge badge-in">Inputs A, B, C (2³ = 8 states)</span>
  </div>

  
  <table class="table-wrap" id="truthTable">
    <thead>
      <tr>
        <th id="th-A" style="width:14%">A</th>
        <th id="th-B" style="width:14%">B</th>
        <th id="th-C" class="col-sep" style="width:14%">C</th>
        <th id="th-X" style="width:19%">X<span class="logic-label">A · B</span></th>
        <th id="th-Y" class="col-sep" style="width:19%">Y<span class="logic-label">(B + C)'</span></th>
        <th id="th-Q" style="width:20%">Q<span class="logic-label">X ⊕ Y</span></th>
      </tr>
    </thead>
    <tbody id="tableBody">
      
    </tbody>
  </table>

  <script src="{{VENDOR_CDN}}/classace-diagram.js"></script>
  <script>
    const data = [
      { a: 0, b: 0, c: 0, x: 0, y: 1, q: 1 },
      { a: 0, b: 0, c: 1, x: 0, y: 0, q: 0 },
      { a: 0, b: 1, c: 0, x: 0, y: 0, q: 0 },
      { a: 0, b: 1, c: 1, x: 0, y: 0, q: 0 },
      { a: 1, b: 0, c: 0, x: 0, y: 1, q: 1 },
      { a: 1, b: 0, c: 1, x: 0, y: 0, q: 0 },
      { a: 1, b: 1, c: 0, x: 1, y: 0, q: 1 },
      { a: 1, b: 1, c: 1, x: 1, y: 0, q: 1 }
    ];

    const formulas = [
      '<span class="badge badge-in">A, B, C → 8 binary states (000–111)</span>',
      '<span class="badge badge-x">X = A AND B</span>',
      '<span class="badge badge-y">Y = B NOR C  [ NOT (B OR C) ]</span>',
      '<span class="badge badge-q">Q = X XOR Y</span>'
    ];

    // Build Table Body
    const tbody = document.getElementById('tableBody');
    data.forEach((row, i) => {
      const tr = document.createElement('tr');
      tr.innerHTML = `
        <td class="cell-A" id="cell-A-${i}">${row.a}</td>
        <td class="cell-B" id="cell-B-${i}">${row.b}</td>
        <td class="cell-C col-sep" id="cell-C-${i}">${row.c}</td>
        <td class="cell-X" id="cell-X-${i}"><span class="val-hidden" id="val-X-${i}">${row.x}</span></td>
        <td class="cell-Y col-sep" id="cell-Y-${i}"><span class="val-hidden" id="val-Y-${i}">${row.y}</span></td>
        <td class="cell-Q" id="cell-Q-${i}"><span class="val-hidden" id="val-Q-${i}">${row.q}</span></td>
      `;
      tbody.appendChild(tr);
    });

    let currentStep = 0;
    let playing = true;
    let timer = null;

    function renderStep(step) {
      currentStep = step;

      // Update button states
      for (let s = 0; s < 4; s++) {
        const btn = document.getElementById(`btn${s}`);
        if (s === step) btn.classList.add('active');
        else btn.classList.remove('active');
      }

      // Update formula bar
      document.getElementById('formulaDisplay').innerHTML = formulas[step];

      // Clear previous column classes
      const cols = ['A', 'B', 'C', 'X', 'Y', 'Q'];
      cols.forEach(col => {
        document.getElementById(`th-${col}`).className = (col === 'C' || col === 'Y') ? 'col-sep' : '';
        for (let i = 0; i < 8; i++) {
          document.getElementById(`cell-${col}-${i}`).className = (col === 'C' || col === 'Y') ? `cell-${col} col-sep` : `cell-${col}`;
        }
      });

      // Update values visibility and highlights based on step
      for (let i = 0; i < 8; i++) {
        const valX = document.getElementById(`val-X-${i}`);
        const valY = document.getElementById(`val-Y-${i}`);
        const valQ = document.getElementById(`val-Q-${i}`);

        valX.className = step >= 1 ? 'val-visible' : 'val-hidden';
        valY.className = step >= 2 ? 'val-visible' : 'val-hidden';
        valQ.className = step >= 3 ? 'val-visible' : 'val-hidden';

        // Step-specific highlighting
        if (step === 0) {
          document.getElementById(`cell-A-${i}`).classList.add('hl-in');
          document.getElementById(`cell-B-${i}`).classList.add('hl-in');
          document.getElementById(`cell-C-${i}`).classList.add('hl-in');
        } else if (step === 1) {
          document.getElementById(`cell-A-${i}`).classList.add('hl-in');
          document.getElementById(`cell-B-${i}`).classList.add('hl-in');
          document.getElementById(`cell-X-${i}`).classList.add('hl-x');
        } else if (step === 2) {
          document.getElementById(`cell-B-${i}`).classList.add('hl-in');
          document.getElementById(`cell-C-${i}`).classList.add('hl-in');
          document.getElementById(`cell-Y-${i}`).classList.add('hl-y');
        } else if (step === 3) {
          document.getElementById(`cell-X-${i}`).classList.add('hl-x');
          document.getElementById(`cell-Y-${i}`).classList.add('hl-y');
          document.getElementById(`cell-Q-${i}`).classList.add('hl-q');
        }
      }

      // Highlight headers
      if (step === 0) {
        document.getElementById('th-A').classList.add('hl-in');
        document.getElementById('th-B').classList.add('hl-in');
        document.getElementById('th-C').classList.add('hl-in');
      } else if (step === 1) {
        document.getElementById('th-A').classList.add('hl-in');
        document.getElementById('th-B').classList.add('hl-in');
        document.getElementById('th-X').classList.add('hl-x');
      } else if (step === 2) {
        document.getElementById('th-B').classList.add('hl-in');
        document.getElementById('th-C').classList.add('hl-in');
        document.getElementById('th-Y').classList.add('hl-y');
      } else if (step === 3) {
        document.getElementById('th-X').classList.add('hl-x');
        document.getElementById('th-Y').classList.add('hl-y');
        document.getElementById('th-Q').classList.add('hl-q');
      }
    }

    function setStep(step) {
      renderStep(step);
    }

    function nextStep() {
      const next = (currentStep + 1) % 4;
      renderStep(next);
    }

    function togglePlay() {
      playing = !playing;
      document.getElementById('playBtn').textContent = playing ? '⏸' : '▶';
      if (playing) {
        timer = setInterval(nextStep, 3500);
      } else {
        clearInterval(timer);
      }
    }

    // Initialize
    renderStep(0);
    timer = setInterval(nextStep, 3500);
  </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">
  <title>Truth Table Row Scaling & Binary Patterns</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      -webkit-tap-highlight-color: transparent;
    }

    body {
      background: #f8fafc;
      color: #1e2945;
      padding: 10px;
      display: flex;
      flex-direction: column;
      gap: 8px;
      min-height: 100%;
    }

    /* Top Controls Toolbar */
    .toolbar {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      align-items: center;
      justify-content: space-between;
    }

    .btn-group {
      display: flex;
      flex-wrap: wrap;
      gap: 4px;
    }

    .btn {
      background: #ffffff;
      border: 1px solid #cbd5e1;
      color: #475569;
      padding: 4px 10px;
      border-radius: 9999px;
      font-size: 11.5px;
      font-weight: 600;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 4px;
      transition: background-color 0.2s, color 0.2s, box-shadow 0.2s, border-color 0.2s;
    }

    .btn:hover {
      background: #f1f5f9;
      color: #1e2945;
    }

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

    .btn.toggle-btn.active {
      background: #b45309;
      border-color: #b45309;
      color: #ffffff;
    }

    /* Main Cards Row */
    .cards-row {
      display: grid;
      grid-template-columns: 1fr 1.35fr 1.8fr;
      gap: 8px;
      align-items: start;
    }

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

    .table-card {
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 8px;
      padding: 6px;
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    .card-header {
      font-size: 11.5px;
      font-weight: 700;
      color: #1e2945;
      margin-bottom: 6px;
      text-align: center;
      display: flex;
      align-items: center;
      gap: 4px;
    }

    .card-header span.highlight {
      background: #f1f5f9;
      padding: 1px 4px;
      border-radius: 4px;
      color: #0f172a;
    }

    /* Tables */
    .table-wrap {
      width: 100%;
      display: flex;
      justify-content: center;
    }

    table {
      border-collapse: separate;
      border-spacing: 2px;
      font-size: 12px;
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
      text-align: center;
    }

    th {
      font-weight: 700;
      padding: 3px 6px;
      font-size: 11px;
      border-radius: 4px;
      color: #475569;
      background: #f8fafc;
    }

    td {
      padding: 2.5px 7px;
      font-weight: 700;
      border-radius: 3px;
      transition: opacity 0.25s, box-shadow 0.25s, transform 0.25s;
    }

    /* Column Colorings */
    /* Col A - Sky Blue (Interval 4) */
    .col-a-0 { background: #e0f2fe; color: #0369a1; }
    .col-a-1 { background: #bae6fd; color: #0284c7; }
    
    /* Col B - Indigo (Interval 2) */
    .col-b-0 { background: #e0e7ff; color: #4338ca; }
    .col-b-1 { background: #c7d2fe; color: #3730a3; }

    /* Col C - Purple (Interval 1) */
    .col-c-0 { background: #f3e8ff; color: #7e22ce; }
    .col-c-1 { background: #e9d5ff; color: #6b21a8; }

    /* Decimal Column */
    .col-dec {
      background: #fef3c7;
      color: #b45309;
      font-size: 10.5px;
      padding: 2.5px 5px;
      border-radius: 3px;
      display: none;
    }

    th.col-dec {
      background: #fde68a;
      color: #92400e;
    }

    body.show-decimal .col-dec {
      display: table-cell;
    }

    /* Pattern Highlight Modes */
    body[data-focus="a"] td:not(.col-a),
    body[data-focus="a"] th:not(.th-a) {
      opacity: 0.3;
    }
    body[data-focus="a"] .col-a {
      box-shadow: 0 0 0 1.5px #0284c7;
    }

    body[data-focus="b"] td:not(.col-b),
    body[data-focus="b"] th:not(.th-b) {
      opacity: 0.3;
    }
    body[data-focus="b"] .col-b {
      box-shadow: 0 0 0 1.5px #4338ca;
    }

    body[data-focus="c"] td:not(.col-c),
    body[data-focus="c"] th:not(.th-c) {
      opacity: 0.3;
    }
    body[data-focus="c"] .col-c {
      box-shadow: 0 0 0 1.5px #7e22ce;
    }

    /* Bottom Summary Bar */
    .summary-card {
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 8px;
      padding: 6px 10px;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
      gap: 6px;
      font-size: 11.5px;
    }

    .badge-group {
      display: flex;
      flex-wrap: wrap;
      gap: 5px;
    }

    .badge {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      padding: 2px 7px;
      border-radius: 4px;
      font-weight: 700;
      font-size: 11px;
    }

    .badge-a { background: #bae6fd; color: #0369a1; border: 1px solid #7dd3fc; }
    .badge-b { background: #c7d2fe; color: #3730a3; border: 1px solid #a5b4fc; }
    .badge-c { background: #e9d5ff; color: #6b21a8; border: 1px solid #d8b4fe; }

    .formula-tag {
      font-weight: 700;
      color: #1e2945;
      font-size: 12px;
      background: #f1f5f9;
      padding: 2px 8px;
      border-radius: 4px;
    }
  </style>
</head>
<body data-focus="all">

  
  <div class="toolbar">
    <div class="btn-group">
      <button class="btn active" id="btn-all" onclick="setFocus('all')">✦ All Patterns</button>
      <button class="btn" id="btn-a" onclick="setFocus('a')">Col A (Blocks of 4)</button>
      <button class="btn" id="btn-b" onclick="setFocus('b')">Col B (Blocks of 2)</button>
      <button class="btn" id="btn-c" onclick="setFocus('c')">Col C (Alternating 1s/0s)</button>
    </div>
    <button class="btn toggle-btn" id="toggleDec" onclick="toggleDecimal()"># Decimal Index</button>
  </div>

  
  <div class="cards-row">
    
    
    <div class="table-card">
      <div class="card-header">
        <span>n = 1</span>
        <span class="highlight">2¹ = 2 rows</span>
      </div>
      <div class="table-wrap">
        <table>
          <thead>
            <tr>
              <th class="col-dec">#</th>
              <th class="th-c" style="color:#6b21a8;">A</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td class="col-dec">0</td>
              <td class="col-c col-c-0">0</td>
            </tr>
            <tr>
              <td class="col-dec">1</td>
              <td class="col-c col-c-1">1</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>

    
    <div class="table-card">
      <div class="card-header">
        <span>n = 2</span>
        <span class="highlight">2² = 4 rows</span>
      </div>
      <div class="table-wrap">
        <table>
          <thead>
            <tr>
              <th class="col-dec">#</th>
              <th class="th-b" style="color:#4338ca;">A</th>
              <th class="th-c" style="color:#6b21a8;">B</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td class="col-dec">0</td>
              <td class="col-b col-b-0">0</td>
              <td class="col-c col-c-0">0</td>
            </tr>
            <tr>
              <td class="col-dec">1</td>
              <td class="col-b col-b-0">0</td>
              <td class="col-c col-c-1">1</td>
            </tr>
            <tr>
              <td class="col-dec">2</td>
              <td class="col-b col-b-1">1</td>
              <td class="col-c col-c-0">0</td>
            </tr>
            <tr>
              <td class="col-dec">3</td>
              <td class="col-b col-b-1">1</td>
              <td class="col-c col-c-1">1</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>

    
    <div class="table-card">
      <div class="card-header">
        <span>n = 3</span>
        <span class="highlight">2³ = 8 rows</span>
      </div>
      <div class="table-wrap">
        <table>
          <thead>
            <tr>
              <th class="col-dec">#</th>
              <th class="th-a" style="color:#0369a1;">A</th>
              <th class="th-b" style="color:#4338ca;">B</th>
              <th class="th-c" style="color:#6b21a8;">C</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td class="col-dec">0</td>
              <td class="col-a col-a-0">0</td>
              <td class="col-b col-b-0">0</td>
              <td class="col-c col-c-0">0</td>
            </tr>
            <tr>
              <td class="col-dec">1</td>
              <td class="col-a col-a-0">0</td>
              <td class="col-b col-b-0">0</td>
              <td class="col-c col-c-1">1</td>
            </tr>
            <tr>
              <td class="col-dec">2</td>
              <td class="col-a col-a-0">0</td>
              <td class="col-b col-b-1">1</td>
              <td class="col-c col-c-0">0</td>
            </tr>
            <tr>
              <td class="col-dec">3</td>
              <td class="col-a col-a-0">0</td>
              <td class="col-b col-b-1">1</td>
              <td class="col-c col-c-1">1</td>
            </tr>
            <tr>
              <td class="col-dec">4</td>
              <td class="col-a col-a-1">1</td>
              <td class="col-b col-b-0">0</td>
              <td class="col-c col-c-0">0</td>
            </tr>
            <tr>
              <td class="col-dec">5</td>
              <td class="col-a col-a-1">1</td>
              <td class="col-b col-b-0">0</td>
              <td class="col-c col-c-1">1</td>
            </tr>
            <tr>
              <td class="col-dec">6</td>
              <td class="col-a col-a-1">1</td>
              <td class="col-b col-b-1">1</td>
              <td class="col-c col-c-0">0</td>
            </tr>
            <tr>
              <td class="col-dec">7</td>
              <td class="col-a col-a-1">1</td>
              <td class="col-b col-b-1">1</td>
              <td class="col-c col-c-1">1</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>

  </div>

  
  <div class="summary-card">
    <div class="badge-group">
      <span class="badge badge-a">Col A: 2² = 4s</span>
      <span class="badge badge-b">Col B: 2¹ = 2s</span>
      <span class="badge badge-c">Col C: 2⁰ = 1s</span>
    </div>
    <div class="formula-tag">Total Rows = 2ⁿ</div>
  </div>

  <script>
    function setFocus(mode) {
      document.body.setAttribute('data-focus', mode);
      ['btn-all', 'btn-a', 'btn-b', 'btn-c'].forEach(id => {
        document.getElementById(id).classList.remove('active');
      });
      document.getElementById('btn-' + mode).classList.add('active');
    }

    function toggleDecimal() {
      const isShowing = document.body.classList.toggle('show-decimal');
      const btn = document.getElementById('toggleDec');
      btn.classList.toggle('active', isShowing);
    }
  </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">
  <title>NOT Gate Symbols Comparison</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    body {
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      background: #ffffff;
      color: #1e2945;
      padding: 16px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      min-height: 100%;
    }

    .header-ctrl {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
      margin-bottom: 12px;
      width: 100%;
    }

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

    .btn-toggle:active {
      transform: scale(0.98);
    }

    .state-tag {
      display: inline-block;
      padding: 2px 8px;
      border-radius: 12px;
      font-size: 13px;
      font-weight: 800;
      color: #fff;
    }

    .state-tag.val-0 {
      background: #64748b;
    }

    .state-tag.val-1 {
      background: #0284c7;
    }

    .grid-container {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 16px;
      width: 100%;
      max-width: 620px;
      flex: 1;
    }

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

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

    .card-title {
      font-size: 14px;
      font-weight: 700;
      color: #475569;
      text-align: center;
      margin-bottom: 8px;
      letter-spacing: 0.2px;
    }

    .svg-wrap {
      width: 100%;
      max-width: 260px;
      height: 120px;
    }

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

    .wire {
      stroke: #64748b;
      stroke-width: 3;
      stroke-linecap: round;
      transition: stroke 0.25s ease;
    }

    .wire.active {
      stroke: #0284c7;
    }

    .symbol-shape {
      fill: #ffffff;
      stroke: #1e2945;
      stroke-width: 2.5;
      stroke-linejoin: round;
    }

    .bubble-shape {
      fill: #ffffff;
      stroke: #ef4444;
      stroke-width: 2.5;
      transition: fill 0.25s;
    }

    .bubble-glow {
      fill: none;
      stroke: rgba(239, 68, 68, 0.25);
      stroke-width: 8;
    }

    .logic-char {
      font-family: inherit;
      font-size: 26px;
      font-weight: 800;
      fill: #1e2945;
      text-anchor: middle;
      dominant-baseline: central;
    }

    .pin-label {
      font-family: inherit;
      font-size: 15px;
      font-weight: 800;
      fill: #475569;
      text-anchor: middle;
      dominant-baseline: central;
      transition: fill 0.25s;
    }

    .pin-label.active {
      fill: #0284c7;
    }

    .pin-val {
      font-family: inherit;
      font-size: 13px;
      font-weight: 700;
      fill: #94a3b8;
      text-anchor: middle;
      dominant-baseline: central;
      transition: fill 0.25s;
    }

    .pin-val.active {
      fill: #0284c7;
      font-weight: 800;
    }

    .callout-badge {
      display: flex;
      align-items: center;
      gap: 6px;
      background: #fef2f2;
      border: 1.5px solid #fca5a5;
      color: #b91c1c;
      font-size: 12px;
      font-weight: 700;
      padding: 4px 10px;
      border-radius: 20px;
      margin-top: 4px;
    }

    .callout-dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: #ef4444;
      display: inline-block;
    }
  </style>
</head>
<body>

  
  <div class="header-ctrl">
    <button id="toggleBtn" class="btn-toggle" aria-label="Toggle input state">
      <span>Input A = <span id="btnValA">0</span></span>
      <span class="state-tag val-0" id="btnTag">INVERT ➔ Q = 1</span>
    </button>
  </div>

  
  <div class="grid-container">
    
    
    <div class="gate-card">
      <div class="card-title">ANSI / IEEE Standard</div>
      <div class="svg-wrap">
        <svg viewBox="0 0 240 120">
          
          <line id="ansi-in-wire" class="wire" x1="24" y1="60" x2="68" y2="60" />
          <text id="ansi-in-label" class="pin-label" x="12" y="52">A</text>
          <text id="ansi-in-val" class="pin-val" x="12" y="72">0</text>

          
          <polygon class="symbol-shape" points="68,26 68,94 136,60" />

          
          <circle class="bubble-glow" cx="144" cy="60" r="7" />
          <circle class="bubble-shape" cx="144" cy="60" r="7" />

          
          <line id="ansi-out-wire" class="wire active" x1="151" y1="60" x2="198" y2="60" />
          <text id="ansi-out-label" class="pin-label active" x="216" y="52">Q</text>
          <text id="ansi-out-val" class="pin-val active" x="216" y="72">1</text>
        </svg>
      </div>
      <div class="callout-badge">
        <span class="callout-dot"></span> Inversion Bubble
      </div>
    </div>

    
    <div class="gate-card">
      <div class="card-title">BS / IEC 60617 Standard</div>
      <div class="svg-wrap">
        <svg viewBox="0 0 240 120">
          
          <line id="iec-in-wire" class="wire" x1="24" y1="60" x2="68" y2="60" />
          <text id="iec-in-label" class="pin-label" x="12" y="52">A</text>
          <text id="iec-in-val" class="pin-val" x="12" y="72">0</text>

          
          <rect class="symbol-shape" x="68" y="26" width="68" height="68" rx="3" />
          <text class="logic-char" x="102" y="60">1</text>

          
          <circle class="bubble-glow" cx="143" cy="60" r="7" />
          <circle class="bubble-shape" cx="143" cy="60" r="7" />

          
          <line id="iec-out-wire" class="wire active" x1="150" y1="60" x2="198" y2="60" />
          <text id="iec-out-label" class="pin-label active" x="216" y="52">Q</text>
          <text id="iec-out-val" class="pin-val active" x="216" y="72">1</text>
        </svg>
      </div>
      <div class="callout-badge">
        <span class="callout-dot"></span> Inversion Bubble
      </div>
    </div>

  </div>

  <script>
    let inputState = 0;

    const toggleBtn = document.getElementById('toggleBtn');
    const btnValA = document.getElementById('btnValA');
    const btnTag = document.getElementById('btnTag');

    const ansiInWire = document.getElementById('ansi-in-wire');
    const ansiInLabel = document.getElementById('ansi-in-label');
    const ansiInVal = document.getElementById('ansi-in-val');
    const ansiOutWire = document.getElementById('ansi-out-wire');
    const ansiOutLabel = document.getElementById('ansi-out-label');
    const ansiOutVal = document.getElementById('ansi-out-val');

    const iecInWire = document.getElementById('iec-in-wire');
    const iecInLabel = document.getElementById('iec-in-label');
    const iecInVal = document.getElementById('iec-in-val');
    const iecOutWire = document.getElementById('iec-out-wire');
    const iecOutLabel = document.getElementById('iec-out-label');
    const iecOutVal = document.getElementById('iec-out-val');

    function updateView() {
      const outputState = inputState === 1 ? 0 : 1;

      btnValA.textContent = inputState;
      btnTag.textContent = `INVERT ➔ Q = ${outputState}`;
      btnTag.className = `state-tag val-${outputState}`;

      // Update ANSI Gate
      ansiInVal.textContent = inputState;
      ansiOutVal.textContent = outputState;
      if (inputState === 1) {
        ansiInWire.classList.add('active');
        ansiInLabel.classList.add('active');
        ansiInVal.classList.add('active');
      } else {
        ansiInWire.classList.remove('active');
        ansiInLabel.classList.remove('active');
        ansiInVal.classList.remove('active');
      }

      if (outputState === 1) {
        ansiOutWire.classList.add('active');
        ansiOutLabel.classList.add('active');
        ansiOutVal.classList.add('active');
      } else {
        ansiOutWire.classList.remove('active');
        ansiOutLabel.classList.remove('active');
        ansiOutVal.classList.remove('active');
      }

      // Update IEC Gate
      iecInVal.textContent = inputState;
      iecOutVal.textContent = outputState;
      if (inputState === 1) {
        iecInWire.classList.add('active');
        iecInLabel.classList.add('active');
        iecInVal.classList.add('active');
      } else {
        iecInWire.classList.remove('active');
        iecInLabel.classList.remove('active');
        iecInVal.classList.remove('active');
      }

      if (outputState === 1) {
        iecOutWire.classList.add('active');
        iecOutLabel.classList.add('active');
        iecOutVal.classList.add('active');
      } else {
        iecOutWire.classList.remove('active');
        iecOutLabel.classList.remove('active');
        iecOutVal.classList.remove('active');
      }
    }

    toggleBtn.addEventListener('click', () => {
      inputState = inputState === 0 ? 1 : 0;
      updateView();
    });

    updateView();
  </script>
</body>
</html>

The NOT Gate: Symbol and Truth Table

<!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: #ffffff;
      color: #1e2945;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      min-height: 100%;
      padding: 12px;
      gap: 12px;
    }

    .toggle-bar {
      display: flex;
      align-items: center;
      gap: 10px;
      background: #f1f5f9;
      padding: 6px 14px;
      border-radius: 999px;
      font-size: 14px;
      font-weight: 600;
    }

    .toggle-btn {
      appearance: none;
      border: none;
      background: #22b7ff;
      color: #ffffff;
      font-size: 14px;
      font-weight: 700;
      padding: 6px 16px;
      border-radius: 999px;
      cursor: pointer;
      box-shadow: 0 2px 6px rgba(34, 183, 255, 0.35);
      transition: background 0.2s ease, transform 0.1s ease;
    }
    .toggle-btn:active {
      transform: scale(0.96);
    }

    .cards-grid {
      display: flex;
      width: 100%;
      max-width: 620px;
      gap: 12px;
      justify-content: center;
    }

    .gate-card {
      flex: 1;
      min-width: 0;
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      border-radius: 12px;
      padding: 12px 8px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 8px;
    }

    .gate-title {
      font-size: 15px;
      font-weight: 700;
      color: #1e2945;
    }

    .gate-svg-box {
      width: 100%;
      max-width: 220px;
      height: 110px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

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

    .wire {
      stroke: #94a3b8;
      stroke-width: 3;
      stroke-linecap: round;
      transition: stroke 0.25s ease;
    }
    .wire.hi {
      stroke: #22b7ff;
    }

    .gate-body {
      fill: #ffffff;
      stroke: #1e2945;
      stroke-width: 2.5;
      stroke-linejoin: round;
    }

    .bubble {
      fill: #ffffff;
      stroke: #0284c7;
      stroke-width: 3;
      filter: drop-shadow(0 0 4px rgba(2, 132, 199, 0.4));
    }

    .bubble-focus {
      fill: #0284c7;
      fill-opacity: 0.15;
      stroke: #0284c7;
      stroke-width: 1.5;
      stroke-dasharray: 2 2;
    }

    .val-text {
      font-size: 15px;
      font-weight: 800;
      fill: #64748b;
      transition: fill 0.25s ease;
    }
    .val-text.hi {
      fill: #0284c7;
    }

    .state-row {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 14px;
      font-weight: 700;
    }

    .pill {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 28px;
      height: 28px;
      border-radius: 6px;
      background: #e2e8f0;
      color: #64748b;
      transition: all 0.25s ease;
    }
    .pill.hi {
      background: #22b7ff;
      color: #ffffff;
    }

    .arrow {
      color: #94a3b8;
      font-size: 14px;
    }

    .callout-badge {
      background: #e0f2fe;
      border: 1px solid #7dd3fc;
      color: #0369a1;
      padding: 8px 16px;
      border-radius: 8px;
      font-size: 13px;
      font-weight: 700;
      text-align: center;
    }

    @media (max-width: 440px) {
      .cards-grid {
        flex-direction: column;
      }
      .gate-svg-box {
        height: 90px;
      }
    }
  </style>
</head>
<body>

  <div class="toggle-bar">
    <span>Input A</span>
    <button id="toggleBtn" class="toggle-btn" onclick="toggleInput()">A = 1</button>
  </div>

  <div class="cards-grid">
    
    <div class="gate-card">
      <div class="gate-title">Buffer</div>
      <div class="gate-svg-box">
        <svg viewBox="0 0 200 90">
          
          <line id="bufInWire" class="wire hi" x1="20" y1="45" x2="60" y2="45" />
          <text id="bufInTxt" class="val-text hi" x="10" y="50" text-anchor="middle">1</text>
          
          
          <polygon class="gate-body" points="60,15 135,45 60,75" />
          
          
          <line id="bufOutWire" class="wire hi" x1="135" y1="45" x2="180" y2="45" />
          <text id="bufOutTxt" class="val-text hi" x="192" y="50" text-anchor="middle">1</text>
        </svg>
      </div>
      <div class="state-row">
        <span id="bufInPill" class="pill hi">1</span>
        <span class="arrow">→</span>
        <span id="bufOutPill" class="pill hi">1</span>
      </div>
    </div>

    
    <div class="gate-card">
      <div class="gate-title">NOT Gate</div>
      <div class="gate-svg-box">
        <svg viewBox="0 0 200 90">
          
          <line id="notInWire" class="wire hi" x1="20" y1="45" x2="60" y2="45" />
          <text id="notInTxt" class="val-text hi" x="10" y="50" text-anchor="middle">1</text>
          
          
          <polygon class="gate-body" points="60,15 125,45 60,75" />
          
          
          <circle class="bubble-focus" cx="133" cy="45" r="12" />
          <circle class="bubble" cx="133" cy="45" r="7" />
          
          
          <line id="notOutWire" class="wire" x1="140" y1="45" x2="180" y2="45" />
          <text id="notOutTxt" class="val-text" x="192" y="50" text-anchor="middle">0</text>
        </svg>
      </div>
      <div class="state-row">
        <span id="notInPill" class="pill hi">1</span>
        <span class="arrow">→</span>
        <span id="notOutPill" class="pill">0</span>
      </div>
    </div>
  </div>

  <div class="callout-badge">
    No bubble = Buffer · Bubble = Inverter
  </div>

  <script>
    let currentInput = 1;

    function toggleInput() {
      currentInput = currentInput === 1 ? 0 : 1;
      updateDiagram();
    }

    function updateDiagram() {
      const a = currentInput;
      const qBuf = a;
      const qNot = a === 1 ? 0 : 1;

      // Update button
      const btn = document.getElementById('toggleBtn');
      btn.textContent = `A = ${a}`;

      // Update Buffer
      updateWire('bufInWire', 'bufInTxt', 'bufInPill', a);
      updateWire('bufOutWire', 'bufOutTxt', 'bufOutPill', qBuf);

      // Update NOT Gate
      updateWire('notInWire', 'notInTxt', 'notInPill', a);
      updateWire('notOutWire', 'notOutTxt', 'notOutPill', qNot);
    }

    function updateWire(wireId, txtId, pillId, val) {
      const wire = document.getElementById(wireId);
      const txt = document.getElementById(txtId);
      const pill = document.getElementById(pillId);

      txt.textContent = val;
      pill.textContent = val;

      if (val === 1) {
        wire.classList.add('hi');
        txt.classList.add('hi');
        pill.classList.add('hi');
      } else {
        wire.classList.remove('hi');
        txt.classList.remove('hi');
        pill.classList.remove('hi');
      }
    }
  </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">
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      user-select: none;
      -webkit-user-select: none;
    }

    body {
      width: 100%;
      min-height: 100%;
      background: #ffffff;
      color: #1e293b;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 16px;
      gap: 16px;
    }

    /* Boolean Header */
    .eq-badge {
      background: #f1f5f9;
      padding: 6px 16px;
      border-radius: 20px;
      font-size: 18px;
      font-weight: 700;
      color: #0f172a;
      letter-spacing: 0.5px;
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .overline {
      text-decoration: overline;
      text-decoration-thickness: 2px;
    }

    /* Truth Table */
    .table-container {
      width: 100%;
      max-width: 320px;
      border-collapse: separate;
      border-spacing: 0;
      border-radius: 12px;
      overflow: hidden;
      border: 1px solid #e2e8f0;
    }

    table {
      width: 100%;
      border-collapse: collapse;
      text-align: center;
    }

    th {
      background: #f8fafc;
      padding: 10px;
      font-size: 14px;
      font-weight: 700;
      color: #475569;
      border-bottom: 2px solid #e2e8f0;
    }

    td {
      padding: 12px 10px;
      font-size: 16px;
      font-weight: 600;
      border-bottom: 1px solid #f1f5f9;
      transition: background-color 0.25s ease, color 0.25s ease;
    }

    tr:last-child td {
      border-bottom: none;
    }

    tr.row-state {
      cursor: pointer;
    }

    tr.active-row {
      background: #f0f9ff;
    }

    tr.active-row td {
      color: #0284c7;
      font-weight: 800;
    }

    .tag {
      font-size: 11px;
      font-weight: 700;
      padding: 2px 6px;
      border-radius: 4px;
      margin-left: 6px;
      vertical-align: middle;
    }

    .tag-low {
      background: #f1f5f9;
      color: #64748b;
    }

    .tag-high {
      background: #e0f2fe;
      color: #0369a1;
    }

    /* Circuit / Schematic Interactive Area */
    .circuit-box {
      width: 100%;
      max-width: 340px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 12px 8px;
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      border-radius: 14px;
      position: relative;
    }

    .terminal-side {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 6px;
      min-width: 68px;
    }

    .terminal-label {
      font-size: 12px;
      font-weight: 700;
      color: #64748b;
      text-transform: uppercase;
    }

    /* Switch Button */
    .toggle-btn {
      appearance: none;
      border: none;
      outline: none;
      background: #ffffff;
      border: 2px solid #cbd5e1;
      width: 58px;
      height: 34px;
      border-radius: 17px;
      cursor: pointer;
      position: relative;
      transition: background-color 0.25s ease, border-color 0.25s ease;
      box-shadow: 0 1px 3px rgba(0,0,0,0.08);
      display: flex;
      align-items: center;
      padding: 2px;
    }

    .toggle-btn.state-high {
      background: #0284c7;
      border-color: #0284c7;
    }

    .toggle-thumb {
      width: 26px;
      height: 26px;
      background: #ffffff;
      border-radius: 50%;
      box-shadow: 0 1px 4px rgba(0,0,0,0.2);
      transform: translateX(0px);
      transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 12px;
      font-weight: 800;
      color: #64748b;
    }

    .toggle-btn.state-high .toggle-thumb {
      transform: translateX(24px);
      color: #0284c7;
    }

    /* NOT Gate SVG */
    .gate-svg {
      flex: 1;
      height: 60px;
      max-width: 140px;
    }

    .wire {
      stroke-width: 3;
      stroke-linecap: round;
      transition: stroke 0.25s ease;
    }

    .wire-low {
      stroke: #94a3b8;
    }

    .wire-high {
      stroke: #0284c7;
    }

    /* Output Indicator Lamp */
    .output-bulb {
      width: 36px;
      height: 36px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 15px;
      font-weight: 800;
      border: 2px solid #cbd5e1;
      background: #ffffff;
      color: #94a3b8;
      transition: all 0.25s ease;
    }

    .output-bulb.active {
      background: #0284c7;
      border-color: #38bdf8;
      color: #ffffff;
      box-shadow: 0 0 14px rgba(2, 132, 199, 0.55);
    }
  </style>
</head>
<body>

  
  <div class="eq-badge">
    <span>Q = NOT A</span>
    <span style="color: #94a3b8;">=</span>
    <span><span class="overline">A</span></span>
  </div>

  
  <div class="table-container">
    <table>
      <thead>
        <tr>
          <th>Input (A)</th>
          <th>Output (Q)</th>
        </tr>
      </thead>
      <tbody>
        <tr id="row-0" class="row-state active-row" onclick="setState(0)">
          <td>0 <span class="tag tag-low">LOW</span></td>
          <td>1 <span class="tag tag-high">HIGH</span></td>
        </tr>
        <tr id="row-1" class="row-state" onclick="setState(1)">
          <td>1 <span class="tag tag-high">HIGH</span></td>
          <td>0 <span class="tag tag-low">LOW</span></td>
        </tr>
      </tbody>
    </table>
  </div>

  
  <div class="circuit-box">
    
    <div class="terminal-side">
      <div class="terminal-label">Input A</div>
      <button id="toggleBtn" class="toggle-btn" onclick="toggleInput()" aria-label="Toggle input A">
        <div id="toggleThumb" class="toggle-thumb">0</div>
      </button>
    </div>

    
    <svg class="gate-svg" viewBox="0 0 140 60">
      
      <line id="wireIn" class="wire wire-low" x1="5" y1="30" x2="35" y2="30" />
      
      
      <polygon points="35,12 85,30 35,48" fill="#ffffff" stroke="#1e293b" stroke-width="2.5" stroke-linejoin="round" />
      
      
      <circle cx="91" cy="30" r="6" fill="#ffffff" stroke="#1e293b" stroke-width="2.5" />
      
      
      <line id="wireOut" class="wire wire-high" x1="97" y1="30" x2="135" y2="30" />
    </svg>

    
    <div class="terminal-side">
      <div class="terminal-label">Output Q</div>
      <div id="outputBulb" class="output-bulb active">1</div>
    </div>
  </div>

  <script>
    let stateA = 0;

    function setState(val) {
      stateA = val;
      render();
    }

    function toggleInput() {
      stateA = stateA === 0 ? 1 : 0;
      render();
    }

    function render() {
      const q = stateA === 0 ? 1 : 0;

      // Table highlight
      document.getElementById('row-0').className = stateA === 0 ? 'row-state active-row' : 'row-state';
      document.getElementById('row-1').className = stateA === 1 ? 'row-state active-row' : 'row-state';

      // Toggle Switch
      const btn = document.getElementById('toggleBtn');
      const thumb = document.getElementById('toggleThumb');
      if (stateA === 1) {
        btn.classList.add('state-high');
        thumb.textContent = '1';
      } else {
        btn.classList.remove('state-high');
        thumb.textContent = '0';
      }

      // Output Bulb
      const bulb = document.getElementById('outputBulb');
      bulb.textContent = q.toString();
      if (q === 1) {
        bulb.classList.add('active');
      } else {
        bulb.classList.remove('active');
      }

      // Wires
      const wireIn = document.getElementById('wireIn');
      const wireOut = document.getElementById('wireOut');

      wireIn.setAttribute('class', stateA === 1 ? 'wire wire-high' : 'wire wire-low');
      wireOut.setAttribute('class', q === 1 ? 'wire wire-high' : 'wire wire-low');
    }
  </script>
</body>
</html>

ELEC-3.2

Aligned learning resources

Related diagrams