changed logic in visitor badge blade file #727
@@ -41,32 +41,26 @@
|
|||||||
.badge-header {
|
.badge-header {
|
||||||
background: #1a1a2e;
|
background: #1a1a2e;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
text-align: center;
|
padding: 1.5mm 2mm;
|
||||||
padding: 2mm 2mm 1.5mm;
|
|
||||||
font-size: 8pt;
|
font-size: 8pt;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
letter-spacing: 1px;
|
letter-spacing: 1px;
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
flex-shrink: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.badge-header .type {
|
.badge-header .type { font-size: 9pt; letter-spacing: 2px; }
|
||||||
font-size: 9pt;
|
.badge-header .badge-id { font-size: 7pt; opacity: 0.85; }
|
||||||
letter-spacing: 2px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.badge-header .badge-id {
|
|
||||||
font-size: 7pt;
|
|
||||||
opacity: 0.85;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ── Body ── */
|
/* ── Body ── */
|
||||||
.badge-body {
|
.badge-body {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex: 1;
|
flex: 1;
|
||||||
padding: 2mm;
|
padding: 1.5mm 2mm;
|
||||||
gap: 2mm;
|
gap: 2mm;
|
||||||
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* ── Fields (left) ── */
|
/* ── Fields (left) ── */
|
||||||
@@ -74,82 +68,104 @@
|
|||||||
flex: 1;
|
flex: 1;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
gap: 1.2mm;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
.field-row {
|
.field-row {
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: 16mm 3mm 1fr;
|
grid-template-columns: 16mm 3mm 1fr;
|
||||||
line-height: 1.3;
|
line-height: 1.25;
|
||||||
margin-bottom: 0.7mm;
|
margin-bottom: 0.6mm;
|
||||||
|
align-items: start;
|
||||||
}
|
}
|
||||||
|
|
||||||
.field-label {
|
.field-label {
|
||||||
color: #000; /* was #555 — now pure black */
|
color: #000;
|
||||||
font-size: 6.5pt;
|
font-size: 6.5pt;
|
||||||
font-weight: 700; /* was normal — now bold */
|
font-weight: 700;
|
||||||
|
white-space: nowrap;
|
||||||
}
|
}
|
||||||
|
|
||||||
.field-colon {
|
.field-colon {
|
||||||
color: #000; /* was #555 — now pure black */
|
color: #000;
|
||||||
font-size: 6.5pt;
|
font-size: 6.5pt;
|
||||||
font-weight: 700; /* added bold */
|
font-weight: 700;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.field-value {
|
.field-value {
|
||||||
font-weight: 700; /* was 600 — now fully bold */
|
font-weight: 700;
|
||||||
font-size: 6.5pt;
|
font-size: 6.5pt;
|
||||||
color: #000; /* was #111 — now pure black */
|
color: #000;
|
||||||
|
/* Prevent wrapping — truncate with ellipsis if too long */
|
||||||
|
white-space: nowrap;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* ── Photo (right) ── */
|
/* ── Photo column (right) ── */
|
||||||
.badge-photo {
|
.badge-photo {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
gap: 1mm;
|
|
||||||
width: 18mm;
|
width: 18mm;
|
||||||
|
flex-shrink: 0;
|
||||||
|
gap: 0.5mm;
|
||||||
}
|
}
|
||||||
|
|
||||||
.badge-photo img {
|
.badge-photo img {
|
||||||
width: 16mm;
|
width: 16mm;
|
||||||
height: 18mm;
|
height: 16mm;
|
||||||
object-fit: cover;
|
object-fit: cover;
|
||||||
border: 1px solid #ccc;
|
border: 1px solid #000;
|
||||||
}
|
}
|
||||||
|
|
||||||
.badge-photo .no-photo {
|
.badge-photo .no-photo {
|
||||||
width: 16mm;
|
width: 16mm;
|
||||||
height: 18mm;
|
height: 16mm;
|
||||||
border: 1.5px dashed #000; /* was #aaa — darker border */
|
border: 1.5px dashed #000;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
font-size: 6pt; /* slightly larger */
|
font-size: 6pt;
|
||||||
color: #000; /* was #aaa */
|
color: #000;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.host-sign {
|
.host-sign {
|
||||||
font-size: 6pt; /* was 5.5pt — slightly larger */
|
font-size: 6pt;
|
||||||
color: #000; /* was #555 — now pure black */
|
color: #000;
|
||||||
font-weight: 700; /* added bold */
|
font-weight: 700;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
border-top: 1px solid #000; /* was 0.5px #aaa — darker line */
|
border-top: 1px solid #000;
|
||||||
padding-top: 0.5mm;
|
padding-top: 0.5mm;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* ── QR code ── */
|
||||||
|
.visitor-qr {
|
||||||
|
margin-top: 1mm;
|
||||||
|
width: 18mm;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.visitor-qr svg {
|
||||||
|
width: 16mm !important;
|
||||||
|
height: 16mm !important;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
/* ── Footer ── */
|
/* ── Footer ── */
|
||||||
.badge-footer {
|
.badge-footer {
|
||||||
border-top: 1px solid #000; /* was 0.5px #ddd — darker line */
|
border-top: 1px solid #000;
|
||||||
padding: 1mm 2mm;
|
padding: 0.8mm 2mm;
|
||||||
text-align: right;
|
text-align: right;
|
||||||
font-size: 6pt; /* was 5.5pt — slightly larger */
|
font-size: 6pt;
|
||||||
color: #000; /* was #888 — now pure black */
|
color: #000;
|
||||||
font-weight: 700; /* added bold */
|
font-weight: 700;
|
||||||
|
flex-shrink: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media print {
|
@media print {
|
||||||
@@ -158,9 +174,9 @@
|
|||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
<body onload="window.print()">
|
<body>
|
||||||
|
|
||||||
{{-- ── Print button (visible on screen only, hidden when printing) ── --}}
|
{{-- ── Print / Close buttons (screen only) ── --}}
|
||||||
<div class="no-print" style="padding: 8px; text-align:center; background:#f3f4f6;">
|
<div class="no-print" style="padding: 8px; text-align:center; background:#f3f4f6;">
|
||||||
<button onclick="window.print()" style="padding:6px 18px; background:#1a1a2e; color:#fff; border:none; border-radius:6px; cursor:pointer; font-size:13px;">
|
<button onclick="window.print()" style="padding:6px 18px; background:#1a1a2e; color:#fff; border:none; border-radius:6px; cursor:pointer; font-size:13px;">
|
||||||
🖨️ Print Badge
|
🖨️ Print Badge
|
||||||
@@ -175,7 +191,7 @@
|
|||||||
{{-- Header --}}
|
{{-- Header --}}
|
||||||
<div class="badge-header">
|
<div class="badge-header">
|
||||||
<span class="type">{{ strtoupper($visitor->type ?? 'VISITOR') }}</span>
|
<span class="type">{{ strtoupper($visitor->type ?? 'VISITOR') }}</span>
|
||||||
<span class="badge-id">#{{ str_pad($visitor->register_id, 5, '0', STR_PAD_LEFT) }}</span>
|
<span class="badge-id">#{{ $visitor->register_id ?? str_pad($visitor->id, 5, '0', STR_PAD_LEFT) }}</span>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{{-- Body --}}
|
{{-- Body --}}
|
||||||
@@ -183,61 +199,62 @@
|
|||||||
|
|
||||||
{{-- Left: fields --}}
|
{{-- Left: fields --}}
|
||||||
<div class="badge-fields">
|
<div class="badge-fields">
|
||||||
<div class="field-row">
|
<div class="field-row">
|
||||||
<span class="field-label">Name</span>
|
<span class="field-label">Name</span>
|
||||||
<span class="field-colon">:</span>
|
<span class="field-colon">:</span>
|
||||||
<span class="field-value">{{ strtoupper($visitor->name) }}</span>
|
<span class="field-value">{{ strtoupper($visitor->name) }}</span>
|
||||||
</div>
|
|
||||||
<div class="field-row">
|
|
||||||
<span class="field-label">Company</span>
|
|
||||||
<span class="field-colon">:</span>
|
|
||||||
<span class="field-value">{{ $visitor->company }}</span>
|
|
||||||
</div>
|
|
||||||
<div class="field-row">
|
|
||||||
<span class="field-label">To Meet</span>
|
|
||||||
<span class="field-colon">:</span>
|
|
||||||
<span class="field-value">{{ strtoupper($visitor->employeeMaster?->name ?? '—') }}</span>
|
|
||||||
</div>
|
|
||||||
<div class="field-row">
|
|
||||||
<span class="field-label">Dept</span>
|
|
||||||
<span class="field-colon">:</span>
|
|
||||||
<span class="field-value">{{ strtoupper($visitor->employeeMaster?->department ?? $visitor->department ?? '—') }}</span>
|
|
||||||
</div>
|
|
||||||
<div class="field-row">
|
|
||||||
<span class="field-label">Valid Upto</span>
|
|
||||||
<span class="field-colon">:</span>
|
|
||||||
<span class="field-value">{{ $visitor->valid_upto ? \Carbon\Carbon::parse($visitor->valid_upto)->format('d/m/Y H:i:s') : '—' }}</span>
|
|
||||||
</div>
|
|
||||||
<div class="field-row">
|
|
||||||
<span class="field-label">Date & Time</span>
|
|
||||||
<span class="field-colon">:</span>
|
|
||||||
<span class="field-value">{{ $visitor->in_time ? \Carbon\Carbon::parse($visitor->in_time)->format('d/m/Y H:i:s') : '—' }}</span>
|
|
||||||
</div>
|
|
||||||
<div class="field-row">
|
|
||||||
<span class="field-label">No of Visitors</span>
|
|
||||||
<span class="field-colon">:</span>
|
|
||||||
<span class="field-value">{{ $visitor->number_of_person ?? 1 }}</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
<div class="field-row">
|
||||||
|
<span class="field-label">Company</span>
|
||||||
|
<span class="field-colon">:</span>
|
||||||
|
<span class="field-value">{{ $visitor->company }}</span>
|
||||||
|
</div>
|
||||||
|
<div class="field-row">
|
||||||
|
<span class="field-label">To Meet</span>
|
||||||
|
<span class="field-colon">:</span>
|
||||||
|
<span class="field-value">{{ strtoupper($visitor->employeeMaster?->name ?? '—') }}</span>
|
||||||
|
</div>
|
||||||
|
<div class="field-row">
|
||||||
|
<span class="field-label">Dept</span>
|
||||||
|
<span class="field-colon">:</span>
|
||||||
|
<span class="field-value">{{ strtoupper($visitor->employeeMaster?->department ?? $visitor->department ?? '—') }}</span>
|
||||||
|
</div>
|
||||||
|
<div class="field-row">
|
||||||
|
<span class="field-label">Valid Upto</span>
|
||||||
|
<span class="field-colon">:</span>
|
||||||
|
<span class="field-value">{{ $visitor->valid_upto ? \Carbon\Carbon::parse($visitor->valid_upto)->format('d/m/Y H:i:s') : '—' }}</span>
|
||||||
|
</div>
|
||||||
|
<div class="field-row">
|
||||||
|
<span class="field-label">Date & Time</span>
|
||||||
|
<span class="field-colon">:</span>
|
||||||
|
<span class="field-value">{{ $visitor->in_time ? \Carbon\Carbon::parse($visitor->in_time)->format('d/m/Y H:i:s') : '—' }}</span>
|
||||||
|
</div>
|
||||||
|
<div class="field-row">
|
||||||
|
<span class="field-label">No of Visitors</span>
|
||||||
|
<span class="field-colon">:</span>
|
||||||
|
<span class="field-value">{{ $visitor->number_of_person ?? 1 }}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
{{-- Right: photo + host sign --}}
|
{{-- Right: photo + host sign + QR --}}
|
||||||
<div class="badge-photo">
|
<div class="badge-photo">
|
||||||
@if($photoUrl)
|
@if($photoUrl)
|
||||||
<img src="{{ $photoUrl }}" alt="Visitor Photo" />
|
<img src="{{ $photoUrl }}" alt="Visitor Photo" />
|
||||||
@else
|
@else
|
||||||
<div class="no-photo">No Photo</div>
|
<div class="no-photo">No Photo</div>
|
||||||
@endif
|
@endif
|
||||||
|
|
||||||
<div class="host-sign">Host Sign</div>
|
<div class="host-sign">Host Sign</div>
|
||||||
<div class="visitor-qr" style="margin-top:2mm;">
|
|
||||||
{{-- {!! QrCode::size(25)
|
{{-- QR Code — high res, with quiet zone and high error correction --}}
|
||||||
->margin(0)
|
@if(!empty($visitor->register_id))
|
||||||
->generate($visitor->register_id) !!} --}}
|
<div class="visitor-qr">
|
||||||
@if(!empty($visitor->register_id))
|
{!! QrCode::size(300)
|
||||||
{!! QrCode::size(35)
|
->margin(2)
|
||||||
->margin(0)
|
->errorCorrection('H')
|
||||||
->generate((string) $visitor->register_id) !!}
|
->generate((string) $visitor->register_id) !!}
|
||||||
@endif
|
</div>
|
||||||
</div>
|
@endif
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
@@ -247,5 +264,11 @@
|
|||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
window.addEventListener('load', function () {
|
||||||
|
setTimeout(function () { window.print(); }, 300);
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
Reference in New Issue
Block a user