444 lines
16 KiB
PHP
444 lines
16 KiB
PHP
{{--
|
|
Template Preview - Professional Bootstrap Design
|
|
Full Screen Template Preview with Sample Data
|
|
|
|
@author David Valera Melendez <david@valera-melendez.de>
|
|
@created 2025-08-09
|
|
@location Made in Germany 🇩🇪
|
|
--}}
|
|
|
|
@extends('layouts.app')
|
|
|
|
@section('title', 'Preview: ' . $templateData['name'] . ' Template - Professional Resume Builder')
|
|
@section('page_class', 'template-preview-page')
|
|
|
|
@section('content')
|
|
<div class="template-preview-container">
|
|
<!-- Preview Header -->
|
|
<section class="preview-header">
|
|
<div class="d-flex justify-content-between align-items-center">
|
|
<div class="preview-info">
|
|
<h1 class="preview-title">{{ $templateData['name'] }} Template Preview</h1>
|
|
<p class="preview-subtitle">Sample resume with placeholder content</p>
|
|
</div>
|
|
<div class="preview-actions">
|
|
<a href="{{ route('templates.show', $templateData['id']) }}" class="btn btn-outline-secondary">
|
|
<i class="bi bi-arrow-left"></i>
|
|
Back to Template
|
|
</a>
|
|
<a href="{{ route('resume-builder.create', ['template' => $templateData['id']]) }}" class="btn primary-cta">
|
|
<i class="bi bi-plus-circle"></i>
|
|
Use This Template
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Template Preview Content -->
|
|
<section class="preview-content">
|
|
<div class="resume-preview-wrapper">
|
|
<div class="resume-page">
|
|
<!-- Sample Resume Content -->
|
|
<div class="resume-container">
|
|
<!-- Header Section -->
|
|
<header class="resume-header">
|
|
<div class="header-content">
|
|
<h1 class="resume-name">{{ $sampleData['name'] }}</h1>
|
|
<h2 class="resume-title">{{ $sampleData['title'] }}</h2>
|
|
<div class="contact-info">
|
|
<div class="contact-item">
|
|
<i class="bi bi-envelope"></i>
|
|
<span>{{ $sampleData['email'] }}</span>
|
|
</div>
|
|
<div class="contact-item">
|
|
<i class="bi bi-telephone"></i>
|
|
<span>{{ $sampleData['phone'] }}</span>
|
|
</div>
|
|
<div class="contact-item">
|
|
<i class="bi bi-geo-alt"></i>
|
|
<span>Berlin, Germany</span>
|
|
</div>
|
|
<div class="contact-item">
|
|
<i class="bi bi-linkedin"></i>
|
|
<span>linkedin.com/in/johndoe</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- Professional Summary -->
|
|
<section class="resume-section">
|
|
<h3 class="section-title">Professional Summary</h3>
|
|
<div class="section-content">
|
|
<p>{{ $sampleData['summary'] }} Proven track record of delivering high-quality solutions and leading cross-functional teams to achieve business objectives.</p>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Experience -->
|
|
<section class="resume-section">
|
|
<h3 class="section-title">Professional Experience</h3>
|
|
<div class="section-content">
|
|
<div class="experience-item">
|
|
<div class="experience-header">
|
|
<h4 class="position-title">Senior Software Developer</h4>
|
|
<span class="company-name">Tech Solutions GmbH</span>
|
|
<span class="employment-period">Jan 2020 - Present</span>
|
|
</div>
|
|
<ul class="experience-duties">
|
|
<li>Led development of web applications using modern frameworks</li>
|
|
<li>Collaborated with cross-functional teams to deliver projects on time</li>
|
|
<li>Mentored junior developers and conducted code reviews</li>
|
|
<li>Improved system performance by 40% through optimization</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="experience-item">
|
|
<div class="experience-header">
|
|
<h4 class="position-title">Software Developer</h4>
|
|
<span class="company-name">Digital Innovations Ltd</span>
|
|
<span class="employment-period">Mar 2018 - Dec 2019</span>
|
|
</div>
|
|
<ul class="experience-duties">
|
|
<li>Developed and maintained web applications using PHP and Laravel</li>
|
|
<li>Implemented responsive designs and improved user experience</li>
|
|
<li>Participated in agile development processes and sprint planning</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Education -->
|
|
<section class="resume-section">
|
|
<h3 class="section-title">Education</h3>
|
|
<div class="section-content">
|
|
<div class="education-item">
|
|
<h4 class="degree-title">Bachelor of Science in Computer Science</h4>
|
|
<span class="institution">Technical University of Berlin</span>
|
|
<span class="graduation-year">2018</span>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Skills -->
|
|
<section class="resume-section">
|
|
<h3 class="section-title">Technical Skills</h3>
|
|
<div class="section-content">
|
|
<div class="skills-grid">
|
|
<div class="skill-category">
|
|
<h5 class="skill-category-title">Programming Languages</h5>
|
|
<div class="skill-tags">
|
|
<span class="skill-tag">PHP</span>
|
|
<span class="skill-tag">JavaScript</span>
|
|
<span class="skill-tag">Python</span>
|
|
<span class="skill-tag">TypeScript</span>
|
|
</div>
|
|
</div>
|
|
<div class="skill-category">
|
|
<h5 class="skill-category-title">Frameworks & Libraries</h5>
|
|
<div class="skill-tags">
|
|
<span class="skill-tag">Laravel</span>
|
|
<span class="skill-tag">Vue.js</span>
|
|
<span class="skill-tag">React</span>
|
|
<span class="skill-tag">Bootstrap</span>
|
|
</div>
|
|
</div>
|
|
<div class="skill-category">
|
|
<h5 class="skill-category-title">Tools & Technologies</h5>
|
|
<div class="skill-tags">
|
|
<span class="skill-tag">Git</span>
|
|
<span class="skill-tag">Docker</span>
|
|
<span class="skill-tag">MySQL</span>
|
|
<span class="skill-tag">Redis</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Languages -->
|
|
<section class="resume-section">
|
|
<h3 class="section-title">Languages</h3>
|
|
<div class="section-content">
|
|
<div class="language-list">
|
|
<div class="language-item">
|
|
<span class="language-name">English</span>
|
|
<span class="language-level">Native</span>
|
|
</div>
|
|
<div class="language-item">
|
|
<span class="language-name">German</span>
|
|
<span class="language-level">Fluent</span>
|
|
</div>
|
|
<div class="language-item">
|
|
<span class="language-name">Spanish</span>
|
|
<span class="language-level">Intermediate</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Preview Controls -->
|
|
<section class="preview-controls">
|
|
<div class="card controls-card">
|
|
<div class="card-body">
|
|
<div class="row align-items-center">
|
|
<div class="col-md-6">
|
|
<div class="control-info">
|
|
<h6 class="mb-1">Template: {{ $templateData['name'] }}</h6>
|
|
<p class="text-muted mb-0">This is a sample preview with placeholder content</p>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="control-actions text-md-end">
|
|
<button class="btn btn-outline-secondary" onclick="window.print()">
|
|
<i class="bi bi-printer"></i>
|
|
Print Preview
|
|
</button>
|
|
<a href="{{ route('resume-builder.create', ['template' => $templateData['id']]) }}" class="btn primary-cta">
|
|
<i class="bi bi-pencil-square"></i>
|
|
Edit This Template
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
|
|
@push('styles')
|
|
<style>
|
|
/* Resume Preview Specific Styles */
|
|
.resume-preview-wrapper {
|
|
max-width: 800px;
|
|
margin: 0 auto;
|
|
box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.resume-page {
|
|
background: white;
|
|
min-height: 1056px; /* A4 height */
|
|
width: 100%;
|
|
padding: 40px;
|
|
font-family: 'Arial', sans-serif;
|
|
line-height: 1.6;
|
|
color: #333;
|
|
}
|
|
|
|
.resume-header {
|
|
border-bottom: 3px solid var(--color-primary);
|
|
padding-bottom: 20px;
|
|
margin-bottom: 30px;
|
|
}
|
|
|
|
.resume-name {
|
|
font-size: 2.5rem;
|
|
font-weight: 700;
|
|
color: var(--color-primary);
|
|
margin: 0;
|
|
}
|
|
|
|
.resume-title {
|
|
font-size: 1.5rem;
|
|
font-weight: 400;
|
|
color: #666;
|
|
margin: 5px 0 15px 0;
|
|
}
|
|
|
|
.contact-info {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 20px;
|
|
}
|
|
|
|
.contact-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 5px;
|
|
font-size: 0.95rem;
|
|
}
|
|
|
|
.contact-item i {
|
|
color: var(--color-primary);
|
|
}
|
|
|
|
.resume-section {
|
|
margin-bottom: 25px;
|
|
}
|
|
|
|
.section-title {
|
|
font-size: 1.3rem;
|
|
font-weight: 600;
|
|
color: var(--color-primary);
|
|
border-bottom: 2px solid var(--color-primary-light);
|
|
padding-bottom: 5px;
|
|
margin-bottom: 15px;
|
|
}
|
|
|
|
.experience-item {
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.experience-header {
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.position-title {
|
|
font-size: 1.1rem;
|
|
font-weight: 600;
|
|
color: #333;
|
|
margin: 0;
|
|
}
|
|
|
|
.company-name {
|
|
font-weight: 500;
|
|
color: var(--color-primary);
|
|
margin-right: 15px;
|
|
}
|
|
|
|
.employment-period {
|
|
color: #666;
|
|
font-style: italic;
|
|
}
|
|
|
|
.experience-duties {
|
|
margin: 8px 0;
|
|
padding-left: 20px;
|
|
}
|
|
|
|
.experience-duties li {
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
.education-item {
|
|
margin-bottom: 15px;
|
|
}
|
|
|
|
.degree-title {
|
|
font-weight: 600;
|
|
color: #333;
|
|
margin: 0 15px 0 0;
|
|
}
|
|
|
|
.institution {
|
|
color: var(--color-primary);
|
|
margin-right: 15px;
|
|
}
|
|
|
|
.graduation-year {
|
|
color: #666;
|
|
}
|
|
|
|
.skills-grid {
|
|
display: grid;
|
|
gap: 15px;
|
|
}
|
|
|
|
.skill-category-title {
|
|
font-size: 1rem;
|
|
font-weight: 600;
|
|
margin-bottom: 8px;
|
|
color: #333;
|
|
}
|
|
|
|
.skill-tags {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 8px;
|
|
}
|
|
|
|
.skill-tag {
|
|
background: var(--color-primary-light);
|
|
color: var(--color-primary);
|
|
padding: 4px 12px;
|
|
border-radius: 15px;
|
|
font-size: 0.9rem;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.language-list {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
|
gap: 10px;
|
|
}
|
|
|
|
.language-item {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
padding: 8px 0;
|
|
border-bottom: 1px solid #eee;
|
|
}
|
|
|
|
.language-name {
|
|
font-weight: 500;
|
|
}
|
|
|
|
.language-level {
|
|
color: var(--color-primary);
|
|
font-weight: 500;
|
|
}
|
|
|
|
/* Print Styles */
|
|
@media print {
|
|
.preview-header,
|
|
.preview-controls {
|
|
display: none !important;
|
|
}
|
|
|
|
.resume-page {
|
|
box-shadow: none;
|
|
margin: 0;
|
|
padding: 20px;
|
|
}
|
|
|
|
body {
|
|
background: white;
|
|
}
|
|
}
|
|
|
|
/* Responsive */
|
|
@media (max-width: 768px) {
|
|
.resume-page {
|
|
padding: 20px;
|
|
}
|
|
|
|
.resume-name {
|
|
font-size: 2rem;
|
|
}
|
|
|
|
.contact-info {
|
|
flex-direction: column;
|
|
gap: 10px;
|
|
}
|
|
}
|
|
</style>
|
|
@endpush
|
|
|
|
@push('scripts')
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
// Smooth animations
|
|
const sections = document.querySelectorAll('.resume-section');
|
|
const observer = new IntersectionObserver((entries) => {
|
|
entries.forEach(entry => {
|
|
if (entry.isIntersecting) {
|
|
entry.target.style.opacity = '1';
|
|
entry.target.style.transform = 'translateY(0)';
|
|
}
|
|
});
|
|
});
|
|
|
|
sections.forEach(section => {
|
|
section.style.opacity = '0';
|
|
section.style.transform = 'translateY(20px)';
|
|
section.style.transition = 'opacity 0.6s ease, transform 0.6s ease';
|
|
observer.observe(section);
|
|
});
|
|
});
|
|
</script>
|
|
@endpush
|
|
@endsection
|