diff --git a/docs/relaunch/assets/portal/desktop-1-projekte.webp b/docs/relaunch/assets/portal/desktop-1-projekte.webp index 3b6d06b..fa482ab 100644 Binary files a/docs/relaunch/assets/portal/desktop-1-projekte.webp and b/docs/relaunch/assets/portal/desktop-1-projekte.webp differ diff --git a/docs/relaunch/assets/portal/desktop-2-fortschritt.webp b/docs/relaunch/assets/portal/desktop-2-fortschritt.webp index 6c6f8d9..56b5bce 100644 Binary files a/docs/relaunch/assets/portal/desktop-2-fortschritt.webp and b/docs/relaunch/assets/portal/desktop-2-fortschritt.webp differ diff --git a/docs/relaunch/assets/portal/desktop-3-chat.webp b/docs/relaunch/assets/portal/desktop-3-chat.webp index 445e98e..d4694bb 100644 Binary files a/docs/relaunch/assets/portal/desktop-3-chat.webp and b/docs/relaunch/assets/portal/desktop-3-chat.webp differ diff --git a/docs/relaunch/assets/portal/desktop-3b-chat-foto.webp b/docs/relaunch/assets/portal/desktop-3b-chat-foto.webp index 15d7bd8..e28513e 100644 Binary files a/docs/relaunch/assets/portal/desktop-3b-chat-foto.webp and b/docs/relaunch/assets/portal/desktop-3b-chat-foto.webp differ diff --git a/docs/relaunch/assets/portal/desktop-4-rechnungen.webp b/docs/relaunch/assets/portal/desktop-4-rechnungen.webp index 3668c7e..2700a93 100644 Binary files a/docs/relaunch/assets/portal/desktop-4-rechnungen.webp and b/docs/relaunch/assets/portal/desktop-4-rechnungen.webp differ diff --git a/docs/relaunch/assets/portal/desktop-5-stundenkonto.webp b/docs/relaunch/assets/portal/desktop-5-stundenkonto.webp index 92f6901..d7b7a9d 100644 Binary files a/docs/relaunch/assets/portal/desktop-5-stundenkonto.webp and b/docs/relaunch/assets/portal/desktop-5-stundenkonto.webp differ diff --git a/docs/relaunch/assets/portal/desktop-6-funktionen.webp b/docs/relaunch/assets/portal/desktop-6-funktionen.webp index fdd0f99..f39c0c0 100644 Binary files a/docs/relaunch/assets/portal/desktop-6-funktionen.webp and b/docs/relaunch/assets/portal/desktop-6-funktionen.webp differ diff --git a/docs/relaunch/assets/portal/desktop-7-news-pinnwand.webp b/docs/relaunch/assets/portal/desktop-7-news-pinnwand.webp index e4cd8f1..1f2ab7c 100644 Binary files a/docs/relaunch/assets/portal/desktop-7-news-pinnwand.webp and b/docs/relaunch/assets/portal/desktop-7-news-pinnwand.webp differ diff --git a/docs/relaunch/assets/portal/phone-0-login.webp b/docs/relaunch/assets/portal/phone-0-login.webp index 2d515b5..5e7c606 100644 Binary files a/docs/relaunch/assets/portal/phone-0-login.webp and b/docs/relaunch/assets/portal/phone-0-login.webp differ diff --git a/docs/relaunch/assets/portal/phone-1-projekte.webp b/docs/relaunch/assets/portal/phone-1-projekte.webp index 0f38632..e7be163 100644 Binary files a/docs/relaunch/assets/portal/phone-1-projekte.webp and b/docs/relaunch/assets/portal/phone-1-projekte.webp differ diff --git a/docs/relaunch/assets/portal/phone-1b-tabbar.webp b/docs/relaunch/assets/portal/phone-1b-tabbar.webp index e1802d9..552ae15 100644 Binary files a/docs/relaunch/assets/portal/phone-1b-tabbar.webp and b/docs/relaunch/assets/portal/phone-1b-tabbar.webp differ diff --git a/docs/relaunch/assets/portal/phone-2-projekte-lang.webp b/docs/relaunch/assets/portal/phone-2-projekte-lang.webp index 5f5d6b5..13835ca 100644 Binary files a/docs/relaunch/assets/portal/phone-2-projekte-lang.webp and b/docs/relaunch/assets/portal/phone-2-projekte-lang.webp differ diff --git a/docs/relaunch/assets/portal/phone-3-projektdetails.webp b/docs/relaunch/assets/portal/phone-3-projektdetails.webp index ebec7eb..ddbc962 100644 Binary files a/docs/relaunch/assets/portal/phone-3-projektdetails.webp and b/docs/relaunch/assets/portal/phone-3-projektdetails.webp differ diff --git a/docs/relaunch/assets/portal/phone-4-chat.webp b/docs/relaunch/assets/portal/phone-4-chat.webp index 5d552e0..7556364 100644 Binary files a/docs/relaunch/assets/portal/phone-4-chat.webp and b/docs/relaunch/assets/portal/phone-4-chat.webp differ diff --git a/docs/relaunch/assets/portal/phone-4b-chat-foto.webp b/docs/relaunch/assets/portal/phone-4b-chat-foto.webp index 793e039..c5d62ef 100644 Binary files a/docs/relaunch/assets/portal/phone-4b-chat-foto.webp and b/docs/relaunch/assets/portal/phone-4b-chat-foto.webp differ diff --git a/docs/relaunch/assets/portal/phone-5-rechnungen.webp b/docs/relaunch/assets/portal/phone-5-rechnungen.webp index c3d9b9e..fcd7aa8 100644 Binary files a/docs/relaunch/assets/portal/phone-5-rechnungen.webp and b/docs/relaunch/assets/portal/phone-5-rechnungen.webp differ diff --git a/docs/relaunch/assets/portal/phone-6-vertraege.webp b/docs/relaunch/assets/portal/phone-6-vertraege.webp index 07d7a2c..47505dc 100644 Binary files a/docs/relaunch/assets/portal/phone-6-vertraege.webp and b/docs/relaunch/assets/portal/phone-6-vertraege.webp differ diff --git a/docs/relaunch/assets/portal/phone-7-news.webp b/docs/relaunch/assets/portal/phone-7-news.webp index b29cb1e..88a17a5 100644 Binary files a/docs/relaunch/assets/portal/phone-7-news.webp and b/docs/relaunch/assets/portal/phone-7-news.webp differ diff --git a/docs/relaunch/assets/portal/phone-8-news-vorschau.webp b/docs/relaunch/assets/portal/phone-8-news-vorschau.webp index dd473eb..fd59526 100644 Binary files a/docs/relaunch/assets/portal/phone-8-news-vorschau.webp and b/docs/relaunch/assets/portal/phone-8-news-vorschau.webp differ diff --git a/public/relaunch/portal/desktop-1-projekte-1200.webp b/public/relaunch/portal/desktop-1-projekte-1200.webp index 4b2edbd..213064e 100644 Binary files a/public/relaunch/portal/desktop-1-projekte-1200.webp and b/public/relaunch/portal/desktop-1-projekte-1200.webp differ diff --git a/public/relaunch/portal/desktop-1-projekte-1600.webp b/public/relaunch/portal/desktop-1-projekte-1600.webp index 9bc9b52..75421bd 100644 Binary files a/public/relaunch/portal/desktop-1-projekte-1600.webp and b/public/relaunch/portal/desktop-1-projekte-1600.webp differ diff --git a/public/relaunch/portal/desktop-1-projekte-800.webp b/public/relaunch/portal/desktop-1-projekte-800.webp index a757415..cc6d514 100644 Binary files a/public/relaunch/portal/desktop-1-projekte-800.webp and b/public/relaunch/portal/desktop-1-projekte-800.webp differ diff --git a/public/relaunch/portal/desktop-2-fortschritt-1200.webp b/public/relaunch/portal/desktop-2-fortschritt-1200.webp index 90f5190..bee4699 100644 Binary files a/public/relaunch/portal/desktop-2-fortschritt-1200.webp and b/public/relaunch/portal/desktop-2-fortschritt-1200.webp differ diff --git a/public/relaunch/portal/desktop-2-fortschritt-1600.webp b/public/relaunch/portal/desktop-2-fortschritt-1600.webp index 78b7080..284ab0d 100644 Binary files a/public/relaunch/portal/desktop-2-fortschritt-1600.webp and b/public/relaunch/portal/desktop-2-fortschritt-1600.webp differ diff --git a/public/relaunch/portal/desktop-2-fortschritt-800.webp b/public/relaunch/portal/desktop-2-fortschritt-800.webp index 6991817..42158a1 100644 Binary files a/public/relaunch/portal/desktop-2-fortschritt-800.webp and b/public/relaunch/portal/desktop-2-fortschritt-800.webp differ diff --git a/public/relaunch/portal/desktop-3b-chat-foto-1200.webp b/public/relaunch/portal/desktop-3b-chat-foto-1200.webp index 960ca78..a52c8a3 100644 Binary files a/public/relaunch/portal/desktop-3b-chat-foto-1200.webp and b/public/relaunch/portal/desktop-3b-chat-foto-1200.webp differ diff --git a/public/relaunch/portal/desktop-3b-chat-foto-1600.webp b/public/relaunch/portal/desktop-3b-chat-foto-1600.webp index aba4481..54a5a4f 100644 Binary files a/public/relaunch/portal/desktop-3b-chat-foto-1600.webp and b/public/relaunch/portal/desktop-3b-chat-foto-1600.webp differ diff --git a/public/relaunch/portal/desktop-3b-chat-foto-800.webp b/public/relaunch/portal/desktop-3b-chat-foto-800.webp index 1d5f90a..b2bbe23 100644 Binary files a/public/relaunch/portal/desktop-3b-chat-foto-800.webp and b/public/relaunch/portal/desktop-3b-chat-foto-800.webp differ diff --git a/public/relaunch/portal/desktop-4-rechnungen-1200.webp b/public/relaunch/portal/desktop-4-rechnungen-1200.webp index e60ad9a..87efb86 100644 Binary files a/public/relaunch/portal/desktop-4-rechnungen-1200.webp and b/public/relaunch/portal/desktop-4-rechnungen-1200.webp differ diff --git a/public/relaunch/portal/desktop-4-rechnungen-1600.webp b/public/relaunch/portal/desktop-4-rechnungen-1600.webp index 1c3c550..08d7ca4 100644 Binary files a/public/relaunch/portal/desktop-4-rechnungen-1600.webp and b/public/relaunch/portal/desktop-4-rechnungen-1600.webp differ diff --git a/public/relaunch/portal/desktop-4-rechnungen-800.webp b/public/relaunch/portal/desktop-4-rechnungen-800.webp index 96bd432..7193fba 100644 Binary files a/public/relaunch/portal/desktop-4-rechnungen-800.webp and b/public/relaunch/portal/desktop-4-rechnungen-800.webp differ diff --git a/public/relaunch/portal/desktop-7-news-pinnwand-1200.webp b/public/relaunch/portal/desktop-7-news-pinnwand-1200.webp index 1019e51..301810d 100644 Binary files a/public/relaunch/portal/desktop-7-news-pinnwand-1200.webp and b/public/relaunch/portal/desktop-7-news-pinnwand-1200.webp differ diff --git a/public/relaunch/portal/desktop-7-news-pinnwand-1600.webp b/public/relaunch/portal/desktop-7-news-pinnwand-1600.webp index f010504..43d6966 100644 Binary files a/public/relaunch/portal/desktop-7-news-pinnwand-1600.webp and b/public/relaunch/portal/desktop-7-news-pinnwand-1600.webp differ diff --git a/public/relaunch/portal/desktop-7-news-pinnwand-800.webp b/public/relaunch/portal/desktop-7-news-pinnwand-800.webp index 6185508..fcd087e 100644 Binary files a/public/relaunch/portal/desktop-7-news-pinnwand-800.webp and b/public/relaunch/portal/desktop-7-news-pinnwand-800.webp differ diff --git a/public/relaunch/portal/phone-1-projekte-390.webp b/public/relaunch/portal/phone-1-projekte-390.webp index 2dfb43d..9b30a06 100644 Binary files a/public/relaunch/portal/phone-1-projekte-390.webp and b/public/relaunch/portal/phone-1-projekte-390.webp differ diff --git a/public/relaunch/portal/phone-1-projekte-780.webp b/public/relaunch/portal/phone-1-projekte-780.webp index ac025ea..a4b2f11 100644 Binary files a/public/relaunch/portal/phone-1-projekte-780.webp and b/public/relaunch/portal/phone-1-projekte-780.webp differ diff --git a/public/relaunch/portal/phone-2-projekte-lang-390.webp b/public/relaunch/portal/phone-2-projekte-lang-390.webp index 60a194e..26f5eb1 100644 Binary files a/public/relaunch/portal/phone-2-projekte-lang-390.webp and b/public/relaunch/portal/phone-2-projekte-lang-390.webp differ diff --git a/public/relaunch/portal/phone-2-projekte-lang-780.webp b/public/relaunch/portal/phone-2-projekte-lang-780.webp index 2d854fc..433d4ed 100644 Binary files a/public/relaunch/portal/phone-2-projekte-lang-780.webp and b/public/relaunch/portal/phone-2-projekte-lang-780.webp differ diff --git a/public/relaunch/portal/phone-3-projektdetails-390.webp b/public/relaunch/portal/phone-3-projektdetails-390.webp index 4e2c57a..9916a9e 100644 Binary files a/public/relaunch/portal/phone-3-projektdetails-390.webp and b/public/relaunch/portal/phone-3-projektdetails-390.webp differ diff --git a/public/relaunch/portal/phone-3-projektdetails-780.webp b/public/relaunch/portal/phone-3-projektdetails-780.webp index a8c4109..22a6e0e 100644 Binary files a/public/relaunch/portal/phone-3-projektdetails-780.webp and b/public/relaunch/portal/phone-3-projektdetails-780.webp differ diff --git a/public/relaunch/portal/phone-4b-chat-foto-390.webp b/public/relaunch/portal/phone-4b-chat-foto-390.webp index 2017e8c..7508d96 100644 Binary files a/public/relaunch/portal/phone-4b-chat-foto-390.webp and b/public/relaunch/portal/phone-4b-chat-foto-390.webp differ diff --git a/public/relaunch/portal/phone-4b-chat-foto-780.webp b/public/relaunch/portal/phone-4b-chat-foto-780.webp index 665ff2d..3d815d9 100644 Binary files a/public/relaunch/portal/phone-4b-chat-foto-780.webp and b/public/relaunch/portal/phone-4b-chat-foto-780.webp differ diff --git a/public/relaunch/portal/phone-5-rechnungen-390.webp b/public/relaunch/portal/phone-5-rechnungen-390.webp index 1b35710..c28605d 100644 Binary files a/public/relaunch/portal/phone-5-rechnungen-390.webp and b/public/relaunch/portal/phone-5-rechnungen-390.webp differ diff --git a/public/relaunch/portal/phone-5-rechnungen-780.webp b/public/relaunch/portal/phone-5-rechnungen-780.webp index 4f13c4d..922bf7e 100644 Binary files a/public/relaunch/portal/phone-5-rechnungen-780.webp and b/public/relaunch/portal/phone-5-rechnungen-780.webp differ diff --git a/public/relaunch/portal/phone-8-news-vorschau-390.webp b/public/relaunch/portal/phone-8-news-vorschau-390.webp index 5e16dac..f1c50e0 100644 Binary files a/public/relaunch/portal/phone-8-news-vorschau-390.webp and b/public/relaunch/portal/phone-8-news-vorschau-390.webp differ diff --git a/public/relaunch/portal/phone-8-news-vorschau-780.webp b/public/relaunch/portal/phone-8-news-vorschau-780.webp index 56350d6..46027d1 100644 Binary files a/public/relaunch/portal/phone-8-news-vorschau-780.webp and b/public/relaunch/portal/phone-8-news-vorschau-780.webp differ diff --git a/scripts/relaunch-bilder.py b/scripts/relaunch-bilder.py index 918760f..6ddc7c0 100644 --- a/scripts/relaunch-bilder.py +++ b/scripts/relaunch-bilder.py @@ -31,22 +31,22 @@ SCHRITT = 4 KB = 1024 BUDGET_DESKTOP = 120 * KB BUDGET_HANDY = 60 * KB -# Der lange Screenshot ist gut dreimal so hoch wie ein Handy-Bild (5428 statt 1688 px). Sein Budget +# Der lange Screenshot ist gut dreimal so hoch wie ein Handy-Bild (5131 statt 1748 px). Sein Budget # wächst mit der Höhe (je Bildschirmhöhe weiterhin unter 60 KB), sonst wäre der Text nur noch Matsch. BUDGET_LANG = {390: 80 * KB, 780: 150 * KB} -# Unter der letzten Inhaltszeile (Zeile 5179) ist der Rohexport nur noch schwarz. Abgeschnitten wird +# Unter der letzten Inhaltszeile (Zeile 5091) ist der Rohexport nur noch schwarz. Abgeschnitten wird # 40 px darunter, sonst endet die Verschiebung im Handy-Rahmen auf einem leeren Streifen. -LANG_HOEHE = 5219 +LANG_HOEHE = 5131 # Dateiname (ohne .webp) -> (Art, Zielbreiten) BILDER = { - # Desktop-Fenster (Roh 2880 x 1800) + # Desktop-Fenster (Roh 3024 x 1786 = MacBook-Safari-Fläche 1512 x 893 @2x) "desktop-1-projekte": ("desktop", (800, 1200, 1600)), "desktop-2-fortschritt": ("desktop", (800, 1200, 1600)), "desktop-3b-chat-foto": ("desktop", (800, 1200, 1600)), "desktop-4-rechnungen": ("desktop", (800, 1200, 1600)), "desktop-7-news-pinnwand": ("desktop", (800, 1200, 1600)), - # Handy (Roh 780 x 1688, das lange Bild 780 x 5428, beschnitten auf 5219) + # Handy (Roh 804 x 1748 = iPhone 16 Pro @2x, Safe Area 59/34; das lange Bild 804 x 5340, beschnitten auf 5131) "phone-1-projekte": ("handy", (390, 780)), "phone-3-projektdetails": ("handy", (390, 780)), "phone-4b-chat-foto": ("handy", (390, 780)), diff --git a/src/components/GeraeteRahmen.tsx b/src/components/GeraeteRahmen.tsx index 7a3d1fb..9425a9b 100644 --- a/src/components/GeraeteRahmen.tsx +++ b/src/components/GeraeteRahmen.tsx @@ -59,8 +59,8 @@ export const DesktopFenster = ({ bild, children, className, adresse = "project.w ); /** - * Handy: iPhone 16 Pro (Inhalt in 402 x 874). Die Portal-Aufnahmen haben oben nur 47 px (Roh, 2x) - * Rand für die Statusleiste; damit Dynamic Island nichts verdeckt, beginnt das Bild 35 px tiefer. + * Handy: iPhone 16 Pro (Inhalt in 402 x 874). Die Portal-Aufnahmen sind genau in diesem Format + * mit Safe Area 59 / 34 aufgenommen, Statusleiste und Home-Balken liegen also passend darüber. */ export const HandyRahmen = ({ bild, children, className }: RahmenProps) => ( diff --git a/src/components/geraete-rahmen.css b/src/components/geraete-rahmen.css index 72bd921..198cb2d 100644 --- a/src/components/geraete-rahmen.css +++ b/src/components/geraete-rahmen.css @@ -12,6 +12,3 @@ object-fit: cover; object-position: top; } -.wk-geraet-inhalt--handy { - top: 35px; -} diff --git a/src/components/home/Kundenportal.tsx b/src/components/home/Kundenportal.tsx index 2370d6a..e0c4b2b 100644 --- a/src/components/home/Kundenportal.tsx +++ b/src/components/home/Kundenportal.tsx @@ -22,18 +22,19 @@ const HANDY_BREITEN = [390, 780]; const srcSet = (name: string, breiten: number[]) => breiten.map((b) => `${BILDER}/${name}-${b}.webp ${b}w`).join(", "); -/** Desktop-Bild: Rohformat 2880 x 1800, ausgeliefert in 800 / 1200 / 1600 px. */ +/** Desktop-Bild: Rohformat 3024 x 1786 (MacBook-Safari-Fläche 1512 x 893 @2x), ausgeliefert in 800 / 1200 / 1600 px. */ const desktopBild = (name: string, alt: string): RahmenBildDaten => ({ src: `${BILDER}/${name}-1200.webp`, srcSet: srcSet(name, DESKTOP_BREITEN), sizes: "(min-width: 1200px) 692px, 50vw", width: 1600, - height: 1000, + height: 945, alt, }); -/** Handy-Bild: Rohformat 780 x 1688 (das lange Bild 780 x 5219), ausgeliefert in 390 / 780 px. */ -const handyBild = (name: string, alt: string, sizes: string, hoehe = 1688): RahmenBildDaten => ({ +/** Handy-Bild: Rohformat 804 x 1748 = iPhone 16 Pro @2x (das lange Bild 804 x 5131), ausgeliefert in 390 / 780 px; + * width/height geben das Seitenverhältnis bei 780 px an. */ +const handyBild = (name: string, alt: string, sizes: string, hoehe = 1696): RahmenBildDaten => ({ src: `${BILDER}/${name}-780.webp`, srcSet: srcSet(name, HANDY_BREITEN), sizes, @@ -291,7 +292,7 @@ const Buehne = () => { > {f.lang ? (
- +
) : ( @@ -326,7 +327,7 @@ const LangeKarte = ({ f }: { f: Funktion }) => {
- +

{f.titel}

diff --git a/src/components/home/kundenportal.css b/src/components/home/kundenportal.css index 3e958fc..1e5adc4 100644 --- a/src/components/home/kundenportal.css +++ b/src/components/home/kundenportal.css @@ -213,8 +213,8 @@ transform: translate(-35.9cqw, -14.2cqw) scale(1.5); } -/* Der lange Screenshot: gleiche Breite wie der Schirm, 68,81 % seiner Höhe wandern aus dem Bild - (sichtbar sind 839 von 2690 px im iPhone-Inhalt). Die Verschiebung hängt am Scrollfortschritt (--kp-q), kein eigener Scrollbereich. */ +/* Der lange Screenshot: gleiche Breite wie der Schirm, 65,93 % seiner Höhe wandern aus dem Bild + (sichtbar sind 874 von 2565,5 px im iPhone-Inhalt, 1 - 1748 / 5131). Die Verschiebung hängt am Scrollfortschritt (--kp-q), kein eigener Scrollbereich. */ .kp-lang { position: absolute; top: 0; @@ -237,7 +237,7 @@ transition: transform var(--dur-enter) var(--ease); } .kp-buehne .kp-lang { - transform: translateY(calc(var(--kp-q, 0) * -68.81%)); + transform: translateY(calc(var(--kp-q, 0) * -65.93%)); } /* die große Ebene nur im letzten Schritt auf die Grafikkarte legen */ .kp-buehne[data-app="ja"] .kp-lang { @@ -280,7 +280,7 @@ transform: translateY(0); } 100% { - transform: translateY(-68.81%); + transform: translateY(-65.93%); } } @@ -334,3 +334,15 @@ .kp-schritt-karte .kp-schritt__nr { margin-bottom: 0; } + +/* Wie in der echten Portal-App ist die Statusleiste deckend: der lange Screenshot läuft darunter + durch, statt mit Uhrzeit und Symbolen zu überlappen (59 px = Safe Area oben im iPhone-Inhalt). */ +.wk-geraet-inhalt:has(.kp-lage.is-aktiv .kp-lang)::after, +.wk-geraet-inhalt:has(> .kp-lang)::after { + content: ""; + position: absolute; + inset: 0 0 auto 0; + height: 59px; + background: radial-gradient(70% 160% at 50% 0%, #1e0b31 0%, #000 100%); + z-index: 1; +} diff --git a/src/test/relaunch-kundenportal.test.tsx b/src/test/relaunch-kundenportal.test.tsx index 3ed6001..394174d 100644 --- a/src/test/relaunch-kundenportal.test.tsx +++ b/src/test/relaunch-kundenportal.test.tsx @@ -127,10 +127,10 @@ describe("Kundenportal: Bilder (Spezifikation 9.5)", () => { expect(bilder).toHaveLength(6); for (const bild of bilder.slice(0, 5)) { expect(bild.getAttribute("width")).toBe("780"); - expect(bild.getAttribute("height")).toBe("1688"); + expect(bild.getAttribute("height")).toBe("1696"); } expect(bilder[5].getAttribute("src")).toContain("phone-2-projekte-lang"); - expect(bilder[5].getAttribute("height")).toBe("5219"); + expect(bilder[5].getAttribute("height")).toBe("4978"); }); it("Desktop: zu Beginn hängen nur die ersten beiden Schritte ihre Bilder ein (spart Daten)", () => {