243 lines
7.3 KiB
PHP
243 lines
7.3 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: 210mm;
|
|
height: 297mm;
|
|
background-color: #ffffff;
|
|
font-family: DejaVu Sans, Arial, sans-serif;
|
|
color: #000000;
|
|
}
|
|
|
|
.page {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 210mm;
|
|
height: 297mm;
|
|
background-color: #ffffff;
|
|
}
|
|
|
|
/* ── Logo: top-right ── */
|
|
.logo-area {
|
|
position: absolute;
|
|
top: 13mm;
|
|
right: 15mm;
|
|
text-align: right;
|
|
}
|
|
.logo-area img {
|
|
max-height: 44mm;
|
|
max-width: 61mm;
|
|
}
|
|
.app-name {
|
|
font-size: 15pt;
|
|
color: #333333;
|
|
}
|
|
|
|
/* ── Categories: top-left, constrained so they never reach logo ── */
|
|
.categories {
|
|
position: absolute;
|
|
top: 20mm;
|
|
left: 20mm;
|
|
right: 100mm;
|
|
font-size: 13pt;
|
|
}
|
|
.badge-row {
|
|
display: block;
|
|
margin-bottom: 2.6mm;
|
|
}
|
|
.category-badge {
|
|
display: inline-block;
|
|
background-color: #555555;
|
|
color: #ffffff;
|
|
padding: 4px 13px;
|
|
border-radius: 8px;
|
|
font-size: 13pt;
|
|
font-weight: normal;
|
|
line-height: 1;
|
|
}
|
|
.location-badge {
|
|
display: inline-block;
|
|
font-family: 'OswaldRegular', sans-serif;
|
|
color: #666666;
|
|
font-size: 13pt;
|
|
text-transform: uppercase;
|
|
}
|
|
.expiry {
|
|
display: block;
|
|
margin-top: 2.6mm;
|
|
font-size: 13pt;
|
|
color: #666666;
|
|
}
|
|
|
|
/* ── Title ── */
|
|
.title {
|
|
position: absolute;
|
|
top: 55mm;
|
|
left: 20mm;
|
|
right: 20mm;
|
|
font-family: 'Oswald', sans-serif;
|
|
font-size: 37pt;
|
|
font-weight: 600;
|
|
line-height: 0.95;
|
|
text-transform: uppercase;
|
|
color: #000000;
|
|
padding-top: 17mm;
|
|
padding-bottom: 7mm;
|
|
}
|
|
.status-label { color: #333333; }
|
|
|
|
/* ── Content ── */
|
|
.call-content {
|
|
position: absolute;
|
|
top: 122mm;
|
|
left: 20mm;
|
|
right: 20mm;
|
|
font-size: 20pt;
|
|
font-weight: bold;
|
|
line-height: 1.35;
|
|
color: #000000;
|
|
max-height: 48mm;
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* ── Footer row: QR left + callable right ── */
|
|
.footer-panel {
|
|
position: absolute;
|
|
bottom: 20mm;
|
|
left: 20mm;
|
|
right: 20mm;
|
|
}
|
|
.footer-table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
}
|
|
.footer-qr-cell {
|
|
width: 32mm;
|
|
padding-right: 7mm;
|
|
vertical-align: bottom;
|
|
}
|
|
.footer-qr-cell img {
|
|
display: block;
|
|
width: 23mm;
|
|
height: 23mm;
|
|
}
|
|
.footer-callable-cell {
|
|
vertical-align: bottom;
|
|
text-align: right;
|
|
}
|
|
.callable-name {
|
|
font-family: 'Oswald', sans-serif;
|
|
font-weight: 600;
|
|
font-size: 22pt;
|
|
line-height: 0.95;
|
|
text-transform: uppercase;
|
|
color: #000000;
|
|
}
|
|
.callable-location {
|
|
font-family: 'OswaldRegular', sans-serif;
|
|
font-weight: normal;
|
|
font-size: 17pt;
|
|
line-height: 0.95;
|
|
text-transform: uppercase;
|
|
color: #555555;
|
|
margin-top: 2mm;
|
|
}
|
|
.footer-tagline {
|
|
margin-top: 4mm;
|
|
font-family: 'Poppins', sans-serif;
|
|
font-size: 11pt;
|
|
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">{{ $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 ── --}}
|
|
<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 ── --}}
|
|
@if($callContent)
|
|
<div class="call-content">{{ $callContent }}</div>
|
|
@endif
|
|
|
|
{{-- Footer: QR left + callable right ── --}}
|
|
<div class="footer-panel">
|
|
<table class="footer-table">
|
|
<tr>
|
|
@if($qrSvgBw)
|
|
<td class="footer-qr-cell">
|
|
<img src="{{ $qrSvgBw }}" 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>
|