posts/uebersicht.html

<!doctype html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>PostGrid · Alle Projekte</title>
<link rel="stylesheet" href="./assets/fonts/manrope.css">
<style>
  /* ─── Projektübersicht ────────────────────────────────────────────────────
     Alle Streifen untereinander auf einer Fläche. Die Seite baut die Slides
     nicht selbst: jedes Projekt kommt als iframe im Modus ?nur=streifen, in
     dem die Post-Seite ihre Bedienoberfläche ausblendet und nur den Streifen
     in natürlicher Größe zeigt. Skaliert wird hier außen.

     Warum nicht nachbauen: die Streifen müssen genau das zeigen, was der
     Generator zeigt — bis auf den letzten gespeicherten Versatz. Jede zweite
     Implementierung würde irgendwann abweichen, und dann wäre die Übersicht
     schlimmer als keine. */
  * { 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; }
  .menu { position: relative; }
  .menu > button {
    font: inherit; color: #C7CCD6; background: none; border: 0;
    padding: 5px 10px; border-radius: 6px; cursor: pointer;
  }
  .menu > button:hover, .menu[data-auf] > button { background: #23262F; color: #FFFFFF; }
  .menu .liste {
    display: none; position: absolute; left: 0; top: 100%; min-width: 250px;
    padding: 5px; background: #1B1E26; border: 1px solid #2E313B;
    border-radius: 9px; flex-direction: column;
  }
  .menu[data-auf] .liste { display: flex; }
  .menu .liste button {
    font: inherit; text-align: left; color: #C7CCD6; background: none;
    border: 0; padding: 7px 10px; border-radius: 6px; cursor: pointer;
  }
  .menu .liste button:hover { background: #262A34; color: #FFFFFF; }
  .menu .liste hr { border: 0; border-top: 1px solid #2E313B; margin: 5px 2px; }

  /* Dieselbe Fläche wie im Generator: gepunkteter Grund, ziehbar, Rad zoomt. */
  .stage { position: absolute; inset: 34px 0 0; overflow: hidden;
    background-color: #101116;
    background-image: radial-gradient(circle, #282B35 1.6px, transparent 1.6px);
    background-size: 26px 26px;
  }
  .scroller { position: absolute; inset: 0; overflow: auto; overscroll-behavior: contain; }
  .scroller.panning { cursor: grabbing; }
  .flaeche {
    width: max-content; min-width: 100%; height: max-content; min-height: 100%;
    padding: 54px; display: flex; flex-direction: column; gap: 46px;
    align-items: flex-start;
  }

  .reihe { display: flex; flex-direction: column; gap: 10px; }
  .reihe h2 {
    margin: 0; font-size: 12px; font-weight: 800; letter-spacing: .14em;
    text-transform: uppercase; color: #6E7480;
  }
  .reihe h2 b { color: #C7CCD6; font-weight: 800; }
  /* Der Rahmen bekommt die Größe des skalierten Streifens, das iframe darin
     bleibt in Originalgröße und wird nur transformiert. Ohne den Rahmen
     würde das ungeskalierte iframe die Fläche aufblähen. */
  .rahmen { overflow: hidden; background: #FFFFFF; border: 1px solid #2E313B; }
  .rahmen iframe {
    display: block; border: 0; transform-origin: 0 0; background: #FFFFFF;
  }
  .reihe.fehlt .rahmen { display: grid; place-items: center; width: 420px; height: 90px;
    background: #16181F; color: #6E7480; font-size: 13px; }

  .hud {
    position: absolute; left: 0; right: 0; bottom: 0; z-index: 5;
    display: flex; align-items: center; gap: 12px;
    padding: 8px 12px; background: rgba(16,17,22,.92);
    border-top: 1px solid #23262F;
  }
  .hud p { margin: 0; font-size: 12px; color: #6E7480; letter-spacing: .04em; }
  .zoom { margin-left: auto; display: flex; gap: 4px; }
  .zoom button {
    font: inherit; font-size: 13px; font-weight: 700; cursor: pointer;
    background: #1D1F26; color: #C7CCD6; border: 1px solid #2E313B;
    border-radius: 7px; padding: 6px 10px; min-width: 32px;
  }
  .zoom button:hover { background: #262A34; color: #FFFFFF; }
</style>
</head>
<body>

<div class="menubar">
  <span class="marke">PostGrid</span>
  <div class="menu" data-menu="projekt">
    <button type="button">Projekt</button>
    <div class="liste">
      <button type="button" data-gehe="./post1.html">Post 1 · Lösung</button>
      <button type="button" data-gehe="./post2.html">Post 2 · Die Geschichte</button>
      <button type="button" data-gehe="./post2-alt.html">Post 2 · Alternative</button>
      <hr>
      <button type="button" data-klick="neu">Streifen neu laden</button>
    </div>
  </div>
</div>

<main class="stage">
  <div class="scroller" id="scroller">
    <div class="flaeche" id="flaeche"></div>
  </div>
  <div class="hud">
    <p id="meta">Lade Streifen ...</p>
    <div class="zoom">
      <button id="zoom-out" title="Auszoomen">−</button>
      <button id="zoom-fit" title="Einpassen">Fit</button>
      <button id="zoom-in" title="Einzoomen">+</button>
    </div>
  </div>
</main>

<script>
(() => {
  "use strict";

  const PROJEKTE = [
    { datei: "./post1.html",     name: "Post 1 · Lösung" },
    { datei: "./post2.html",     name: "Post 2 · Die Geschichte", theme: "notebook" },
    { datei: "./post2-alt.html", name: "Post 2 · Alternative",    theme: "modern" },
  ];

  const flaeche = document.getElementById("flaeche");
  const scroller = document.getElementById("scroller");
  const meta = document.getElementById("meta");

  /* Ein Streifen ist bis zu 6480 px breit. Der Maßstab ist deshalb nicht
     frei, sondern immer relativ zu "passt in die Fläche" -- sonst müsste man
     bei jedem Öffnen erst herauszoomen. zoom === null heißt eingepasst. */
  let zoom = null;
  const reihen = [];

  function bauen() {
    flaeche.innerHTML = "";
    reihen.length = 0;
    PROJEKTE.forEach(pr => {
      const reihe = document.createElement("div");
      reihe.className = "reihe";
      const h2 = document.createElement("h2");
      h2.innerHTML = "<b>" + pr.name + "</b>" + (pr.theme ? " · Theme " + pr.theme : "");
      const rahmen = document.createElement("div");
      rahmen.className = "rahmen";
      const ram = document.createElement("iframe");
      ram.src = pr.datei + "?nur=streifen";
      ram.loading = "eager";
      rahmen.appendChild(ram);
      reihe.appendChild(h2); reihe.appendChild(rahmen);
      flaeche.appendChild(reihe);
      reihen.push({ pr, reihe, rahmen, ram, w: 6480, h: 1350, da: false });
    });
  }

  /* Jede Post-Seite meldet ihre Streifenbreite, sobald sie steht. Die Zahl
     der Slides ist je Projekt anders und kann sich ändern, deshalb wird sie
     nicht hier gepflegt. */
  window.addEventListener("message", e => {
    const d = e.data;
    if (!d || d.hg !== "streifen") return;
    const r = reihen.find(x => x.ram.contentWindow === e.source);
    if (!r) return;
    r.w = d.w; r.h = d.h; r.da = true;
    legen();
  });

  /* Beschriftung, Abstände und Polster skalieren NICHT mit -- sie stehen
     außerhalb des transformierten iframes. Ein einfaches
     "verfügbar / Gesamthöhe" ließ die letzte Reihe deshalb unten
     hinauslaufen. Die feste Höhe muss vorher abgezogen werden. */
  const POLSTER = 54 * 2, LUECKE = 46, KOPFZEILE = 32;
  function passend() {
    const n = reihen.length;
    const breit = Math.max(...reihen.map(r => r.w), 1080);
    const hoch = reihen.reduce((s, r) => s + r.h, 0);
    const fest = POLSTER + (n - 1) * LUECKE + n * KOPFZEILE;
    return Math.min((scroller.clientWidth - POLSTER) / breit,
                    Math.max(0.02, (scroller.clientHeight - fest) / hoch), 0.5);
  }

  function legen() {
    const k = zoom || passend();
    reihen.forEach(r => {
      r.ram.style.width = r.w + "px";
      r.ram.style.height = r.h + "px";
      r.ram.style.transform = "scale(" + k + ")";
      r.rahmen.style.width = Math.round(r.w * k) + "px";
      r.rahmen.style.height = Math.round(r.h * k) + "px";
    });
    document.getElementById("zoom-fit").textContent = zoom ? Math.round(k * 100) + " %" : "Fit";
    const offen = reihen.filter(r => r.da).length;
    meta.textContent = offen < reihen.length
      ? "Lade Streifen ... " + offen + " von " + reihen.length
      : reihen.length + " Projekte · " + reihen.map(r => Math.round(r.w / 1080) + " Slides").join(" · ");
  }

  function zoomAuf(k, anker) {
    const vor = zoom || passend();
    const ax = anker ? anker.x : scroller.clientWidth / 2;
    const ay = anker ? anker.y : scroller.clientHeight / 2;
    const s0 = scroller.getBoundingClientRect();
    const f0 = flaeche.getBoundingClientRect();
    const u = (s0.left + ax - f0.left) / vor;
    const v = (s0.top + ay - f0.top) / vor;
    zoom = Math.min(1, Math.max(0.02, k));
    legen();
    const f1 = flaeche.getBoundingClientRect();
    scroller.scrollLeft += (f1.left + u * zoom) - (s0.left + ax);
    scroller.scrollTop += (f1.top + v * zoom) - (s0.top + ay);
  }

  // ─── Bedienung: ziehen, Rad zoomt, Umschalt+Rad schiebt waagerecht ───────
  let zieht = null;
  scroller.addEventListener("pointerdown", e => {
    if (e.button !== 0 && e.button !== 1) return;
    zieht = { x: e.clientX, y: e.clientY, l: scroller.scrollLeft, t: scroller.scrollTop };
    scroller.classList.add("panning");
    scroller.setPointerCapture(e.pointerId);
  });
  scroller.addEventListener("pointermove", e => {
    if (!zieht) return;
    scroller.scrollLeft = zieht.l - (e.clientX - zieht.x);
    scroller.scrollTop = zieht.t - (e.clientY - zieht.y);
  });
  const losen = () => { zieht = null; scroller.classList.remove("panning"); };
  scroller.addEventListener("pointerup", losen);
  scroller.addEventListener("pointercancel", losen);

  scroller.addEventListener("wheel", e => {
    if (e.shiftKey) return;                       // waagerecht schieben
    e.preventDefault();
    const r = scroller.getBoundingClientRect();
    zoomAuf((zoom || passend()) * (e.deltaY < 0 ? 1.12 : 1 / 1.12),
            { x: e.clientX - r.left, y: e.clientY - r.top });
  }, { passive: false });

  document.getElementById("zoom-in").addEventListener("click", () => zoomAuf((zoom || passend()) * 1.2));
  document.getElementById("zoom-out").addEventListener("click", () => zoomAuf((zoom || passend()) / 1.2));
  document.getElementById("zoom-fit").addEventListener("click", () => { zoom = null; legen(); });
  window.addEventListener("resize", () => { if (!zoom) legen(); });

  // ─── Menü ────────────────────────────────────────────────────────────────
  document.querySelectorAll(".menu").forEach(m => {
    m.querySelector("button").addEventListener("click", e => {
      e.stopPropagation();
      const auf = m.hasAttribute("data-auf");
      document.querySelectorAll(".menu").forEach(x => x.removeAttribute("data-auf"));
      if (!auf) m.setAttribute("data-auf", "");
    });
  });
  document.addEventListener("click", e => {
    const b = e.target.closest("button[data-gehe], button[data-klick]");
    document.querySelectorAll(".menu").forEach(x => x.removeAttribute("data-auf"));
    if (!b) return;
    if (b.dataset.gehe) { location.href = b.dataset.gehe; return; }
    if (b.dataset.klick === "neu") { bauen(); legen(); }
  });
  document.addEventListener("keydown", e => {
    if (e.key === "0") { zoom = null; legen(); }
  });

  bauen();
  legen();
})();
</script>
</body>
</html>