uni/slides/223015b/assets/demos/kap02-eroeffner.html

<!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>