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>
</div>

<main class="stage" id="stage">
  <div class="flaeche">
    <div class="kopf">
      <h1>Post 9 · Webinar-Anzeige</h1>
      <p id="meta">Fünf 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): Logo mit Etikett
        und Foto, Zitat mit freigestellter Person, Ausgangslage, mit HiveGrid, Anmeldung. Farben, Schrift und Formen
        von uns: Gelb und Dunkel, Manrope, Waben, Chamfer. 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,
        Zahlen als Wabenbild (100 Waben) und Ring statt Tabellen. Thema: Zeit, die Betriebe verlieren, und wie wenig KI bisher
        genutzt wird. 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>
  </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 },
  };
  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);
    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
      ? "Fünf Varianten derselben Anzeige · Variante 1: 1 Video, 1 Bild · Varianten 2 bis 5: je 5 Bilder · Format " +
        Object.values(st).map(r => r.h === 1080 ? "1:1" : "4:5").join(", ")
      : "Fünf Varianten derselben Anzeige. Lade Streifen ...";
  }
  window.addEventListener("resize", legen);
  legen();
})();
</script>
</body>
</html>