added more translations and added the new layout wizard
This commit is contained in:
Codex Agent
@@ -7,6 +7,7 @@
|
||||
$qrSize = $layout['qr']['size_px'] ?? 500;
|
||||
$isAdvanced = ! empty($advancedLayout['elements'] ?? null);
|
||||
$advancedBackground = null;
|
||||
$advancedBackgroundImage = $isAdvanced ? ($advancedLayout['background_image'] ?? null) : null;
|
||||
if ($isAdvanced) {
|
||||
$gradient = $advancedLayout['background_gradient'] ?? null;
|
||||
if (is_array($gradient) && ! empty($gradient['stops'])) {
|
||||
@@ -16,7 +17,17 @@
|
||||
} else {
|
||||
$advancedBackground = $advancedLayout['background'] ?? '#FFFFFF';
|
||||
}
|
||||
} else {
|
||||
$advancedBackground = '#FFFFFF';
|
||||
}
|
||||
$containerPadding = $layout['container_padding_px'] ?? 48;
|
||||
$isDoublePanel = ($layout['panel_mode'] ?? null) === 'double-mirror';
|
||||
$backgroundImageInline = ($backgroundImage ?? null)
|
||||
? 'background:'.$backgroundStyle.';background-image:url('.$backgroundImage.');background-size:cover;background-position:center;background-repeat:no-repeat;'
|
||||
: 'background:'.$backgroundStyle.';';
|
||||
$advancedBackgroundInline = ($advancedBackgroundImage ?? null)
|
||||
? 'background:'.$advancedBackground.';background-image:url('.$advancedBackgroundImage.');background-size:cover;background-position:center;background-repeat:no-repeat;'
|
||||
: 'background:'.$advancedBackground.';';
|
||||
@endphp
|
||||
<style>
|
||||
:root {
|
||||
@@ -24,7 +35,7 @@
|
||||
--secondary: {{ $layout['secondary'] }};
|
||||
--text: {{ $layout['text'] }};
|
||||
--badge: {{ $layout['badge'] }};
|
||||
--container-padding: 48px;
|
||||
--container-padding: {{ $containerPadding }}px;
|
||||
--qr-size: {{ $qrSize }}px;
|
||||
--background: {{ $backgroundStyle }};
|
||||
}
|
||||
@@ -45,6 +56,26 @@
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.panel-sheet {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.panel {
|
||||
flex: 1 1 0;
|
||||
display: flex;
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.panel--mirror {
|
||||
transform: scaleX(-1);
|
||||
}
|
||||
|
||||
.panel--mirror .panel-inner {
|
||||
transform: scaleX(-1);
|
||||
}
|
||||
|
||||
.layout-wrapper {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
@@ -228,9 +259,62 @@
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
@php
|
||||
$renderStandard = function () use ($layout, $eventName, $tokenUrl, $qrPngDataUri, $token) {
|
||||
ob_start();
|
||||
@endphp
|
||||
<div class="layout-wrapper panel-inner" style="{{ $backgroundImageInline }}">
|
||||
<div class="header">
|
||||
<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
|
||||
</div>
|
||||
|
||||
<div class="content">
|
||||
<div class="info-card">
|
||||
<h2>{{ $layout['instructions_heading'] ?? "So funktioniert's" }}</h2>
|
||||
<p>{{ $layout['description'] }}</p>
|
||||
@if(!empty($layout['instructions']))
|
||||
<ul class="instructions">
|
||||
@foreach($layout['instructions'] as $step)
|
||||
<li>{{ $step }}</li>
|
||||
@endforeach
|
||||
</ul>
|
||||
@endif
|
||||
<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">{{ $layout['cta_label'] ?? 'Scan mich & starte direkt' }}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="footer">
|
||||
<div>
|
||||
<strong>{{ config('app.name', 'Fotospiel') }}</strong> – Gästebox & Fotochallenges
|
||||
</div>
|
||||
<div>Einladungsgültigkeit: {{ $token->expires_at ? $token->expires_at->locale(app()->getLocale())->isoFormat('LLL') : 'bis Widerruf' }}</div>
|
||||
</div>
|
||||
</div>
|
||||
@php
|
||||
return ob_get_clean();
|
||||
};
|
||||
@endphp
|
||||
|
||||
@if($isAdvanced)
|
||||
<div class="advanced-wrapper">
|
||||
<div class="advanced-canvas">
|
||||
<div class="advanced-canvas" style="{{ $advancedBackgroundInline }}">
|
||||
@foreach($advancedLayout['elements'] as $element)
|
||||
@php
|
||||
$style = $element['style_string'];
|
||||
@@ -279,51 +363,17 @@
|
||||
@endforeach
|
||||
</div>
|
||||
</div>
|
||||
@elseif($isDoublePanel)
|
||||
<div class="panel-sheet">
|
||||
<div class="panel">
|
||||
{!! str_replace('class="layout-wrapper panel-inner"', 'class="layout-wrapper panel-inner" style="'.$backgroundImageInline.'"', $renderStandard()) !!}
|
||||
</div>
|
||||
<div class="panel panel--mirror">
|
||||
{!! str_replace('class="layout-wrapper panel-inner"', 'class="layout-wrapper panel-inner" style="'.$backgroundImageInline.'"', $renderStandard()) !!}
|
||||
</div>
|
||||
</div>
|
||||
@else
|
||||
<div class="layout-wrapper">
|
||||
<div class="header">
|
||||
<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
|
||||
</div>
|
||||
|
||||
<div class="content">
|
||||
<div class="info-card">
|
||||
<h2>{{ $layout['instructions_heading'] ?? "So funktioniert's" }}</h2>
|
||||
<p>{{ $layout['description'] }}</p>
|
||||
@if(!empty($layout['instructions']))
|
||||
<ul class="instructions">
|
||||
@foreach($layout['instructions'] as $step)
|
||||
<li>{{ $step }}</li>
|
||||
@endforeach
|
||||
</ul>
|
||||
@endif
|
||||
<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">{{ $layout['cta_label'] ?? 'Scan mich & starte direkt' }}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="footer">
|
||||
<div>
|
||||
<strong>{{ config('app.name', 'Fotospiel') }}</strong> – Gästebox & Fotochallenges
|
||||
</div>
|
||||
<div>Einladungsgültigkeit: {{ $token->expires_at ? $token->expires_at->locale(app()->getLocale())->isoFormat('LLL') : 'bis Widerruf' }}</div>
|
||||
</div>
|
||||
</div>
|
||||
{!! str_replace('class="layout-wrapper panel-inner"', 'class="layout-wrapper panel-inner" style="'.$backgroundImageInline.'"', $renderStandard()) !!}
|
||||
@endif
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user