Add files via upload

admin-dashboard.html

@@ -1289,35 +1289,82 @@ function applyPreset(preset) {
 }
 
 // Event Listeners
-bannerBgColor.addEventListener('input', () => {
+// Debounced update for text inputs
+const debouncedUpdatePreview = debounce(() => {
     updateColorPreviews();
     updateBannerPreview();
+}, 300);
+
+bannerBgColor.addEventListener('input', () => {
+    // Update color preview immediately
+    const bgColorPreview = document.getElementById('bgColorPreview');
+    if (bgColorPreview) {
+        bgColorPreview.style.backgroundColor = bannerBgColor.value;
+    }
+    // Debounce the full preview update
+    debouncedUpdatePreview();
 });
 
 bannerTextColor.addEventListener('input', () => {
-    updateColorPreviews();
-    updateBannerPreview();
+    // Update color preview immediately
+    const textColorPreview = document.getElementById('textColorPreview');
+    if (textColorPreview) {
+        textColorPreview.style.backgroundColor = bannerTextColor.value;
+    }
+    // Debounce the full preview update
+    debouncedUpdatePreview();
 });
 
 // Connect color pickers to input fields
 const bannerBgColorPicker = document.getElementById('bannerBgColorPicker');
 const bannerTextColorPicker = document.getElementById('bannerTextColorPicker');
 
+// Debounce function to improve performance
+function debounce(func, wait) {
+    let timeout;
+    return function(...args) {
+        const context = this;
+        clearTimeout(timeout);
+        timeout = setTimeout(() => func.apply(context, args), wait);
+    };
+}
+
+// Update only the color preview during dragging (lightweight)
 bannerBgColorPicker.addEventListener('input', () => {
     bannerBgColor.value = bannerBgColorPicker.value;
+    // Only update the color preview (lightweight operation)
+    const bgColorPreview = document.getElementById('bgColorPreview');
+    if (bgColorPreview) {
+        bgColorPreview.style.backgroundColor = bannerBgColorPicker.value;
+    }
+});
+
+// Update the full preview only when the user has finished selecting a color
+bannerBgColorPicker.addEventListener('change', () => {
     updateColorPreviews();
     updateBannerPreview();
 });
 
+// Same for text color picker
 bannerTextColorPicker.addEventListener('input', () => {
     bannerTextColor.value = bannerTextColorPicker.value;
+    // Only update the color preview (lightweight operation)
+    const textColorPreview = document.getElementById('textColorPreview');
+    if (textColorPreview) {
+        textColorPreview.style.backgroundColor = bannerTextColorPicker.value;
+    }
+});
+
+// Update the full preview only when the user has finished selecting a color
+bannerTextColorPicker.addEventListener('change', () => {
     updateColorPreviews();
     updateBannerPreview();
 });
 
+// For other form controls, use debounced updates on input
 [bannerText, bannerTextAlign, bannerFontSize, bannerPadding, bannerMargin, bannerBorderRadius, bannerVisible].forEach(el => {
     el.addEventListener('change', updateBannerPreview);
-    el.addEventListener('input', updateBannerPreview);
+    el.addEventListener('input', debouncedUpdatePreview);
 });
 
 stylePresets.forEach(preset => {

index.html

@@ -33,15 +33,18 @@
                 
                 if (!bannerContainer || !bannerContent) return;
                 
-                // Apply styles
+                // Apply styles to container
+                bannerContainer.style.borderRadius = (banner.style.borderRadius ? `${banner.style.borderRadius}px` : '8px');
+                
+                // Apply styles to content
                 Object.assign(bannerContent.style, {
                     backgroundColor: banner.style.backgroundColor || '#f8d7da',
                     color: banner.style.textColor || '#721c24',
                     textAlign: banner.style.textAlign || 'center',
-                    fontSize: banner.style.fontSize || '18px',
-                    padding: banner.style.padding || '20px',
+                    fontSize: banner.style.fontSize ? `${banner.style.fontSize}px` : '18px',
+                    padding: banner.style.padding ? `${banner.style.padding}px` : '20px',
                     margin: banner.style.margin ? `${banner.style.margin}px 0` : '20px 0',
-                    borderRadius: banner.style.borderRadius || '8px',
+                    borderRadius: banner.style.borderRadius ? `${banner.style.borderRadius}px` : '8px',
                     boxShadow: '0 2px 4px rgba(0,0,0,0.1)',
                     display: 'block'
                 });
@@ -49,9 +52,11 @@
                 // Handle image
                 let content = banner.text || '';
                 if (banner.image) {
+                    // Apply the same border radius to the image as to the container
+                    const imageRadius = Math.max(parseInt(banner.style.borderRadius || '4'), 0);
                     content = `
-                        <div style="margin-bottom: 15px;">
-                            <img src="${banner.image}" style="max-width: 100%; max-height: 200px; border-radius: 4px;">
+                        <div style="margin-bottom: 15px; text-align: ${banner.style.textAlign || 'center'};">
+                            <img src="${banner.image}" style="max-width: 100%; max-height: 200px; border-radius: ${imageRadius}px;">
                         </div>
                         ${content}
                     `;