uni/slides/223015b-2026/assets/demos/byte-nibble-hex.html

<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Byte → Nibble → Hex</title>
<style>
  :root {
    --hl: #d63384;
    --dark: #1a1a2e;
    --muted: #6b7280;
    --border: #cbd5e1;
    --bg-soft: #f8fafc;
  }
  html, body { margin: 0; padding: 0; background: #fff; font-family: system-ui, -apple-system, sans-serif; color: var(--dark); }
  body { padding: 28px 32px; }
  h1 { text-align: center; margin: 0 0 4px; font-size: 1.55rem; }
  .sub { text-align: center; color: var(--muted); margin-bottom: 22px; font-size: 0.95rem; }

  .stage { display: flex; flex-direction: column; align-items: center; gap: 6px; }

  .level { display: flex; flex-direction: column; align-items: center; }
  .label { font-size: 0.78rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 6px; font-weight: 600; }

  /* Level 1: whole byte */
  .byte {
    display: flex;
    gap: 4px;
    padding: 8px 14px;
    border: 2px solid var(--dark);
    border-radius: 8px;
    background: var(--bg-soft);
  }
  .byte .bit { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 1.3rem; font-weight: 700; padding: 4px 8px; min-width: 22px; text-align: center; }
  .byte .sep { width: 2px; background: var(--hl); margin: 2px 6px; border-radius: 2px; }

  /* Split arrows */
  .split { display: flex; justify-content: space-between; width: 360px; margin: 2px 0; }
  .split .arrow {
    width: 0; height: 0;
    border-left: 9px solid transparent;
    border-right: 9px solid transparent;
    border-top: 12px solid var(--hl);
  }

  /* Level 2: two nibbles */
  .nibbles { display: flex; gap: 80px; }
  .nibble {
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    padding: 10px 14px;
    border: 2px solid var(--hl);
    border-radius: 8px;
    background: #fff;
  }
  .nibble .bits { display: flex; gap: 4px; font-family: ui-monospace, monospace; font-size: 1.15rem; font-weight: 700; }
  .nibble .bits span { padding: 2px 6px; min-width: 20px; text-align: center; }
  .nibble .meta { font-size: 0.78rem; color: var(--muted); }

  .single-arrow {
    width: 0; height: 0;
    border-left: 9px solid transparent;
    border-right: 9px solid transparent;
    border-top: 12px solid var(--hl);
    margin: 2px 0;
  }

  /* Level 3: hex digits */
  .hex-digits { display: flex; gap: 80px; }
  .hex-digit {
    display: flex; flex-direction: column; align-items: center; gap: 4px;
    padding: 8px 22px;
    border: 2px solid var(--dark);
    border-radius: 8px;
    background: var(--dark);
    color: var(--hl);
  }
  .hex-digit .digit { font-family: ui-monospace, monospace; font-size: 2rem; font-weight: 800; line-height: 1; }
  .hex-digit .meta { font-size: 0.72rem; color: #f3f4f6; opacity: 0.7; }

  /* Merge down to byte */
  .merge {
    display: flex; justify-content: center; margin-top: 2px;
  }
  .merge-v {
    display: grid;
    grid-template-columns: 60px 60px;
    justify-content: center;
    align-items: center;
  }
  .merge-v .line {
    height: 20px;
    border-right: 2px solid var(--hl);
  }
  .merge-v .line.l { border-right: none; border-left: 2px solid var(--hl); }
  .bottom-bar { height: 2px; background: var(--hl); width: 120px; }

  /* Final result */
  .result {
    margin-top: 14px;
    padding: 14px 22px;
    background: #fef3f8;
    border-left: 4px solid var(--hl);
    border-radius: 4px;
    font-size: 1.05rem;
    text-align: center;
    max-width: 640px;
  }
  .result code { background: var(--dark); color: var(--hl); padding: 2px 8px; border-radius: 4px; font-family: ui-monospace, monospace; font-weight: 700; }
  .result strong { color: var(--hl); }

  .math {
    margin-top: 10px;
    font-size: 0.95rem;
    color: var(--dark);
    text-align: center;
  }
  .math .eq { font-family: ui-monospace, monospace; font-weight: 700; }
</style>
</head>
<body>
  <h1>1 Byte → 2 Nibble → 2 Hex-Ziffern</h1>
  <div class="sub">Jedes Byte lässt sich sauber halbieren – und 4 Bit passen exakt auf eine Hex-Ziffer.</div>

  <div class="stage">
    <!-- Level 1 -->
    <div class="level">
      <div class="label">1 Byte · 8 Bit · 2⁸ = 256 Werte</div>
      <div class="byte">
        <span class="bit">0</span><span class="bit">1</span><span class="bit">0</span><span class="bit">0</span>
        <span class="sep"></span>
        <span class="bit">1</span><span class="bit">1</span><span class="bit">0</span><span class="bit">1</span>
      </div>
    </div>

    <div class="split">
      <div class="arrow"></div>
      <div class="arrow"></div>
    </div>

    <!-- Level 2 -->
    <div class="level">
      <div class="label">2 Nibble · je 4 Bit · 2⁴ = 16 Werte</div>
      <div class="nibbles">
        <div class="nibble">
          <div class="bits"><span>0</span><span>1</span><span>0</span><span>0</span></div>
          <div class="meta">= 4 (dez)</div>
        </div>
        <div class="nibble">
          <div class="bits"><span>1</span><span>1</span><span>0</span><span>1</span></div>
          <div class="meta">= 13 (dez)</div>
        </div>
      </div>
    </div>

    <div class="split">
      <div class="arrow"></div>
      <div class="arrow"></div>
    </div>

    <!-- Level 3 -->
    <div class="level">
      <div class="label">2 Hex-Ziffern · Symbole 0–F</div>
      <div class="hex-digits">
        <div class="hex-digit">
          <div class="digit">4</div>
          <div class="meta">Nibble → 1 Ziffer</div>
        </div>
        <div class="hex-digit">
          <div class="digit">D</div>
          <div class="meta">13 → D</div>
        </div>
      </div>
    </div>

    <div class="result">
      <code>01001101</code> (bin) &nbsp;=&nbsp; <code>4D</code> (hex) &nbsp;=&nbsp; <strong>77</strong> (dez) &nbsp;=&nbsp; <strong>"M"</strong> (ASCII)
    </div>

    <div class="math">
      <span class="eq">16 × 16 = 256</span> &nbsp;·&nbsp; <span class="eq">2⁴ × 2⁴ = 2⁸</span> &nbsp;·&nbsp; Darum passt Hex so gut zu Bytes.
    </div>
  </div>
</body>
</html>
</content>
</invoke>