From 56c8ca1f40ee32765f89d6ae97a6b021cc8ce747 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tom=C3=A1=C5=A1=20Dvo=C5=99=C3=A1k?=
 <150935816+Dvorinka@users.noreply.github.com>
Date: Mon, 26 May 2025 12:56:19 +0200
Subject: [PATCH] Add files via upload

---
 admin-dashboard.html | 123 +++++++++++++++++++++++++++++++++++++++----
 banner.go            |   8 ++-
 index.html           |  56 ++++++++++++++++----
 3 files changed, 163 insertions(+), 24 deletions(-)

diff --git a/admin-dashboard.html b/admin-dashboard.html
index 86f5b8d..59b53d7 100644
--- a/admin-dashboard.html
+++ b/admin-dashboard.html
@@ -100,10 +100,73 @@
             background-color: #f0f0f0;
         }
         .banner-preview {
-            margin-top: 20px;
-            padding: 15px;
+            margin: 20px auto;
+            padding: 20px;
             border: 1px dashed #ccc;
+            border-radius: 8px;
+            max-width: 800px;
+            min-height: 100px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            position: relative;
+            overflow: hidden;
+        }
+        .banner-preview img {
+            max-width: 100%;
+            max-height: 200px;
+            object-fit: contain;
+        }
+        .banner-preview.with-image {
+            min-height: 200px;
+        }
+        .banner-preview-content {
+            position: relative;
+            z-index: 2;
+            text-align: center;
+            padding: 20px;
+        }
+        .banner-preview-bg {
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background-size: cover;
+            background-position: center;
+            opacity: 0.7;
+            z-index: 1;
+        }
+        .banner-preview-text {
+            position: relative;
+            z-index: 2;
+            color: inherit;
+        }
+        .color-picker-container {
+            display: flex;
+            align-items: center;
+            gap: 10px;
+        }
+        .color-picker {
+            width: 40px;
+            height: 30px;
+            padding: 0;
+            border: 1px solid #ddd;
             border-radius: 4px;
+            cursor: pointer;
+        }
+        .image-upload-container {
+            margin: 15px 0;
+            padding: 15px;
+            border: 1px dashed #ddd;
+            border-radius: 4px;
+            text-align: center;
+        }
+        .image-preview {
+            max-width: 200px;
+            max-height: 150px;
+            margin: 10px auto;
+            display: block;
         }
         .card p {
             color: #666;
@@ -120,11 +183,29 @@
     <div class="container">
         <h2>Vítejte v administraci</h2>
         
-        <div class="card" style="margin-bottom: 2rem;">
+        <div class="card" style="margin: 2rem auto; max-width: 1000px;">
             <h3>Správa banneru</h3>
+            
             <div class="form-group">
                 <label for="bannerText">Text banneru</label>
-                <textarea id="bannerText" placeholder="Zadejte text banneru"></textarea>
+                <textarea id="bannerText" placeholder="Zadejte text banneru" style="min-height: 100px;"></textarea>
+            </div>
+            
+            <div class="form-group">
+                <label for="bannerLink">Odkaz (volitelný)</label>
+                <input type="text" id="bannerLink" placeholder="https://example.com">
+            </div>
+            
+            <div class="image-upload-container">
+                <label for="bannerImage">Nahrát obrázek (volitelné)</label>
+                <input type="file" id="bannerImage" accept="image/*" style="display: none;">
+                <div>
+                    <button type="button" id="uploadImageBtn" class="login-button" style="margin: 10px 0;">Vybrat obrázek</button>
+                    <button type="button" id="removeImageBtn" class="login-button" style="margin: 10px 0; background-color: #dc3545; display: none;">Odstranit obrázek</button>
+                </div>
+                <div id="imagePreviewContainer" style="display: none;">
+                    <img id="imagePreview" class="image-preview" src="" alt="Náhled obrázku">
+                </div>
             </div>
             
             <h4>Styl banneru</h4>
@@ -137,16 +218,18 @@
             
             <div class="form-group">
                 <label for="bannerBgColor">Barva pozadí</label>
-                <div style="display: flex; align-items: center;">
-                    <input type="text" id="bannerBgColor" value="#f8d7da">
+                <div class="color-picker-container">
+                    <input type="color" id="bannerBgColorPicker" class="color-picker" value="#f8d7da">
+                    <input type="text" id="bannerBgColor" value="#f8d7da" style="flex: 1;">
                     <div class="color-preview" id="bgColorPreview" style="background-color: #f8d7da;"></div>
                 </div>
             </div>
             
             <div class="form-group">
                 <label for="bannerTextColor">Barva textu</label>
-                <div style="display: flex; align-items: center;">
-                    <input type="text" id="bannerTextColor" value="#721c24">
+                <div class="color-picker-container">
+                    <input type="color" id="bannerTextColorPicker" class="color-picker" value="#721c24">
+                    <input type="text" id="bannerTextColor" value="#721c24" style="flex: 1;">
                     <div class="color-preview" id="textColorPreview" style="background-color: #721c24;"></div>
                 </div>
             </div>
@@ -167,7 +250,22 @@
             
             <div class="form-group">
                 <label for="bannerPadding">Odsazení (px)</label>
-                <input type="text" id="bannerPadding" value="10">
+                <input type="number" id="bannerPadding" value="20" min="0">
+            </div>
+            
+            <div class="form-group">
+                <label for="bannerMargin">Okraje (px)</label>
+                <input type="number" id="bannerMargin" value="20" min="0">
+            </div>
+            
+            <div class="form-group">
+                <label for="bannerBorderRadius">Zaoblení rohů (px)</label>
+                <input type="number" id="bannerBorderRadius" value="8" min="0">
+            </div>
+            
+            <div class="form-group">
+                <label for="bannerFontSize">Velikost písma (px)</label>
+                <input type="number" id="bannerFontSize" value="18" min="10" max="72">
             </div>
             
             <h4>Předvolby stylů</h4>
@@ -178,8 +276,11 @@
                 <div class="style-preset" data-preset="error">Chyba</div>
             </div>
             
-            <div class="banner-preview" id="bannerPreview" style="margin-top: 20px; padding: 15px; display: none;">
-                Náhled banneru se zde zobrazí
+            <div class="banner-preview" id="bannerPreview" style="display: none;">
+                <div class="banner-preview-bg"></div>
+                <div class="banner-preview-content">
+                    <div class="banner-preview-text">Náhled banneru se zde zobrazí</div>
+                </div>
             </div>
             
             <button id="saveBannerBtn" style="margin-top: 1rem; padding: 0.5rem 1rem; background-color: #4CAF50; color: white; border: none; border-radius: 4px; cursor: pointer;">
diff --git a/banner.go b/banner.go
index 9dbc6f3..a9cee11 100644
--- a/banner.go
+++ b/banner.go
@@ -14,12 +14,16 @@ type BannerStyle struct {
 	FontSize        string `json:"fontSize"`
 	TextAlign       string `json:"textAlign"`
 	Padding         string `json:"padding"`
+	Margin          string `json:"margin"`
+	BorderRadius    string `json:"borderRadius"`
 	IsVisible       bool   `json:"isVisible"`
 }
 
 type BannerContent struct {
-	Text  string      `json:"text"`
-	Style BannerStyle `json:"style"`
+	Text   string     `json:"text"`
+	Image  string     `json:"image,omitempty"`
+	Link   string     `json:"link,omitempty"`
+	Style  BannerStyle `json:"style"`
 }
 
 var (
diff --git a/index.html b/index.html
index ac06bfb..55f821c 100644
--- a/index.html
+++ b/index.html
@@ -24,23 +24,46 @@
                 
                 const banner = await response.json();
                 
-                if (!banner.style.isVisible) return;
+                if (!banner.style || banner.style.isVisible === false) {
+                    return;
+                }
                 
                 const bannerContainer = document.getElementById('bannerContainer');
                 const bannerContent = document.getElementById('bannerContent');
                 
+                if (!bannerContainer || !bannerContent) return;
+                
                 // Apply styles
-                Object.assign(bannerContainer.style, {
-                    display: 'block',
+                Object.assign(bannerContent.style, {
                     backgroundColor: banner.style.backgroundColor || '#f8d7da',
                     color: banner.style.textColor || '#721c24',
                     textAlign: banner.style.textAlign || 'center',
-                    fontSize: banner.style.fontSize || '16px',
-                    padding: banner.style.padding || '10px'
+                    fontSize: banner.style.fontSize || '18px',
+                    padding: banner.style.padding || '20px',
+                    margin: banner.style.margin ? `${banner.style.margin}px 0` : '20px 0',
+                    borderRadius: banner.style.borderRadius || '8px',
+                    boxShadow: '0 2px 4px rgba(0,0,0,0.1)',
+                    display: 'block'
                 });
                 
-                // Set content
-                bannerContent.innerHTML = banner.text || '';
+                // Handle image
+                let content = banner.text || '';
+                if (banner.image) {
+                    content = `
+                        <div style="margin-bottom: 15px;">
+                            <img src="${banner.image}" style="max-width: 100%; max-height: 200px; border-radius: 4px;">
+                        </div>
+                        ${content}
+                    `;
+                }
+                
+                // Wrap in link if provided
+                if (banner.link) {
+                    content = `<a href="${banner.link}" style="color: inherit; text-decoration: none; display: block;">${content}</a>`;
+                }
+                
+                bannerContent.innerHTML = content;
+                bannerContainer.style.display = 'block';
                 
             } catch (error) {
                 console.error('Error loading banner:', error);
@@ -48,7 +71,16 @@
         }
         
         // Load banner when page loads
-        document.addEventListener('DOMContentLoaded', loadBanner);
+        document.addEventListener('DOMContentLoaded', () => {
+            loadBanner();
+            
+            // Move banner to the correct position after load
+            const bannerContainer = document.getElementById('bannerContainer');
+            const main = document.querySelector('main');
+            if (bannerContainer && main) {
+                main.insertBefore(bannerContainer, main.firstChild);
+            }
+        });
         
         tailwind.config = {
           theme: {
@@ -65,8 +97,8 @@
 </head>
 <body class="bg-gray-100 min-h-screen">
     <!-- Banner Container -->
-    <div id="bannerContainer" style="display: none; width: 100%; transition: all 0.3s ease;">
-        <div id="bannerContent" style="padding: 10px; text-align: center;"></div>
+    <div id="bannerContainer" style="display: none; width: 100%; transition: all 0.3s ease; margin: 0 auto; max-width: 1200px; padding: 0 1rem;">
+        <div id="bannerContent" style="padding: 20px; text-align: center; border-radius: 8px; margin: 20px 0;"></div>
     </div>
     
     <nav class="bg-brand-blue text-white shadow-lg">
@@ -125,7 +157,9 @@
         </div>
       </div>
 
-    <main class="container mx-auto px-4 py-8">
+    <main class="container mx-auto px-4 py-4">
+        <!-- Banner will be inserted here by JavaScript -->
+        
         <!-- Search -->
         <div class="mb-8 max-w-xl mx-auto">
             <div class="relative">