refactor: migrate career applications to separate job and intern Filament resources
This commit is contained in:
Ümit Tunç
@@ -0,0 +1,260 @@
|
||||
@extends('layouts.site')
|
||||
|
||||
@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">
|
||||
|
||||
<div class="bg-slate-50 py-12 no-print">
|
||||
<div class="container max-w-4xl mx-auto px-4">
|
||||
<!-- 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="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">
|
||||
<i class="uil uil-shield-check text-2xl"></i>
|
||||
</div>
|
||||
<div>
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
<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>
|
||||
<span>Yazdır / PDF Kaydet</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Printable Area -->
|
||||
<div class="print-container">
|
||||
<div class="container max-w-4xl mx-auto px-4 pb-20">
|
||||
<!-- 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">
|
||||
<!-- Logo -->
|
||||
<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'">
|
||||
</div>
|
||||
|
||||
<!-- Certificate Title -->
|
||||
<div class="mb-8">
|
||||
<h1 class="font-serif text-3xl md:text-5xl font-extrabold tracking-widest text-slate-900 uppercase">Staj Bitirme Sertifikası</h1>
|
||||
<div class="w-32 h-1 bg-red-600 rounded-full mx-auto mt-4"></div>
|
||||
</div>
|
||||
|
||||
<!-- Recipient Info -->
|
||||
<div class="mb-8">
|
||||
<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-2xl mx-auto mb-10 leading-relaxed text-slate-700 text-sm md:text-lg">
|
||||
<p>
|
||||
<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>Trunçgil Teknoloji</strong> bünyesinde gerçekleştirdiği staj programını başarıyla tamamlamıştır.
|
||||
</p>
|
||||
<p class="mt-4">
|
||||
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.
|
||||
</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>
|
||||
</div>
|
||||
|
||||
<!-- Footer Section (Signatures & Verification Code) -->
|
||||
<div class="w-full grid grid-cols-1 md:grid-cols-3 items-end gap-8 pt-8 border-t border-slate-100">
|
||||
<!-- Left: Verification Details & QR Code -->
|
||||
<div class="flex flex-col items-center md:items-start text-center md:text-start">
|
||||
<div class="mb-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-24 h-24 border border-slate-200 p-1 rounded-lg">
|
||||
</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>
|
||||
|
||||
<!-- Middle: Date -->
|
||||
<div class="text-center pb-4">
|
||||
<span class="text-xs text-slate-500 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>
|
||||
</div>
|
||||
|
||||
<!-- Right: Authorizing Signature -->
|
||||
<div class="text-center md:text-end">
|
||||
<div class="inline-block pb-4 text-center">
|
||||
<!-- Placeholder signature or company stamp stamp -->
|
||||
<div class="h-12 flex items-center justify-center mb-1">
|
||||
<span class="font-serif italic text-red-700 font-bold">Trunçgil Teknoloji</span>
|
||||
</div>
|
||||
<span class="font-bold text-slate-800 block text-sm">Onaylayan</span>
|
||||
<span class="text-xs text-slate-500 block">Staj Koordinatörü & Kurucu</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Page 2: Internship Academic Transcript (Staj Akademik Transkripti) -->
|
||||
<div class="transcript-page bg-white rounded-3xl shadow-2xl border-8 border-slate-100 p-8 md:p-16 relative overflow-hidden">
|
||||
<!-- 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="text-center md:text-left">
|
||||
<h2 class="font-serif text-2xl 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>
|
||||
</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'">
|
||||
</div>
|
||||
|
||||
<!-- Student Info Metadata Block -->
|
||||
<div class="bg-slate-50 rounded-2xl p-6 border border-slate-100 mb-8">
|
||||
<h3 class="text-xs font-bold text-slate-400 uppercase tracking-widest mb-4">Öğrenci / Stajyer Bilgileri</h3>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-y-4 gap-x-8 text-sm">
|
||||
<div class="flex justify-between border-b border-slate-200/50 pb-2">
|
||||
<span class="text-slate-500">Adı Soyadı:</span>
|
||||
<strong class="text-slate-800">{{ $application->name }}</strong>
|
||||
</div>
|
||||
<div class="flex justify-between border-b border-slate-200/50 pb-2">
|
||||
<span class="text-slate-500">E-Posta:</span>
|
||||
<strong class="text-slate-800">{{ $application->email }}</strong>
|
||||
</div>
|
||||
<div class="flex justify-between border-b border-slate-200/50 pb-2">
|
||||
<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>
|
||||
</div>
|
||||
<div class="flex justify-between border-b border-slate-200/50 pb-2">
|
||||
<span class="text-slate-500">Toplam Süre:</span>
|
||||
<strong class="text-slate-800">{{ $application->internship_total_days }} İş Günü</strong>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Dynamic Markdown Content -->
|
||||
<div class="prose max-w-none text-slate-700 text-sm leading-relaxed mb-10">
|
||||
{!! new \Illuminate\Support\HtmlString(\Illuminate\Support\Str::markdown($application->transcript_markdown ?? '')) !!}
|
||||
</div>
|
||||
|
||||
<!-- Validation Info and QR Code at the bottom of Page 2 -->
|
||||
<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="flex items-center gap-4">
|
||||
<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">
|
||||
<div>
|
||||
<span class="text-[10px] 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-[10px] text-slate-500 block">Bu belge e-Devlet benzeri karekod okutularak sorgulanabilir.</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-center md:text-right text-xs text-slate-400">
|
||||
Trunçgil Teknoloji San. ve Tic. Ltd. Şti.<br>
|
||||
Teknopark No: 4A Gaziantep
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@push('styles')
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<style>
|
||||
body {
|
||||
font-family: 'Inter', sans-serif;
|
||||
}
|
||||
.font-serif {
|
||||
font-family: 'Cinzel', 'Playfair Display', Georgia, serif;
|
||||
}
|
||||
|
||||
/* Elegant Markdown Table Styling inside prose */
|
||||
.prose table {
|
||||
width: 100%;
|
||||
margin-top: 1.5em;
|
||||
margin-bottom: 1.5em;
|
||||
border-collapse: collapse;
|
||||
text-align: left;
|
||||
}
|
||||
.prose th {
|
||||
font-weight: 700;
|
||||
padding: 0.75rem 1rem;
|
||||
background-color: #f8fafc;
|
||||
border-bottom: 2px solid #e2e8f0;
|
||||
color: #1e293b;
|
||||
font-size: 0.85rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
.prose td {
|
||||
padding: 0.75rem 1rem;
|
||||
border-bottom: 1px solid #e2e8f0;
|
||||
color: #334155;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
.prose tr:hover {
|
||||
background-color: #f8fafc/50;
|
||||
}
|
||||
.prose h3 {
|
||||
font-family: 'Cinzel', serif;
|
||||
color: #0f172a;
|
||||
margin-top: 2rem;
|
||||
margin-bottom: 1rem;
|
||||
border-bottom: 1px solid #e2e8f0;
|
||||
padding-bottom: 0.5rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
.prose h4 {
|
||||
color: #1e293b;
|
||||
margin-top: 1.5rem;
|
||||
margin-bottom: 0.75rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
.prose blockquote {
|
||||
border-left: 4px solid #ef4444;
|
||||
padding-left: 1rem;
|
||||
font-style: italic;
|
||||
color: #475569;
|
||||
margin: 1.5rem 0;
|
||||
}
|
||||
|
||||
@media print {
|
||||
header, footer, nav, .site-header, .site-footer, .no-print {
|
||||
display: none !important;
|
||||
}
|
||||
body, html {
|
||||
background-color: #ffffff !important;
|
||||
margin: 0 !important;
|
||||
padding: 0 !important;
|
||||
}
|
||||
.container {
|
||||
max-width: 100% !important;
|
||||
width: 100% !important;
|
||||
padding: 0 !important;
|
||||
margin: 0 !important;
|
||||
}
|
||||
.print-container {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
}
|
||||
.page-break {
|
||||
page-break-after: always !important;
|
||||
break-after: page !important;
|
||||
}
|
||||
.certificate-page, .transcript-page {
|
||||
box-shadow: none !important;
|
||||
border: none !important;
|
||||
padding: 15mm !important;
|
||||
margin: 0 !important;
|
||||
height: 297mm !important; /* Perfect A4 height */
|
||||
box-sizing: border-box !important;
|
||||
}
|
||||
.certificate-page {
|
||||
border: 4px double #cbd5e1 !important; /* nice thin double border on print */
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@endpush
|
||||
@endsection
|
||||
Reference in New Issue
Block a user