136 lines
4.3 KiB
HTML
136 lines
4.3 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="de">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Kapitel 1 — Roter Faden</title>
|
|
<style>
|
|
:root {
|
|
--dark: #1a1a2e;
|
|
--muted: #6b7280;
|
|
--soft: #f8fafc;
|
|
--border: #cbd5e1;
|
|
--hl: #d63384;
|
|
--hl-soft: #fce7f3;
|
|
--in: #1e5f8a;
|
|
--in-soft: #e0f2fe;
|
|
--out: #16a34a;
|
|
--out-soft: #dcfce7;
|
|
--bin-bg: #0f0f23;
|
|
}
|
|
html, body { margin: 0; padding: 0; background: #fff; font-family: system-ui, -apple-system, sans-serif; color: var(--dark); }
|
|
body { padding: 36px 44px; }
|
|
h1 { text-align: center; margin: 0 0 6px; font-size: 1.85rem; }
|
|
.sub { text-align: center; color: var(--muted); margin-bottom: 30px; font-size: 1.05rem; }
|
|
|
|
.stage {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr 1fr;
|
|
gap: 22px;
|
|
align-items: stretch;
|
|
max-width: 1180px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.pole {
|
|
border: 2px solid var(--border);
|
|
border-radius: 14px;
|
|
padding: 24px 22px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 10px;
|
|
background: var(--soft);
|
|
}
|
|
.pole.in { border-color: var(--in); background: var(--in-soft); }
|
|
.pole.center { border-color: var(--hl); background: var(--hl-soft); }
|
|
.pole.out { border-color: var(--out); background: var(--out-soft); }
|
|
|
|
.pole-tag { font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: var(--muted); }
|
|
.pole-name { font-size: 1.35rem; font-weight: 700; color: var(--dark); }
|
|
.pole-icon { font-size: 2.4rem; }
|
|
.pole-detail { font-size: 0.88rem; color: var(--muted); text-align: center; line-height: 1.4; }
|
|
|
|
.arrows { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; max-width: 1180px; margin: 18px auto 0; }
|
|
.arrow-box {
|
|
border: 1px dashed var(--border);
|
|
border-radius: 10px;
|
|
padding: 16px 18px;
|
|
background: #fff;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 6px;
|
|
}
|
|
.arrow-label { font-size: 0.85rem; font-weight: 700; color: var(--hl); text-transform: uppercase; letter-spacing: 0.08em; }
|
|
.arrow-bullets { font-size: 0.95rem; color: var(--dark); margin: 0; padding-left: 18px; line-height: 1.5; }
|
|
.arrow-bullets li { margin: 2px 0; }
|
|
|
|
.byte-strip {
|
|
margin-top: 28px;
|
|
background: var(--bin-bg);
|
|
color: #e5e7eb;
|
|
font-family: ui-monospace, "SF Mono", Menlo, monospace;
|
|
padding: 14px 20px;
|
|
border-radius: 8px;
|
|
text-align: center;
|
|
font-size: 1rem;
|
|
letter-spacing: 0.06em;
|
|
max-width: 1180px;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
}
|
|
.byte-strip small { display: block; color: #9ca3af; font-family: system-ui; letter-spacing: 0; font-size: 0.78rem; margin-top: 6px; text-transform: uppercase; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<h1>Was steckt in einer Datei — und wie kommt es da rein?</h1>
|
|
<div class="sub">Dieses Kapitel überbrückt zwei Richtungen, beide treffen sich am Byte.</div>
|
|
|
|
<div class="stage">
|
|
<div class="pole in">
|
|
<div class="pole-tag">Pol A</div>
|
|
<div class="pole-icon">🎙️</div>
|
|
<div class="pole-name">Welt</div>
|
|
<div class="pole-detail">analoge Signale<br>Druckwelle · Licht · Spannung</div>
|
|
</div>
|
|
|
|
<div class="pole center">
|
|
<div class="pole-tag">Treffpunkt</div>
|
|
<div class="pole-icon">📄</div>
|
|
<div class="pole-name">Datei</div>
|
|
<div class="pole-detail">Byte-Strom<br>Zahlen von 0 bis 255</div>
|
|
</div>
|
|
|
|
<div class="pole out">
|
|
<div class="pole-tag">Pol B</div>
|
|
<div class="pole-icon">👁️</div>
|
|
<div class="pole-name">Mensch</div>
|
|
<div class="pole-detail">Bedeutung<br>Text · Bild · Klang</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="arrows">
|
|
<div class="arrow-box">
|
|
<div class="arrow-label">Welt → Datei: rein</div>
|
|
<ul class="arrow-bullets">
|
|
<li>Sampling (wie oft messen)</li>
|
|
<li>Quantisierung (wie genau)</li>
|
|
<li>Nyquist · Aliasing</li>
|
|
</ul>
|
|
</div>
|
|
<div class="arrow-box">
|
|
<div class="arrow-label">Datei → Mensch: raus</div>
|
|
<ul class="arrow-bullets">
|
|
<li>Notation (Bin · Dez · Hex)</li>
|
|
<li>Encoding (ASCII · UTF-8)</li>
|
|
<li>Format-Erkennung (Magic Numbers)</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="byte-strip">
|
|
01001000 01100101 01101100 01101100 01101111 …
|
|
<small>der gemeinsame Treffpunkt</small>
|
|
</div>
|
|
</body>
|
|
</html>
|