mirror of
https://github.com/Dvorinka/PPve.git
synced 2026-06-03 20:12:59 +00:00
hh
This commit is contained in:
Tomas Dvorak
+76
-52
@@ -5,6 +5,7 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Admin Dashboard - PP Kunovice</title>
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<style>
|
||||
:root {
|
||||
--primary-color: #4a6cf7;
|
||||
@@ -602,9 +603,9 @@
|
||||
<div class="card-body">
|
||||
<form id="bannerForm">
|
||||
<!-- Templates Section -->
|
||||
<div class="mb-4">
|
||||
<label class="form-label fw-bold">Vyberte šablonu</label>
|
||||
<div class="template-grid mb-4">
|
||||
<div class="mb-6">
|
||||
<h3 class="text-lg font-medium text-gray-900 mb-3">Vyberte šablonu</h3>
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4 mb-6" id="templateGrid">
|
||||
<!-- Templates will be inserted here by JavaScript -->
|
||||
</div>
|
||||
</div>
|
||||
@@ -1928,7 +1929,7 @@ const templateConfigs = {
|
||||
|
||||
// Setup template selection and generate template previews
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
const templateGrid = document.querySelector('.template-grid');
|
||||
const templateGrid = document.getElementById('templateGrid');
|
||||
|
||||
// Get references to form elements
|
||||
const bannerBgColorPicker = document.getElementById('bannerBgColorPicker');
|
||||
@@ -1996,50 +1997,59 @@ document.addEventListener('DOMContentLoaded', () => {
|
||||
|
||||
// Generate template previews
|
||||
if (templateGrid) {
|
||||
templateGrid.innerHTML = ''; // Clear any existing templates
|
||||
// Clear existing content
|
||||
templateGrid.innerHTML = '';
|
||||
|
||||
// Create a preview for each template
|
||||
Object.entries(templateConfigs).forEach(([id, template]) => {
|
||||
const templateItem = document.createElement('div');
|
||||
templateItem.className = 'template-item';
|
||||
templateItem.dataset.template = id;
|
||||
// Create template card container
|
||||
const templateElement = document.createElement('div');
|
||||
templateElement.className = 'group relative cursor-pointer rounded-lg overflow-hidden border border-gray-200 hover:border-blue-500 transition-all duration-200 hover:shadow-lg';
|
||||
templateElement.dataset.templateId = id;
|
||||
|
||||
// Create preview container with the template's container style
|
||||
const preview = document.createElement('div');
|
||||
preview.className = 'template-preview';
|
||||
preview.style.cssText = template.containerStyle;
|
||||
// Create preview container with aspect ratio 16:9
|
||||
templateElement.innerHTML = `
|
||||
<div class="relative pt-[56.25%] bg-white">
|
||||
<div class="absolute inset-0 flex items-center justify-center p-4 text-center" style="${template.containerStyle}">
|
||||
<div class="w-full h-full relative">
|
||||
${template.imageStyle ?
|
||||
`<div class="absolute inset-0" style="${template.imageStyle}">
|
||||
<div class="w-full h-full bg-gray-200"></div>
|
||||
</div>` :
|
||||
''
|
||||
}
|
||||
<div class="absolute inset-0 flex items-center justify-center p-4">
|
||||
<div class="text-center px-4 py-2 rounded-md bg-black bg-opacity-50 text-white" style="${template.textStyle}">
|
||||
${template.name}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-3 bg-white border-t border-gray-100">
|
||||
<div class="flex justify-between items-center">
|
||||
<span class="text-sm font-medium text-gray-900 truncate">${template.name}</span>
|
||||
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
|
||||
Vybrat
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="absolute inset-0 bg-blue-500 bg-opacity-0 group-hover:bg-opacity-10 transition-all duration-200"></div>
|
||||
`;
|
||||
|
||||
// Create image placeholder
|
||||
const imgPlaceholder = document.createElement('div');
|
||||
imgPlaceholder.className = 'template-img-placeholder';
|
||||
imgPlaceholder.style.cssText = template.imageStyle;
|
||||
// Add click event to apply template
|
||||
templateElement.addEventListener('click', () => {
|
||||
// Remove active class from all templates
|
||||
document.querySelectorAll('[data-template-id]').forEach(el => {
|
||||
el.classList.remove('ring-2', 'ring-blue-500');
|
||||
});
|
||||
// Add active class to selected template
|
||||
templateElement.classList.add('ring-2', 'ring-blue-500');
|
||||
applyTemplate(id);
|
||||
});
|
||||
|
||||
// Create text placeholder
|
||||
const textPlaceholder = document.createElement('div');
|
||||
textPlaceholder.className = 'template-text-placeholder';
|
||||
textPlaceholder.style.cssText = template.textStyle;
|
||||
|
||||
// Add placeholders to preview
|
||||
preview.appendChild(imgPlaceholder);
|
||||
preview.appendChild(textPlaceholder);
|
||||
|
||||
// Create template name
|
||||
const name = document.createElement('div');
|
||||
name.className = 'template-name';
|
||||
name.textContent = template.name;
|
||||
|
||||
// Create badge for template type
|
||||
const badge = document.createElement('div');
|
||||
badge.className = 'template-badge';
|
||||
badge.textContent = 'Doporučeno';
|
||||
|
||||
// Add elements to template item
|
||||
templateItem.appendChild(badge);
|
||||
templateItem.appendChild(preview);
|
||||
templateItem.appendChild(name);
|
||||
|
||||
// Add to grid
|
||||
templateGrid.appendChild(templateItem);
|
||||
// Add template to grid
|
||||
templateGrid.appendChild(templateElement);
|
||||
});
|
||||
}
|
||||
|
||||
@@ -2146,19 +2156,33 @@ function applyTemplate(templateId) {
|
||||
// Store the selected template
|
||||
currentTemplate = templateId;
|
||||
|
||||
// Update form fields with template styles
|
||||
if (template.containerStyle) {
|
||||
const bannerContainer = document.getElementById('bannerPreview');
|
||||
if (bannerContainer) {
|
||||
bannerContainer.style = template.containerStyle;
|
||||
}
|
||||
}
|
||||
|
||||
// Update text styles if they exist in the template
|
||||
if (template.textStyle) {
|
||||
const bannerText = document.getElementById('bannerText');
|
||||
if (bannerText) {
|
||||
bannerText.style = template.textStyle;
|
||||
}
|
||||
}
|
||||
|
||||
// Update button styles if they exist in the template
|
||||
if (template.buttonStyle) {
|
||||
const bannerButton = document.querySelector('.banner-button');
|
||||
if (bannerButton) {
|
||||
bannerButton.style = template.buttonStyle;
|
||||
}
|
||||
}
|
||||
|
||||
// Update the banner preview with the new template
|
||||
updateBannerPreview();
|
||||
|
||||
// Update active state of template items
|
||||
const templateItems = document.querySelectorAll('.template-item');
|
||||
templateItems.forEach(item => {
|
||||
if (item.dataset.template === templateId) {
|
||||
item.classList.add('active');
|
||||
} else {
|
||||
item.classList.remove('active');
|
||||
}
|
||||
});
|
||||
|
||||
// Show success message
|
||||
showNotification(`Šablona "${template.name}" byla použita`, 'success');
|
||||
|
||||
|
||||
Reference in New Issue
Block a user