improvements in displaying the Images in the detailed view

- Implement /student_card_class_barcode_download route to filter student cards by class
- Dynamically extract unique class names from the database for frontend selection
- Update student_cards_admin.html to replace the text input with a class selection dropdown

Web/templates/library_table.html

@@ -4,59 +4,60 @@
 
 {% block content %}
 <style>
-    /* The Dark Background Overlay */
+    /* =========================================
+       1. Modals & Overlays
+       ========================================= */
     .modal {
+        display: none; /* Managed by JS (none/flex) */
         position: fixed;
-        top: 0;
-        left: 0;
-        width: 100vw;
-        height: 100vh;
-        background-color: rgba(0, 0, 0, 0.6);
-        /* Display is managed by JS (none/flex) */
-        align-items: center; 
-        justify-content: center;
+        inset: 0; /* Modern shorthand for top: 0, right: 0, bottom: 0, left: 0 */
         z-index: 1000;
+        background-color: rgba(0, 0, 0, 0.6);
+        align-items: center;
+        justify-content: center;
+        padding: 20px;
     }
 
-    /* The White Modal Box */
     .modal-content {
-        background-color: #fff;
-        padding: 20px;
-        width: 80%;
-        max-width: 600px;
-        border-radius: 8px;
-        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
-
-        /* Flexbox allows the header to stay fixed while the body scrolls */
+        position: relative;
         display: flex;
         flex-direction: column;
-        max-height: 85vh;
+        width: 100%;
+        max-width: 900px; /* Consolidated from conflicting 600px/900px rules */
+        max-height: 90vh;
+        background-color: var(--ui-surface, #fff);
+        border-radius: 8px;
+        padding: 20px;
+        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
+        overflow-y: auto;
     }
 
-    /* The Close Button */
     .close {
-        align-self: flex-end;
+        position: absolute;
+        top: 15px;
+        right: 20px;
         color: #aaa;
         font-size: 28px;
         font-weight: bold;
-        cursor: pointer;
         line-height: 1;
-        margin-bottom: 10px;
+        cursor: pointer;
+        transition: color 0.2s ease;
     }
 
     .close:hover,
     .close:focus {
-        color: #000;
+        color: var(--ui-text, #000);
         text-decoration: none;
     }
 
-    /* The Scrollable Content Area */
     #detailContent {
         overflow-y: auto;
         padding-right: 10px;
     }
 
-    /* Library table-only view styles */
+    /* =========================================
+       2. Layout & Headers
+       ========================================= */
     .library-table-container {
         max-width: 1400px;
         margin: 0 auto;
@@ -79,13 +80,15 @@
         font-size: 0.95em;
     }
 
-    /* Library search bar */
+    /* =========================================
+       3. Search, Filter & Scan Panels
+       ========================================= */
     .library-search-bar {
-        margin-bottom: 20px;
         display: flex;
-        gap: 10px;
         flex-wrap: wrap;
         align-items: center;
+        gap: 10px;
+        margin-bottom: 20px;
     }
 
     .library-search-input {
@@ -95,10 +98,9 @@
         border: 1px solid #ddd;
         border-radius: 6px;
         font-size: 16px;
-        background: white;
+        background: #fff;
     }
 
-    /* Scanner panel */
     .library-scan-panel {
         background: var(--ui-surface);
         border: 1px solid #d9dde4;
@@ -129,41 +131,19 @@
         color: #4b5563;
     }
 
-    .library-scan-status.ok {
-        color: #1f7a38;
-    }
-
-    .library-scan-status.warn {
-        color: #9a6700;
-    }
-
-    .library-scan-status.error {
-        color: #b42318;
-    }
-
-    .library-scan-reader-wrap {
-        display: none;
-        margin-top: 12px;
-        border: 1px solid #d9dde4;
-        border-radius: 8px;
-        overflow: hidden;
-        background: var(--ui-surface);
-        max-width: 460px;
-    }
-
-    .library-scan-reader {
-        width: 100%;
-        min-height: 280px;
-    }
+    .library-scan-status.ok { color: #1f7a38; }
+    .library-scan-status.warn { color: #9a6700; }
+    .library-scan-status.error { color: #b42318; }
 
+    /* Filters */
     .library-filter-toggle-btn {
         padding: 10px 16px;
         background: #f0f2f5;
         border: 1px solid #ddd;
         border-radius: 6px;
-        cursor: pointer;
         font-weight: 500;
         color: var(--ui-text);
+        cursor: pointer;
         transition: all 0.2s ease;
     }
 
@@ -178,10 +158,9 @@
         color: #4f46e5;
     }
 
-    /* Filter panel */
     .library-filter-panel {
         display: none;
-        background: white;
+        background: #fff;
         border: 1px solid #ddd;
         border-radius: 8px;
         padding: 20px;
@@ -210,10 +189,10 @@
     }
 
     .filter-item label {
+        margin-bottom: 6px;
         font-weight: 600;
         font-size: 0.9em;
         color: var(--ui-text);
-        margin-bottom: 6px;
     }
 
     .filter-item input,
@@ -222,7 +201,8 @@
         border: 1px solid #ddd;
         border-radius: 4px;
         font-size: 14px;
-        background: white;
+        background: #fff;
+        transition: border-color 0.2s ease, box-shadow 0.2s ease;
     }
 
     .filter-item input:focus,
@@ -236,8 +216,8 @@
         display: flex;
         gap: 10px;
         margin-top: 15px;
-        border-top: 1px solid #eee;
         padding-top: 15px;
+        border-top: 1px solid #eee;
     }
 
     .filter-buttons .button {
@@ -246,11 +226,13 @@
         font-size: 14px;
     }
 
-    /* Library table */
+    /* =========================================
+       4. Tables & Data Display
+       ========================================= */
     .library-items-table {
         width: 100%;
+        background: #fff;
         border-collapse: collapse;
-        background: white;
         border: 1px solid #ddd;
         border-radius: 8px;
         overflow: hidden;
@@ -266,8 +248,8 @@
         padding: 14px 16px;
         text-align: left;
         font-weight: 600;
-        color: var(--ui-text);
         font-size: 0.9em;
+        color: var(--ui-text);
         text-transform: uppercase;
         letter-spacing: 0.5px;
     }
@@ -288,7 +270,6 @@
         border-bottom: none;
     }
 
-    /* Table cells */
     .table-title {
         font-weight: 600;
         color: var(--ui-text);
@@ -302,26 +283,14 @@
         font-weight: 500;
     }
 
-    .status-available {
-        background: #e8f5e9;
-        color: #2e7d32;
-    }
+    .status-available { background: #e8f5e9; color: #2e7d32; }
+    .status-borrowed { background: #fff3e0; color: #e65100; }
+    .status-damaged { background: #fee2e2; color: #991b1b; }
 
-    .status-borrowed {
-        background: #fff3e0;
-        color: #e65100;
-    }
-
-    .status-damaged {
-        background: #fee2e2;
-        color: #991b1b;
-    }
-
-    /* Actions */
     .table-actions {
         display: flex;
-        gap: 8px;
         flex-wrap: wrap;
+        gap: 8px;
     }
 
     .table-actions .button {
@@ -330,26 +299,25 @@
         white-space: nowrap;
     }
 
-    /* Empty state */
     .library-empty-state {
-        text-align: center;
         padding: 60px 20px;
+        text-align: center;
         color: #999;
     }
 
     .library-empty-state h3 {
-        font-size: 1.3em;
         margin-bottom: 10px;
+        font-size: 1.3em;
         color: #666;
     }
 
     .library-load-row {
-        margin-top: 12px;
         display: flex;
+        flex-wrap: wrap;
         align-items: center;
         justify-content: space-between;
         gap: 12px;
-        flex-wrap: wrap;
+        margin-top: 12px;
     }
 
     .library-load-hint {
@@ -357,54 +325,9 @@
         color: #6b7280;
     }
 
-    /* Small confirmation popup (toast) */
-    .small-popup {
-        position: fixed;
-        bottom: 24px;
-        left: 50%;
-        transform: translateX(-50%);
-        background: rgba(17, 24, 39, 0.96);
-        color: #fff;
-        padding: 12px 16px;
-        border-radius: 8px;
-        box-shadow: 0 6px 24px rgba(2,6,23,0.6);
-        z-index: 2000;
-        display: flex;
-        gap: 10px;
-        align-items: center;
-        max-width: 90%;
-        font-size: 0.95em;
-    }
-    .small-popup.ok { background: rgba(16,185,129,0.95); color: #032; }
-    .small-popup.error { background: rgba(239,68,68,0.95); color: #210; }
-    .small-popup .close-x { margin-left: 8px; cursor: pointer; font-weight: 700; }
-
-    /* Modal styles */
-    .modal {
-        display: none;
-        position: fixed;
-        z-index: 1000;
-        left: 0;
-        top: 0;
-        width: 100%;
-        height: 100%;
-        background-color: rgba(0, 0, 0, 0.5);
-        align-items: center;
-        justify-content: center;
-        padding: 20px;
-    }
-
-    .modal-content {
-        background-color: var(--ui-surface);
-        border-radius: 8px;
-        padding: 20px;
-        max-width: 900px;
-        max-height: 90vh;
-        overflow-y: auto;
-        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
-        position: relative;
-    }
-
+    /* =========================================
+       5. Edit Grid Forms
+       ========================================= */
     .edit-grid {
         display: grid;
         grid-template-columns: 1fr 1fr;
@@ -416,10 +339,10 @@
     }
 
     .edit-grid label {
+        display: block;
+        margin-bottom: 4px;
         font-weight: 600;
         font-size: 0.9em;
-        margin-bottom: 4px;
-        display: block;
     }
 
     .edit-grid input,
@@ -437,37 +360,44 @@
         margin-top: 14px;
     }
 
-    .close {
-        position: absolute;
-        right: 20px;
-        top: 10px;
-        font-size: 28px;
-        font-weight: bold;
-        color: #999;
+    /* =========================================
+       6. Notifications / Toasts
+       ========================================= */
+    .small-popup {
+        position: fixed;
+        bottom: 24px;
+        left: 50%;
+        z-index: 2000;
+        display: flex;
+        align-items: center;
+        gap: 10px;
+        max-width: 90%;
+        padding: 12px 16px;
+        background: rgba(17, 24, 39, 0.96);
+        color: #fff;
+        border-radius: 8px;
+        font-size: 0.95em;
+        transform: translateX(-50%);
+        box-shadow: 0 6px 24px rgba(2,6,23,0.6);
+    }
+
+    .small-popup.ok { background: rgba(16,185,129,0.95); color: #032; }
+    .small-popup.error { background: rgba(239,68,68,0.95); color: #210; }
+
+    .small-popup .close-x {
+        margin-left: 8px;
+        font-weight: 700;
         cursor: pointer;
     }
 
-    .close:hover {
-        color: var(--ui-text);
-    }
-
-    /* Mobile responsive */
+    /* =========================================
+       7. Mobile Responsiveness
+       ========================================= */
     @media (max-width: 768px) {
-        .library-table-container {
-            padding: 10px;
-        }
-
-        .library-search-bar {
-            flex-direction: column;
-        }
-
-        .library-search-input {
-            width: 100%;
-        }
-
-        .library-items-table {
-            font-size: 0.85em;
-        }
+        .library-table-container { padding: 10px; }
+        .library-search-bar { flex-direction: column; }
+        .library-search-input { width: 100%; }
+        .library-items-table { font-size: 0.85em; }
 
         .library-items-table th,
         .library-items-table td {
@@ -479,17 +409,46 @@
             font-size: 0.75em;
         }
 
-        .filter-row {
-            grid-template-columns: 1fr;
-        }
-
+        .filter-row,
         .library-scan-controls {
             grid-template-columns: 1fr;
         }
 
-        .library-scan-reader-wrap {
-            max-width: 100%;
-        }
+        .library-scan-reader-wrap { max-width: 100%; }
+    }
+    .library-scan-reader-wrap {
+        display: none;
+        margin-top: 15px;
+        max-width: 640px;
+        margin-left: auto;
+        margin-right: auto;
+        background: #000;
+        border: 1px solid #d9dde4;
+        border-radius: 8px;
+        overflow: hidden;
+        grid-column: 1 / -1;
+    }
+
+    .library-scan-reader {
+        width: 100%;
+        min-height: 280px;
+        position: relative;
+    }
+
+    .library-scan-reader video {
+        width: 100%;
+        height: auto;
+        display: block;
+        object-fit: cover;
+    }
+
+    .library-scan-reader canvas.drawing,
+    .library-scan-reader canvas.drawingBuffer {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
     }
 </style>
 
@@ -517,7 +476,6 @@
             🔍 Filter
         </button>
     </div>
-
     <div class="library-scan-controls">
         <select id="scanModeSelect" aria-label="Scan-Modus">
             <option value="card_only">Nur Ausweis erfassen</option>
@@ -535,6 +493,10 @@
         </label>
         <button id="manualActionBtn" class="button" type="button" style="margin-left:6px; background:#4f46e5; color:white;">Code verarbeiten</button>
     </div>
+    <div class="library-scan-reader-wrap" id="scanReaderWrap" style="display: none; margin-top: 15px;">
+        <div class="library-scan-reader" style="width: 100%; max-width: 640px; margin: 0 auto; overflow: hidden; border-radius: 8px; border: 2px solid #ccc;">
+        </div>
+    </div>
     <div id="filterPanel" class="library-filter-panel">
         <div class="filter-row">
             <div class="filter-item">
@@ -865,71 +827,92 @@
         deleteLibraryItem(itemId);
     }
 
-    // =========================================================================
-    // 3. CORE SCANNER ROUTING ENGINE (QUAGGA2)
-    // =========================================================================
-    function startScanner(targetCallback) {
-        const readerWrap = document.getElementById('scanReaderWrap');
+    async function startScanner(callback = null) {
+        if (scannerRunning) {
+            console.warn("Scanner is already running. Stopping it first...");
+            await stopScanner();
+        }
+
+        activeScannerCallback = callback;
+
+        const scannerWrap = document.querySelector('.library-scan-reader-wrap');
         const toggleBtn = document.getElementById('toggleScannerBtn');
 
-        activeScannerCallback = targetCallback;
+        // 1. CRITICAL FIX: Make the container visible BEFORE Quagga initializes
+        // Quagga cannot calculate video dimensions if display is 'none'
+        if (scannerWrap) {
+            scannerWrap.style.display = 'block';
+        }
 
-        if (readerWrap) readerWrap.style.display = 'block';
-        setScanStatus('Initializing camera...', 'warn');
+        setScanStatus('Starte Kamera...', 'warn');
 
-        Quagga.init({
-            inputStream: {
-                name: "Live",
-                type: "LiveStream",
-                target: document.querySelector('#library-scanner-container'),
-                constraints: {
-                    width: 640,
-                    height: 480,
-                    facingMode: "environment"
+        // 2. Initialize Quagga with a slight delay to allow the DOM to render the block
+        setTimeout(() => {
+            Quagga.init({
+                inputStream: {
+                    name: "Live",
+                    type: "LiveStream",
+                    // This MUST match the inner div where the video should appear
+                    target: document.querySelector('.library-scan-reader'), 
+                    constraints: {
+                        width: 640,
+                        height: 480,
+                        facingMode: "environment" // Prefer back camera on mobile
+                    }
                 },
-            },
-            decoder: {
-                readers: [
-                    "code_128_reader",
-                    "ean_reader",
-                    "code_39_reader",
-                    "upc_reader",
-                    "codabar_reader",
-                    "i2of5_reader"
-                ]
-            }
-        }, function(err) {
-            if (err) {
-                console.error('Scanner start failed:', err);
-                if (readerWrap) readerWrap.style.display = 'none';
-                const detail = (err && (err.message || err.name)) ? ` (${err.message || err.name})` : '';
-                setScanStatus(`Scanner konnte nicht gestartet werden${detail}`, 'error');
-                return;
-            }
+                locator: {
+                    patchSize: "medium",
+                    halfSample: true
+                },
+                decoder: {
+                    // Keep only the barcode types you actually use to improve performance
+                    readers: ["code_128_reader", "ean_reader", "code_39_reader"] 
+                },
+                locate: true
+            }, function(err) {
+                if (err) {
+                    // This will finally log the actual error (e.g., NotAllowedError) if permissions fail
+                    console.error("Quagga initialization failed:", err);
+                    setScanStatus('Kamera-Fehler: ' + (err.name || err), 'error');
 
-            Quagga.start();
-            scannerRunning = true;
+                    if (scannerWrap) scannerWrap.style.display = 'none';
+                    scannerRunning = false;
+                    return;
+                }
 
-            if (!targetCallback && toggleBtn) {
-                toggleBtn.textContent = 'Scanner stoppen';
-            }
-            setScanStatus('Scanner aktiv. Jetzt Code scannen.', 'warn');
-        });
+                Quagga.start();
+                scannerRunning = true;
+                setScanStatus('Scanner bereit.', 'ok');
+
+                if (toggleBtn) {
+                    toggleBtn.textContent = 'Scanner stoppen';
+                }
+            });
+        }, 50);
     }
 
-    function stopScanner() {
+    async function stopScanner() {
         if (!scannerRunning) return;
 
-        const readerWrap = document.getElementById('scanReaderWrap');
-        const toggleBtn = document.getElementById('toggleScannerBtn');
+        try {
+            Quagga.stop();
+        } catch (e) {
+            console.warn("Error stopping Quagga (it may not have been running):", e);
+        }
 
-        Quagga.stop();
         scannerRunning = false;
         activeScannerCallback = null;
 
-        if (readerWrap) readerWrap.style.display = 'none';
-        if (toggleBtn) toggleBtn.textContent = 'Scanner starten';
-        setScanStatus('Scanner gestoppt.', 'warn');
+        // Hide the container to free up UI space
+        const scannerWrap = document.querySelector('.library-scan-reader-wrap');
+        if (scannerWrap) {
+            scannerWrap.style.display = 'none';
+        }
+
+        const toggleBtn = document.getElementById('toggleScannerBtn');
+        if (toggleBtn) {
+            toggleBtn.textContent = 'Kamera Scanner'; // Reset button text
+        }
     }
 
     async function isStudentCardBarcode(code) {
@@ -1348,51 +1331,29 @@
         detailContent.innerHTML = '<p>Lade Details...</p>';
         detailModal.style.display = 'flex';
 
+        // Sicherer Zugriff auf das Item mit Fallback
         const item = libraryItems.find(i => i._id === itemId);
         let mediaHtml = '';
 
-        // Robuste Prüfung: Wir testen gängige Benennungen aus deinem Backend
-        const imageArray = item.Images || item.Bilder || item.images;
+        if (item) {
+            // Prüfe gängige Array-Namen aus dem Backend
+            const imageArray = item.Images || item.Bilder || item.images;
 
-        if (item && Array.isArray(imageArray) && imageArray.length > 0) {
-            const imagesHtml = imageArray.map((image, index) => {
+            if (Array.isArray(imageArray) && imageArray.length > 0) {
+                const imagesHtml = imageArray.map(image => {
+                    // Direkter, robuster Pfad zur Upload-Route
+                    const imageSrc = image.startsWith('/uploads/') || image.startsWith('http')
+                        ? image
+                        : `/uploads/${image}`;
 
-                // Dein neuer Code für die exakte Routen-Generierung
-                const imageSrc = image.startsWith('/uploads/') || image.startsWith('http') ?
-                    image :
-                    `{{ url_for('uploaded_file', filename='') }}${image}`;
+                    return `<img src="${imageSrc}" alt="${escapeHtml(item.Name || 'Medium')}" class="item-image" style="width: 120px; height: 120px; object-fit: cover; border-radius: 8px; border: 1px solid #ddd; margin-right: 15px; margin-bottom: 15px;">`;
+                }).join('');
 
-                const thumbnailInfo = item.ThumbnailInfo && item.ThumbnailInfo[index];
-                const isVideo = isVideoFile(image);
-
-                if (isVideo) {
-                    const videoSrc = thumbnailInfo && thumbnailInfo.has_thumbnail
-                        ? thumbnailInfo.thumbnail_url
-                        : imageSrc;
-
-                    if (thumbnailInfo && thumbnailInfo.has_thumbnail) {
-                        return `
-                    <div class="video-container" style="position: relative; width: 120px; height: 120px; display: inline-block; margin-right: 15px; margin-bottom: 15px;">
-                        <img src="${videoSrc}" alt="${escapeHtml(item.Name || 'Medium')}" class="item-image" style="width: 100%; height: 100%; object-fit: cover; border-radius: 8px; border: 1px solid #ddd;">
-                        <div class="video-preview-overlay" style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: white; background: rgba(0,0,0,0.6); border-radius: 50%; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; font-size: 16px;">
-                            ▶
-                        </div>
-                    </div>`;
-                    } else {
-                        return `<div style="width: 120px; height: 120px; background: #333; color: #fff; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; margin-right: 15px; margin-bottom: 15px;">VIDEO</div>`;
-                    }
-                } else {
-                    const imageSrcFinal = thumbnailInfo && thumbnailInfo.has_thumbnail
-                        ? thumbnailInfo.thumbnail_url
-                        : imageSrc;
-
-                    return `<img src="${imageSrcFinal}" alt="${escapeHtml(item.Name || 'Medium')}" class="item-image" style="width: 120px; height: 120px; object-fit: cover; border-radius: 8px; border: 1px solid #ddd; margin-right: 15px; margin-bottom: 15px;">`;
-                }
-            }).join('');
-
-            mediaHtml = `<div class="detail-gallery-container" style="margin-bottom: 20px; padding-bottom: 15px; border-bottom: 1px solid #eee; display: flex; flex-wrap: wrap;">${imagesHtml}</div>`;
+                mediaHtml = `<div class="detail-gallery-container" style="margin-bottom: 20px; padding-bottom: 15px; border-bottom: 1px solid #eee; display: flex; flex-wrap: wrap;">${imagesHtml}</div>`;
+            }
         }
 
+        // Zusätzliche Details vom Backend laden
         fetch(`/api/item_detail/${itemId}`)
             .then(response => {
                 if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`);
@@ -1407,7 +1368,7 @@
             });
     }
 
-    // Closes the modal via the 'x' button
+    // Schließt das Modal über den 'x'-Button
     function closeDetailModal() {
         document.getElementById('detailModal').style.display = 'none';
     }

Web/templates/student_cards_admin.html

@@ -232,6 +232,16 @@
             <h1>📚 Bibliotheksausweise (Bibliothek)</h1>
         </div>
         <div class="export-buttons">
+            <form method="GET" action="{{ url_for('student_card_class_barcode_download') }}" style="display: inline-flex; gap: 5px; align-items: center; background: white; padding: 2px; border-radius: 4px; border: 1px solid #ddd;">
+                <select name="class_name" required style="border: none; padding: 8px; outline: none; font-size: 14px; background: transparent; cursor: pointer;">
+                    <option value="" disabled selected>-- Klasse wählen --</option>
+                    {% for cls in available_classes %}
+                        <option value="{{ cls }}">{{ cls }}</option>
+                    {% endfor %}
+                </select>
+                <button type="submit" class="btn-print" style="background: #17a2b8; padding: 8px 12px; margin: 0;">📤 PDF</button>
+            </form>
+
             <a href="{{ url_for('student_card_barcode_download') }}" class="btn-print" style="background: #28a745;">📥 Alle Ausweise (PDF)</a>
             <a href="{{ url_for('library_admin') }}" class="btn btn-primary">← Zur Bibliotheks-Upload</a>
         </div>
@@ -283,9 +293,15 @@
                 </div>
                 <div class="form-group">
                     <label for="class_name">Klasse</label>
-                    <input type="text" id="class_name" name="class_name"
+                    <input type="text" id="class_name" name="class_name" list="class_list"
                            value="{{ form_data.get('class_name', '') }}"
-                           placeholder="z.B. 10A">
+                           placeholder="z.B. 10A (Tippen oder Auswählen)">
+
+                    <datalist id="class_list">
+                        {% for cls in available_classes %}
+                            <option value="{{ cls }}">
+                        {% endfor %}
+                    </datalist>
                 </div>
             </div>
 

Web/templates/upload_admin.html

@@ -836,7 +836,7 @@
                             <!-- Options will be loaded by JavaScript -->
                         </select>
                     </div>
-                    <div class="formupload_admin-group">
+                    <div class="form-group">
                         <label for="filter2-4">Wert 4:</label>
                         <select id="filter2-4" name="filter2" class="filter-dropdown-select">
                             <option value="">-- Optional --</option>
@@ -876,11 +876,11 @@
             </div>
 
 
-            <!-- Image upload (hidden for library mode) -->
+            <!-- Image upload -->
             <div class="form-group">
-                <label for="images">Bilder/Videos:</label>
-                <input type="file" id="images" name="images" accept=".jpg, .jpeg, .png, .gif, .mp4, .mov, .avi, .mkv, .webm, .flv, .m4v, .3gp" multiple>
-                <div class="allowed-formats">Erlaubte Formate: JPG, JPEG, PNG, GIF, MP4, MOV, AVI, MKV, WEBM, FLV, M4V, 3GP</div>
+                <label for="images">Bilder:</label>
+                <input type="file" id="images" name="images" accept=".jpg, .jpeg, .png, .gif" multiple>
+                <div class="allowed-formats">Erlaubte Formate: JPG, JPEG, PNG, GIF</div>
                 <!-- Add image preview area -->
                 <div class="image-preview-container" id="image-preview-container"></div>
             </div>
@@ -1857,28 +1857,25 @@
     function setupImagePreview() {
         const imageInput = document.getElementById('images');
         const previewContainer = document.getElementById('image-preview-container');
-        
+
         if (imageInput && previewContainer) {
             imageInput.addEventListener('change', function(e) {
                 previewContainer.innerHTML = '';
-                
+
                 const files = e.target.files;
-                
-                // Validate file types before preview
-                const allowedTypes = ['image/jpeg', 'image/jpg', 'image/png', 'image/gif', 
-                                    'video/mp4', 'video/quicktime', 'video/x-msvideo', 'video/x-matroska', 
-                                    'video/webm', 'video/x-flv', 'video/mp4', 'video/3gpp'];
-                let hasInvalidFile = false;
-                
+
+                // Validate file types before preview (Strictly Images)
+                const allowedTypes = ['image/jpeg', 'image/jpg', 'image/png', 'image/gif'];
+
                 for (let i = 0; i < files.length; i++) {
                     if (!allowedTypes.includes(files[i].type)) {
-                        hasInvalidFile = true;
                         // Clear the file input to prevent submission
                         imageInput.value = '';
-                        previewContainer.innerHTML = '<div class="error-message">Fehler: Datei "' + files[i].name + '" hat ein nicht unterstütztes Format. Erlaubte Formate: JPG, JPEG, PNG, GIF, MP4, MOV, AVI, MKV, WEBM, FLV, M4V, 3GP</div>';
+                        previewContainer.innerHTML = '<div class="error-message">Fehler: Datei "' + files[i].name + '" hat ein nicht unterstütztes Format. Erlaubte Formate: JPG, JPEG, PNG, GIF</div>';
                         return; // Stop processing
                     }
                 }
+
                 for (let i = 0; i < files.length; i++) {
                     const file = files[i];
                     if (file.type.startsWith('image/')) {
@@ -1893,17 +1890,6 @@
                             previewContainer.appendChild(preview);
                         };
                         reader.readAsDataURL(file);
-                    } else if (file.type.startsWith('video/')) {
-                        const preview = document.createElement('div');
-                        preview.className = 'image-preview video-preview';
-                        preview.innerHTML = `
-                            <div class="video-placeholder">
-                                <div class="video-icon">🎥</div>
-                                <div class="video-name">${file.name}</div>
-                            </div>
-                            <button type="button" class="remove-image" onclick="removeImagePreview(this, ${i})">×</button>
-                        `;
-                        previewContainer.appendChild(preview);
                     }
                 }
             });