diff --git a/index.html b/index.html index 83ab469..65d363f 100644 --- a/index.html +++ b/index.html @@ -227,6 +227,13 @@ .feat-checks { display: flex; flex-wrap: wrap; gap: 0.4rem 0.75rem; margin-top: 0.35rem; } .feat-check { display: flex; align-items: center; gap: 0.3rem; font-size: 0.82rem; color: var(--text); cursor: pointer; } .feat-check input[type=checkbox] { accent-color: var(--blue); width: 14px; height: 14px; cursor: pointer; } + /* Favorites preview */ + .fav-preview { display: flex; align-items: center; gap: 0.75rem; background: rgba(245,158,11,0.08); border: 1.5px solid rgba(245,158,11,0.3); border-radius: 10px; padding: 0.65rem 0.9rem; margin-bottom: 1rem; } + .fav-preview-thumbs { display: flex; gap: 0.3rem; flex-shrink: 0; } + .fav-preview-thumbs img { width: 36px; height: 36px; object-fit: cover; border-radius: 5px; border: 1.5px solid rgba(245,158,11,0.4); } + .fav-preview-more { width: 36px; height: 36px; border-radius: 5px; background: rgba(245,158,11,0.15); color: #B45309; font-size: 0.72rem; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } + .fav-preview-text { font-size: 0.83rem; color: #92400E; line-height: 1.4; } + .fav-preview-text strong { color: #B45309; } /* ── Ordner-Auswahl-Button in Drop-Zone ── */ #folder-picker-btn:hover { border-color: var(--blue); color: var(--blue); } @@ -418,6 +425,9 @@ + + +
⚙ Exportoptionen — Umbenennen · Bildeditor · Wasserzeichen @@ -1505,6 +1515,39 @@ dlBtn.style.display = ""; } + // Favorites preview + const favArr = [...favoritePaths]; + const favBox = el("fav-preview"); + favBox.textContent = ""; + if (favArr.length > 0) { + const MAX_THUMBS = 4; + const thumbWrap = document.createElement("div"); + thumbWrap.className = "fav-preview-thumbs"; + favArr.slice(0, MAX_THUMBS).forEach(p => { + const img = document.createElement("img"); + img.src = "preview?path=" + encodeURIComponent(p); + img.alt = ""; + thumbWrap.appendChild(img); + }); + if (favArr.length > MAX_THUMBS) { + const more = document.createElement("div"); + more.className = "fav-preview-more"; + more.textContent = "+" + (favArr.length - MAX_THUMBS); + thumbWrap.appendChild(more); + } + const textWrap = document.createElement("div"); + textWrap.className = "fav-preview-text"; + const strong = document.createElement("strong"); + strong.textContent = "★ " + favArr.length + (favArr.length === 1 ? " Favorit" : " Favoriten"); + textWrap.appendChild(strong); + textWrap.appendChild(document.createTextNode(" — erhalten beim Export das FAV_-Präfix")); + favBox.appendChild(thumbWrap); + favBox.appendChild(textWrap); + favBox.style.display = "flex"; + } else { + favBox.style.display = "none"; + } + showView("view-result"); }