From 5ce9613258fa9dc6ef2445f16e2c3b6c2bc5b4b4 Mon Sep 17 00:00:00 2001
From: Tomas Dvorak <contact.dvorak@gmail.com>
Date: Thu, 29 May 2025 10:27:43 +0200
Subject: [PATCH] test

---
 admin-dashboard.html | 88 +++++++++++++++++++++++++++++++++++++++-----
 1 file changed, 78 insertions(+), 10 deletions(-)

diff --git a/admin-dashboard.html b/admin-dashboard.html
index 9de7650..a75b894 100644
--- a/admin-dashboard.html
+++ b/admin-dashboard.html
@@ -1551,15 +1551,51 @@ async function saveBanner(event) {
         
         // Add template name
         formData.append('template', currentTemplate || 'modern-minimal');
+        
+        // Get custom values if they exist
+        const customBg = bannerBgColorPicker ? bannerBgColorPicker.value : null;
+        const customTextColor = bannerTextColorPicker ? bannerTextColorPicker.value : null;
+        
+        // Apply all template styles
+        const styles = {
+            // Background styles
+            background: template.background || '',
+            backgroundColor: customBg || template.backgroundColor || '#f8f9fa',
             
-        // Add styles - use custom values if they exist, otherwise use template defaults
-        formData.append('style[backgroundColor]', bannerBgColorPicker ? bannerBgColorPicker.value : (template?.bgColor || '#f8f9fa'));
-        formData.append('style[textColor]', bannerTextColorPicker ? bannerTextColorPicker.value : (template?.textColor || '#212529'));
-        formData.append('style[textAlign]', template?.textAlign || 'left');
-        formData.append('style[fontSize]', template?.fontSize ? `${template.fontSize}px` : '16px');
-        formData.append('style[padding]', template?.padding ? `${template.padding}px` : '20px');
-        formData.append('style[margin]', template?.margin ? `${template.margin}px` : '20px');
-        formData.append('style[borderRadius]', template?.borderRadius ? `${template.borderRadius}px` : '8px');
+            // Text styles
+            color: customTextColor || template.textColor || '#212529',
+            textColor: customTextColor || template.textColor || '#212529',
+            textAlign: template.textAlign || 'left',
+            fontSize: template.fontSize ? `${template.fontSize}px` : '16px',
+            
+            // Layout styles
+            padding: template.padding ? `${template.padding}px` : '20px',
+            margin: template.margin ? `${template.margin}px` : '20px',
+            borderRadius: template.borderRadius ? `${template.borderRadius}px` : '8px',
+            
+            // Button styles (if template defines them)
+            buttonBackground: template.buttonBackground || template.buttonStyle?.match(/background:([^;]+)/)?.[1]?.trim() || '#4a6cf7',
+            buttonTextColor: template.buttonTextColor || template.buttonStyle?.match(/color:([^;]+)/)?.[1]?.trim() || '#ffffff',
+            buttonBorder: template.buttonBorder || template.buttonStyle?.match(/border:([^;]+)/)?.[1]?.trim() || 'none',
+            
+            // Container styles
+            containerStyle: template.containerStyle || ''
+        };
+        
+        // Special handling for specific templates
+        if (currentTemplate === 'dark') {
+            styles.background = '#2d3748';
+            styles.backgroundColor = '#2d3748';
+            styles.color = '#e2e8f0';
+            styles.textColor = '#e2e8f0';
+        }
+        
+        // Add all styles to form data
+        Object.entries(styles).forEach(([key, value]) => {
+            if (value !== undefined && value !== '') {
+                formData.append(`style[${key}]`, value);
+            }
+        });
         
         // Add image position
         const imagePosition = document.querySelector('.image-pos-btn.active')?.dataset.pos || 'center';
@@ -1845,16 +1881,39 @@ function updateBannerPreview() {
                 ${bannerTextContent}
             </div>`;
         
+        // Get background style - handle both gradient and solid colors
+        let backgroundStyle = '';
+        if (template.background && template.background.includes('gradient')) {
+            // Use the gradient from template
+            backgroundStyle = `background: ${template.background};`;
+        } else if (currentTemplate === 'dark') {
+            // Special handling for dark theme
+            backgroundStyle = 'background: #2d3748;';
+        } else {
+            // Use custom background or template's background color
+            const bgColor = bannerBgColorPicker?.value || template?.backgroundColor || '#f8f9fa';
+            backgroundStyle = `background-color: ${bgColor};`;
+        }
+            
         // Create container with proper layout
         bannerContent = `
             <div class="banner-content" style="
-                ${template?.containerStyle || ''}
-                padding: 20px;
+                ${styles.containerStyle}
+                ${backgroundStyle}
+                color: ${styles.color};
+                text-align: ${styles.textAlign};
+                font-size: ${styles.fontSize};
+                padding: ${styles.padding};
                 overflow: hidden;
                 display: flex;
                 flex-direction: ${imagePosition === 'bottom' ? 'column' : 'row'};
                 align-items: center;
+                justify-content: center;
                 gap: 20px;
+                border-radius: ${styles.borderRadius};
+                margin: ${styles.margin};
+                box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+                min-height: 200px;
             ">
                 ${imagePosition === 'left' || imagePosition === 'top' ? imgContainer : ''}
                 <div style="flex: 1;">
@@ -2184,6 +2243,15 @@ const templateConfigs = {
         textStyle: 'color: white; text-shadow: 0 1px 3px rgba(0,0,0,0.2);',
         buttonStyle: 'background: white; color: #4a6cf7; border: none; padding: 8px 20px; border-radius: 4px; font-weight: 600;',
         isVisible: true
+    },
+    'gradient-blue': {
+        name: 'Modrý gradient',
+        containerStyle: 'background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%); color: white;',
+        background: 'linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%)',
+        backgroundColor: '#4f46e5',
+        textStyle: 'color: white; font-family: \'Inter\', sans-serif; font-size: 16px; font-weight: 500;',
+        buttonStyle: 'background-color: white; color: #4f46e5; border: none; padding: 10px 24px; border-radius: 6px; font-weight: 600;',
+        isVisible: true
     }
 };