180 lines
4.5 KiB
PHP
180 lines
4.5 KiB
PHP
<!DOCTYPE html>
|
|
<html lang="id">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Kartu Anggota {{ $member->nama }}</title>
|
|
|
|
<style>
|
|
body {
|
|
font-family: 'Poppins', sans-serif;
|
|
margin: 0;
|
|
background-color: #f3f4f6;
|
|
-webkit-print-color-adjust: exact;
|
|
print-color-adjust: exact;
|
|
}
|
|
|
|
.kartu {
|
|
width: 600px;
|
|
height: 350px;
|
|
border-radius: 15px;
|
|
overflow: hidden;
|
|
margin: 40px auto;
|
|
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
|
|
background: #ffffff;
|
|
position: relative;
|
|
}
|
|
|
|
.header {
|
|
background: linear-gradient(90deg, #0072b1 0%, #00a3e0 60%, #f7931e 100%);
|
|
height: 80px;
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 0 25px;
|
|
color: white;
|
|
}
|
|
|
|
.header img {
|
|
height: 60px;
|
|
margin-right: 15px;
|
|
}
|
|
|
|
.header h1 {
|
|
font-size: 1.4rem;
|
|
margin: 0;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.header span {
|
|
font-size: 0.9rem;
|
|
display: block;
|
|
}
|
|
|
|
.content {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 30px;
|
|
}
|
|
|
|
.info {
|
|
flex: 2;
|
|
}
|
|
|
|
.info h2 {
|
|
margin: 0;
|
|
font-size: 1.4rem;
|
|
color: #111827;
|
|
}
|
|
|
|
.info p {
|
|
margin: 8px 0;
|
|
font-size: 0.95rem;
|
|
color: #374151;
|
|
}
|
|
|
|
/* FOTO */
|
|
.foto {
|
|
flex: 1;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
.foto img {
|
|
width: 120px;
|
|
height: 150px;
|
|
object-fit: cover;
|
|
border-radius: 10px;
|
|
border: 3px solid #e5e7eb;
|
|
background: white;
|
|
}
|
|
|
|
.footer {
|
|
background-color: #f7931e;
|
|
color: white;
|
|
text-align: center;
|
|
font-size: 0.9rem;
|
|
padding: 8px 0;
|
|
position: absolute;
|
|
bottom: 0;
|
|
width: 100%;
|
|
}
|
|
|
|
.print-btn {
|
|
display: block;
|
|
width: 200px;
|
|
margin: 20px auto 0;
|
|
padding: 12px;
|
|
text-align: center;
|
|
background: #0072b1;
|
|
color: white;
|
|
border-radius: 8px;
|
|
cursor: pointer;
|
|
text-decoration: none;
|
|
font-weight: bold;
|
|
}
|
|
|
|
@media print {
|
|
.print-btn {
|
|
display: none !important;
|
|
}
|
|
|
|
.kartu {
|
|
margin: 0 auto !important;
|
|
box-shadow: none !important;
|
|
}
|
|
|
|
@page {
|
|
margin: 10mm;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<a href="#" class="print-btn" onclick="window.print()">Cetak Kartu</a>
|
|
|
|
<div class="kartu">
|
|
<div class="header">
|
|
<img src="{{ asset('images/pustaka.jpeg') }}" alt="Logo BAKORWIL">
|
|
<div>
|
|
<h1>BAKORWIL III MALANG PROV JATIM</h1>
|
|
<span>KARTU TANDA ANGGOTA - PUSTAKA NAWASENA</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="content">
|
|
<div class="info">
|
|
<h2>{{ $member->nama }}</h2>
|
|
<p>NIP/NIM: {{ $member->nip_nim ?? '-' }}</p>
|
|
<p>Email: {{ $member->email }}</p>
|
|
<p>Alamat: {{ $member->alamat }}</p>
|
|
<p>Nomor Telepon: {{ $member->no_hp ?? '-' }}</p>
|
|
</div>
|
|
|
|
<div class="foto">
|
|
@php
|
|
$fotoPath = $member->foto ? storage_path('app/public/foto_anggota/'.$member->foto) : public_path('images/default-user.png');
|
|
if(file_exists($fotoPath)){
|
|
$fotoData = base64_encode(file_get_contents($fotoPath));
|
|
$fotoExt = pathinfo($fotoPath, PATHINFO_EXTENSION);
|
|
$fotoSrc = "data:image/{$fotoExt};base64,{$fotoData}";
|
|
} else {
|
|
$fotoSrc = asset('images/default-user.png');
|
|
}
|
|
@endphp
|
|
<img src="{{ $fotoSrc }}" alt="Foto {{ $member->nama }}">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="footer">
|
|
Pustaka Nawasena • BAKORWIL III Malang • bakorwilmalang@jatimprov.go.id
|
|
</div>
|
|
</div>
|
|
|
|
</body>
|
|
|
|
</html>
|