Michael Czechowski
1d29a9f03c
- three-views.html: bitstream/hex/bedeutung — gleiche bytes drei perspektiven (PNG-header) - why-8-bit.html: speicher-adressierung byteweise, halbe byte unmöglich - byte-flow.html: 1 byte = 8 bit = 2 hex = 1 ASCII (Hello, World!) jeder rahmen ein byte - screenshots in beide assets/demos ordner
181 lines
8.1 KiB
HTML
181 lines
8.1 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="de">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Byte-Fluss: Bit → Hex → ASCII</title>
|
|
<style>
|
|
:root {
|
|
--hl: #d63384;
|
|
--dark: #1a1a2e;
|
|
--muted: #6b7280;
|
|
--border: #cbd5e1;
|
|
--bg-soft: #f8fafc;
|
|
--byte-border: #94a3b8;
|
|
}
|
|
html, body { margin: 0; padding: 0; background: #fff; font-family: system-ui, -apple-system, sans-serif; color: var(--dark); }
|
|
body { padding: 22px 28px; }
|
|
h1 { text-align: center; margin: 0 0 4px; font-size: 1.55rem; }
|
|
.sub { text-align: center; color: var(--muted); margin-bottom: 18px; font-size: 0.95rem; }
|
|
|
|
.stage { display: flex; flex-direction: column; align-items: center; gap: 8px; max-width: 920px; margin: 0 auto; }
|
|
|
|
.file {
|
|
width: 100%; box-sizing: border-box;
|
|
border: 2px solid var(--dark);
|
|
border-radius: 10px;
|
|
background: var(--bg-soft);
|
|
overflow: hidden;
|
|
box-shadow: 0 6px 20px rgba(0,0,0,0.08);
|
|
}
|
|
.file .head {
|
|
background: var(--dark); color: #fff; padding: 8px 14px;
|
|
font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700;
|
|
display: flex; justify-content: space-between; align-items: center;
|
|
}
|
|
.file .head .name { font-family: ui-monospace, monospace; }
|
|
.file .head .meta { font-weight: 400; opacity: 0.7; text-transform: none; letter-spacing: 0; font-size: 0.85em; }
|
|
.file .body { padding: 12px 14px; }
|
|
|
|
.row-bytes { display: flex; gap: 6px; margin-bottom: 6px; flex-wrap: nowrap; }
|
|
.row-bytes:last-child { margin-bottom: 0; }
|
|
|
|
.byte-bin {
|
|
border: 1px solid var(--byte-border);
|
|
border-radius: 4px;
|
|
padding: 4px 7px;
|
|
font-family: ui-monospace, "SF Mono", Menlo, monospace;
|
|
font-size: 0.92rem;
|
|
font-weight: 700;
|
|
background: #fff;
|
|
letter-spacing: 0.04em;
|
|
}
|
|
.byte-hex {
|
|
border: 1px solid var(--byte-border);
|
|
border-radius: 4px;
|
|
padding: 6px 0;
|
|
font-family: ui-monospace, monospace;
|
|
font-size: 1.1rem;
|
|
font-weight: 700;
|
|
background: #fff;
|
|
min-width: 88px;
|
|
text-align: center;
|
|
}
|
|
.byte-ascii {
|
|
border: 1px solid var(--byte-border);
|
|
border-radius: 4px;
|
|
padding: 6px 0;
|
|
font-family: ui-monospace, monospace;
|
|
font-size: 1.2rem;
|
|
font-weight: 700;
|
|
background: #fff;
|
|
min-width: 88px;
|
|
text-align: center;
|
|
}
|
|
.byte-ascii.np { color: var(--muted); font-style: italic; }
|
|
|
|
.truncate { color: var(--muted); font-family: ui-monospace, monospace; padding: 4px 6px; font-weight: 700; align-self: center; }
|
|
|
|
.arrow-stack { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 4px 0; }
|
|
.arrow {
|
|
width: 0; height: 0;
|
|
border-left: 11px solid transparent;
|
|
border-right: 11px solid transparent;
|
|
border-top: 14px solid var(--hl);
|
|
}
|
|
.arrow-label {
|
|
font-size: 0.78rem; color: var(--hl); font-weight: 700;
|
|
text-transform: uppercase; letter-spacing: 0.05em;
|
|
}
|
|
|
|
.legend {
|
|
margin-top: 12px;
|
|
display: flex; gap: 14px; flex-wrap: wrap; justify-content: center;
|
|
font-size: 0.85rem; color: var(--muted);
|
|
}
|
|
.legend strong { color: var(--dark); }
|
|
.legend code { background: var(--bg-soft); border: 1px solid var(--border); padding: 1px 6px; border-radius: 3px; font-family: ui-monospace, monospace; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<h1>1 Byte = 8 Bit = 2 Hex = 1 ASCII-Zeichen</h1>
|
|
<div class="sub">Dieselbe Datei — dieselben Byte, drei Schreibweisen. Jeder Rahmen = ein Byte.</div>
|
|
|
|
<div class="stage">
|
|
|
|
<!-- Stage 1: Bitstream -->
|
|
<div class="file">
|
|
<div class="head"><span class="name">datei.bin</span><span class="meta">Roh-Bit · 8 Bit pro Rahmen</span></div>
|
|
<div class="body">
|
|
<div class="row-bytes">
|
|
<span class="byte-bin">01001000</span><span class="byte-bin">01100101</span><span class="byte-bin">01101100</span><span class="byte-bin">01101100</span><span class="byte-bin">01101111</span><span class="byte-bin">00101100</span><span class="byte-bin">00100000</span><span class="byte-bin">01010111</span>
|
|
</div>
|
|
<div class="row-bytes">
|
|
<span class="byte-bin">01101111</span><span class="byte-bin">01110010</span><span class="byte-bin">01101100</span><span class="byte-bin">01100100</span><span class="byte-bin">00100001</span><span class="byte-bin">00100000</span><span class="byte-bin">01001000</span><span class="byte-bin">01101111</span>
|
|
</div>
|
|
<div class="row-bytes">
|
|
<span class="byte-bin">01110111</span><span class="byte-bin">00100000</span><span class="byte-bin">01100001</span><span class="byte-bin">01110010</span><span class="byte-bin">01100101</span><span class="byte-bin">00100000</span><span class="byte-bin">01111001</span><span class="byte-bin">01101111</span>
|
|
</div>
|
|
<div class="row-bytes">
|
|
<span class="byte-bin">01110101</span><span class="byte-bin">00111111</span><span class="byte-bin">00001010</span><span class="truncate">… (weitere Byte)</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="arrow-stack">
|
|
<div class="arrow-label">je 8 Bit → 2 Hex-Ziffern</div>
|
|
<div class="arrow"></div>
|
|
</div>
|
|
|
|
<!-- Stage 2: Hex -->
|
|
<div class="file">
|
|
<div class="head"><span class="name">datei.hex</span><span class="meta">Hex-Sicht · 2 Hex-Ziffern pro Rahmen</span></div>
|
|
<div class="body">
|
|
<div class="row-bytes">
|
|
<span class="byte-hex">48</span><span class="byte-hex">65</span><span class="byte-hex">6C</span><span class="byte-hex">6C</span><span class="byte-hex">6F</span><span class="byte-hex">2C</span><span class="byte-hex">20</span><span class="byte-hex">57</span>
|
|
</div>
|
|
<div class="row-bytes">
|
|
<span class="byte-hex">6F</span><span class="byte-hex">72</span><span class="byte-hex">6C</span><span class="byte-hex">64</span><span class="byte-hex">21</span><span class="byte-hex">20</span><span class="byte-hex">48</span><span class="byte-hex">6F</span>
|
|
</div>
|
|
<div class="row-bytes">
|
|
<span class="byte-hex">77</span><span class="byte-hex">20</span><span class="byte-hex">61</span><span class="byte-hex">72</span><span class="byte-hex">65</span><span class="byte-hex">20</span><span class="byte-hex">79</span><span class="byte-hex">6F</span>
|
|
</div>
|
|
<div class="row-bytes">
|
|
<span class="byte-hex">75</span><span class="byte-hex">3F</span><span class="byte-hex">0A</span><span class="truncate">…</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="arrow-stack">
|
|
<div class="arrow-label">je 1 Byte → 1 Zeichen</div>
|
|
<div class="arrow"></div>
|
|
</div>
|
|
|
|
<!-- Stage 3: ASCII -->
|
|
<div class="file">
|
|
<div class="head"><span class="name">datei.txt</span><span class="meta">Text-Sicht · 1 ASCII-Zeichen pro Rahmen</span></div>
|
|
<div class="body">
|
|
<div class="row-bytes">
|
|
<span class="byte-ascii">H</span><span class="byte-ascii">e</span><span class="byte-ascii">l</span><span class="byte-ascii">l</span><span class="byte-ascii">o</span><span class="byte-ascii">,</span><span class="byte-ascii np">␣</span><span class="byte-ascii">W</span>
|
|
</div>
|
|
<div class="row-bytes">
|
|
<span class="byte-ascii">o</span><span class="byte-ascii">r</span><span class="byte-ascii">l</span><span class="byte-ascii">d</span><span class="byte-ascii">!</span><span class="byte-ascii np">␣</span><span class="byte-ascii">H</span><span class="byte-ascii">o</span>
|
|
</div>
|
|
<div class="row-bytes">
|
|
<span class="byte-ascii">w</span><span class="byte-ascii np">␣</span><span class="byte-ascii">a</span><span class="byte-ascii">r</span><span class="byte-ascii">e</span><span class="byte-ascii np">␣</span><span class="byte-ascii">y</span><span class="byte-ascii">o</span>
|
|
</div>
|
|
<div class="row-bytes">
|
|
<span class="byte-ascii">u</span><span class="byte-ascii">?</span><span class="byte-ascii np">↵</span><span class="truncate">…</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="legend">
|
|
<span><code>␣</code> = Leerzeichen (0x20)</span>
|
|
<span><code>↵</code> = Zeilenumbruch (0x0A, nicht druckbar)</span>
|
|
<span><strong>Byte ändern sich nicht.</strong> Nur die Anzeige.</span>
|
|
</div>
|
|
|
|
</div>
|
|
</body>
|
|
</html>
|