Merge pull request 'v2.1 - The clearer, the faster' (#21) from Beta-2.1 into main

Reviewed-on: #21

Dockerfile

@@ -1,18 +1,10 @@
-FROM python:3.13-alpine AS builder
+FROM python:3.11-slim
 
 WORKDIR /app
 
-RUN apk add --no-cache gcc musl-dev jpeg-dev zlib-dev
-
 COPY requirements.txt .
-RUN pip wheel --no-cache-dir --wheel-dir=/wheels -r requirements.txt
 
-FROM python:3.13-alpine
+RUN pip install --no-cache-dir -r requirements.txt
-
-WORKDIR /app
-
-COPY --from=builder /wheels /wheels
-RUN pip install --no-cache-dir --find-links=/wheels /wheels/* && rm -rf /wheels
 
 COPY build.py gallery.py VERSION /app/
 COPY ./src/ ./src/
@@ -20,4 +12,7 @@ COPY ./config /app/default
 COPY ./docker/.sh/entrypoint.sh /app/entrypoint.sh
 RUN chmod +x /app/entrypoint.sh
 
+RUN printf '#!/bin/sh\n/app/entrypoint.sh build\n' > /usr/local/bin/build && chmod +x /usr/local/bin/build && \
+    printf '#!/bin/sh\n/app/entrypoint.sh gallery\n' > /usr/local/bin/gallery && chmod +x /usr/local/bin/gallery
+
 ENTRYPOINT ["/app/entrypoint.sh"]

README.MD

@@ -12,8 +12,6 @@
 
 Lumeex is a static site generator designed to create minimalist photo galleries that highlight your artworks over the author. It empowers users to organize and explore images using tags, with each page load presenting photos in a random order to encourage discovery of new content.
 
-👉 __Check the online version : [Lumeex-web](https://lumeex.djeex.fr)__
-
 The project includes two thoughtfully designed themes—one modern, one minimalistic—both crafted to keep the spotlight on your photos:
 
 - **Modern** — [View Demo](https://modern.djeex.fr)  

VERSION

@@ -1 +1 @@
-2.1.2
+2.1.0

config/themes/modern/theme.css

@@ -50,7 +50,7 @@ img, tag {
 
     .hero-background {
         max-width: 90%;
-        margin: 0 auto;
+        margin: auto;
     }
 
     .back-button {

config/themes/typewriter/theme.yaml

@@ -6,12 +6,14 @@ colors:
   primary_dark: '#005384'
   secondary: '#00B0F0'
   text_dark: '#616161'
+
 favicon:
   path: favicon.png
+  
 fonts:
   primary:
-    name: trixie
+    name: trixie.woff
     fallback: sans-serif
   secondary:
-    name: trixie
+    name: trixie.woff
     fallback: serif

docker/.sh/entrypoint.sh

@@ -1,4 +1,4 @@
-#!/bin/sh
+#!/bin/bash
 set -e
 
 CYAN="\033[1;36m"
@@ -6,31 +6,28 @@ NC="\033[0m"
 
 copy_default_config() {
   echo "[~] Checking configuration directory..."
+  if [ ! -d "/app/config" ]; then
     mkdir -p /app/config
+  fi
 
-  echo "[~] Checking if default config files/folders need to be copied..."
+  echo "[~] Checking if default config files need to be copied..."
   files_copied=false
 
-  for src in $(find /app/default -mindepth 1); do
+  for file in /app/default/*; do
-    relpath="${src#/app/default/}"
+    filename=$(basename "$file")
-    target="/app/config/$relpath"
+    target="/app/config/$filename"
+
     if [ ! -e "$target" ]; then
-      echo "[→] Copying: $relpath"
+      echo "[→] Copying default config file: $filename"
-      if [ -d "$src" ]; then
+      cp -r "$file" "$target"
-        mkdir -p "$target"
-        cp -r "$src/" "$target/"
-      else
-        mkdir -p "$(dirname "$target")"
-        cp "$src" "$target"
-      fi
       files_copied=true
     fi
   done
 
   if [ "$files_copied" = true ]; then
-    echo "[✓] Default configuration files/folders copied successfully."
+    echo "[✓] Default configuration files copied successfully."
   else
-    echo "[✓] No default files/folders needed to be copied."
+    echo "[✓] No default files needed to be copied."
   fi
 }
 

src/public/js/lazy.js

@@ -32,14 +32,6 @@ window.addEventListener("DOMContentLoaded", () => {
       img.classList.add("loaded");
     };
 
-    // Chrome HDR artefacting fix
-    const clearWillChange = (e) => {
-      if (e.propertyName !== "transform") return;
-      img.style.willChange = "auto";
-      img.removeEventListener("transitionend", clearWillChange);
-    };
-    img.addEventListener("transitionend", clearWillChange);
-
     if (img.complete && img.naturalHeight !== 0) {
       onLoad(); // already loaded
     } else {

src/py/builder/image_processor.py

@@ -11,7 +11,6 @@ def convert_and_resize_image(input_path, output_path, resize=True, max_width=114
             return
 
         img = Image.open(input_path)
-        icc_profile = img.info.get("icc_profile")
         if img.mode != "RGB":
             img = img.convert("RGB")
 
@@ -28,10 +27,7 @@ def convert_and_resize_image(input_path, output_path, resize=True, max_width=114
         if fmt == "JPEG":
             output_path = output_path.with_suffix(".jpg")
 
-        save_kwargs = {"quality": 90 if fmt == "JPEG" else 100}
+        img.save(output_path, fmt, quality=90 if fmt == "JPEG" else 100)
-        if icc_profile:
-            save_kwargs["icc_profile"] = icc_profile
-        img.save(output_path, fmt, **save_kwargs)
         logging.info(f"[✓] Processed image: {input_path} → {output_path}")
 
     except Exception as e:

src/py/webui/webui.py

@@ -415,8 +415,7 @@ def upload_font():
     fonts_dir = Path(__file__).resolve().parents[3] / "config" / "themes" / theme_name / "fonts"
     fonts_dir.mkdir(parents=True, exist_ok=True)
     file.save(fonts_dir / file.filename)
-    font_basename = Path(file.filename).stem
+    return jsonify({"status": "ok", "filename": file.filename})
-    return jsonify({"status": "ok", "filename": font_basename})
 
 @app.route("/api/font/remove", methods=["POST"])
 def remove_font():

src/webui/js/gallery-editor.js

@@ -1,29 +1,19 @@
+// --- Arrays to store gallery and hero images ---
 let galleryImages = [];
 let heroImages = [];
-let allTags = [];
+let allTags = []; // global tag list
 let showOnlyUntagged = false;
 
-// --- Fade-in helper ---
-function applyFadeInImages(container) {
-  container.querySelectorAll("img.fade-in-img").forEach(img => {
-    const onLoad = () => img.classList.add("loaded");
-    if (img.complete && img.naturalHeight !== 0) onLoad();
-    else {
-      img.addEventListener("load", onLoad, { once: true });
-      img.addEventListener("error", () => {
-        console.warn("Image failed to load:", img.dataset?.src || img.src);
-      });
-    }
-  });
-}
-
 // --- Load images from server on page load ---
 async function loadData() {
   try {
-    galleryImages = await (await fetch('/api/gallery')).json();
+    const galleryRes = await fetch('/api/gallery');
+    galleryImages = await galleryRes.json();
     updateAllTags();
     renderGallery();
-    heroImages = await (await fetch('/api/hero')).json();
+
+    const heroRes = await fetch('/api/hero');
+    heroImages = await heroRes.json();
     renderHero();
   } catch(err) {
     console.error(err);
@@ -35,38 +25,25 @@ async function loadData() {
 function updateAllTags() {
   allTags = [];
   galleryImages.forEach(img => {
-    (img.tags || []).forEach(t => {
+    if (img.tags) img.tags.forEach(t => {
       if (!allTags.includes(t)) allTags.push(t);
     });
   });
 }
 
-// --- Helper: update count and button visibility ---
-function updateCountAndButtons(prefix, count) {
-  const countTop = document.getElementById(`${prefix}-count`);
-  const countBottom = document.getElementById(`${prefix}-count-bottom`);
-  if (countTop) countTop.innerHTML = `<p>${count} photos</p>`;
-  if (countBottom) countBottom.innerHTML = `<p>${count} photos</p>`;
-
-  const removeAllBtn = document.getElementById(`remove-all-${prefix}`);
-  const removeAllBtnBottom = document.getElementById(`remove-all-${prefix}-bottom`);
-  if (removeAllBtn) removeAllBtn.style.display = count > 0 ? 'inline-block' : 'none';
-  if (removeAllBtnBottom) removeAllBtnBottom.style.display = count > 0 ? 'inline-block' : 'none';
-
-  const bottomUpload = document.getElementById(`bottom-${prefix}-upload`);
-  if (bottomUpload) bottomUpload.style.display = count > 0 ? 'flex' : 'none';
-}
-
 // --- Render gallery images with tags and delete buttons ---
 function renderGallery() {
   const container = document.getElementById('gallery');
   container.innerHTML = '';
-  let imagesToShow = showOnlyUntagged
+
-    ? galleryImages.filter(img => !img.tags || img.tags.length === 0)
+  // Filter images if toggle is on
-    : galleryImages;
+  let imagesToShow = galleryImages;
+  if (showOnlyUntagged) {
+    imagesToShow = galleryImages.filter(img => !img.tags || img.tags.length === 0);
+  }
 
   imagesToShow.forEach((img) => {
-    const i = galleryImages.indexOf(img);
+    const i = galleryImages.indexOf(img); // Use real index for tag/delete actions
     const div = document.createElement('div');
     div.className = 'photo flex-item flex-column';
     div.innerHTML = `
@@ -82,17 +59,62 @@ function renderGallery() {
       </div>
     `;
     container.appendChild(div);
+
     renderTags(i, img.tags || []);
   });
 
-  updateCountAndButtons('gallery', imagesToShow.length);
+  // Update gallery count (top)
-  applyFadeInImages(container);
+  const galleryCount = document.getElementById('gallery-count');
+  if (galleryCount) {
+    galleryCount.innerHTML = `<p>${imagesToShow.length} photos</p>`;
+  }
+
+  // Update gallery count (bottom)
+  const galleryCountBottom = document.getElementById('gallery-count-bottom');
+  if (galleryCountBottom) {
+    galleryCountBottom.innerHTML = `<p>${imagesToShow.length} photos</p>`;
+  }
+
+  // Show/hide Remove All button (top)
+  const removeAllBtn = document.getElementById('remove-all-gallery');
+  if (removeAllBtn) {
+    removeAllBtn.style.display = imagesToShow.length > 0 ? 'inline-block' : 'none';
+  }
+
+  // Show/hide bottom upload row
+  const bottomGalleryUpload = document.getElementById('bottom-gallery-upload');
+  if (bottomGalleryUpload) {
+    bottomGalleryUpload.style.display = imagesToShow.length > 0 ? 'flex' : 'none';
+  }
+
+  // Show/hide Remove All button (bottom)
+  const removeAllBtnBottom = document.getElementById('remove-all-gallery-bottom');
+  if (removeAllBtnBottom) {
+    removeAllBtnBottom.style.display = imagesToShow.length > 0 ? 'inline-block' : 'none';
+  }
+
+  // Fade-in effect for loaded images
+  const fadeImages = document.querySelectorAll("img.fade-in-img");
+  fadeImages.forEach(img => {
+    const onLoad = () => {
+      img.classList.add("loaded");
+    };
+    if (img.complete && img.naturalHeight !== 0) {
+      onLoad();
+    } else {
+      img.addEventListener("load", onLoad, { once: true });
+      img.addEventListener("error", () => {
+        console.warn("Image failed to load:", img.dataset.src || img.src);
+      });
+    }
+  });
 }
 
 // --- Render tags for a single image ---
 function renderTags(imgIndex, tags) {
   const tagsDisplay = document.querySelector(`.tags-display[data-index="${imgIndex}"]`);
   const inputContainer = document.querySelector(`.tag-input[data-index="${imgIndex}"]`);
+
   tagsDisplay.innerHTML = '';
   inputContainer.innerHTML = '';
 
@@ -100,6 +122,7 @@ function renderTags(imgIndex, tags) {
     const span = document.createElement('span');
     span.className = 'tag';
     span.textContent = tag;
+
     const remove = document.createElement('span');
     remove.className = 'remove-tag';
     remove.textContent = '×';
@@ -108,6 +131,7 @@ function renderTags(imgIndex, tags) {
       updateTags(imgIndex, tags);
       renderTags(imgIndex, tags);
     };
+
     span.appendChild(remove);
     tagsDisplay.appendChild(span);
   });
@@ -117,10 +141,11 @@ function renderTags(imgIndex, tags) {
   input.placeholder = 'Add tag...';
   inputContainer.appendChild(input);
 
+  // --- Validate button ---
   const validateBtn = document.createElement('button');
   validateBtn.textContent = '✔️';
   validateBtn.className = 'validate-tag-btn';
-  validateBtn.style.display = 'none';
+  validateBtn.style.display = 'none'; // hidden by default
   validateBtn.style.marginLeft = '4px';
   inputContainer.appendChild(validateBtn);
 
@@ -140,20 +165,30 @@ function renderTags(imgIndex, tags) {
 
   const updateSuggestions = () => {
     const value = input.value.toLowerCase();
+
     const allTagsFlat = galleryImages.flatMap(img => img.tags || []);
     const tagCount = {};
     allTagsFlat.forEach(t => tagCount[t] = (tagCount[t] || 0) + 1);
-    const allTagsSorted = Object.keys(tagCount).sort((a, b) => tagCount[b] - tagCount[a]);
+
+    const allTagsSorted = Object.keys(tagCount)
+      .sort((a, b) => tagCount[b] - tagCount[a]);
+
     const suggestions = allTagsSorted.filter(t => t.toLowerCase().startsWith(value) && !tags.includes(t));
+
     suggestionBox.innerHTML = '';
     selectedIndex = -1;
+
     if (suggestions.length) {
       suggestionBox.style.display = 'block';
       suggestions.forEach((s, idx) => {
         const li = document.createElement('li');
         li.style.fontStyle = 'italic';
         li.style.textAlign = 'left';
-        li.innerHTML = `<b>${s.substring(0, input.value.length)}</b>${s.substring(input.value.length)}`;
+
+        const boldPart = `<b>${s.substring(0, input.value.length)}</b>`;
+        const rest = s.substring(input.value.length);
+        li.innerHTML = boldPart + rest;
+
         li.addEventListener('mousedown', (e) => {
           e.preventDefault();
           addTag(s);
@@ -161,6 +196,7 @@ function renderTags(imgIndex, tags) {
           input.focus();
           updateSuggestions();
         });
+
         li.onmouseover = () => selectedIndex = idx;
         suggestionBox.appendChild(li);
       });
@@ -177,6 +213,7 @@ function renderTags(imgIndex, tags) {
     updateSuggestions();
     validateBtn.style.display = input.value.trim() ? 'inline-block' : 'none';
   });
+
   input.addEventListener('keydown', (e) => {
     const items = suggestionBox.querySelectorAll('li');
     if (e.key === 'ArrowDown') {
@@ -207,22 +244,27 @@ function renderTags(imgIndex, tags) {
       validateBtn.style.display = 'none';
     }
   });
+
   input.addEventListener('blur', () => {
+    setTimeout(() => {
       suggestionBox.style.display = 'none';
       input.value = '';
       validateBtn.style.display = 'none';
+    }, 150);
   });
-  validateBtn.addEventListener('mousedown', (e) => {
+
-    e.preventDefault();
+  // --- Validate button action ---
+  validateBtn.onclick = () => {
     if (input.value.trim()) {
       addTag(input.value.trim());
       input.value = '';
       updateSuggestions();
       validateBtn.style.display = 'none';
     }
-  });
+  };
+
+  input.focus();
   updateSuggestions();
-  if (!input.value.trim()) suggestionBox.style.display = 'none';
 }
 
 // --- Update tags in galleryImages array ---
@@ -250,8 +292,36 @@ function renderHero() {
     `;
     container.appendChild(div);
   });
-  updateCountAndButtons('hero', heroImages.length);
+
-  applyFadeInImages(container);
+  // Update hero count (top)
+  const heroCount = document.getElementById('hero-count');
+  if (heroCount) {
+    heroCount.innerHTML = `<p>${heroImages.length} photos</p>`;
+  }
+
+  // Update hero count (bottom)
+  const heroCountBottom = document.getElementById('hero-count-bottom');
+  if (heroCountBottom) {
+    heroCountBottom.innerHTML = `<p>${heroImages.length} photos</p>`;
+  }
+
+  // Show/hide Remove All button (top)
+  const removeAllBtn = document.getElementById('remove-all-hero');
+  if (removeAllBtn) {
+    removeAllBtn.style.display = heroImages.length > 0 ? 'inline-block' : 'none';
+  }
+
+  // Show/hide bottom upload row
+  const bottomHeroUpload = document.getElementById('bottom-hero-upload');
+  if (bottomHeroUpload) {
+    bottomHeroUpload.style.display = heroImages.length > 0 ? 'flex' : 'none';
+  }
+
+  // Show/hide Remove All button (bottom)
+  const removeAllBtnBottom = document.getElementById('remove-all-hero-bottom');
+  if (removeAllBtnBottom) {
+    removeAllBtnBottom.style.display = heroImages.length > 0 ? 'inline-block' : 'none';
+  }
 }
 
 // --- Save gallery to server ---
@@ -297,27 +367,33 @@ async function refreshHero() {
 function showToast(message, type = "success", duration = 3000) {
   const container = document.getElementById("toast-container");
   if (!container) return;
+
   const toast = document.createElement("div");
   toast.className = `toast ${type}`;
   toast.textContent = message;
   container.appendChild(toast);
+
   requestAnimationFrame(() => toast.classList.add("show"));
+
   setTimeout(() => {
     toast.classList.remove("show");
     toast.addEventListener("transitionend", () => toast.remove());
   }, duration);
 }
 
-let pendingDelete = null;
+let pendingDelete = null; // { type: 'gallery'|'hero'|'gallery-all'|'hero-all', index: number|null }
 
 // --- Show delete confirmation modal ---
 function showDeleteModal(type, index = null) {
   pendingDelete = { type, index };
   const modalText = document.getElementById('delete-modal-text');
-  modalText.textContent =
+  if (type === 'gallery-all') {
-    type === 'gallery-all' ? "Are you sure you want to delete ALL gallery images?"
+    modalText.textContent = "Are you sure you want to delete ALL gallery images?";
-    : type === 'hero-all' ? "Are you sure you want to delete ALL hero images?"
+  } else if (type === 'hero-all') {
-    : "Are you sure you want to delete this image?";
+    modalText.textContent = "Are you sure you want to delete ALL hero images?";
+  } else {
+    modalText.textContent = "Are you sure you want to delete this image?";
+  }
   document.getElementById('delete-modal').style.display = 'flex';
 }
 
@@ -330,10 +406,15 @@ function hideDeleteModal() {
 // --- Confirm deletion ---
 async function confirmDelete() {
   if (!pendingDelete) return;
-  if (pendingDelete.type === 'gallery') await actuallyDeleteGalleryImage(pendingDelete.index);
+  if (pendingDelete.type === 'gallery') {
-  else if (pendingDelete.type === 'hero') await actuallyDeleteHeroImage(pendingDelete.index);
+    await actuallyDeleteGalleryImage(pendingDelete.index);
-  else if (pendingDelete.type === 'gallery-all') await actuallyDeleteAllGalleryImages();
+  } else if (pendingDelete.type === 'hero') {
-  else if (pendingDelete.type === 'hero-all') await actuallyDeleteAllHeroImages();
+    await actuallyDeleteHeroImage(pendingDelete.index);
+  } else if (pendingDelete.type === 'gallery-all') {
+    await actuallyDeleteAllGalleryImages();
+  } else if (pendingDelete.type === 'hero-all') {
+    await actuallyDeleteAllHeroImages();
+  }
   hideDeleteModal();
 }
 
@@ -415,36 +496,41 @@ async function actuallyDeleteAllHeroImages() {
 
 // --- Modal event listeners and bulk delete buttons ---
 document.addEventListener('DOMContentLoaded', () => {
-  ['delete-modal-close', 'delete-modal-cancel'].forEach(id => {
+  document.getElementById('delete-modal-close').onclick = hideDeleteModal;
-    const el = document.getElementById(id);
+  document.getElementById('delete-modal-cancel').onclick = hideDeleteModal;
-    if (el) el.onclick = hideDeleteModal;
+  document.getElementById('delete-modal-confirm').onclick = confirmDelete;
-  });
-  const confirmBtn = document.getElementById('delete-modal-confirm');
-  if (confirmBtn) confirmBtn.onclick = confirmDelete;
 
-  // Gallery filter radios
+  // --- Radio toggle for gallery filter ---
   const showAllRadio = document.getElementById('show-all-radio');
   const showUntaggedRadio = document.getElementById('show-untagged-radio');
-  if (showAllRadio) showAllRadio.addEventListener('change', () => {
+
+  if (showAllRadio && showUntaggedRadio) {
+    showAllRadio.addEventListener('change', () => {
+      if (showAllRadio.checked) {
         showOnlyUntagged = false;
         renderGallery();
+      }
     });
-  if (showUntaggedRadio) showUntaggedRadio.addEventListener('change', () => {
+    showUntaggedRadio.addEventListener('change', () => {
+      if (showUntaggedRadio.checked) {
         showOnlyUntagged = true;
         renderGallery();
+      }
     });
+  }
 
   // Bulk delete buttons
-  [
+  const removeAllGalleryBtn = document.getElementById('remove-all-gallery');
-    ['remove-all-gallery', 'gallery-all'],
+  const removeAllGalleryBtnBottom = document.getElementById('remove-all-gallery-bottom');
-    ['remove-all-gallery-bottom', 'gallery-all'],
+  const removeAllHeroBtn = document.getElementById('remove-all-hero');
-    ['remove-all-hero', 'hero-all'],
+  const removeAllHeroBtnBottom = document.getElementById('remove-all-hero-bottom');
-    ['remove-all-hero-bottom', 'hero-all']
+  if (removeAllGalleryBtn) removeAllGalleryBtn.onclick = () => showDeleteModal('gallery-all');
-  ].forEach(([btnId, type]) => {
+  if (removeAllGalleryBtnBottom) removeAllGalleryBtnBottom.onclick = () => showDeleteModal('gallery-all');
-    const btn = document.getElementById(btnId);
+  if (removeAllHeroBtn) removeAllHeroBtn.onclick = () => showDeleteModal('hero-all');
-    if (btn) btn.onclick = () => showDeleteModal(type);
+  if (removeAllHeroBtnBottom) removeAllHeroBtnBottom.onclick = () => showDeleteModal('hero-all');
-  });
 });
 
+
+
 // --- Initialize ---
 loadData();

src/webui/js/site-info.js

@@ -12,6 +12,7 @@ function showToast(message, type = "success", duration = 3000) {
   }, duration);
 }
 
+// --- Loader helpers ---
 function showLoader(text = "Uploading...") {
   const loader = document.getElementById("global-loader");
   if (loader) {
@@ -26,65 +27,77 @@ function hideLoader() {
 
 document.addEventListener("DOMContentLoaded", () => {
   // --- Section Forms ---
-  const forms = {
+  const infoForm = document.getElementById("info-form");
-    info: document.getElementById("info-form"),
+  const socialForm = document.getElementById("social-form");
-    social: document.getElementById("social-form"),
+  const menuForm = document.getElementById("menu-form");
-    menu: document.getElementById("menu-form"),
+  const footerForm = document.getElementById("footer-form");
-    footer: document.getElementById("footer-form"),
+  const legalsForm = document.getElementById("legals-form");
-    legals: document.getElementById("legals-form"),
+  const buildForm = document.getElementById("build-form");
-    build: document.getElementById("build-form")
-  };
 
   // --- Menu logic ---
   const menuList = document.getElementById("menu-items-list");
   const addMenuBtn = document.getElementById("add-menu-item");
   let menuItems = [];
+
   function renderMenuItems() {
     menuList.innerHTML = "";
     menuItems.forEach((item, idx) => {
-      menuList.innerHTML += `
+      const div = document.createElement("div");
-        <div style="display:flex;gap:8px;margin-bottom:6px;">
+      div.style.display = "flex";
+      div.style.gap = "8px";
+      div.style.marginBottom = "6px";
+      div.innerHTML = `
         <input type="text" placeholder="Label" value="${item.label || ""}" style="flex:1;" data-idx="${idx}" data-type="label" required>
         <input type="text" placeholder="?tag=tag1,tag2" value="${item.href || ""}" style="flex:2;" data-idx="${idx}" data-type="href" required>
         <button type="button" class="remove-menu-item" data-idx="${idx}">🗑</button>
-        </div>
       `;
+      menuList.appendChild(div);
     });
   }
+
   function updateMenuItemsFromInputs() {
     const inputs = menuList.querySelectorAll("input");
-    menuItems = [];
+    const items = [];
     for (let i = 0; i < inputs.length; i += 2) {
       const label = inputs[i].value.trim();
       const href = inputs[i + 1].value.trim();
-      if (label || href) menuItems.push({ label, href });
+      if (label || href) items.push({ label, href });
     }
+    menuItems = items;
   }
 
   // --- Intellectual property paragraphs logic ---
   const ipList = document.getElementById("ip-list");
   const addIpBtn = document.getElementById("add-ip-paragraph");
   let ipParagraphs = [];
+
   function renderIpParagraphs() {
     ipList.innerHTML = "";
     ipParagraphs.forEach((item, idx) => {
-      ipList.innerHTML += `
+      const div = document.createElement("div");
-        <div style="display:flex;gap:8px;margin-bottom:6px;">
+      div.style.display = "flex";
+      div.style.gap = "8px";
+      div.style.marginBottom = "6px";
+      div.innerHTML = `
         <textarea placeholder="Paragraph" required style="flex:1;" data-idx="${idx}">${item.paragraph || ""}</textarea>
         <button type="button" class="remove-ip-paragraph" data-idx="${idx}">🗑</button>
-        </div>
       `;
+      ipList.appendChild(div);
     });
   }
+
   function updateIpParagraphsFromInputs() {
-    ipParagraphs = Array.from(ipList.querySelectorAll("textarea"))
+    const textareas = ipList.querySelectorAll("textarea");
-      .map(textarea => ({ paragraph: textarea.value.trim() }))
+    ipParagraphs = Array.from(textareas).map(textarea => ({
-      .filter(item => item.paragraph !== "");
+      paragraph: textarea.value.trim()
+    })).filter(item => item.paragraph !== "");
   }
 
-  // --- Build options & Theme select ---
+  // --- Build options ---
   const convertImagesCheckbox = document.getElementById("convert-images-checkbox");
   const resizeImagesCheckbox = document.getElementById("resize-images-checkbox");
+
+  // --- Theme select ---
   const themeSelect = document.getElementById("theme-select");
 
   // --- Thumbnail upload and modal logic ---
@@ -94,30 +107,40 @@ document.addEventListener("DOMContentLoaded", () => {
   const thumbnailPreview = document.getElementById("thumbnail-preview");
   const removeThumbnailBtn = document.getElementById("remove-thumbnail-btn");
 
-  // --- Modal helpers ---
+  // --- Modal elements for delete confirmation ---
-  function setupModal(modal, closeBtn, confirmBtn, cancelBtn, onConfirm) {
+  const deleteModal = document.getElementById("delete-modal");
-    if (!modal) return;
+  const deleteModalClose = document.getElementById("delete-modal-close");
-    if (closeBtn) closeBtn.onclick = () => modal.style.display = "none";
+  const deleteModalConfirm = document.getElementById("delete-modal-confirm");
-    if (cancelBtn) cancelBtn.onclick = () => modal.style.display = "none";
+  const deleteModalCancel = document.getElementById("delete-modal-cancel");
-    window.addEventListener("click", (e) => {
-      if (e.target === modal) modal.style.display = "none";
-    });
-    if (confirmBtn && onConfirm) confirmBtn.onclick = onConfirm;
-  }
 
-  // --- Thumbnail preview logic ---
+  // --- Modal elements for theme deletion ---
+  const deleteThemeModal = document.getElementById("delete-theme-modal");
+  const deleteThemeModalClose = document.getElementById("delete-theme-modal-close");
+  const deleteThemeModalConfirm = document.getElementById("delete-theme-modal-confirm");
+  const deleteThemeModalCancel = document.getElementById("delete-theme-modal-cancel");
+  const deleteThemeModalText = document.getElementById("delete-theme-modal-text");
+  let themeToDelete = null;
+
+  // --- Show/hide thumbnail preview, remove button, and choose button ---
   function updateThumbnailPreview(src) {
     if (thumbnailPreview) {
       thumbnailPreview.src = src || "";
       thumbnailPreview.style.display = src ? "block" : "none";
     }
-    if (removeThumbnailBtn) removeThumbnailBtn.style.display = src ? "inline-block" : "none";
+    if (removeThumbnailBtn) {
-    if (chooseThumbnailBtn) chooseThumbnailBtn.style.display = src ? "none" : "inline-block";
+      removeThumbnailBtn.style.display = src ? "inline-block" : "none";
+    }
+    if (chooseThumbnailBtn) {
+      chooseThumbnailBtn.style.display = src ? "none" : "inline-block";
+    }
   }
 
+  // --- Choose thumbnail button triggers file input ---
   if (chooseThumbnailBtn && thumbnailUpload) {
     chooseThumbnailBtn.addEventListener("click", () => thumbnailUpload.click());
   }
+
+  // --- Handle thumbnail upload and refresh preview (with cache busting) ---
   if (thumbnailUpload) {
     thumbnailUpload.addEventListener("change", async (e) => {
       const file = e.target.files[0];
@@ -138,17 +161,25 @@ document.addEventListener("DOMContentLoaded", () => {
       updateSectionStatus("social");
     });
   }
+
+  // --- Remove thumbnail button triggers modal ---
   if (removeThumbnailBtn) {
     removeThumbnailBtn.addEventListener("click", () => {
-      document.getElementById("delete-modal").style.display = "flex";
+      deleteModal.style.display = "flex";
     });
   }
-  setupModal(
+
-    document.getElementById("delete-modal"),
+  // --- Modal logic for thumbnail deletion ---
-    document.getElementById("delete-modal-close"),
+  if (deleteModal && deleteModalClose && deleteModalConfirm && deleteModalCancel) {
-    document.getElementById("delete-modal-confirm"),
+    deleteModalClose.onclick = deleteModalCancel.onclick = () => {
-    document.getElementById("delete-modal-cancel"),
+      deleteModal.style.display = "none";
-    async () => {
+    };
+    window.onclick = function(event) {
+      if (event.target === deleteModal) {
+        deleteModal.style.display = "none";
+      }
+    };
+    deleteModalConfirm.onclick = async () => {
       const res = await fetch("/api/thumbnail/remove", { method: "POST" });
       const result = await res.json();
       if (result.status === "ok") {
@@ -158,28 +189,41 @@ document.addEventListener("DOMContentLoaded", () => {
       } else {
         showToast("❌ Error removing thumbnail", "error");
       }
-      document.getElementById("delete-modal").style.display = "none";
+      deleteModal.style.display = "none";
       updateSectionStatus("social");
+    };
   }
-  );
 
-  // --- Theme upload logic ---
+  // --- Theme upload logic (custom theme folder) ---
   const themeUpload = document.getElementById("theme-upload");
   const chooseThemeBtn = document.getElementById("choose-theme-btn");
   if (chooseThemeBtn && themeUpload) {
     chooseThemeBtn.addEventListener("click", () => themeUpload.click());
     themeUpload.addEventListener("change", async (e) => {
       const files = Array.from(e.target.files);
-      if (!files.length) return;
+      if (files.length === 0) return;
       showLoader("Uploading theme...");
       const formData = new FormData();
-      files.forEach(file => formData.append("files", file, file.webkitRelativePath || file.name));
+      files.forEach(file => {
+        formData.append("files", file, file.webkitRelativePath || file.name);
+      });
       const res = await fetch("/api/theme/upload", { method: "POST", body: formData });
       const result = await res.json();
       hideLoader();
       if (result.status === "ok") {
         showToast("✅ Theme uploaded!", "success");
-        refreshThemes();
+        // Refresh theme select after upload
+        fetch("/api/themes")
+          .then(res => res.json())
+          .then(themes => {
+            themeSelect.innerHTML = "";
+            themes.forEach(theme => {
+              const option = document.createElement("option");
+              option.value = theme;
+              option.textContent = theme;
+              themeSelect.appendChild(option);
+            });
+          });
       } else {
         showToast("❌ Error uploading theme", "error");
       }
@@ -187,9 +231,8 @@ document.addEventListener("DOMContentLoaded", () => {
     });
   }
 
-  // --- Remove theme logic ---
+  // --- Remove theme button triggers modal ---
   const removeThemeBtn = document.getElementById("remove-theme-btn");
-  let themeToDelete = null;
   if (removeThemeBtn && themeSelect) {
     removeThemeBtn.addEventListener("click", () => {
       const theme = themeSelect.value;
@@ -199,16 +242,24 @@ document.addEventListener("DOMContentLoaded", () => {
         return;
       }
       themeToDelete = theme;
-      document.getElementById("delete-theme-modal-text").textContent = `Are you sure you want to remove theme "${theme}"?`;
+      deleteThemeModalText.textContent = `Are you sure you want to remove theme "${theme}"?`;
-      document.getElementById("delete-theme-modal").style.display = "flex";
+      deleteThemeModal.style.display = "flex";
     });
   }
-  setupModal(
+
-    document.getElementById("delete-theme-modal"),
+  // --- Modal logic for theme deletion ---
-    document.getElementById("delete-theme-modal-close"),
+  if (deleteThemeModal && deleteThemeModalClose && deleteThemeModalConfirm && deleteThemeModalCancel) {
-    document.getElementById("delete-theme-modal-confirm"),
+    deleteThemeModalClose.onclick = deleteThemeModalCancel.onclick = () => {
-    document.getElementById("delete-theme-modal-cancel"),
+      deleteThemeModal.style.display = "none";
-    async () => {
+      themeToDelete = null;
+    };
+    window.onclick = function(event) {
+      if (event.target === deleteThemeModal) {
+        deleteThemeModal.style.display = "none";
+        themeToDelete = null;
+      }
+    };
+    deleteThemeModalConfirm.onclick = async () => {
       if (!themeToDelete) return;
       showLoader("Removing theme...");
       const res = await fetch("/api/theme/remove", {
@@ -220,18 +271,7 @@ document.addEventListener("DOMContentLoaded", () => {
       hideLoader();
       if (result.status === "ok") {
         showToast("✅ Theme removed!", "success");
-        refreshThemes();
+        // Refresh theme select
-      } else {
-        showToast(result.error || "❌ Error removing theme", "error");
-      }
-      document.getElementById("delete-theme-modal").style.display = "none";
-      themeToDelete = null;
-      updateSectionStatus("build");
-    }
-  );
-
-  // --- Theme select refresh ---
-  function refreshThemes() {
         fetch("/api/themes")
           .then(res => res.json())
           .then(themes => {
@@ -242,11 +282,17 @@ document.addEventListener("DOMContentLoaded", () => {
               option.textContent = theme;
               themeSelect.appendChild(option);
             });
-        loadConfigAndUpdateBuildStatus();
           });
+      } else {
+        showToast(result.error || "❌ Error removing theme", "error");
+      }
+      deleteThemeModal.style.display = "none";
+      themeToDelete = null;
+      updateSectionStatus("build");
+    };
   }
 
-  // --- Config loading ---
+  // --- Fetch theme list and populate select, then load config and update build status ---
   let loadedConfig = {};
   function loadConfigAndUpdateBuildStatus() {
     fetch("/api/site-info")
@@ -254,17 +300,17 @@ document.addEventListener("DOMContentLoaded", () => {
       .then(data => {
         loadedConfig = data;
         // Info
-        if (forms.info) {
+        if (infoForm) {
-          forms.info.elements["info.title"].value = data.info?.title || "";
+          infoForm.elements["info.title"].value = data.info?.title || "";
-          forms.info.elements["info.subtitle"].value = data.info?.subtitle || "";
+          infoForm.elements["info.subtitle"].value = data.info?.subtitle || "";
-          forms.info.elements["info.description"].value = data.info?.description || "";
+          infoForm.elements["info.description"].value = data.info?.description || "";
-          forms.info.elements["info.canonical"].value = data.info?.canonical || "";
+          infoForm.elements["info.canonical"].value = data.info?.canonical || "";
-          forms.info.elements["info.keywords"].value = Array.isArray(data.info?.keywords) ? data.info.keywords.join(", ") : (data.info?.keywords || "");
+          infoForm.elements["info.keywords"].value = Array.isArray(data.info?.keywords) ? data.info.keywords.join(", ") : (data.info?.keywords || "");
-          forms.info.elements["info.author"].value = data.info?.author || "";
+          infoForm.elements["info.author"].value = data.info?.author || "";
         }
         // Social
-        if (forms.social) {
+        if (socialForm) {
-          forms.social.elements["social.instagram_url"].value = data.social?.instagram_url || "";
+          socialForm.elements["social.instagram_url"].value = data.social?.instagram_url || "";
           if (thumbnailInput) thumbnailInput.value = data.social?.thumbnail || "";
           updateThumbnailPreview(data.social?.thumbnail ? `/photos/${data.social.thumbnail}?t=${Date.now()}` : "");
         }
@@ -272,37 +318,66 @@ document.addEventListener("DOMContentLoaded", () => {
         menuItems = Array.isArray(data.menu?.items) ? data.menu.items : [];
         renderMenuItems();
         // Footer
-        if (forms.footer) {
+        if (footerForm) {
-          forms.footer.elements["footer.copyright"].value = data.footer?.copyright || "";
+          footerForm.elements["footer.copyright"].value = data.footer?.copyright || "";
-          forms.footer.elements["footer.legal_label"].value = data.footer?.legal_label || "";
+          footerForm.elements["footer.legal_label"].value = data.footer?.legal_label || "";
         }
         // Legals
         ipParagraphs = Array.isArray(data.legals?.intellectual_property)
           ? data.legals.intellectual_property
           : [];
         renderIpParagraphs();
-        if (forms.legals) {
+        if (legalsForm) {
-          forms.legals.elements["legals.hoster_name"].value = data.legals?.hoster_name || "";
+          legalsForm.elements["legals.hoster_name"].value = data.legals?.hoster_name || "";
-          forms.legals.elements["legals.hoster_address"].value = data.legals?.hoster_address || "";
+          legalsForm.elements["legals.hoster_address"].value = data.legals?.hoster_address || "";
-          forms.legals.elements["legals.hoster_contact"].value = data.legals?.hoster_contact || "";
+          legalsForm.elements["legals.hoster_contact"].value = data.legals?.hoster_contact || "";
         }
         // Build
-        if (themeSelect) themeSelect.value = data.build?.theme || "";
+        if (themeSelect) {
-        if (convertImagesCheckbox) convertImagesCheckbox.checked = !!data.build?.convert_images;
+          themeSelect.value = data.build?.theme || "";
-        if (resizeImagesCheckbox) resizeImagesCheckbox.checked = !!data.build?.resize_images;
+        }
+        if (convertImagesCheckbox) {
+          convertImagesCheckbox.checked = !!data.build?.convert_images;
+        }
+        if (resizeImagesCheckbox) {
+          resizeImagesCheckbox.checked = !!data.build?.resize_images;
+        }
+        // Initial status update for all sections except build
         ["info", "social", "menu", "footer", "legals"].forEach(updateSectionStatus);
+        // For build, update status after theme select is set
         updateSectionStatus("build");
       });
   }
-  if (themeSelect) refreshThemes();
-  else loadConfigAndUpdateBuildStatus();
 
-  // --- Add/remove menu items ---
+  if (themeSelect) {
-  if (addMenuBtn) addMenuBtn.addEventListener("click", () => {
+    fetch("/api/themes")
+      .then(res => res.json())
+      .then(themes => {
+        themeSelect.innerHTML = "";
+        themes.forEach(theme => {
+          const option = document.createElement("option");
+          option.value = theme;
+          option.textContent = theme;
+          themeSelect.appendChild(option);
+        });
+        // Now load config and update build status after theme select is ready
+        loadConfigAndUpdateBuildStatus();
+      });
+  } else {
+    // If no theme select, just load config
+    loadConfigAndUpdateBuildStatus();
+  }
+
+  // --- Add menu item ---
+  if (addMenuBtn) {
+    addMenuBtn.addEventListener("click", () => {
       menuItems.push({ label: "", href: "" });
       renderMenuItems();
       updateSectionStatus("menu");
     });
+  }
+
+  // --- Remove menu item ---
   menuList.addEventListener("click", (e) => {
     if (e.target.classList.contains("remove-menu-item")) {
       const idx = parseInt(e.target.getAttribute("data-idx"));
@@ -311,17 +386,23 @@ document.addEventListener("DOMContentLoaded", () => {
       updateSectionStatus("menu");
     }
   });
+
+  // --- Update menuItems on input change ---
   menuList.addEventListener("input", () => {
     updateMenuItemsFromInputs();
     updateSectionStatus("menu");
   });
 
-  // --- Add/remove IP paragraphs ---
+  // --- Add paragraph ---
-  if (addIpBtn) addIpBtn.addEventListener("click", () => {
+  if (addIpBtn) {
+    addIpBtn.addEventListener("click", () => {
       ipParagraphs.push({ paragraph: "" });
       renderIpParagraphs();
       updateSectionStatus("legals");
     });
+  }
+
+  // --- Remove paragraph ---
   ipList.addEventListener("click", (e) => {
     if (e.target.classList.contains("remove-ip-paragraph")) {
       const idx = parseInt(e.target.getAttribute("data-idx"));
@@ -330,6 +411,8 @@ document.addEventListener("DOMContentLoaded", () => {
       updateSectionStatus("legals");
     }
   });
+
+  // --- Update ipParagraphs on input change ---
   ipList.addEventListener("input", () => {
     updateIpParagraphsFromInputs();
     updateSectionStatus("legals");
@@ -340,16 +423,16 @@ document.addEventListener("DOMContentLoaded", () => {
     switch (section) {
       case "info":
         return {
-          title: forms.info.elements["info.title"].value,
+          title: infoForm.elements["info.title"].value,
-          subtitle: forms.info.elements["info.subtitle"].value,
+          subtitle: infoForm.elements["info.subtitle"].value,
-          description: forms.info.elements["info.description"].value,
+          description: infoForm.elements["info.description"].value,
-          canonical: forms.info.elements["info.canonical"].value,
+          canonical: infoForm.elements["info.canonical"].value,
-          keywords: forms.info.elements["info.keywords"].value.split(",").map(i => i.trim()).filter(Boolean),
+          keywords: infoForm.elements["info.keywords"].value.split(",").map(i => i.trim()).filter(Boolean),
-          author: forms.info.elements["info.author"].value
+          author: infoForm.elements["info.author"].value
         };
       case "social":
         return {
-          instagram_url: forms.social.elements["social.instagram_url"].value,
+          instagram_url: socialForm.elements["social.instagram_url"].value,
           thumbnail: thumbnailInput ? thumbnailInput.value : ""
         };
       case "menu":
@@ -357,15 +440,15 @@ document.addEventListener("DOMContentLoaded", () => {
         return { items: menuItems };
       case "footer":
         return {
-          copyright: forms.footer.elements["footer.copyright"].value,
+          copyright: footerForm.elements["footer.copyright"].value,
-          legal_label: forms.footer.elements["footer.legal_label"].value
+          legal_label: footerForm.elements["footer.legal_label"].value
         };
       case "legals":
         updateIpParagraphsFromInputs();
         return {
-          hoster_name: forms.legals.elements["legals.hoster_name"].value,
+          hoster_name: legalsForm.elements["legals.hoster_name"].value,
-          hoster_address: forms.legals.elements["legals.hoster_address"].value,
+          hoster_address: legalsForm.elements["legals.hoster_address"].value,
-          hoster_contact: forms.legals.elements["legals.hoster_contact"].value,
+          hoster_contact: legalsForm.elements["legals.hoster_contact"].value,
           intellectual_property: ipParagraphs
         };
       case "build":
@@ -450,7 +533,7 @@ document.addEventListener("DOMContentLoaded", () => {
           values.intellectual_property.every(ip => ip.paragraph)
         );
       case "build":
-        return !!values.theme;
+        return !!values.theme; // Only check theme is present
       default:
         return true;
     }
@@ -478,22 +561,46 @@ document.addEventListener("DOMContentLoaded", () => {
   }
 
   // --- Listen for changes in each section ---
-  Object.entries(forms).forEach(([section, form]) => {
+  [
+    { form: infoForm, section: "info" },
+    { form: socialForm, section: "social" },
+    { form: menuForm, section: "menu" },
+    { form: footerForm, section: "footer" },
+    { form: legalsForm, section: "legals" },
+    { form: buildForm, section: "build" }
+  ].forEach(({ form, section }) => {
     if (!form) return;
     form.addEventListener("input", () => updateSectionStatus(section));
     form.addEventListener("change", () => updateSectionStatus(section));
+  });
+
+  // --- Save section handler (form submit) ---
+  [
+    { form: infoForm, section: "info" },
+    { form: socialForm, section: "social" },
+    { form: menuForm, section: "menu" },
+    { form: footerForm, section: "footer" },
+    { form: legalsForm, section: "legals" },
+    { form: buildForm, section: "build" }
+  ].forEach(({ form, section }) => {
+    if (!form) return;
     form.addEventListener("submit", async (e) => {
       e.preventDefault();
+      // Native browser validation
       if (!form.reportValidity()) {
         showToast("❌ Please fill all required fields before saving.", "error");
         updateSectionStatus(section);
         return;
       }
-      if (section === "social" && (!thumbnailInput || !thumbnailInput.value)) {
+      // Social section: check thumbnail
+      if (section === "social") {
+        if (!thumbnailInput || !thumbnailInput.value) {
           showToast("❌ Thumbnail is required.", "error");
           updateSectionStatus(section);
           return;
         }
+      }
+      // Menu section: check all menu items
       if (section === "menu") {
         updateMenuItemsFromInputs();
         if (!menuItems.length || !menuItems.every(item => item.label && item.href)) {
@@ -502,6 +609,7 @@ document.addEventListener("DOMContentLoaded", () => {
           return;
         }
       }
+      // Legals section: check all paragraphs
       if (section === "legals") {
         updateIpParagraphsFromInputs();
         if (!ipParagraphs.length || !ipParagraphs.every(ip => ip.paragraph)) {
@@ -510,8 +618,10 @@ document.addEventListener("DOMContentLoaded", () => {
           return;
         }
       }
+      // Build payload for this section only
       let payload = {};
       payload[section] = getSectionValues(section);
+
       const res = await fetch("/api/site-info", {
         method: "POST",
         headers: { "Content-Type": "application/json" },
@@ -520,6 +630,7 @@ document.addEventListener("DOMContentLoaded", () => {
       const result = await res.json();
       if (result.status === "ok") {
         showToast("✅ Section saved!", "success");
+        // Reload config for this section
         fetch("/api/site-info")
           .then(res => res.json())
           .then(data => {
@@ -531,4 +642,5 @@ document.addEventListener("DOMContentLoaded", () => {
       }
     });
   });
+
 });

src/webui/js/theme-editor.js

@@ -70,11 +70,9 @@ function setupColorPicker(colorId, btnId, textId, initial) {
 function setFontDropdown(selectId, value, options) {
   const select = document.getElementById(selectId);
   if (!select) return;
-  select.innerHTML = options.map(opt => {
+  select.innerHTML = options.map(opt =>
-    // Remove extension if present
+    `<option value="${opt}"${opt === value ? " selected" : ""}>${opt}</option>`
-    const base = opt.replace(/\.(woff2?|ttf|otf)$/, "");
+  ).join("");
-    return `<option value="${base}"${base === value ? " selected" : ""}>${base}</option>`;
-  }).join("");
 }
 
 function setFallbackDropdown(selectId, value) {

src/webui/js/upload.js

@@ -11,37 +11,107 @@ function hideLoader() {
   if (loader) loader.classList.remove("active");
 }
 
-// --- Generic upload handler ---
+
-function setupUpload(inputId, apiUrl, loaderText, successMsg, refreshFn) {
+// --- Upload gallery images ---
-  const input = document.getElementById(inputId);
+const galleryInput = document.getElementById('upload-gallery');
-  if (!input) return;
+if (galleryInput) {
-  input.addEventListener('change', async (e) => {
+  galleryInput.addEventListener('change', async (e) => {
     const files = e.target.files;
     if (!files.length) return;
-    showLoader(loaderText);
+    showLoader("Uploading photos...");
     const formData = new FormData();
     for (const file of files) formData.append('files', file);
 
     try {
-      const res = await fetch(apiUrl, { method: 'POST', body: formData });
+      const res = await fetch('/api/gallery/upload', { method: 'POST', body: formData });
       const data = await res.json();
       hideLoader();
       if (res.ok) {
-        showToast(`✅ ${data.uploaded.length} ${successMsg}`, "success");
+        showToast(`✅ ${data.uploaded.length} gallery image(s) uploaded!`, "success");
-        if (typeof refreshFn === "function") refreshFn();
+        if (typeof refreshGallery === "function") refreshGallery();
       } else showToast('Error: ' + data.error, "error");
     } catch(err) {
       hideLoader();
       console.error(err);
       showToast('Server error!', "error");
-    } finally {
+    } finally { e.target.value = ''; }
-      e.target.value = '';
-    }
   });
 }
 
-// --- Setup all upload inputs ---
+// --- Upload hero images ---
-setupUpload('upload-gallery', '/api/gallery/upload', "Uploading photos...", "gallery image(s) uploaded!", refreshGallery);
+const heroInput = document.getElementById('upload-hero');
-setupUpload('upload-hero', '/api/hero/upload', "Uploading hero photos...", "hero image(s) uploaded!", refreshHero);
+if (heroInput) {
-setupUpload('upload-gallery-bottom', '/api/gallery/upload', "Uploading photos...", "gallery image(s) uploaded!", refreshGallery);
+  heroInput.addEventListener('change', async (e) => {
-setupUpload('upload-hero-bottom', '/api/hero/upload', "Uploading hero photos...", "hero image(s) uploaded!", refreshHero);
+    const files = e.target.files;
+    if (!files.length) return;
+    showLoader("Uploading hero photos...");
+    const formData = new FormData();
+    for (const file of files) formData.append('files', file);
+
+    try {
+      const res = await fetch('/api/hero/upload', { method: 'POST', body: formData });
+      const data = await res.json();
+      hideLoader();
+      if (res.ok) {
+        showToast(`✅ ${data.uploaded.length} hero image(s) uploaded!`, "success");
+        if (typeof refreshHero === "function") refreshHero();
+      } else showToast('Error: ' + data.error, "error");
+    } catch(err) {
+      hideLoader();
+      console.error(err);
+      showToast('Server error!', "error");
+    } finally { e.target.value = ''; }
+  });
+}
+
+// --- Upload gallery images (bottom button) ---
+const galleryInputBottom = document.getElementById('upload-gallery-bottom');
+if (galleryInputBottom) {
+  galleryInputBottom.addEventListener('change', async (e) => {
+    const files = e.target.files;
+    if (!files.length) return;
+    showLoader("Uploading photos...");
+    const formData = new FormData();
+    for (const file of files) formData.append('files', file);
+
+    try {
+      const res = await fetch('/api/gallery/upload', { method: 'POST', body: formData });
+      const data = await res.json();
+      hideLoader();
+      if (res.ok) {
+        showToast(`✅ ${data.uploaded.length} gallery image(s) uploaded!`, "success");
+        if (typeof refreshGallery === "function") refreshGallery();
+      } else showToast('Error: ' + data.error, "error");
+    } catch(err) {
+      hideLoader();
+      console.error(err);
+      showToast('Server error!', "error");
+    } finally { e.target.value = ''; }
+  });
+}
+
+// --- Upload hero images (bottom button) ---
+const heroInputBottom = document.getElementById('upload-hero-bottom');
+if (heroInputBottom) {
+  heroInputBottom.addEventListener('change', async (e) => {
+    const files = e.target.files;
+    if (!files.length) return;
+    showLoader("Uploading hero photos...");
+    const formData = new FormData();
+    for (const file of files) formData.append('files', file);
+
+    try {
+      const res = await fetch('/api/hero/upload', { method: 'POST', body: formData });
+      const data = await res.json();
+      hideLoader();
+      if (res.ok) {
+        showToast(`✅ ${data.uploaded.length} hero image(s) uploaded!`, "success");
+        if (typeof refreshHero === "function") refreshHero();
+      } else showToast('Error: ' + data.error, "error");
+    } catch(err) {
+      hideLoader();
+      console.error(err);
+      showToast('Server error!', "error");
+    } finally { e.target.value = ''; }
+  });
+}