<!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>ASCII 'C' to 8-Bit Binary</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

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

    .section-title {
      font-size: 11px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.8px;
      color: #64748b;
      margin-bottom: 4px;
    }

    /* Step 1: Denary Row */
    .step-box {
      width: 100%;
      max-width: 540px;
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      border-radius: 10px;
      padding: 8px 12px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
    }

    .char-badge {
      background: #1e2945;
      color: #ffffff;
      font-weight: 800;
      font-size: 20px;
      width: 36px;
      height: 36px;
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }

    .math-flow {
      display: flex;
      align-items: center;
      gap: 6px;
      font-size: 15px;
      font-weight: 600;
      color: #1e2945;
      flex-wrap: wrap;
    }

    .math-token {
      background: #ffffff;
      border: 1px solid #cbd5e1;
      padding: 3px 8px;
      border-radius: 6px;
    }

    .denary-result {
      background: #e0f2fe;
      border: 1.5px solid #0284c7;
      color: #0369a1;
      font-weight: 800;
      font-size: 16px;
      padding: 3px 10px;
      border-radius: 6px;
    }

    /* Step 2: Binary Grid */
    .grid-container {
      width: 100%;
      max-width: 540px;
      display: grid;
      grid-template-columns: repeat(8, 1fr);
      gap: 4px;
    }

    .bit-col {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 4px;
      padding: 6px 2px;
      border-radius: 8px;
      background: #f8fafc;
      border: 1.5px solid rgba(0,0,0,0);
      cursor: pointer;
      transition: background 0.2s, border-color 0.2s, box-shadow 0.2s;
    }

    .bit-col.active-step {
      background: #eff6ff;
      border-color: #3b82f6;
      box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
    }

    .place-val {
      font-size: 13px;
      font-weight: 700;
      color: #475569;
    }

    .bit-pill {
      width: 32px;
      height: 32px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 16px;
      font-weight: 800;
      transition: all 0.25s ease;
    }

    .bit-pill.zero {
      background: #e2e8f0;
      color: #64748b;
    }

    .bit-pill.one {
      background: #10b981;
      color: #ffffff;
      box-shadow: 0 2px 6px rgba(16, 185, 129, 0.35);
    }

    .bit-rem {
      font-size: 10px;
      font-weight: 600;
      color: #059669;
      height: 14px;
      line-height: 14px;
      text-align: center;
    }

    .bit-rem.empty {
      color: transparent;
    }

    /* Output Box */
    .result-card {
      width: 100%;
      max-width: 540px;
      background: #f0fdf4;
      border: 2px solid #10b981;
      border-radius: 10px;
      padding: 8px 12px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
    }

    .result-label {
      font-size: 12px;
      font-weight: 700;
      color: #065f46;
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }

    .byte-display {
      display: flex;
      gap: 3px;
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
      font-size: 18px;
      font-weight: 800;
      letter-spacing: 1px;
    }

    .byte-bit {
      display: inline-block;
      width: 22px;
      height: 26px;
      line-height: 26px;
      text-align: center;
      border-radius: 4px;
    }

    .byte-bit.b1 {
      background: #10b981;
      color: #ffffff;
    }

    .byte-bit.b0 {
      background: #d1fae5;
      color: #047857;
    }

    /* Controls & Stepper */
    .controls {
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .ctrl-btn {
      background: #f1f5f9;
      border: 1px solid #cbd5e1;
      color: #1e2945;
      font-size: 12px;
      font-weight: 600;
      padding: 4px 10px;
      border-radius: 6px;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 4px;
      user-select: none;
    }

    .ctrl-btn:hover {
      background: #e2e8f0;
    }

    .ctrl-btn:active {
      background: #cbd5e1;
    }

    .dots {
      display: flex;
      gap: 4px;
    }

    .dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: #cbd5e1;
      cursor: pointer;
      transition: background 0.2s;
    }

    .dot.active {
      background: #10b981;
    }

    @media (max-width: 380px) {
      .place-val { font-size: 11px; }
      .bit-pill { width: 28px; height: 28px; font-size: 14px; }
      .bit-rem { font-size: 9px; }
      .byte-display { font-size: 15px; }
      .byte-bit { width: 18px; height: 22px; line-height: 22px; }
      .char-badge { width: 30px; height: 30px; font-size: 16px; }
      .math-flow { font-size: 13px; }
    }
  </style>
</head>
<body>

  
  <div class="step-box">
    <div style="display:flex; align-items:center; gap:8px;">
      <div class="char-badge">'C'</div>
      <div class="math-flow">
        <span class="math-token">'A' = 65</span>
        <span>+ 2 →</span>
        <span class="denary-result">67</span>
      </div>
    </div>
    <div class="section-title" style="margin:0;">Step 1: Denary</div>
  </div>

  
  <div class="grid-container" id="grid">
    
    <div class="bit-col" onclick="setStep(0)">
      <span class="place-val">128</span>
      <div class="bit-pill zero" id="pill-0">0</div>
      <span class="bit-rem empty" id="rem-0">—</span>
    </div>
    
    <div class="bit-col" onclick="setStep(1)">
      <span class="place-val">64</span>
      <div class="bit-pill one" id="pill-1">1</div>
      <span class="bit-rem" id="rem-1">rem 3</span>
    </div>
    
    <div class="bit-col" onclick="setStep(2)">
      <span class="place-val">32</span>
      <div class="bit-pill zero" id="pill-2">0</div>
      <span class="bit-rem empty" id="rem-2">—</span>
    </div>
    
    <div class="bit-col" onclick="setStep(3)">
      <span class="place-val">16</span>
      <div class="bit-pill zero" id="pill-3">0</div>
      <span class="bit-rem empty" id="rem-3">—</span>
    </div>
    
    <div class="bit-col" onclick="setStep(4)">
      <span class="place-val">8</span>
      <div class="bit-pill zero" id="pill-4">0</div>
      <span class="bit-rem empty" id="rem-4">—</span>
    </div>
    
    <div class="bit-col" onclick="setStep(5)">
      <span class="place-val">4</span>
      <div class="bit-pill zero" id="pill-5">0</div>
      <span class="bit-rem empty" id="rem-5">—</span>
    </div>
    
    <div class="bit-col" onclick="setStep(6)">
      <span class="place-val">2</span>
      <div class="bit-pill one" id="pill-6">1</div>
      <span class="bit-rem" id="rem-6">rem 1</span>
    </div>
    
    <div class="bit-col" onclick="setStep(7)">
      <span class="place-val">1</span>
      <div class="bit-pill one" id="pill-7">1</div>
      <span class="bit-rem" id="rem-7">rem 0</span>
    </div>
  </div>

  
  <div class="result-card">
    <span class="result-label">8-Bit Byte:</span>
    <div class="byte-display">
      <span class="byte-bit b0">0</span>
      <span class="byte-bit b1">1</span>
      <span class="byte-bit b0">0</span>
      <span class="byte-bit b0">0</span>
      <span class="byte-bit b0">0</span>
      <span class="byte-bit b0">0</span>
      <span class="byte-bit b1">1</span>
      <span class="byte-bit b1">1</span>
    </div>
  </div>

  
  <div class="controls">
    <button class="ctrl-btn" onclick="prevStep()">◀</button>
    <button class="ctrl-btn" id="playBtn" onclick="togglePlay()">⏸ Pause</button>
    <button class="ctrl-btn" onclick="nextStep()">▶</button>
    <div class="dots" id="dots">
      <div class="dot" onclick="setStep(0)"></div>
      <div class="dot" onclick="setStep(1)"></div>
      <div class="dot" onclick="setStep(2)"></div>
      <div class="dot" onclick="setStep(3)"></div>
      <div class="dot" onclick="setStep(4)"></div>
      <div class="dot" onclick="setStep(5)"></div>
      <div class="dot" onclick="setStep(6)"></div>
      <div class="dot" onclick="setStep(7)"></div>
    </div>
  </div>

  <script>
    let currentStep = 0;
    let isPlaying = true;
    let timer = null;

    const cols = document.querySelectorAll('.bit-col');
    const dots = document.querySelectorAll('.dot');

    function updateView() {
      cols.forEach((col, idx) => {
        if (idx === currentStep) {
          col.classList.add('active-step');
        } else {
          col.classList.remove('active-step');
        }
      });

      dots.forEach((dot, idx) => {
        if (idx === currentStep) {
          dot.classList.add('active');
        } else {
          dot.classList.remove('active');
        }
      });
    }

    function setStep(idx) {
      currentStep = (idx + 8) % 8;
      updateView();
    }

    function nextStep() {
      setStep(currentStep + 1);
    }

    function prevStep() {
      setStep(currentStep - 1);
    }

    function togglePlay() {
      isPlaying = !isPlaying;
      document.getElementById('playBtn').textContent = isPlaying ? '⏸ Pause' : '▶ Play';
      if (isPlaying) {
        startTimer();
      } else {
        clearInterval(timer);
      }
    }

    function startTimer() {
      clearInterval(timer);
      timer = setInterval(() => {
        nextStep();
      }, 3000);
    }

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

Representing Text with ASCII

<!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: center;
      min-height: 100%;
      padding: 12px;
      gap: 12px;
    }

    .stepper {
      display: flex;
      gap: 6px;
      align-items: center;
    }
    .step-btn {
      padding: 4px 10px;
      font-size: 12px;
      font-weight: 600;
      border: 1px solid #e2e8f0;
      background: #f8fafc;
      color: #64748b;
      border-radius: 16px;
      cursor: pointer;
      transition: all 0.2s ease;
    }
    .step-btn.active {
      background: #0284c7;
      color: #ffffff;
      border-color: #0284c7;
    }

    .columns {
      display: flex;
      gap: 10px;
      width: 100%;
      max-width: 580px;
      justify-content: center;
    }

    .col-card {
      flex: 1;
      min-width: 0;
      background: #f8fafc;
      border: 2px solid #e2e8f0;
      border-radius: 12px;
      padding: 10px 6px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 8px;
      transition: border-color 0.25s ease, box-shadow 0.25s ease, opacity 0.25s ease;
      opacity: 0.45;
    }
    .col-card.active {
      opacity: 1;
      border-color: #0284c7;
      box-shadow: 0 4px 12px rgba(2, 132, 199, 0.12);
      background: #ffffff;
    }

    .col-tag {
      font-size: 11px;
      font-weight: 700;
      color: #64748b;
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }
    .col-card.active .col-tag {
      color: #0284c7;
    }

    .bits {
      display: flex;
      gap: 2px;
      font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
      font-size: 11px;
      font-weight: 700;
    }
    .bit {
      width: 12px;
      height: 18px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 3px;
      background: #e2e8f0;
      color: #94a3b8;
    }
    .bit.on {
      background: #0284c7;
      color: #ffffff;
    }

    .arrow {
      color: #94a3b8;
      font-size: 11px;
      line-height: 1;
    }

    .calc-box {
      font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
      font-size: 11px;
      color: #475569;
      text-align: center;
      background: #f1f5f9;
      padding: 4px 6px;
      border-radius: 6px;
      width: 100%;
      white-space: nowrap;
    }
    .col-card.active .calc-box {
      background: #e0f2fe;
      color: #0369a1;
      font-weight: 600;
    }

    .char-badge {
      width: 42px;
      height: 42px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 8px;
      background: #e2e8f0;
      color: #64748b;
      font-size: 22px;
      font-weight: 800;
      transition: all 0.2s ease;
    }
    .col-card.active .char-badge {
      background: #0284c7;
      color: #ffffff;
    }

    .summary-box {
      width: 100%;
      max-width: 580px;
      background: #f0fdf4;
      border: 2px solid #86efac;
      border-radius: 12px;
      padding: 8px 16px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
      transition: all 0.3s ease;
    }
    .summary-text {
      font-size: 20px;
      font-weight: 800;
      letter-spacing: 4px;
      color: #15803d;
    }
    .cat-icon {
      font-size: 26px;
      line-height: 1;
    }

    @media (max-width: 400px) {
      .bits { gap: 1px; }
      .bit { width: 10px; height: 16px; font-size: 9px; }
      .calc-box { font-size: 9px; }
      .char-badge { width: 34px; height: 34px; font-size: 18px; }
      .summary-text { font-size: 17px; }
    }
  </style>
</head>
<body>

  <div class="stepper">
    <button class="step-btn" data-step="0">Byte 1</button>
    <button class="step-btn" data-step="1">Byte 2</button>
    <button class="step-btn" data-step="2">Byte 3</button>
    <button class="step-btn active" data-step="3">All</button>
  </div>

  <div class="columns">
    
    <div class="col-card active" id="card-0">
      <span class="col-tag">Byte 1</span>
      <div class="bits">
        <span class="bit">0</span>
        <span class="bit on">1</span>
        <span class="bit">0</span>
        <span class="bit">0</span>
        <span class="bit">0</span>
        <span class="bit">0</span>
        <span class="bit on">1</span>
        <span class="bit on">1</span>
      </div>
      <span class="arrow">↓</span>
      <div class="calc-box">64+2+1 = 67</div>
      <span class="arrow">↓</span>
      <div class="char-badge">C</div>
    </div>

    
    <div class="col-card active" id="card-1">
      <span class="col-tag">Byte 2</span>
      <div class="bits">
        <span class="bit">0</span>
        <span class="bit on">1</span>
        <span class="bit">0</span>
        <span class="bit">0</span>
        <span class="bit">0</span>
        <span class="bit">0</span>
        <span class="bit">0</span>
        <span class="bit on">1</span>
      </div>
      <span class="arrow">↓</span>
      <div class="calc-box">64+1 = 65</div>
      <span class="arrow">↓</span>
      <div class="char-badge">A</div>
    </div>

    
    <div class="col-card active" id="card-2">
      <span class="col-tag">Byte 3</span>
      <div class="bits">
        <span class="bit">0</span>
        <span class="bit on">1</span>
        <span class="bit">0</span>
        <span class="bit on">1</span>
        <span class="bit">0</span>
        <span class="bit on">1</span>
        <span class="bit">0</span>
        <span class="bit">0</span>
      </div>
      <span class="arrow">↓</span>
      <div class="calc-box">64+16+4 = 84</div>
      <span class="arrow">↓</span>
      <div class="char-badge">T</div>
    </div>
  </div>

  <div class="summary-box" id="summary">
    <span class="cat-icon">🐱</span>
    <span class="summary-text">CAT</span>
  </div>

  <script>
    const buttons = document.querySelectorAll('.step-btn');
    const cards = [
      document.getElementById('card-0'),
      document.getElementById('card-1'),
      document.getElementById('card-2')
    ];
    const summary = document.getElementById('summary');

    function showStep(idx) {
      buttons.forEach((btn, i) => btn.classList.toggle('active', i === idx));
      if (idx === 3) {
        cards.forEach(c => c.classList.add('active'));
        summary.style.opacity = '1';
      } else {
        cards.forEach((c, i) => c.classList.toggle('active', i === idx));
        summary.style.opacity = '0.4';
      }
    }

    buttons.forEach((btn, idx) => {
      btn.addEventListener('click', () => showStep(idx));
    });

    cards.forEach((card, idx) => {
      card.addEventListener('click', () => showStep(idx));
      card.style.cursor = 'pointer';
    });
  </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="aspect-ratio" content="4:3">
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    }

    body {
      background: transparent;
      color: #1e2945;
      padding: 12px;
      display: flex;
      flex-direction: column;
      gap: 12px;
      min-height: 100%;
      justify-content: center;
    }

    /* Preset selector bar */
    .controls {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      font-family: system-ui, -apple-system, sans-serif;
      font-size: 13px;
      color: #64748b;
      font-weight: 500;
    }

    .preset-btn {
      appearance: none;
      border: 1px solid #cbd5e1;
      background: #ffffff;
      color: #1e2945;
      font-family: inherit;
      font-weight: 600;
      font-size: 13px;
      padding: 4px 10px;
      border-radius: 6px;
      cursor: pointer;
      transition: all 0.2s ease;
    }

    .preset-btn:hover {
      background: #f1f5f9;
      border-color: #94a3b8;
    }

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

    /* Code cards container */
    .cards-grid {
      display: flex;
      flex-direction: column;
      gap: 10px;
      width: 100%;
    }

    .code-card {
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      border-radius: 8px;
      padding: 10px 14px;
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .card-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-family: system-ui, -apple-system, sans-serif;
      font-size: 11px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      color: #64748b;
    }

    .direction-badge {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      background: #e2e8f0;
      color: #334155;
      padding: 2px 7px;
      border-radius: 4px;
      font-size: 11px;
    }

    .code-line {
      font-size: 13.5px;
      line-height: 1.4;
      white-space: pre-wrap;
      word-break: break-word;
    }

    /* Syntax Highlighting */
    .kw { color: #2563eb; font-weight: 600; } /* Keyword: Dark Blue */
    .str { color: #16a34a; font-weight: 600; } /* String: Green */
    .num { color: #9333ea; font-weight: 600; } /* Number: Purple */
    .fn { color: #0284c7; } /* Method */
    .obj { color: #0d9488; } /* Object */
    .op { color: #64748b; } /* Operator */

    /* Output Callout */
    .output-row {
      display: flex;
      align-items: center;
      gap: 8px;
      padding-top: 6px;
      border-top: 1px dashed #e2e8f0;
      font-size: 12px;
      color: #64748b;
      font-family: system-ui, -apple-system, sans-serif;
    }

    .output-badge {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      background: #ffffff;
      border: 1px solid #cbd5e1;
      padding: 3px 8px;
      border-radius: 6px;
      font-family: ui-monospace, SFMono-Regular, monospace;
      font-size: 13px;
      font-weight: 600;
      color: #1e2945;
    }

    .val-highlight {
      transition: all 0.2s ease;
    }

    .binary-tag {
      font-size: 11px;
      color: #64748b;
      font-family: ui-monospace, SFMono-Regular, monospace;
    }
  </style>
</head>
<body>

  <div class="controls">
    <span>Try:</span>
    <button class="preset-btn active" onclick="selectPreset('A', 65, 'B', 66, this)">'A' / 66</button>
    <button class="preset-btn" onclick="selectPreset('a', 97, 'b', 98, this)">'a' / 98</button>
    <button class="preset-btn" onclick="selectPreset('0', 48, '1', 49, this)">'0' / 49</button>
    <button class="preset-btn" onclick="selectPreset('!', 33, '?', 63, this)">'!' / 63</button>
  </div>

  <div class="cards-grid">
    
    <div class="code-card">
      <div class="card-header">
        <span>Example 1</span>
        <span class="direction-badge">Char → Code</span>
      </div>
      <div class="code-line"><span class="kw">const</span> code <span class="op">=</span> <span class="str">'<span id="c1-char" class="val-highlight">A</span>'</span>.<span class="fn">charCodeAt</span>(<span class="num">0</span>);</div>
      <div class="output-row">
        <span>Returns:</span>
        <div class="output-badge">
          <span class="num" id="c1-out">65</span>
          <span class="binary-tag" id="c1-bin">(01000001)</span>
        </div>
      </div>
    </div>

    
    <div class="code-card">
      <div class="card-header">
        <span>Example 2</span>
        <span class="direction-badge">Code → Char</span>
      </div>
      <div class="code-line"><span class="kw">const</span> char <span class="op">=</span> <span class="obj">String</span>.<span class="fn">fromCharCode</span>(<span class="num" id="c2-code" class="val-highlight">66</span>);</div>
      <div class="output-row">
        <span>Returns:</span>
        <div class="output-badge">
          <span class="str">'<span id="c2-out">B</span>'</span>
          <span class="binary-tag" id="c2-bin">(01000010)</span>
        </div>
      </div>
    </div>
  </div>

  <script>
    function toBin(num) {
      return num.toString(2).padStart(8, '0');
    }

    function selectPreset(char1, code1, char2, code2, btn) {
      document.querySelectorAll('.preset-btn').forEach(b => b.classList.remove('active'));
      if (btn) btn.classList.add('active');

      // Update Example 1
      document.getElementById('c1-char').textContent = char1;
      document.getElementById('c1-out').textContent = code1;
      document.getElementById('c1-bin').textContent = '(' + toBin(code1) + ')';

      // Update Example 2
      document.getElementById('c2-code').textContent = code2;
      document.getElementById('c2-out').textContent = char2;
      document.getElementById('c2-bin').textContent = '(' + toBin(code2) + ')';
    }
  </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: #f8fafc;
      color: #1e2945;
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      padding: 12px;
      display: flex;
      flex-direction: column;
      gap: 8px;
      user-select: none;
    }

    .ascii-card {
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 8px;
      padding: 8px 12px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      cursor: pointer;
      transition: box-shadow 0.2s ease, background-color 0.2s ease;
    }

    .ascii-card:hover, .ascii-card.selected {
      background: #ffffff;
      box-shadow: 0 2px 8px rgba(30, 41, 69, 0.08);
    }

    .ascii-card.selected {
      outline: 2px solid #22b7ff;
    }

    .left-group {
      display: flex;
      align-items: center;
      gap: 8px;
      min-width: 120px;
    }

    .range-tag {
      font-size: 13px;
      font-weight: 700;
      padding: 3px 8px;
      border-radius: 6px;
      white-space: nowrap;
    }

    .title-tag {
      font-size: 14px;
      font-weight: 600;
      color: #1e2945;
      white-space: nowrap;
    }

    .badges-group {
      display: flex;
      align-items: center;
      gap: 6px;
      flex-wrap: wrap;
      justify-content: flex-end;
    }

    .badge {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      padding: 3px 7px;
      border-radius: 6px;
      font-size: 13px;
      font-weight: 600;
      border: 1px solid transparent;
    }

    .badge .char {
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
      font-weight: 700;
    }

    .badge .code {
      font-size: 11px;
      opacity: 0.8;
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    }

    /* Soft Pastel Range Colors */
    .c-control .range-tag { background: #fee2e2; color: #991b1b; }
    .c-control .badge-anchor { background: #fef2f2; color: #991b1b; border-color: #fecaca; }

    .c-digits .range-tag { background: #fef3c7; color: #92400e; }
    .c-digits .badge-anchor { background: #fffbeb; color: #b45309; border-color: #fde68a; }

    .c-upper .range-tag { background: #dbeafe; color: #1e40af; }
    .c-upper .badge-anchor { background: #eff6ff; color: #1d4ed8; border-color: #bfdbfe; }

    .c-lower .range-tag { background: #dcfce7; color: #166534; }
    .c-lower .badge-anchor { background: #f0fdf4; color: #15803d; border-color: #bbf7d0; }

    /* Special space anchor badge */
    .badge-space { background: #f1f5f9; color: #475569; border-color: #cbd5e1; }

    /* Detail / Binary Bar */
    .inspector {
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 8px;
      padding: 10px 14px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      min-height: 48px;
    }

    .inspect-label {
      font-size: 13px;
      font-weight: 600;
      color: #64748b;
    }

    .inspect-val {
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
      font-size: 14px;
      font-weight: 700;
      color: #1e2945;
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .bin-bits {
      letter-spacing: 1px;
      color: #0284c7;
      background: #f0f9ff;
      padding: 2px 6px;
      border-radius: 4px;
      border: 1px solid #bae6fd;
    }

    @media (max-width: 420px) {
      body { padding: 8px; gap: 6px; }
      .ascii-card { padding: 6px 8px; }
      .left-group { min-width: 100px; gap: 6px; }
      .range-tag { font-size: 12px; padding: 2px 6px; }
      .title-tag { font-size: 13px; }
      .badge { font-size: 12px; padding: 2px 5px; }
      .inspector { padding: 8px 10px; }
    }
  </style>
</head>
<body>

  
  <div class="ascii-card c-control" data-char="CR" data-dec="13" data-bin="00001101">
    <div class="left-group">
      <span class="range-tag">0 – 31</span>
      <span class="title-tag">Control</span>
    </div>
    <div class="badges-group">
      <span class="badge badge-anchor"><span class="char">ESC</span><span class="code">27</span></span>
      <span class="badge badge-anchor"><span class="char">Enter</span><span class="code">13</span></span>
    </div>
  </div>

  
  <div class="ascii-card" style="padding: 6px 12px; background: #f8fafc;" data-char="Space" data-dec="32" data-bin="00100000">
    <div class="left-group">
      <span class="range-tag" style="background:#e2e8f0; color:#334155;">32</span>
      <span class="title-tag" style="font-size: 13px; color: #475569;">Space</span>
    </div>
    <div class="badges-group">
      <span class="badge badge-space"><span class="char">' '</span><span class="code">32</span></span>
    </div>
  </div>

  
  <div class="ascii-card c-digits" data-char="0" data-dec="48" data-bin="00110000">
    <div class="left-group">
      <span class="range-tag">48 – 57</span>
      <span class="title-tag">Digits</span>
    </div>
    <div class="badges-group">
      <span class="badge badge-anchor"><span class="char">'0'</span><span class="code">48</span></span>
      <span class="badge badge-anchor"><span class="char">'9'</span><span class="code">57</span></span>
    </div>
  </div>

  
  <div class="ascii-card c-upper selected" data-char="A" data-dec="65" data-bin="01000001">
    <div class="left-group">
      <span class="range-tag">65 – 90</span>
      <span class="title-tag">Uppercase</span>
    </div>
    <div class="badges-group">
      <span class="badge badge-anchor"><span class="char">'A'</span><span class="code">65</span></span>
      <span class="badge badge-anchor"><span class="char">'B'</span><span class="code">66</span></span>
      <span class="badge badge-anchor"><span class="char">'Z'</span><span class="code">90</span></span>
    </div>
  </div>

  
  <div class="ascii-card c-lower" data-char="a" data-dec="97" data-bin="01100001">
    <div class="left-group">
      <span class="range-tag">97 – 122</span>
      <span class="title-tag">Lowercase</span>
    </div>
    <div class="badges-group">
      <span class="badge badge-anchor"><span class="char">'a'</span><span class="code">97</span></span>
      <span class="badge badge-anchor"><span class="char">'b'</span><span class="code">98</span></span>
      <span class="badge badge-anchor"><span class="char">'z'</span><span class="code">122</span></span>
    </div>
  </div>

  
  <div class="inspector">
    <span class="inspect-label">Anchor Sample:</span>
    <div class="inspect-val">
      <span id="sampleName">'A' (65)</span>
      <span class="bin-bits" id="sampleBin">01000001</span>
    </div>
  </div>

  <script>
    const cards = document.querySelectorAll('.ascii-card');
    const sampleName = document.getElementById('sampleName');
    const sampleBin = document.getElementById('sampleBin');

    cards.forEach(card => {
      card.addEventListener('click', () => {
        cards.forEach(c => c.classList.remove('selected'));
        card.classList.add('selected');

        const ch = card.getAttribute('data-char');
        const dec = card.getAttribute('data-dec');
        const bin = card.getAttribute('data-bin');

        const displayChar = (ch === 'Space' || ch === 'CR') ? ch : `'${ch}'`;
        sampleName.textContent = `${displayChar} (${dec})`;
        sampleBin.textContent = bin;
      });
    });
  </script>
</body>
</html>

CS-7

Aligned learning resources

Related diagrams