<!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 {
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      background: #ffffff;
      color: #1e2945;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100%;
      padding: 12px 8px;
    }

    .main-wrap {
      width: 100%;
      max-width: 580px;
      display: flex;
      flex-direction: column;
      gap: 16px;
    }

    /* 8-Column Grid */
    .grid {
      display: grid;
      grid-template-columns: repeat(8, 1fr);
      gap: 6px;
      width: 100%;
    }

    .col {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 6px;
      cursor: pointer;
      user-select: none;
    }

    .header-val {
      font-size: 13px;
      font-weight: 700;
      color: #64748b;
      transition: color 0.25s ease, text-decoration 0.25s ease;
      text-align: center;
    }

    .bit-box {
      width: 100%;
      aspect-ratio: 1;
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 22px;
      font-weight: 800;
      border: 2px solid transparent;
      transition: all 0.25s ease;
    }

    /* Active (1) State: Bright Cyan/Blue */
    .col.active .header-val {
      color: #0284c7;
      text-decoration: none;
    }
    .col.active .bit-box {
      background: #e0f2fe;
      border-color: #0284c7;
      color: #0369a1;
      box-shadow: 0 4px 12px rgba(2, 132, 199, 0.2);
    }
    .col.active .val-tag {
      color: #0284c7;
      background: #f0f9ff;
      border-color: #bae6fd;
    }

    /* Inactive (0) State: Dimmed Light Gray with Strike-through */
    .col.inactive .header-val {
      color: #94a3b8;
      text-decoration: line-through;
      text-decoration-thickness: 1.5px;
    }
    .col.inactive .bit-box {
      background: #f1f5f9;
      border-color: #e2e8f0;
      color: #94a3b8;
      box-shadow: none;
    }
    .col.inactive .val-tag {
      color: #cbd5e1;
      background: #f8fafc;
      border-color: #e2e8f0;
      text-decoration: line-through;
    }

    .val-tag {
      font-size: 11px;
      font-weight: 700;
      padding: 2px 4px;
      border-radius: 4px;
      border: 1px solid transparent;
      transition: all 0.25s ease;
      min-width: 26px;
      text-align: center;
    }

    /* Equation Banner */
    .equation-card {
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      border-radius: 12px;
      padding: 12px 14px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 6px;
      text-align: center;
    }

    .equation {
      font-size: 19px;
      font-weight: 700;
      color: #1e2945;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: center;
      gap: 6px;
      font-variant-numeric: tabular-nums;
    }

    .eq-num {
      color: #0284c7;
      background: #e0f2fe;
      padding: 2px 8px;
      border-radius: 6px;
      border: 1px solid #bae6fd;
      transition: all 0.25s ease;
    }

    .eq-op {
      color: #94a3b8;
      font-weight: 600;
    }

    .eq-result {
      color: #0f172a;
      background: #ffffff;
      padding: 2px 10px;
      border-radius: 6px;
      border: 2px solid #0284c7;
      box-shadow: 0 2px 6px rgba(2, 132, 199, 0.15);
    }

    .hint {
      font-size: 12px;
      font-weight: 500;
      color: #64748b;
    }

    @media (max-width: 420px) {
      .grid { gap: 4px; }
      .header-val { font-size: 11px; }
      .bit-box { font-size: 18px; border-radius: 6px; }
      .val-tag { font-size: 10px; padding: 2px 2px; }
      .equation { font-size: 16px; gap: 4px; }
      .eq-num { padding: 1px 6px; }
      .eq-result { padding: 1px 8px; }
    }
  </style>
</head>
<body>

  <div class="main-wrap">
    
    <div class="grid" id="bitGrid"></div>

    
    <div class="equation-card">
      <div class="equation" id="equationRow"></div>
      <div class="hint">Tap any bit to toggle 0 / 1</div>
    </div>
  </div>

  <script>
    const weights = [128, 64, 32, 16, 8, 4, 2, 1];
    let bits = [1, 0, 1, 0, 0, 1, 0, 1];

    const grid = document.getElementById('bitGrid');
    const eqRow = document.getElementById('equationRow');

    function render() {
      // Build 8 columns
      grid.innerHTML = '';
      bits.forEach((bit, i) => {
        const col = document.createElement('div');
        col.className = `col ${bit === 1 ? 'active' : 'inactive'}`;
        col.onclick = () => toggleBit(i);

        col.innerHTML = `
          <span class="header-val">${weights[i]}</span>
          <div class="bit-box">${bit}</div>
          <span class="val-tag">${bit === 1 ? weights[i] : '0'}</span>
        `;
        grid.appendChild(col);
      });

      // Build Equation
      const activeValues = weights.filter((w, i) => bits[i] === 1);
      const sum = activeValues.reduce((a, b) => a + b, 0);

      if (activeValues.length === 0) {
        eqRow.innerHTML = `<span class="eq-result">0</span>`;
      } else {
        const parts = activeValues.map(v => `<span class="eq-num">${v}</span>`).join('<span class="eq-op">+</span>');
        eqRow.innerHTML = `${parts} <span class="eq-op">=</span> <span class="eq-result">${sum}</span>`;
      }
    }

    function toggleBit(index) {
      bits[index] = bits[index] === 1 ? 0 : 1;
      render();
    }

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

Binary Numbers: The Language of Computers

<!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 {
      width: 100%;
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      background: #ffffff;
      color: #1e2945;
      padding: 12px;
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    /* Mode selector tabs */
    .mode-bar {
      display: flex;
      justify-content: center;
      gap: 8px;
    }
    .tab-btn {
      background: #f1f5f9;
      border: 1px solid #cbd5e1;
      color: #1e2945;
      padding: 6px 14px;
      font-size: 13px;
      font-weight: 600;
      border-radius: 20px;
      cursor: pointer;
      transition: background 0.2s, color 0.2s;
    }
    .tab-btn.active {
      background: #22b7ff;
      border-color: #22b7ff;
      color: #ffffff;
    }

    /* View containers */
    .view {
      display: none;
      width: 100%;
      gap: 10px;
    }
    .view.active {
      display: flex;
    }

    /* 2-Panel Binary Layout */
    .binary-grid {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      width: 100%;
    }
    .panel {
      flex: 1 1 150px;
      background: #f8fafc;
      border: 1.5px solid #e2e8f0;
      border-radius: 12px;
      padding: 12px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 8px;
    }
    .panel.on-panel {
      border-color: #bae6fd;
      background: #f0f9ff;
    }

    .badge {
      font-size: 15px;
      font-weight: 700;
      padding: 3px 12px;
      border-radius: 8px;
      display: inline-block;
    }
    .badge-off {
      background: #e2e8f0;
      color: #475569;
    }
    .badge-on {
      background: #22b7ff;
      color: #ffffff;
    }

    /* SVG Schematic & Scope */
    .schematic-svg {
      width: 100%;
      max-width: 220px;
      height: 80px;
    }
    .scope-svg {
      width: 100%;
      max-width: 220px;
      height: 65px;
      background: #ffffff;
      border-radius: 8px;
      border: 1px solid #e2e8f0;
    }

    /* Noise comparison view */
    .noise-panel {
      width: 100%;
      background: #f8fafc;
      border: 1.5px solid #e2e8f0;
      border-radius: 12px;
      padding: 12px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 8px;
    }
    .noise-svg {
      width: 100%;
      max-width: 440px;
      height: 165px;
      background: #ffffff;
      border-radius: 8px;
      border: 1px solid #e2e8f0;
    }

    .label-row {
      display: flex;
      justify-content: space-between;
      width: 100%;
      max-width: 220px;
      font-size: 12px;
      font-weight: 600;
      color: #64748b;
    }
  </style>
</head>
<body>

  
  <div class="mode-bar">
    <button class="tab-btn active" id="btnBinary" onclick="switchTab('binary')">Binary (2 States)</button>
    <button class="tab-btn" id="btnNoise" onclick="switchTab('noise')">Why Not 10 Levels?</button>
  </div>

  
  <div id="binaryView" class="view binary-grid active">
    
    
    <div class="panel">
      <div class="badge badge-off">OFF / 0</div>
      
      
      <svg class="schematic-svg" viewBox="0 0 160 60">
        
        <line x1="10" y1="30" x2="45" y2="30" stroke="#94a3b8" stroke-width="3" stroke-linecap="round"/>
        <circle cx="45" cy="30" r="4" fill="#94a3b8"/>
        
        <line x1="45" y1="30" x2="105" y2="12" stroke="#64748b" stroke-width="3" stroke-linecap="round"/>
        
        <circle cx="115" cy="30" r="4" fill="#94a3b8"/>
        <line x1="115" y1="30" x2="150" y2="30" stroke="#94a3b8" stroke-width="3" stroke-linecap="round"/>
        <text x="80" y="52" fill="#ef4444" font-size="11" font-weight="700" text-anchor="middle">NO CURRENT</text>
      </svg>

      
      <svg class="scope-svg" viewBox="0 0 160 50">
        <line x1="0" y1="38" x2="160" y2="38" stroke="#f1f5f9" stroke-width="1"/>
        <line x1="0" y1="12" x2="160" y2="12" stroke="#f1f5f9" stroke-width="1"/>
        <path d="M 0,38 L 160,38" stroke="#94a3b8" stroke-width="3" fill="none"/>
        <text x="8" y="15" fill="#94a3b8" font-size="10" font-weight="600">3.3V</text>
        <text x="8" y="45" fill="#64748b" font-size="10" font-weight="700">0V</text>
      </svg>
      <div class="label-row">
        <span>0V (Low)</span>
        <span>Open Circuit</span>
      </div>
    </div>

    
    <div class="panel on-panel">
      <div class="badge badge-on">ON / 1</div>
      
      
      <svg class="schematic-svg" viewBox="0 0 160 60">
        
        <line x1="10" y1="30" x2="45" y2="30" stroke="#22b7ff" stroke-width="3" stroke-linecap="round"/>
        <circle cx="45" cy="30" r="4" fill="#22b7ff"/>
        
        <line x1="45" y1="30" x2="115" y2="30" stroke="#22b7ff" stroke-width="3.5" stroke-linecap="round"/>
        
        <circle cx="115" cy="30" r="4" fill="#22b7ff"/>
        <line x1="115" y1="30" x2="150" y2="30" stroke="#22b7ff" stroke-width="3" stroke-linecap="round"/>
        
        <circle cx="28" cy="30" r="2.5" fill="#ffffff"/>
        <circle cx="80" cy="30" r="2.5" fill="#ffffff"/>
        <circle cx="132" cy="30" r="2.5" fill="#ffffff"/>
        <text x="80" y="52" fill="#0284c7" font-size="11" font-weight="700" text-anchor="middle">CURRENT FLOWS</text>
      </svg>

      
      <svg class="scope-svg" viewBox="0 0 160 50">
        <line x1="0" y1="38" x2="160" y2="38" stroke="#f1f5f9" stroke-width="1"/>
        <line x1="0" y1="12" x2="160" y2="12" stroke="#f1f5f9" stroke-width="1"/>
        <path d="M 0,12 L 160,12" stroke="#22b7ff" stroke-width="3" fill="none"/>
        <text x="8" y="15" fill="#0284c7" font-size="10" font-weight="700">3.3V</text>
        <text x="8" y="45" fill="#94a3b8" font-size="10" font-weight="600">0V</text>
      </svg>
      <div class="label-row">
        <span>3.3V (High)</span>
        <span>Closed Circuit</span>
      </div>
    </div>

  </div>

  
  <div id="noiseView" class="view">
    <div class="noise-panel">
      <svg class="noise-svg" viewBox="0 0 320 120">
        
        <rect x="15" y="12" width="135" height="36" rx="4" fill="#e0f2fe"/>
        <text x="82" y="34" fill="#0284c7" font-size="10" font-weight="700" text-anchor="middle">1 (HIGH: 3.3V)</text>

        <rect x="15" y="72" width="135" height="36" rx="4" fill="#f1f5f9"/>
        <text x="82" y="94" fill="#475569" font-size="10" font-weight="700" text-anchor="middle">0 (LOW: 0V)</text>

        
        <line x1="145" y1="48" x2="145" y2="72" stroke="#22b7ff" stroke-width="1.5" stroke-dasharray="2 2"/>
        <text x="82" y="63" fill="#059669" font-size="9" font-weight="700" text-anchor="middle">✓ Safe Margin</text>

        
        <line x1="165" y1="10" x2="165" y2="110" stroke="#cbd5e1" stroke-width="1" stroke-dasharray="3 3"/>

        
        <g stroke="#e2e8f0" stroke-width="1">
          <line x1="180" y1="15" x2="305" y2="15"/>
          <line x1="180" y1="25" x2="305" y2="25"/>
          <line x1="180" y1="35" x2="305" y2="35"/>
          <line x1="180" y1="45" x2="305" y2="45"/>
          <line x1="180" y1="55" x2="305" y2="55"/>
          <line x1="180" y1="65" x2="305" y2="65"/>
          <line x1="180" y1="75" x2="305" y2="75"/>
          <line x1="180" y1="85" x2="305" y2="85"/>
          <line x1="180" y1="95" x2="305" y2="95"/>
          <line x1="180" y1="105" x2="305" y2="105"/>
        </g>
        
        <path d="M 180,45 Q 195,30 210,48 T 240,40 T 270,58 T 305,42" stroke="#ef4444" stroke-width="2" fill="none"/>
        <text x="242" y="80" fill="#dc2626" font-size="9" font-weight="700" text-anchor="middle">⚠ Noise = Errors</text>
      </svg>
      <div class="label-row" style="max-width:320px;">
        <span style="color:#0284c7;">2 States: Clear &amp; Reliable</span>
        <span style="color:#dc2626;">10 Levels: Fragile</span>
      </div>
    </div>
  </div>

  <script>
    function switchTab(mode) {
      const btnBin = document.getElementById('btnBinary');
      const btnNoise = document.getElementById('btnNoise');
      const viewBin = document.getElementById('binaryView');
      const viewNoise = document.getElementById('noiseView');

      if (mode === 'binary') {
        btnBin.classList.add('active');
        btnNoise.classList.remove('active');
        viewBin.classList.add('active');
        viewNoise.classList.remove('active');
      } else {
        btnNoise.classList.add('active');
        btnBin.classList.remove('active');
        viewNoise.classList.add('active');
        viewBin.classList.remove('active');
      }
    }
  </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>8-Bit Byte Place Values</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      user-select: none;
      -webkit-user-select: none;
    }

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

    .diagram {
      width: 100%;
      max-width: 640px;
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    .byte-grid {
      display: grid;
      grid-template-columns: repeat(8, 1fr);
      gap: 6px;
      width: 100%;
    }

    .col-header {
      font-size: 11px;
      font-weight: 700;
      color: #64748b;
      text-align: center;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      margin-bottom: 2px;
    }

    .bit-col {
      display: flex;
      flex-direction: column;
      gap: 6px;
    }

    .cell {
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 8px;
      text-align: center;
      transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
    }

    /* Power Row */
    .power-cell {
      background: #e0f2fe;
      border: 1px solid #bae6fd;
      color: #0369a1;
      font-weight: 700;
      font-size: 14px;
      padding: 8px 2px;
    }

    .power-cell sup {
      font-size: 11px;
      font-weight: 800;
    }

    /* Weight Row */
    .weight-cell {
      background: #f8fafc;
      border: 1px solid #cbd5e1;
      color: #1e2945;
      font-weight: 800;
      font-size: 16px;
      padding: 12px 2px;
      box-shadow: 0 1px 2px rgba(0,0,0,0.04);
    }

    /* Bit Toggle Row */
    .bit-toggle {
      background: #f1f5f9;
      border: 2px solid #e2e8f0;
      color: #94a3b8;
      font-weight: 800;
      font-size: 18px;
      padding: 10px 2px;
      cursor: pointer;
      border-radius: 8px;
      transition: all 0.2s ease;
    }

    .bit-toggle:hover {
      border-color: #38bdf8;
    }

    .bit-toggle.on {
      background: #0284c7;
      border-color: #0284c7;
      color: #ffffff;
      box-shadow: 0 2px 8px rgba(2, 132, 199, 0.35);
    }

    /* Column active state */
    .bit-col.active .weight-cell {
      background: #f0f9ff;
      border-color: #38bdf8;
      color: #0369a1;
    }

    /* Significance Labels */
    .significance-row {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      margin-top: 4px;
      padding: 0 4px;
    }

    .badge {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 2px;
      max-width: 140px;
    }

    .badge.left {
      align-items: flex-start;
      text-align: left;
    }

    .badge.right {
      align-items: flex-end;
      text-align: right;
    }

    .badge-tag {
      font-size: 13px;
      font-weight: 800;
      letter-spacing: 0.5px;
      padding: 3px 8px;
      border-radius: 6px;
      background: #1e2945;
      color: #ffffff;
      display: inline-block;
    }

    .badge.left .badge-tag {
      background: #0f766e;
    }

    .badge.right .badge-tag {
      background: #7c3aed;
    }

    .badge-desc {
      font-size: 12px;
      font-weight: 600;
      color: #475569;
      line-height: 1.2;
      margin-top: 2px;
    }

    /* Output summary bar */
    .summary-bar {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      margin-top: 8px;
      padding: 8px 16px;
      background: #f8fafc;
      border-radius: 8px;
      font-size: 14px;
      font-weight: 700;
      color: #1e2945;
    }

    .sum-value {
      color: #0284c7;
      font-size: 18px;
      font-weight: 800;
      min-width: 32px;
      display: inline-block;
      text-align: left;
    }

    .pointer-arrow {
      font-size: 14px;
      color: #64748b;
    }

    @media (max-width: 480px) {
      .diagram {
        gap: 8px;
      }
      .byte-grid {
        gap: 3px;
      }
      .power-cell {
        font-size: 12px;
        padding: 6px 1px;
      }
      .power-cell sup {
        font-size: 9px;
      }
      .weight-cell {
        font-size: 13px;
        padding: 8px 1px;
      }
      .bit-toggle {
        font-size: 15px;
        padding: 8px 1px;
      }
      .badge-tag {
        font-size: 11px;
        padding: 2px 6px;
      }
      .badge-desc {
        font-size: 11px;
      }
      .summary-bar {
        font-size: 13px;
        padding: 6px 12px;
      }
    }
  </style>
</head>
<body>
  <div class="diagram">
    <div class="byte-grid">
      
      <div class="bit-col" id="col-7">
        <div class="cell power-cell">2<sup>7</sup></div>
        <div class="cell weight-cell">128</div>
        <button class="cell bit-toggle" data-val="128" data-bit="7" aria-label="Toggle bit 7">0</button>
      </div>

      
      <div class="bit-col" id="col-6">
        <div class="cell power-cell">2<sup>6</sup></div>
        <div class="cell weight-cell">64</div>
        <button class="cell bit-toggle" data-val="64" data-bit="6" aria-label="Toggle bit 6">0</button>
      </div>

      
      <div class="bit-col" id="col-5">
        <div class="cell power-cell">2<sup>5</sup></div>
        <div class="cell weight-cell">32</div>
        <button class="cell bit-toggle" data-val="32" data-bit="5" aria-label="Toggle bit 5">0</button>
      </div>

      
      <div class="bit-col" id="col-4">
        <div class="cell power-cell">2<sup>4</sup></div>
        <div class="cell weight-cell">16</div>
        <button class="cell bit-toggle" data-val="16" data-bit="4" aria-label="Toggle bit 4">0</button>
      </div>

      
      <div class="bit-col" id="col-3">
        <div class="cell power-cell">2<sup>3</sup></div>
        <div class="cell weight-cell">8</div>
        <button class="cell bit-toggle" data-val="8" data-bit="3" aria-label="Toggle bit 3">0</button>
      </div>

      
      <div class="bit-col" id="col-2">
        <div class="cell power-cell">2<sup>2</sup></div>
        <div class="cell weight-cell">4</div>
        <button class="cell bit-toggle" data-val="4" data-bit="2" aria-label="Toggle bit 2">0</button>
      </div>

      
      <div class="bit-col" id="col-1">
        <div class="cell power-cell">2<sup>1</sup></div>
        <div class="cell weight-cell">2</div>
        <button class="cell bit-toggle" data-val="2" data-bit="1" aria-label="Toggle bit 1">0</button>
      </div>

      
      <div class="bit-col" id="col-0">
        <div class="cell power-cell">2<sup>0</sup></div>
        <div class="cell weight-cell">1</div>
        <button class="cell bit-toggle" data-val="1" data-bit="0" aria-label="Toggle bit 0">0</button>
      </div>
    </div>

    
    <div class="significance-row">
      <div class="badge left">
        <span class="pointer-arrow">▲</span>
        <span class="badge-tag">MSB</span>
        <span class="badge-desc">Most Significant Bit</span>
      </div>

      <div class="badge right">
        <span class="pointer-arrow">▲</span>
        <span class="badge-tag">LSB</span>
        <span class="badge-desc">Least Significant Bit</span>
      </div>
    </div>

    
    <div class="summary-bar">
      <span>Total Value:</span>
      <span class="sum-value" id="totalSum">0</span>
    </div>
  </div>

  <script>
    const toggles = document.querySelectorAll('.bit-toggle');
    const sumDisplay = document.getElementById('totalSum');

    function updateSum() {
      let total = 0;
      toggles.forEach(btn => {
        const val = parseInt(btn.dataset.val, 10);
        const bit = btn.dataset.bit;
        const col = document.getElementById(`col-${bit}`);
        if (btn.classList.contains('on')) {
          total += val;
          col.classList.add('active');
        } else {
          col.classList.remove('active');
        }
      });
      sumDisplay.textContent = total;
    }

    toggles.forEach(btn => {
      btn.addEventListener('click', () => {
        const isOn = btn.classList.toggle('on');
        btn.textContent = isOn ? '1' : '0';
        updateSum();
      });
    });
  </script>
</body>
</html>

CS-6

Aligned learning resources

Related diagrams