diff --git a/admin-dashboard.html b/admin-dashboard.html
index 5e614fe..0f1cf42 100644
--- a/admin-dashboard.html
+++ b/admin-dashboard.html
@@ -884,29 +884,35 @@
.upload-box {
border: 2px dashed #dee2e6;
border-radius: 8px;
- background-color: #f8f9fa;
+ padding: 2rem;
+ text-align: center;
+ cursor: pointer;
transition: all 0.3s ease;
- overflow: hidden;
+ background-color: #f8f9fa;
min-height: 200px;
display: flex;
align-items: center;
justify-content: center;
+ position: relative;
}
-
- .upload-box.dragover {
- border-color: #0d6efd;
- background-color: rgba(13, 110, 253, 0.05);
+
+ .upload-box:hover {
+ border-color: #adb5bd;
+ background-color: #f1f3f5;
}
-
+
+ .upload-box.dragover,
+ .upload-box.border-primary {
+ border-color: #4a6cf7 !important;
+ background-color: #f0f4ff;
+ }
+
.upload-prompt {
- padding: 2rem;
- max-width: 320px;
- margin: 0 auto;
+ pointer-events: none;
+ z-index: 1;
}
-
+
.upload-icon {
- color: #adb5bd;
- transition: color 0.2s;
}
.upload-box:hover .upload-icon {
@@ -4102,7 +4108,96 @@ function applyTemplate(templateId) {
// Load apps when the page loads
document.addEventListener('DOMContentLoaded', function() {
loadApps();
+
+ // Initialize banner image upload functionality
+ const dragDropArea = document.getElementById('dragDropArea');
+ const uploadImageBtn = document.getElementById('uploadImageBtn');
+ const bannerImageInput = document.getElementById('bannerImage');
+
+ if (dragDropArea && uploadImageBtn && bannerImageInput) {
+ // Handle file selection via button
+ uploadImageBtn.addEventListener('click', () => {
+ bannerImageInput.click();
+ });
+
+ // Handle file input change
+ bannerImageInput.addEventListener('change', (e) => {
+ if (e.target.files && e.target.files[0]) {
+ handleFileSelect(e.target.files[0]);
+ }
+ });
+
+ // Handle drag and drop
+ ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
+ dragDropArea.addEventListener(eventName, preventDefaults, false);
+ });
+
+ ['dragenter', 'dragover'].forEach(eventName => {
+ dragDropArea.addEventListener(eventName, () => {
+ dragDropArea.classList.add('border-primary', 'bg-blue-50');
+ });
+ });
+
+ ['dragleave', 'drop'].forEach(eventName => {
+ dragDropArea.addEventListener(eventName, () => {
+ dragDropArea.classList.remove('border-primary', 'bg-blue-50');
+ });
+ });
+
+ // Handle file drop
+ dragDropArea.addEventListener('drop', (e) => {
+ const dt = e.dataTransfer;
+ const files = dt.files;
+ if (files.length > 0) {
+ handleFileSelect(files[0]);
+ }
+ });
+ }
});
+
+// Handle file selection
+function handleFileSelect(file) {
+ if (!file) return;
+
+ // Check file type
+ const validTypes = ['image/jpeg', 'image/png', 'image/gif'];
+ if (!validTypes.includes(file.type)) {
+ showNotification('Nepodporovaný formát souboru. Povolené formáty: JPG, PNG, GIF', 'error');
+ return;
+ }
+
+ // Check file size (5MB max)
+ if (file.size > 5 * 1024 * 1024) {
+ showNotification('Soubor je příliš velký. Maximální velikost je 5MB.', 'error');
+ return;
+ }
+
+ // Process the file
+ const reader = new FileReader();
+ reader.onload = function(e) {
+ try {
+ currentImage = e.target.result;
+ updateBannerPreview();
+ showNotification('Obrázek byl úspěšně nahrán', 'success');
+ } catch (error) {
+ console.error('Error processing file:', error);
+ showNotification('Chyba při zpracování souboru', 'error');
+ }
+ };
+
+ reader.onerror = function() {
+ console.error('Error reading file');
+ showNotification('Chyba při čtení souboru', 'error');
+ };
+
+ reader.readAsDataURL(file);
+}
+
+// Prevent default drag behaviors
+function preventDefaults(e) {
+ e.preventDefault();
+ e.stopPropagation();
+}