truncgit/citrus
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

base: truncgit/citrus:082fb33af3f1fd87c01da78d276ba5e9a96a77d9
Branches Tags
truncgit/citrus:truncgilcom truncgit/citrus:feature/proposals-mermaid truncgit/citrus:2026-july truncgit/citrus:main
...
compare: truncgit/citrus:554f22695dfdc69106d0fc53f7290c28d0ce2c3e
Branches Tags
truncgit/citrus:feature/proposals-mermaid truncgit/citrus:2026-july truncgit/citrus:truncgilcom truncgit/citrus:main

3 Commits
082fb33af3 ... 554f22695d

Author SHA1 Message Date
Ümit Tunç 554f22695d refactor: optimize internship transcript layout and typography for A4 print consistency 2026-06-08 18:32:07 +03:00
Ümit Tunç af82f47ea0 feat: increase verification QR code sizes and adjust PDF image scaling logic 2026-06-08 18:27:34 +03:00
Ümit Tunç 612a24042b refactor: redesign internship verification page with updated layout, enhanced PDF download capabilities, and refined certificate styling 2026-06-08 18:22:39 +03:00
1 changed files with 326 additions and 146 deletions
Expand all files Collapse all files
resources/views/front/career/verify.blade.php
+297 -117
View File
@@ -3,163 +3,188 @@
@section('content') @section('content')
<link href="https://fonts.googleapis.com/css2?family=Cinzel:wght@500;700;800&family=Inter:wght@300;400;500;600;700&family=Playfair+Display:ital,wght@0,500;0,700;1,400&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Cinzel:wght@500;700;800&family=Inter:wght@300;400;500;600;700&family=Playfair+Display:ital,wght@0,500;0,700;1,400&display=swap" rel="stylesheet">
<div class="bg-slate-50 py-12 no-print"> <div class="bg-slate-100 py-12 no-print">
<div class="container max-w-4xl mx-auto px-4"> <div class="container max-w-6xl mx-auto px-4">
<!-- Verification Banner (e-Devlet Style) --> <!-- Verification Banner (e-Devlet Style) -->
<div class="bg-emerald-50 border-l-4 border-emerald-500 p-6 rounded-2xl shadow-sm mb-8 flex flex-col md:flex-row items-center justify-between gap-6"> <div class="bg-emerald-50 border-l-4 border-emerald-500 p-6 rounded-2xl shadow-md mb-8 flex flex-col md:flex-row items-center justify-between gap-6">
<div class="flex items-center gap-4"> <div class="flex items-center gap-4">
<div class="w-12 h-12 rounded-full bg-emerald-500 text-white flex items-center justify-center flex-shrink-0 shadow-lg shadow-emerald-500/20"> <div class="w-12 h-12 rounded-full bg-emerald-500 text-white flex items-center justify-center flex-shrink-0 shadow-lg shadow-emerald-500/20">
<i class="uil uil-shield-check text-2xl"></i> <i class="uil uil-shield-check text-2xl"></i>
</div> </div>
<div> <div>
<h3 class="text-lg font-bold text-slate-800">Güvenli Belge Doğrulama</h3> <h3 class="text-lg font-bold text-slate-800">Güvenli Belge Doğrulama</h3>
<p class="text-sm text-slate-500 mt-1">Bu belge, Trunçgil Teknoloji Belge Doğrulama Sistemi ile doğrulanmıştır.</p> <p class="text-sm text-slate-500 mt-1">Bu staj sertifikası ve transkripti, Trunçgil Teknopark sistemi üzerinden dijital olarak imzalanıp onaylanmıştır.</p>
</div> </div>
</div> </div>
<div class="flex items-center gap-3 flex-wrap">
<!-- PDF Download Button -->
<button onclick="downloadPDF()" id="pdf-btn" class="px-6 py-3 bg-orange-600 hover:bg-orange-700 text-white font-bold rounded-xl transition-all shadow-lg shadow-orange-500/25 flex items-center gap-2">
<i class="uil uil-file-download text-lg" id="pdf-icon"></i>
<span class="spinner-border spinner-border-sm hidden animate-spin w-4 h-4 border-2 border-white border-t-transparent rounded-full" id="pdf-spinner" role="status"></span>
<span id="pdf-btn-text">PDF Olarak İndir</span>
</button>
<!-- Print Button -->
<button onclick="window.print()" class="px-6 py-3 bg-slate-900 hover:bg-slate-800 text-white font-bold rounded-xl transition-all shadow-md flex items-center gap-2"> <button onclick="window.print()" class="px-6 py-3 bg-slate-900 hover:bg-slate-800 text-white font-bold rounded-xl transition-all shadow-md flex items-center gap-2">
<i class="uil uil-print text-lg"></i> <i class="uil uil-print text-lg"></i>
<span>Yazdır / PDF Kaydet</span> <span>Yazdır</span>
</button> </button>
</div> </div>
</div> </div>
</div>
</div> </div>
<!-- Printable Area --> <!-- Printable Area -->
<div class="print-container"> <div class="print-container bg-slate-100 py-6 min-h-screen">
<div class="container max-w-4xl mx-auto px-4 pb-20"> <div class="container max-w-6xl mx-auto px-4 pb-20 space-y-12">
<!-- Page 1: Internship Certificate (Staj Bitirme Sertifikası) -->
<div class="certificate-page bg-white rounded-3xl shadow-2xl border-8 border-slate-100 p-8 md:p-16 relative overflow-hidden mb-12 page-break">
<!-- Decorative Corners -->
<div class="absolute top-0 left-0 w-32 h-32 border-t-4 border-l-4 border-red-500/20 rounded-tl-3xl"></div>
<div class="absolute top-0 right-0 w-32 h-32 border-t-4 border-r-4 border-red-500/20 rounded-tr-3xl"></div>
<div class="absolute bottom-0 left-0 w-32 h-32 border-b-4 border-l-4 border-red-500/20 rounded-bl-3xl"></div>
<div class="absolute bottom-0 right-0 w-32 h-32 border-b-4 border-r-4 border-red-500/20 rounded-br-3xl"></div>
<div class="relative z-10 flex flex-col items-center justify-between h-full min-h-[700px] text-center"> <!-- ================= PAGE 1: CERTIFICATE (LANDSCAPE A4) ================= -->
<!-- Logo --> <div id="certificate-node" class="certificate-page bg-white rounded-[2rem] shadow-2xl p-12 relative overflow-hidden page-break mx-auto">
<div class="mb-6">
<img src="https://truncgil.com.tr/assets/img/logo.png" alt="Trunçgil Teknoloji" class="h-16 object-contain" onerror="this.src='/assets/img/logo.png'"> <!-- Geometric Orange Swirl Circles (100% compatible with html2canvas) -->
<div class="absolute -top-32 -right-32 w-[350px] h-[350px] rounded-full bg-gradient-to-br from-orange-400/20 to-amber-500/5 pointer-events-none z-0"></div>
<div class="absolute -top-40 -right-40 w-[450px] h-[450px] rounded-full border-[20px] border-orange-500/10 pointer-events-none z-0"></div>
<div class="absolute -top-48 -right-48 w-[550px] h-[550px] rounded-full border-[10px] border-orange-500/5 pointer-events-none z-0"></div>
<div class="absolute -bottom-32 -left-32 w-[350px] h-[350px] rounded-full bg-gradient-to-tr from-orange-500/20 to-red-500/5 pointer-events-none z-0"></div>
<div class="absolute -bottom-40 -left-40 w-[450px] h-[450px] rounded-full border-[20px] border-orange-500/10 pointer-events-none z-0"></div>
<!-- Thin Minimal Orange/Slate Inner Border -->
<div class="absolute inset-6 border border-slate-200 rounded-[1.5rem] pointer-events-none z-10"></div>
<div class="absolute inset-[28px] border-2 border-orange-500/20 rounded-[1.3rem] pointer-events-none z-10"></div>
<div class="relative z-10 flex flex-col justify-between h-full min-h-[580px] md:min-h-[540px]">
<!-- Logo & Header -->
<div class="flex justify-between items-center w-full">
<img src="{{ asset('logos/truncgil-yatay.svg') }}" alt="Trunçgil Teknoloji" class="h-12 object-contain">
<div class="text-right">
<span class="text-[10px] font-bold text-slate-400 uppercase tracking-widest block">Verifikasyon No</span>
<span class="text-xs font-mono font-bold text-slate-800">{{ $application->certificate_code }}</span>
</div>
</div> </div>
<!-- Certificate Title --> <!-- Main Content -->
<div class="mb-8"> <div class="text-center my-auto px-4">
<h1 class="font-serif text-3xl md:text-5xl font-extrabold tracking-widest text-slate-900 uppercase">Staj Bitirme Sertifikası</h1> <h1 class="font-serif text-3xl md:text-5xl font-bold tracking-[0.2em] text-slate-800 uppercase mb-2">Staj Bitirme Sertifikası</h1>
<div class="w-32 h-1 bg-red-600 rounded-full mx-auto mt-4"></div> <div class="w-24 h-[3px] bg-orange-500 mx-auto mb-8"></div>
</div>
<!-- Recipient Info --> <p class="text-slate-400 text-xs md:text-sm uppercase tracking-wider mb-2">Sayın</p>
<div class="mb-8"> <h2 class="font-serif text-2xl md:text-4xl font-extrabold text-slate-900 tracking-wide mb-6">{{ $application->name }}</h2>
<span class="text-sm font-medium text-slate-500 uppercase tracking-widest block mb-2">Sayın</span>
<h2 class="font-serif text-2xl md:text-4xl font-bold text-slate-900 tracking-wide">{{ $application->name }}</h2>
</div>
<!-- Body Text --> <div class="max-w-3xl mx-auto text-slate-700 leading-relaxed text-sm md:text-base space-y-4">
<div class="max-w-2xl mx-auto mb-10 leading-relaxed text-slate-700 text-sm md:text-lg">
<p> <p>
<strong>{{ \Carbon\Carbon::parse($application->internship_start_date)->format('d.m.Y') }}</strong> - <strong>{{ \Carbon\Carbon::parse($application->internship_start_date)->format('d.m.Y') }}</strong> -
<strong>{{ \Carbon\Carbon::parse($application->internship_end_date)->format('d.m.Y') }}</strong> tarihleri arasında, <strong>{{ \Carbon\Carbon::parse($application->internship_end_date)->format('d.m.Y') }}</strong> tarihleri arasında,
<strong>Trunçgil Teknoloji</strong> bünyesinde gerçekleştirdiği staj programını başarıyla tamamlamıştır. <strong>Trunçgil Teknoloji</strong> bünyesinde gerçekleştirdiği uzaktan staj programını başarıyla tamamlayarak bu belgeyi almaya hak kazanmıştır.
</p> </p>
<p class="mt-4"> <p class="text-xs md:text-sm text-slate-500 max-w-2xl mx-auto italic font-serif">
Staj süresi boyunca gösterdiği üstün gayret, sorumluluk bilinci, teknik beceriler ve ekip çalışmasına sağladığı değerli katkılardan dolayı bu belgeyi almaya hak kazanmıştır. Gösterdiği üstün gayret, sorumluluk bilinci, teknik beceriler ve ekip çalışmasına sağladığı değerli katkılardan dolayı teşekkür eder, profesyonel kariyerinde başarılar dileriz.
</p>
<p class="mt-4 text-sm md:text-base italic font-serif">
Kendisine gelecekteki eğitim ve profesyonel kariyer hayatında başarılar dileriz.
</p> </p>
</div> </div>
</div>
<!-- Footer Section (Signatures & Verification Code) --> <!-- Footer Section (Signatures & Verification QR) -->
<div class="w-full grid grid-cols-1 md:grid-cols-3 items-end gap-8 pt-8 border-t border-slate-100"> <div class="grid grid-cols-3 items-end pt-6 border-t border-slate-100/50">
<!-- Left: Verification Details & QR Code --> <!-- Left: QR Code -->
<div class="flex flex-col items-center md:items-start text-center md:text-start"> <div class="flex items-center gap-4">
<div class="mb-3"> <img src="https://api.qrserver.com/v1/create-qr-code/?size=150x150&data={{ urlencode(route('internship.verify', $application->certificate_code)) }}" alt="QR Code" class="w-28 h-28 border border-slate-200 p-1 rounded-xl bg-white shadow-sm">
<img src="https://api.qrserver.com/v1/create-qr-code/?size=100x100&data={{ urlencode(route('internship.verify', $application->certificate_code)) }}" alt="QR Code" class="w-24 h-24 border border-slate-200 p-1 rounded-lg"> <div class="text-left hidden sm:block">
<span class="text-[8px] font-bold text-slate-400 uppercase tracking-wider block">Dijital Doğrulama</span>
<span class="text-[9px] text-slate-500 block">Karekod okutularak belgenin güncelliği e-Devlet stilinde doğrulanabilir.</span>
</div> </div>
<span class="text-[10px] font-bold text-slate-400 uppercase tracking-wider block">Belge Doğrulama Kodu</span>
<span class="text-xs font-mono font-bold text-slate-800">{{ $application->certificate_code }}</span>
</div> </div>
<!-- Middle: Date --> <!-- Middle: Date -->
<div class="text-center pb-4"> <div class="text-center">
<span class="text-xs text-slate-500 block uppercase tracking-wider">Düzenlenme Tarihi</span> <span class="text-[9px] text-slate-400 block uppercase tracking-wider">Düzenlenme Tarihi</span>
<span class="text-sm font-semibold text-slate-800">{{ \Carbon\Carbon::parse($application->internship_end_date)->format('d.m.Y') }}</span> <span class="text-xs font-bold text-slate-700">{{ \Carbon\Carbon::parse($application->internship_end_date)->format('d.m.Y') }}</span>
</div> </div>
<!-- Right: Authorizing Signature --> <!-- Right: Authorized Signature -->
<div class="text-center md:text-end"> <div class="text-right">
<div class="inline-block pb-4 text-center"> <div class="inline-block text-center pr-2">
<!-- Placeholder signature or company stamp stamp --> <!-- Digital Signature Stamp Concept -->
<div class="h-12 flex items-center justify-center mb-1"> <div class="h-10 flex items-center justify-center mb-1">
<span class="font-serif italic text-red-700 font-bold">Trunçgil Teknoloji</span> <span class="font-serif italic text-orange-600 font-bold text-sm tracking-wider">Trunçgil Teknoloji</span>
</div> </div>
<span class="font-bold text-slate-800 block text-sm">Onaylayan</span> <span class="font-bold text-slate-800 block text-xs">Onay Makamı</span>
<span class="text-xs text-slate-500 block">Staj Koordinatörü & Kurucu</span> <span class="text-[9px] text-slate-400 block">Staj Koordinatörlüğü</span>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<!-- Page 2: Internship Academic Transcript (Staj Akademik Transkripti) --> <!-- ================= PAGE 2: TRANSCRIPT (PORTRAIT A4) ================= -->
<div class="transcript-page bg-white rounded-3xl shadow-2xl border-8 border-slate-100 p-8 md:p-16 relative overflow-hidden"> <div id="transcript-node" class="transcript-page bg-white rounded-[2rem] shadow-2xl p-6 md:p-8 relative overflow-hidden mx-auto">
<!-- Thin border decor for transcript -->
<div class="absolute inset-4 border border-slate-100 rounded-[1.5rem] pointer-events-none"></div>
<div class="relative z-10 flex flex-col justify-between h-full text-slate-700">
<div>
<!-- Header --> <!-- Header -->
<div class="flex flex-col md:flex-row justify-between items-center pb-8 border-b-2 border-slate-100 mb-8 gap-4"> <div class="flex justify-between items-center pb-2 border-b border-slate-100 mb-3">
<div class="text-center md:text-left"> <div>
<h2 class="font-serif text-2xl font-bold text-slate-900 uppercase">Staj Akademik Transkripti</h2> <h2 class="font-serif text-sm font-bold text-slate-900 uppercase">Staj Akademik Transkripti</h2>
<p class="text-xs text-slate-500 tracking-wider uppercase mt-1">Ve Performans Raporu</p> <p class="text-[7px] text-slate-400 tracking-wider uppercase mt-0.5">Ve Performans Değerlendirme Raporu</p>
</div> </div>
<img src="https://truncgil.com.tr/assets/img/logo.png" alt="Trunçgil Logo" class="h-10 object-contain" onerror="this.src='/assets/img/logo.png'"> <img src="{{ asset('logos/truncgil-yatay.svg') }}" alt="Trunçgil Logo" class="h-6 object-contain">
</div> </div>
<!-- Student Info Metadata Block --> <!-- Student Info block -->
<div class="bg-slate-50 rounded-2xl p-6 border border-slate-100 mb-8"> <div class="bg-slate-50 rounded-xl p-2.5 border border-slate-100 mb-3">
<h3 class="text-xs font-bold text-slate-400 uppercase tracking-widest mb-4">Öğrenci / Stajyer Bilgileri</h3> <h3 class="text-[7.5px] font-bold text-slate-400 uppercase tracking-widest mb-1.5">Öğrenci / Stajyer Bilgileri</h3>
<div class="grid grid-cols-1 md:grid-cols-2 gap-y-4 gap-x-8 text-sm"> <div class="grid grid-cols-1 md:grid-cols-2 gap-y-1 gap-x-8 text-[8.5px]">
<div class="flex justify-between border-b border-slate-200/50 pb-2"> <div class="flex justify-between border-b border-slate-200/50 pb-1">
<span class="text-slate-500">Adı Soyadı:</span> <span class="text-slate-500">Adı Soyadı:</span>
<strong class="text-slate-800">{{ $application->name }}</strong> <strong class="text-slate-800">{{ $application->name }}</strong>
</div> </div>
<div class="flex justify-between border-b border-slate-200/50 pb-2"> <div class="flex justify-between border-b border-slate-200/50 pb-1">
<span class="text-slate-500">E-Posta:</span> <span class="text-slate-500">E-Posta Adresi:</span>
<strong class="text-slate-800">{{ $application->email }}</strong> <strong class="text-slate-800">{{ $application->email }}</strong>
</div> </div>
<div class="flex justify-between border-b border-slate-200/50 pb-2"> <div class="flex justify-between border-b border-slate-200/50 pb-1">
<span class="text-slate-500">Staj Dönemi:</span> <span class="text-slate-500">Staj Dönemi:</span>
<strong class="text-slate-800">{{ \Carbon\Carbon::parse($application->internship_start_date)->format('d.m.Y') }} - {{ \Carbon\Carbon::parse($application->internship_end_date)->format('d.m.Y') }}</strong> <strong class="text-slate-800">{{ \Carbon\Carbon::parse($application->internship_start_date)->format('d.m.Y') }} - {{ \Carbon\Carbon::parse($application->internship_end_date)->format('d.m.Y') }}</strong>
</div> </div>
<div class="flex justify-between border-b border-slate-200/50 pb-2"> <div class="flex justify-between border-b border-slate-200/50 pb-1">
<span class="text-slate-500">Toplam Süre:</span> <span class="text-slate-500">Toplam Staj Süresi:</span>
<strong class="text-slate-800">{{ $application->internship_total_days }} İş Günü</strong> <strong class="text-slate-800">{{ $application->internship_total_days }} İş Günü</strong>
</div> </div>
</div> </div>
</div> </div>
<!-- Dynamic Markdown Content --> <!-- Dynamic Markdown Content (Transcript and marks) -->
<div class="prose max-w-none text-slate-700 text-sm leading-relaxed mb-10"> <div class="prose max-w-none text-slate-700 leading-relaxed mb-3">
{!! new \Illuminate\Support\HtmlString(\Illuminate\Support\Str::markdown($application->transcript_markdown ?? '')) !!} {!! new \Illuminate\Support\HtmlString(\Illuminate\Support\Str::markdown($application->transcript_markdown ?? '')) !!}
</div> </div>
</div>
<!-- Validation Info and QR Code at the bottom of Page 2 --> <!-- Footer with verification details -->
<div class="w-full flex flex-col md:flex-row justify-between items-center pt-8 border-t border-slate-100 gap-6"> <div class="w-full flex justify-between items-center pt-2 border-t border-slate-100 gap-4 mt-auto">
<div class="flex items-center gap-4"> <div class="flex items-center gap-3">
<img src="https://api.qrserver.com/v1/create-qr-code/?size=100x100&data={{ urlencode(route('internship.verify', $application->certificate_code)) }}" alt="QR Code" class="w-16 h-16 border border-slate-200 p-1 rounded-lg"> <img src="https://api.qrserver.com/v1/create-qr-code/?size=120x120&data={{ urlencode(route('internship.verify', $application->certificate_code)) }}" alt="QR Code" class="w-14 h-14 border border-slate-200 p-0.5 rounded-lg bg-white">
<div> <div>
<span class="text-[10px] font-bold text-slate-400 uppercase tracking-wider block">Güvenli Doğrulama Kodu</span> <span class="text-[6.5px] font-bold text-slate-400 uppercase tracking-wider block">Güvenli Doğrulama Kodu</span>
<span class="text-sm font-mono font-bold text-slate-800 block">{{ $application->certificate_code }}</span> <span class="text-[9px] font-mono font-bold text-slate-800 block">{{ $application->certificate_code }}</span>
<span class="text-[10px] text-slate-500 block">Bu belge e-Devlet benzeri karekod okutularak sorgulanabilir.</span>
</div> </div>
</div> </div>
<div class="text-center md:text-right text-xs text-slate-400"> <div class="text-right text-[7.5px] text-slate-400">
Trunçgil Teknoloji San. ve Tic. Ltd. Şti.<br> Trunçgil Teknoloji San. ve Tic. Ltd. Şti.<br>
Teknopark No: 4A Gaziantep Gaziantep Üniversitesi Teknopark No: 4A
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div>
</div> </div>
@push('styles') @push('styles')
<script src="https://cdn.tailwindcss.com"></script> <script src="https://cdn.tailwindcss.com"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
<style> <style>
body { body {
font-family: 'Inter', sans-serif; font-family: 'Inter', sans-serif;
@@ -168,93 +193,248 @@
font-family: 'Cinzel', 'Playfair Display', Georgia, serif; font-family: 'Cinzel', 'Playfair Display', Georgia, serif;
} }
/* Elegant Markdown Table Styling inside prose */ /* Screen display aspect styling */
.certificate-page {
width: 100%;
max-width: 297mm;
min-height: 210mm;
box-sizing: border-box;
/* Radial background for swirl effect */
background:
radial-gradient(circle at 100% 0%, rgba(249, 115, 22, 0.08) 0%, rgba(255, 255, 255, 0) 50%),
radial-gradient(circle at 0% 100%, rgba(249, 115, 22, 0.08) 0%, rgba(255, 255, 255, 0) 50%),
#ffffff;
}
.transcript-page {
width: 100%;
max-width: 210mm;
height: 297mm;
box-sizing: border-box;
}
/* Elegant Markdown Table Styling inside prose (Reduced font sizes & paddings) */
.prose table { .prose table {
width: 100%; width: 100%;
margin-top: 1.5em; margin-top: 0.35rem !important;
margin-bottom: 1.5em; margin-bottom: 0.35rem !important;
border-collapse: collapse; border-collapse: collapse;
text-align: left; text-align: left;
} }
.prose th { .prose th {
font-weight: 700; font-weight: 700;
padding: 0.75rem 1rem; padding: 0.2rem 0.35rem !important;
background-color: #f8fafc; background-color: #f8fafc;
border-bottom: 2px solid #e2e8f0; border-bottom: 2px solid #e2e8f0;
color: #1e293b; color: #1e293b;
font-size: 0.85rem; font-size: 0.45rem !important;
text-transform: uppercase; text-transform: uppercase;
letter-spacing: 0.05em; letter-spacing: 0.05em;
} }
.prose td { .prose td {
padding: 0.75rem 1rem; padding: 0.2rem 0.35rem !important;
border-bottom: 1px solid #e2e8f0; border-bottom: 1px solid #e2e8f0;
color: #334155; color: #334155;
font-size: 0.9rem; font-size: 0.45rem !important;
line-height: 1.2 !important;
} }
.prose tr:hover { .prose tr:hover {
background-color: #f8fafc/50; background-color: #f8fafc;
} }
.prose h3 { .prose h3 {
font-family: 'Cinzel', serif; font-family: 'Cinzel', serif;
color: #0f172a; color: #0f172a;
margin-top: 2rem; margin-top: 0.5rem !important;
margin-bottom: 1rem; margin-bottom: 0.25rem !important;
border-bottom: 1px solid #e2e8f0; border-bottom: 1px solid #e2e8f0;
padding-bottom: 0.5rem; padding-bottom: 0.15rem;
font-weight: 700; font-weight: 700;
font-size: 0.6rem !important;
} }
.prose h4 { .prose h4 {
color: #1e293b; color: #1e293b;
margin-top: 1.5rem; margin-top: 0.4rem !important;
margin-bottom: 0.75rem; margin-bottom: 0.2rem !important;
font-weight: 600; font-weight: 600;
font-size: 0.52rem !important;
}
.prose p {
font-size: 0.45rem !important;
line-height: 1.3 !important;
margin-top: 0.15rem !important;
margin-bottom: 0.2rem !important;
}
.prose ul {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0.1rem 0.75rem;
padding-left: 0 !important;
margin-top: 0.25rem !important;
margin-bottom: 0.25rem !important;
list-style-type: none !important;
}
.prose ul li {
font-size: 0.45rem !important;
line-height: 1.3 !important;
margin: 0 !important;
position: relative;
padding-left: 0.5rem !important;
}
.prose ul li::before {
content: "•";
color: #f97316;
position: absolute;
left: 0;
top: 0;
font-weight: bold;
} }
.prose blockquote { .prose blockquote {
border-left: 4px solid #ef4444; border-left: 2px solid #f97316;
padding-left: 1rem; padding-left: 0.4rem !important;
font-style: italic; font-style: italic;
color: #475569; color: #475569;
margin: 1.5rem 0; margin: 0.4rem 0 !important;
font-size: 0.45rem !important;
} }
/* Print media config for mixed Landscape & Portrait */
@media print { @media print {
header, footer, nav, .site-header, .site-footer, .no-print { @page {
display: none !important; margin: 0;
} }
@page landscape-page {
size: A4 landscape;
}
@page portrait-page {
size: A4 portrait;
}
body, html { body, html {
background-color: #ffffff !important; background-color: #ffffff !important;
margin: 0 !important; margin: 0 !important;
padding: 0 !important; padding: 0 !important;
} }
.container {
max-width: 100% !important; .no-print, header, footer, nav, .site-header, .site-footer {
width: 100% !important; display: none !important;
padding: 0 !important;
margin: 0 !important;
} }
.print-container { .print-container {
position: absolute; position: absolute;
left: 0; left: 0;
top: 0; top: 0;
width: 100%; width: 100% !important;
padding: 0 !important;
margin: 0 !important;
background-color: transparent !important;
} }
.page-break {
page-break-after: always !important; .certificate-page {
break-after: page !important; page: landscape-page;
} width: 297mm !important;
.certificate-page, .transcript-page { height: 210mm !important;
min-height: 210mm !important;
margin: 0 !important;
padding: 15mm !important;
box-shadow: none !important; box-shadow: none !important;
border: none !important; border: none !important;
padding: 15mm !important;
margin: 0 !important;
height: 297mm !important; /* Perfect A4 height */
box-sizing: border-box !important; box-sizing: border-box !important;
page-break-after: always !important;
break-after: page !important;
background:
radial-gradient(circle at 100% 0%, rgba(249, 115, 22, 0.08) 0%, rgba(255, 255, 255, 0) 50%),
radial-gradient(circle at 0% 100%, rgba(249, 115, 22, 0.08) 0%, rgba(255, 255, 255, 0) 50%),
#ffffff !important;
-webkit-print-color-adjust: exact;
print-color-adjust: exact;
} }
.certificate-page {
border: 4px double #cbd5e1 !important; /* nice thin double border on print */ .transcript-page {
page: portrait-page;
width: 210mm !important;
height: 297mm !important;
min-height: 297mm !important;
margin: 0 !important;
padding: 10mm !important;
box-shadow: none !important;
border: none !important;
box-sizing: border-box !important;
overflow: hidden !important;
} }
} }
</style> </style>
@endpush @endpush
@push('scripts')
<script>
async function downloadPDF() {
const btn = document.getElementById('pdf-btn');
const icon = document.getElementById('pdf-icon');
const spinner = document.getElementById('pdf-spinner');
const btnText = document.getElementById('pdf-btn-text');
// Show spinner
btn.disabled = true;
icon.classList.add('hidden');
spinner.classList.remove('hidden');
btnText.textContent = "PDF Hazırlanıyor...";
try {
const { jsPDF } = window.jspdf;
const certEl = document.getElementById('certificate-node');
const transEl = document.getElementById('transcript-node');
// Render Page 1 (Landscape)
const certCanvas = await html2canvas(certEl, {
scale: 2,
useCORS: true,
backgroundColor: '#ffffff',
logging: false
});
const certImgData = certCanvas.toDataURL('image/jpeg', 1.0);
// Initialize landscape A4 document
const pdf = new jsPDF({
orientation: 'landscape',
unit: 'mm',
format: 'a4'
});
pdf.addImage(certImgData, 'JPEG', 0, 0, 297, 210);
// Render Page 2 (Portrait)
const transCanvas = await html2canvas(transEl, {
scale: 2,
useCORS: true,
backgroundColor: '#ffffff',
logging: false
});
const transImgData = transCanvas.toDataURL('image/jpeg', 1.0);
// Calculate exact height using aspect ratio to prevent vertical squishing
const transWidth = 210;
const transHeight = (transCanvas.height * transWidth) / transCanvas.width;
// Add portrait page to PDF
pdf.addPage('a4', 'portrait');
// Avoid vertical squishing by printing at its natural aspect ratio
pdf.addImage(transImgData, 'JPEG', 0, 0, transWidth, transHeight);
// Trigger Save File
pdf.save('{{ str()->slug($application->name) }}-staj-belgesi.pdf');
} catch (error) {
console.error("PDF generation failed", error);
alert("PDF oluşturulurken bir hata meydana geldi.");
} finally {
// Restore button
btn.disabled = false;
icon.classList.remove('hidden');
spinner.classList.add('hidden');
btnText.textContent = "PDF Olarak İndir";
}
}
</script>
@endpush
@endsection @endsection