feat(store): Play-Store-Marketing-Screenshots im Buffer-Stil (DE/EN)

HTML-Vorlage + Headless-Chrome-Render (1080x1920): Hero mit gekipptem
Handy und Tier-Kacheln, 7 Feature-Bilder mit Headline und Farbbogen.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

mobile/store-assets/play-marketing/render.sh

@@ -0,0 +1,19 @@
+#!/bin/sh
+# Rendert die Play-Store-Marketing-Screenshots (1080x1920) per Headless-Chrome.
+# 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)
+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
+  done
+done
+ls out/*

mobile/store-assets/play-marketing/template.html

@@ -0,0 +1,100 @@
+<!doctype html>
+<html>
+<head>
+<meta charset="utf-8">
+<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@700;800&display=swap" rel="stylesheet">
+<style>
+  :root { --bg: #F6F1EA; --ink: #1F1A17; --brand: #F97316; }
+  * { margin: 0; box-sizing: border-box; }
+  html, body { width: 1080px; height: 1920px; overflow: hidden; background: var(--bg); }
+  body { position: relative; font-family: "Plus Jakarta Sans", sans-serif; color: var(--ink); }
+
+  h1 { font-weight: 800; letter-spacing: -0.03em; line-height: 1.05; text-wrap: balance; }
+  h1 em { font-style: normal; color: var(--brand); }
+
+  .arch { position: absolute; left: 70px; right: 70px; top: 820px; bottom: -40px; border-radius: 470px 470px 0 0; }
+
+  .phone { position: absolute; background: #16130F; padding: 14px; border-radius: 72px;
+           box-shadow: 0 40px 80px rgba(60, 35, 10, .22), 0 8px 20px rgba(60, 35, 10, .12); }
+  .phone img { display: block; width: 100%; border-radius: 58px; }
+
+  /* Standard-Layout: Headline zentriert, Handy gerade */
+  .std h1 { position: absolute; top: 150px; left: 80px; right: 80px; text-align: center; font-size: 92px; }
+  .std .phone { left: 50%; top: 470px; width: 660px; transform: translateX(-50%); }
+
+  /* Hero-Layout: Headline links, Handy gekippt + angeschnitten */
+  .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; }
+  .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; }
+</style>
+</head>
+<body>
+<script>
+  const SLIDES = {
+    hero: {
+      layout: "hero", img: "src/feed.png", arch: "#FFD3B0",
+      de: "Dein Tier.<br><em>Sein Netzwerk.</em>",
+      en: "Your pet.<br><em>Their network.</em>",
+      tiles: [
+        { x: 860, y: 90, r: 12, html: '<img src="src/icon.png">' },
+        { x: 120, y: 620, r: -10, bg: "#BFE3F5", html: "🐦" },
+        { x: 70, y: 1180, r: 8, bg: "#FFFFFF", html: "🐱" },
+        { x: 160, y: 1640, r: -6, bg: "#CDEBC4", html: "🐰" },
+        { x: 900, y: 1500, r: 10, bg: "#E3D7FB", html: "🐶" },
+      ],
+    },
+    profil: {
+      layout: "std", img: "src/profil.png", arch: "#CDEBC4",
+      de: "Jedes Tier bekommt sein eigenes Profil",
+      en: "Every pet gets its own profile",
+    },
+    tierarten: {
+      layout: "std", img: "src/tierarten.png", arch: "#E3D7FB",
+      de: "16 Tierarten. Ein Zuhause.",
+      en: "16 species. One home.",
+    },
+    nachrichten: {
+      layout: "std", img: "src/nachrichten.png", arch: "#BFE3F5",
+      de: "Von Tier zu Tier&nbsp;– per Nachricht",
+      en: "Pet to pet&nbsp;– via direct message",
+    },
+    gesundheit: {
+      layout: "std", img: "src/gesundheit.png", arch: "#FBE7A6",
+      de: "Gesundheit immer im Blick",
+      en: "Keep track of their health",
+    },
+    benachrichtigungen: {
+      layout: "std", img: "src/benachrichtigungen.png", arch: "#FBCFD6",
+      de: "Sofort wissen, wer dein Tier feiert",
+      en: "See who's cheering for your pet",
+    },
+    raenge: {
+      layout: "std", img: "src/raenge.png", arch: "#FFD3B0",
+      de: "Freunde einladen, Ränge aufsteigen",
+      en: "Invite friends, climb the ranks",
+    },
+    spinnen: {
+      layout: "std", img: "src/spinnen.png", arch: "#CDEBC4",
+      de: "Angst vor Spinnen? Einfach ausblenden",
+      en: "Scared of spiders? Just hide them",
+    },
+  };
+
+  const q = new URLSearchParams(location.search);
+  const s = SLIDES[q.get("s") || "hero"];
+  const lang = q.get("lang") || "de";
+  document.documentElement.lang = lang;
+  document.body.className = s.layout;
+  document.body.innerHTML =
+    `<div class="arch" style="background:${s.arch}"></div>
+     <h1>${s[lang]}</h1>
+     <div class="phone"><img src="${s.img}"></div>` +
+    (s.tiles || []).map(t =>
+      `<div class="tile" style="left:${t.x}px;top:${t.y}px;transform:rotate(${t.r}deg);background:${t.bg || "none"}">${t.html}</div>`
+    ).join("");
+</script>
+</body>
+</html>