TDvorak/PPve
1
0
Fork 0
mirror of https://github.com/Dvorinka/PPve.git synced 2026-06-03 20:12:59 +00:00
Code Issues Packages Projects Releases Wiki Activity

test

Browse Source
This commit is contained in:
Tomas Dvorak
2025-05-29 10:27:43 +02:00
parent 96e7a37e5f
commit 5ce9613258
1 changed files with 78 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files
admin-dashboard.html
+78 -10
View File
@@ -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
}
};