268 lines
13 KiB
PHP
268 lines
13 KiB
PHP
{{--
|
|
Template Details - Professional Bootstrap Design
|
|
Professional Template Detail Page
|
|
|
|
@author David Valera Melendez <david@valera-melendez.de>
|
|
@created 2025-08-09
|
|
@location Made in Germany 🇩🇪
|
|
--}}
|
|
|
|
@extends('layouts.app')
|
|
|
|
@section('title', $templateData['name'] . ' Template - Professional Resume Builder')
|
|
@section('page_class', 'template-detail-page')
|
|
|
|
@section('content')
|
|
<div class="template-detail-container">
|
|
<!-- Template Header -->
|
|
<section class="template-header">
|
|
<div class="row align-items-center">
|
|
<div class="col-md-8">
|
|
<div class="template-info">
|
|
<div class="breadcrumb-nav">
|
|
<nav aria-label="breadcrumb">
|
|
<ol class="breadcrumb">
|
|
<li class="breadcrumb-item"><a href="{{ route('dashboard') }}">Dashboard</a></li>
|
|
<li class="breadcrumb-item"><a href="{{ route('templates.index') }}">Templates</a></li>
|
|
<li class="breadcrumb-item active" aria-current="page">{{ $templateData['name'] }}</li>
|
|
</ol>
|
|
</nav>
|
|
</div>
|
|
<h1 class="template-name">{{ $templateData['name'] }} Template</h1>
|
|
<p class="template-description">{{ $templateData['description'] }}</p>
|
|
|
|
<div class="template-badges">
|
|
@if($templateData['is_premium'])
|
|
<span class="badge premium-badge">
|
|
<i class="bi bi-crown"></i>
|
|
Premium Template
|
|
</span>
|
|
@else
|
|
<span class="badge free-badge">
|
|
<i class="bi bi-check-circle"></i>
|
|
Free Template
|
|
</span>
|
|
@endif
|
|
<span class="badge category-badge">Professional</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<div class="template-actions">
|
|
<a href="{{ route('templates.preview', $templateData['id']) }}" class="btn btn-outline-primary btn-lg">
|
|
<i class="bi bi-eye"></i>
|
|
Live Preview
|
|
</a>
|
|
<a href="{{ route('resume-builder.create', ['template' => $templateData['id']]) }}" class="btn primary-cta btn-lg">
|
|
<i class="bi bi-plus-circle"></i>
|
|
Use This Template
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Template Preview & Features -->
|
|
<section class="template-content">
|
|
<div class="row g-4">
|
|
<!-- Template Preview -->
|
|
<div class="col-lg-8">
|
|
<div class="card preview-card">
|
|
<div class="card-header">
|
|
<h5 class="card-title mb-0">
|
|
<i class="bi bi-eye"></i>
|
|
Template Preview
|
|
</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="template-preview-container">
|
|
@if($templateData['preview_image'])
|
|
<img src="{{ asset($templateData['preview_image']) }}"
|
|
alt="{{ $templateData['name'] }} Template Preview"
|
|
class="template-preview-image"
|
|
onerror="this.src='data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjAwIiBoZWlnaHQ9IjgwMCIgdmlld0JveD0iMCAwIDYwMCA4MDAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxyZWN0IHdpZHRoPSI2MDAiIGhlaWdodD0iODAwIiBmaWxsPSIjRjVGNUY1Ii8+CjxyZWN0IHg9IjQwIiB5PSI0MCIgd2lkdGg9IjUyMCIgaGVpZ2h0PSI3MjAiIGZpbGw9IndoaXRlIiBzdHJva2U9IiNFMEUwRTAiLz4KPHN2ZyB4PSI4MCIgeT0iODAiIHdpZHRoPSI0NDAiIGhlaWdodD0iNjAiIHZpZXdCb3g9IjAgMCA0NDAgNjAiIGZpbGw9Im5vbmUiPgo8cmVjdCB3aWR0aD0iNDQwIiBoZWlnaHQ9IjYwIiBmaWxsPSIjMTk3NkQyIi8+CjwvY3ZnPgo8dGV4dCB4PSIzMDAiIHk9IjQyMCIgZm9udC1mYW1pbHk9IkFyaWFsLCBzYW5zLXNlcmlmIiBmb250LXNpemU9IjI0IiBmaWxsPSIjNjY2NjY2IiB0ZXh0LWFuY2hvcj0ibWlkZGxlIj57eyAkdGVtcGxhdGVEYXRhWyduYW1lJ10gfX0gVGVtcGxhdGU8L3RleHQ+Cjx0ZXh0IHg9IjMwMCIgeT0iNDYwIiBmb250LWZhbWlseT0iQXJpYWwsIHNhbnMtc2VyaWYiIGZvbnQtc2l6ZT0iMTYiIGZpbGw9IiM5OTk5OTkiIHRleHQtYW5jaG9yPSJtaWRkbGUiPkNsaWNrICJMaXZlIFByZXZpZXciIGZvciBmdWxsIHZpZXc8L3RleHQ+Cjwvc3ZnPg=='">
|
|
@else
|
|
<div class="template-preview-placeholder">
|
|
<i class="bi bi-file-earmark-text"></i>
|
|
<h5>{{ $templateData['name'] }} Template</h5>
|
|
<p>Click "Live Preview" to see the full template</p>
|
|
</div>
|
|
@endif
|
|
</div>
|
|
|
|
<div class="preview-actions mt-3">
|
|
<a href="{{ route('templates.preview', $templateData['id']) }}" class="btn btn-outline-primary">
|
|
<i class="bi bi-fullscreen"></i>
|
|
Full Screen Preview
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Template Features -->
|
|
<div class="col-lg-4">
|
|
<div class="card features-card">
|
|
<div class="card-header">
|
|
<h5 class="card-title mb-0">
|
|
<i class="bi bi-star"></i>
|
|
Template Features
|
|
</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="feature-list">
|
|
<div class="feature-item">
|
|
<i class="bi bi-check-circle feature-icon"></i>
|
|
<span>Professional Layout</span>
|
|
</div>
|
|
<div class="feature-item">
|
|
<i class="bi bi-check-circle feature-icon"></i>
|
|
<span>ATS Friendly</span>
|
|
</div>
|
|
<div class="feature-item">
|
|
<i class="bi bi-check-circle feature-icon"></i>
|
|
<span>Print Optimized</span>
|
|
</div>
|
|
<div class="feature-item">
|
|
<i class="bi bi-check-circle feature-icon"></i>
|
|
<span>Easy Customization</span>
|
|
</div>
|
|
<div class="feature-item">
|
|
<i class="bi bi-check-circle feature-icon"></i>
|
|
<span>Multiple Formats</span>
|
|
</div>
|
|
<div class="feature-item">
|
|
<i class="bi bi-check-circle feature-icon"></i>
|
|
<span>Modern Typography</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Template Stats -->
|
|
<div class="card stats-card mt-4">
|
|
<div class="card-header">
|
|
<h5 class="card-title mb-0">
|
|
<i class="bi bi-bar-chart"></i>
|
|
Template Stats
|
|
</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="stat-item">
|
|
<div class="stat-value">4.8/5</div>
|
|
<div class="stat-label">Rating</div>
|
|
</div>
|
|
<div class="stat-item">
|
|
<div class="stat-value">2,345</div>
|
|
<div class="stat-label">Downloads</div>
|
|
</div>
|
|
<div class="stat-item">
|
|
<div class="stat-value">98%</div>
|
|
<div class="stat-label">Success Rate</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Quick Actions -->
|
|
<div class="card actions-card mt-4">
|
|
<div class="card-body">
|
|
<div class="d-grid gap-2">
|
|
<a href="{{ route('resume-builder.create', ['template' => $templateData['id']]) }}" class="btn primary-cta">
|
|
<i class="bi bi-plus-circle"></i>
|
|
Start With This Template
|
|
</a>
|
|
<a href="{{ route('templates.preview', $templateData['id']) }}" class="btn btn-outline-primary">
|
|
<i class="bi bi-eye"></i>
|
|
Preview Template
|
|
</a>
|
|
<a href="{{ route('templates.index') }}" class="btn btn-outline-secondary">
|
|
<i class="bi bi-arrow-left"></i>
|
|
Back to Templates
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Template Guidelines -->
|
|
<section class="template-guidelines">
|
|
<div class="card guidelines-card">
|
|
<div class="card-header">
|
|
<h5 class="card-title mb-0">
|
|
<i class="bi bi-lightbulb"></i>
|
|
Tips for Using This Template
|
|
</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<div class="guideline-item">
|
|
<div class="guideline-icon">
|
|
<i class="bi bi-target"></i>
|
|
</div>
|
|
<div class="guideline-content">
|
|
<h6>Perfect For</h6>
|
|
<p>Corporate professionals, managers, and executives in traditional industries.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="guideline-item">
|
|
<div class="guideline-icon">
|
|
<i class="bi bi-palette"></i>
|
|
</div>
|
|
<div class="guideline-content">
|
|
<h6>Customization</h6>
|
|
<p>Easily customize colors, fonts, and sections to match your personal brand.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="guidelines-footer mt-3">
|
|
<p class="text-muted mb-0">
|
|
<i class="bi bi-info-circle"></i>
|
|
Need help customizing your resume? Check out our
|
|
<a href="{{ route('help') }}" class="text-primary">help center</a>
|
|
for detailed guides and tips.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
|
|
@push('scripts')
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
// Smooth scroll animations
|
|
const cards = document.querySelectorAll('.card');
|
|
const observer = new IntersectionObserver((entries) => {
|
|
entries.forEach(entry => {
|
|
if (entry.isIntersecting) {
|
|
entry.target.classList.add('animate-fade-in');
|
|
}
|
|
});
|
|
});
|
|
|
|
cards.forEach(card => {
|
|
observer.observe(card);
|
|
});
|
|
|
|
// Template preview image zoom
|
|
const previewImage = document.querySelector('.template-preview-image');
|
|
if (previewImage) {
|
|
previewImage.addEventListener('click', function() {
|
|
// Open preview in new tab
|
|
window.open(this.src, '_blank');
|
|
});
|
|
|
|
previewImage.style.cursor = 'zoom-in';
|
|
}
|
|
});
|
|
</script>
|
|
@endpush
|
|
@endsection
|