init commit
This commit is contained in:
David Melendez
443
resources/views/templates/preview.blade.php
Normal file
443
resources/views/templates/preview.blade.php
Normal file
@@ -0,0 +1,443 @@
|
||||
{{--
|
||||
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
|
||||
Reference in New Issue
Block a user