+ ('latest');
const typedPhotos = React.useMemo(() => photos as PreviewPhoto[], [photos]);
const hasPhotobooth = React.useMemo(() => typedPhotos.some((p) => p.ingest_source === 'photobooth'), [typedPhotos]);
+ const radius = branding.buttons?.radius ?? 12;
+ const linkColor = branding.buttons?.linkColor ?? branding.secondaryColor;
+ const headingFont = branding.typography?.heading ?? branding.fontFamily ?? undefined;
+ const bodyFont = branding.typography?.body ?? branding.fontFamily ?? undefined;
const items = React.useMemo(() => {
let arr = typedPhotos.slice();
@@ -84,64 +90,82 @@ export default function GalleryPreview({ token }: Props) {
];
return (
-
-
+ {emotions.map((emotion) => {
+ // Localize name and description if they are JSON
+ const localize = (value: string | object, defaultValue: string = ''): string => {
+ if (typeof value === 'string' && value.startsWith('{')) {
+ try {
+ const data = JSON.parse(value as string);
+ return data.de || data.en || defaultValue || '';
+ } catch {
+ return value as string;
+ }
}
- }
- return value as string;
- };
+ return value as string;
+ };
- const localizedName = localize(emotion.name, emotion.name);
- const localizedDescription = localize(emotion.description || '', '');
- return (
-
{/* Skip option */}
diff --git a/resources/js/guest/components/GalleryPreview.tsx b/resources/js/guest/components/GalleryPreview.tsx
index 1b9ad3c..ce1669a 100644
--- a/resources/js/guest/components/GalleryPreview.tsx
+++ b/resources/js/guest/components/GalleryPreview.tsx
@@ -6,6 +6,7 @@ import { getDeviceId } from '../lib/device';
import { usePollGalleryDelta } from '../polling/usePollGalleryDelta';
import { Heart } from 'lucide-react';
import { useTranslation } from '../i18n/useTranslation';
+import { useEventBranding } from '../context/EventBrandingContext';
type Props = { token: string };
@@ -27,10 +28,15 @@ type PreviewPhoto = {
export default function GalleryPreview({ token }: Props) {
const { locale } = useTranslation();
+ const { branding } = useEventBranding();
const { photos, loading } = usePollGalleryDelta(token, locale);
const [mode, setMode] = React.useState
-
-
+
+
- Live-Galerie
-Alle Uploads auf einen Blick
+
+
-
- Alle ansehen →
-
-
+
+
+ Alle ansehen →
+
Live-Galerie
+Alle Uploads auf einen Blick
+
+
-
+ {loading &&
{filters.map((filter) => (
))}
- {loading && Lädt…
} - {!loading && items.length === 0 && ( -Lädt…
} + {!loading && items.length === 0 && ( +
+
+ )}
-
+
{items.map((p: PreviewPhoto) => (
-
-
-
{p.title || getPhotoTitle(p)}
-
-
-
+
@@ -149,12 +173,13 @@ export default function GalleryPreview({ token }: Props) {
))}
+ {p.title || getPhotoTitle(p)} +
+
+
- Lust auf mehr?{' '} - - Zur Galerie → - -
- ++ Lust auf mehr?{' '} + + Zur Galerie → + +
+ + ); } diff --git a/resources/js/guest/components/Header.tsx b/resources/js/guest/components/Header.tsx index 8d1769e..007e85b 100644 --- a/resources/js/guest/components/Header.tsx +++ b/resources/js/guest/components/Header.tsx @@ -172,19 +172,13 @@ export default function Header({ eventToken, title = '' }: { eventToken?: string }, [notificationsOpen]); if (!eventToken) { - const guestName = identity?.name && identity?.hydrated ? identity.name : null; return ({title}
- {guestName && (
-
- {`${t('common.hi')} ${guestName}`}
-
- )}
+
{t('header.loading')}
{renderEventAvatar(event.name, event.type?.icon, accentColor, headerTextColor, branding.logo)}
-
-
{event.name}
- {guestName && (
-
- {`${t('common.hi')} ${guestName}`}
-
- )}
-
+
+
{event.name}
+
{stats && (
<>
diff --git a/resources/js/guest/context/EventBrandingContext.tsx b/resources/js/guest/context/EventBrandingContext.tsx
index 2e08aba..30c374a 100644
--- a/resources/js/guest/context/EventBrandingContext.tsx
+++ b/resources/js/guest/context/EventBrandingContext.tsx
@@ -10,7 +10,7 @@ export const DEFAULT_EVENT_BRANDING: EventBranding = {
primaryColor: '#f43f5e',
secondaryColor: '#fb7185',
backgroundColor: '#ffffff',
- fontFamily: null,
+ fontFamily: 'Montserrat, Inter, "Helvetica Neue", system-ui, -apple-system, BlinkMacSystemFont, sans-serif',
logoUrl: null,
palette: {
primary: '#f43f5e',
@@ -19,8 +19,8 @@ export const DEFAULT_EVENT_BRANDING: EventBranding = {
surface: '#ffffff',
},
typography: {
- heading: null,
- body: null,
+ heading: 'Playfair Display, "Times New Roman", serif',
+ body: 'Montserrat, Inter, "Helvetica Neue", system-ui, -apple-system, BlinkMacSystemFont, sans-serif',
sizePreset: 'm',
},
logo: {
@@ -71,7 +71,7 @@ function resolveBranding(input?: EventBranding | null): EventBranding {
primaryColor: normaliseHexColor(palettePrimary, DEFAULT_EVENT_BRANDING.primaryColor),
secondaryColor: normaliseHexColor(paletteSecondary, DEFAULT_EVENT_BRANDING.secondaryColor),
backgroundColor: normaliseHexColor(paletteBackground, DEFAULT_EVENT_BRANDING.backgroundColor),
- fontFamily: bodyFont?.trim() || null,
+ fontFamily: bodyFont?.trim() || DEFAULT_EVENT_BRANDING.fontFamily,
logoUrl: logoMode === 'upload' ? (logoValue?.trim() || null) : null,
palette: {
primary: normaliseHexColor(palettePrimary, DEFAULT_EVENT_BRANDING.primaryColor),
@@ -80,8 +80,8 @@ function resolveBranding(input?: EventBranding | null): EventBranding {
surface: normaliseHexColor(paletteSurface, paletteBackground ?? DEFAULT_EVENT_BRANDING.backgroundColor),
},
typography: {
- heading: headingFont?.trim() || null,
- body: bodyFont?.trim() || null,
+ heading: headingFont?.trim() || DEFAULT_EVENT_BRANDING.typography?.heading || null,
+ body: bodyFont?.trim() || DEFAULT_EVENT_BRANDING.typography?.body || DEFAULT_EVENT_BRANDING.fontFamily,
sizePreset,
},
logo: {
diff --git a/resources/js/guest/i18n/messages.ts b/resources/js/guest/i18n/messages.ts
index bc3e384..b09cdcf 100644
--- a/resources/js/guest/i18n/messages.ts
+++ b/resources/js/guest/i18n/messages.ts
@@ -132,6 +132,19 @@ export const messages: Record = {
},
home: {
fallbackGuestName: 'Gast',
+ welcomeLine: 'Willkommen {name}!',
+ introRotating: {
+ 0: 'Hilf uns, diesen besonderen Tag mit deinen schönsten Momenten festzuhalten.',
+ 1: 'Fang die Stimmung des Events ein und teile sie mit allen Gästen.',
+ 2: 'Deine Sicht zählt: Halte Augenblicke fest, die sonst niemand bemerkt.',
+ 3: 'Erfülle kleine Fotoaufgaben und fülle die gemeinsame Galerie mit Leben.',
+ 4: 'Zeig uns, was du siehst – deine Fotos erzählen die Geschichte dieses Tages.',
+ 5: 'Mach aus Schnappschüssen gemeinsame Erinnerungen in einer großen Event-Galerie.',
+ 6: 'Diese App ist eure Fotozentrale – fotografiere, lade hoch und begeistere die anderen.',
+ 7: 'Sorge dafür, dass kein wichtiger Moment verloren geht – mit deinen Bildern.',
+ 8: 'Lass dich von Fotoaufgaben inspirieren und halte die besonderen Szenen fest.',
+ 9: 'Mach mit beim Fotospiel: Deine Fotos machen dieses Event unvergesslich.',
+ },
hero: {
subtitle: 'Willkommen zur Party',
title: 'Hey {name}!',
@@ -776,6 +789,19 @@ export const messages: Record = {
},
home: {
fallbackGuestName: 'Guest',
+ welcomeLine: 'Welcome {name}!',
+ introRotating: {
+ 0: 'Help us capture this special day with your favourite moments.',
+ 1: 'Capture the mood of the event and share it with everyone.',
+ 2: 'Your view matters: save the moments that others might miss.',
+ 3: 'Complete playful photo missions and fill the shared gallery with life.',
+ 4: 'Show us what you see – your photos tell the story of this day.',
+ 5: 'Turn quick snapshots into shared memories in one big event gallery.',
+ 6: 'This app is your photo hub – shoot, upload, and delight the other guests.',
+ 7: 'Make sure no important moment gets lost – with your pictures.',
+ 8: 'Let photo missions inspire you and capture the scenes that really matter.',
+ 9: 'Join the photo game: your pictures make this event unforgettable.',
+ },
hero: {
subtitle: 'Welcome to the party',
title: 'Hey {name}!',
diff --git a/resources/js/guest/pages/GalleryPage.tsx b/resources/js/guest/pages/GalleryPage.tsx
index 1b2de86..37090d3 100644
--- a/resources/js/guest/pages/GalleryPage.tsx
+++ b/resources/js/guest/pages/GalleryPage.tsx
@@ -322,7 +322,7 @@ export default function GalleryPage() {
styleOverride={{ borderRadius: radius, fontFamily: headingFont }}
/>
{loading && ();
@@ -25,17 +27,7 @@ export default function HomePage() {
const radius = branding.buttons?.radius ?? 12;
const heroStorageKey = token ? `guestHeroDismissed_${token}` : 'guestHeroDismissed';
- const [heroVisible, setHeroVisible] = React.useState(() => {
- if (typeof window === 'undefined') {
- return true;
- }
-
- try {
- return window.sessionStorage.getItem(heroStorageKey) !== '1';
- } catch {
- return true;
- }
- });
+ const [heroVisible, setHeroVisible] = React.useState(false);
React.useEffect(() => {
if (typeof window === 'undefined') {
@@ -43,9 +35,11 @@ export default function HomePage() {
}
try {
- setHeroVisible(window.sessionStorage.getItem(heroStorageKey) !== '1');
+ const stored = window.sessionStorage.getItem(heroStorageKey);
+ // standardmäßig versteckt, nur sichtbar falls explizit gesetzt (kann später wieder aktiviert werden)
+ setHeroVisible(stored === 'show');
} catch {
- setHeroVisible(true);
+ setHeroVisible(false);
}
}, [heroStorageKey]);
@@ -67,20 +61,37 @@ export default function HomePage() {
const accentColor = branding.primaryColor;
const secondaryAccent = branding.secondaryColor;
- const [missionPreview, setMissionPreview] = React.useState(null);
+ const [missionDeck, setMissionDeck] = React.useState([]);
const [missionLoading, setMissionLoading] = React.useState(false);
const missionPoolRef = React.useRef([]);
- const shuffleMissionPreview = React.useCallback(() => {
+ const drawRandom = React.useCallback((excludeIds: Set) => {
+ const pool = missionPoolRef.current.filter((item) => !excludeIds.has(item.id));
+ if (!pool.length) return null;
+ return pool[Math.floor(Math.random() * pool.length)];
+ }, []);
+
+ const resetDeck = React.useCallback(() => {
const pool = missionPoolRef.current;
if (!pool.length) {
- setMissionPreview(null);
+ setMissionDeck([]);
return;
}
- const choice = pool[Math.floor(Math.random() * pool.length)];
- setMissionPreview(choice);
+ const shuffled = [...pool].sort(() => Math.random() - 0.5);
+ setMissionDeck(shuffled.slice(0, 4));
}, []);
+ const advanceDeck = React.useCallback(() => {
+ setMissionDeck((prev) => {
+ if (!prev.length) return prev;
+ const [, ...rest] = prev;
+ const exclude = new Set(rest.map((r) => r.id));
+ const nextCandidate = drawRandom(exclude);
+ const replenished = nextCandidate ? [...rest, nextCandidate] : rest;
+ return replenished;
+ });
+ }, [drawRandom]);
+
React.useEffect(() => {
if (!token) return;
let cancelled = false;
@@ -108,16 +119,16 @@ export default function HomePage() {
duration: typeof task.duration === 'number' ? task.duration : 3,
emotion: task.emotion ?? null,
}));
- shuffleMissionPreview();
+ resetDeck();
} else {
missionPoolRef.current = [];
- setMissionPreview(null);
+ setMissionDeck([]);
}
} catch (err) {
if (!cancelled) {
console.warn('Mission preview failed', err);
missionPoolRef.current = [];
- setMissionPreview(null);
+ setMissionDeck([]);
}
} finally {
if (!cancelled) {
@@ -129,14 +140,35 @@ export default function HomePage() {
return () => {
cancelled = true;
};
- }, [shuffleMissionPreview, token, locale]);
+ }, [resetDeck, token, locale]);
if (!token) {
return null;
}
+ const introArray: string[] = [];
+ for (let i = 0; i < 12; i += 1) {
+ const candidate = t(`home.introRotating.${i}`, '');
+ if (candidate) {
+ introArray.push(candidate);
+ }
+ }
+ const introMessage =
+ introArray.length > 0 ? introArray[Math.floor(Math.random() * introArray.length)] : '';
+
return (
-
{t('galleryPage.loading', 'Lade…')}
} -
+
{currentPhotoIndex !== null && list.length > 0 && (
{list.map((p: GalleryPhoto) => {
const imageUrl = normalizeImageUrl(p.thumbnail_path || p.file_path);
const createdLabel = p.created_at
@@ -357,7 +357,7 @@ export default function GalleryPage() {
{
(e.target as HTMLImageElement).src = 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cmVjdCB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSIjRjNGNEY2Ii8+PHRleHQgeD0iNTAlIiB5PSI1MCUiIGZvbnQtZmFtaWx5PSJBcmlhbCIgZm9udC1zaXplPSIxNCIgZmlsbD0iIzk5OSIgdGV4dC1hbmNob3I9Im1pZGRsZSIgZHk9Ii4zZW0iPk5vIEltYWdlPC90ZXh0Pjwvc3ZnPg==';
}}
@@ -425,6 +425,20 @@ export default function GalleryPage() {
);
})}
+ {list.length === 0 && Array.from({ length: 6 }).map((_, idx) => (
+
+
+
+ ))}
+
+
+
+
+
+
+
{heroVisible && (
-
+ {t('home.welcomeLine').replace('{name}', displayName)} +
+ {introMessage && ( ++ {introMessage} +
+ )} +
-
-
-
-
- Starte dein Fotospiel
-Wähle, wie du den nächsten Moment einfängst.
-
+
+
@@ -254,58 +280,233 @@ function MissionActionCard({
token,
mission,
loading,
- onShuffle,
+ onAdvance,
+ stack,
}: {
token: string;
mission: MissionPreview | null;
loading: boolean;
- onShuffle: () => void;
+ onAdvance: () => void;
+ stack: MissionPreview[];
}) {
+ const { branding } = useEventBranding();
+ const radius = branding.buttons?.radius ?? 12;
+ const primary = branding.buttons?.primary ?? branding.primaryColor;
+ const secondary = branding.buttons?.secondary ?? branding.secondaryColor;
+ const buttonStyle = branding.buttons?.style ?? 'filled';
+ const headingFont = branding.typography?.heading ?? branding.fontFamily ?? undefined;
+ const bodyFont = branding.typography?.body ?? branding.fontFamily ?? undefined;
+ const textColor = '#1f2937';
+ const subTextColor = '#334155';
+ const swipeThreshold = 120;
+ const stackLayers = stack.slice(1, 4);
+
+ const cardStyle: React.CSSProperties = {
+ borderRadius: `${radius + 8}px`,
+ backgroundColor: '#fcf7ef',
+ backgroundImage: `linear-gradient(0deg, ${primary}33, ${primary}22), url(/patterns/rays-sunburst.svg)`,
+ backgroundBlendMode: 'multiply, normal',
+ backgroundSize: '330% 330%',
+ backgroundPosition: 'center',
+ backgroundRepeat: 'no-repeat',
+ filter: 'contrast(1.12) saturate(1.1)',
+ border: `1px solid ${primary}26`,
+ boxShadow: `0 12px 28px ${primary}22, 0 2px 6px ${primary}1f`,
+ fontFamily: bodyFont,
+ position: 'relative',
+ overflow: 'hidden',
+ };
+
+ const [{ x, y, rotateZ, rotateY, rotateX, scale, opacity }, api] = useSpring(() => ({
+ x: 0,
+ y: 0,
+ rotateZ: 0,
+ rotateY: 0,
+ rotateX: 0,
+ scale: 1,
+ opacity: 1,
+ config: { tension: 320, friction: 26 },
+ }));
+
+ React.useEffect(() => {
+ api.start({ x: 0, y: 0, rotateZ: 0, rotateY: 0, rotateX: 0, scale: 1, opacity: 1, immediate: false });
+ }, [mission?.id, api]);
+
+ const bind = useGesture(
+ {
+ onDrag: ({ active, movement: [mx, my], velocity: [vx], direction: [dx], cancel }) => {
+ if (active && Math.abs(mx) > swipeThreshold) {
+ cancel?.();
+ api.start({
+ x: dx > 0 ? 520 : -520,
+ y: my,
+ rotateZ: dx > 0 ? 12 : -12,
+ rotateY: dx > 0 ? 18 : -18,
+ rotateX: -my / 10,
+ opacity: 0,
+ scale: 1,
+ immediate: false,
+ onRest: () => {
+ onAdvance();
+ api.start({ x: 0, y: 0, rotateZ: 0, rotateY: 0, rotateX: 0, opacity: 1, scale: 1, immediate: false });
+ },
+ });
+ return;
+ }
+
+ api.start({
+ x: mx,
+ y: my,
+ rotateZ: mx / 18,
+ rotateY: mx / 28,
+ rotateX: -my / 36,
+ scale: active ? 1.02 : 1,
+ opacity: 1,
+ immediate: false,
+ });
+ },
+ onDragEnd: () => {
+ api.start({ x: 0, y: 0, rotateZ: 0, rotateY: 0, rotateX: 0, scale: 1, opacity: 1, immediate: false });
+ },
+ },
+ {
+ drag: {
+ filterTaps: true,
+ bounds: { left: -200, right: 200, top: -120, bottom: 120 },
+ rubberband: true,
+ },
+ }
+ );
+
return (
-
-
-
-
- {mission ? (
- <>
-
-
-
- Mission starten
-
- Wir haben bereits eine Aufgabe für dich vorbereitet. Tippe, um direkt loszulegen.
-
-
- {mission.title}
- {mission.description && ( -{mission.description}
- )} -
- {mission.duration ?? 3} Min
- {mission.emotion?.name && {mission.emotion.name}}
-
-
- ) : (
- - Ziehe deine erste Mission im Aufgaben-Tab oder lade deine Stimmung hoch. -
- )} -
-
-