diff --git a/mobile/store-assets/play-marketing/out-apple/de/01-hero.png b/mobile/store-assets/play-marketing/out-apple/de/01-hero.png new file mode 100644 index 0000000..839ec7b Binary files /dev/null and b/mobile/store-assets/play-marketing/out-apple/de/01-hero.png differ diff --git a/mobile/store-assets/play-marketing/out-apple/de/02-profil.png b/mobile/store-assets/play-marketing/out-apple/de/02-profil.png new file mode 100644 index 0000000..5825190 Binary files /dev/null and b/mobile/store-assets/play-marketing/out-apple/de/02-profil.png differ diff --git a/mobile/store-assets/play-marketing/out-apple/de/03-tierarten.png b/mobile/store-assets/play-marketing/out-apple/de/03-tierarten.png new file mode 100644 index 0000000..9369ae5 Binary files /dev/null and b/mobile/store-assets/play-marketing/out-apple/de/03-tierarten.png differ diff --git a/mobile/store-assets/play-marketing/out-apple/de/04-nachrichten.png b/mobile/store-assets/play-marketing/out-apple/de/04-nachrichten.png new file mode 100644 index 0000000..b836999 Binary files /dev/null and b/mobile/store-assets/play-marketing/out-apple/de/04-nachrichten.png differ diff --git a/mobile/store-assets/play-marketing/out-apple/de/05-gesundheit.png b/mobile/store-assets/play-marketing/out-apple/de/05-gesundheit.png new file mode 100644 index 0000000..4154cf9 Binary files /dev/null and b/mobile/store-assets/play-marketing/out-apple/de/05-gesundheit.png differ diff --git a/mobile/store-assets/play-marketing/out-apple/de/06-benachrichtigungen.png b/mobile/store-assets/play-marketing/out-apple/de/06-benachrichtigungen.png new file mode 100644 index 0000000..39a66b1 Binary files /dev/null and b/mobile/store-assets/play-marketing/out-apple/de/06-benachrichtigungen.png differ diff --git a/mobile/store-assets/play-marketing/out-apple/de/07-raenge.png b/mobile/store-assets/play-marketing/out-apple/de/07-raenge.png new file mode 100644 index 0000000..c9cd361 Binary files /dev/null and b/mobile/store-assets/play-marketing/out-apple/de/07-raenge.png differ diff --git a/mobile/store-assets/play-marketing/out-apple/de/08-spinnen.png b/mobile/store-assets/play-marketing/out-apple/de/08-spinnen.png new file mode 100644 index 0000000..f19f6dc Binary files /dev/null and b/mobile/store-assets/play-marketing/out-apple/de/08-spinnen.png differ diff --git a/mobile/store-assets/play-marketing/out-apple/en/01-hero.png b/mobile/store-assets/play-marketing/out-apple/en/01-hero.png new file mode 100644 index 0000000..a595b4a Binary files /dev/null and b/mobile/store-assets/play-marketing/out-apple/en/01-hero.png differ diff --git a/mobile/store-assets/play-marketing/out-apple/en/02-profil.png b/mobile/store-assets/play-marketing/out-apple/en/02-profil.png new file mode 100644 index 0000000..5562742 Binary files /dev/null and b/mobile/store-assets/play-marketing/out-apple/en/02-profil.png differ diff --git a/mobile/store-assets/play-marketing/out-apple/en/03-tierarten.png b/mobile/store-assets/play-marketing/out-apple/en/03-tierarten.png new file mode 100644 index 0000000..1d7ab24 Binary files /dev/null and b/mobile/store-assets/play-marketing/out-apple/en/03-tierarten.png differ diff --git a/mobile/store-assets/play-marketing/out-apple/en/04-nachrichten.png b/mobile/store-assets/play-marketing/out-apple/en/04-nachrichten.png new file mode 100644 index 0000000..7f46b35 Binary files /dev/null and b/mobile/store-assets/play-marketing/out-apple/en/04-nachrichten.png differ diff --git a/mobile/store-assets/play-marketing/out-apple/en/05-gesundheit.png b/mobile/store-assets/play-marketing/out-apple/en/05-gesundheit.png new file mode 100644 index 0000000..42271ba Binary files /dev/null and b/mobile/store-assets/play-marketing/out-apple/en/05-gesundheit.png differ diff --git a/mobile/store-assets/play-marketing/out-apple/en/06-benachrichtigungen.png b/mobile/store-assets/play-marketing/out-apple/en/06-benachrichtigungen.png new file mode 100644 index 0000000..f7ad99a Binary files /dev/null and b/mobile/store-assets/play-marketing/out-apple/en/06-benachrichtigungen.png differ diff --git a/mobile/store-assets/play-marketing/out-apple/en/07-raenge.png b/mobile/store-assets/play-marketing/out-apple/en/07-raenge.png new file mode 100644 index 0000000..925cd20 Binary files /dev/null and b/mobile/store-assets/play-marketing/out-apple/en/07-raenge.png differ diff --git a/mobile/store-assets/play-marketing/out-apple/en/08-spinnen.png b/mobile/store-assets/play-marketing/out-apple/en/08-spinnen.png new file mode 100644 index 0000000..1b640c3 Binary files /dev/null and b/mobile/store-assets/play-marketing/out-apple/en/08-spinnen.png differ diff --git a/mobile/store-assets/play-marketing/render.sh b/mobile/store-assets/play-marketing/render.sh index 5a1a8b5..a1f3eaf 100644 --- a/mobile/store-assets/play-marketing/render.sh +++ b/mobile/store-assets/play-marketing/render.sh @@ -1,19 +1,25 @@ #!/bin/sh -# Rendert die Play-Store-Marketing-Screenshots (1080x1920) per Headless-Chrome. +# Rendert die Store-Marketing-Screenshots per Headless-Chrome: +# out// Google Play, 1080x1920 +# out-apple// App Store iPhone 6.9", 1320x2868 (mit iOS-Statusleiste) # Aufruf: sh render.sh cd "$(dirname "$0")" CHROME="/c/Program Files/Google/Chrome/Application/chrome.exe" -# Reihenfolge = Reihenfolge im Play Store (Dateien werden 01-…, 02-… nummeriert) +# Reihenfolge = Reihenfolge im Store (Dateien werden 01-…, 02-… nummeriert) SLIDES="hero profil tierarten nachrichten gesundheit benachrichtigungen raenge spinnen" -for lang in de en; do - mkdir -p "out/$lang" - i=0 - for s in $SLIDES; do - i=$((i + 1)) - "$CHROME" --headless=new --disable-gpu --hide-scrollbars --force-device-scale-factor=1 \ - --window-size=1080,1920 --virtual-time-budget=5000 \ - --screenshot="$(cygpath -w "$PWD/out/$lang/$(printf %02d $i)-$s.png")" \ - "file:///$(cygpath -m "$PWD/template.html")?s=$s&lang=$lang" 2>/dev/null +render() { # $1 = Plattform, $2 = Ausgabeordner, $3 = Fenstergröße + for lang in de en; do + mkdir -p "$2/$lang" + i=0 + for s in $SLIDES; do + i=$((i + 1)) + "$CHROME" --headless=new --disable-gpu --hide-scrollbars --force-device-scale-factor=1 \ + --window-size="$3" --virtual-time-budget=5000 \ + --screenshot="$(cygpath -w "$PWD/$2/$lang/$(printf %02d $i)-$s.png")" \ + "file:///$(cygpath -m "$PWD/template.html")?s=$s&lang=$lang&p=$1" 2>/dev/null + done done -done -ls out/* +} +render play out 1080,1920 +render apple out-apple 1320,2868 +ls out/* out-apple/* diff --git a/mobile/store-assets/play-marketing/template.html b/mobile/store-assets/play-marketing/template.html index 4a88757..8ea6f5b 100644 --- a/mobile/store-assets/play-marketing/template.html +++ b/mobile/store-assets/play-marketing/template.html @@ -26,6 +26,23 @@ .hero h1 { position: absolute; top: 140px; left: 80px; font-size: 128px; } .hero .arch { left: -120px; right: 180px; top: 980px; border-radius: 520px 520px 0 0; } .hero .phone { left: 260px; top: 560px; width: 760px; transform: rotate(-10deg); transform-origin: top left; } + /* Apple (1320x2868): gleiche Gestaltung, nur höhere Fläche und größeres Handy */ + html.apple { zoom: calc(1320 / 1080); } + html.apple, html.apple body { height: 2347px; } + .apple .arch { top: 900px; } + .apple .std h1 { top: 170px; } + .apple .std .phone { top: 500px; width: 780px; } + .apple .hero .arch { top: 1080px; } + .apple .hero .phone { top: 600px; width: 800px; } + + /* iOS-Statusleiste über der Android-Statusleiste (Apple-Richtlinie 2.3.10) */ + .phone { container-type: inline-size; } + .sb { position: absolute; left: 14px; right: 14px; top: 14px; height: 11cqw; border-radius: 58px 58px 0 0; + display: flex; align-items: center; justify-content: space-between; padding: 0 7cqw 0 10cqw; + font: 600 4cqw/1 -apple-system, "SF Pro Text", "Inter", sans-serif; } + .sb .island { position: absolute; left: 50%; top: 2.4cqw; width: 26cqw; height: 7.4cqw; border-radius: 4cqw; + background: #000; transform: translateX(-50%); } + .sb svg { height: 3.4cqw; margin-left: 1.4cqw; } .tile { position: absolute; width: 132px; height: 132px; border-radius: 34px; display: grid; place-items: center; font-size: 72px; box-shadow: 0 18px 36px rgba(60, 35, 10, .18); } .tile img { width: 100%; height: 100%; border-radius: 34px; } @@ -52,7 +69,7 @@ en: "Every pet gets its own profile", }, tierarten: { - layout: "std", img: "src/tierarten.png", arch: "#E3D7FB", + layout: "std", img: "src/tierarten.png", sb: "#FAFAFA", arch: "#E3D7FB", de: "16 Tierarten. Ein Zuhause.", en: "16 species. One home.", }, @@ -77,7 +94,7 @@ en: "Invite friends, climb the ranks", }, spinnen: { - layout: "std", img: "src/spinnen.png", arch: "#CDEBC4", + layout: "std", img: "src/spinnen.png", sb: "#111111", arch: "#CDEBC4", de: "Angst vor Spinnen? Einfach ausblenden", en: "Scared of spiders? Just hide them", }, @@ -87,11 +104,26 @@ const s = SLIDES[q.get("s") || "hero"]; const lang = q.get("lang") || "de"; document.documentElement.lang = lang; + const apple = q.get("p") === "apple"; + if (apple) document.documentElement.classList.add("apple"); document.body.className = s.layout; + + const sbBg = s.sb || "#FFFFFF"; + const sbInk = sbBg === "#111111" ? "#FFFFFF" : "#000000"; + const statusBar = !apple ? "" : + `
+ 9:41
+ + + + + +
`; + document.body.innerHTML = `

${s[lang]}

-
` + +
${statusBar}
` + (s.tiles || []).map(t => `
${t.html}
` ).join("");