hh

admin-dashboard.html

@@ -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">
+                    <div class="mb-6">
-                        <label class="form-label fw-bold">Vyberte šablonu</label>
+                        <h3 class="text-lg font-medium text-gray-900 mb-3">Vyberte šablonu</h3>
-                        <div class="template-grid mb-4">
+                        <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');
+            // Create template card container
-            templateItem.className = 'template-item';
+            const templateElement = document.createElement('div');
-            templateItem.dataset.template = id;
+            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
+            // Create preview container with aspect ratio 16:9
-            const preview = document.createElement('div');
+            templateElement.innerHTML = `
-            preview.className = 'template-preview';
+                <div class="relative pt-[56.25%] bg-white">
-            preview.style.cssText = template.containerStyle;
+                    <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
+            // Add click event to apply template
-            const imgPlaceholder = document.createElement('div');
+            templateElement.addEventListener('click', () => {
-            imgPlaceholder.className = 'template-img-placeholder';
+                // Remove active class from all templates
-            imgPlaceholder.style.cssText = template.imageStyle;
+                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
+            // Add template to grid
-            const textPlaceholder = document.createElement('div');
+            templateGrid.appendChild(templateElement);
-            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);
         });
     }
     
@@ -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');