153 lines
4.5 KiB
PHP
153 lines
4.5 KiB
PHP
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<style>
|
|
@page { margin: 0; }
|
|
body {
|
|
font-family: 'Helvetica', 'Arial', sans-serif;
|
|
background-color: #f1f5f9;
|
|
margin: 0; padding: 0;
|
|
text-align: center;
|
|
}
|
|
|
|
.page-wrapper { padding-top: 30px; }
|
|
|
|
.card {
|
|
display: inline-block;
|
|
width: 260pt;
|
|
background: #ffffff;
|
|
border-radius: 30px;
|
|
padding: 0; /* Padding dipindah ke dalam agar aksen bar bisa full width */
|
|
text-align: left;
|
|
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
|
|
overflow: hidden; /* Memastikan border-radius memotong aksen bar */
|
|
border: 1px solid #e2e8f0;
|
|
}
|
|
|
|
/* Akses Bar Warna di Atas */
|
|
.accent-bar {
|
|
height: 8px;
|
|
background: linear-gradient(to right, #4f46e5, #818cf8);
|
|
width: 100%;
|
|
}
|
|
|
|
.card-content { padding: 25px; }
|
|
|
|
.header {
|
|
text-align: center;
|
|
border-bottom: 2px solid #f8fafc;
|
|
padding-bottom: 15px;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.brand {
|
|
font-size: 11pt;
|
|
font-weight: 900;
|
|
color: #4f46e5;
|
|
text-transform: uppercase;
|
|
letter-spacing: 2px;
|
|
}
|
|
|
|
.cat-name {
|
|
font-size: 22pt;
|
|
font-weight: bold;
|
|
color: #0f172a;
|
|
margin-top: 4px;
|
|
letter-spacing: -1px;
|
|
}
|
|
|
|
.info-table { width: 100%; border-collapse: collapse; }
|
|
|
|
.label {
|
|
font-size: 7.5pt;
|
|
font-weight: 900;
|
|
color: #94a3b8;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.5px;
|
|
margin-bottom: 2px;
|
|
}
|
|
|
|
.value {
|
|
font-size: 11pt;
|
|
font-weight: bold;
|
|
color: #334155;
|
|
padding-bottom: 15px;
|
|
}
|
|
|
|
.qr-section {
|
|
text-align: center;
|
|
margin-top: 10px;
|
|
padding: 20px;
|
|
background-color: #f8fafc;
|
|
border-radius: 20px;
|
|
}
|
|
|
|
.qr-image { margin-bottom: 8px; }
|
|
|
|
.qr-text {
|
|
font-size: 8pt;
|
|
font-weight: 800;
|
|
color: #64748b;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.5px;
|
|
}
|
|
|
|
.footer {
|
|
font-size: 7pt;
|
|
color: #94a3b8;
|
|
text-align: center;
|
|
margin-top: 20px;
|
|
font-style: italic;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="page-wrapper">
|
|
<div class="card">
|
|
<div class="accent-bar"></div>
|
|
<div class="card-content">
|
|
<div class="header">
|
|
<div class="brand">ILY Aregau Cattery</div>
|
|
<div class="cat-name">{{ $cat->nama_kucing }}</div>
|
|
</div>
|
|
|
|
<table class="info-table">
|
|
<tr>
|
|
<td width="55%">
|
|
<div class="label">Ras / Breed</div>
|
|
<div class="value">{{ $cat->ras }}</div>
|
|
</td>
|
|
<td>
|
|
<div class="label">ID Kucing</div>
|
|
<div class="value">#{{ str_pad($cat->id, 4, '0', STR_PAD_LEFT) }}</div>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<div class="label">Jenis Kelamin</div>
|
|
<div class="value">{{ $cat->jenis_kelamin }}</div>
|
|
</td>
|
|
<td>
|
|
<div class="label">Usia</div>
|
|
<div class="value">{{ $cat->age }}</div>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
|
|
<div class="qr-section">
|
|
<div class="qr-image">
|
|
{{-- FIX: Base64 SVG yang sudah Anda buat di Controller --}}
|
|
<img src="data:image/svg+xml;base64,{{ $qrCode }}" width="90">
|
|
</div>
|
|
<div class="qr-text">Scan Medis History</div>
|
|
</div>
|
|
|
|
<div class="footer">
|
|
Generated by ILY Cattery Management Sistem<br>
|
|
{{ now()->format('d M Y H:i') }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html> |