183 lines
6.3 KiB
HTML
183 lines
6.3 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="de">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<title>Die Reise einer Datei</title>
|
||
<style>
|
||
:root {
|
||
--dark: #1a1a2e;
|
||
--muted: #6b7280;
|
||
--soft: #f8fafc;
|
||
--border: #cbd5e1;
|
||
--hl: #d63384;
|
||
--slot1: #0891b2;
|
||
--slot2: #2563eb;
|
||
--slot3: #7c3aed;
|
||
--slot4: #be185d;
|
||
--slot5: #ea580c;
|
||
}
|
||
html, body { margin: 0; padding: 0; background: #fff; font-family: system-ui, -apple-system, sans-serif; color: var(--dark); }
|
||
body { padding: 32px 40px; }
|
||
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; }
|
||
.sub strong { color: var(--dark); }
|
||
|
||
.journey {
|
||
display: grid;
|
||
grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr auto 1fr;
|
||
gap: 6px;
|
||
align-items: stretch;
|
||
max-width: 1200px;
|
||
margin: 0 auto;
|
||
}
|
||
|
||
.station {
|
||
border: 2px solid;
|
||
border-radius: 10px;
|
||
padding: 14px 12px 12px;
|
||
background: #fff;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
gap: 4px;
|
||
}
|
||
.station.s1 { border-color: var(--slot1); }
|
||
.station.s2 { border-color: var(--slot2); }
|
||
.station.s3 { border-color: var(--slot3); }
|
||
.station.s4 { border-color: var(--slot4); }
|
||
.station.s5 { border-color: var(--slot5); }
|
||
|
||
.station-tag { font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: var(--muted); }
|
||
.station-name { font-size: 1.05rem; font-weight: 700; text-align: center; line-height: 1.2; }
|
||
.station.s1 .station-name { color: var(--slot1); }
|
||
.station.s2 .station-name { color: var(--slot2); }
|
||
.station.s3 .station-name { color: var(--slot3); }
|
||
.station.s4 .station-name { color: var(--slot4); }
|
||
.station.s5 .station-name { color: var(--slot5); }
|
||
.station-detail { font-size: 0.78rem; color: var(--muted); text-align: center; }
|
||
|
||
.link {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
gap: 4px;
|
||
padding: 0 4px;
|
||
justify-content: center;
|
||
}
|
||
.link-rate {
|
||
font-family: ui-monospace, monospace;
|
||
font-size: 0.88rem;
|
||
font-weight: 700;
|
||
color: var(--dark);
|
||
white-space: nowrap;
|
||
}
|
||
.link-protocol {
|
||
font-size: 0.7rem;
|
||
color: var(--muted);
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.06em;
|
||
}
|
||
.link-arrow svg { width: 32px; height: 14px; }
|
||
|
||
.scenario {
|
||
margin-top: 28px;
|
||
max-width: 1200px;
|
||
margin-left: auto;
|
||
margin-right: auto;
|
||
background: var(--soft);
|
||
border: 1.5px solid var(--border);
|
||
border-radius: 10px;
|
||
padding: 16px 22px;
|
||
}
|
||
.scenario-head { font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted); margin-bottom: 6px; }
|
||
.scenario-body { font-size: 0.98rem; line-height: 1.55; }
|
||
.scenario-body code { font-family: ui-monospace, monospace; background: #fff; padding: 1px 6px; border-radius: 4px; border: 1px solid var(--border); }
|
||
|
||
.verdict {
|
||
margin-top: 18px;
|
||
max-width: 1200px;
|
||
margin-left: auto;
|
||
margin-right: auto;
|
||
text-align: center;
|
||
border: 2px solid var(--hl);
|
||
border-radius: 12px;
|
||
padding: 14px 22px;
|
||
}
|
||
.verdict-q { font-size: 1.1rem; font-weight: 700; color: var(--hl); }
|
||
.verdict-a { font-size: 0.92rem; color: var(--dark); margin-top: 4px; }
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<h1>Die Reise einer Datei</h1>
|
||
<div class="sub">Ein 4K-Trailer (<strong>1,2 GB</strong>) reist von der externen SSD auf den Monitor — jede Etappe ist ein eigener Engpass.</div>
|
||
|
||
<div class="journey">
|
||
<div class="station s1">
|
||
<div class="station-tag">Quelle</div>
|
||
<div class="station-name">SSD<br>extern</div>
|
||
<div class="station-detail">NVMe-Stick</div>
|
||
</div>
|
||
|
||
<div class="link">
|
||
<div class="link-rate">3 200 MB/s</div>
|
||
<svg class="link-arrow" viewBox="0 0 32 14"><path d="M2,7 L26,7 M22,2 L28,7 L22,12" stroke="#d63384" stroke-width="2" fill="none"/></svg>
|
||
<div class="link-protocol">USB 4 / TB4</div>
|
||
</div>
|
||
|
||
<div class="station s2">
|
||
<div class="station-tag">Aufnahme</div>
|
||
<div class="station-name">Laptop</div>
|
||
<div class="station-detail">RAM & CPU</div>
|
||
</div>
|
||
|
||
<div class="link">
|
||
<div class="link-rate">~7 000 MB/s</div>
|
||
<svg class="link-arrow" viewBox="0 0 32 14"><path d="M2,7 L26,7 M22,2 L28,7 L22,12" stroke="#d63384" stroke-width="2" fill="none"/></svg>
|
||
<div class="link-protocol">PCIe 4.0</div>
|
||
</div>
|
||
|
||
<div class="station s3">
|
||
<div class="station-tag">Decoder</div>
|
||
<div class="station-name">GPU</div>
|
||
<div class="station-detail">H.264-Hardware</div>
|
||
</div>
|
||
|
||
<div class="link">
|
||
<div class="link-rate">2 200 MB/s</div>
|
||
<svg class="link-arrow" viewBox="0 0 32 14"><path d="M2,7 L26,7 M22,2 L28,7 L22,12" stroke="#d63384" stroke-width="2" fill="none"/></svg>
|
||
<div class="link-protocol">HDMI 2.1</div>
|
||
</div>
|
||
|
||
<div class="station s4">
|
||
<div class="station-tag">Display</div>
|
||
<div class="station-name">4K-Monitor</div>
|
||
<div class="station-detail">3840 × 2160</div>
|
||
</div>
|
||
|
||
<div class="link">
|
||
<div class="link-rate">visuell</div>
|
||
<svg class="link-arrow" viewBox="0 0 32 14"><path d="M2,7 L26,7 M22,2 L28,7 L22,12" stroke="#d63384" stroke-width="2" fill="none"/></svg>
|
||
<div class="link-protocol">Licht</div>
|
||
</div>
|
||
|
||
<div class="station s5">
|
||
<div class="station-tag">Ziel</div>
|
||
<div class="station-name">Auge</div>
|
||
<div class="station-detail">Bewusstsein</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="scenario">
|
||
<div class="scenario-head">Was hier passiert</div>
|
||
<div class="scenario-body">
|
||
Die <code>1,2 GB</code> liegen verschlüsselt komprimiert auf dem Stick. Sie reisen über <strong>USB-C</strong> in den RAM, werden vom GPU <strong>dekodiert</strong> (H.264 → roher RGB-Strom), und über <strong>HDMI</strong> als unkomprimiertes Bild an den Monitor geschickt. Dort entstehen pro Sekunde 60 Bilder mit je rund <code>24 MB</code> — also <strong>1,4 GB/s an rohem Pixelstrom</strong>, der niemals als Datei vorliegt.
|
||
</div>
|
||
</div>
|
||
|
||
<div class="verdict">
|
||
<div class="verdict-q">Speicher und Schnittstelle sind keine zwei Themen — sie sind die zwei Seiten desselben Engpasses.</div>
|
||
<div class="verdict-a">Wo Bytes wohnen entscheidet, wie schnell sie reisen können. Wo sie reisen entscheidet, wo sie wohnen müssen.</div>
|
||
</div>
|
||
</body>
|
||
</html>
|