kushal.saha
1541c8193e
- Add resume file upload to schedule drawer with instant preview and validation - Create resume lightbox modal viewer with background scroll lock and CV SVG icon - Integrate CV tab into inspector panel with enlarge action and state - Attach candidate resume to panelist notification emails when - Fix Outlook RFC 5546 iTIP element mismatch and add table credentials copy button
66 lines
3.5 KiB
PHP
66 lines
3.5 KiB
PHP
<div
|
|
id="resume-lightbox-modal"
|
|
class="admin-modal fixed inset-0 w-screen h-screen bg-slate-950/85 backdrop-blur-md flex items-center justify-center z-[1050] opacity-0 pointer-events-none transition-opacity duration-300 [&.active]:opacity-100 [&.active]:pointer-events-auto p-4 sm:p-6"
|
|
>
|
|
<!-- Background Backdrop -->
|
|
<div class="fixed inset-0" onclick="closeResumeLightbox(event)"></div>
|
|
|
|
<!-- Modal Content Card -->
|
|
<div class="admin-modal-content relative z-10 bg-slate-900 border border-slate-700/70 rounded-2xl w-full max-w-5xl h-[92vh] max-h-[92vh] p-4 sm:p-5 shadow-2xl text-white flex flex-col overflow-hidden">
|
|
<!-- Lightbox Header -->
|
|
<div class="flex items-center justify-between pb-3 mb-3 border-b border-slate-700/60 shrink-0">
|
|
<div class="flex items-center gap-2.5 min-w-0">
|
|
<div class="w-8 h-8 rounded-lg bg-indigo-500/20 border border-indigo-500/30 flex items-center justify-center text-indigo-400 shrink-0">
|
|
<x-icons.cv class="w-4 h-4 text-indigo-400" />
|
|
</div>
|
|
<div class="min-w-0">
|
|
<h3 id="resume-lightbox-title" class="font-outfit text-base font-bold text-white m-0 truncate">Candidate Resume (CV)</h3>
|
|
<div class="text-[11px] text-slate-400">PDF & Document Lightbox Previewer</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex items-center gap-2 shrink-0">
|
|
<!-- Open in New Tab / Download -->
|
|
<a
|
|
id="resume-lightbox-newtab"
|
|
href="#"
|
|
target="_blank"
|
|
download
|
|
title="Open in new tab / Download"
|
|
class="inline-flex items-center gap-1.5 px-2.5 py-1.5 rounded-lg bg-white/5 border border-slate-700/60 text-slate-300 hover:text-white hover:bg-white/10 text-xs font-medium transition-colors"
|
|
>
|
|
<i class="fa-solid fa-arrow-up-right-from-square text-[11px]"></i>
|
|
<span class="hidden sm:inline">Open in Tab</span>
|
|
</a>
|
|
|
|
<!-- Close Lightbox Button -->
|
|
<button
|
|
type="button"
|
|
onclick="closeResumeLightbox(event)"
|
|
title="Close preview"
|
|
class="w-8 h-8 rounded-lg bg-slate-800 border border-slate-700/60 text-slate-400 hover:text-white hover:bg-slate-700 transition-colors flex items-center justify-center cursor-pointer text-sm"
|
|
>
|
|
<i class="fa-solid fa-xmark"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Lightbox Preview Body -->
|
|
<div class="relative flex-1 w-full h-full bg-slate-950/80 rounded-xl overflow-hidden flex items-center justify-center border border-slate-800">
|
|
<!-- Spinner / Loader -->
|
|
<div id="resume-lightbox-loader" class="absolute inset-0 flex flex-col items-center justify-center gap-3 bg-slate-950/90 z-10 transition-opacity">
|
|
<i class="fa-solid fa-circle-notch fa-spin text-indigo-400 text-3xl"></i>
|
|
<span class="text-xs text-slate-400 font-medium">Loading resume preview…</span>
|
|
</div>
|
|
|
|
<!-- Embedded Document Frame -->
|
|
<iframe
|
|
id="resume-lightbox-frame"
|
|
src="about:blank"
|
|
class="w-full h-full border-0 rounded-xl opacity-0 transition-opacity duration-300"
|
|
title="Resume Preview"
|
|
></iframe>
|
|
</div>
|
|
</div>
|
|
</div>
|