Initial commit: Struktur aplikasi ilycats
This commit is contained in:
Dwi F Sukmana
@@ -0,0 +1,153 @@
|
||||
<!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 Medical History</div>
|
||||
</div>
|
||||
|
||||
<div class="footer">
|
||||
Generated by ILY Cattery Management System<br>
|
||||
{{ now()->format('d M Y H:i') }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user