diff --git a/Dashboard/seiten/webinar.js b/Dashboard/seiten/webinar.js index a5efd27..4be170f 100644 --- a/Dashboard/seiten/webinar.js +++ b/Dashboard/seiten/webinar.js @@ -8,6 +8,8 @@ import { S } from "../app.js"; import { esc, langDatum, dokLink, pille } from "../hilfen.js"; const SLIDES = "/webinar/slides"; +// Die Anzeigen fürs Webinar, exportiert aus PostGrid (posts/post9-hub.mjs). +const ANZEIGEN = "/webinar/anzeigen/post9"; const url = (pfad) => "/" + pfad.split("/").map(encodeURIComponent).join("/"); // Reihenfolge, Teile und Titel der Slides. Fehlt etwas, bleibt der Block leer @@ -30,6 +32,34 @@ async function deckLesen() { } } +// Liste der Varianten. Fehlt sie, entfällt der Block. +async function anzeigenLesen() { + try { + return await fetch(`${ANZEIGEN}/varianten.json`, { cache: "no-store" }).then((r) => r.json()); + } catch { + return null; + } +} + +function anzeigenBlock(a) { + if (!a) return ""; + const element = (s, i) => { + const pfad = `${ANZEIGEN}/${s.datei}`; + const bild = s.art === "video" + ? `` + : ``; + return ` + ${bild}${i + 1}${s.art === "video" ? "Video" : "Bild"}`; + }; + return `

Anzeigen ${esc(a.titel)}, ${a.varianten.length} Varianten, Stand ${esc(a.stand.split("-").reverse().join("."))}

+

${esc(a.hinweis)} Zum Vergrößern anklicken.

+ ${a.varianten.map((v) => ` +
Variante ${v.nr} · ${esc(v.name)}
+

${esc(v.text)}

+
${v.slides.map(element).join("")}
`).join("")} +
`; +} + function unterlage(u) { const knoepfe = []; if (u.art === "ansehen") knoepfe.push(`Ansehen`); @@ -67,7 +97,7 @@ export async function zeichnen(main) { main.innerHTML = `

Keine Webinar-Daten

daten/webinar.json fehlt.

`; return; } - const deck = await deckLesen(); + const [deck, anzeigen] = await Promise.all([deckLesen(), anzeigenLesen()]); const nrVon = (id) => deck.folien.find((f) => f.id === id)?.nr; const ablauf = w.ablauf.map((a, i) => { const von = nrVon(a.start); @@ -97,6 +127,8 @@ export async function zeichnen(main) { + ${anzeigenBlock(anzeigen)} +

Ablauf ${esc(w.dauer)}

diff --git a/Dashboard/stil.css b/Dashboard/stil.css index d5b1b19..4d82dee 100644 --- a/Dashboard/stil.css +++ b/Dashboard/stil.css @@ -450,5 +450,13 @@ input[type="date"]:focus { outline: none; border-color: var(--tinte); } .folie-vorschau img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border: 1px solid var(--rand); border-radius: 4px; background: var(--flaeche-2); display: block; } .folie-vorschau:hover img { border-color: var(--tinte); } .folie-vorschau .nr { color: var(--grau-2); font-weight: 700; margin-right: 6px; } +/* Anzeigen fürs Webinar: ein Carousel je Variante, quadratisch wie im Feed. */ +.anzeige-text { margin: -4px 0 10px; max-width: 760px; } +.anzeige-reihe { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin-bottom: 8px; } +.anzeige-element { display: flex; flex-direction: column; gap: 6px; text-decoration: none; color: var(--text); font-size: 13px; min-width: 0; } +.anzeige-element img, .anzeige-element video { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border: 1px solid var(--rand); border-radius: 4px; background: var(--flaeche-2); display: block; } +.anzeige-element:hover img, .anzeige-element:hover video { border-color: var(--tinte); } +.anzeige-element .nr { color: var(--grau-2); font-weight: 700; margin-right: 6px; } +@media (max-width: 700px) { .anzeige-reihe { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 700px) { .zeile.unterlage { grid-template-columns: minmax(0, 1fr); } .zeile.unterlage .knoepfe { justify-content: flex-start; } } diff --git a/webinar/anzeigen/post9/v1-1.mp4 b/webinar/anzeigen/post9/v1-1.mp4 new file mode 100644 index 0000000..0cd5cdc Binary files /dev/null and b/webinar/anzeigen/post9/v1-1.mp4 differ diff --git a/webinar/anzeigen/post9/v1-2.png b/webinar/anzeigen/post9/v1-2.png new file mode 100644 index 0000000..bf48fdb Binary files /dev/null and b/webinar/anzeigen/post9/v1-2.png differ diff --git a/webinar/anzeigen/post9/v2-1.png b/webinar/anzeigen/post9/v2-1.png new file mode 100644 index 0000000..69b89e7 Binary files /dev/null and b/webinar/anzeigen/post9/v2-1.png differ diff --git a/webinar/anzeigen/post9/v2-2.png b/webinar/anzeigen/post9/v2-2.png new file mode 100644 index 0000000..8dc4c5c Binary files /dev/null and b/webinar/anzeigen/post9/v2-2.png differ diff --git a/webinar/anzeigen/post9/v2-3.png b/webinar/anzeigen/post9/v2-3.png new file mode 100644 index 0000000..6a31b25 Binary files /dev/null and b/webinar/anzeigen/post9/v2-3.png differ diff --git a/webinar/anzeigen/post9/v2-4.png b/webinar/anzeigen/post9/v2-4.png new file mode 100644 index 0000000..53621a6 Binary files /dev/null and b/webinar/anzeigen/post9/v2-4.png differ diff --git a/webinar/anzeigen/post9/v2-5.png b/webinar/anzeigen/post9/v2-5.png new file mode 100644 index 0000000..986ac4e Binary files /dev/null and b/webinar/anzeigen/post9/v2-5.png differ diff --git a/webinar/anzeigen/post9/v3-1.png b/webinar/anzeigen/post9/v3-1.png new file mode 100644 index 0000000..a5b944f Binary files /dev/null and b/webinar/anzeigen/post9/v3-1.png differ diff --git a/webinar/anzeigen/post9/v3-2.png b/webinar/anzeigen/post9/v3-2.png new file mode 100644 index 0000000..68e62d5 Binary files /dev/null and b/webinar/anzeigen/post9/v3-2.png differ diff --git a/webinar/anzeigen/post9/v3-3.png b/webinar/anzeigen/post9/v3-3.png new file mode 100644 index 0000000..d1a33c5 Binary files /dev/null and b/webinar/anzeigen/post9/v3-3.png differ diff --git a/webinar/anzeigen/post9/v3-4.png b/webinar/anzeigen/post9/v3-4.png new file mode 100644 index 0000000..b5bc309 Binary files /dev/null and b/webinar/anzeigen/post9/v3-4.png differ diff --git a/webinar/anzeigen/post9/v3-5.png b/webinar/anzeigen/post9/v3-5.png new file mode 100644 index 0000000..383aa07 Binary files /dev/null and b/webinar/anzeigen/post9/v3-5.png differ diff --git a/webinar/anzeigen/post9/v4-1.png b/webinar/anzeigen/post9/v4-1.png new file mode 100644 index 0000000..757b41a Binary files /dev/null and b/webinar/anzeigen/post9/v4-1.png differ diff --git a/webinar/anzeigen/post9/v4-2.mp4 b/webinar/anzeigen/post9/v4-2.mp4 new file mode 100644 index 0000000..8dc6621 Binary files /dev/null and b/webinar/anzeigen/post9/v4-2.mp4 differ diff --git a/webinar/anzeigen/post9/v4-3.mp4 b/webinar/anzeigen/post9/v4-3.mp4 new file mode 100644 index 0000000..6d360e1 Binary files /dev/null and b/webinar/anzeigen/post9/v4-3.mp4 differ diff --git a/webinar/anzeigen/post9/v4-4.png b/webinar/anzeigen/post9/v4-4.png new file mode 100644 index 0000000..38ee433 Binary files /dev/null and b/webinar/anzeigen/post9/v4-4.png differ diff --git a/webinar/anzeigen/post9/v4-5.png b/webinar/anzeigen/post9/v4-5.png new file mode 100644 index 0000000..68dbcc5 Binary files /dev/null and b/webinar/anzeigen/post9/v4-5.png differ diff --git a/webinar/anzeigen/post9/v5-1.png b/webinar/anzeigen/post9/v5-1.png new file mode 100644 index 0000000..74373e9 Binary files /dev/null and b/webinar/anzeigen/post9/v5-1.png differ diff --git a/webinar/anzeigen/post9/v5-2.mp4 b/webinar/anzeigen/post9/v5-2.mp4 new file mode 100644 index 0000000..200bfd9 Binary files /dev/null and b/webinar/anzeigen/post9/v5-2.mp4 differ diff --git a/webinar/anzeigen/post9/v5-3.mp4 b/webinar/anzeigen/post9/v5-3.mp4 new file mode 100644 index 0000000..9f14eee Binary files /dev/null and b/webinar/anzeigen/post9/v5-3.mp4 differ diff --git a/webinar/anzeigen/post9/v5-4.png b/webinar/anzeigen/post9/v5-4.png new file mode 100644 index 0000000..5beb37e Binary files /dev/null and b/webinar/anzeigen/post9/v5-4.png differ diff --git a/webinar/anzeigen/post9/v5-5.png b/webinar/anzeigen/post9/v5-5.png new file mode 100644 index 0000000..4af99bb Binary files /dev/null and b/webinar/anzeigen/post9/v5-5.png differ diff --git a/webinar/anzeigen/post9/varianten.json b/webinar/anzeigen/post9/varianten.json new file mode 100644 index 0000000..3ad5f73 --- /dev/null +++ b/webinar/anzeigen/post9/varianten.json @@ -0,0 +1,130 @@ +{ + "titel": "Post 9 · Webinar-Anzeige", + "stand": "2026-11-04", + "hinweis": "Format 1:1 für die Anzeige. Datum und Uhrzeit des Webinars sind noch Platzhalter.", + "varianten": [ + { + "nr": 1, + "name": "Webinar-Fenster", + "text": "Das Bewegtbild zeigt das Webinar mit seinen Teilen und beiden Sprechern, danach die Anmeldung.", + "slides": [ + { + "art": "video", + "datei": "v1-1.mp4" + }, + { + "art": "bild", + "datei": "v1-2.png" + } + ] + }, + { + "nr": 2, + "name": "Kundengeschichte", + "text": "Angelehnt an ein Karussell von weclapp. Noah als Gesicht, dann vorher und heute am Beispiel „Angebot nachfassen“, dann die Anmeldung.", + "slides": [ + { + "art": "bild", + "datei": "v2-1.png" + }, + { + "art": "bild", + "datei": "v2-2.png" + }, + { + "art": "bild", + "datei": "v2-3.png" + }, + { + "art": "bild", + "datei": "v2-4.png" + }, + { + "art": "bild", + "datei": "v2-5.png" + } + ] + }, + { + "nr": 3, + "name": "Kundengeschichte dunkel", + "text": "Wie Variante 2, auf dunklem Grund.", + "slides": [ + { + "art": "bild", + "datei": "v3-1.png" + }, + { + "art": "bild", + "datei": "v3-2.png" + }, + { + "art": "bild", + "datei": "v3-3.png" + }, + { + "art": "bild", + "datei": "v3-4.png" + }, + { + "art": "bild", + "datei": "v3-5.png" + } + ] + }, + { + "nr": 4, + "name": "Zahlen", + "text": "Angelehnt an HERO Insights. Noah als Teaser, dann drei Zahlen aus Studien zur Zeit im Handwerk, dann die Anmeldung. Slide 2 und 3 sind kurze Videos.", + "slides": [ + { + "art": "bild", + "datei": "v4-1.png" + }, + { + "art": "video", + "datei": "v4-2.mp4" + }, + { + "art": "video", + "datei": "v4-3.mp4" + }, + { + "art": "bild", + "datei": "v4-4.png" + }, + { + "art": "bild", + "datei": "v4-5.png" + } + ] + }, + { + "nr": 5, + "name": "Zahlen dunkel", + "text": "Wie Variante 4, auf dunklem Grund.", + "slides": [ + { + "art": "bild", + "datei": "v5-1.png" + }, + { + "art": "video", + "datei": "v5-2.mp4" + }, + { + "art": "video", + "datei": "v5-3.mp4" + }, + { + "art": "bild", + "datei": "v5-4.png" + }, + { + "art": "bild", + "datei": "v5-5.png" + } + ] + } + ] +}
MinuteTeilWerKnackpunktSlides