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