278 lines
12 KiB
PHP
278 lines
12 KiB
PHP
{{--
|
|
Resume Templates - Professional Bootstrap Design
|
|
Professional Template Selection Page
|
|
|
|
@author David Valera Melendez <david@valera-melendez.de>
|
|
@created 2025-08-09
|
|
@location Made in Germany 🇩🇪
|
|
--}}
|
|
|
|
@extends('layouts.app')
|
|
|
|
@section('title', 'Resume Templates - Professional Resume Builder')
|
|
@section('page_class', 'templates-page')
|
|
|
|
@section('content')
|
|
<div class="templates-container">
|
|
<!-- Page Header -->
|
|
<section class="page-header">
|
|
<div class="header-content">
|
|
<div class="header-text">
|
|
<h1 class="page-title">Choose Your Template</h1>
|
|
<p class="page-subtitle">
|
|
Select from our collection of professional resume templates designed to make you stand out
|
|
</p>
|
|
</div>
|
|
<div class="header-actions">
|
|
<a href="{{ route('dashboard') }}" class="btn secondary-cta">
|
|
<i class="bi bi-arrow-left"></i>
|
|
Back to Dashboard
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Template Filters -->
|
|
<section class="template-filters">
|
|
<div class="card filter-card">
|
|
<div class="card-body">
|
|
<div class="row align-items-center">
|
|
<div class="col-md-6">
|
|
<div class="filter-group">
|
|
<label class="filter-label">Category</label>
|
|
<select class="form-select" id="categoryFilter">
|
|
<option value="">All Templates</option>
|
|
<option value="professional">Professional</option>
|
|
<option value="modern">Modern</option>
|
|
<option value="classic">Classic</option>
|
|
<option value="creative">Creative</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="filter-group">
|
|
<label class="filter-label">Type</label>
|
|
<select class="form-select" id="typeFilter">
|
|
<option value="">All Types</option>
|
|
<option value="free">Free Templates</option>
|
|
<option value="premium">Premium Templates</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Templates Grid -->
|
|
<section class="templates-grid">
|
|
<div class="row g-4" id="templatesGrid">
|
|
@forelse($templates as $template)
|
|
<div class="col-lg-4 col-md-6 template-item"
|
|
data-category="{{ strtolower($template['name']) }}"
|
|
data-type="{{ $template['is_premium'] ? 'premium' : 'free' }}">
|
|
<div class="card template-card h-100">
|
|
<!-- Template Preview -->
|
|
<div class="template-preview">
|
|
@if($template['preview_image'])
|
|
<img src="{{ asset($template['preview_image']) }}"
|
|
alt="{{ $template['name'] }} Template"
|
|
class="template-image"
|
|
onerror="this.src='data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzAwIiBoZWlnaHQ9IjQwMCIgdmlld0JveD0iMCAwIDMwMCA0MDAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxyZWN0IHdpZHRoPSIzMDAiIGhlaWdodD0iNDAwIiBmaWxsPSIjRjVGNUY1Ii8+CjxyZWN0IHg9IjIwIiB5PSIyMCIgd2lkdGg9IjI2MCIgaGVpZ2h0PSIzNjAiIGZpbGw9IndoaXRlIiBzdHJva2U9IiNFMEUwRTAiLz4KPHN2ZyB4PSI1MCIgeT0iNTAiIHdpZHRoPSIyMDAiIGhlaWdodD0iMzAiIHZpZXdCb3g9IjAgMCAyMDAgMzAiIGZpbGw9Im5vbmUiPgo8cmVjdCB3aWR0aD0iMjAwIiBoZWlnaHQ9IjMwIiBmaWxsPSIjMTk3NkQyIi8+CjwvY3ZnPgo8dGV4dCB4PSIxNTAiIHk9IjIxMCIgZm9udC1mYW1pbHk9IkFyaWFsLCBzYW5zLXNlcmlmIiBmb250LXNpemU9IjE2IiBmaWxsPSIjNjY2NjY2IiB0ZXh0LWFuY2hvcj0ibWlkZGxlIj5SZXN1bWUgVGVtcGxhdGU8L3RleHQ+Cjwvc3ZnPg=='">
|
|
@else
|
|
<div class="template-placeholder">
|
|
<i class="bi bi-file-earmark-text"></i>
|
|
<span>{{ $template['name'] }} Template</span>
|
|
</div>
|
|
@endif
|
|
|
|
@if($template['is_premium'])
|
|
<div class="premium-badge">
|
|
<i class="bi bi-crown"></i>
|
|
Premium
|
|
</div>
|
|
@else
|
|
<div class="free-badge">
|
|
<i class="bi bi-check-circle"></i>
|
|
Free
|
|
</div>
|
|
@endif
|
|
</div>
|
|
|
|
<!-- Template Info -->
|
|
<div class="card-body">
|
|
<h5 class="template-title">{{ $template['name'] }}</h5>
|
|
<p class="template-description">{{ $template['description'] }}</p>
|
|
</div>
|
|
|
|
<!-- Template Actions -->
|
|
<div class="card-footer">
|
|
<div class="template-actions">
|
|
<a href="{{ route('templates.show', $template['id']) }}" class="btn btn-outline-primary">
|
|
<i class="bi bi-eye"></i>
|
|
Preview
|
|
</a>
|
|
<a href="{{ route('resume-builder.create', ['template' => $template['id']]) }}" class="btn primary-cta">
|
|
<i class="bi bi-plus-circle"></i>
|
|
Use Template
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@empty
|
|
<div class="col-12">
|
|
<div class="empty-state">
|
|
<div class="empty-icon">
|
|
<i class="bi bi-file-earmark-text"></i>
|
|
</div>
|
|
<h5 class="empty-title">No Templates Available</h5>
|
|
<p class="empty-description">
|
|
We're working on adding more professional templates for you to choose from.
|
|
</p>
|
|
<a href="{{ route('dashboard') }}" class="btn primary-cta">
|
|
<i class="bi bi-arrow-left"></i>
|
|
Back to Dashboard
|
|
</a>
|
|
</div>
|
|
</div>
|
|
@endforelse
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Template Categories Info -->
|
|
<section class="template-categories">
|
|
<div class="section-header">
|
|
<h2>Template Categories</h2>
|
|
<p>Choose the style that best represents your professional image</p>
|
|
</div>
|
|
|
|
<div class="row g-4">
|
|
<div class="col-lg-3 col-md-6">
|
|
<div class="card category-card">
|
|
<div class="card-body text-center">
|
|
<div class="category-icon">
|
|
<i class="bi bi-briefcase"></i>
|
|
</div>
|
|
<h6 class="category-title">Professional</h6>
|
|
<p class="category-description">Clean, formal templates perfect for traditional industries</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-lg-3 col-md-6">
|
|
<div class="card category-card">
|
|
<div class="card-body text-center">
|
|
<div class="category-icon">
|
|
<i class="bi bi-lightning"></i>
|
|
</div>
|
|
<h6 class="category-title">Modern</h6>
|
|
<p class="category-description">Contemporary designs for tech and startup environments</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-lg-3 col-md-6">
|
|
<div class="card category-card">
|
|
<div class="card-body text-center">
|
|
<div class="category-icon">
|
|
<i class="bi bi-bookmark"></i>
|
|
</div>
|
|
<h6 class="category-title">Classic</h6>
|
|
<p class="category-description">Timeless layouts that work across all industries</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-lg-3 col-md-6">
|
|
<div class="card category-card">
|
|
<div class="card-body text-center">
|
|
<div class="category-icon">
|
|
<i class="bi bi-palette"></i>
|
|
</div>
|
|
<h6 class="category-title">Creative</h6>
|
|
<p class="category-description">Unique designs for creative and artistic professionals</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
|
|
@push('scripts')
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
// Template filtering functionality
|
|
const categoryFilter = document.getElementById('categoryFilter');
|
|
const typeFilter = document.getElementById('typeFilter');
|
|
const templateItems = document.querySelectorAll('.template-item');
|
|
|
|
function filterTemplates() {
|
|
const categoryValue = categoryFilter.value.toLowerCase();
|
|
const typeValue = typeFilter.value;
|
|
|
|
templateItems.forEach(item => {
|
|
const itemCategory = item.dataset.category;
|
|
const itemType = item.dataset.type;
|
|
|
|
let showItem = true;
|
|
|
|
// Filter by category
|
|
if (categoryValue && itemCategory !== categoryValue) {
|
|
showItem = false;
|
|
}
|
|
|
|
// Filter by type
|
|
if (typeValue && itemType !== typeValue) {
|
|
showItem = false;
|
|
}
|
|
|
|
// Show/hide item with animation
|
|
if (showItem) {
|
|
item.style.display = 'block';
|
|
item.classList.add('animate-fade-in');
|
|
} else {
|
|
item.style.display = 'none';
|
|
item.classList.remove('animate-fade-in');
|
|
}
|
|
});
|
|
}
|
|
|
|
// Add event listeners
|
|
if (categoryFilter) {
|
|
categoryFilter.addEventListener('change', filterTemplates);
|
|
}
|
|
|
|
if (typeFilter) {
|
|
typeFilter.addEventListener('change', filterTemplates);
|
|
}
|
|
|
|
// Template card hover effects
|
|
const templateCards = document.querySelectorAll('.template-card');
|
|
templateCards.forEach(card => {
|
|
card.addEventListener('mouseenter', function() {
|
|
this.style.transform = 'translateY(-5px)';
|
|
});
|
|
|
|
card.addEventListener('mouseleave', function() {
|
|
this.style.transform = 'translateY(0)';
|
|
});
|
|
});
|
|
|
|
// Smooth scroll animations
|
|
const observer = new IntersectionObserver((entries) => {
|
|
entries.forEach(entry => {
|
|
if (entry.isIntersecting) {
|
|
entry.target.classList.add('animate-fade-in');
|
|
}
|
|
});
|
|
});
|
|
|
|
templateCards.forEach(card => {
|
|
observer.observe(card);
|
|
});
|
|
});
|
|
</script>
|
|
@endpush
|
|
@endsection
|