test

admin-dashboard.html

@@ -1552,14 +1552,50 @@ async function saveBanner(event) {
         // Add template name
         formData.append('template', currentTemplate || 'modern-minimal');
         
-        // Add styles - use custom values if they exist, otherwise use template defaults
+        // Get custom values if they exist
-        formData.append('style[backgroundColor]', bannerBgColorPicker ? bannerBgColorPicker.value : (template?.bgColor || '#f8f9fa'));
+        const customBg = bannerBgColorPicker ? bannerBgColorPicker.value : null;
-        formData.append('style[textColor]', bannerTextColorPicker ? bannerTextColorPicker.value : (template?.textColor || '#212529'));
+        const customTextColor = bannerTextColorPicker ? bannerTextColorPicker.value : null;
-        formData.append('style[textAlign]', template?.textAlign || 'left');
+        
-        formData.append('style[fontSize]', template?.fontSize ? `${template.fontSize}px` : '16px');
+        // Apply all template styles
-        formData.append('style[padding]', template?.padding ? `${template.padding}px` : '20px');
+        const styles = {
-        formData.append('style[margin]', template?.margin ? `${template.margin}px` : '20px');
+            // Background styles
-        formData.append('style[borderRadius]', template?.borderRadius ? `${template.borderRadius}px` : '8px');
+            background: template.background || '',
+            backgroundColor: customBg || template.backgroundColor || '#f8f9fa',
+            
+            // 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 || ''}
+                ${styles.containerStyle}
-                padding: 20px;
+                ${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
     }
 };