zu fabricjs gewechselt, noch nicht funktionsfähig

This commit is contained in:
Codex Agent
2025-10-31 20:19:09 +01:00
parent 06df61f706
commit eb0c31c90b
33 changed files with 7718 additions and 2062 deletions

View File

@@ -5,6 +5,18 @@
<title>{{ $eventName }} Einladungs-QR</title>
@php
$qrSize = $layout['qr']['size_px'] ?? 500;
$isAdvanced = ! empty($advancedLayout['elements'] ?? null);
$advancedBackground = null;
if ($isAdvanced) {
$gradient = $advancedLayout['background_gradient'] ?? null;
if (is_array($gradient) && ! empty($gradient['stops'])) {
$angle = (int) ($gradient['angle'] ?? 180);
$stops = implode(',', $gradient['stops']);
$advancedBackground = "linear-gradient({$angle}deg,{$stops})";
} else {
$advancedBackground = $advancedLayout['background'] ?? '#FFFFFF';
}
}
@endphp
<style>
:root {
@@ -169,9 +181,105 @@
.footer strong {
color: var(--accent);
}
.advanced-wrapper {
width: 100%;
padding: 48px;
background: var(--background);
}
.advanced-canvas {
position: relative;
width: {{ $advancedLayout['width'] ?? 1080 }}px;
height: {{ $advancedLayout['height'] ?? 1520 }}px;
border-radius: 32px;
overflow: hidden;
background: {{ $advancedBackground ?? '#FFFFFF' }};
box-shadow: 0 18px 40px rgba(15, 23, 42, 0.16);
}
.advanced-element {
position: absolute;
display: flex;
flex-direction: column;
justify-content: center;
overflow: hidden;
}
.advanced-element--badge {
text-transform: uppercase;
letter-spacing: 0.06em;
font-weight: 600;
}
.advanced-element--cta {
border-radius: 20px;
box-shadow: 0 16px 30px rgba(15, 23, 42, 0.2);
font-weight: 600;
letter-spacing: 0.05em;
}
.advanced-element--qr img,
.advanced-element--logo img {
width: 100%;
height: 100%;
object-fit: contain;
}
</style>
</head>
<body>
@if($isAdvanced)
<div class="advanced-wrapper">
<div class="advanced-canvas">
@foreach($advancedLayout['elements'] as $element)
@php
$style = $element['style_string'];
$textColor = $element['fill'] ?? ($element['type'] === 'badge' ? '#FFFFFF' : ($advancedLayout['text'] ?? '#111827'));
$fontSize = $element['font_size'] ? 'font-size:'.$element['font_size'].'px;' : '';
$lineHeight = $element['line_height'] ? 'line-height:'.$element['line_height'].';' : '';
$letterSpacing = $element['letter_spacing'] !== null ? 'letter-spacing:'.$element['letter_spacing'].'px;' : '';
$fontFamily = $element['font_family'] ? 'font-family:'.$element['font_family'].';' : '';
$textAlign = $element['align'] ? 'text-align:'.$element['align'].';' : '';
$contentStyle = $fontSize.$lineHeight.$letterSpacing.$fontFamily.$textAlign.'color:'.$textColor.';';
if ($element['type'] === 'badge') {
$style .= ';background:'.$advancedLayout['badge'].';color:#fff;border-radius:999px;padding:16px 26px;display:flex;align-items:center;justify-content:center;';
}
if ($element['type'] === 'cta') {
$style .= ';background:'.$advancedLayout['accent'].';color:#fff;display:flex;align-items:center;justify-content:center;padding:24px 28px;';
}
if ($element['type'] === 'link') {
$style .= ';border:2px solid '.$advancedLayout['accent'].';border-radius:18px;padding:16px 18px;background:rgba(255,255,255,0.8);display:flex;align-items:center;justify-content:center;';
}
if (in_array($element['type'], ['headline', 'subtitle', 'description'], true)) {
$style .= ';padding:16px 20px;';
}
@endphp
<div class="advanced-element advanced-element--{{ $element['type'] }}" style="{{ $style }}">
@switch($element['type'])
@case('qr')
@if($element['asset'])
<img src="{{ $element['asset'] }}" alt="QR Code" />
@endif
@break
@case('logo')
@if($element['asset'])
<img src="{{ $element['asset'] }}" alt="Logo" />
@endif
@break
@default
@if($element['content'])
<div style="{{ $contentStyle }}">{{ $element['content'] }}</div>
@endif
@endswitch
</div>
@endforeach
</div>
</div>
@else
<div class="layout-wrapper">
<div class="header">
<div style="display:flex; align-items:center; justify-content:space-between; gap:24px;">
@@ -207,14 +315,15 @@
<img src="{{ $qrPngDataUri }}" alt="QR-Code zum Event {{ $eventName }}">
<div class="cta">{{ $layout['cta_label'] ?? 'Scan mich & starte direkt' }}</div>
</div>
</div>
</div>
<div class="footer">
<div>
<strong>{{ config('app.name', 'Fotospiel') }}</strong> Gästebox & Fotochallenges
</div>
<div>Einladungsgültigkeit: {{ $joinToken->expires_at ? $joinToken->expires_at->isoFormat('LLL') : 'bis Widerruf' }}</div>
<div>Einladungsgültigkeit: {{ $token->expires_at ? $token->expires_at->locale(app()->getLocale())->isoFormat('LLL') : 'bis Widerruf' }}</div>
</div>
</div>
@endif
</body>
</html>