Terminleiste nur noch mit feiner Linie unten, Zitate kursiv ohne Balken. Vorschauen, Mediakit und Anleitung angepasst. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
261 lines
21 KiB
HTML
261 lines
21 KiB
HTML
<!doctype html>
|
||
<html lang="de">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
<title>Mediakit Mail-Strecke</title>
|
||
<!-- Übersicht für Philipp. Als PDF: ./quelle/mediakit.sh -->
|
||
<link rel="stylesheet" href="quelle/fonts/manrope.css">
|
||
<style>
|
||
@font-face { font-family: "Caveat"; font-weight: 500 700; src: url(quelle/fonts/caveat-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+2000-206F, U+20AC; }
|
||
@font-face { font-family: "Literata"; font-weight: 400 700; src: url(quelle/fonts/literata-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+2000-206F, U+20AC; }
|
||
@font-face { font-family: "Literata"; font-style: italic; font-weight: 400; src: url(quelle/fonts/literata-italic-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+2000-206F, U+20AC; }
|
||
:root { --tinte: #1A1A1A; --gold: #F1B729; --gold-dunkel: #8A6800; --gold-hell: #FFF6DA; --grund: #F4F3EF; --linie: #ECEAE3; --grau: #6B6B66; }
|
||
* { box-sizing: border-box; }
|
||
@page { size: A4; margin: 14mm 14mm 16mm; }
|
||
body { margin: 0; background: #fff; color: var(--tinte); font-family: Literata, Georgia, serif; font-size: 14px; line-height: 1.55; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
|
||
main { max-width: 820px; margin: 0 auto; padding: 32px 20px 60px; }
|
||
h1, h2, h3 { font-family: Manrope, sans-serif; font-weight: 800; letter-spacing: -.02em; margin: 0; }
|
||
h1 { font-size: 44px; line-height: 1.05; }
|
||
h2 { font-size: 26px; margin: 0 0 6px; }
|
||
h3 { font-size: 15px; margin: 18px 0 8px; letter-spacing: 0; }
|
||
.kicker { font-family: Caveat, cursive; font-weight: 700; font-size: 26px; color: var(--gold-dunkel); }
|
||
.strich { background: linear-gradient(transparent 78%, var(--gold) 78%, var(--gold) 92%, transparent 92%); }
|
||
.klein { font-size: 12.5px; color: var(--grau); }
|
||
.abschnitt { break-before: page; padding-top: 4px; }
|
||
.abschnitt > p.einl { margin: 0 0 18px; color: #3A3A37; max-width: 640px; }
|
||
.label { font-family: Arial, sans-serif; font-size: 10.5px; font-weight: bold; letter-spacing: 1.4px; text-transform: uppercase; color: var(--gold-dunkel); }
|
||
code { font-family: ui-monospace, Menlo, monospace; font-size: 12px; background: var(--grund); padding: 1px 5px; border-radius: 3px; }
|
||
|
||
.titelblatt { display: flex; flex-direction: column; justify-content: space-between; }
|
||
@media print { .titelblatt { min-height: 250mm; } }
|
||
@media screen { .abschnitt { margin-top: 56px; padding-top: 34px; border-top: 1px solid var(--linie); } .einzeln { margin-top: 40px; } }
|
||
.titelblatt img.banner { width: 100%; border-radius: 10px; display: block; margin: 26px 0; }
|
||
.titelblatt .fakten { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; border-top: 1px solid var(--linie); padding-top: 14px; }
|
||
.titelblatt .fakten b { display: block; font-family: Manrope, sans-serif; font-size: 22px; }
|
||
|
||
.aufbau { display: grid; grid-template-columns: 300px 1fr; gap: 28px; align-items: start; }
|
||
.aufbau img { width: 300px; border: 1px solid var(--linie); border-radius: 8px; display: block; }
|
||
.aufbau ol { margin: 0; padding: 0; list-style: none; counter-reset: n; }
|
||
.aufbau li { counter-increment: n; position: relative; padding: 0 0 12px 40px; }
|
||
.aufbau li::before { content: counter(n); position: absolute; left: 0; top: 0; width: 26px; height: 26px; border-radius: 13px; background: var(--gold); font: bold 13px/26px Arial, sans-serif; text-align: center; }
|
||
.aufbau li b { font-family: Manrope, sans-serif; }
|
||
|
||
.farben { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
|
||
.farbe { border: 1px solid var(--linie); border-radius: 8px; overflow: hidden; break-inside: avoid; }
|
||
.farbe .f { height: 64px; }
|
||
.farbe div:last-child { padding: 8px 10px; font-size: 12px; }
|
||
.farbe b { display: block; font-family: Manrope, sans-serif; font-size: 13px; }
|
||
|
||
.schriften { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
|
||
.karte { border: 1px solid var(--linie); border-radius: 10px; padding: 16px 18px; break-inside: avoid; }
|
||
|
||
.knoepfe { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
|
||
.knopf { display: inline-block; background: var(--gold); color: var(--tinte); font: bold 16px Arial, sans-serif; padding: 16px 34px; border-radius: 6px; text-decoration: none; }
|
||
|
||
.muster { border: 1px solid var(--linie); border-radius: 10px; padding: 20px 24px; margin-bottom: 14px; break-inside: avoid; font-family: Georgia, serif; font-size: 16px; }
|
||
.muster .name { font-family: Manrope, sans-serif; font-weight: 800; font-size: 13px; margin-bottom: 10px; }
|
||
|
||
.banner-raster { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 18px; }
|
||
.banner-raster figure { margin: 0; break-inside: avoid; }
|
||
.banner-raster img { width: 100%; display: block; border: 1px solid var(--linie); border-radius: 6px; }
|
||
.banner-raster figcaption { font-size: 11.5px; line-height: 1.4; margin-top: 5px; color: #3A3A37; }
|
||
.banner-raster figcaption code { font-size: 10.5px; }
|
||
|
||
.mails { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px 16px; }
|
||
.mails figure { margin: 0; break-inside: avoid; }
|
||
.mails img { width: 100%; display: block; border: 1px solid var(--linie); border-radius: 6px; }
|
||
.mails figcaption { font-size: 11.5px; line-height: 1.4; margin-top: 6px; }
|
||
.mails figcaption b { font-family: Manrope, sans-serif; font-size: 12.5px; display: block; }
|
||
.einzeln { break-before: page; text-align: center; }
|
||
.einzeln img { max-height: 255mm; max-width: 100%; border: 1px solid var(--linie); border-radius: 6px; }
|
||
.einzeln h3 { text-align: left; }
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<main>
|
||
|
||
<!-- Titelblatt -->
|
||
<section class="titelblatt">
|
||
<div>
|
||
<img src="quelle/logo/hivegrid.svg" alt="HiveGrid" style="width:150px;display:block;margin-left:-6px">
|
||
<div class="kicker" style="margin-top:40px">Für Philipp, zum Bauen in Mailjet</div>
|
||
<h1>Mediakit <span class="strich">Mail-Strecke</span></h1>
|
||
<p style="font-size:17px;margin:12px 0 0;max-width:620px">Alles, was du für die Mails zum Webinar am 8. Dezember brauchst: Bilder, Farben, Buttons, Bausteine und jede Mail fertig gebaut. Die Texte kommen aus Noahs PDF, der Look aus dem Heft „Jede Frage lief über meinen Tisch“.</p>
|
||
<img class="banner" src="bilder/banner/k02-jede-frage-lief-ueber-meinen-tisch.jpg" alt="">
|
||
</div>
|
||
<div class="fakten">
|
||
<div><span class="label">Mailjet</span><b>14 Mails</b><span class="klein">K1 bis K4, K7 bis K11, B4a bis B6</span></div>
|
||
<div><span class="label">WebinarGeek</span><b>4 Mails</b><span class="klein">B0 bis B3, macht Dejan</span></div>
|
||
<div><span class="label">Bilder</span><b>21 Dateien</b><span class="klein">18 Banner, Logo, Signatur, Heft</span></div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Aufbau -->
|
||
<section class="abschnitt">
|
||
<div class="kicker">So ist jede Mail gebaut</div>
|
||
<h2>Aufbau, von oben nach unten</h2>
|
||
<p class="einl">Alle Mails folgen derselben Vorlage, die Muster-Mail ist K3 (<code>mails/k03.html</code>). Gebaut wie ein Brief von Noah: viel Text, ein Bild oben, ein klarer Button. Dazu Elemente aus dem Heft wie der goldene Marker, die Unterstreichung und die Skizzen.</p>
|
||
<div class="aufbau">
|
||
<img src="mails/vorschau/k03.png" alt="Muster-Mail K3">
|
||
<ol>
|
||
<li><b>Logo</b> über der Karte, mittig, 152 px breit. <span class="klein">logo-hivegrid.png</span></li>
|
||
<li><b>Banner</b> ganz oben in der Karte, 600 px. Je Mail ein eigenes, mit Titel und Zeichnung aus dem Heft.</li>
|
||
<li><b>Terminleiste</b> mit Wann, Wo und Dauer. In allen Einladungen und Erinnerungen, nicht in K1 und nicht nach dem Webinar.</li>
|
||
<li><b>Text</b> aus dem PDF in Georgia 17 px, beginnend mit „Moin [Vorname],“.</li>
|
||
<li><b>Zitat</b> kursiv und etwas größer, höchstens eins pro Mail. Der Satz steht im PDF schon so da.</li>
|
||
<li><b>Button</b> dort, wo im PDF der Platzhalter steht. Gold, mittig, mit Pfeil.</li>
|
||
<li><b>Heft-Kasten</b> ab K3, statt der Zeile „Das Heft dazu, falls du es noch nicht hast“.</li>
|
||
<li><b>Gruß und Signatur</b>: „Gruß Noah“, darunter das Bild mit Foto und Namen.</li>
|
||
<li><b>PS</b> nach einer feinen Linie.</li>
|
||
<li><b>Fuß</b> außerhalb der Karte: warum man die Mail bekommt, Abmelden, Datenschutz, Adresse.</li>
|
||
</ol>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Farben und Schrift -->
|
||
<section class="abschnitt">
|
||
<div class="kicker">Aus den Brand Guidelines und dem Heft</div>
|
||
<h2>Farben und Schrift</h2>
|
||
<p class="einl">Gold ist die Farbe für alles, was man anklicken oder sehen soll: Buttons, Linien, Kästen. Als Textfarbe auf Weiß ist Gold zu blass. Dafür gibt es das dunkle Gold.</p>
|
||
<div class="farben">
|
||
<div class="farbe"><div class="f" style="background:#F1B729"></div><div><b>Gold</b>#F1B729<br><span class="klein">Buttons, Linien, Flächen</span></div></div>
|
||
<div class="farbe"><div class="f" style="background:#1A1A1A"></div><div><b>Tinte</b>#1A1A1A<br><span class="klein">Text, Schrift auf Buttons</span></div></div>
|
||
<div class="farbe"><div class="f" style="background:#8A6800"></div><div><b>Gold dunkel</b>#8A6800<br><span class="klein">Links, kleine Beschriftungen</span></div></div>
|
||
<div class="farbe"><div class="f" style="background:#FFF6DA"></div><div><b>Gold hell</b>#FFF6DA<br><span class="klein">Heft-Kasten</span></div></div>
|
||
<div class="farbe"><div class="f" style="background:#F4F3EF"></div><div><b>Grund</b>#F4F3EF<br><span class="klein">außen um die Karte</span></div></div>
|
||
<div class="farbe"><div class="f" style="background:#FFFFFF"></div><div><b>Karte</b>#FFFFFF<br><span class="klein">Inhalt, Rand #E4E1D8</span></div></div>
|
||
<div class="farbe"><div class="f" style="background:#ECEAE3"></div><div><b>Linie</b>#ECEAE3<br><span class="klein">Trennlinien</span></div></div>
|
||
<div class="farbe"><div class="f" style="background:#6B6B66"></div><div><b>Grau</b>#6B6B66<br><span class="klein">Fuß</span></div></div>
|
||
</div>
|
||
<h3>Schrift</h3>
|
||
<div class="schriften">
|
||
<div class="karte">
|
||
<div class="label">In der Mail (Text)</div>
|
||
<p style="font-family:Georgia,serif;font-size:17px;line-height:1.65;margin:8px 0 6px">Georgia 17 px: in der Mitte stand KWP. Darin schreiben wir Angebote, Aufträge und Rechnungen.</p>
|
||
<p style="font-family:Arial,sans-serif;font-size:14px;margin:0"><b>Arial</b> für Buttons und kleine Beschriftungen</p>
|
||
<p class="klein" style="margin:8px 0 0">Läuft in jedem Mailprogramm. Georgia kommt Literata aus dem Heft am nächsten.</p>
|
||
</div>
|
||
<div class="karte">
|
||
<div class="label">In den Bildern (wie im Heft)</div>
|
||
<p style="font-family:Manrope,sans-serif;font-weight:800;font-size:24px;letter-spacing:-.02em;margin:8px 0 2px">Manrope für Titel</p>
|
||
<p style="font-family:Literata,serif;font-size:17px;margin:0 0 2px">Literata für Unterzeilen</p>
|
||
<p style="font-family:Caveat,cursive;font-weight:700;font-size:26px;margin:0;color:#8A6800">Caveat für die Handschrift</p>
|
||
<p class="klein" style="margin:8px 0 0">Nur in Bildern, weil viele Mailprogramme diese Schriften nicht anzeigen.</p>
|
||
</div>
|
||
</div>
|
||
|
||
<h3>Buttons</h3>
|
||
<div class="knoepfe">
|
||
<a class="knopf">Platz sichern →</a>
|
||
<a class="knopf">Heft lesen →</a>
|
||
<a class="knopf">Termin mit Haris aussuchen →</a>
|
||
<a class="knopf">Zum Webinar →</a>
|
||
</div>
|
||
<p class="klein" style="margin:10px 0 0">Fläche #F1B729 · Schrift #1A1A1A, Arial fett 16 px · Innenabstand 16 / 34 px · Ecken 6 px · mittig. Als Button-Baustein in Mailjet bauen, nicht als Bild: Bilder sind bei vielen Empfängern erst einmal ausgeblendet.</p>
|
||
</section>
|
||
|
||
<!-- Bausteine -->
|
||
<section class="abschnitt">
|
||
<div class="kicker">Zum Nachbauen</div>
|
||
<h2>Bausteine</h2>
|
||
<p class="einl">So sehen die Bausteine in der Mail aus. Die genauen Werte stehen in <code>README.md</code> unter „Gestaltung“, das HTML in <code>mails/k03.html</code>.</p>
|
||
|
||
<div class="muster"><div class="name">Terminleiste</div>
|
||
<table width="100%" cellpadding="0" cellspacing="0" style="border-bottom:1px solid #ECEAE3"><tr>
|
||
<td style="padding:12px 10px 12px 0"><div class="label">Wann</div><b>Di, 8. Dezember, 18 Uhr</b></td>
|
||
<td style="padding:12px 10px"><div class="label">Wo</div><b>Live im Browser</b></td>
|
||
<td style="padding:12px 0 12px 10px"><div class="label">Dauer</div><b>Eine Stunde</b></td>
|
||
</tr></table>
|
||
</div>
|
||
|
||
<div class="muster"><div class="name">Zitat</div>
|
||
<div style="font-style:italic;font-size:20px;line-height:1.45">Die Brücke zwischen den Inseln war ein Mensch. Meistens ich.</div>
|
||
</div>
|
||
|
||
<div class="muster"><div class="name">Liste</div>
|
||
<div style="display:flex;gap:10px;margin-bottom:8px"><span style="flex:none;width:26px;height:26px;border-radius:13px;background:#F1B729;font:bold 14px/26px Arial;text-align:center">1</span>Wo wir sehen, welche Anfrage offen ist, wer dran ist und was als Nächstes ansteht, live am Bildschirm.</div>
|
||
<div style="display:flex;gap:10px"><span style="flex:none;width:26px;height:26px;border-radius:13px;background:#F1B729;font:bold 14px/26px Arial;text-align:center">2</span>Was dabei schiefging. Die Pannen, die dir keiner erzählt, der dir Automation verkauft.</div>
|
||
</div>
|
||
|
||
<div class="muster"><div class="name">Heft-Kasten</div>
|
||
<div style="background:#FFF6DA;border-radius:10px;padding:16px 18px;display:flex;gap:18px;align-items:center">
|
||
<img src="bilder/heft-klein.png" alt="" style="width:78px;mix-blend-mode:multiply">
|
||
<div>Das Heft dazu, falls du es noch nicht hast:<br><b style="font-family:Arial,sans-serif;font-size:15px;text-decoration:underline;text-decoration-color:#F1B729">„Jede Frage lief über meinen Tisch“ lesen →</b></div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="muster"><div class="name">Gruß, Signatur und PS</div>
|
||
<p style="margin:0 0 10px">Gruß Noah</p>
|
||
<img src="bilder/signatur-noah.png" alt="" style="width:360px;display:block">
|
||
<div style="border-top:1px solid #ECEAE3;margin-top:16px;padding-top:14px;color:#3A3A37"><b style="color:#1A1A1A">PS:</b> Am 8. Dezember um 18 Uhr fange ich mit genau diesen Kreuzen an.</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Banner -->
|
||
<section class="abschnitt">
|
||
<div class="kicker">bilder/banner/ und bilder/webinargeek/</div>
|
||
<h2>Die Banner</h2>
|
||
<p class="einl">Je Mail ein Banner, 1200 × 600 px, in der Mail 600 px breit. Den Alt-Text in Mailjet beim Bild eintragen. Er erscheint, solange die Bilder ausgeblendet sind.</p>
|
||
<div class="banner-raster">
|
||
<figure><img src="bilder/banner/k01-ich-war-nicht-der-chef.jpg" alt=""><figcaption><b>K1</b> · <code>k01-ich-war-nicht-der-chef.jpg</code><br>Alt: Wie es bei mir war: Ich war nicht der Chef, ich war der Engpass.</figcaption></figure>
|
||
<figure><img src="bilder/banner/k02-jede-frage-lief-ueber-meinen-tisch.jpg" alt=""><figcaption><b>K2</b> · <code>k02-jede-frage-lief-ueber-meinen-tisch.jpg</code><br>Alt: Das Heft aus unserem Betrieb: Jede Frage lief über meinen Tisch. 33 Seiten, 22 Minuten, ohne Anmeldung.</figcaption></figure>
|
||
<figure><img src="bilder/banner/k03-jedes-programm-war-eine-insel.jpg" alt=""><figcaption><b>K3</b> · <code>k03-jedes-programm-war-eine-insel.jpg</code><br>Alt: Warum das so war: Jedes Programm war eine Insel.</figcaption></figure>
|
||
<figure><img src="bilder/banner/k04-eine-anfrage-dreimal-getippt.jpg" alt=""><figcaption><b>K4</b> · <code>k04-eine-anfrage-dreimal-getippt.jpg</code><br>Alt: Rund 140 Anfragen im Monat: Eine Anfrage, dreimal getippt.</figcaption></figure>
|
||
<figure><img src="bilder/banner/k07-in-zehn-tagen.jpg" alt=""><figcaption><b>K7</b> · <code>k07-in-zehn-tagen.jpg</code><br>Alt: Das Programm am 8. Dezember: In zehn Tagen. Dienstag, 18 Uhr, live im Browser.</figcaption></figure>
|
||
<figure><img src="bilder/banner/k08-lebenslauf-einer-waermepumpe.jpg" alt=""><figcaption><b>K8</b> · <code>k08-lebenslauf-einer-waermepumpe.jpg</code><br>Alt: Ein Auftrag, netto 30.000 €: Lebenslauf einer Wärmepumpe.</figcaption></figure>
|
||
<figure><img src="bilder/banner/k09-klingt-gut-oder.jpg" alt=""><figcaption><b>K9</b> · <code>k09-klingt-gut-oder.jpg</code><br>Alt: Klingt gut, oder? Und dann wurde es ein Kartenhaus.</figcaption></figure>
|
||
<figure><img src="bilder/banner/k10-trotzdem-lief-alles-ueber-meinen-tisch.jpg" alt=""><figcaption><b>K10</b> · <code>k10-trotzdem-lief-alles-ueber-meinen-tisch.jpg</code><br>Alt: 13 Programme, ein Kopf: Trotzdem lief alles über meinen Tisch.</figcaption></figure>
|
||
<figure><img src="bilder/banner/k11-morgen-abend-18-uhr.jpg" alt=""><figcaption><b>K11</b> · <code>k11-morgen-abend-18-uhr.jpg</code><br>Alt: Letzte Einladung: Morgen Abend, 18 Uhr. Dienstag, 8. Dezember, live im Browser, eine Stunde.</figcaption></figure>
|
||
<figure><img src="bilder/banner/b4a-danke-fuer-gestern-abend.jpg" alt=""><figcaption><b>B4a</b> · <code>b4a-danke-fuer-gestern-abend.jpg</code><br>Alt: Nach dem Webinar: Danke für gestern Abend.</figcaption></figure>
|
||
<figure><img src="bilder/banner/b4b-wir-haben-ohne-dich-angefangen.jpg" alt=""><figcaption><b>B4b</b> · <code>b4b-wir-haben-ohne-dich-angefangen.jpg</code><br>Alt: Kein Vorwurf: Wir haben ohne dich angefangen.</figcaption></figure>
|
||
<figure><img src="bilder/banner/b4c-deine-drei-zahlen.jpg" alt=""><figcaption><b>B4c</b> · <code>b4c-deine-drei-zahlen.jpg</code><br>Alt: Was jetzt zählt: Deine drei Zahlen.</figcaption></figure>
|
||
<figure><img src="bilder/banner/b5-du-hast-zwei-wege.jpg" alt=""><figcaption><b>B5</b> · <code>b5-du-hast-zwei-wege.jpg</code><br>Alt: Wie es weitergeht: Du hast zwei Wege.</figcaption></figure>
|
||
<figure><img src="bilder/banner/b6-letzte-mail-vor-weihnachten.jpg" alt=""><figcaption><b>B6</b> · <code>b6-letzte-mail-vor-weihnachten.jpg</code><br>Alt: Seit 1948, vierte Generation: Letzte Mail vor Weihnachten.</figcaption></figure>
|
||
<figure><img src="bilder/webinargeek/b0-du-bist-dabei.jpg" alt=""><figcaption><b>B0 · WebinarGeek</b> · <code>b0-du-bist-dabei.jpg</code><br>Alt: Dein Platz ist sicher: Du bist dabei. Dienstag, 8. Dezember, 18 Uhr.</figcaption></figure>
|
||
<figure><img src="bilder/webinargeek/b1-morgen-abend-18-uhr.jpg" alt=""><figcaption><b>B1 · WebinarGeek</b> · <code>b1-morgen-abend-18-uhr.jpg</code><br>Alt: Erinnerung: Morgen Abend, 18 Uhr.</figcaption></figure>
|
||
<figure><img src="bilder/webinargeek/b2-heute-abend-18-uhr.jpg" alt=""><figcaption><b>B2 · WebinarGeek</b> · <code>b2-heute-abend-18-uhr.jpg</code><br>Alt: Heute ist es so weit: Heute Abend, 18 Uhr.</figcaption></figure>
|
||
<figure><img src="bilder/webinargeek/b3-in-einer-stunde.jpg" alt=""><figcaption><b>B3 · WebinarGeek</b> · <code>b3-in-einer-stunde.jpg</code><br>Alt: Gleich geht's los: In einer Stunde.</figcaption></figure>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Alle Mails -->
|
||
<section class="abschnitt">
|
||
<div class="kicker">mails/ und mails/vorschau/</div>
|
||
<h2>Alle Mails auf einen Blick</h2>
|
||
<p class="einl">So soll jede Mail aussehen. Auf den folgenden Seiten steht jede Mail einzeln in voller Länge.</p>
|
||
<div class="mails" id="uebersicht"></div>
|
||
</section>
|
||
<div id="einzeln"></div>
|
||
|
||
</main>
|
||
<script>
|
||
// Liste der Mails, daraus entstehen die Übersicht und die Einzelseiten.
|
||
const MAILS = [
|
||
["k01", "K1 · Ich war nicht der Chef", "Verteiler · Di 17.11., 7:00"],
|
||
["k02", "K2 · Jede Frage lief über meinen Tisch", "Verteiler · Do 19.11., 7:00"],
|
||
["k03", "K3 · Jedes Programm war eine Insel", "Verteiler · Di 24.11., 7:00"],
|
||
["k04", "K4 · Eine Anfrage, dreimal getippt", "Verteiler · Do 26.11., 7:00"],
|
||
["k07", "K7 · In zehn Tagen", "Verteiler · Sa 28.11., 8:00"],
|
||
["k08", "K8 · Lebenslauf einer Wärmepumpe", "Verteiler · Di 01.12., 7:00"],
|
||
["k09", "K9 · Klingt gut, oder?", "Verteiler · Do 03.12., 7:00"],
|
||
["k10", "K10 · Trotzdem lief alles über meinen Tisch", "Verteiler · Sa 05.12., 8:00"],
|
||
["k11", "K11 · Morgen Abend, 18 Uhr", "noch nicht angemeldet · Mo 07.12., 7:00"],
|
||
["b4a", "B4a · Danke für gestern Abend", "teilgenommen · Mi 09.12., 9:00"],
|
||
["b4b", "B4b · Wir haben ohne dich angefangen", "nicht erschienen · Mi 09.12., 9:00"],
|
||
["b4c", "B4c · Deine drei Zahlen", "Reserve, nur ohne Teilnahmedaten"],
|
||
["b5", "B5 · Du hast zwei Wege", "Angemeldet · Fr 11.12., 9:00"],
|
||
["b6", "B6 · Letzte Mail vor Weihnachten", "Angemeldet · Di 15.12., 9:00"],
|
||
["b0", "B0 · Du bist dabei", "WebinarGeek · sofort nach der Anmeldung"],
|
||
["b1", "B1 · Morgen Abend, 18 Uhr", "WebinarGeek · 24 Std. vorher"],
|
||
["b2", "B2 · Heute Abend, 18 Uhr", "WebinarGeek · 9 Std. vorher"],
|
||
["b3", "B3 · In einer Stunde", "WebinarGeek · 1 Std. vorher"],
|
||
];
|
||
document.getElementById("uebersicht").innerHTML = MAILS.map(([id, name, an]) =>
|
||
`<figure><img src="mails/vorschau/${id}.png" alt=""><figcaption><b>${name}</b>${an}<br><code>mails/${id}.html</code></figcaption></figure>`).join("");
|
||
document.getElementById("einzeln").innerHTML = MAILS.map(([id, name, an]) =>
|
||
`<section class="einzeln"><h3>${name} <span class="klein">· ${an} · mails/${id}.html</span></h3><img src="mails/vorschau/${id}.png" alt=""></section>`).join("");
|
||
</script>
|
||
</body>
|
||
</html>
|