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

etst

Browse Source
This commit is contained in:
Tomas Dvorak
2025-05-30 10:46:40 +02:00
parent b55da8d642
commit d4a98991e1
1 changed files with 139 additions and 83 deletions
Download Patch File Download Diff File Expand all files Collapse all files
admin-dashboard.html
+139 -83
View File
@@ -2761,17 +2761,23 @@ function updateBannerPreview() {
const imagePreview = document.getElementById('imagePreview'); const imagePreview = document.getElementById('imagePreview');
const imagePreviewContainer = document.getElementById('imagePreviewContainer'); const imagePreviewContainer = document.getElementById('imagePreviewContainer');
// Get the current template config or use modern as default // Get the current template config or use default if none selected
const defaultTemplate = templateConfigs['modern'] || {}; const defaultTemplate = templateConfigs['default'] || {};
const template = currentTemplate ? (templateConfigs[currentTemplate] || defaultTemplate) : defaultTemplate; const template = currentTemplate ? (templateConfigs[currentTemplate] || defaultTemplate) : defaultTemplate;
const fileInput = document.getElementById('bannerImage'); const fileInput = document.getElementById('bannerImage');
const hasImage = Boolean(currentImage || (fileInput && fileInput.files && fileInput.files.length > 0)); const hasImage = Boolean(currentImage || (fileInput && fileInput.files && fileInput.files.length > 0));
// Ensure template has required properties // Get all form field values or use template defaults
if (!template.background && !template.backgroundColor) { const bannerBgColor = document.getElementById('bannerBgColor')?.value || template.backgroundColor || '#f8f9fa';
template.backgroundColor = template.backgroundColor || '#f8f9fa'; const bannerTextColor = document.getElementById('bannerTextColor')?.value || template.textColor || '#212529';
template.background = template.background || template.backgroundColor; const bannerTextAlign = document.getElementById('bannerTextAlign')?.value || template.textAlign || 'left';
} const bannerFontSize = document.getElementById('bannerFontSize')?.value || template.fontSize || 16;
const bannerPadding = document.getElementById('bannerPadding')?.value || template.padding || 20;
const bannerMargin = document.getElementById('bannerMargin')?.value || template.margin || 20;
const bannerBorderRadius = document.getElementById('bannerBorderRadius')?.value || template.borderRadius || 8;
const bannerButtonBackground = document.getElementById('bannerButtonBackground')?.value || template.buttonBackground || '#4a6cf7';
const bannerButtonTextColor = document.getElementById('bannerButtonTextColor')?.value || template.buttonTextColor || '#ffffff';
const bannerButtonBorder = document.getElementById('bannerButtonBorder')?.value || template.buttonBorder || 'none';
// Always show templates section // Always show templates section
if (bannerTemplates) { if (bannerTemplates) {
@@ -2783,48 +2789,28 @@ function updateBannerPreview() {
const bannerLink = document.getElementById('bannerLink')?.value || ''; const bannerLink = document.getElementById('bannerLink')?.value || '';
const bannerTextContent = bannerText || 'Náhled banneru'; const bannerTextContent = bannerText || 'Náhled banneru';
// Get all styles from template or use defaults // Get all styles from form fields or template defaults
const styles = { const styles = {
// Background styles // Background styles
background: (bannerBgColorPicker?.value || template.background || template.backgroundColor || '#f8f9fa').trim(), background: template.background || bannerBgColor,
backgroundColor: (bannerBgColorPicker?.value || template.backgroundColor || '#f8f9fa').trim(), backgroundColor: bannerBgColor,
// Text styles // Text styles
color: (bannerTextColorPicker?.value || template.textColor || template.textStyle?.match(/color:\s*([^;]+)/)?.[1] || '#212529').trim(), color: bannerTextColor,
textColor: (bannerTextColorPicker?.value || template.textColor || template.textStyle?.match(/color:\s*([^;]+)/)?.[1] || '#212529').trim(), textColor: bannerTextColor,
textAlign: (document.getElementById('bannerTextAlign')?.value || 'left').trim(), textAlign: bannerTextAlign,
fontSize: (document.getElementById('bannerFontSize')?.value ? `${document.getElementById('bannerFontSize').value}px` : '16px'), fontSize: `${bannerFontSize}px`,
// Layout styles // Layout styles
padding: (document.getElementById('bannerPadding')?.value ? `${document.getElementById('bannerPadding').value}px` : '20px'), padding: `${bannerPadding}px`,
margin: (document.getElementById('bannerMargin')?.value ? `${document.getElementById('bannerMargin').value}px` : '20px'), margin: `${bannerMargin}px`,
borderRadius: (document.getElementById('bannerBorderRadius')?.value ? `${document.getElementById('bannerBorderRadius').value}px` : '8px'), borderRadius: `${bannerBorderRadius}px`,
// Container styles // Button styles
containerStyle: (template.containerStyle || '').trim() buttonBackground: bannerButtonBackground,
buttonTextColor: bannerButtonTextColor,
buttonBorder: bannerButtonBorder
}; };
// Special handling for specific templates
if (currentTemplate === 'modern') {
// Apply modern template specific styles
styles.background = template.background || styles.background;
styles.backgroundColor = template.backgroundColor || styles.backgroundColor;
styles.color = template.textColor || styles.color;
styles.textColor = template.textColor || styles.textColor;
// Add text shadow for better readability
if (template.textStyle && template.textStyle.includes('text-shadow')) {
const match = template.textStyle.match(/text-shadow:\s*([^;]+)/);
if (match && match[1]) {
styles.textShadow = match[1];
}
}
} else if (currentTemplate === 'dark') {
styles.background = '#2d3748';
styles.backgroundColor = '#2d3748';
styles.color = '#e2e8f0';
styles.textColor = '#e2e8f0';
}
// Create text content with template styles // Create text content with template styles
const textStyle = ` const textStyle = `
@@ -2892,20 +2878,52 @@ function updateBannerPreview() {
bannerContent = ` bannerContent = `
<div class="banner" style=" <div class="banner" style="
display: flex; display: flex;
flex-direction: row-reverse; flex-direction: ${template.imagePosition === 'left' ? 'row' : 'row-reverse'};
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
width: 100%; width: 100%;
max-width: 1200px; max-width: 1200px;
margin: 0 auto; margin: ${styles.margin} auto;
padding: 20px; padding: ${styles.padding};
${backgroundStyle}; ${backgroundStyle};
color: ${styles.textColor || '#212529'}; color: ${styles.textColor};
border-radius: ${styles.borderRadius || '8px'}; border-radius: ${styles.borderRadius};
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
font-size: ${styles.fontSize};
text-align: ${styles.textAlign};
transition: all 0.3s ease;
position: relative;
overflow: hidden;
"> ">
<div class="banner-content" style="flex: 1; padding: 0 0 0 20px;"> <div class="banner-content" style="
flex: 1;
padding: 0 20px;
color: ${styles.textColor};
text-align: ${styles.textAlign};
font-size: ${styles.fontSize};
">
${textElement} ${textElement}
${template.buttonText ? `
<div style="margin-top: 15px;">
<a href="${bannerLink || '#'}"
target="_blank"
class="banner-button"
style="
display: inline-block;
padding: 8px 20px;
background-color: ${styles.buttonBackground};
color: ${styles.buttonTextColor};
text-decoration: none;
border-radius: 4px;
border: ${styles.buttonBorder};
font-size: ${parseInt(styles.fontSize) - 2}px;
transition: all 0.3s ease;
"
onmouseover="this.style.opacity='0.9'; this.style.transform='translateY(-2px)';"
onmouseout="this.style.opacity='1'; this.style.transform='translateY(0)';">
${template.buttonText}
</a>
</div>` : ''}
</div> </div>
${imgContainer} ${imgContainer}
</div>`; </div>`;
@@ -2938,23 +2956,19 @@ function updateBannerPreview() {
console.error('Error updating banner preview:', error); console.error('Error updating banner preview:', error);
} }
// Apply template styles to the banner preview // Apply template styles to the banner preview container
if (template && bannerPreview) { if (template && bannerPreview) {
Object.assign(bannerPreview.style, { Object.assign(bannerPreview.style, {
backgroundColor: template.bgColor || '#f8f9fa', backgroundColor: 'transparent',
color: template.textColor || '#212529', padding: '0',
textAlign: template.textAlign || 'left', margin: '20px 0',
fontSize: `${template.fontSize || 16}px`, boxShadow: 'none',
padding: `${template.padding || 20}px`,
margin: `${template.margin || 20}px 0`,
borderRadius: `${template.borderRadius || 8}px`,
boxShadow: '0 2px 4px rgba(0,0,0,0.1)',
display: 'block', display: 'block',
overflow: 'hidden',
width: '100%', width: '100%',
maxWidth: '1200px', maxWidth: '1200px',
transition: 'all 0.3s ease', transition: 'all 0.3s ease',
position: 'relative' position: 'relative',
overflow: 'visible'
}); });
} }
@@ -3395,16 +3409,10 @@ document.addEventListener('DOMContentLoaded', () => {
// Create preview container with aspect ratio 16:9 // Create preview container with aspect ratio 16:9
templateElement.innerHTML = ` templateElement.innerHTML = `
<div class="relative pt-[56.25%] bg-white"> <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="absolute inset-0 flex items-center justify-center p-4 text-center" style="background: ${template.background || template.backgroundColor || '#ffffff'}; color: ${template.textColor || '#000000'}; text-align: ${template.textAlign || 'center'}; padding: ${template.padding || 20}px; border-radius: ${template.borderRadius || 0}px;">
<div class="w-full h-full relative"> <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="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}"> <div class="text-center px-4 py-2 rounded-md" style="background: ${template.buttonBackground || '#4a6cf7'}; color: ${template.buttonTextColor || '#ffffff'}; border: ${template.buttonBorder || 'none'}; padding: 8px 16px; border-radius: 4px; font-weight: 500;">
${template.name} ${template.name}
</div> </div>
</div> </div>
@@ -3552,33 +3560,81 @@ function applyTemplate(templateId) {
const template = templateConfigs[templateId]; const template = templateConfigs[templateId];
if (!template) return; if (!template) return;
console.log('Applying template:', templateId, template);
// Store the selected template // Store the selected template
currentTemplate = templateId; currentTemplate = templateId;
// Update form fields with template styles // Update form fields with template styles
if (template.containerStyle) { const bannerBgColor = document.getElementById('bannerBgColor');
const bannerContainer = document.getElementById('bannerPreview'); const bannerTextColor = document.getElementById('bannerTextColor');
if (bannerContainer) { const bannerTextAlign = document.getElementById('bannerTextAlign');
bannerContainer.style = template.containerStyle; const bannerFontSize = document.getElementById('bannerFontSize');
} const bannerPadding = document.getElementById('bannerPadding');
const bannerMargin = document.getElementById('bannerMargin');
const bannerBorderRadius = document.getElementById('bannerBorderRadius');
const bannerButtonBackground = document.getElementById('bannerButtonBackground');
const bannerButtonTextColor = document.getElementById('bannerButtonTextColor');
const bannerButtonBorder = document.getElementById('bannerButtonBorder');
// Update background color (use background if available, otherwise use backgroundColor)
if (bannerBgColor) {
const bgColor = template.background || template.backgroundColor || '#ffffff';
bannerBgColor.value = bgColor;
// Update color picker if it exists
const bannerBgColorPicker = document.getElementById('bannerBgColorPicker');
if (bannerBgColorPicker) bannerBgColorPicker.value = bgColor;
} }
// Update text styles if they exist in the template // Update text color
if (template.textStyle) { if (bannerTextColor && template.textColor) {
const bannerText = document.getElementById('bannerText'); bannerTextColor.value = template.textColor;
if (bannerText) { // Update color picker if it exists
bannerText.style = template.textStyle; const bannerTextColorPicker = document.getElementById('bannerTextColorPicker');
} if (bannerTextColorPicker) bannerTextColorPicker.value = template.textColor;
} }
// Update button styles if they exist in the template // Update text alignment
if (template.buttonStyle) { if (bannerTextAlign && template.textAlign) {
const bannerButton = document.querySelector('.banner-button'); bannerTextAlign.value = template.textAlign;
if (bannerButton) {
bannerButton.style = template.buttonStyle;
}
} }
// Update font size
if (bannerFontSize && template.fontSize) {
bannerFontSize.value = template.fontSize;
}
// Update padding
if (bannerPadding && template.padding) {
bannerPadding.value = template.padding;
}
// Update margin
if (bannerMargin && template.margin) {
bannerMargin.value = template.margin;
}
// Update border radius
if (bannerBorderRadius && template.borderRadius) {
bannerBorderRadius.value = template.borderRadius;
}
// Update button styles
if (bannerButtonBackground && template.buttonBackground) {
bannerButtonBackground.value = template.buttonBackground;
}
if (bannerButtonTextColor && template.buttonTextColor) {
bannerButtonTextColor.value = template.buttonTextColor;
}
if (bannerButtonBorder && template.buttonBorder) {
bannerButtonBorder.value = template.buttonBorder;
}
// Update color previews
updateColorPreviews();
// Update the banner preview with the new template // Update the banner preview with the new template
updateBannerPreview(); updateBannerPreview();