<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sertifikat {{ $pelatihanPeserta->pelatihan->title }}</title>
<style>
@page {
size: A4 landscape;
margin: 0;
}
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #E3F2FD;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
overflow: hidden;
}
.certificate {
/* background-color: #FFFFFF; */
color: #03400c;
padding: 50px;
text-align: center;
width: calc(100% - 100px);
height: 693px;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
position: relative;
background-image: url("{{ public_path('/images/bg.jpg') }}");
background-repeat: no-repeat;
background-size: cover;
margin: auto;
}
.header {
font-size: 60px;
font-weight: bold;
font-weight: bold;
}
.sub-header {
font-size: 24px;
margin-bottom: 30px;
font-style: italic;
}
.participant-name {
font-size: 44px;
font-weight: bold;
width: auto;
margin: auto;
max-width: 500px;
margin-bottom: 10px;
line-height: 0.9;
text-transform: uppercase;
}
.underline {
width: auto;
position: relative;
max-width: 500px;
height: 4px;
background-color: #b98c2a;
display: block;
margin: auto;
}
.description {
/* height: 200px; */
max-width: 600px;
margin: auto;
margin-bottom: 10px;
/* position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0; */
}
.signature {
font-size: 18px;
margin-top: 20px;
position: absolute;
bottom: 80px;
left: 0;
right: 0;
}
/* .signature img {
height: 80px;
margin-bottom: 10px;
} */
.footer {
position: absolute;
bottom: 50px;
left: 100px;
font-size: 14px;
color: #757575;
text-align: center;
}
.ttd {
position: relative;
text-align: center;
margin: auto;
width: 300px;
height: 120px;
z-index: 99;
left: 0;
right: 0;
}
/* .ttd img {
top: 18px;
width: 100px;
position: absolute;
margin: auto;
left: 100px;
z-index: 99;
} */
.logo img {
max-height: 50px;
}
.nama-pelatihan {
margin: 0;
font-size: 36px;
font-weight: bold;
text-align: center;
line-height: 0.9;
text-transform: uppercase;
margin-top: 8px;
margin-bottom: 8px;
}
.signature-verification {
display: inline-block;
align-items: center;
justify-content: center;
gap: 12px;
background-color: #f5f5f5;
padding: 8px 12px;
border-radius: 4px;
width: 300px;
height: 90px;
font-family: Arial, sans-serif;
position: relative;
}
.qr-code {
display: inline-block;
width: 80px;
height: 80px;
background-color: white;
padding: 4px;
border-radius: 2px;
vertical-align: middle;
position: absolute;
left: 10px;
top: 10px;
bottom: 10px;
margin: auto;
}
.signature-icon {
display: inline-block;
color: #0088cc;
font-size: 24px;
vertical-align: middle;
position: absolute;
top: 0;
bottom: 0;
left: 130px;
margin: auto;
height: 30px;
}
.signature-text {
display: inline-block;
height: 50px;
font-size: 12px;
color: #444;
line-height: 1.4;
vertical-align: middle;
position: absolute;
right: 20px;
top: 0;
bottom: 0;
margin: auto;
text-align: left;
}
.page-break {
page-break-after: always;
}
.container {
max-width: 1000px;
margin: 20px auto;
padding: 20px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
h1 {
color: #0d4f2a;
font-size: 20px;
margin-bottom: 0px;
text-transform: uppercase;
}
h2 {
color: #0d4f2a;
font-size: 32px;
font-weight: bold;
margin-top: 0px;
margin-bottom: 0px;
text-transform: uppercase;
}
table {
width: 100%;
border-collapse: collapse;
margin-top: 10px;
}
th,
td {
border: 4px solid white;
padding: 10px;
text-align: left;
background-color: #219476;
color: white;
}
th {
background-color: #0d4f2a;
color: white;
}
.table-footer {
margin-top: 10px;
font-size: 18px;
font-weight: bold;
background-color: #0d4f2a;
color: white;
padding: 10px;
text-align: center;
}
</style>
</head>
<body>
<div class="certificate">
<div class="logo">
@if ($pelatihanPeserta->pelatihan->ttd_jabatan && $pelatihanPeserta->pelatihan->ttd_nama)
<img src="{{ public_path('/images/logo-greennusa.png') }}" alt="" style="height: 40px;">
@else
<div style="height: 40px;width:100%"></div>
@endif
</div>
<div class="header">SERTIFIKAT</div>
<div class="sub-header">SERTIFIKAT INI DIPERSEMBAHKAN KEPADA</div>
<div class="participant-name">{{ $pelatihanPeserta->user->peserta->nama_lengkap }}
<div class="underline">
</div>
</div>
<div class="description">
<i>sebagai PESERTA dalam</i>
<div class="nama-pelatihan"><strong>{{ $pelatihanPeserta->pelatihan->title }}</strong></div>
@php
$bulan = [
'January' => 'Januari',
'February' => 'Februari',
'March' => 'Maret',
'April' => 'April',
'May' => 'Mei',
'June' => 'Juni',
'July' => 'Juli',
'August' => 'Agustus',
'September' => 'September',
'October' => 'Oktober',
'November' => 'November',
'December' => 'Desember',
];
@endphp
<i>yang diselenggarakan oleh Dinas Pemuda dan Olahraga Provinsi Kalimantan Timur dari tanggal
{{ date('d', strtotime($pelatihanPeserta->pelatihan->start_date)) }} <small>s/d</small>
{{ date('d', strtotime($pelatihanPeserta->pelatihan->end_date)) }}
{{ $bulan[date('F', strtotime($pelatihanPeserta->pelatihan->end_date))] }}
{{ date('Y', strtotime($pelatihanPeserta->pelatihan->end_date)) }}.</i>
</div>
<div class="signature">
<h3 style="margin-bottom: 10px;">
{{ $pelatihanPeserta->pelatihan->regency->name }},
{{ date('d', strtotime($pelatihanPeserta->pelatihan->end_date)) }}
{{ $bulan[date('F', strtotime($pelatihanPeserta->pelatihan->end_date))] }}
{{ date('Y', strtotime($pelatihanPeserta->pelatihan->end_date)) }}
</h3>
<div class="signature-verification">
@if ($pelatihanPeserta->pelatihan->ttd_jabatan && $pelatihanPeserta->pelatihan->ttd_nama)
<img class="qr-code"
src="data:image/svg+xml;base64,{{ base64_encode(QrCode::size(80)->generate(route('cek-sertifikat.index', ['nomor' => $noSertifikat]))) }}" />
{{-- <div class="signature-icon">✎</div> --}}
<div class="signature-text">
Ditandatangani secara elektronik<br>
<small>{{ $pelatihanPeserta->pelatihan->ttd_jabatan }}</small>
<div>{{ $pelatihanPeserta->pelatihan->ttd_nama }}</div>
</div>
@endif
</div>
</div>
<div class="footer">
@if ($pelatihanPeserta->pelatihan->ttd_jabatan && $pelatihanPeserta->pelatihan->ttd_nama)
{{ $noSertifikat }}
@endif
</div>
</div>
<div class="page-break"></div>
<div class="certificate">
<div class="container">
<h1>PESERTA TELAH MENGIKUTI PELATIHAN</h1>
<h2>{{$pelatihanPeserta->pelatihan->title}}</h2>
<table>
<thead>
<tr>
<th>NO</th>
<th>KODE UNIT</th>
<th>UNIT KOMPETENSI</th>
<th>NO</th>
<th>KODE UNIT</th>
<th>UNIT KOMPETENSI</th>
</tr>
</thead>
<tbody>
@php
$rowCount = round(count($pelatihanPeserta->pelatihan->pelatihan_materis) / 2);
@endphp
@for ($i = 0; $i < $rowCount; $i++)
@php
$materi1 = @$pelatihanPeserta->pelatihan->pelatihan_materis[$i];
$materi2 = @$pelatihanPeserta->pelatihan->pelatihan_materis[$i + $rowCount];
@endphp
@if ($materi1)
<tr>
<td>{{ $i + 1 }}</td>
<td>{{ $materi1->code }}</td>
<td>{{ $materi1->name }}</td>
@if ($materi2)
<td>{{ $i + $rowCount + 1 }}</td>
<td>{{ $materi2->code }}</td>
<td>{{ $materi2->name }}</td>
@else
<td colspan="3"></td>
@endif
</tr>
@endif
@endfor
</tbody>
<tfoot>
<tr>
<td colspan="2">
DURASI
</td>
<td colspan="4">
{{str_replace(".",",",count($pelatihanPeserta->pelatihan->pelatihan_materis) * 4.5)}} JP
</td>
</tr>
</tfoot>
</table>
{{-- <div class="table-footer">
DURASI: 40 JP
</div> --}}
</div>
<div class="footer">
{{ $noSertifikat }}
</div>
</div>
</body>
</html>
Anons79 File Manager Version 1.0, Coded By Anons79
Email: [email protected]
Anons79 Mini Shell