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

feat: redesign certificate verification page with new futuristic background asset

Browse Source
This commit is contained in:
Ümit Tunç
2026-06-08 18:46:15 +03:00
parent 3600cc2334
commit 4eb0a96832
2 changed files with 193 additions and 128 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/assets/img/cert_bg_futuristic.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 549 KiB

resources/views/front/career/verify.blade.php
+93 -28
View File
@@ -38,19 +38,12 @@
<div class="container max-w-6xl mx-auto px-4 pb-20 space-y-12">
<!-- ================= PAGE 1: CERTIFICATE (LANDSCAPE A4) ================= -->
<div class="certificate-container-wrapper overflow-hidden w-full flex justify-center items-start">
<div id="certificate-node" class="certificate-page bg-white rounded-[2rem] shadow-2xl p-12 relative overflow-hidden page-break mx-auto">
<!-- 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="absolute inset-6 border border-slate-200/50 rounded-[1.5rem] pointer-events-none z-10"></div>
<div class="absolute inset-[28px] border-2 border-orange-500/15 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]">
@@ -65,7 +58,7 @@
<!-- Main Content -->
<div class="text-center my-auto px-4">
<h1 class="font-serif text-3xl md:text-5xl font-bold tracking-[0.2em] text-slate-800 uppercase mb-2">Staj Bitirme Sertifikası</h1>
<h1 class="font-serif text-3xl md:text-5xl font-extrabold tracking-[0.2em] text-slate-900 uppercase mb-2">Staj Bitirme Sertifikası</h1>
<div class="w-24 h-[3px] bg-orange-500 mx-auto mb-8"></div>
<p class="text-slate-400 text-xs md:text-sm uppercase tracking-wider mb-2">Sayın</p>
@@ -105,7 +98,7 @@
<div class="inline-block text-center pr-2">
<!-- Digital Signature Stamp Concept -->
<div class="h-10 flex items-center justify-center mb-1">
<span class="font-serif italic text-orange-600 font-bold text-sm tracking-wider">Trunçgil Teknoloji</span>
<span class="font-sans text-slate-800 font-bold text-sm tracking-wider">Trunçgil Teknoloji</span>
</div>
<span class="font-bold text-slate-800 block text-xs">Onay Makamı</span>
<span class="text-[9px] text-slate-400 block">Staj Koordinatörlüğü</span>
@@ -114,8 +107,10 @@
</div>
</div>
</div>
</div>
<!-- ================= PAGE 2: TRANSCRIPT (PORTRAIT A4) ================= -->
<div class="transcript-container-wrapper overflow-hidden w-full flex justify-center items-start">
<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 -->
@@ -177,6 +172,7 @@
</div>
</div>
</div>
</div>
</div>
</div>
@@ -223,20 +219,18 @@
/* Screen display aspect styling */
.certificate-page {
width: 100%;
max-width: 297mm;
min-height: 210mm;
width: 1122px;
min-height: 794px;
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;
background-image: url('{{ asset("assets/img/cert_bg_futuristic.png") }}');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
background-color: #ffffff;
}
.transcript-page {
width: 100%;
max-width: 210mm;
height: 297mm;
width: 794px;
height: 1122px;
box-sizing: border-box;
}
@@ -358,8 +352,14 @@
background-color: transparent !important;
}
.certificate-container-wrapper, .transcript-container-wrapper {
height: auto !important;
overflow: visible !important;
}
.certificate-page {
page: landscape-page;
transform: none !important;
width: 297mm !important;
height: 210mm !important;
min-height: 210mm !important;
@@ -370,16 +370,18 @@
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;
background-image: url('{{ asset("assets/img/cert_bg_futuristic.png") }}') !important;
background-size: cover !important;
background-position: center !important;
background-repeat: no-repeat !important;
background-color: #ffffff !important;
-webkit-print-color-adjust: exact;
print-color-adjust: exact;
}
.transcript-page {
page: portrait-page;
transform: none !important;
width: 210mm !important;
height: 297mm !important;
min-height: 297mm !important;
@@ -396,6 +398,47 @@
@push('scripts')
<script>
function scaleDocument(wrapperSelector, nodeSelector, baseWidth, baseHeight) {
const wrapper = document.querySelector(wrapperSelector);
const node = document.querySelector(nodeSelector);
if (!wrapper || !node) return;
const containerWidth = wrapper.offsetWidth;
if (containerWidth < baseWidth) {
const scale = containerWidth / baseWidth;
node.style.transform = `scale(${scale})`;
node.style.transformOrigin = 'top center';
node.style.width = `${baseWidth}px`;
node.style.minWidth = `${baseWidth}px`;
node.style.height = `${baseHeight}px`;
node.style.minHeight = `${baseHeight}px`;
wrapper.style.height = `${baseHeight * scale}px`;
} else {
node.style.transform = '';
node.style.transformOrigin = '';
node.style.width = '';
node.style.minWidth = '';
node.style.height = '';
node.style.minHeight = '';
wrapper.style.height = '';
}
}
function scaleAllDocuments() {
scaleDocument('.certificate-container-wrapper', '#certificate-node', 1122, 794);
scaleDocument('.transcript-container-wrapper', '#transcript-node', 794, 1122);
}
window.addEventListener('resize', scaleAllDocuments);
window.addEventListener('DOMContentLoaded', scaleAllDocuments);
window.addEventListener('load', scaleAllDocuments);
// Immediate and delayed triggers to ensure correct measurement after image & stylesheet loading
scaleAllDocuments();
setTimeout(scaleAllDocuments, 100);
setTimeout(scaleAllDocuments, 500);
setTimeout(scaleAllDocuments, 1500);
async function downloadPDF() {
const btn = document.getElementById('pdf-btn');
const icon = document.getElementById('pdf-icon');
@@ -414,6 +457,21 @@
const certEl = document.getElementById('certificate-node');
const transEl = document.getElementById('transcript-node');
// Force elements to normal scale prior to capturing for PDF
const origCertTransform = certEl.style.transform;
const origCertWidth = certEl.style.width;
const origCertHeight = certEl.style.height;
const origTransTransform = transEl.style.transform;
const origTransWidth = transEl.style.width;
const origTransHeight = transEl.style.height;
certEl.style.transform = 'none';
certEl.style.width = '1122px';
certEl.style.height = '794px';
transEl.style.transform = 'none';
transEl.style.width = '794px';
transEl.style.height = '1122px';
// Render Page 1 (Landscape)
const certCanvas = await html2canvas(certEl, {
scale: 2,
@@ -446,9 +504,16 @@
// 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);
// Restore styles
certEl.style.transform = origCertTransform;
certEl.style.width = origCertWidth;
certEl.style.height = origCertHeight;
transEl.style.transform = origTransTransform;
transEl.style.width = origTransWidth;
transEl.style.height = origTransHeight;
// Trigger Save File
pdf.save('{{ str()->slug($application->name) }}-staj-belgesi.pdf');