posts/post9-varianten.html

<!doctype html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>PostGrid · Post 9 · Varianten</title>
<link rel="stylesheet" href="./assets/fonts/manrope.css">
<style>
  /* ─── Post 9 im Vergleich ─────────────────────────────────────────────────
     Die Varianten der Webinar-Anzeige untereinander, wie die Uebersicht aller
     Projekte: jede Variante kommt als iframe im Modus ?nur=streifen und zeigt
     genau, was der Generator zeigt. Variante 1 beginnt mit dem Bewegtbild.
     Das steht nicht im Streifen (Animationen liegen ausserhalb), deshalb
     laeuft davor das exportierte MP4 im passenden Format. */
  * { box-sizing: border-box; }
  :root { color-scheme: dark; }
  html, body { height: 100%; }
  body {
    margin: 0; font-family: Manrope, system-ui, sans-serif;
    background: #101116; color: #C7CCD6; overflow: hidden;
  }
  .menubar {
    position: relative; z-index: 10; display: flex; align-items: center; gap: 2px;
    height: 34px; padding: 0 10px; background: #16181F;
    border-bottom: 1px solid #23262F; font-size: 13px; user-select: none;
  }
  .menubar .marke { font-weight: 800; color: #FFFFFF; margin-right: 14px; letter-spacing: -.01em; }
  .menubar a {
    color: #C7CCD6; text-decoration: none; padding: 5px 10px; border-radius: 6px;
  }
  .menubar a:hover { background: #23262F; color: #FFFFFF; }
  .stage { position: absolute; inset: 34px 0 0; overflow-y: auto; overflow-x: hidden;
    background-color: #101116;
    background-image: radial-gradient(circle, #282B35 1.6px, transparent 1.6px);
    background-size: 26px 26px;
  }
  .flaeche { padding: 48px 54px 80px; display: flex; flex-direction: column; gap: 56px; }
  .kopf h1 { margin: 0; font-size: 26px; font-weight: 800; color: #FFFFFF; letter-spacing: -.01em; }
  .kopf p { margin: 6px 0 0; font-size: 14px; color: #6E7480; }
  .variante { display: flex; flex-direction: column; gap: 14px; }
  .variante h2 {
    margin: 0; font-size: 13px; font-weight: 800; letter-spacing: .14em;
    text-transform: uppercase; color: #6E7480;
  }
  .variante h2 b { color: #F1B729; font-weight: 800; }
  .variante h2 span { color: #FFFFFF; }
  .variante p { margin: 0; max-width: 820px; font-size: 14px; line-height: 1.55; color: #9AA0AC; }
  .reihe { display: flex; gap: 0; align-items: flex-start; }
  .rahmen { overflow: hidden; background: #FFFFFF; border: 1px solid #2E313B; flex: none; }
  .rahmen + .rahmen { border-left: 0; }
  .rahmen iframe {
    display: block; border: 0; transform-origin: 0 0; background: #FFFFFF; pointer-events: none;
  }
  .rahmen video { display: block; width: 100%; height: 100%; object-fit: cover; }
  .marke-video {
    font-size: 11px; color: #6E7480; letter-spacing: .06em; text-transform: uppercase; margin-top: 8px;
  }
</style>
</head>
<body>
<div class="menubar">
  <span class="marke">PostGrid</span>
  <a href="./uebersicht.html">Alle Projekte</a>
  <a href="./post9.html">Variante 1 bearbeiten</a>
  <a href="./post9-v2.html">Variante 2 bearbeiten</a>
  <a href="./post9-v3.html">Variante 3 bearbeiten</a>
  <a href="./post9-v4.html">Variante 4 bearbeiten</a>
  <a href="./post9-v5.html">Variante 5 bearbeiten</a>
  <a href="./post9-v6.html">Variante 6 bearbeiten</a>
  <a href="./post9-v7.html">Variante 7 bearbeiten</a>
</div>

<main class="stage" id="stage">
  <div class="flaeche">
    <div class="kopf">
      <h1>Post 9 · Webinar-Anzeige</h1>
      <p id="meta">Sieben Varianten derselben Anzeige. Lade Streifen ...</p>
    </div>

    <section class="variante">
      <h2><b>Variante 1</b> · <span>Webinar-Fenster</span> · fertig seit 17.10.</h2>
      <p>Das Bewegtbild zeigt das Webinar mit seinen vier Teilen und beiden Sprechern, danach die Anmeldung.
        Zwei Elemente, das erste ist ein Video. Als Anzeige deshalb in 1:1.</p>
      <div class="reihe" id="reihe1">
        <div class="rahmen" id="video1"><video id="anim1" autoplay muted loop playsinline></video></div>
        <div class="rahmen"><iframe id="f1" src="./post9.html?nur=streifen" loading="eager"></iframe></div>
      </div>
    </section>

    <section class="variante">
      <h2><b>Variante 2</b> · <span>Kundengeschichte</span> · angelehnt an weclapp</h2>
      <p>Komposition wie das Karussell von weclapp zu PV Green (Werbebibliothek, ID 792638160291622): Etikett
        „Live-Webinar“ und Foto, Zitat mit freigestellter Person, Vorher, Heute, Anmeldung. Seit 04.11. ohne HiveGrid
        im Text und ohne Fachwörter. Die Geschichte: Noah kriegt nicht in die Ausführung, was in seinem Kopf ist.
        Vorher hing das Nachfassen am Chef (Karte wie bei weclapp), heute laufen dieselben drei Schritte als Kette von selbst
        (Schema wie bei Zapier), wie der Ablauf „Angebot nachfassen“ im Webinar Teil 2. Farben, Schrift und Formen von uns. Fünf Bilder, kein Video, als Anzeige also auch in
        4:5 möglich.</p>
      <div class="reihe">
        <div class="rahmen"><iframe id="f2" src="./post9-v2.html?nur=streifen" loading="eager"></iframe></div>
      </div>
    </section>

    <section class="variante">
      <h2><b>Variante 3</b> · <span>Kundengeschichte dunkel</span> · wie Variante 2</h2>
      <p>Dieselben fünf Slides wie Variante 2 auf dem dunklen Grund des Posts. Texte in Weiß, Formen und Wabenband in
        einem helleren Blau, Gelb bleibt. Was auf Gelb und im Geerkens-Chip steht, bleibt dunkel.</p>
      <div class="reihe">
        <div class="rahmen"><iframe id="f3" src="./post9-v3.html?nur=streifen" loading="eager"></iframe></div>
      </div>
    </section>

    <section class="variante">
      <h2><b>Variante 4</b> · <span>Zahlen</span> · angelehnt an HERO Insights</h2>
      <p>Komposition wie das Karussell „HERO Insights“ (Werbebibliothek, ID 3818182885142025): dunkles Titelbild,
        dann Karten mit Titel, schwarzem und gelbem Balken und einer Grafik. Titelbild mit Noah als Teaser fürs Webinar,
        dann 100 Waben als Band für 8 Stunden Bürokratie, eine große 4 mit den 100 Waben als Block für KI, zuletzt 72 %
        „zu ausgelastet“ groß im gelben Kasten. Jede Karte sieht anders aus. Titel, Bürokratie und KI laufen als Video:
        eine gelbe Welle durchs Wabenmuster, dann die Waben erst gelb, die wichtigen zuletzt rot.
        Zahlen aus KfW Research (April 2025) und Bitkom (504 Betriebe, 2025), Quelle auf jeder Karte.</p>
      <div class="reihe">
        <div class="rahmen"><iframe id="f4" src="./post9-v4.html?nur=streifen" loading="eager"></iframe></div>
      </div>
    </section>

    <section class="variante">
      <h2><b>Variante 5</b> · <span>Zahlen dunkel</span> · wie Variante 4</h2>
      <p>Dieselben fünf Karten wie Variante 4 auf dem dunklen Grund des Posts.</p>
      <div class="reihe">
        <div class="rahmen"><iframe id="f5" src="./post9-v5.html?nur=streifen" loading="eager"></iframe></div>
      </div>
    </section>

    <section class="variante">
      <h2><b>Variante 6</b> · <span>Arbeitsheft</span> · angelehnt an Noahs E-Book</h2>
      <p>Aussagen und Zeichnungen aus Noahs Arbeitsheft „Jede Frage lief über meinen Tisch“: Titel dunkel wie der
        Umschlag, mit den drei Fragen in Handschrift, der Rest weiß, dann Engpass, Inseln, Bewegungsmelder, zehn Handgriffe bei einer Wärmepumpe
        und die Anmeldung. Manrope, Literata und Caveat wie im Heft, Skizzen-Kästen und gelbe Pfeile nach der Website.
        Der Titel läuft als Video, die Pfeile werden wie mit dem Stift gezogen (Test).</p>
      <div class="reihe">
        <div class="rahmen"><iframe id="f6" src="./post9-v6.html?nur=streifen" loading="eager"></iframe></div>
      </div>
    </section>

    <section class="variante">
      <h2><b>Variante 7</b> · <span>Arbeitsheft dunkel</span> · wie Variante 6</h2>
      <p>Dieselben sechs Slides auf dem dunklen Grund. Die Zeichnungen liegen auf weißen Karten, wie im Heft auf den
        dunklen Seiten.</p>
      <div class="reihe">
        <div class="rahmen"><iframe id="f7" src="./post9-v7.html?nur=streifen" loading="eager"></iframe></div>
      </div>
    </section>
  </div>
</main>

<script>
(() => {
  "use strict";
  const stage = document.getElementById("stage");
  const meta = document.getElementById("meta");
  /* Breite und Hoehe melden die Streifen selbst, sobald sie stehen. */
  const st = {
    f1: { el: document.getElementById("f1"), w: 1080, h: 1080, da: false },
    f2: { el: document.getElementById("f2"), w: 5400, h: 1080, da: false },
    f3: { el: document.getElementById("f3"), w: 5400, h: 1080, da: false },
    f4: { el: document.getElementById("f4"), w: 5400, h: 1080, da: false },
    f5: { el: document.getElementById("f5"), w: 5400, h: 1080, da: false },
    f6: { el: document.getElementById("f6"), w: 6480, h: 1080, da: false },
    f7: { el: document.getElementById("f7"), w: 6480, h: 1080, da: false },
  };
  const video = document.getElementById("anim1"), videoRahmen = document.getElementById("video1");

  window.addEventListener("message", e => {
    const d = e.data;
    if (!d || d.hg !== "streifen") return;
    const r = Object.values(st).find(x => x.el.contentWindow === e.source);
    if (!r) return;
    r.w = d.w; r.h = d.h; r.da = true;
    legen();
  });

  /* Alle Slides im selben Massstab, eingepasst an die laengste Reihe. */
  function legen() {
    const breit = Math.max(st.f1.w + 1080, st.f2.w, st.f3.w, st.f4.w, st.f5.w, st.f6.w, st.f7.w);
    const k = Math.min((stage.clientWidth - 108) / breit, 0.42);
    Object.values(st).forEach(r => {
      r.el.style.width = r.w + "px";
      r.el.style.height = r.h + "px";
      r.el.style.transform = "scale(" + k + ")";
      r.el.parentElement.style.width = Math.round(r.w * k) + "px";
      r.el.parentElement.style.height = Math.round(r.h * k) + "px";
    });
    /* Das Video im Format der Variante 1: 1:1 oder 4:5. */
    videoRahmen.style.width = Math.round(1080 * k) + "px";
    videoRahmen.style.height = Math.round(st.f1.h * k) + "px";
    const quelle = "./animation/post9-animWebinar" + (st.f1.h === 1080 ? "-1x1" : "") + ".mp4";
    if (!video.src.endsWith(quelle.slice(1))) { video.src = quelle; video.play().catch(() => {}); }
    const fertig = Object.values(st).every(r => r.da);
    meta.textContent = fertig
      ? "Sieben Varianten derselben Anzeige · Variante 1: 1 Video, 1 Bild · Varianten 2 bis 5: je 5 Elemente · 6 und 7: je 6 Bilder · Format " +
        Object.values(st).map(r => r.h === 1080 ? "1:1" : "4:5").join(", ")
      : "Sieben Varianten derselben Anzeige. Lade Streifen ...";
  }
  window.addEventListener("resize", legen);
  legen();
})();
</script>
</body>
</html>