feat: extend event toolkit and polish guest pwa

This commit is contained in:
Codex Agent
2025-10-28 18:28:22 +01:00
parent f29067f570
commit a7bbf230fd
45 changed files with 3809 additions and 351 deletions

View File

@@ -61,6 +61,12 @@
width: fit-content;
}
.logo {
max-width: 140px;
max-height: 80px;
object-fit: contain;
}
.event-title {
font-size: 72px;
font-weight: 700;
@@ -165,8 +171,13 @@
<body>
<div class="layout-wrapper">
<div class="header">
<span class="badge">Digitale Gästebox</span>
<h1 class="event-title">{{ $eventName }}</h1>
<div style="display:flex; align-items:center; justify-content:space-between; gap:24px;">
<span class="badge">{{ $layout['badge_label'] ?? 'Digitale Gästebox' }}</span>
@if(!empty($layout['logo_url']))
<img src="{{ $layout['logo_url'] }}" alt="Logo" class="logo" />
@endif
</div>
<h1 class="event-title">{{ $layout['headline'] ?? $eventName }}</h1>
@if(!empty($layout['subtitle']))
<p class="subtitle">{{ $layout['subtitle'] }}</p>
@endif
@@ -174,7 +185,7 @@
<div class="content">
<div class="info-card">
<h2>So funktioniert&rsquo;s</h2>
<h2>{{ $layout['instructions_heading'] ?? "So funktioniert's" }}</h2>
<p>{{ $layout['description'] }}</p>
@if(!empty($layout['instructions']))
<ul class="instructions">
@@ -184,14 +195,14 @@
</ul>
@endif
<div>
<div class="cta">Alternative zum Einscannen</div>
<div class="link-box">{{ $tokenUrl }}</div>
<div class="cta">{{ $layout['link_heading'] ?? 'Alternative zum Einscannen' }}</div>
<div class="link-box">{{ $layout['link_label'] ?? $tokenUrl }}</div>
</div>
</div>
<div class="qr-wrapper">
<img src="{{ $qrPngDataUri }}" alt="QR-Code zum Event {{ $eventName }}">
<div class="cta">Scan mich & starte direkt</div>
<div class="cta">{{ $layout['cta_label'] ?? 'Scan mich & starte direkt' }}</div>
</div>
</div>
@@ -203,4 +214,4 @@
</div>
</div>
</body>
</html>
</html>

View File

@@ -11,7 +11,14 @@
$instructions = $layout['instructions'] ?? [];
$description = $layout['description'] ?? '';
$subtitle = $layout['subtitle'] ?? '';
$titleLines = explode("\n", wordwrap($eventName, 18, "\n", true));
$headline = $layout['headline'] ?? $eventName;
$badgeLabel = $layout['badge_label'] ?? 'Digitale Gästebox';
$instructionsHeading = $layout['instructions_heading'] ?? "So funktioniert's";
$linkHeading = $layout['link_heading'] ?? 'Alternative zum Einscannen';
$ctaLabel = $layout['cta_label'] ?? 'Scan mich & starte direkt';
$linkLabel = $layout['link_label'] ?? $tokenUrl;
$logoUrl = $layout['logo_url'] ?? null;
$titleLines = explode("\n", wordwrap($headline, 18, "\n", true));
$subtitleLines = $subtitle !== '' ? explode("\n", wordwrap($subtitle, 36, "\n", true)) : [];
$descriptionLines = $description !== '' ? explode("\n", wordwrap($description, 40, "\n", true)) : [];
$instructionStartY = 870;
@@ -111,7 +118,11 @@
<rect x="640" y="780" width="300" height="6" rx="3" fill="{{ $accent }}" opacity="0.6" />
<rect x="80" y="120" width="250" height="70" rx="35" fill="{{ $badgeColor }}" />
<text x="205" y="165" text-anchor="middle" fill="#FFFFFF" class="badge-text">Digitale Gästebox</text>
<text x="205" y="165" text-anchor="middle" fill="#FFFFFF" class="badge-text">{{ e($badgeLabel) }}</text>
@if($logoUrl)
<image href="{{ $logoUrl }}" x="840" y="90" width="180" height="120" preserveAspectRatio="xMidYMid meet" />
@endif
@foreach($titleLines as $index => $line)
<text x="80" y="{{ 260 + $index * 88 }}" fill="{{ $textColor }}" class="title-line">{{ e($line) }}</text>
@@ -131,7 +142,7 @@
<text x="110" y="{{ $descriptionOffset + $index * 48 }}" fill="{{ $textColor }}" class="description-line">{{ e($line) }}</text>
@endforeach
<text x="120" y="760" fill="{{ $accent }}" class="small-label">SO FUNKTIONIERT'S</text>
<text x="120" y="760" fill="{{ $accent }}" class="small-label">{{ e(mb_strtoupper($instructionsHeading)) }}</text>
@foreach($instructions as $index => $step)
@php
@@ -141,13 +152,13 @@
<text x="150" y="{{ $lineY }}" fill="{{ $textColor }}" class="instruction-text">{{ e($step) }}</text>
@endforeach
<text x="640" y="760" fill="{{ $accent }}" class="small-label">ALTERNATIVER LINK</text>
<text x="640" y="760" fill="{{ $accent }}" class="small-label">{{ e(mb_strtoupper($linkHeading)) }}</text>
<rect x="630" y="790" width="320" height="120" rx="22" fill="rgba(0,0,0,0.08)" />
<text x="650" y="850" fill="{{ $textColor }}" class="link-text">{{ e($tokenUrl) }}</text>
<text x="650" y="850" fill="{{ $textColor }}" class="link-text">{{ e($linkLabel) }}</text>
<image href="{{ $qrPngDataUri }}" x="620" y="440" width="{{ $layout['qr']['size_px'] ?? 340 }}" height="{{ $layout['qr']['size_px'] ?? 340 }}" />
<text x="820" y="820" text-anchor="middle" fill="{{ $accent }}" class="small-label">JETZT SCANNEN</text>
<text x="820" y="820" text-anchor="middle" fill="{{ $accent }}" class="small-label">{{ e(mb_strtoupper($ctaLabel)) }}</text>
<text x="120" y="{{ $height - 160 }}" fill="rgba(17,24,39,0.6)" class="footer-text">
<tspan class="footer-strong" fill="{{ $accent }}">{{ e(config('app.name', 'Fotospiel')) }}</tspan>
@@ -156,4 +167,4 @@
<text x="{{ $width - 120 }}" y="{{ $height - 160 }}" text-anchor="end" fill="rgba(17,24,39,0.6)" class="footer-text">
Einladung gültig: {{ $joinToken->expires_at ? $joinToken->expires_at->isoFormat('LLL') : 'bis Widerruf' }}
</text>
</svg>
</svg>