223015b phase 3b: 2 konkrete eröffner-demos (statt schablone) + STATUS.md für branch-fortsetzung. kap02-eroeffner: FLAC vs MP3-128 mit synth-svg-wellenformen, echten dateigrößen (5.3 MB vs 0.48 MB), bitrate-vergleich, verdict-frage 'hört man den unterschied'. kap03-eroeffner: 3×3-tabelle bild/audio/video × roh/lossy-modern/lossy-aggressiv mit echten zahlen (foto 36MB→4MB→800KB, audio 5.3MB→720KB→240KB, video 12GB→94MB→45MB) + visuelle größenbalken + verdict mit reduktionsfaktoren ×45/×22/×270 und drei verschiedenen wahrnehmungs-tricks pro modalität. kap4+5 eröffner noch offen, status-doc beschreibt nächste schritte für branch-fortsetzung von unterwegs
This commit is contained in:
@@ -0,0 +1,158 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Dieselbe Aufnahme, zwei Formate</title>
|
||||
<style>
|
||||
:root {
|
||||
--dark: #1a1a2e;
|
||||
--muted: #6b7280;
|
||||
--soft: #f8fafc;
|
||||
--border: #cbd5e1;
|
||||
--hl: #d63384;
|
||||
--lossless: #16a34a;
|
||||
--lossy: #ef4444;
|
||||
}
|
||||
html, body { margin: 0; padding: 0; background: #fff; font-family: system-ui, -apple-system, sans-serif; color: var(--dark); }
|
||||
body { padding: 36px 48px; }
|
||||
h1 { text-align: center; margin: 0 0 6px; font-size: 1.85rem; }
|
||||
.sub { text-align: center; color: var(--muted); margin-bottom: 28px; font-size: 1.05rem; }
|
||||
|
||||
.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; max-width: 1200px; margin: 0 auto; }
|
||||
.panel { border: 2px solid var(--border); border-radius: 12px; padding: 22px 24px; display: flex; flex-direction: column; gap: 14px; background: #fff; }
|
||||
.panel.left { border-color: var(--lossless); }
|
||||
.panel.right { border-color: var(--lossy); }
|
||||
|
||||
.panel-head { display: flex; justify-content: space-between; align-items: baseline; }
|
||||
.panel-tag {
|
||||
font-size: 0.74rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.12em;
|
||||
text-transform: uppercase;
|
||||
color: var(--muted);
|
||||
}
|
||||
.panel-name { font-size: 1.5rem; font-weight: 700; }
|
||||
.panel.left .panel-name { color: var(--lossless); }
|
||||
.panel.right .panel-name { color: var(--lossy); }
|
||||
.panel-format {
|
||||
font-family: ui-monospace, "SF Mono", Menlo, monospace;
|
||||
font-size: 0.85rem;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.waveform {
|
||||
background: #0f0f23;
|
||||
border-radius: 8px;
|
||||
padding: 6px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
|
||||
.stat { background: var(--soft); border: 1px solid var(--border); border-radius: 7px; padding: 8px 12px; }
|
||||
.stat .label { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); font-weight: 700; }
|
||||
.stat .value { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 1rem; font-weight: 700; color: var(--dark); margin-top: 2px; }
|
||||
|
||||
.verdict {
|
||||
margin-top: 26px;
|
||||
border: 2px solid var(--hl);
|
||||
background: #fff;
|
||||
border-radius: 12px;
|
||||
padding: 16px 22px;
|
||||
text-align: center;
|
||||
max-width: 1200px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
.verdict-q { font-size: 1.2rem; font-weight: 700; color: var(--hl); }
|
||||
.verdict-a { font-size: 1rem; color: var(--dark); margin-top: 6px; }
|
||||
.verdict-a strong { color: var(--hl); }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h1>Dieselbe Aufnahme, zwei Formate</h1>
|
||||
<div class="sub">3 Sekunden Snare-Hit mit Cymbal-Tail · 44,1 kHz Sample-Rate · Stereo</div>
|
||||
|
||||
<div class="grid">
|
||||
|
||||
<div class="panel left">
|
||||
<div class="panel-head">
|
||||
<span class="panel-name">Lossless</span>
|
||||
<span class="panel-tag">FLAC</span>
|
||||
</div>
|
||||
<div class="panel-format">verlustfrei · alle Frequenzen 0–22 kHz erhalten</div>
|
||||
|
||||
<svg class="waveform" viewBox="0 0 800 160" preserveAspectRatio="none">
|
||||
<defs>
|
||||
<linearGradient id="green-grad" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stop-color="#34d399"/>
|
||||
<stop offset="100%" stop-color="#16a34a"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<line x1="0" y1="80" x2="800" y2="80" stroke="#374151" stroke-width="1"/>
|
||||
<!-- detailed waveform: transient peak + cymbal decay with high-freq noise -->
|
||||
<path d="M0,80
|
||||
L40,80 L42,78 L44,82 L46,74 L48,88
|
||||
L60,30 L62,135 L64,18 L66,142 L68,28 L70,128 L72,38 L74,118 L76,48 L78,108
|
||||
L90,55 L92,108 L94,52 L96,112 L98,58 L100,105 L102,62 L104,98 L106,68 L108,92
|
||||
L130,72 L132,92 L134,68 L136,94 L138,72 L140,90 L142,74 L144,88
|
||||
L170,76 L172,86 L174,74 L176,87 L178,76 L180,85
|
||||
L220,77 L222,84 L224,76 L226,85 L228,77 L230,83
|
||||
L280,78 L282,83 L284,77 L286,84 L288,78 L290,82
|
||||
L340,79 L342,82 L344,78 L346,82 L348,79 L350,81
|
||||
L400,79 L402,81 L404,79 L406,81 L408,79 L410,81
|
||||
L460,80 L462,81 L464,79 L466,81 L468,80 L470,80
|
||||
L520,80 L522,81 L524,79 L526,80
|
||||
L580,80 L582,80 L584,80
|
||||
L640,80 L700,80 L800,80 Z"
|
||||
fill="url(#green-grad)" stroke="#16a34a" stroke-width="1" opacity="0.95"/>
|
||||
</svg>
|
||||
|
||||
<div class="stats">
|
||||
<div class="stat"><div class="label">Dateigröße</div><div class="value">5,3 MB</div></div>
|
||||
<div class="stat"><div class="label">Bitrate</div><div class="value">1.411 kbit/s</div></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="panel right">
|
||||
<div class="panel-head">
|
||||
<span class="panel-name">Lossy</span>
|
||||
<span class="panel-tag">MP3 128 kbit/s</span>
|
||||
</div>
|
||||
<div class="panel-format">verlustbehaftet · hohe Frequenzen weggeworfen, Transienten geglättet</div>
|
||||
|
||||
<svg class="waveform" viewBox="0 0 800 160" preserveAspectRatio="none">
|
||||
<defs>
|
||||
<linearGradient id="red-grad" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stop-color="#fca5a5"/>
|
||||
<stop offset="100%" stop-color="#ef4444"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<line x1="0" y1="80" x2="800" y2="80" stroke="#374151" stroke-width="1"/>
|
||||
<!-- smoothed waveform: same overall shape, no fine detail in transient peak -->
|
||||
<path d="M0,80
|
||||
L40,80 L48,80
|
||||
L60,48 L65,120 L70,52 L75,115 L80,58 L85,108
|
||||
L100,68 L108,92 L114,70 L120,90
|
||||
L150,75 L160,86 L168,76 L174,85
|
||||
L200,77 L210,84 L220,77 L230,83
|
||||
L260,78 L280,82 L300,78 L320,82
|
||||
L360,79 L380,81 L400,79 L420,81
|
||||
L460,80 L480,80 L520,80
|
||||
L580,80 L640,80 L700,80 L800,80 Z"
|
||||
fill="url(#red-grad)" stroke="#ef4444" stroke-width="1" opacity="0.95"/>
|
||||
</svg>
|
||||
|
||||
<div class="stats">
|
||||
<div class="stat"><div class="label">Dateigröße</div><div class="value">0,48 MB</div></div>
|
||||
<div class="stat"><div class="label">Bitrate</div><div class="value">128 kbit/s</div></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="verdict">
|
||||
<div class="verdict-q">Hört man den Unterschied?</div>
|
||||
<div class="verdict-a">Auf dem Smartphone-Lautsprecher: meist nicht. Im Studio-Monitor mit Kopfhörer: oft schon. — MP3 wirft <strong>91 % der Daten weg</strong>, die der Mensch im Alltag nicht vermisst.</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user