295 lines
10 KiB
PHP
295 lines
10 KiB
PHP
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
|
|
<meta charset="utf-8">
|
|
<title>{{ $translation?->title ?? config('app.name') }}</title>
|
|
<style>
|
|
@font-face {
|
|
font-family: 'Oswald';
|
|
src: url('/fonts/static/oswald/Oswald-Regular.ttf') format('truetype');
|
|
font-weight: normal;
|
|
font-style: normal;
|
|
}
|
|
@font-face {
|
|
font-family: 'Oswald';
|
|
src: url('/fonts/static/oswald/Oswald-SemiBold.ttf') format('truetype');
|
|
font-weight: 600;
|
|
font-style: normal;
|
|
}
|
|
@font-face {
|
|
font-family: 'Oswald';
|
|
src: url('/fonts/static/oswald/Oswald-Bold.ttf') format('truetype');
|
|
font-weight: bold;
|
|
font-style: normal;
|
|
}
|
|
@font-face {
|
|
font-family: 'Poppins';
|
|
src: url('/fonts/static/poppins/Poppins-Regular.otf') format('opentype');
|
|
font-weight: normal;
|
|
font-style: normal;
|
|
}
|
|
@font-face {
|
|
font-family: 'Poppins';
|
|
src: url('/fonts/static/poppins/Poppins-SemiBold.otf') format('opentype');
|
|
font-weight: 600;
|
|
font-style: normal;
|
|
}
|
|
@font-face {
|
|
font-family: 'Poppins';
|
|
src: url('/fonts/static/poppins/Poppins-Bold.otf') format('opentype');
|
|
font-weight: bold;
|
|
font-style: normal;
|
|
}
|
|
|
|
* { box-sizing: border-box; margin: 0; padding: 0; }
|
|
|
|
html, body {
|
|
width: 210mm;
|
|
height: 297mm;
|
|
background-color: #1a1a2e;
|
|
font-family: 'Poppins', sans-serif;
|
|
color: #000000;
|
|
font-size: 10pt;
|
|
}
|
|
|
|
/* ── Full-page hero ── */
|
|
.hero {
|
|
position: relative;
|
|
width: 210mm;
|
|
height: 297mm;
|
|
background-color: #1a1a2e;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.hero-overlay {
|
|
position: absolute;
|
|
top: 0; left: 0; right: 0; bottom: 0;
|
|
background-color: #000000;
|
|
opacity: 0.55;
|
|
}
|
|
|
|
/* ── Top section: title + badges + excerpt ── */
|
|
.hero-content {
|
|
position: absolute;
|
|
top: 0; left: 0; right: 0;
|
|
padding: 14mm 20mm 0 20mm;
|
|
}
|
|
|
|
.hero-title {
|
|
font-family: 'Oswald', sans-serif;
|
|
font-weight: 600;
|
|
font-size: 54pt;
|
|
line-height: 0.95;
|
|
color: #ffffff;
|
|
margin-top: 53mm;
|
|
margin-bottom: 5mm;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.hero-category {
|
|
display: inline-block;
|
|
background-color: #000000;
|
|
color: #ffffff;
|
|
padding: 0 8px 4px 8px;
|
|
border-radius: 2px;
|
|
font-family: 'Oswald', sans-serif;
|
|
font-weight: normal;
|
|
font-size: 17pt;
|
|
line-height: 1;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.hero-excerpt {
|
|
font-family: 'Poppins', sans-serif;
|
|
font-weight: normal;
|
|
font-size: 17.5pt;
|
|
line-height: 1.4;
|
|
color: #ffffff;
|
|
margin-top: 6mm;
|
|
max-height: 150mm;
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* ── Logo top-right ── */
|
|
.hero-logo {
|
|
position: absolute;
|
|
top: 14mm;
|
|
right: 20mm;
|
|
width: 75mm;
|
|
height: 53mm;
|
|
}
|
|
.hero-logo img { width: 75mm; height: 53mm; }
|
|
|
|
/* ── Bottom panel pinned to page bottom ── */
|
|
.hero-bottom-panel {
|
|
position: absolute;
|
|
bottom: 20mm; left: 0; right: 0;
|
|
padding: 0 20mm;
|
|
}
|
|
.hero-bottom-footer {
|
|
margin-top: 8mm;
|
|
font-family: 'Poppins', sans-serif;
|
|
font-size: 10.4pt;
|
|
color: #aaaaaa;
|
|
text-align: left;
|
|
}
|
|
|
|
/* Bottom-right: venue+date or author name */
|
|
.hero-bottom-text-row {
|
|
text-align: right;
|
|
margin-bottom: 4mm;
|
|
}
|
|
.hero-bottom-text {
|
|
font-family: 'Oswald', sans-serif;
|
|
font-weight: 600;
|
|
font-size: 22.5pt;
|
|
line-height: 0.95;
|
|
color: #ffffff;
|
|
text-transform: uppercase;
|
|
}
|
|
.hero-bottom-text-venue {
|
|
font-family: 'Oswald', sans-serif;
|
|
font-weight: 600;
|
|
font-size: 22.5pt;
|
|
line-height: 0.95;
|
|
color: #ffffff;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
/* Footer row */
|
|
.footer-row {
|
|
display: table;
|
|
width: 100%;
|
|
}
|
|
.footer-qr-cell {
|
|
display: table-cell;
|
|
vertical-align: bottom;
|
|
width: 22mm;
|
|
}
|
|
.footer-qr-cell img { width: 20mm; height: 20mm; }
|
|
.footer-app-name-cell {
|
|
display: table-cell;
|
|
vertical-align: bottom;
|
|
padding-left: 3mm;
|
|
}
|
|
.footer-app-name {
|
|
font-family: 'Poppins', sans-serif;
|
|
font-size: 12pt;
|
|
color: #cccccc;
|
|
}
|
|
.footer-author-cell {
|
|
display: table-cell;
|
|
vertical-align: bottom;
|
|
text-align: right;
|
|
}
|
|
.footer-author-row { display: table; }
|
|
.footer-avatar-cell {
|
|
display: table-cell;
|
|
vertical-align: middle;
|
|
width: 10mm;
|
|
}
|
|
.footer-avatar {
|
|
width: 9mm;
|
|
height: 9mm;
|
|
border-radius: 4.5mm;
|
|
border: 1px solid #aaaaaa;
|
|
background-size: cover;
|
|
background-position: center center;
|
|
background-repeat: no-repeat;
|
|
background-color: #444444;
|
|
}
|
|
.footer-name-cell {
|
|
display: table-cell;
|
|
vertical-align: middle;
|
|
padding-right: 3mm;
|
|
text-align: right;
|
|
}
|
|
.footer-author-label {
|
|
font-family: 'Poppins', sans-serif;
|
|
font-weight: normal;
|
|
font-size: 11pt;
|
|
color: #cccccc;
|
|
}
|
|
.footer-author-name {
|
|
font-family: 'Oswald', sans-serif;
|
|
font-weight: 600;
|
|
font-size: 15pt;
|
|
color: #ffffff;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<div class="hero">
|
|
@if($heroBase64)
|
|
<img src="{{ $heroBase64 }}" style="position: absolute; top: 0; left: 0; width: 210mm; height: 297mm; object-fit: cover; object-position: center center;">
|
|
@endif
|
|
<div class="hero-overlay"></div>
|
|
|
|
{{-- Logo top-right --}}
|
|
@if($logoWhiteBase64)
|
|
<div class="hero-logo">
|
|
<img src="{{ $logoWhiteBase64 }}" alt="{{ config('app.name') }}">
|
|
</div>
|
|
@endif
|
|
|
|
{{-- Top: title + category badge + excerpt (ImagePost: title only, smaller) --}}
|
|
@if($isImagePost)
|
|
@if($translation?->title)
|
|
<div class="hero-content">
|
|
<div class="hero-title">{{ $translation->title }}</div>
|
|
@if($categoryName)
|
|
<span class="hero-category" style="background-color: {{ $brandColor }};">{{ config('app.name') }} {{ $categoryName }}</span>
|
|
@endif
|
|
</div>
|
|
@endif
|
|
@else
|
|
<div class="hero-content">
|
|
<div class="hero-title">{{ $translation?->title }}</div>
|
|
@if($categoryName && !$isArticle)
|
|
<span class="hero-category" style="background-color: {{ $brandColor }};">{{ config('app.name') }} {{ $categoryName }}</span>
|
|
@endif
|
|
@if($pdfExcerpt)
|
|
<div class="hero-excerpt">{{ $pdfExcerpt }}</div>
|
|
@endif
|
|
</div>
|
|
@endif
|
|
|
|
{{-- Bottom panel: QR bottom-left, type-specific info bottom-right --}}
|
|
<div class="hero-bottom-panel">
|
|
<table style="width: 100%; border-collapse: collapse;">
|
|
<tr>
|
|
@if($qrBase64)
|
|
<td style="width: 22mm; padding-right: 4mm; vertical-align: bottom;">
|
|
<img src="{{ $qrBase64 }}" alt="QR" style="width: 20mm; height: 20mm; display: block;">
|
|
</td>
|
|
@endif
|
|
<td style="vertical-align: bottom; text-align: right;">
|
|
@if($isEvent && $post->meeting && ($post->meeting->venue || $meetingCityName || $post->meeting->from))
|
|
{{-- Event: venue + city, then date + time --}}
|
|
@php $venueParts = array_filter([$post->meeting->venue ?? null, $meetingCityName ?? null]); @endphp
|
|
@if(count($venueParts))
|
|
<div class="hero-bottom-text-venue">{{ implode(', ', $venueParts) }}</div>
|
|
@endif
|
|
@if($post->meeting->from)
|
|
<div class="hero-bottom-text">{{ \Illuminate\Support\Carbon::parse($post->meeting->from)->translatedFormat('l j F') }}, {{ \Illuminate\Support\Carbon::parse($post->meeting->from)->format('H:i') }} {{ __('messages.hour_abbrevation') }}</div>
|
|
@endif
|
|
@elseif($isNews)
|
|
{{-- News: tagline --}}
|
|
<div class="hero-bottom-text">{{ timebank_config('footer.tagline') }}</div>
|
|
@elseif($author)
|
|
{{-- Article / ImagePost: author name --}}
|
|
<div class="hero-bottom-text">{{ $author->full_name ?? $author->name }}</div>
|
|
@endif
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
<div class="hero-bottom-footer">{{ config('app.name') }} — {{ $isNews && $translation?->from ? \Illuminate\Support\Carbon::parse($translation->from)->translatedFormat('l j F Y') : timebank_config('footer.tagline') }}</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</body>
|
|
</html>
|