File: /home/bdedition/public_html/core/resources/views/admin/users/card.blade.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ID Card Design</title>
<link rel="stylesheet" href="styles.css">
<style>
/* General Reset */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f0f0f0;
}
.id-card-container {
display: flex;
gap: 20px;
}
/* ID Card */
.id-card {
width: 300px;
height: 500px;
border-radius: 15px;
overflow: hidden;
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
display: flex;
flex-direction: column;
justify-content: space-between;
padding: 20px;
position: relative;
}
.id-card::before {
content: '';
position: absolute;
top: 35px;
left: 70px;
width: 50%;
height: 100%;
background-image: url('{{siteLogo('dark')}}');
background-repeat: no-repeat;
background-position: center;
background-size: contain;
opacity: 0.09;
z-index: 0;
/* margin: 0px auto; */
pointer-events: none;
}
/* Front Side */
.front {
background: linear-gradient(to bottom, #7e1416, #7e1416);
color: white;
}
.header {
text-align: center;
margin-bottom: 65px;
}
.header h2 {
font-size: 25px;
font-family: sans-serif;
font-weight: bold;
line-height: 45px;
}
.header p {
font-size: 15px;
margin-top: 5px;
line-height: 25px;
}
.photo-container {
display: flex;
justify-content: center;
margin: 20px 0;
}
.photo {
width: 120px;
height: 120px;
border-radius: 10px;
background-color: white;
border: 4px solid #fff;
}
.details {
grid-template-columns: auto 1fr;
gap: 5px 10px;
font-size: 14px;
color: white;
text-align: center;
}
.details p {
margin-bottom: 5px;
color: #000;
}
.details strong {
color: #000;
}
.signature {
text-align: right;
margin: 10px 0;
}
.signature img {
width: 100px;
height: auto;
margin-top: 10px;
}
/* Back Side */
.back {
background-color: white;
border: 2px solid #ddd;
padding: 20px;
}
.terms-title {
color: #f9f9f9;
text-align: center;
padding: 5px;
font-size: 16px;
background: #7e1416;
border-radius: 10px;
}
.terms {
font-size: 12px;
padding: 10px 20px;
list-style: disc;
color: #555;
}
li {
font-size: 14px;
line-height: 25px;
}
.contact-info {
font-size: 14px;
margin: 10px 0;
}
.contact-info p {
margin: 5px 0;
font-size: 13px;
line-height: 20px;
}
.barcode {
text-align: center;
margin-top: 10px;
}
.barcode img {
width: 100px;
height: auto;
}
.card-logo {
width: 200px;
overflow: hidden;
margin: 0px auto;
}
img.card-image {
width: 100%;
}
.details h2 {
font-size: 20px;
line-height: 50px;
font-weight: 800;
font-family: 'Atlassian Sans';
color: #23997d;
}
</style>
</head>
<body>
<div class="id-card-container">
<!-- Front Side -->
<div class="id-card front"
style="background-image: url('{{ asset('assets/front.png') }}'); background-size: cover; background-position: center;">
<div class="header">
</div>
<div class="photo-container">
@if(!empty($staffInfo->image))
<img alt="No Photo Found!" class="photo"
src="{{ asset('assets/images/user/profile/'.$staffInfo->image) }}">
@else
<img alt="No Photo Found!" class="photo"
src="{{ asset('public/no-profile.png') }}">
@endif
</div>
<div class="details">
<h2>{{$staffInfo->fullname}}</h2>
<p><strong>
{{getDesignationTitle($staffInfo->designation)}}
</strong></p>
<p>{{$staffInfo->upazila}}</p>
</div>
<div class="signature">
@if(!empty($id_card_settings_info->signature))
<img src="{{ asset('public/uploads/institute/signature/'.$id_card_settings_info->signature) }}" alt="Principal's Signature">
@endif
<p style="margin-top:10px;color:#000;">Editor</p>
</div>
</div>
<!-- Back Side -->
<div class="id-card back"
style="background-image: url('{{ asset('assets/backend.png') }}'); background-size: cover; background-position: center;">
<img alt="No Photo Found!" class="card-logo" src="{{siteLogo('dark')}}">
<div class="contact-info">
<p><strong>Phone:</strong> {{$id_card_settings_info->phone ?? ""}}</p>
<p><strong>Mail:</strong> {{$id_card_settings_info->email ?? ""}}</p>
{{-- <p><strong>Website:</strong> {{$id_card_settings_info->website ?? ""}}</p> --}}
</div>
<div class="barcode">
{!! $qrCode !!}
</div>
</div>
</div>
</body>
</html>