weitere verbesserungen der Guest PWA (vor allem TaskPicker)

2025-11-12 13:19:28 +01:00
parent 1cec116933
commit d91108c883
20 changed files with 2306 additions and 653 deletions
--- a/app/Http/Middleware/ContentSecurityPolicy.php
+++ b/app/Http/Middleware/ContentSecurityPolicy.php
@@ -99,13 +99,13 @@ class ContentSecurityPolicy

        if (app()->environment(['local', 'development']) || config('app.debug')) {
            $devHosts = [
-                'http://localhost:5173',
+                'http://fotospiel-app.test:5173',
                'http://127.0.0.1:5173',
                'https://localhost:5173',
                'https://127.0.0.1:5173',
            ];
            $wsHosts = [
-                'ws://localhost:5173',
+                'ws://fotospiel-app.test:5173',
                'ws://127.0.0.1:5173',
                'wss://localhost:5173',
                'wss://127.0.0.1:5173',
--- a/config/app.php
+++ b/config/app.php
@@ -52,7 +52,7 @@ return [
    |
    */

-    'url' => env('APP_URL', 'http://localhost'),
+    'url' => env('APP_URL', 'http://fotospiel-app.test'),

    /*
    |--------------------------------------------------------------------------
--- a/config/sanctum.php
+++ b/config/sanctum.php
@@ -17,7 +17,7 @@ return [

    'stateful' => explode(',', env('SANCTUM_STATEFUL_DOMAINS', sprintf(
        '%s%s',
-        'localhost,localhost:3000,127.0.0.1,127.0.0.1:8000,::1',
+        'localhost,localhost:3000,127.0.0.1,127.0.0.1:8000,::1,fotospiel-app.test,fotospiel.app',
        Sanctum::currentApplicationUrlWithPort(),
        // Sanctum::currentRequestHost(),
    ))),
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -39,10 +39,11 @@
    "dependencies": {
        "@headlessui/react": "^2.2.0",
        "@inertiajs/react": "^2.1.0",
+        "@jpisnice/shadcn-ui-mcp-server": "^1.1.4",
        "@modelcontextprotocol/server-puppeteer": "^2025.5.12",
        "@modelcontextprotocol/server-sequential-thinking": "^2025.7.1",
        "@paypal/react-paypal-js": "^8.9.2",
-        "@playwright/mcp": "^0.0.37",
+        "@playwright/mcp": "^0.0.46",
        "@radix-ui/react-accordion": "^1.2.12",
        "@radix-ui/react-avatar": "^1.1.10",
        "@radix-ui/react-checkbox": "^1.1.4",
@@ -66,9 +67,9 @@
        "@tanstack/react-query": "^5.90.2",
        "@types/react": "^19.0.3",
        "@types/react-dom": "^19.0.2",
-        "@upstash/context7-mcp": "^1.0.21",
+        "@upstash/context7-mcp": "^1.0.26",
        "@vitejs/plugin-react": "^4.6.0",
-        "chrome-devtools-mcp": "^0.9.0",
+        "chrome-devtools-mcp": "^0.10.1",
        "class-variance-authority": "^0.7.1",
        "clsx": "^2.1.1",
        "concurrently": "^9.0.1",
@@ -76,6 +77,8 @@
        "embla-carousel": "^8.6.0",
        "embla-carousel-autoplay": "^8.6.0",
        "embla-carousel-react": "^8.6.0",
+        "fabric": "^6.0.1",
+        "fabricjs-design-tool": "github:rifrocket/fabricjs-design-tool#main",
        "globals": "^15.14.0",
        "html5-qrcode": "^2.3.8",
        "i18next": "^25.5.3",
@@ -83,14 +86,12 @@
        "i18next-http-backend": "^3.0.2",
        "laravel-vite-plugin": "^2.0",
        "lucide-react": "^0.475.0",
-        "fabric": "^6.0.1",
-        "fabricjs-design-tool": "github:rifrocket/fabricjs-design-tool#main",
        "pdf-lib": "^1.17.1",
        "react": "^19.0.0",
        "react-dom": "^19.0.0",
-        "react-rnd": "^10.4.12",
        "react-hot-toast": "^2.6.0",
        "react-i18next": "^16.0.0",
+        "react-rnd": "^10.4.12",
        "react-router-dom": "^7.8.2",
        "tailwind-merge": "^3.0.1",
        "tailwindcss": "^4.0.0",
--- a/resources/css/app.css
+++ b/resources/css/app.css
@@ -134,6 +134,10 @@ html.dark {
  background-color: oklch(0.145 0 0);
 }

+body {
+  font-family: var(--guest-font-family), 'Inter', 'Helvetica Neue', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
+}
+
@keyframes aurora {
  0%,
  100% {
--- a/resources/js/guest/components/EmotionPicker.tsx
+++ b/resources/js/guest/components/EmotionPicker.tsx
@@ -2,6 +2,7 @@ import React, { useState, useEffect } from 'react';
 import { useNavigate, useParams } from 'react-router-dom';
 import { Button } from '@/components/ui/button';
 import { ChevronRight } from 'lucide-react';
+import { cn } from '@/lib/utils';

 interface Emotion {
  id: number;
@@ -13,9 +14,19 @@ interface Emotion {

 interface EmotionPickerProps {
  onSelect?: (emotion: Emotion) => void;
+  variant?: 'standalone' | 'embedded';
+  title?: string;
+  subtitle?: string;
+  showSkip?: boolean;
 }

-export default function EmotionPicker({ onSelect }: EmotionPickerProps) {
+export default function EmotionPicker({
+  onSelect,
+  variant = 'standalone',
+  title,
+  subtitle,
+  showSkip,
+}: EmotionPickerProps) {
  const { token } = useParams<{ token: string }>();
  const eventKey = token ?? '';
  const navigate = useNavigate();
@@ -73,17 +84,29 @@ export default function EmotionPicker({ onSelect }: EmotionPickerProps) {
    }
  };

+  const headingTitle = title ?? 'Wie fühlst du dich?';
+  const headingSubtitle = subtitle ?? '(optional)';
+  const shouldShowSkip = showSkip ?? variant === 'standalone';
+
  const content = (
    <div className="space-y-4">
-      <div className="flex items-center justify-between">
-        <h3 className="text-base font-semibold">
-          Wie fühlst du dich?
-          <span className="ml-2 text-xs text-muted-foreground">(optional)</span>
-        </h3>
-        {loading && <span className="text-xs text-muted-foreground">Lade Emotionen…</span>}
-      </div>
+      {(variant === 'standalone' || title) && (
+        <div className="flex items-center justify-between">
+          <h3 className="text-base font-semibold">
+            {headingTitle}
+            {headingSubtitle && <span className="ml-2 text-xs text-muted-foreground">{headingSubtitle}</span>}
+          </h3>
+          {loading && <span className="text-xs text-muted-foreground">Lade Emotionen…</span>}
+        </div>
+      )}

-      <div className="flex gap-3 overflow-x-auto pb-2 [-ms-overflow-style:none] [scrollbar-width:none]" aria-label="Emotions">
+      <div
+        className={cn(
+          'grid gap-3 pb-2',
+          variant === 'standalone' ? 'grid-cols-2 sm:grid-cols-3' : 'grid-cols-2 sm:grid-cols-3'
+        )}
+        aria-label="Emotions"
+      >
        {emotions.map((emotion) => {
          // Localize name and description if they are JSON
          const localize = (value: string | object, defaultValue: string = ''): string => {
@@ -125,18 +148,20 @@ export default function EmotionPicker({ onSelect }: EmotionPickerProps) {
      </div>

      {/* Skip option */}
-      <div className="mt-4">
-        <Button
-          variant="ghost"
-          className="w-full text-sm text-gray-600 dark:text-gray-300 hover:text-pink-600 hover:bg-pink-50 dark:hover:bg-gray-800 border-t border-gray-200 dark:border-gray-700 pt-3 mt-3"
-          onClick={() => {
-            if (!eventKey) return;
-            navigate(`/e/${encodeURIComponent(eventKey)}/tasks`);
-          }}
-        >
-          Überspringen und Aufgabe wählen
-        </Button>
-      </div>
+      {shouldShowSkip && (
+        <div className="mt-4">
+          <Button
+            variant="ghost"
+            className="w-full text-sm text-gray-600 dark:text-gray-300 hover:text-pink-600 hover:bg-pink-50 dark:hover:bg-gray-800 border-t border-gray-200 dark:border-gray-700 pt-3 mt-3"
+            onClick={() => {
+              if (!eventKey) return;
+              navigate(`/e/${encodeURIComponent(eventKey)}/tasks`);
+            }}
+          >
+            Überspringen und Aufgabe wählen
+          </Button>
+        </div>
+      )}
    </div>
  );

@@ -148,9 +173,9 @@ export default function EmotionPicker({ onSelect }: EmotionPickerProps) {
    );
  }

-  return (
-    <div className="rounded-3xl border border-muted/40 bg-gradient-to-br from-white to-white/70 p-4 shadow-sm backdrop-blur">
-      {content}
-    </div>
-  );
+  if (variant === 'embedded') {
+    return content;
+  }
+
+  return <div className="rounded-3xl border border-muted/40 bg-gradient-to-br from-white to-white/70 p-4 shadow-sm backdrop-blur">{content}</div>;
 }
--- a/resources/js/guest/components/GalleryPreview.tsx
+++ b/resources/js/guest/components/GalleryPreview.tsx
@@ -123,6 +123,13 @@ export default function GalleryPreview({ token }: Props) {
          </Link>
        ))}
      </div>
+
+      <p className="text-center text-sm text-muted-foreground">
+        Lust auf mehr?{' '}
+        <Link to={`/e/${encodeURIComponent(token)}/gallery`} className="font-semibold text-pink-600 hover:text-pink-700">
+          Zur Galerie →
+        </Link>
+      </p>
    </section>
  );
 }
--- a/resources/js/guest/components/Header.tsx
+++ b/resources/js/guest/components/Header.tsx
@@ -1,12 +1,15 @@
 import React from 'react';
+import { Link } from 'react-router-dom';
 import AppearanceToggleDropdown from '@/components/appearance-dropdown';
-import { User, Heart, Users, PartyPopper, Camera } from 'lucide-react';
+import { User, Heart, Users, PartyPopper, Camera, Bell, ArrowUpRight } from 'lucide-react';
 import { useEventData } from '../hooks/useEventData';
 import { useOptionalEventStats } from '../context/EventStatsContext';
 import { useOptionalGuestIdentity } from '../context/GuestIdentityContext';
 import { SettingsSheet } from './settings-sheet';
 import { useTranslation } from '../i18n/useTranslation';
 import { DEFAULT_EVENT_BRANDING, useOptionalEventBranding } from '../context/EventBrandingContext';
+import { useOptionalNotificationCenter } from '../context/NotificationCenterContext';
+import { useGuestTaskProgress, TASK_BADGE_TARGET } from '../hooks/useGuestTaskProgress';

 const EVENT_ICON_COMPONENTS: Record<string, React.ComponentType<{ className?: string }>> = {
  heart: Heart,
@@ -86,6 +89,31 @@ export default function Header({ eventToken, title = '' }: { eventToken?: string
  const branding = brandingContext?.branding ?? DEFAULT_EVENT_BRANDING;
  const primaryForeground = '#ffffff';
  const { event, status } = useEventData();
+  const notificationCenter = useOptionalNotificationCenter();
+  const [notificationsOpen, setNotificationsOpen] = React.useState(false);
+  const taskProgress = useGuestTaskProgress(eventToken);
+  const panelRef = React.useRef<HTMLDivElement | null>(null);
+  const checklistItems = React.useMemo(
+    () => [
+      t('home.checklist.steps.first'),
+      t('home.checklist.steps.second'),
+      t('home.checklist.steps.third'),
+    ],
+    [t],
+  );
+
+  React.useEffect(() => {
+    if (!notificationsOpen) {
+      return;
+    }
+    const handler = (event: MouseEvent) => {
+      if (!panelRef.current) return;
+      if (panelRef.current.contains(event.target as Node)) return;
+      setNotificationsOpen(false);
+    };
+    document.addEventListener('mousedown', handler);
+    return () => document.removeEventListener('mousedown', handler);
+  }, [notificationsOpen]);

  if (!eventToken) {
    const guestName = identity?.name && identity?.hydrated ? identity.name : null;
@@ -139,7 +167,6 @@ export default function Header({ eventToken, title = '' }: { eventToken?: string

  const stats =
    statsContext && statsContext.eventKey === eventToken ? statsContext : undefined;
-
  return (
    <div
      className="sticky top-0 z-20 flex items-center justify-between border-b border-white/10 px-4 py-3 text-white shadow-sm backdrop-blur"
@@ -172,6 +199,17 @@ export default function Header({ eventToken, title = '' }: { eventToken?: string
        </div>
      </div>
      <div className="flex items-center gap-2">
+        {notificationCenter && (
+          <NotificationButton
+            eventToken={eventToken}
+            center={notificationCenter}
+            open={notificationsOpen}
+            onToggle={() => setNotificationsOpen((prev) => !prev)}
+            panelRef={panelRef}
+            checklistItems={checklistItems}
+            taskProgress={taskProgress?.hydrated ? taskProgress : undefined}
+          />
+        )}
        <AppearanceToggleDropdown />
        <SettingsSheet />
      </div>
@@ -179,4 +217,101 @@ export default function Header({ eventToken, title = '' }: { eventToken?: string
  );
 }

-export {}
+function NotificationButton({
+  center,
+  eventToken,
+  open,
+  onToggle,
+  panelRef,
+  checklistItems,
+  taskProgress,
+}: {
+  center: {
+    queueCount: number;
+    inviteCount: number;
+    totalCount: number;
+  };
+  eventToken: string;
+  open: boolean;
+  onToggle: () => void;
+  panelRef: React.RefObject<HTMLDivElement>;
+  checklistItems: string[];
+  taskProgress?: ReturnType<typeof useGuestTaskProgress>;
+}) {
+  if (!center) {
+    return null;
+  }
+
+  const totalCount = center.totalCount;
+  const progressRatio = taskProgress
+    ? Math.min(1, taskProgress.completedCount / TASK_BADGE_TARGET)
+    : 0;
+
+  return (
+    <div className="relative">
+      <button
+        type="button"
+        onClick={onToggle}
+        className="relative rounded-full bg-white/15 p-2 text-white transition hover:bg-white/30"
+        aria-label="Benachrichtigungen anzeigen"
+      >
+        <Bell className="h-5 w-5" aria-hidden />
+        {totalCount > 0 && (
+          <span className="absolute -right-1 -top-1 rounded-full bg-white px-1.5 text-[10px] font-semibold text-pink-600">
+            {totalCount}
+          </span>
+        )}
+      </button>
+      {open && (
+        <div
+          ref={panelRef}
+          className="absolute right-0 mt-2 w-72 rounded-2xl border border-white/30 bg-white/95 p-4 text-slate-900 shadow-2xl"
+        >
+          <p className="text-sm font-semibold text-slate-900">Benachrichtigungen</p>
+          <p className="text-xs text-slate-500">Uploads in Warteschlange: {center.queueCount}</p>
+          <Link
+            to={`/e/${encodeURIComponent(eventToken)}/queue`}
+            className="mt-2 flex items-center justify-between rounded-xl border border-slate-200 px-3 py-2 text-sm font-semibold text-pink-600 transition hover:border-pink-300"
+          >
+            Zur Warteschlange
+            <ArrowUpRight className="h-4 w-4" aria-hidden />
+          </Link>
+          {taskProgress && (
+            <div className="mt-3 rounded-2xl border border-slate-200 bg-slate-50/90 p-3">
+              <div className="flex items-center justify-between">
+                <div>
+                  <p className="text-xs uppercase tracking-[0.3em] text-slate-400">Badge-Fortschritt</p>
+                  <p className="text-lg font-semibold text-slate-900">
+                    {taskProgress.completedCount}/{TASK_BADGE_TARGET}
+                  </p>
+                </div>
+                <Link
+                  to={`/e/${encodeURIComponent(eventToken)}/tasks`}
+                  className="rounded-full border border-slate-200 px-3 py-1 text-xs font-semibold text-pink-600 transition hover:border-pink-300"
+                >
+                  Weiter
+                </Link>
+              </div>
+              <div className="mt-3 h-1.5 w-full rounded-full bg-slate-100">
+                <div
+                  className="h-full rounded-full bg-pink-500"
+                  style={{ width: `${progressRatio * 100}%` }}
+                />
+              </div>
+            </div>
+          )}
+          <div className="my-3 h-px w-full bg-slate-100" />
+          <p className="text-[11px] uppercase tracking-[0.3em] text-slate-400">So funktioniert’s</p>
+          <ul className="mt-2 space-y-2 text-sm text-slate-600">
+            {checklistItems.map((item) => (
+              <li key={item} className="flex gap-2">
+                <span className="mt-0.5 h-1.5 w-1.5 rounded-full bg-pink-500" />
+                <span>{item}</span>
+              </li>
+            ))}
+          </ul>
+        </div>
+      )}
+    </div>
+  );
+}
--- a/resources/js/guest/context/NotificationCenterContext.tsx
+++ b/resources/js/guest/context/NotificationCenterContext.tsx
@@ -0,0 +1,59 @@
+import React from 'react';
+import { useUploadQueue } from '../queue/hooks';
+import type { QueueItem } from '../queue/queue';
+
+type NotificationCenterValue = {
+  queueItems: QueueItem[];
+  queueCount: number;
+  inviteCount: number;
+  totalCount: number;
+  loading: boolean;
+  refreshQueue: () => Promise<void>;
+  eventToken: string;
+};
+
+const NotificationCenterContext = React.createContext<NotificationCenterValue | null>(null);
+
+export function NotificationCenterProvider({
+  eventToken,
+  children,
+}: {
+  eventToken: string;
+  children: React.ReactNode;
+}) {
+  const { items, loading, refresh } = useUploadQueue();
+
+  const queueCount = React.useMemo(
+    () => items.filter((item) => item.status !== 'done').length,
+    [items],
+  );
+
+  const value = React.useMemo<NotificationCenterValue>(
+    () => ({
+      queueItems: items,
+      queueCount,
+      inviteCount: 0,
+      totalCount: queueCount,
+      loading,
+      refreshQueue: refresh,
+      eventToken,
+    }),
+    [items, queueCount, loading, refresh, eventToken],
+  );
+
+  return (
+    <NotificationCenterContext.Provider value={value}>{children}</NotificationCenterContext.Provider>
+  );
+}
+
+export function useNotificationCenter() {
+  const ctx = React.useContext(NotificationCenterContext);
+  if (!ctx) {
+    throw new Error('useNotificationCenter must be used within NotificationCenterProvider');
+  }
+  return ctx;
+}
+
+export function useOptionalNotificationCenter() {
+  return React.useContext(NotificationCenterContext);
+}
--- a/resources/js/guest/hooks/useGuestTaskProgress.ts
+++ b/resources/js/guest/hooks/useGuestTaskProgress.ts
@@ -1,5 +1,7 @@
 import React from 'react';

+export const TASK_BADGE_TARGET = 5;
+
 function storageKey(eventKey: string) {
  return `guestTasks_${eventKey}`;
 }
--- a/resources/js/guest/i18n/messages.ts
+++ b/resources/js/guest/i18n/messages.ts
@@ -184,6 +184,40 @@ export const messages: Record<LocaleCode, NestedMessages> = {
        days: 'vor {count} Tagen',
      },
    },
+    tasks: {
+      page: {
+        eyebrow: 'Aufgaben-Zentrale',
+        title: 'Deine nächste Aufgabe',
+        subtitle: 'Wähle eine Stimmung aus oder lass dich überraschen.',
+        swipeHint: 'Tipp: Links wischen = neue Aufgabe · Rechts wischen = Inspiration',
+        completedLabel: 'Schon erledigt',
+        ctaStart: "Los geht's!",
+        shuffleCta: 'Was Neues!',
+        shuffleButton: 'Shuffle',
+        inspirationTitle: 'Foto-Inspiration',
+        inspirationLoading: 'lädt…',
+        inspirationEmptyTitle: 'Noch kein Foto zu dieser Aufgabe',
+        inspirationEmptyDescription: 'Sei die/der Erste und lade eins hoch',
+        inspirationMore: 'Mehr',
+        inspirationError: 'Fotos konnten nicht geladen werden',
+        suggestionsEyebrow: 'Mehr Inspiration',
+        suggestionsTitle: 'Spring direkt zur nächsten Aufgabe',
+        noTasksAlert: 'Für dieses Event sind derzeit keine Aufgaben hinterlegt.',
+        emptyTitle: 'Keine passende Aufgabe gefunden',
+        emptyDescriptionWithTasks: 'Für deine aktuelle Stimmung gibt es gerade keine Aufgabe. Wähle eine andere Stimmung oder lade neue Aufgaben.',
+        emptyDescriptionNoTasks: 'Hier sind noch keine Aufgaben hinterlegt. Bitte versuche es später erneut.',
+        reloadButton: 'Aufgaben neu laden',
+        filters: {
+          none: 'Kein Filter',
+          recentFallback: 'Stimmung wählen',
+          showAll: 'Alle zeigen',
+          dialogTitle: 'Alle verfügbaren Stimmungen',
+          empty: 'Für dieses Event stehen noch keine Stimmungen bereit.',
+          countOne: '{count} Aufgabe',
+          countMany: '{count} Aufgaben',
+        },
+      },
+    },
    notFound: {
      title: 'Nicht gefunden',
      description: 'Die Seite konnte nicht gefunden werden.',
@@ -255,6 +289,49 @@ export const messages: Record<LocaleCode, NestedMessages> = {
        },
        dismiss: 'Verstanden',
      },
+      hud: {
+        title: 'Live-Missionen',
+        subtitle: 'Bleib im Flow – Kamera bereithalten.',
+        moodLabel: 'Stimmung: {mood}',
+        moodFallback: 'Freestyle',
+        ctaLabel: 'Inspiration öffnen',
+        cards: {
+          online: 'Gäste online',
+          completed: 'Aufgaben gelöst',
+          lastUpload: 'Letzter Upload',
+        },
+        progressLabel: 'Story {count}/{target} aktiv',
+        liveGuests: '{count} Gäste live',
+        relative: {
+          now: 'Gerade eben',
+          minutes: 'vor {count} Min',
+          hours: 'vor {count} Std',
+          days: 'vor {count} Tagen',
+        },
+      },
+      limitSummary: {
+        title: 'Uploads & Slots',
+        subtitle: 'Dein Event-Paket im Überblick',
+        badgeLabel: 'Aktuell',
+        cards: {
+          photos: {
+            title: 'Fotos insgesamt',
+            remaining: '{remaining} von {limit} frei',
+            unlimited: 'Unlimitierte Foto-Uploads aktiv',
+          },
+          guests: {
+            title: 'Geräte im Einsatz',
+            remaining: '{remaining} Slots verfügbar',
+            unlimited: 'Unlimitierte Geräte freigeschaltet',
+          },
+        },
+        badges: {
+          ok: 'OK',
+          warning: 'Bald voll',
+          limit_reached: 'Limit erreicht',
+          unlimited: 'Unlimitiert',
+        },
+      },
      cameraUnsupported: {
        title: 'Kamera nicht verfügbar',
        message: 'Dein Gerät unterstützt keine Kameravorschau im Browser. Du kannst stattdessen Fotos aus deiner Galerie hochladen.',
@@ -652,6 +729,40 @@ export const messages: Record<LocaleCode, NestedMessages> = {
        days: '{count} days ago',
      },
    },
+    tasks: {
+      page: {
+        eyebrow: 'Mission hub',
+        title: 'Your next task',
+        subtitle: 'Pick a mood or stay spontaneous.',
+        swipeHint: 'Tip: Swipe left for a new task · right for inspiration',
+        completedLabel: 'Already done',
+        ctaStart: "Let's go!",
+        shuffleCta: 'Something new!',
+        shuffleButton: 'Shuffle',
+        inspirationTitle: 'Photo inspiration',
+        inspirationLoading: 'loading…',
+        inspirationEmptyTitle: 'No photo for this task yet',
+        inspirationEmptyDescription: 'Be the first one to upload!',
+        inspirationMore: 'More',
+        inspirationError: 'Photos could not be loaded',
+        suggestionsEyebrow: 'More inspiration',
+        suggestionsTitle: 'Jump straight to the next task',
+        noTasksAlert: 'No tasks available for this event yet.',
+        emptyTitle: 'No matching task found',
+        emptyDescriptionWithTasks: 'No task matches this mood right now. Pick another mood or load new tasks.',
+        emptyDescriptionNoTasks: 'No tasks are available yet. Please try again later.',
+        reloadButton: 'Reload tasks',
+        filters: {
+          none: 'No filter',
+          recentFallback: 'Select mood',
+          showAll: 'Show all',
+          dialogTitle: 'All available moods',
+          empty: 'No moods are available for this event yet.',
+          countOne: '{count} task',
+          countMany: '{count} tasks',
+        },
+      },
+    },
    notFound: {
      title: 'Not found',
      description: 'We could not find the page you requested.',
@@ -723,6 +834,49 @@ export const messages: Record<LocaleCode, NestedMessages> = {
        },
        dismiss: 'Got it',
      },
+      hud: {
+        title: 'Live missions',
+        subtitle: 'Stay in the flow – keep the camera ready.',
+        moodLabel: 'Mood: {mood}',
+        moodFallback: 'Freestyle',
+        ctaLabel: 'Open inspiration',
+        cards: {
+          online: 'Guests online',
+          completed: 'Tasks completed',
+          lastUpload: 'Latest upload',
+        },
+        progressLabel: 'Story {count}/{target} active',
+        liveGuests: '{count} guests live',
+        relative: {
+          now: 'Just now',
+          minutes: '{count} min ago',
+          hours: '{count} h ago',
+          days: '{count} days ago',
+        },
+      },
+      limitSummary: {
+        title: 'Uploads & slots',
+        subtitle: 'Your event package overview',
+        badgeLabel: 'Current',
+        cards: {
+          photos: {
+            title: 'Photos total',
+            remaining: '{remaining} of {limit} free',
+            unlimited: 'Unlimited photo uploads',
+          },
+          guests: {
+            title: 'Devices in use',
+            remaining: '{remaining} slots available',
+            unlimited: 'Unlimited devices enabled',
+          },
+        },
+        badges: {
+          ok: 'OK',
+          warning: 'Almost full',
+          limit_reached: 'Limit reached',
+          unlimited: 'Unlimited',
+        },
+      },
      cameraUnsupported: {
        title: 'Camera not available',
        message: 'Your device does not support live camera preview in this browser. You can upload photos from your gallery instead.',
--- a/resources/js/guest/lib/tests/limitSummaries.test.ts
+++ b/resources/js/guest/lib/tests/limitSummaries.test.ts
@@ -4,16 +4,16 @@ import type { EventPackageLimits } from '../../services/eventApi';
 import { buildLimitSummaries } from '../limitSummaries';

 const translations = new Map<string, string>([
-  ['upload.status.cards.photos.title', 'Fotos'],
-  ['upload.status.cards.photos.remaining', 'Noch {remaining} von {limit}'],
-  ['upload.status.cards.photos.unlimited', 'Unbegrenzte Uploads'],
-  ['upload.status.cards.guests.title', 'Gäste'],
-  ['upload.status.cards.guests.remaining', '{remaining} Gäste frei (max. {limit})'],
-  ['upload.status.cards.guests.unlimited', 'Unbegrenzte Gäste'],
-  ['upload.status.badges.ok', 'OK'],
-  ['upload.status.badges.warning', 'Warnung'],
-  ['upload.status.badges.limit_reached', 'Limit erreicht'],
-  ['upload.status.badges.unlimited', 'Unbegrenzt'],
+  ['upload.limitSummary.cards.photos.title', 'Fotos'],
+  ['upload.limitSummary.cards.photos.remaining', 'Noch {remaining} von {limit}'],
+  ['upload.limitSummary.cards.photos.unlimited', 'Unbegrenzte Uploads'],
+  ['upload.limitSummary.cards.guests.title', 'Gäste'],
+  ['upload.limitSummary.cards.guests.remaining', '{remaining} Gäste frei (max. {limit})'],
+  ['upload.limitSummary.cards.guests.unlimited', 'Unbegrenzte Gäste'],
+  ['upload.limitSummary.badges.ok', 'OK'],
+  ['upload.limitSummary.badges.warning', 'Warnung'],
+  ['upload.limitSummary.badges.limit_reached', 'Limit erreicht'],
+  ['upload.limitSummary.badges.unlimited', 'Unbegrenzt'],
 ]);

 const t = (key: string) => translations.get(key) ?? key;
--- a/resources/js/guest/lib/limitSummaries.ts
+++ b/resources/js/guest/lib/limitSummaries.ts
@@ -35,13 +35,13 @@ function buildCard(
  summary: LimitUsageSummary,
  t: TranslateFn
 ): LimitSummaryCard {
-  const labelKey = id === 'photos' ? 'upload.status.cards.photos.title' : 'upload.status.cards.guests.title';
+  const labelKey = id === 'photos' ? 'upload.limitSummary.cards.photos.title' : 'upload.limitSummary.cards.guests.title';
  const remainingKey = id === 'photos'
-    ? 'upload.status.cards.photos.remaining'
-    : 'upload.status.cards.guests.remaining';
+    ? 'upload.limitSummary.cards.photos.remaining'
+    : 'upload.limitSummary.cards.guests.remaining';
  const unlimitedKey = id === 'photos'
-    ? 'upload.status.cards.photos.unlimited'
-    : 'upload.status.cards.guests.unlimited';
+    ? 'upload.limitSummary.cards.photos.unlimited'
+    : 'upload.limitSummary.cards.guests.unlimited';

  const tone = resolveTone(summary.state);
  const progress = typeof summary.limit === 'number' && summary.limit > 0
@@ -50,7 +50,7 @@ function buildCard(

  const valueLabel = typeof summary.limit === 'number' && summary.limit > 0
    ? `${summary.used.toLocaleString()} / ${summary.limit.toLocaleString()}`
-    : t('upload.status.badges.unlimited');
+    : t('upload.limitSummary.badges.unlimited');

  const description = summary.state === 'unlimited'
    ? t(unlimitedKey)
@@ -63,13 +63,13 @@ function buildCard(
  const badgeKey = (() => {
    switch (summary.state) {
      case 'limit_reached':
-        return 'upload.status.badges.limit_reached';
+        return 'upload.limitSummary.badges.limit_reached';
      case 'warning':
-        return 'upload.status.badges.warning';
+        return 'upload.limitSummary.badges.warning';
      case 'unlimited':
-        return 'upload.status.badges.unlimited';
+        return 'upload.limitSummary.badges.unlimited';
      default:
-        return 'upload.status.badges.ok';
+        return 'upload.limitSummary.badges.ok';
    }
  })();

--- a/resources/js/guest/pages/AchievementsPage.tsx
+++ b/resources/js/guest/pages/AchievementsPage.tsx
@@ -269,33 +269,66 @@ function Highlights({ topPhoto, trendingEmotion }: { topPhoto: TopPhotoHighlight
  );
 }

-function SummaryCards({ data }: { data: AchievementsPayload }) {
+function FlowSummary({ data, token }: { data: AchievementsPayload; token: string }) {
+  const personal = data.personal;
+  const tasksDone = personal?.tasks ?? data.summary.tasksSolved;
+  const photos = personal?.photos ?? data.summary.totalPhotos;
+  const likes = personal?.likes ?? data.summary.likesTotal;
+  const guests = data.summary.uniqueGuests;
+  const earnedBadges = personal?.badges.filter((badge) => badge.earned).length ?? 0;
+  const nextBadge = personal?.badges.find((badge) => !badge.earned);
+
  return (
-    <div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-4">
-      <Card>
-        <CardContent className="flex flex-col gap-1 py-4">
-          <span className="text-xs uppercase text-muted-foreground">Fotos gesamt</span>
-          <span className="text-2xl font-semibold text-foreground">{formatNumber(data.summary.totalPhotos)}</span>
-        </CardContent>
-      </Card>
-      <Card>
-        <CardContent className="flex flex-col gap-1 py-4">
-          <span className="text-xs uppercase text-muted-foreground">Aktive Gäste</span>
-          <span className="text-2xl font-semibold text-foreground">{formatNumber(data.summary.uniqueGuests)}</span>
-        </CardContent>
-      </Card>
-      <Card>
-        <CardContent className="flex flex-col gap-1 py-4">
-          <span className="text-xs uppercase text-muted-foreground">Erfüllte Aufgaben</span>
-          <span className="text-2xl font-semibold text-foreground">{formatNumber(data.summary.tasksSolved)}</span>
-        </CardContent>
-      </Card>
-      <Card>
-        <CardContent className="flex flex-col gap-1 py-4">
-          <span className="text-xs uppercase text-muted-foreground">Likes insgesamt</span>
-          <span className="text-2xl font-semibold text-foreground">{formatNumber(data.summary.likesTotal)}</span>
-        </CardContent>
-      </Card>
+    <section className="rounded-[32px] border border-slate-100 bg-white/95 p-6 shadow-sm dark:border-white/10 dark:bg-slate-900/70">
+      <div className="flex flex-wrap items-center justify-between gap-4">
+        <div>
+          <p className="text-xs uppercase tracking-[0.35em] text-slate-500 dark:text-white/60">Dein Flow</p>
+          <h2 className="mt-1 text-2xl font-semibold text-slate-900 dark:text-white">
+            {tasksDone === 0 ? 'Starte deine erste Mission.' : 'Weiter so, dein Event lebt!'}
+          </h2>
+          <p className="text-sm text-slate-500 dark:text-white/70">
+            {nextBadge ? `Noch ${Math.max(0, nextBadge.target - nextBadge.progress)} Schritte bis „${nextBadge.title}“.` : 'Alle aktuellen Badges freigeschaltet.'}
+          </p>
+        </div>
+        <div className="flex gap-2">
+          <Button asChild>
+            <Link to={`/e/${encodeURIComponent(token)}/tasks`} className="flex items-center gap-2">
+              <Sparkles className="h-4 w-4" />
+              Aufgabe ziehen
+            </Link>
+          </Button>
+          <Button variant="outline" asChild>
+            <Link to={`/e/${encodeURIComponent(token)}/gallery`} className="flex items-center gap-2">
+              <Camera className="h-4 w-4" />
+              Galerie öffnen
+            </Link>
+          </Button>
+        </div>
+      </div>
+      <div className="mt-4 grid gap-3 sm:grid-cols-2 lg:grid-cols-4">
+        <FlowStat label="Deine Aufgaben" value={formatNumber(tasksDone)} />
+        <FlowStat label="Fotos gesamt" value={formatNumber(photos)} />
+        <FlowStat label="Likes gesammelt" value={formatNumber(likes)} />
+        <FlowStat label="Badges" value={`${earnedBadges}/${personal?.badges.length ?? 0}`} />
+      </div>
+      <div className="mt-4 grid gap-3 sm:grid-cols-2">
+        <FlowStat label="Aktive Gäste" value={formatNumber(guests)} />
+        <FlowStat label="Letzte Mission" value={personal ? personal.guestName || 'Gast' : 'Event'} muted />
+      </div>
+    </section>
+  );
+}
+
+function FlowStat({ label, value, muted = false }: { label: string; value: string; muted?: boolean }) {
+  return (
+    <div
+      className={cn(
+        'rounded-2xl border border-slate-100 bg-white/80 px-4 py-3 text-left shadow-sm dark:border-white/10 dark:bg-white/5',
+        muted && 'opacity-80'
+      )}
+    >
+      <p className="text-[0.65rem] uppercase tracking-[0.35em] text-slate-400 dark:text-white/60">{label}</p>
+      <p className="mt-2 text-xl font-semibold text-slate-900 dark:text-white">{value}</p>
    </div>
  );
 }
@@ -393,7 +426,7 @@ export default function AchievementsPage() {

      {!loading && !error && data && (
        <>
-          <SummaryCards data={data} />
+          <FlowSummary data={data} token={token} />

          <div className="flex flex-wrap items-center gap-2">
            <Button
--- a/resources/js/guest/pages/HomePage.tsx
+++ b/resources/js/guest/pages/HomePage.tsx
@@ -9,7 +9,7 @@ import { useGuestIdentity } from '../context/GuestIdentityContext';
 import { useEventStats } from '../context/EventStatsContext';
 import { useEventData } from '../hooks/useEventData';
 import { useGuestTaskProgress } from '../hooks/useGuestTaskProgress';
-import { Sparkles, UploadCloud, Images, CheckCircle2, Users, TimerReset, X, Camera, ArrowUpRight } from 'lucide-react';
+import { Sparkles, UploadCloud, X, Camera, RefreshCw } from 'lucide-react';
 import { useTranslation, type TranslateFn } from '../i18n/useTranslation';
 import { useEventBranding } from '../context/EventBrandingContext';
 import type { EventBranding } from '../types/event-branding';
@@ -63,69 +63,63 @@ export default function HomePage() {

  const displayName = hydrated && name ? name : t('home.fallbackGuestName');
  const eventNameDisplay = event?.name ?? t('home.hero.defaultEventName');
-  const latestUploadText = formatLatestUpload(stats.latestPhotoAt, t);
  const accentColor = branding.primaryColor;
  const secondaryAccent = branding.secondaryColor;

-  const statItems = React.useMemo(
-    () => [
-      {
-        icon: <Users className="h-4 w-4" aria-hidden />,
-        label: t('home.stats.online'),
-        value: `${stats.onlineGuests}`,
-      },
-      {
-        icon: <Sparkles className="h-4 w-4" aria-hidden />,
-        label: t('home.stats.tasksSolved'),
-        value: `${stats.tasksSolved}`,
-      },
-      {
-        icon: <TimerReset className="h-4 w-4" aria-hidden />,
-        label: t('home.stats.lastUpload'),
-        value: latestUploadText,
-      },
-      {
-        icon: <CheckCircle2 className="h-4 w-4" aria-hidden />,
-        label: t('home.stats.completedTasks'),
-        value: `${completedCount}`,
-      },
-    ],
-    [completedCount, latestUploadText, stats.onlineGuests, stats.tasksSolved, t],
-  );
+  const [missionPreview, setMissionPreview] = React.useState<MissionPreview | null>(null);
+  const [missionLoading, setMissionLoading] = React.useState(false);
+  const missionPoolRef = React.useRef<MissionPreview[]>([]);

-  const quickActions = React.useMemo(
-    () => [
-      {
-        to: 'upload',
-        label: t('home.actions.items.upload.label'),
-        description: t('home.actions.items.upload.description'),
-        icon: <Camera className="h-5 w-5" aria-hidden />,
-        highlight: true,
-      },
-      {
-        to: 'tasks',
-        label: t('home.actions.items.tasks.label'),
-        description: t('home.actions.items.tasks.description'),
-        icon: <Sparkles className="h-5 w-5" aria-hidden />,
-      },
-      {
-        to: 'gallery',
-        label: t('home.actions.items.gallery.label'),
-        description: t('home.actions.items.gallery.description'),
-        icon: <Images className="h-5 w-5" aria-hidden />,
-      },
-    ],
-    [t],
-  );
+  const shuffleMissionPreview = React.useCallback(() => {
+    const pool = missionPoolRef.current;
+    if (!pool.length) {
+      setMissionPreview(null);
+      return;
+    }
+    const choice = pool[Math.floor(Math.random() * pool.length)];
+    setMissionPreview(choice);
+  }, []);

-  const checklistItems = React.useMemo(
-    () => [
-      t('home.checklist.steps.first'),
-      t('home.checklist.steps.second'),
-      t('home.checklist.steps.third'),
-    ],
-    [t],
-  );
+  React.useEffect(() => {
+    if (!token) return;
+    let cancelled = false;
+    async function loadMissions() {
+      setMissionLoading(true);
+      try {
+        const response = await fetch(`/api/v1/events/${encodeURIComponent(token)}/tasks`);
+        if (!response.ok) throw new Error('Aufgaben konnten nicht geladen werden.');
+        const payload = await response.json();
+        if (cancelled) return;
+        if (Array.isArray(payload) && payload.length) {
+          missionPoolRef.current = payload.map((task: any) => ({
+            id: Number(task.id),
+            title: task.title ?? 'Mission',
+            description: task.description ?? '',
+            duration: typeof task.duration === 'number' ? task.duration : 3,
+            emotion: task.emotion ?? null,
+          }));
+          shuffleMissionPreview();
+        } else {
+          missionPoolRef.current = [];
+          setMissionPreview(null);
+        }
+      } catch (err) {
+        if (!cancelled) {
+          console.warn('Mission preview failed', err);
+          missionPoolRef.current = [];
+          setMissionPreview(null);
+        }
+      } finally {
+        if (!cancelled) {
+          setMissionLoading(false);
+        }
+      }
+    }
+    loadMissions();
+    return () => {
+      cancelled = true;
+    };
+  }, [shuffleMissionPreview, token]);

  if (!token) {
    return null;
@@ -146,55 +140,28 @@ export default function HomePage() {
        />
      )}

-      <StatsRibbon items={statItems} accentColor={accentColor} fontFamily={branding.fontFamily} />
-
      <section className="space-y-4" style={branding.fontFamily ? { fontFamily: branding.fontFamily } : undefined}>
-        <div className="flex items-center justify-between">
+        <div className="flex items-center justify-between gap-3">
          <div>
-            <h2 className="text-base font-semibold text-foreground">{t('home.actions.title')}</h2>
-            <p className="text-xs text-muted-foreground">{t('home.actions.subtitle')}</p>
+            <h2 className="text-base font-semibold text-foreground">Starte dein Fotospiel</h2>
+            <p className="text-xs text-muted-foreground">Wähle, wie du den nächsten Moment einfängst.</p>
          </div>
-          <ArrowUpRight className="h-5 w-5 text-muted-foreground" aria-hidden />
        </div>
-        <div className="grid gap-3 sm:grid-cols-3">
-          {quickActions.map((action) => (
-            <QuickActionCard
-              key={action.to}
-              action={action}
-              accentColor={accentColor}
-              secondaryAccent={secondaryAccent}
-            />
-          ))}
+
+        <div className="space-y-3">
+          <MissionActionCard
+            token={token}
+            mission={missionPreview}
+            loading={missionLoading}
+            onShuffle={shuffleMissionPreview}
+          />
+          <EmotionActionCard />
+          <UploadActionCard token={token} accentColor={accentColor} secondaryAccent={secondaryAccent} />
        </div>
-        <Button
-          variant="outline"
-          asChild
-          className="w-full touch-manipulation border-dashed"
-          style={{ borderColor: `${accentColor}44` }}
-        >
-          <Link to="queue">{t('home.actions.queueButton')}</Link>
-        </Button>
      </section>

-      <Card>
-        <CardHeader style={branding.fontFamily ? { fontFamily: branding.fontFamily } : undefined}>
-          <CardTitle>{t('home.checklist.title')}</CardTitle>
-          <CardDescription>{t('home.checklist.description')}</CardDescription>
-        </CardHeader>
-        <CardContent className="space-y-3">
-          {checklistItems.map((item) => (
-            <div key={item} className="flex items-start gap-3">
-              <CheckCircle2 className="mt-0.5 h-5 w-5 text-green-500" aria-hidden />
-              <span className="text-sm leading-relaxed text-muted-foreground">{item}</span>
-            </div>
-          ))}
-        </CardContent>
-      </Card>
-
      <Separator />

-      <EmotionPicker />
-
      <GalleryPreview token={token} />
    </div>
  );
@@ -265,112 +232,119 @@ function HeroCard({
  );
 }

-function StatsRibbon({
-  items,
-  accentColor,
-  fontFamily,
+type MissionPreview = {
+  id: number;
+  title: string;
+  description?: string;
+  duration?: number;
+  emotion?: { name?: string; slug?: string } | null;
+};
+
+function MissionActionCard({
+  token,
+  mission,
+  loading,
+  onShuffle,
 }: {
-  items: { icon: React.ReactNode; label: string; value: string }[];
-  accentColor: string;
-  fontFamily?: string | null;
+  token: string;
+  mission: MissionPreview | null;
+  loading: boolean;
+  onShuffle: () => void;
 }) {
  return (
-    <div className="overflow-hidden rounded-3xl border border-muted/40 bg-white/70 shadow-sm backdrop-blur">
-      <div
-        className="flex gap-3 overflow-x-auto px-4 py-3 [scrollbar-width:none] sm:grid sm:grid-cols-4 sm:overflow-visible"
-        style={fontFamily ? { fontFamily } : undefined}
-      >
-        {items.map((item) => (
-          <div
-            key={item.label}
-            className="flex min-w-[150px] flex-1 items-center gap-3 rounded-2xl border border-transparent bg-white/60 px-3 py-2 shadow-sm transition hover:-translate-y-0.5 hover:border-white"
+    <Card className="border-0 shadow-sm">
+      <CardHeader className="flex flex-row items-start gap-3">
+        <div className="flex h-10 w-10 items-center justify-center rounded-2xl bg-pink-100 text-pink-600">
+          <Sparkles className="h-5 w-5" aria-hidden />
+        </div>
+        <div>
+          <CardTitle className="text-base font-semibold text-foreground">Mission starten</CardTitle>
+          <CardDescription className="text-xs text-muted-foreground">
+            Wir haben bereits eine Aufgabe für dich vorbereitet. Tippe, um direkt loszulegen.
+          </CardDescription>
+        </div>
+      </CardHeader>
+      <CardContent className="space-y-3">
+        {mission ? (
+          <>
+            <p className="text-lg font-semibold text-foreground">{mission.title}</p>
+            {mission.description && (
+              <p className="text-sm text-muted-foreground line-clamp-2">{mission.description}</p>
+            )}
+            <div className="flex gap-3 text-xs text-muted-foreground">
+              <span>{mission.duration ?? 3} Min</span>
+              {mission.emotion?.name && <span>{mission.emotion.name}</span>}
+            </div>
+          </>
+        ) : (
+          <p className="text-sm text-muted-foreground">
+            Ziehe deine erste Mission im Aufgaben-Tab oder lade deine Stimmung hoch.
+          </p>
+        )}
+        <div className="flex flex-col gap-2 sm:flex-row">
+          <Button asChild className="flex-1">
+            <Link to={`/e/${encodeURIComponent(token)}/tasks`}>Mission starten</Link>
+          </Button>
+          <Button
+            type="button"
+            variant="ghost"
+            className="flex-1"
+            onClick={onShuffle}
+            disabled={loading}
          >
-            <div
-              className="flex h-10 w-10 items-center justify-center rounded-full bg-white shadow"
-              style={{ color: accentColor }}
-            >
-              {item.icon}
-            </div>
-            <div className="flex flex-col">
-              <span className="text-[11px] uppercase tracking-wide text-muted-foreground">{item.label}</span>
-              <span className="text-lg font-semibold text-foreground">{item.value}</span>
-            </div>
-          </div>
-        ))}
-      </div>
-    </div>
+            <RefreshCw className={`mr-2 h-4 w-4 ${loading ? 'animate-spin' : ''}`} aria-hidden />
+            Andere Mission
+          </Button>
+        </div>
+      </CardContent>
+    </Card>
  );
 }

-function QuickActionCard({
-  action,
+function EmotionActionCard() {
+  return (
+    <Card className="border border-muted/40 shadow-sm">
+      <CardHeader>
+        <CardTitle>Foto nach Gefühlslage</CardTitle>
+        <CardDescription className="text-sm text-muted-foreground">
+          Wähle deine Stimmung, wir schlagen dir passende Missionen vor.
+        </CardDescription>
+      </CardHeader>
+      <CardContent>
+        <EmotionPicker variant="embedded" showSkip={false} />
+      </CardContent>
+    </Card>
+  );
+}
+
+function UploadActionCard({
+  token,
  accentColor,
  secondaryAccent,
 }: {
-  action: { to: string; label: string; description: string; icon: React.ReactNode; highlight?: boolean };
+  token: string;
  accentColor: string;
  secondaryAccent: string;
 }) {
-  const highlightStyle = action.highlight
-    ? {
-        background: `linear-gradient(120deg, ${accentColor}, ${secondaryAccent})`,
-        color: '#fff',
-      }
-    : undefined;
-
  return (
-    <Link to={action.to} className="group block">
-      <Card
-        className="relative overflow-hidden border-0 shadow-sm transition-all group-hover:shadow-lg"
-        style={highlightStyle}
-      >
-        <CardContent className="flex items-start gap-4 py-4">
-          <div
-            className={`flex h-11 w-11 items-center justify-center rounded-2xl shadow-sm ${
-              action.highlight ? 'bg-white/15 text-white' : 'bg-pink-50'
-            }`}
-            style={!action.highlight ? { color: secondaryAccent } : undefined}
-          >
-            {action.icon}
+    <Card
+      className="overflow-hidden border-0 text-white shadow-sm"
+      style={{ background: `linear-gradient(120deg, ${accentColor}, ${secondaryAccent})` }}
+    >
+      <CardContent className="flex flex-col gap-3 py-5">
+        <div className="flex items-center gap-3">
+          <div className="rounded-2xl bg-white/15 p-3">
+            <UploadCloud className="h-5 w-5" aria-hidden />
          </div>
-          <div className="flex flex-1 flex-col">
-            <span className={`text-base font-semibold ${action.highlight ? 'text-white' : 'text-foreground'}`}>
-              {action.label}
-            </span>
-            <span className={`text-sm ${action.highlight ? 'text-white/80' : 'text-muted-foreground'}`}>
-              {action.description}
-            </span>
+          <div>
+            <p className="text-lg font-semibold">Direkt hochladen</p>
+            <p className="text-sm text-white/80">Kamera öffnen oder ein Foto aus deiner Galerie wählen.</p>
          </div>
-          <ArrowUpRight
-            className={`h-4 w-4 transition ${action.highlight ? 'text-white/70 group-hover:translate-x-0.5 group-hover:-translate-y-0.5' : 'text-muted-foreground group-hover:text-foreground'}`}
-            aria-hidden
-          />
-        </CardContent>
-      </Card>
-    </Link>
+        </div>
+        <Button asChild className="bg-white/90 text-slate-900 hover:bg-white">
+          <Link to={`/e/${encodeURIComponent(token)}/upload`}>Foto hochladen</Link>
+        </Button>
+      </CardContent>
+    </Card>
  );
 }
-
-function formatLatestUpload(isoDate: string | null, t: TranslateFn) {
-  if (!isoDate) {
-    return t('home.latestUpload.none');
-  }
-  const date = new Date(isoDate);
-  if (Number.isNaN(date.getTime())) {
-    return t('home.latestUpload.invalid');
-  }
-  const diffMs = Date.now() - date.getTime();
-  const diffMinutes = Math.round(diffMs / 60000);
-  if (diffMinutes < 1) {
-    return t('home.latestUpload.justNow');
-  }
-  if (diffMinutes < 60) {
-    return t('home.latestUpload.minutes').replace('{count}', `${diffMinutes}`);
-  }
-  const diffHours = Math.round(diffMinutes / 60);
-  if (diffHours < 24) {
-    return t('home.latestUpload.hours').replace('{count}', `${diffHours}`);
-  }
-  const diffDays = Math.round(diffHours / 24);
-  return t('home.latestUpload.days').replace('{count}', `${diffDays}`);
-}
--- a/resources/js/guest/pages/TaskPickerPage.tsx
+++ b/resources/js/guest/pages/TaskPickerPage.tsx
--- a/resources/js/guest/pages/UploadPage.tsx
+++ b/resources/js/guest/pages/UploadPage.tsx
@@ -29,9 +29,10 @@ import {
  ZapOff,
 } from 'lucide-react';
 import { getEventPackage, type EventPackage } from '../services/eventApi';
-import { useTranslation } from '../i18n/useTranslation';
+import { useTranslation, type TranslateFn } from '../i18n/useTranslation';
 import { buildLimitSummaries, type LimitSummaryCard } from '../lib/limitSummaries';
 import { resolveUploadErrorDialog, type UploadErrorDialog } from '../lib/uploadErrorDialog';
+import { useEventStats } from '../context/EventStatsContext';

 interface Task {
  id: number;
@@ -102,13 +103,15 @@ const LIMIT_CARD_STYLES: Record<LimitSummaryCard['tone'], { card: string; badge:
  },
 };

+
 export default function UploadPage() {
  const { token } = useParams<{ token: string }>();
  const eventKey = token ?? '';
  const navigate = useNavigate();
  const [searchParams] = useSearchParams();
-  const { markCompleted } = useGuestTaskProgress(token);
+  const { markCompleted, completedCount } = useGuestTaskProgress(token);
  const { t } = useTranslation();
+  const stats = useEventStats();

  const taskIdParam = searchParams.get('task');
  const emotionSlug = searchParams.get('emotion') || '';
@@ -605,6 +608,11 @@ const [canUpload, setCanUpload] = useState(true);
    reader.readAsDataURL(file);
  }, [canUpload, t]);

+  const handleOpenInspiration = useCallback(() => {
+    if (!eventKey) return;
+    navigate(`/e/${encodeURIComponent(eventKey)}/gallery`);
+  }, [eventKey, navigate]);
+
  const difficultyBadgeClass = useMemo(() => {
    if (!task) return 'text-white';
    switch (task.difficulty) {
@@ -620,6 +628,10 @@ const [canUpload, setCanUpload] = useState(true);
  const isCameraActive = permissionState === 'granted' && mode !== 'uploading';
  const showTaskOverlay = task && mode !== 'uploading';

+  const relativeLastUpload = useMemo(
+    () => formatRelativeTimeLabel(stats.latestPhotoAt, t),
+    [stats.latestPhotoAt, t],
+  );

  useEffect(() => () => {
    resetCountdownTimer();
@@ -628,24 +640,31 @@ const [canUpload, setCanUpload] = useState(true);
    }
  }, [resetCountdownTimer]);

+  const heroEmotion = task?.emotion?.name ?? t('upload.hud.moodFallback');
+
  const limitStatusSection = limitCards.length > 0 ? (
-    <section className="mx-4 mb-6 space-y-3">
-      <div>
-        <h2 className="text-sm font-semibold uppercase tracking-wide text-slate-900 dark:text-white">
-          {t('upload.status.title')}
-        </h2>
-        <p className="text-xs text-slate-600 dark:text-white/70">
-          {t('upload.status.subtitle')}
-        </p>
+    <section className="space-y-4 rounded-[28px] border border-white/20 bg-white/80 p-5 shadow-lg backdrop-blur dark:border-white/10 dark:bg-slate-900/60">
+      <div className="flex items-center justify-between gap-3">
+        <div>
+          <p className="text-xs uppercase tracking-[0.35em] text-slate-500 dark:text-white/60">
+            {t('upload.limitSummary.title')}
+          </p>
+          <p className="text-base font-semibold text-slate-900 dark:text-white">
+            {t('upload.limitSummary.subtitle')}
+          </p>
+        </div>
+        <Badge variant="secondary" className="rounded-full bg-black/5 text-xs text-slate-700 dark:bg-white/10 dark:text-white">
+          {t('upload.limitSummary.badgeLabel')}
+        </Badge>
      </div>
-      <div className="grid gap-3 sm:grid-cols-2">
+      <div className="grid gap-4 sm:grid-cols-2">
        {limitCards.map((card) => {
          const styles = LIMIT_CARD_STYLES[card.tone];
          return (
            <div
              key={card.id}
              className={cn(
-                'rounded-xl border p-4 shadow-sm backdrop-blur transition-colors',
+                'rounded-2xl border p-4 shadow-sm transition-colors',
                styles.card
              )}
            >
@@ -676,14 +695,6 @@ const [canUpload, setCanUpload] = useState(true);
    </section>
  ) : null;

-  const renderPage = (content: ReactNode, mainClassName = 'px-4 py-6') => (
-    <div className="pb-16">
-      <Header eventToken={eventKey} title={t('upload.cameraTitle')} />
-      <main className={mainClassName}>{content}</main>
-      <BottomNav />
-    </div>
-  );
-
  const dialogToneIconClass: Record<Exclude<UploadErrorDialog['tone'], undefined>, string> = {
    danger: 'text-rose-500',
    warning: 'text-amber-500',
@@ -714,12 +725,18 @@ const [canUpload, setCanUpload] = useState(true);
    </Dialog>
  );

-  const renderWithDialog = (content: ReactNode, mainClassName = 'px-4 py-6') => (
-    <>
-      {renderPage(content, mainClassName)}
-      {errorDialogNode}
-    </>
-  );
+const renderWithDialog = (content: ReactNode, wrapperClassName = 'space-y-6 pb-[120px]') => (
+  <>
+    <div className="pb-16">
+      <Header eventToken={eventKey} title={t('upload.cameraTitle')} />
+      <main className="px-4">
+        <div className={wrapperClassName}>{content}</div>
+      </main>
+      <BottomNav />
+    </div>
+    {errorDialogNode}
+  </>
+);

  if (!supportsCamera && !task) {
    return renderWithDialog(
@@ -759,7 +776,7 @@ const [canUpload, setCanUpload] = useState(true);

  const renderPrimer = () => (
    showPrimer && (
-      <div className="mx-4 mt-3 rounded-xl border border-pink-200 bg-white/90 p-4 text-sm text-pink-900 shadow">
+      <div className="rounded-[28px] border border-pink-200/60 bg-white/90 p-4 text-sm text-pink-900 shadow-lg dark:border-pink-500/40 dark:bg-pink-500/10 dark:text-pink-50">
        <div className="flex items-start gap-3">
          <Info className="mt-0.5 h-5 w-5 flex-shrink-0" />
          <div className="text-left">
@@ -781,14 +798,14 @@ const [canUpload, setCanUpload] = useState(true);
    if (permissionState === 'granted') return null;
    if (permissionState === 'unsupported') {
      return (
-        <Alert className="mx-4">
-            <AlertDescription>{t('upload.cameraUnsupported.message')}</AlertDescription>
+        <Alert className="rounded-[24px] border border-amber-200 bg-amber-50/70 text-amber-900 dark:border-amber-400/40 dark:bg-amber-500/10 dark:text-amber-50">
+          <AlertDescription>{t('upload.cameraUnsupported.message')}</AlertDescription>
        </Alert>
      );
    }
    if (permissionState === 'denied' || permissionState === 'error') {
      return (
-        <Alert variant="destructive" className="mx-4">
+        <Alert variant="destructive" className="rounded-[24px] border border-rose-200 bg-rose-50/80 text-rose-900 dark:border-rose-500/40 dark:bg-rose-500/15 dark:text-rose-50">
          <AlertDescription className="space-y-3">
            <div>{permissionMessage}</div>
            <Button size="sm" variant="outline" onClick={startCamera}>
@@ -799,22 +816,15 @@ const [canUpload, setCanUpload] = useState(true);
      );
    }
    return (
-        <Alert className="mx-4">
-          <AlertDescription>{t('upload.cameraDenied.prompt')}</AlertDescription>
-        </Alert>
+      <Alert className="rounded-[24px] border border-slate-200 bg-white/80 text-slate-800 dark:border-white/10 dark:bg-white/5 dark:text-white">
+        <AlertDescription>{t('upload.cameraDenied.prompt')}</AlertDescription>
+      </Alert>
    );
  };

  return renderWithDialog(
    <>
-      <div className="absolute left-0 right-0 top-0" aria-hidden="true">
-        {renderPrimer()}
-      </div>
-      <div className="pt-32" />
-      {permissionState !== 'granted' && renderPermissionNotice()}
-      {limitStatusSection}
-
-      <section className="relative mx-4 overflow-hidden rounded-2xl border border-white/10 bg-black text-white shadow-xl">
+      <section className="relative overflow-hidden rounded-[32px] border border-white/10 bg-black text-white shadow-2xl">
        <div className="relative aspect-[3/4] sm:aspect-video">
            <video
              ref={videoRef}
@@ -1027,7 +1037,11 @@ const [canUpload, setCanUpload] = useState(true);
              )}
            </div>
          </div>
-        </section>
+      </section>
+
+      {permissionState !== 'granted' && renderPermissionNotice()}
+      {limitStatusSection}
+      {renderPrimer()}

        <input
          ref={fileInputRef}
@@ -1042,6 +1056,29 @@ const [canUpload, setCanUpload] = useState(true);
        <canvas ref={canvasRef} className="hidden" />
      </>
    ,
-    'relative flex flex-col gap-4 pb-4'
+    'space-y-6 pb-[140px]'
  );
 }
+
+function formatRelativeTimeLabel(value: string | null | undefined, t: TranslateFn): string {
+  if (!value) {
+    return t('upload.hud.relative.now');
+  }
+  const timestamp = new Date(value).getTime();
+  if (Number.isNaN(timestamp)) {
+    return t('upload.hud.relative.now');
+  }
+  const diffMinutes = Math.max(0, Math.round((Date.now() - timestamp) / 60000));
+  if (diffMinutes < 1) {
+    return t('upload.hud.relative.now');
+  }
+  if (diffMinutes < 60) {
+    return t('upload.hud.relative.minutes').replace('{count}', `${diffMinutes}`);
+  }
+  const hours = Math.round(diffMinutes / 60);
+  if (hours < 24) {
+    return t('upload.hud.relative.hours').replace('{count}', `${hours}`);
+  }
+  const days = Math.round(hours / 24);
+  return t('upload.hud.relative.days').replace('{count}', `${days}`);
+}
--- a/resources/js/guest/router.tsx
+++ b/resources/js/guest/router.tsx
@@ -13,6 +13,7 @@ import { DEFAULT_LOCALE, isLocaleCode } from './i18n/messages';
 import { useTranslation, type TranslateFn } from './i18n/useTranslation';
 import type { EventBranding } from './types/event-branding';
 import type { EventBrandingPayload, FetchEventErrorCode } from './services/eventApi';
+import { NotificationCenterProvider } from './context/NotificationCenterContext';

 const LandingPage = React.lazy(() => import('./pages/LandingPage'));
 const ProfileSetupPage = React.lazy(() => import('./pages/ProfileSetupPage'));
@@ -109,13 +110,15 @@ function EventBoundary({ token }: { token: string }) {
    <LocaleProvider defaultLocale={eventLocale} storageKey={localeStorageKey}>
      <EventBrandingProvider branding={branding}>
        <EventStatsProvider eventKey={token}>
-          <div className="pb-16">
-            <Header eventToken={token} />
-            <div className="px-4 py-3">
-              <Outlet />
+          <NotificationCenterProvider eventToken={token}>
+            <div className="pb-16">
+              <Header eventToken={token} />
+              <div className="px-4 py-3">
+                <Outlet />
+              </div>
+              <BottomNav />
            </div>
-            <BottomNav />
-          </div>
+          </NotificationCenterProvider>
        </EventStatsProvider>
      </EventBrandingProvider>
    </LocaleProvider>
@@ -134,10 +137,12 @@ function SetupLayout() {
      <LocaleProvider defaultLocale={eventLocale} storageKey={localeStorageKey}>
        <EventBrandingProvider branding={branding}>
          <EventStatsProvider eventKey={token}>
-            <div className="pb-0">
-              <Header eventToken={token} />
-              <Outlet />
-            </div>
+            <NotificationCenterProvider eventToken={token}>
+              <div className="pb-0">
+                <Header eventToken={token} />
+                <Outlet />
+              </div>
+            </NotificationCenterProvider>
          </EventStatsProvider>
        </EventBrandingProvider>
      </LocaleProvider>
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -4,12 +4,12 @@ import react from '@vitejs/plugin-react';
 import laravel from 'laravel-vite-plugin';
 import { defineConfig } from 'vite';

-const devServerHost = process.env.VITE_DEV_SERVER_HOST ?? '0.0.0.0';
+const devServerHost = process.env.VITE_DEV_SERVER_HOST ?? 'fotospiel-app.test';
 const devServerPort = Number.parseInt(process.env.VITE_DEV_SERVER_PORT ?? '5173', 10);
-const devServerOrigin = process.env.VITE_DEV_SERVER_URL ?? `http://localhost:${devServerPort}`;
+const devServerOrigin = process.env.VITE_DEV_SERVER_URL ?? `http://fotospiel-app.test:${devServerPort}`;
 const parsedOrigin = new URL(devServerOrigin);
 const hmrPort = parsedOrigin.port === '' ? devServerPort : Number.parseInt(parsedOrigin.port, 10);
-const appUrl = process.env.APP_URL ?? 'http://localhost:8000';
+const appUrl = process.env.APP_URL ?? 'http://fotospiel-app.test';

 export default defineConfig({
    server: {