diff --git a/apps/api/assets/mail/welcome-header.png b/apps/api/assets/mail/welcome-header.png index 8ee5bf0..653892e 100644 Binary files a/apps/api/assets/mail/welcome-header.png and b/apps/api/assets/mail/welcome-header.png differ diff --git a/apps/api/assets/mail/welcome-header.svg b/apps/api/assets/mail/welcome-header.svg index 7747fbb..c741cc7 100644 --- a/apps/api/assets/mail/welcome-header.svg +++ b/apps/api/assets/mail/welcome-header.svg @@ -1,28 +1,24 @@ - + - - - - - - - - - - - - - - Tessera + + + + + + diff --git a/apps/api/scripts/render-mail-header.mjs b/apps/api/scripts/render-mail-header.mjs index 5e00a8e..dc74e89 100644 --- a/apps/api/scripts/render-mail-header.mjs +++ b/apps/api/scripts/render-mail-header.mjs @@ -1,8 +1,8 @@ #!/usr/bin/env node /** * render-mail-header.mjs — erzeugt das Kopfbild der Willkommensmail - * (apps/api/assets/mail/welcome-header.png, 1200x300 fuer hochaufloesende - * Bildschirme, in der Mail 600x150 angezeigt) aus der daneben liegenden + * (apps/api/assets/mail/welcome-header.png, 1200x112 fuer hochaufloesende + * Bildschirme, in der Mail 600x56 angezeigt) aus der daneben liegenden * Quelle welcome-header.svg. * * Warum ein PNG statt Inline-SVG oder CSS-Hintergrund: Outlook (Word- @@ -33,7 +33,7 @@ const sharp = createRequire(nextPkg)('sharp'); const svg = readFileSync(join(assetDir, 'welcome-header.svg')); const png = await sharp(svg, { density: 72 }) - .resize(1200, 300) + .resize(1200, 112) .png({ compressionLevel: 9, palette: false }) .toBuffer(); writeFileSync(join(assetDir, 'welcome-header.png'), png); diff --git a/apps/api/src/mail/welcome-mail.template.ts b/apps/api/src/mail/welcome-mail.template.ts index 801acbf..077a553 100644 --- a/apps/api/src/mail/welcome-mail.template.ts +++ b/apps/api/src/mail/welcome-mail.template.ts @@ -11,10 +11,10 @@ * Mail sehr unterschiedlich darstellen: * - Tabellenlayout, alle Stile inline, hoechstens 600 px breit; * - keine externen Ressourcen, keine Web-Fonts (Systemschriften); - * - der Kopf im Stil des Dashboard-Hintergrunds "Duenen" ist ein PNG - * (`headerImageSrc`, im Versand `cid:`), weil SVG und CSS-Hintergruende in - * Outlook nicht erscheinen; fehlt das Bild, steht dort ein dunkler - * Textkopf; + * - Kopf: Bildmarke und Schriftzug als HTML (erscheinen immer), darunter + * die Duenen-Welle als schmaler PNG-Streifen (`headerImageSrc`, im + * Versand `cid:`), weil SVG und CSS-Hintergruende in Outlook nicht + * erscheinen; fehlt das Bild, bleibt nur ein schmaler Abschluss; * - Knoepfe als Tabelle mit Hintergrundfarbe in der Zelle ("bulletproof"), * Outlook ignoriert Innenabstaende und Rundungen am Link selbst. * @@ -118,13 +118,58 @@ function button(href: string, label: string, bg: string, fg: string): string { `; } +/** Eine Kachel der Bildmarke: feste Zelle, Hoehe auch in Outlook exakt. */ +function tile(color: string | null): string { + const bg = color ? `bgcolor="${color}" style="background-color:${color};` : 'style="'; + return ` `; +} + +/** Luecke zwischen Kacheln. */ +const GAP = ' '; + +/** + * Bildmarke als HTML (quick-260930): das Kachel-"T" aus Tabellenzellen — + * oben drei Kacheln (die dritte gelb, im Original gedreht), darunter zwei in + * der Mitte —, auf dunkler Grundplatte mit heller Kontur wie in der App. + * Braucht kein Bild und erscheint deshalb in jedem Mailprogramm. + */ +function logoMark(): string { + const row = (cells: Array) => + `
${cells.map((c, i) => (i > 0 ? GAP : '') + tile(c)).join('')}
`; + const spacer = `
 
`; + const olive = '#9c9440'; + return ` +
+ +${row([olive, olive, C.yellow])}${spacer}${row([null, olive, null])}${spacer}${row([null, olive, null])} +
+
`; +} + +/** + * Kopf der Mail (quick-260930, Rueckmeldung des Nutzers: in Outlook "ein + * riesiger schwarzer Fleck, kein Logo"). Vorher steckten Logo und + * Schriftzug in EINEM 150 px hohen Bild; zeigt ein Mailprogramm das + * eingebettete Bild nicht an, blieb nur die dunkle Flaeche. Jetzt: + * - Bildmarke (HTML-Kacheln) und Schriftzug "Tessera" (echter Text) in einer + * niedrigen dunklen Leiste — erscheinen immer; + * - darunter die Duenen-Welle als schmaler Bildstreifen (`src`, im Versand + * `cid:`), der ins Weiss der Karte auslaeuft. Fehlt er, bleibt nur weisser + * Abstand, kein dunkler Block. + */ function headerRow(src: string | null): string { - if (src) { - return ` -Tessera + const bar = ` + + + +
${logoMark()}Tessera
`; - } - return `Tessera`; + const wave = src + ? ` + +` + : ` `; + return bar + wave; } export function renderWelcomeMail(input: WelcomeMailInput): RenderedWelcomeMail {