Files
ladill-mini/resources/views/qr-codes/badges.blade.php
T
isaaccladandCursor 3fd5d785e3
Deploy Ladill Mini / deploy (push) Successful in 39s
Use ladl.link URLs for all front-facing QR and short-link surfaces.
Public landing pages, asset paths, payment callbacks, and redirects now go through QrCode::publicPath() / LadillLink instead of ladill.com/q/* routes.

Co-authored-by: Cursor <cursoragent@cursor.com>
2026-06-27 15:46:22 +00:00

86 lines
4.5 KiB
PHP

@php
$c = $qrCode->content();
$evColor = $c['brand_color'] ?? '#4f46e5';
$evName = $c['name'] ?? $qrCode->label;
$hasLogo = !empty($c['logo_path']);
$logoUrl = $hasLogo ? $qrCode->publicPath('event-logo') : null;
$size = $c['badge_size'] ?? '4x3';
// Physical badge dimensions (inches)
[$bw, $bh] = match ($size) {
'4x6' => ['4in', '6in'],
'cr80' => ['3.375in', '2.125in'],
default => ['4in', '3in'],
};
$stack = $size === '4x6'; // tall badge → stack vertically
@endphp
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
@include('partials.favicon')
<title>Badges {{ $evName }}</title>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background: #e5e7eb; color: #0f172a; }
.toolbar { position: sticky; top: 0; display: flex; gap: 10px; justify-content: center; padding: 14px; background: #fff; border-bottom: 1px solid #e2e8f0; }
.toolbar button { border: none; border-radius: 10px; padding: 9px 18px; font-size: 13px; font-weight: 700; cursor: pointer; }
.btn-print { background: {{ $evColor }}; color: #fff; }
.btn-close { background: #f1f5f9; color: #475569; }
.sheet { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; padding: 24px; }
.badge {
width: {{ $bw }}; height: {{ $bh }};
background: #fff; border: 1px solid #cbd5e1; border-radius: 10px; overflow: hidden;
display: flex; flex-direction: column;
}
.badge-head { background: {{ $evColor }}; color: #fff; padding: 8px 10px; display: flex; align-items: center; gap: 7px; }
.badge-head img { height: 22px; width: 22px; object-fit: contain; background: #fff; border-radius: 4px; padding: 1px; }
.badge-head .ev { font-size: 11px; font-weight: 800; letter-spacing: .02em; line-height: 1.1; }
.badge-body { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 6px 10px; }
.badge-name { font-size: 22px; font-weight: 900; line-height: 1.05; }
.badge-tier { margin-top: 3px; font-size: 11px; font-weight: 700; color: {{ $evColor }}; text-transform: uppercase; letter-spacing: .05em; }
.badge-fields { margin-top: 4px; font-size: 9.5px; color: #64748b; }
.badge-foot { display: flex; align-items: center; justify-content: space-between; padding: 6px 10px; border-top: 1px solid #e2e8f0; }
.badge-foot code { font-family: ui-monospace, monospace; font-size: 11px; font-weight: 700; letter-spacing: .12em; }
.badge-foot img { height: 44px; width: 44px; }
@media print {
.toolbar { display: none; }
body { background: #fff; }
.sheet { padding: 0; gap: 0; }
.badge { border: none; border-radius: 0; page-break-after: always; break-after: page; }
@page { size: {{ $bw }} {{ $bh }}; margin: 0; }
}
</style>
</head>
<body @if($auto) onload="window.print()" @endif>
<div class="toolbar">
<button class="btn-print" onclick="window.print()">Print {{ count($registrations) }} badge{{ count($registrations) === 1 ? '' : 's' }}</button>
<button class="btn-close" onclick="window.close()">Close</button>
</div>
<div class="sheet">
@forelse($registrations as $reg)
@php $badgeQr = 'https://api.qrserver.com/v1/create-qr-code/?size=120x120&margin=0&data=' . urlencode($reg->badge_code); @endphp
<div class="badge">
<div class="badge-head">
@if($hasLogo)<img src="{{ $logoUrl }}" alt="">@endif
<span class="ev">{{ $evName }}</span>
</div>
<div class="badge-body">
<div class="badge-name">{{ $reg->attendee_name }}</div>
<div class="badge-tier">{{ $reg->tier_name }}</div>
@if(!empty($reg->badge_fields))
<div class="badge-fields">{{ collect($reg->badge_fields)->map(fn($v,$k) => $v)->implode(' · ') }}</div>
@endif
</div>
<div class="badge-foot">
<code>{{ $reg->badge_code }}</code>
<img src="{{ $badgeQr }}" alt="{{ $reg->badge_code }}">
</div>
</div>
@empty
<p style="padding:40px;color:#64748b;">No confirmed attendees to print.</p>
@endforelse
</div>
</body>
</html>