soeren/fotospiel-app
1
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

noscript varianten eingebaut, matomo integration erweitert und als konfiguration aufgenommen.

Browse Source
This commit is contained in:
Codex Agent
2025-12-05 17:02:03 +01:00
parent 946d09764a
commit c1bd4c1eb3
15 changed files with 331 additions and 95 deletions
Download Patch File Download Diff File Expand all files Collapse all files

61
resources/views/admin.blade.php
View File

@@ -13,8 +13,69 @@
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
@viteReactRefresh
@vite(['resources/css/app.css', 'resources/js/admin/main.tsx'])
@php
$matomoConfig = config('services.matomo');
$matomoAdmin = ($matomoConfig['enabled'] ?? false) && !empty($matomoConfig['url']) && !empty($matomoConfig['site_id_admin'])
? [
'enabled' => true,
'url' => rtrim($matomoConfig['url'], '/'),
'siteId' => (string) $matomoConfig['site_id_admin'],
]
: ['enabled' => false];
@endphp
<script>
window.__MATOMO_ADMIN__ = {!! json_encode($matomoAdmin) !!};
</script>
</head>
<body>
@php
$noscriptLocale = in_array(app()->getLocale(), ['de', 'en'], true) ? app()->getLocale() : 'de';
@endphp
<noscript>
<style>
#root { display: none !important; }
</style>
<div class="min-h-screen bg-slate-950 text-white" style="background:#0b1224;color:#fff;">
<div class="mx-auto flex max-w-4xl flex-col gap-10 px-6 py-14">
<header class="space-y-2">
<p class="text-xs font-semibold uppercase tracking-[0.2em] text-pink-300">Fotospiel Admin</p>
<h1 class="text-3xl font-semibold sm:text-4xl">Admin benötigt JavaScript</h1>
<p class="text-base text-white/70 sm:text-lg">Aktiviere JavaScript, um Events zu verwalten, Fotos zu prüfen und Benachrichtigungen zu senden.</p>
</header>
<section class="grid gap-4 sm:grid-cols-2">
<div class="rounded-2xl border border-white/10 bg-white/5 p-5 shadow-lg backdrop-blur" style="border:1px solid rgba(255,255,255,0.12);background:rgba(255,255,255,0.05);">
<h2 class="text-xl font-semibold text-white">Warum JS?</h2>
<ul class="mt-3 space-y-2 text-sm text-white/80">
<li>• Echtzeit-Listen für Fotos, Tasks und Emotion-Tags</li>
<li>• Upload-Status, Background-Sync und Notifications</li>
<li>• Live-Filter, Suche und Inline-Moderation</li>
<li>• Sichere OAuth2-Session mit PKCE</li>
</ul>
</div>
<div class="rounded-2xl border border-white/10 bg-white/5 p-5 shadow-lg backdrop-blur" style="border:1px solid rgba(255,255,255,0.12);background:rgba(255,255,255,0.05);">
<h2 class="text-xl font-semibold text-white">Nächste Schritte</h2>
<ol class="mt-3 space-y-2 text-sm text-white/80">
<li>1) JavaScript im Browser aktivieren</li>
<li>2) Seite neu laden</li>
<li>3) Optional: Admin-App zum Homescreen hinzufügen</li>
</ol>
<div class="mt-4 flex flex-wrap gap-3">
<a href="{{ route('marketing.contact', ['locale' => $noscriptLocale]) }}" class="inline-flex items-center justify-center rounded-full bg-pink-500 px-4 py-2 text-sm font-semibold text-white shadow-lg transition hover:bg-pink-400" style="color:#fff;text-decoration:none;background:#ec4899;">
Support kontaktieren
</a>
<a href="{{ route('impressum', ['locale' => $noscriptLocale]) }}" class="inline-flex items-center justify-center rounded-full border border-white/20 px-4 py-2 text-sm font-semibold text-white/80 transition hover:border-white/40" style="color:#e5e7eb;text-decoration:none;border:1px solid rgba(255,255,255,0.2);">
Impressum
</a>
<a href="{{ route('datenschutz', ['locale' => $noscriptLocale]) }}" class="inline-flex items-center justify-center rounded-full border border-white/20 px-4 py-2 text-sm font-semibold text-white/80 transition hover:border-white/40" style="color:#e5e7eb;text-decoration:none;border:1px solid rgba(255,255,255,0.2);">
Datenschutz
</a>
</div>
</div>
</section>
</div>
</div>
</noscript>
<div id="root"></div>
</body>
</html>

47
resources/views/app.blade.php
View File

@@ -41,6 +41,53 @@
@inertiaHead
</head>
<body class="font-sans antialiased">
@php
$noscriptLocale = in_array(app()->getLocale(), ['de', 'en'], true) ? app()->getLocale() : 'de';
@endphp
<noscript>
<style>
#app { display: none !important; }
</style>
<div class="min-h-screen bg-slate-950 text-white" style="background:#0b1224;color:#fff;">
<div class="mx-auto flex max-w-4xl flex-col gap-10 px-6 py-14">
<header class="space-y-2">
<p class="text-xs font-semibold uppercase tracking-[0.2em] text-pink-300">Fotospiel</p>
<h1 class="text-3xl font-semibold sm:text-4xl">Diese Anwendung benötigt JavaScript</h1>
<p class="text-base text-white/70 sm:text-lg">Aktiviere JavaScript, um die interaktive Oberfläche zu nutzen.</p>
</header>
<section class="grid gap-4 sm:grid-cols-2">
<div class="rounded-2xl border border-white/10 bg-white/5 p-5 shadow-lg backdrop-blur" style="border:1px solid rgba(255,255,255,0.12);background:rgba(255,255,255,0.05);">
<h2 class="text-xl font-semibold text-white">Was sonst fehlt</h2>
<ul class="mt-3 space-y-2 text-sm text-white/80">
<li>• Live-Navigation und Aktionen</li>
<li>• Inline-Formulare und Validierung</li>
<li>• Hintergrund-Sync und Benachrichtigungen</li>
</ul>
</div>
<div class="rounded-2xl border border-white/10 bg-white/5 p-5 shadow-lg backdrop-blur" style="border:1px solid rgba(255,255,255,0.12);background:rgba(255,255,255,0.05);">
<h2 class="text-xl font-semibold text-white">Nächste Schritte</h2>
<ol class="mt-3 space-y-2 text-sm text-white/80">
<li>1) JavaScript im Browser aktivieren</li>
<li>2) Seite neu laden</li>
<li>3) Optional: Admin-App zum Homescreen hinzufügen</li>
</ol>
<div class="mt-4 flex flex-wrap gap-3">
<a href="{{ route('marketing.contact', ['locale' => $noscriptLocale]) }}" class="inline-flex items-center justify-center rounded-full bg-pink-500 px-4 py-2 text-sm font-semibold text-white shadow-lg transition hover:bg-pink-400" style="color:#fff;text-decoration:none;background:#ec4899;">
Support kontaktieren
</a>
<a href="{{ route('impressum', ['locale' => $noscriptLocale]) }}" class="inline-flex items-center justify-center rounded-full border border-white/20 px-4 py-2 text-sm font-semibold text-white/80 transition hover:border-white/40" style="color:#e5e7eb;text-decoration:none;border:1px solid rgba(255,255,255,0.2);">
Impressum
</a>
<a href="{{ route('datenschutz', ['locale' => $noscriptLocale]) }}" class="inline-flex items-center justify-center rounded-full border border-white/20 px-4 py-2 text-sm font-semibold text-white/80 transition hover:border-white/40" style="color:#e5e7eb;text-decoration:none;border:1px solid rgba(255,255,255,0.2);">
Datenschutz
</a>
</div>
</div>
</section>
</div>
</div>
</noscript>
@inertia
</body>
</html>

74
resources/views/guest.blade.php
View File

@@ -15,12 +15,86 @@
'vapidPublicKey' => config('push.vapid.public_key'),
],
];
$matomoConfig = config('services.matomo');
$matomoGuest = ($matomoConfig['enabled'] ?? false) && !empty($matomoConfig['url']) && !empty($matomoConfig['site_id_guest'])
? [
'enabled' => true,
'url' => rtrim($matomoConfig['url'], '/'),
'siteId' => (string) $matomoConfig['site_id_guest'],
]
: ['enabled' => false];
@endphp
<script>
window.__GUEST_RUNTIME_CONFIG__ = {!! json_encode($guestRuntimeConfig) !!};
window.__MATOMO_GUEST__ = {!! json_encode($matomoGuest) !!};
</script>
</head>
<body>
@php
$noscriptLocale = in_array(app()->getLocale(), ['de', 'en'], true) ? app()->getLocale() : 'de';
@endphp
<noscript>
<style>
#root { display: none !important; }
</style>
<div class="min-h-screen bg-gradient-to-b from-[#0f172a] via-[#111827] to-[#0b1224] text-white" style="background:linear-gradient(180deg,#0f172a 0%,#111827 50%,#0b1224 100%);color:#fff;">
<div class="mx-auto flex max-w-5xl flex-col gap-12 px-6 py-14">
<header class="space-y-3 text-center">
<p class="text-sm font-semibold uppercase tracking-[0.18em] text-pink-300">Fotospiel</p>
<h1 class="text-3xl font-semibold sm:text-4xl">Diese Event-Galerie braucht JavaScript</h1>
<p class="text-base text-white/70 sm:text-lg">
Aktiviere JavaScript, um Fotos anzusehen, zu liken und zu teilen. Ohne JavaScript zeigen wir dir eine schnelle Übersicht.
</p>
</header>
<section class="grid gap-4 sm:grid-cols-2">
<div class="rounded-2xl border border-white/10 bg-white/5 p-5 shadow-lg backdrop-blur">
<h2 class="text-xl font-semibold text-white">Was du verpasst</h2>
<ul class="mt-3 space-y-2 text-sm text-white/80">
<li>• Live-Fotogalerie mit schnellen Filtern</li>
<li>• Likes & Teilen via WhatsApp, Nachrichten & Link</li>
<li>• Offline-fähige PWA zum Installieren</li>
<li>• Sichere QR-Zugänge ohne Anmeldung</li>
</ul>
</div>
<div class="rounded-2xl border border-white/10 bg-white/5 p-5 shadow-lg backdrop-blur">
<h2 class="text-xl font-semibold text-white">So geht’s weiter</h2>
<ol class="mt-3 space-y-2 text-sm text-white/80">
<li>1) Aktiviere JavaScript in deinem Browser</li>
<li>2) Lade die Seite neu</li>
<li>3) Optional: Füge die App deinem Homescreen hinzu</li>
</ol>
<div class="mt-4 flex flex-wrap gap-3">
<a href="{{ route('marketing.contact', ['locale' => $noscriptLocale]) }}" class="inline-flex items-center justify-center rounded-full bg-pink-500 px-4 py-2 text-sm font-semibold text-white shadow-lg transition hover:bg-pink-400" style="color:#fff;text-decoration:none;background:#ec4899;">
Support kontaktieren
</a>
<a href="{{ route('impressum', ['locale' => $noscriptLocale]) }}" class="inline-flex items-center justify-center rounded-full border border-white/20 px-4 py-2 text-sm font-semibold text-white/80 transition hover:border-white/40" style="color:#e5e7eb;text-decoration:none;border:1px solid rgba(255,255,255,0.2);">
Impressum
</a>
<a href="{{ route('datenschutz', ['locale' => $noscriptLocale]) }}" class="inline-flex items-center justify-center rounded-full border border-white/20 px-4 py-2 text-sm font-semibold text-white/80 transition hover:border-white/40" style="color:#e5e7eb;text-decoration:none;border:1px solid rgba(255,255,255,0.2);">
Datenschutz
</a>
</div>
</div>
</section>
<section class="grid gap-4 sm:grid-cols-3">
<div class="rounded-xl border border-white/10 bg-white/5 p-4 text-sm text-white/80 shadow-sm">
<h3 class="text-base font-semibold text-white">Offline-ready</h3>
<p class="mt-2">Fotos bleiben verfügbar, auch wenn das Event-WLAN wackelt.</p>
</div>
<div class="rounded-xl border border-white/10 bg-white/5 p-4 text-sm text-white/80 shadow-sm">
<h3 class="text-base font-semibold text-white">Privat & sicher</h3>
<p class="mt-2">Keine öffentlichen Profile, keine Gesichts­erkennung, nur Event-Teilnehmende.</p>
</div>
<div class="rounded-xl border border-white/10 bg-white/5 p-4 text-sm text-white/80 shadow-sm">
<h3 class="text-base font-semibold text-white">Schnelles Teilen</h3>
<p class="mt-2">Direkter Link für Freund:innen, mit Ablaufsteuerung durch das Event-Team.</p>
</div>
</section>
</div>
</div>
</noscript>
<div id="root"></div>
</body>
</html>

65
resources/views/layouts/marketing.blade.php
View File

@@ -33,16 +33,63 @@
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
</head>
<body class="bg-gray-50 text-gray-900">
@php
$noscriptLocale = in_array($currentLocale ?? app()->getLocale(), ['de', 'en'], true) ? ($currentLocale ?? app()->getLocale()) : 'de';
@endphp
<noscript>
<div class="bg-yellow-100 text-yellow-900 text-sm md:text-base">
<div class="mx-auto max-w-5xl px-4 py-3">
@if ($currentLocale === 'en')
<strong>JavaScript disabled.</strong>
This site offers limited functionality without JavaScript. Please enable JavaScript for the full experience.
@else
<strong>JavaScript deaktiviert.</strong>
Diese Seite bietet nur eingeschränkte Funktionen ohne JavaScript. Bitte aktiviere JavaScript, um alle Inhalte zu nutzen.
@endif
<style>
main { display: none !important; }
</style>
<div class="min-h-screen bg-gradient-to-b from-[#0f172a] via-[#0b1224] to-[#0a0f1f] text-white" style="background:linear-gradient(180deg,#0f172a 0%,#0b1224 50%,#0a0f1f 100%);color:#fff;">
<div class="mx-auto flex max-w-5xl flex-col gap-10 px-6 py-14">
<header class="space-y-3">
<p class="text-xs font-semibold uppercase tracking-[0.2em] text-pink-300">Fotospiel</p>
<h1 class="text-3xl font-semibold sm:text-4xl">
@if ($currentLocale === 'en')
JavaScript required for the full Fotospiel experience
@else
JavaScript für das volle Fotospiel-Erlebnis
@endif
</h1>
<p class="text-base text-white/70 sm:text-lg">
@if ($currentLocale === 'en')
Enable JavaScript to explore the live galleries, pricing, and admin demo. Here’s a quick overview.
@else
Aktiviere JavaScript, um Live-Galerien, Preise und die Admin-Demo zu sehen. Hier eine schnelle Übersicht.
@endif
</p>
</header>
<section class="grid gap-4 sm:grid-cols-3">
<div class="rounded-xl border border-white/10 bg-white/5 p-4 text-sm text-white/80 shadow-sm">
<h3 class="text-base font-semibold text-white">PWA für Gäste</h3>
<p class="mt-2">Offline-fähig, QR-Login ohne Account, Likes & Teilen mit Ablaufsteuerung.</p>
</div>
<div class="rounded-xl border border-white/10 bg-white/5 p-4 text-sm text-white/80 shadow-sm">
<h3 class="text-base font-semibold text-white">Admin & Branding</h3>
<p class="mt-2">Eigene Farben/Fonts, Aufgaben & Emotion-Tags, Freigaben & Moderation.</p>
</div>
<div class="rounded-xl border border-white/10 bg-white/5 p-4 text-sm text-white/80 shadow-sm">
<h3 class="text-base font-semibold text-white">Datenschutz</h3>
<p class="mt-2">Keine öffentlichen Profile, keine Gesichtserkennung, DSGVO-ready.</p>
</div>
</section>
<div class="flex flex-wrap gap-3">
<a href="{{ route('marketing.contact', ['locale' => $noscriptLocale]) }}" class="inline-flex items-center justify-center rounded-full bg-pink-500 px-4 py-2 text-sm font-semibold text-white shadow-lg transition hover:bg-pink-400" style="color:#fff;text-decoration:none;background:#ec4899;">
@if ($currentLocale === 'en')
Contact support
@else
Support kontaktieren
@endif
</a>
<a href="{{ route('impressum', ['locale' => $noscriptLocale]) }}" class="inline-flex items-center justify-center rounded-full border border-white/20 px-4 py-2 text-sm font-semibold text-white/80 transition hover:border-white/40" style="color:#e5e7eb;text-decoration:none;border:1px solid rgba(255,255,255,0.2);">
Impressum
</a>
<a href="{{ route('datenschutz', ['locale' => $noscriptLocale]) }}" class="inline-flex items-center justify-center rounded-full border border-white/20 px-4 py-2 text-sm font-semibold text-white/80 transition hover:border-white/40" style="color:#e5e7eb;text-decoration:none;border:1px solid rgba(255,255,255,0.2);">
Datenschutz
</a>
</div>
</div>
</div>
</noscript>