Michael Czechowski
a000cdbc8d
- ascii-table.html: 16x8 grid, kategorie-gefärbt (ctrl/digit/upper/lower/punct/del) hex+dezimal pro zelle, legende, beispiel-zeile - byte-nibble-hex + hex-dec-table aus 223015c kopiert für slide-parität
185 lines
5.9 KiB
HTML
185 lines
5.9 KiB
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) = <code>4D</code> (hex) = <strong>77</strong> (dez) = <strong>"M"</strong> (ASCII)
|
||
</div>
|
||
|
||
<div class="math">
|
||
<span class="eq">16 × 16 = 256</span> · <span class="eq">2⁴ × 2⁴ = 2⁸</span> · Darum passt Hex so gut zu Bytes.
|
||
</div>
|
||
</div>
|
||
</body>
|
||
</html>
|
||
</content>
|
||
</invoke> |