<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Data Unit Conversion Ladder</title>
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; }
    
    body {
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      color: #0f172a;
      background: #ffffff;
      padding: 12px 10px;
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    .container {
      width: 100%;
      max-width: 440px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 8px;
    }

    .header-title {
      font-size: 14px;
      font-weight: 700;
      color: #334155;
      text-align: center;
      letter-spacing: -0.01em;
    }

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

    .toggle-btn {
      flex: 1;
      border: 1.5px solid #cbd5e1;
      background: #f8fafc;
      color: #475569;
      padding: 7px 8px;
      border-radius: 8px;
      font-size: 12px;
      font-weight: 700;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 5px;
      transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
    }

    .toggle-btn.active-up {
      background: #eff6ff;
      color: #1d4ed8;
      border-color: #3b82f6;
    }

    .toggle-btn.active-down {
      background: #f0fdf4;
      color: #15803d;
      border-color: #22c55e;
    }

    .ladder-grid {
      display: grid;
      grid-template-columns: 82px 1fr 82px;
      gap: 2px 8px;
      width: 100%;
      align-items: center;
    }

    /* Rung Rows */
    .rung {
      background: #f8fafc;
      border: 1.5px solid #e2e8f0;
      border-radius: 7px;
      padding: 6px 10px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      cursor: pointer;
      user-select: none;
      transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
      min-height: 38px;
    }

    .rung:hover {
      background: #f1f5f9;
      border-color: #cbd5e1;
    }

    .rung.active {
      border-color: #0284c7;
      background: #f0f9ff;
      box-shadow: 0 0 0 1.5px #0284c7;
    }

    .unit-name {
      font-weight: 700;
      font-size: 13px;
      color: #0f172a;
      display: flex;
      align-items: baseline;
      gap: 4px;
    }

    .unit-symbol {
      color: #64748b;
      font-size: 11.5px;
      font-weight: 600;
    }

    .unit-val {
      font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
      font-size: 11.5px;
      font-weight: 700;
      color: #334155;
      background: #ffffff;
      padding: 2px 6px;
      border-radius: 4px;
      border: 1px solid #cbd5e1;
      white-space: nowrap;
    }

    .special-rung {
      background: #faf5ff;
      border-color: #e9d5ff;
    }
    
    .special-rung:hover {
      background: #f3e8ff;
      border-color: #d8b4fe;
    }

    .special-rung.active {
      border-color: #9333ea;
      background: #fdf4ff;
      box-shadow: 0 0 0 1.5px #9333ea;
    }

    .special-rung .unit-val {
      border-color: #d8b4fe;
      color: #6b21a8;
    }

    /* Transition Inter-Rung Rows */
    .transition-row {
      display: contents;
    }

    .badge-cell {
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 1px 0;
    }

    .spine-cell {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 18px;
    }

    .spine-line {
      width: 2px;
      height: 100%;
      background: #cbd5e1;
      border-radius: 1px;
    }

    /* High contrast badges */
    .badge {
      font-size: 10.5px;
      font-weight: 700;
      border-radius: 5px;
      padding: 2px 5px;
      text-align: center;
      white-space: nowrap;
      transition: opacity 0.2s ease, filter 0.2s ease;
      width: 100%;
      box-sizing: border-box;
    }

    .badge-up {
      color: #1e40af;
      background: #dbeafe;
      border: 1px solid #93c5fd;
    }

    .badge-down {
      color: #14532d;
      background: #dcfce7;
      border: 1px solid #86efac;
    }

    .badge-up-special {
      color: #6b21a8;
      background: #f3e8ff;
      border: 1px solid #d8b4fe;
    }

    .badge-down-special {
      color: #6b21a8;
      background: #f3e8ff;
      border: 1px solid #d8b4fe;
    }

    .dimmed {
      opacity: 0.22;
      filter: grayscale(60%);
    }

    .highlight {
      opacity: 1;
      filter: none;
    }

    /* Info Bar at Bottom */
    .info-box {
      width: 100%;
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      border-radius: 7px;
      padding: 6px 10px;
      font-size: 11.5px;
      color: #334155;
      text-align: center;
      line-height: 1.4;
    }

    .info-box strong {
      color: #0f172a;
    }

    @media (max-width: 380px) {
      .ladder-grid {
        grid-template-columns: 74px 1fr 74px;
        gap: 2px 4px;
      }
      .badge {
        font-size: 9.5px;
        padding: 2px 3px;
      }
      .unit-name {
        font-size: 12px;
      }
      .unit-val {
        font-size: 10.5px;
        padding: 1px 4px;
      }
      .toggle-btn {
        font-size: 11px;
        padding: 6px 4px;
      }
    }
  </style>
</head>
<body>

  <div class="container">
    <div class="header-title">Data Storage Unit Hierarchy</div>

    
    <div class="controls">
      <button class="toggle-btn active-up" id="btnUp" onclick="setMode('up')">
        <span>↑</span>
        <span>Convert Up (÷)</span>
      </button>
      <button class="toggle-btn" id="btnDown" onclick="setMode('down')">
        <span>↓</span>
        <span>Convert Down (×)</span>
      </button>
    </div>

    
    <div class="ladder-grid">
      
      
      <div></div>
      <div class="rung" onclick="selectRung(5)" id="rung-5">
        <div class="unit-name">Terabyte <span class="unit-symbol">TB</span></div>
        <div class="unit-val">10<sup>12</sup> B</div>
      </div>
      <div></div>

      
      <div class="badge-cell">
        <div class="badge badge-up" id="up-tb">÷ 1,000 ↑</div>
      </div>
      <div class="spine-cell"><div class="spine-line"></div></div>
      <div class="badge-cell">
        <div class="badge badge-down dimmed" id="down-tb">↓ × 1,000</div>
      </div>

      
      <div></div>
      <div class="rung" onclick="selectRung(4)" id="rung-4">
        <div class="unit-name">Gigabyte <span class="unit-symbol">GB</span></div>
        <div class="unit-val">10<sup>9</sup> B</div>
      </div>
      <div></div>

      
      <div class="badge-cell">
        <div class="badge badge-up" id="up-gb">÷ 1,000 ↑</div>
      </div>
      <div class="spine-cell"><div class="spine-line"></div></div>
      <div class="badge-cell">
        <div class="badge badge-down dimmed" id="down-gb">↓ × 1,000</div>
      </div>

      
      <div></div>
      <div class="rung" onclick="selectRung(3)" id="rung-3">
        <div class="unit-name">Megabyte <span class="unit-symbol">MB</span></div>
        <div class="unit-val">10<sup>6</sup> B</div>
      </div>
      <div></div>

      
      <div class="badge-cell">
        <div class="badge badge-up" id="up-mb">÷ 1,000 ↑</div>
      </div>
      <div class="spine-cell"><div class="spine-line"></div></div>
      <div class="badge-cell">
        <div class="badge badge-down dimmed" id="down-mb">↓ × 1,000</div>
      </div>

      
      <div></div>
      <div class="rung" onclick="selectRung(2)" id="rung-2">
        <div class="unit-name">Kilobyte <span class="unit-symbol">KB</span></div>
        <div class="unit-val">10<sup>3</sup> B</div>
      </div>
      <div></div>

      
      <div class="badge-cell">
        <div class="badge badge-up" id="up-kb">÷ 1,000 ↑</div>
      </div>
      <div class="spine-cell"><div class="spine-line"></div></div>
      <div class="badge-cell">
        <div class="badge badge-down dimmed" id="down-kb">↓ × 1,000</div>
      </div>

      
      <div></div>
      <div class="rung" onclick="selectRung(1)" id="rung-1">
        <div class="unit-name">Byte <span class="unit-symbol">B</span></div>
        <div class="unit-val">8 bits</div>
      </div>
      <div></div>

      
      <div class="badge-cell">
        <div class="badge badge-up-special" id="up-b">÷ 8 ↑</div>
      </div>
      <div class="spine-cell"><div class="spine-line"></div></div>
      <div class="badge-cell">
        <div class="badge badge-down-special dimmed" id="down-b">↓ × 8</div>
      </div>

      
      <div></div>
      <div class="rung special-rung" onclick="selectRung(0)" id="rung-0">
        <div class="unit-name">Bit <span class="unit-symbol">b</span></div>
        <div class="unit-val">0 or 1</div>
      </div>
      <div></div>

    </div>

    
    <div class="info-box" id="infoBox">
      Click a unit or conversion mode above to explore data size steps.
    </div>
  </div>

  <script>
    let currentMode = 'up';
    const unitDetails = [
      "<strong>Bit (b):</strong> The fundamental binary unit (0 or 1). 8 bits = 1 Byte.",
      "<strong>Byte (B):</strong> 8 bits. Standard unit for encoding a single ASCII character.",
      "<strong>Kilobyte (KB):</strong> 1,000 Bytes (10³ B) = 1 KB. (e.g., small text files)",
      "<strong>Megabyte (MB):</strong> 1,000 KB (10⁶ B) = 1 MB. (e.g., MP3 audio tracks)",
      "<strong>Gigabyte (GB):</strong> 1,000 MB (10⁹ B) = 1 GB. (e.g., HD movie file)",
      "<strong>Terabyte (TB):</strong> 1,000 GB (10¹² B) = 1 TB. (e.g., large backup drives)"
    ];

    function setMode(mode) {
      currentMode = mode;
      const btnUp = document.getElementById('btnUp');
      const btnDown = document.getElementById('btnDown');
      const upArrows = document.querySelectorAll('.badge-up, .badge-up-special');
      const downArrows = document.querySelectorAll('.badge-down, .badge-down-special');

      if (mode === 'up') {
        btnUp.className = 'toggle-btn active-up';
        btnDown.className = 'toggle-btn';
        upArrows.forEach(el => { el.classList.remove('dimmed'); el.classList.add('highlight'); });
        downArrows.forEach(el => { el.classList.add('dimmed'); el.classList.remove('highlight'); });
      } else {
        btnDown.className = 'toggle-btn active-down';
        btnUp.className = 'toggle-btn';
        downArrows.forEach(el => { el.classList.remove('dimmed'); el.classList.add('highlight'); });
        upArrows.forEach(el => { el.classList.add('dimmed'); el.classList.remove('highlight'); });
      }
    }

    function selectRung(index) {
      for (let i = 0; i <= 5; i++) {
        const rung = document.getElementById('rung-' + i);
        if (i === index) {
          rung.classList.add('active');
        } else {
          rung.classList.remove('active');
        }
      }
      const infoBox = document.getElementById('infoBox');
      infoBox.innerHTML = unitDetails[index];
    }

    // Initialize default mode
    setMode('up');
  </script>
</body>
</html>

Units of Storage: From Bits to Terabytes

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

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

    /* Mode switcher */
    .mode-bar {
      display: flex;
      justify-content: center;
      gap: 8px;
    }

    .mode-btn {
      appearance: none;
      border: 1px solid #d1d5db;
      background: #f8fafc;
      color: #4b5563;
      padding: 8px 14px;
      border-radius: 20px;
      font-size: 13px;
      font-weight: 600;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 6px;
      transition: all 0.2s ease;
    }

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

    /* Unit Ladder Flow */
    .flow-container {
      position: relative;
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      border-radius: 12px;
      padding: 18px 10px;
    }

    /* Direction label banners */
    .rule-banner {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      padding: 7px 12px;
      border-radius: 8px;
      font-size: 13px;
      font-weight: 700;
      margin-bottom: 12px;
      transition: all 0.25s ease;
    }

    .banner-mult {
      background: #ecfdf5;
      color: #065f46;
      border: 1px solid #a7f3d0;
    }

    .banner-div {
      background: #eff6ff;
      color: #1e40af;
      border: 1px solid #bfdbfe;
    }

    /* Unit nodes row */
    .units-row {
      display: grid;
      grid-template-columns: repeat(6, 1fr);
      align-items: center;
      position: relative;
      gap: 4px;
    }

    .unit-node {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 8px 4px;
      background: #ffffff;
      border: 2px solid #e2e8f0;
      border-radius: 10px;
      font-weight: 700;
      font-size: 14px;
      color: #1e2945;
      text-align: center;
      min-height: 52px;
      transition: all 0.25s ease;
    }

    .unit-node .sub {
      font-size: 10px;
      font-weight: 500;
      color: #64748b;
      margin-top: 2px;
    }

    .unit-node.highlight {
      border-color: #0284c7;
      background: #f0f9ff;
      color: #0284c7;
      box-shadow: 0 2px 8px rgba(2, 132, 199, 0.15);
    }

    .unit-node.special-byte {
      border-color: #f59e0b;
      background: #fffbeb;
    }

    .unit-node.special-bit {
      border-color: #f59e0b;
      background: #fffbeb;
    }

    /* Arrows display between nodes */
    .arrows-row {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      padding: 8px 24px;
      gap: 8px;
    }

    .arrow-col {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      font-size: 11px;
      font-weight: 700;
      text-align: center;
    }

    .op-tag {
      padding: 3px 6px;
      border-radius: 6px;
      font-size: 11px;
      white-space: nowrap;
      transition: all 0.2s ease;
    }

    .op-mult {
      background: #d1fae5;
      color: #047857;
    }

    .op-div {
      background: #dbeafe;
      color: #1d4ed8;
    }

    .op-special-mult {
      background: #fef3c7;
      color: #b45309;
      box-shadow: 0 0 0 1px #fcd34d;
    }

    .op-special-div {
      background: #fef3c7;
      color: #b45309;
      box-shadow: 0 0 0 1px #fcd34d;
    }

    .arrow-sym {
      font-size: 16px;
      line-height: 1;
      margin: 2px 0;
      color: #64748b;
    }

    /* Special callout card */
    .special-box {
      display: flex;
      align-items: center;
      justify-content: space-between;
      background: #fffbeb;
      border: 1.5px solid #fde68a;
      border-radius: 10px;
      padding: 10px 14px;
      font-size: 12px;
      font-weight: 600;
      color: #92400e;
    }

    .special-badge {
      background: #f59e0b;
      color: #ffffff;
      padding: 2px 8px;
      border-radius: 6px;
      font-size: 11px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }

    .special-ops {
      display: flex;
      gap: 12px;
      align-items: center;
      font-size: 12px;
    }

    .special-ops span {
      background: #ffffff;
      border: 1px solid #fcd34d;
      padding: 4px 8px;
      border-radius: 6px;
      font-weight: 700;
    }

    /* Live Mini Example */
    .example-strip {
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 10px;
      padding: 10px 14px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 13px;
    }

    .example-title {
      font-weight: 600;
      color: #64748b;
      font-size: 12px;
    }

    .example-math {
      font-weight: 700;
      color: #0f172a;
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    }

    @media (max-width: 420px) {
      .unit-node { font-size: 12px; padding: 6px 2px; min-height: 46px; }
      .unit-node .sub { font-size: 9px; }
      .arrow-col { font-size: 10px; }
      .op-tag { font-size: 9px; padding: 2px 4px; }
      .special-box { flex-direction: column; gap: 6px; align-items: flex-start; }
      .special-ops { width: 100%; justify-content: space-between; }
    }
  </style>
</head>
<body>

<div class="diagram">

  
  <div class="mode-bar">
    <button class="mode-btn active" id="btnDown" onclick="setMode('down')">
      <span>Large → Small</span>
      <strong>(× MULTIPLY)</strong>
    </button>
    <button class="mode-btn" id="btnUp" onclick="setMode('up')">
      <span>Small → Large</span>
      <strong>(÷ DIVIDE)</strong>
    </button>
  </div>

  
  <div class="flow-container">
    <div id="ruleBanner" class="rule-banner banner-mult">
      <span>Large Unit → Small Unit:</span>
      <span>MULTIPLY (× 1,000)</span>
    </div>

    
    <div class="units-row">
      <div class="unit-node" id="nodeTB">TB<div class="sub">Terabyte</div></div>
      <div class="unit-node" id="nodeGB">GB<div class="sub">Gigabyte</div></div>
      <div class="unit-node" id="nodeMB">MB<div class="sub">Megabyte</div></div>
      <div class="unit-node" id="nodeKB">KB<div class="sub">Kilobyte</div></div>
      <div class="unit-node special-byte" id="nodeB">Byte<div class="sub">8 bits</div></div>
      <div class="unit-node special-bit" id="nodeBit">bit<div class="sub">0 or 1</div></div>
    </div>

    
    <div class="arrows-row" id="arrowsRow">
      
    </div>
  </div>

  
  <div class="special-box">
    <div style="display: flex; align-items: center; gap: 8px;">
      <span class="special-badge">Special Rule</span>
      <span>Bytes ⇄ Bits: factor of 8</span>
    </div>
    <div class="special-ops">
      <span>Byte → bit: × 8</span>
      <span>bit → Byte: ÷ 8</span>
    </div>
  </div>

  
  <div class="example-strip">
    <span class="example-title" id="exLabel">Worked Example:</span>
    <span class="example-math" id="exMath">2 GB × 1,000 = 2,000 MB</span>
  </div>

</div>

<script>
  let currentMode = 'down';

  function renderArrows() {
    const arrowsRow = document.getElementById('arrowsRow');
    const ruleBanner = document.getElementById('ruleBanner');
    const exMath = document.getElementById('exMath');
    const exLabel = document.getElementById('exLabel');

    if (currentMode === 'down') {
      ruleBanner.className = 'rule-banner banner-mult';
      ruleBanner.innerHTML = '<span>Large → Small:</span> <span>MULTIPLY (× 1,000)</span>';
      
      arrowsRow.innerHTML = `
        <div class="arrow-col">
          <span class="op-tag op-mult">× 1,000</span>
          <span class="arrow-sym">→</span>
        </div>
        <div class="arrow-col">
          <span class="op-tag op-mult">× 1,000</span>
          <span class="arrow-sym">→</span>
        </div>
        <div class="arrow-col">
          <span class="op-tag op-mult">× 1,000</span>
          <span class="arrow-sym">→</span>
        </div>
        <div class="arrow-col">
          <span class="op-tag op-mult">× 1,000</span>
          <span class="arrow-sym">→</span>
        </div>
        <div class="arrow-col">
          <span class="op-tag op-special-mult">× 8</span>
          <span class="arrow-sym" style="color:#f59e0b;">→</span>
        </div>
      `;
      exLabel.textContent = "Large to Small Example:";
      exMath.textContent = "4 MB × 1,000 = 4,000 KB";
    } else {
      ruleBanner.className = 'rule-banner banner-div';
      ruleBanner.innerHTML = '<span>Small → Large:</span> <span>DIVIDE (÷ 1,000)</span>';
      
      arrowsRow.innerHTML = `
        <div class="arrow-col">
          <span class="arrow-sym">←</span>
          <span class="op-tag op-div">÷ 1,000</span>
        </div>
        <div class="arrow-col">
          <span class="arrow-sym">←</span>
          <span class="op-tag op-div">÷ 1,000</span>
        </div>
        <div class="arrow-col">
          <span class="arrow-sym">←</span>
          <span class="op-tag op-div">÷ 1,000</span>
        </div>
        <div class="arrow-col">
          <span class="arrow-sym">←</span>
          <span class="op-tag op-div">÷ 1,000</span>
        </div>
        <div class="arrow-col">
          <span class="arrow-sym" style="color:#f59e0b;">←</span>
          <span class="op-tag op-special-div">÷ 8</span>
        </div>
      `;
      exLabel.textContent = "Small to Large Example:";
      exMath.textContent = "3,000 KB ÷ 1,000 = 3 MB";
    }
  }

  function setMode(mode) {
    currentMode = mode;
    document.getElementById('btnDown').classList.toggle('active', mode === 'down');
    document.getElementById('btnUp').classList.toggle('active', mode === 'up');
    renderArrows();
  }

  // Initial render
  renderArrows();
</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: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, monospace, sans-serif;
      background: #f8fafc;
      color: #1e2945;
      padding: 12px;
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    /* Preset selector */
    .presets {
      display: flex;
      gap: 6px;
      flex-wrap: wrap;
      align-items: center;
    }
    .preset-btn {
      background: #ffffff;
      border: 1px solid #cbd5e1;
      border-radius: 6px;
      padding: 4px 10px;
      font-size: 12px;
      font-weight: 600;
      color: #475569;
      cursor: pointer;
      font-family: inherit;
      transition: background 0.2s, border-color 0.2s, color 0.2s;
    }
    .preset-btn.active {
      background: #0284c7;
      border-color: #0284c7;
      color: #ffffff;
    }

    /* Main grid */
    .main-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
    }
    @media (max-width: 540px) {
      .main-grid {
        grid-template-columns: 1fr;
      }
    }

    /* Code Pane */
    .code-panel {
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 8px;
      padding: 10px 8px;
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
      font-size: 12px;
      line-height: 1.5;
    }
    .code-line {
      display: flex;
      padding: 1px 4px;
      border-radius: 4px;
      transition: background 0.2s;
    }
    .code-line.active {
      background: #e0f2fe;
      box-shadow: inset 3px 0 0 #0284c7;
    }
    .line-num {
      width: 20px;
      color: #94a3b8;
      user-select: none;
      font-size: 11px;
    }
    .kw { color: #2563eb; font-weight: 600; }
    .fn { color: #7c3aed; }
    .str { color: #16a34a; }
    .num { color: #d97706; }
    .op { color: #64748b; }

    /* Trace / Inspector Pane */
    .trace-panel {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .units-strip {
      display: flex;
      gap: 4px;
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 8px;
      padding: 6px;
      justify-content: space-between;
    }
    .unit-box {
      flex: 1;
      text-align: center;
      padding: 4px 2px;
      border-radius: 4px;
      font-size: 11px;
      font-weight: 700;
      background: #f1f5f9;
      color: #64748b;
      border: 1px solid transparent;
      transition: all 0.2s;
    }
    .unit-box.active {
      background: #0284c7;
      color: #ffffff;
      border-color: #0284c7;
    }

    .var-card {
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 8px;
      padding: 8px 10px;
      display: flex;
      flex-direction: column;
      gap: 6px;
    }
    .var-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 12px;
      font-family: monospace;
    }
    .var-label { color: #64748b; font-weight: 600; }
    .var-val {
      font-weight: 700;
      color: #1e2945;
      background: #f1f5f9;
      padding: 2px 6px;
      border-radius: 4px;
    }
    .var-val.highlight {
      background: #fef08a;
      color: #854d0e;
    }

    .output-box {
      background: #f0fdf4;
      border: 1px solid #bbf7d0;
      border-radius: 8px;
      padding: 8px 10px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 13px;
      font-weight: 700;
      color: #166534;
    }

    /* Stepper controls */
    .controls {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
    }
    .ctrl-btn {
      background: #ffffff;
      border: 1px solid #cbd5e1;
      border-radius: 6px;
      padding: 5px 12px;
      font-size: 13px;
      font-weight: 600;
      color: #1e2945;
      cursor: pointer;
      transition: background 0.15s;
    }
    .ctrl-btn:hover { background: #f1f5f9; }
    .ctrl-btn:disabled { opacity: 0.4; cursor: default; }
    .step-indicator {
      font-size: 12px;
      font-weight: 600;
      color: #64748b;
    }
  </style>
</head>
<body>

  
  <div class="presets">
    <button class="preset-btn active" onclick="loadInput(2500000)">2,500,000 B</button>
    <button class="preset-btn" onclick="loadInput(4000)">4,000 B</button>
    <button class="preset-btn" onclick="loadInput(850)">850 B</button>
    <button class="preset-btn" onclick="loadInput(5000000000)">5,000,000,000 B</button>
  </div>

  
  <div class="main-grid">
    
    <div class="code-panel">
      <div class="code-line" id="l1"><span class="line-num">1</span><span><span class="kw">function</span> <span class="fn">formatBytes</span>(bytes) {</span></div>
      <div class="code-line" id="l2"><span class="line-num">2</span><span>  <span class="kw">const</span> units = [<span class="str">'B'</span>,<span class="str">'KB'</span>,<span class="str">'MB'</span>,<span class="str">'GB'</span>,<span class="str">'TB'</span>];</span></div>
      <div class="code-line" id="l3"><span class="line-num">3</span><span>  <span class="kw">let</span> size = bytes;</span></div>
      <div class="code-line" id="l4"><span class="line-num">4</span><span>  <span class="kw">let</span> unitIndex = <span class="num">0</span>;</span></div>
      <div class="code-line" id="l5"><span class="line-num">5</span><span>  <span class="kw">while</span> (size &gt;= <span class="num">1000</span> &amp;&amp; idx &lt; <span class="num">4</span>) {</span></div>
      <div class="code-line" id="l6"><span class="line-num">6</span><span>    size /= <span class="num">1000</span>;</span></div>
      <div class="code-line" id="l7"><span class="line-num">7</span><span>    unitIndex++;</span></div>
      <div class="code-line" id="l8"><span class="line-num">8</span><span>  }</span></div>
      <div class="code-line" id="l9"><span class="line-num">9</span><span>  <span class="kw">return</span> <span class="str">`${size} ${units[idx]}`</span>;</span></div>
      <div class="code-line" id="l10"><span class="line-num">10</span><span>}</span></div>
    </div>

    
    <div class="trace-panel">
      
      <div class="units-strip">
        <div class="unit-box" id="u0">0: B</div>
        <div class="unit-box" id="u1">1: KB</div>
        <div class="unit-box" id="u2">2: MB</div>
        <div class="unit-box" id="u3">3: GB</div>
        <div class="unit-box" id="u4">4: TB</div>
      </div>

      
      <div class="var-card">
        <div class="var-row">
          <span class="var-label">size</span>
          <span class="var-val" id="v-size">2500000</span>
        </div>
        <div class="var-row">
          <span class="var-label">unitIndex</span>
          <span class="var-val" id="v-idx">0</span>
        </div>
        <div class="var-row">
          <span class="var-label">size &gt;= 1000</span>
          <span class="var-val" id="v-cond">true</span>
        </div>
      </div>

      
      <div class="output-box">
        <span>Result:</span>
        <span id="output-val">...</span>
      </div>
    </div>
  </div>

  
  <div class="controls">
    <button class="ctrl-btn" id="prevBtn" onclick="stepPrev()">◀ Step</button>
    <div class="step-indicator" id="stepTxt">Step 1 / 4</div>
    <button class="ctrl-btn" id="nextBtn" onclick="stepNext()">Step ▶</button>
  </div>

  <script>
    const UNITS = ['B', 'KB', 'MB', 'GB', 'TB'];
    let steps = [];
    let currentStep = 0;

    function buildSteps(bytes) {
      const trace = [];
      let size = bytes;
      let unitIndex = 0;

      // Init
      trace.push({
        line: 'l3',
        size: size,
        unitIndex: 0,
        cond: size >= 1000,
        output: '...'
      });

      // Loop iterations
      while (size >= 1000 && unitIndex < UNITS.length - 1) {
        size /= 1000;
        unitIndex++;
        trace.push({
          line: 'l6',
          size: size,
          unitIndex: unitIndex,
          cond: size >= 1000 && unitIndex < UNITS.length - 1,
          output: '...'
        });
      }

      // Final return
      trace.push({
        line: 'l9',
        size: size,
        unitIndex: unitIndex,
        cond: false,
        output: `${size} ${UNITS[unitIndex]}`
      });

      return trace;
    }

    function renderStep(index) {
      currentStep = index;
      const s = steps[index];

      // Highlight code line
      for (let i = 1; i <= 10; i++) {
        const el = document.getElementById('l' + i);
        if (el) el.classList.remove('active');
      }
      const activeLine = document.getElementById(s.line);
      if (activeLine) activeLine.classList.add('active');

      // Highlight units array
      for (let i = 0; i < 5; i++) {
        const u = document.getElementById('u' + i);
        if (i === s.unitIndex) {
          u.classList.add('active');
        } else {
          u.classList.remove('active');
        }
      }

      // Update Variables
      document.getElementById('v-size').textContent = s.size;
      document.getElementById('v-idx').textContent = `${s.unitIndex} (${UNITS[s.unitIndex]})`;
      
      const condEl = document.getElementById('v-cond');
      condEl.textContent = s.cond ? 'true' : 'false';
      condEl.style.color = s.cond ? '#16a34a' : '#dc2626';

      // Update Output
      document.getElementById('output-val').textContent = s.output;

      // Controls
      document.getElementById('stepTxt').textContent = `Step ${index + 1} / ${steps.length}`;
      document.getElementById('prevBtn').disabled = index === 0;
      document.getElementById('nextBtn').disabled = index === steps.length - 1;
    }

    function loadInput(val) {
      document.querySelectorAll('.preset-btn').forEach(b => {
        b.classList.toggle('active', b.textContent.replace(/,/g, '').startsWith(val.toString()));
      });
      steps = buildSteps(val);
      renderStep(0);
    }

    function stepNext() {
      if (currentStep < steps.length - 1) {
        renderStep(currentStep + 1);
      }
    }

    function stepPrev() {
      if (currentStep > 0) {
        renderStep(currentStep - 1);
      }
    }

    // Initial load
    loadInput(2500000);
  </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 {
      background-color: #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;
      min-height: 100%;
      padding: 16px 8px;
    }

    .diagram-grid {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      justify-content: center;
      align-items: stretch;
      width: 100%;
      max-width: 680px;
    }

    .unit-card {
      background: #ffffff;
      border: 1px solid #e6e6e6;
      border-radius: 12px;
      padding: 14px 10px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      flex: 1 1 180px;
      min-width: 140px;
      box-shadow: 0 2px 6px rgba(0,0,0,0.03);
    }

    .header {
      text-align: center;
      margin-bottom: 12px;
    }

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

    .subtitle {
      font-size: 13px;
      color: #6b7280;
      font-weight: 500;
      margin-top: 2px;
    }

    .switches-grid {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 6px;
      padding: 8px;
      background: #f8f9fa;
      border-radius: 8px;
      border: 1px dashed #e6e6e6;
      margin: 8px 0;
      width: 100%;
      max-width: 190px;
    }

    .switch-btn {
      width: 34px;
      height: 48px;
      background: #ffffff;
      border: 1.5px solid #d1d5db;
      border-radius: 6px;
      cursor: pointer;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      padding: 4px 2px;
      transition: border-color 0.2s, background-color 0.2s, box-shadow 0.2s;
      user-select: none;
      -webkit-tap-highlight-color: transparent;
    }

    .switch-btn.on {
      border-color: #22b7ff;
      background: #f0f9ff;
      box-shadow: 0 0 0 1px #22b7ff inset;
    }

    .indicator {
      width: 16px;
      height: 16px;
      border-radius: 4px;
      background: #e5e7eb;
      transition: transform 0.2s ease, background-color 0.2s ease;
    }

    .switch-btn.on .indicator {
      background: #22b7ff;
      transform: translateY(0);
    }

    .switch-btn.off .indicator {
      transform: translateY(18px);
      background: #9ca3af;
    }

    .val-label {
      font-size: 14px;
      font-weight: 700;
      font-family: ui-monospace, monospace;
      color: #9ca3af;
      line-height: 1;
    }

    .switch-btn.on .val-label {
      color: #0284c7;
    }

    .footer-badge {
      font-size: 13px;
      font-weight: 600;
      color: #0284c7;
      background: #e0f2fe;
      border-radius: 6px;
      padding: 4px 8px;
      margin-top: 8px;
      text-align: center;
    }

    .char-preview {
      font-family: ui-monospace, monospace;
      font-weight: 700;
      font-size: 15px;
    }
  </style>
</head>
<body>

  <div class="diagram-grid">
    
    <div class="unit-card">
      <div class="header">
        <div class="title">1 Bit</div>
        <div class="subtitle">0 or 1</div>
      </div>
      <div class="switches-grid" style="max-width: 60px;">
        <button class="switch-btn on" onclick="toggleBit(this)" aria-label="Toggle bit">
          <div class="indicator"></div>
          <div class="val-label">1</div>
        </button>
      </div>
      <div class="footer-badge">Single State</div>
    </div>

    
    <div class="unit-card">
      <div class="header">
        <div class="title">1 Nibble</div>
        <div class="subtitle">4 Bits</div>
      </div>
      <div class="switches-grid" style="max-width: 100px;">
        <button class="switch-btn on" onclick="toggleBit(this)" aria-label="Toggle bit">
          <div class="indicator"></div>
          <div class="val-label">1</div>
        </button>
        <button class="switch-btn off" onclick="toggleBit(this)" aria-label="Toggle bit">
          <div class="indicator"></div>
          <div class="val-label">0</div>
        </button>
        <button class="switch-btn on" onclick="toggleBit(this)" aria-label="Toggle bit">
          <div class="indicator"></div>
          <div class="val-label">1</div>
        </button>
        <button class="switch-btn off" onclick="toggleBit(this)" aria-label="Toggle bit">
          <div class="indicator"></div>
          <div class="val-label">0</div>
        </button>
      </div>
      <div class="footer-badge">Half Byte</div>
    </div>

    
    <div class="unit-card">
      <div class="header">
        <div class="title">1 Byte</div>
        <div class="subtitle">8 Bits</div>
      </div>
      <div class="switches-grid" id="byteGroup">
        
        <button class="switch-btn off" onclick="toggleByteBit(this)"><div class="indicator"></div><div class="val-label">0</div></button>
        <button class="switch-btn on" onclick="toggleByteBit(this)"><div class="indicator"></div><div class="val-label">1</div></button>
        <button class="switch-btn off" onclick="toggleByteBit(this)"><div class="indicator"></div><div class="val-label">0</div></button>
        <button class="switch-btn off" onclick="toggleByteBit(this)"><div class="indicator"></div><div class="val-label">0</div></button>
        <button class="switch-btn off" onclick="toggleByteBit(this)"><div class="indicator"></div><div class="val-label">0</div></button>
        <button class="switch-btn off" onclick="toggleByteBit(this)"><div class="indicator"></div><div class="val-label">0</div></button>
        <button class="switch-btn off" onclick="toggleByteBit(this)"><div class="indicator"></div><div class="val-label">0</div></button>
        <button class="switch-btn on" onclick="toggleByteBit(this)"><div class="indicator"></div><div class="val-label">1</div></button>
      </div>
      <div class="footer-badge">Stores: <span class="char-preview" id="charDisplay">'A'</span></div>
    </div>
  </div>

  <script>
    function toggleBit(btn) {
      const isOn = btn.classList.toggle('on');
      btn.classList.toggle('off', !isOn);
      btn.querySelector('.val-label').textContent = isOn ? '1' : '0';
    }

    function toggleByteBit(btn) {
      toggleBit(btn);
      updateByteChar();
    }

    function updateByteChar() {
      const btns = document.querySelectorAll('#byteGroup .switch-btn');
      let code = 0;
      btns.forEach((b) => {
        code = (code << 1) | (b.classList.contains('on') ? 1 : 0);
      });

      const display = document.getElementById('charDisplay');
      if (code >= 32 && code <= 126) {
        display.textContent = `'${String.fromCharCode(code)}'`;
      } else {
        display.textContent = `${code}`;
      }
    }
  </script>
</body>
</html>

CS-20

Aligned learning resources

Related diagrams