118 lines
5.1 KiB
HTML
118 lines
5.1 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="de">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Byte für Byte — drei Brillen</title>
|
|
<style>
|
|
:root {
|
|
--hl: #d63384;
|
|
--dark: #1a1a2e;
|
|
--muted: #6b7280;
|
|
--border: #cbd5e1;
|
|
--bg-soft: #f8fafc;
|
|
--bin-bg: #0f0f23;
|
|
--bin-fg: #e5e7eb;
|
|
--binary-mark: #ef4444;
|
|
--ascii-ok: #16a34a;
|
|
--ctrl: #9ca3af;
|
|
}
|
|
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.75rem; }
|
|
.sub { text-align: center; color: var(--muted); margin-bottom: 22px; font-size: 1rem; }
|
|
.sub code { font-family: ui-monospace, "SF Mono", Menlo, monospace; }
|
|
|
|
.windows { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 18px; max-width: 1180px; margin: 0 auto; }
|
|
|
|
.window { border: 2px solid var(--border); border-radius: 10px; overflow: hidden; display: flex; flex-direction: column; }
|
|
.window-header { background: var(--bg-soft); padding: 10px 14px; border-bottom: 2px solid var(--border); display: flex; flex-direction: column; gap: 2px; }
|
|
.window-title { font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted); }
|
|
.window-name { font-size: 1.15rem; font-weight: 700; color: var(--dark); }
|
|
|
|
.window-body { padding: 14px 16px; flex: 1; display: flex; flex-direction: column; gap: 6px; font-family: ui-monospace, "SF Mono", Menlo, monospace; }
|
|
|
|
.window.bin .window-body { background: var(--bin-bg); }
|
|
.window.bin .row { color: var(--bin-fg); font-size: 1.05rem; letter-spacing: 0.04em; }
|
|
|
|
.window.hex .row { color: var(--dark); font-size: 1.4rem; font-weight: 700; letter-spacing: 0.06em; }
|
|
|
|
.window.text .row { font-size: 1.4rem; font-weight: 700; display: flex; align-items: center; gap: 10px; }
|
|
.window.text .glyph.printable { color: var(--ascii-ok); }
|
|
.window.text .glyph.ctrl { color: var(--ctrl); font-size: 1.1rem; }
|
|
.window.text .glyph.binary { color: var(--binary-mark); }
|
|
.window.text .note { font-size: 0.78rem; font-weight: 400; color: var(--muted); margin-left: auto; }
|
|
|
|
.footnote { margin-top: 24px; max-width: 1100px; margin-left: auto; margin-right: auto; display: flex; gap: 32px; justify-content: center; font-size: 0.95rem; }
|
|
.legend { display: flex; align-items: center; gap: 8px; }
|
|
.swatch { display: inline-block; width: 16px; height: 16px; border-radius: 3px; }
|
|
.swatch.binary { background: #fee2e2; border: 2px solid var(--binary-mark); }
|
|
.swatch.ascii { background: #dcfce7; border: 2px solid var(--ascii-ok); }
|
|
.verdict { margin-top: 14px; text-align: center; font-size: 1.05rem; color: var(--dark); }
|
|
.verdict strong { color: var(--binary-mark); }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<h1>Byte für Byte</h1>
|
|
<div class="sub">Eine Datei — drei Brillen. Beispiel: erste 8 Byte einer PNG-Datei.</div>
|
|
|
|
<div class="windows">
|
|
|
|
<div class="window bin">
|
|
<div class="window-header">
|
|
<div class="window-title">Fenster 1</div>
|
|
<div class="window-name">Bin · rohe 0 und 1</div>
|
|
</div>
|
|
<div class="window-body">
|
|
<div class="row">10001001</div>
|
|
<div class="row">01010000</div>
|
|
<div class="row">01001110</div>
|
|
<div class="row">01000111</div>
|
|
<div class="row">00001101</div>
|
|
<div class="row">00001010</div>
|
|
<div class="row">00011010</div>
|
|
<div class="row">00001010</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="window hex">
|
|
<div class="window-header">
|
|
<div class="window-title">Fenster 2</div>
|
|
<div class="window-name">Hex · 2 Ziffern pro Byte</div>
|
|
</div>
|
|
<div class="window-body">
|
|
<div class="row">89</div>
|
|
<div class="row">50</div>
|
|
<div class="row">4E</div>
|
|
<div class="row">47</div>
|
|
<div class="row">0D</div>
|
|
<div class="row">0A</div>
|
|
<div class="row">1A</div>
|
|
<div class="row">0A</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="window text">
|
|
<div class="window-header">
|
|
<div class="window-title">Fenster 3</div>
|
|
<div class="window-name">Text · ASCII oder ✗ (> 126)</div>
|
|
</div>
|
|
<div class="window-body">
|
|
<div class="row"><span class="glyph binary">✗</span><span class="note">137 > 126</span></div>
|
|
<div class="row"><span class="glyph printable">P</span><span class="note">80</span></div>
|
|
<div class="row"><span class="glyph printable">N</span><span class="note">78</span></div>
|
|
<div class="row"><span class="glyph printable">G</span><span class="note">71</span></div>
|
|
<div class="row"><span class="glyph ctrl">CR</span><span class="note">13 · Steuerz.</span></div>
|
|
<div class="row"><span class="glyph ctrl">LF</span><span class="note">10 · Steuerz.</span></div>
|
|
<div class="row"><span class="glyph ctrl">SUB</span><span class="note">26 · Steuerz.</span></div>
|
|
<div class="row"><span class="glyph ctrl">LF</span><span class="note">10 · Steuerz.</span></div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="verdict">
|
|
Mindestens ein Byte mit Wert > 126 → <strong>Binärdatei</strong>. Sonst: reine Textdatei.
|
|
</div>
|
|
</body>
|
|
</html>
|