Clerkcode02/app-screenshot-showcase

App Screenshot Showcase

Echte Screenshots sind die Quelle der Wahrheit. Erfinden, übermalen, retuschieren oder „verbessern“ Sie niemals die App-Oberfläche. Ändern Sie niemals Text in Screenshots.

Zwei Gerätetypen. Report, Review und Resolve sind Screenshots der Bürger-App (device: "mobile", dargestellt in PhoneFrame, Hochformat). Assign und Respond finden in der Web-Ansicht des Operationszentrums statt, nicht in der mobilen App (device: "web", dargestellt in BrowserFrame, Querformat) – siehe sos-content-accuracy „Geprüfte Produkt-Fakten“. Achten Sie darauf bei der Aufnahme: Ein Web-Dashboard-Screenshot, der in einen Telefonrahmen gezwungen wird, stellt das Produkt falsch dar.

Wo Dateien abgelegt werden

Was	Ablageort (Benutzer)	Ausgabe (generiert)
App-Screenshots (PNG/JPG, volle Auflösung)	assets/screenshots-raw/	public/screenshots/<id>.webp (+ .avif)
Logo, App-Icon, Markenzeichen	assets/brand-raw/	public/brand/
Open Graph Bild (1200×630)	assets/brand-raw/og-image.png	public/brand/og-image.jpg

assets/ wird nicht bereitgestellt. Nur optimierte Dateien in public/ werden ausgeliefert.

Namenskonvention

<reihenfolge>-<bildschirmzweck>.png, Kleinbuchstaben mit Bindestrichen, z. B. 01-home.png, 02-category-select.png, 03-report-form.png, 04-report-submitted.png, 06-welcome.png, 07-register.png, 08-verify.png, 09-login.png. Wenn die Benutzerdateien willkürlich benannt sind, prüfen Sie jede und benennen Sie sie nach dem Zweck um.

Aktuelle Manifest-IDs und was jede enthalten sollte:

ID (Dateinamenbasis)	Gerät	Bildschirm
hero-primary	mobil	Startbildschirm
hero-secondary	mobil	Kategorieauswahl-Bildschirm
how-report	mobil	Meldeformular (Erfassen/Einreichen eines Vorfalls)
how-review	mobil	Bestätigungsbildschirm nach dem Einreichen
how-assign	web	Web-Ansicht des Operationszentrums – Meldung wird zugewiesen
how-respond	web	Web-Ansicht des Operationszentrums – Routenführung/Standort des Helfers
how-resolve	mobil	Statusbildschirm mit einer abgeschlossenen Meldung
register-welcome	mobil	Willkommens-/Erstöffnungsbildschirm
register-form	mobil	Registrierungsdetails-Bildschirm
register-verify	mobil	Verifizierungsbildschirm (weglassen, wenn die App keinen hat)
register-home	mobil	Anmeldebildschirm

Mobil-Screenshots: Hochformat, direkt vom Telefon, unbeschnitten. Web-Screenshots (how-assign, how-respond): Querformat-Browseraufnahmen der Operationszentrums-Ansicht, unbeschnitten.

Aufnahme-Workflow (für jeden neuen Batch)

1. Prüfen Sie jedes Bild (öffnen Sie es). Identifizieren Sie den Zweck: Willkommen, Registrierung, Verifizierung, Anmeldung, Startseite, Kategorieauswahl, Meldeformular, Kamera/Aufnahme, Bestätigung, Status/Verfolgung, Benachrichtigungen, Helfer-Ansicht, Karte/Route, Sonstiges.
2. Datenschutzprüfung – suchen Sie nach echten Namen, Telefonnummern, E-Mail-Adressen, Adressen, Gesichtern, Kennzeichen, genauen Wohnorten, Ausweisen, Tokens. Wenn gefunden: stoppen und den Benutzer um eine bereinigte Version bitten. Verwischen/ bearbeiten Sie NICHT selbst, es sei denn, der Benutzer bittet ausdrücklich darum, und dann nur verwischen, niemals die UI ändern.
3. Abmessungen und Seitenverhältnis notieren. Niemals UI wegschneiden oder strecken. Die Statusleiste kann so bleiben, wie sie ist.
4. Optimieren: npm run optimize:screenshots (sharp): Ausgabe WebP q≈82 und AVIF q≈60 bei maximaler Breite 1080px, Original-Seitenverhältnis beibehalten, Metadaten entfernen (EXIF/GPS). Text lesbar halten – nach der Komprimierung hineinzoomen, um kleine UI-Texte zu überprüfen.
5. Registrieren in src/config/screenshots.ts (siehe Schema unten).
6. Platzieren anhand der Zuordnungstabelle; bei Unklarheit die Platzierung dem Benutzer in einer kurzen Liste vorschlagen.
7. Layout bei 320/768/1440 überprüfen, kein CLS, Alt-Text vorhanden, nur hero verwendet priority.
8. docs/assets-guide.md Aufnahmelog aktualisieren.

Manifest-Schema

// src/config/screenshots.ts
export type ScreenPurpose =
  | "welcome" | "register" | "verify" | "login" | "home"
  | "category" | "report-form" | "capture" | "submitted"
  | "status" | "notifications" | "responder" | "map" | "other";

export type Slot =
  | "hero-primary" | "hero-secondary"
  | "how-report" | "how-review" | "how-assign" | "how-respond" | "how-resolve"
  | "showcase" | "register-welcome" | "register-form" | "register-verify" | "register-home"
  | "tracking";

export type Device = "mobile" | "web"; // mobile → PhoneFrame, web → BrowserFrame

export interface Screenshot {
  id: string;                 // "03-report-form"
  src: string | null;         // "/screenshots/03-report-form.webp"; null = Platzhalter
  width: number; height: number; // intrinsische px der optimierten Datei
  alt: string;                // beschreibt, was der Bildschirm zeigt, sachlich
  purpose: ScreenPurpose;
  slots: Slot[];
  device: Device;
  caption?: string;
  privacyChecked: boolean;    // muss true sein, bevor src in der Produktion nicht null ist
}
export const screenshots: Screenshot[] = [ /* ... */ ];
export const bySlot = (slot: Slot) => screenshots.filter(s => s.slots.includes(slot));

• Standard-Platzhalter-Seitenverhältnis: 1179×2556 (≈ 9:19.5) für device: "mobile"; 1600×1000 (≈ 16:10) für device: "web" – bis die echten Größen bekannt sind.
• Der Build sollte warnen (Konsole im Dev-Modus), wenn ein Screenshot src hat, aber privacyChecked: false.

Platzierungs-Zuordnung

Bildschirmzweck	Slot(s)	Gerät
home	hero-primary, register-home, showcase	mobil
category	hero-secondary, how-report, showcase	mobil
report-form / capture	how-report, showcase	mobil
submitted	how-review, showcase	mobil
status	tracking, how-resolve, showcase	mobil
notifications (assign)	how-assign	web
map/route (respond)	how-respond	web
welcome	register-welcome	mobil
register	register-form	mobil
verify	register-verify (Schritt ganz weglassen, wenn es diesen Bildschirm nicht gibt)	mobil
login	register-home	mobil

showcase enthält immer nur Mobil-App-Screens (Report, Review, Resolve) – es ist die Bürger-App-Showcase, kein Platz für die Web-Ansicht des Operationszentrums.

Alt-Text-Regeln

Beschreiben Sie, was sichtbar ist, keine Marketing-Behauptungen. Gut: „Kategorieauswahl-Bildschirm mit den Optionen Rettung, Polizei, Feuerwehr und anderen Meldetypen.“ Schlecht: „Schnelle, einfache Meldung!“ Dekorative Duplikate (z. B. eine Spiegelung) erhalten alt="".

PhoneFrame / BrowserFrame / DeviceFrame Komponenten

• PhoneFrame: reiner CSS-Rahmen, abgerundetes Rechteck (ink-raised), 1px innerer Highlight, dünner Bildschirmrand, optionaler Dynamic-Island-Pill. Keine PNG-Gerätemockups.
• BrowserFrame: reiner CSS-Browserfenster-Rahmen (gleiche Oberflächensprache), drei einfache Chrome-Punkte, keine gefälschte URL-Leiste oder erfundene Browser-UI. Wird für device: "web"-Screens (Assign, Respond) verwendet.
• DeviceFrame: wählt PhoneFrame vs BrowserFrame basierend auf screenshot.device – verwenden Sie dies an Aufrufstellen, die eine Stage/Slot generisch rendern (How It Works), anstatt einen Rahmentyp hart zu codieren.
• Kinder: next/image mit explizitem width/height aus dem Manifest, sizes gesetzt (z. B. (min-width:1024px) 320px, 70vw), loading="lazy" außer hero-primary (priority, fetchPriority="high").
• Platzhalter-Modus (src === null): neutraler Verlaufsbildschirm, kleines Label „Screenshot-Slot: – wartet auf echten App-Screen“, korrektes Seitenverhältnis. Keine gefälschten UI-Elemente, keine gefälschten Buttons oder Texte.
• Bildschirminhalt muss aufrecht und lesbar bleiben: max. rotateY 18°, niemals spiegeln.
• Mobil (< 1024px): keine 3D-Rotation; flache Telefone, natives horizontales Scroll-Snap-Galerie (snap-x snap-mandatory, scroll-padding), sichtbare Scroll-Möglichkeit, Tastatur-fokussierbare Region mit aria-label.

Checkliste pro Batch

• Jedes Bild geprüft und Zweck identifiziert
• Keine personenbezogenen Daten sichtbar (oder Benutzer hat bestätigt, dass es sich um Dummy-Daten handelt)
• Optimierte Dateien < ~180KB jede, Text noch lesbar
• Manifest-Einträge vollständig: Abmessungen, alt, Zweck, Slots, Gerät, privacyChecked
• Nur ein priority-Bild auf der Seite
• Kein Layout-Shift; Seitenverhältnisse intakt
• Unbenutzte Platzhalter-Slots rendern weiterhin ehrlich beschriftet
• Lighthouse mobil nach Integration erneut ausführen