move html to static folder

2026-01-16 07:57:33 +01:00
parent 4d9e0836e5
commit 45c400e7d3
5 changed files with 6 additions and 5 deletions
--- a/web/static/manage.html
+++ b/web/static/manage.html
@@ -0,0 +1,87 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Manage Files</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+</head>
+<body class="bg-gray-50 min-h-screen p-6">
+    <div class="max-w-2xl mx-auto bg-white rounded-xl shadow-lg p-8 border border-gray-100">
+        
+        <div class="flex justify-between items-center mb-8">
+            <div>
+                <h1 class="text-2xl font-bold text-gray-800">Gallery Manager</h1>
+                <p class="text-gray-500 text-sm">Select files to remove from the slideshow</p>
+            </div>
+            <a href="/" class="text-sm text-blue-600 hover:underline">← Back to Upload</a>
+        </div>
+
+        <div class="flex items-center justify-between bg-gray-50 p-4 rounded-t-lg border-b border-gray-200">
+            <label class="flex items-center gap-2 cursor-pointer">
+                <input type="checkbox" id="selectAll" onclick="toggleAll(this)" class="w-4 h-4 rounded text-blue-600">
+                <span class="text-sm font-medium text-gray-700">Select All</span>
+            </label>
+            <button onclick="deleteSelected()" class="bg-red-500 hover:bg-red-600 text-white text-xs font-bold py-2 px-4 rounded-lg transition-all shadow-sm">
+                Delete Selected
+            </button>
+        </div>
+
+        <div id="fileContainer" class="border border-gray-200 border-t-0 rounded-b-lg max-h-[500px] overflow-y-auto">
+            <div class="p-8 text-center text-gray-400">Loading files...</div>
+        </div>
+    </div>
+
+    <script>
+        async function fetchFiles() {
+            const res = await fetch('/api/images');
+            const files = await res.json();
+            const container = document.getElementById('fileContainer');
+            container.innerHTML = '';
+
+            if (files.length === 0) {
+                container.innerHTML = '<div class="p-8 text-center text-gray-400">No images found.</div>';
+                return;
+            }
+
+            files.forEach(file => {
+                const div = document.createElement('div');
+                div.className = "flex items-center gap-4 p-4 border-b border-gray-100 hover:bg-gray-50 transition-colors";
+                div.innerHTML = `
+                    <input type="checkbox" name="fileCheck" value="${file}" class="file-checkbox w-4 h-4 rounded text-blue-600">
+                    <img src="/uploads/${file}" class="w-12 h-12 object-cover rounded shadow-sm">
+                    <span class="text-sm text-gray-700 truncate flex-1">${file}</span>
+                `;
+                container.appendChild(div);
+            });
+        }
+
+        function toggleAll(source) {
+            checkboxes = document.getElementsByClassName('file-checkbox');
+            for(var i=0, n=checkboxes.length;i<n;i++) {
+                checkboxes[i].checked = source.checked;
+            }
+        }
+
+        async function deleteSelected() {
+            const checked = document.querySelectorAll('.file-checkbox:checked');
+            const filesToDelete = Array.from(checked).map(cb => cb.value);
+
+            if (filesToDelete.length === 0) return alert("Select files first!");
+            if (!confirm(`Delete ${filesToDelete.length} files?`)) return;
+
+            const res = await fetch('/api/delete', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify(filesToDelete)
+            });
+
+            if (res.ok) {
+                fetchFiles(); // Refresh list
+                document.getElementById('selectAll').checked = false;
+            }
+        }
+
+        fetchFiles();
+    </script>
+</body>
+</html>