zu fabricjs gewechselt, noch nicht funktionsfähig
This commit is contained in:
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user