248 lines
8.5 KiB
PHP
248 lines
8.5 KiB
PHP
<!DOCTYPE html>
|
||
<html>
|
||
<head>
|
||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
|
||
<meta charset="utf-8">
|
||
<title>{{ __('Calls') }}</title>
|
||
<style>
|
||
@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;
|
||
}
|
||
|
||
@page { margin: 0; }
|
||
* { box-sizing: border-box; margin: 0; padding: 0; }
|
||
|
||
html, body {
|
||
width: 210mm;
|
||
height: 297mm;
|
||
background-color: #ffffff;
|
||
font-family: DejaVu Sans, Arial, sans-serif;
|
||
color: #000000;
|
||
}
|
||
|
||
@php
|
||
// Layout per mode:
|
||
// 1-up: portrait A4, 1 col × 1 row, card 210×297mm, scale 1.0
|
||
// 2-up: landscape A4, 2 cols × 1 row, each card 148×210mm (A5 portrait), scale ≈ 0.705
|
||
// 4-up: portrait A4, 2 cols × 2 rows, each card 105×148mm, scale 0.498
|
||
$cols = $perPage >= 2 ? 2 : 1;
|
||
$rows = $perPage === 4 ? 2 : 1;
|
||
$cardW = $perPage === 4 ? 105 : ($perPage === 2 ? 148 : 210);
|
||
$cardH = $perPage === 4 ? 148 : ($perPage === 2 ? 210 : 297);
|
||
|
||
// Scale relative to A4 single baseline (210×297)
|
||
$scale = match($perPage) {
|
||
2 => 148/210, // A5 portrait ≈ 0.705
|
||
4 => 0.498,
|
||
default => 1.0,
|
||
};
|
||
|
||
$margin = round(20 * $scale, 1) . 'mm';
|
||
$logoTop = round(13 * $scale, 1) . 'mm';
|
||
$logoRight = round(15 * $scale, 1) . 'mm';
|
||
$logoMaxH = round(44 * $scale, 1) . 'mm';
|
||
$logoMaxW = round(61 * $scale, 1) . 'mm';
|
||
$catTop = round(20 * $scale, 1) . 'mm';
|
||
$catRight = round(100 * $scale, 1) . 'mm';
|
||
$catFont = round(13 * $scale, 1) . 'pt';
|
||
$badgePadV = round(4 * $scale, 1) . 'px';
|
||
$badgePadH = round(13 * $scale, 1) . 'px';
|
||
$badgeRadius = round(8 * $scale, 1) . 'px';
|
||
$badgeGap = round(2.6 * $scale, 1) . 'mm';
|
||
$titleTop = round(55 * $scale, 1) . 'mm';
|
||
$titleFont = round(37 * $scale, 1) . 'pt';
|
||
$titlePadT = round(17 * $scale, 1) . 'mm';
|
||
$titlePadB = round(7 * $scale, 1) . 'mm';
|
||
$contentTop = round(122 * $scale, 1) . 'mm';
|
||
$contentFont = round(20 * $scale, 1) . 'pt';
|
||
$contentMaxH = round(48 * $scale, 1) . 'mm';
|
||
$footerBottom= round(20 * $scale, 1) . 'mm';
|
||
$qrSize = round(23 * $scale, 1) . 'mm';
|
||
$qrCellW = round(32 * $scale, 1) . 'mm';
|
||
$qrCellPad = round(7 * $scale, 1) . 'mm';
|
||
$callNameFont= round(22 * $scale, 1) . 'pt';
|
||
$callLocFont = round(17 * $scale, 1) . 'pt';
|
||
$callLocMT = round(2 * $scale, 1) . 'mm';
|
||
$taglineFont = round(11 * $scale, 1) . 'pt';
|
||
$taglineMT = round(4 * $scale, 1) . 'mm';
|
||
@endphp
|
||
|
||
/* Page table: groups cards into pages */
|
||
@if($perPage === 2)
|
||
@page { size: A4 landscape; margin: 0; }
|
||
html, body { width: 297mm; height: 210mm; }
|
||
@endif
|
||
|
||
.page-table {
|
||
width: {{ $perPage === 2 ? '297mm' : '210mm' }};
|
||
border-collapse: collapse;
|
||
}
|
||
.page-table-break { page-break-after: always; }
|
||
.page-table tr { height: {{ $cardH }}mm; }
|
||
.card-cell {
|
||
width: {{ $cardW }}mm;
|
||
height: {{ $cardH }}mm;
|
||
overflow: hidden;
|
||
position: relative;
|
||
vertical-align: top;
|
||
background-color: #ffffff;
|
||
}
|
||
|
||
.logo-area {
|
||
position: absolute;
|
||
top: {{ $logoTop }};
|
||
right: {{ $logoRight }};
|
||
text-align: right;
|
||
}
|
||
.logo-area img { max-height: {{ $logoMaxH }}; max-width: {{ $logoMaxW }}; }
|
||
.app-name { font-size: {{ $catFont }}; color: #333333; }
|
||
|
||
.categories {
|
||
position: absolute;
|
||
top: {{ $catTop }};
|
||
left: {{ $margin }};
|
||
right: {{ $catRight }};
|
||
font-size: {{ $catFont }};
|
||
}
|
||
.badge-row { display: block; margin-bottom: {{ $badgeGap }}; }
|
||
.category-badge {
|
||
display: inline-block;
|
||
background-color: #555555;
|
||
color: #ffffff;
|
||
padding: {{ $badgePadV }} {{ $badgePadH }};
|
||
border-radius: {{ $badgeRadius }};
|
||
font-size: {{ $catFont }};
|
||
font-weight: normal;
|
||
line-height: 1;
|
||
}
|
||
.location-badge {
|
||
display: inline-block;
|
||
font-family: 'OswaldRegular', sans-serif;
|
||
color: #666666;
|
||
font-size: {{ $catFont }};
|
||
text-transform: uppercase;
|
||
}
|
||
.expiry {
|
||
display: block;
|
||
margin-top: {{ $badgeGap }};
|
||
font-size: {{ $catFont }};
|
||
color: #666666;
|
||
}
|
||
|
||
.title {
|
||
position: absolute;
|
||
top: {{ $titleTop }};
|
||
left: {{ $margin }};
|
||
right: {{ $margin }};
|
||
font-family: 'Oswald', sans-serif;
|
||
font-size: {{ $titleFont }};
|
||
font-weight: 600;
|
||
line-height: 0.95;
|
||
text-transform: uppercase;
|
||
color: #000000;
|
||
padding-top: {{ $titlePadT }};
|
||
padding-bottom: {{ $titlePadB }};
|
||
}
|
||
.status-label { color: #333333; }
|
||
|
||
.call-content {
|
||
position: absolute;
|
||
top: {{ $contentTop }};
|
||
left: {{ $margin }};
|
||
right: {{ $margin }};
|
||
font-size: {{ $contentFont }};
|
||
font-weight: bold;
|
||
line-height: 1.35;
|
||
color: #000000;
|
||
max-height: {{ $contentMaxH }};
|
||
overflow: hidden;
|
||
}
|
||
|
||
.footer-panel {
|
||
position: absolute;
|
||
bottom: {{ $footerBottom }};
|
||
left: {{ $margin }};
|
||
right: {{ $margin }};
|
||
}
|
||
.footer-table { width: 100%; border-collapse: collapse; }
|
||
.footer-qr-cell {
|
||
width: {{ $qrCellW }};
|
||
padding-right: {{ $qrCellPad }};
|
||
vertical-align: bottom;
|
||
}
|
||
.footer-qr-cell img { display: block; width: {{ $qrSize }}; height: {{ $qrSize }}; }
|
||
.footer-callable-cell { vertical-align: bottom; text-align: right; }
|
||
.callable-name {
|
||
font-family: 'Oswald', sans-serif;
|
||
font-weight: 600;
|
||
font-size: {{ $callNameFont }};
|
||
line-height: 0.95;
|
||
text-transform: uppercase;
|
||
color: #000000;
|
||
}
|
||
.callable-location {
|
||
font-family: 'OswaldRegular', sans-serif;
|
||
font-weight: normal;
|
||
font-size: {{ $callLocFont }};
|
||
line-height: 0.95;
|
||
text-transform: uppercase;
|
||
color: #555555;
|
||
margin-top: {{ $callLocMT }};
|
||
}
|
||
.footer-tagline {
|
||
margin-top: {{ $taglineMT }};
|
||
font-family: 'Poppins', sans-serif;
|
||
font-size: {{ $taglineFont }};
|
||
color: #aaaaaa;
|
||
text-align: left;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
@php
|
||
// Chunk calls into pages (each page holds $rows × $cols cards)
|
||
$cardsPerPage = $rows * $cols;
|
||
$pages = array_chunk($calls, $cardsPerPage);
|
||
@endphp
|
||
|
||
@foreach($pages as $pageIndex => $pageCalls)
|
||
@php
|
||
$padded = array_pad($pageCalls, $cardsPerPage, null);
|
||
$isLast = $pageIndex === count($pages) - 1;
|
||
@endphp
|
||
|
||
<table class="page-table {{ $isLast ? '' : 'page-table-break' }}">
|
||
@for($row = 0; $row < $rows; $row++)
|
||
<tr>
|
||
@for($col = 0; $col < $cols; $col++)
|
||
@php $idx = $row * $cols + $col; $data = $padded[$idx] ?? null; @endphp
|
||
<td class="card-cell">
|
||
@if($data)
|
||
@include('calls._pdf-card-bw', $data)
|
||
@endif
|
||
</td>
|
||
@endfor
|
||
</tr>
|
||
@endfor
|
||
</table>
|
||
@endforeach
|
||
|
||
</body>
|
||
</html>
|