244 lines
7.6 KiB
PHP
244 lines
7.6 KiB
PHP
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
|
|
<meta charset="utf-8">
|
|
<title>{{ $call->tag?->translation?->name ?? $call->tag?->name }}</title>
|
|
<style>
|
|
* { box-sizing: border-box; margin: 0; padding: 0; }
|
|
|
|
@font-face {
|
|
font-family: 'OswaldRegular';
|
|
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: 'Poppins';
|
|
src: url('/fonts/static/poppins/Poppins-Regular.otf') format('opentype');
|
|
font-weight: normal;
|
|
font-style: normal;
|
|
}
|
|
|
|
html, body {
|
|
width: 105mm;
|
|
height: 148mm;
|
|
background-color: #ffffff;
|
|
font-family: DejaVu Sans, Arial, sans-serif;
|
|
color: #ffffff;
|
|
}
|
|
|
|
.page {
|
|
position: absolute;
|
|
top: 5mm;
|
|
left: 5mm;
|
|
width: 95mm;
|
|
height: 138mm;
|
|
background-color: #{{ $bgDarkHex }};
|
|
border-radius: 6px;
|
|
}
|
|
|
|
/* ── Logo: top-right, same proportional position as post PDF ── */
|
|
.logo-area {
|
|
position: absolute;
|
|
top: 6mm;
|
|
right: 7mm;
|
|
text-align: right;
|
|
}
|
|
.logo-area img {
|
|
max-height: 20mm;
|
|
max-width: 28mm;
|
|
}
|
|
.app-name {
|
|
font-size: 7pt;
|
|
color: #aaaaaa;
|
|
}
|
|
|
|
/* ── Categories: top-left, constrained so they never reach logo ── */
|
|
.categories {
|
|
position: absolute;
|
|
top: 9mm;
|
|
left: 9mm;
|
|
right: 46mm;
|
|
font-size: 6pt;
|
|
}
|
|
.badge-row {
|
|
display: block;
|
|
margin-bottom: 1.2mm;
|
|
}
|
|
.category-badge {
|
|
display: inline-block;
|
|
background-color: #{{ $tagColorHex }};
|
|
color: #000000;
|
|
padding: 2px 6px;
|
|
border-radius: 4px;
|
|
font-size: 6pt;
|
|
font-weight: normal;
|
|
line-height: 1;
|
|
}
|
|
.location-badge {
|
|
display: inline-block;
|
|
font-family: 'OswaldRegular', sans-serif;
|
|
color: #cccccc;
|
|
font-size: 6pt;
|
|
text-transform: uppercase;
|
|
}
|
|
.expiry {
|
|
display: block;
|
|
margin-top: 1.2mm;
|
|
font-size: 6pt;
|
|
color: #cccccc;
|
|
}
|
|
|
|
/* ── Title: large margin-top/bottom for breathing room, tight line-height within ── */
|
|
.title {
|
|
position: absolute;
|
|
top: 25mm;
|
|
left: 9mm;
|
|
right: 9mm;
|
|
font-family: 'Oswald', sans-serif;
|
|
font-size: 17pt;
|
|
font-weight: 600;
|
|
line-height: 0.95;
|
|
text-transform: uppercase;
|
|
color: #ffffff;
|
|
padding-top: 8mm;
|
|
padding-bottom: 3mm;
|
|
}
|
|
.status-label { color: #fc8181; }
|
|
|
|
/* ── Content: below title (25mm + 8mm + ~20mm text + 3mm = 56mm) ── */
|
|
.call-content {
|
|
position: absolute;
|
|
top: 56mm;
|
|
left: 9mm;
|
|
right: 9mm;
|
|
font-size: 9pt;
|
|
font-weight: bold;
|
|
line-height: 1.35;
|
|
color: #ffffff;
|
|
max-height: 22mm;
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* ── Footer row: QR left + callable right, pinned to bottom ── */
|
|
.footer-panel {
|
|
position: absolute;
|
|
bottom: 9mm;
|
|
left: 9mm;
|
|
right: 9mm;
|
|
}
|
|
.footer-table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
}
|
|
.footer-qr-cell {
|
|
width: 14.5mm;
|
|
padding-right: 3mm;
|
|
vertical-align: bottom;
|
|
}
|
|
.footer-qr-cell img {
|
|
display: block;
|
|
width: 10.5mm;
|
|
height: 10.5mm;
|
|
}
|
|
.footer-callable-cell {
|
|
vertical-align: bottom;
|
|
text-align: right;
|
|
}
|
|
.callable-name {
|
|
font-family: 'Oswald', sans-serif;
|
|
font-weight: 600;
|
|
font-size: 10pt;
|
|
line-height: 0.95;
|
|
text-transform: uppercase;
|
|
color: #ffffff;
|
|
}
|
|
.callable-location {
|
|
font-family: 'OswaldRegular', sans-serif;
|
|
font-weight: normal;
|
|
font-size: 8pt;
|
|
line-height: 0.95;
|
|
text-transform: uppercase;
|
|
color: #cccccc;
|
|
margin-top: 1mm;
|
|
}
|
|
.footer-tagline {
|
|
margin-top: 2mm;
|
|
font-family: 'Poppins', sans-serif;
|
|
font-size: 5pt;
|
|
color: #aaaaaa;
|
|
text-align: left;
|
|
}
|
|
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="page">
|
|
|
|
{{-- Logo: top-right ── --}}
|
|
<div class="logo-area">
|
|
@if($logoBase64)
|
|
<img src="{{ $logoBase64 }}" alt="{{ config('app.name') }}">
|
|
@else
|
|
<div class="app-name">{{ config('app.name') }}</div>
|
|
@endif
|
|
</div>
|
|
|
|
{{-- Categories: top-left, never overlap logo ── --}}
|
|
<div class="categories">
|
|
@foreach($tagCategories as $cat)
|
|
<div class="badge-row"><span class="category-badge" style="background-color: #{{ $cat['colorHex'] ?? $tagColorHex }};">{{ $cat['name'] }}</span></div>
|
|
@endforeach
|
|
@if($callLocation)
|
|
<div class="badge-row"><span class="location-badge">{{ $callLocation }}</span></div>
|
|
@endif
|
|
@if($expiryBadgeText)
|
|
<div class="badge-row"><span class="location-badge">{{ $expiryBadgeText }}</span></div>
|
|
@endif
|
|
</div>
|
|
|
|
{{-- Title: below logo ── --}}
|
|
<div class="title">
|
|
@if($isDeleted)<span class="status-label">{{ $statusLabelDeleted }}: </span>
|
|
@elseif($call->is_suppressed)<span class="status-label">{{ $statusLabelBlocked }}: </span>
|
|
@elseif($call->is_paused)<span class="status-label">{{ $statusLabelPaused }}: </span>
|
|
@elseif($isExpired)<span class="status-label">{{ $statusLabelExpired }}: </span>
|
|
@endif{{ $call->tag?->translation?->name ?? $call->tag?->name }}
|
|
</div>
|
|
|
|
{{-- Content: below title ── --}}
|
|
@if($callContent)
|
|
<div class="call-content">{{ $callContent }}</div>
|
|
@endif
|
|
|
|
{{-- Footer: QR left + callable right, matching post PDF event footer ── --}}
|
|
<div class="footer-panel">
|
|
<table class="footer-table">
|
|
<tr>
|
|
@if($qrSvg)
|
|
<td class="footer-qr-cell">
|
|
<img src="{{ $qrSvg }}" alt="QR">
|
|
</td>
|
|
@endif
|
|
<td class="footer-callable-cell">
|
|
<div class="callable-name">{{ $call->callable?->name }}</div>
|
|
@if($callableLocation)
|
|
<div class="callable-location">{{ $callableLocation }}</div>
|
|
@endif
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
<div class="footer-tagline">{{ config('app.name') }} — {{ timebank_config('footer.tagline') }}</div>
|
|
</div>
|
|
|
|
</div>
|
|
</body>
|
|
</html>
|