Add 1 files

index.html

@@ -5,6 +5,9 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Simple Image Gallery</title>
     <script src="https://cdn.tailwindcss.com"></script>
+    <!-- Firebase SDK -->
+    <script src="https://www.gstatic.com/firebasejs/9.6.0/firebase-app-compat.js"></script>
+    <script src="https://www.gstatic.com/firebasejs/9.6.0/firebase-storage-compat.js"></script>
     <style>
         .gallery-item {
             transition: all 0.3s ease;
@@ -48,23 +51,25 @@
         
         <!-- Gallery Grid -->
         <div id="gallery-grid" class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
-            <!-- Sample images (would be loaded from storage in real implementation) -->
-            <div class="gallery-item bg-white rounded-lg overflow-hidden shadow">
-                <img src="https://source.unsplash.com/random/300x300/?nature" alt="Gallery image" class="w-full h-48 object-cover">
-                <div class="p-3">
-                    <p class="text-sm text-gray-600">Uploaded: Just now</p>
-                </div>
-            </div>
-            <div class="gallery-item bg-white rounded-lg overflow-hidden shadow">
-                <img src="https://source.unsplash.com/random/300x300/?city" alt="Gallery image" class="w-full h-48 object-cover">
-                <div class="p-3">
-                    <p class="text-sm text-gray-600">Uploaded: Just now</p>
-                </div>
-            </div>
+            <!-- Images will be loaded here -->
         </div>
     </div>
 
     <script>
+        // Firebase configuration
+        const firebaseConfig = {
+            apiKey: "AIzaSyD3JgJvV8X9X9X9X9X9X9X9X9X9X9X9X9X9X9",
+            authDomain: "your-project-id.firebaseapp.com",
+            projectId: "your-project-id",
+            storageBucket: "your-project-id.appspot.com",
+            messagingSenderId: "123456789012",
+            appId: "1:123456789012:web:9X9X9X9X9X9X9X9X9X9X9"
+        };
+
+        // Initialize Firebase
+        firebase.initializeApp(firebaseConfig);
+        const storage = firebase.storage();
+
         // DOM elements
         const dropArea = document.getElementById('drop-area');
         const fileElem = document.getElementById('fileElem');
@@ -74,6 +79,9 @@
         const progressBar = document.getElementById('progress-bar');
         const progressText = document.getElementById('progress-text');
         
+        // Load existing images when page loads
+        window.addEventListener('load', loadImages);
+        
         // Prevent default drag behaviors
         ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
             dropArea.addEventListener(eventName, preventDefaults, false);
@@ -120,56 +128,74 @@
             handleFiles(this.files);
         });
         
-        // Process files
+        // Load existing images from Firebase Storage
+        async function loadImages() {
+            try {
+                const storageRef = storage.ref();
+                const result = await storageRef.listAll();
+                
+                result.items.forEach(async (itemRef) => {
+                    const url = await itemRef.getDownloadURL();
+                    addImageToGallery(url, new Date().toLocaleString());
+                });
+            } catch (error) {
+                console.error("Error loading images:", error);
+            }
+        }
+        
+        // Process files and upload to Firebase
         function handleFiles(files) {
             if (files.length === 0) return;
             
             progressContainer.classList.remove('hidden');
             
-            // Simulate upload progress (in a real app, this would be an actual upload)
-            let progress = 0;
-            const interval = setInterval(() => {
-                progress += 5;
-                progressBar.style.width = `${progress}%`;
-                progressText.textContent = `Uploading: ${progress}%`;
+            for (let i = 0; i < files.length; i++) {
+                const file = files[i];
+                if (!file.type.match('image.*')) continue;
                 
-                if (progress >= 100) {
-                    clearInterval(interval);
-                    setTimeout(() => {
+                // Create unique filename
+                const filename = Date.now() + '_' + file.name;
+                const storageRef = storage.ref().child(filename);
+                const uploadTask = storageRef.put(file);
+                
+                uploadTask.on('state_changed', 
+                    (snapshot) => {
+                        // Progress tracking
+                        const progress = (snapshot.bytesTransferred / snapshot.totalBytes) * 100;
+                        progressBar.style.width = `${progress}%`;
+                        progressText.textContent = `Uploading: ${Math.round(progress)}%`;
+                    },
+                    (error) => {
+                        console.error("Upload error:", error);
                         progressContainer.classList.add('hidden');
-                        progressBar.style.width = '0%';
-                        progressText.textContent = 'Uploading: 0%';
-                        
-                        // Add uploaded images to gallery
-                        for (let i = 0; i < files.length; i++) {
-                            const file = files[i];
-                            if (!file.type.match('image.*')) continue;
+                    },
+                    () => {
+                        // Upload complete
+                        uploadTask.snapshot.ref.getDownloadURL().then((downloadURL) => {
+                            progressContainer.classList.add('hidden');
+                            progressBar.style.width = '0%';
+                            progressText.textContent = 'Uploading: 0%';
                             
-                            const reader = new FileReader();
-                            reader.onload = (function(theFile) {
-                                return function(e) {
-                                    const galleryItem = document.createElement('div');
-                                    galleryItem.className = 'gallery-item bg-white rounded-lg overflow-hidden shadow';
-                                    galleryItem.innerHTML = `
-                                        <img src="${e.target.result}" alt="Gallery image" class="w-full h-48 object-cover">
-                                        <div class="p-3">
-                                            <p class="text-sm text-gray-600">Uploaded: Just now</p>
-                                        </div>
-                                    `;
-                                    galleryGrid.insertBefore(galleryItem, galleryGrid.firstChild);
-                                };
-                            })(file);
-                            reader.readAsDataURL(file);
-                        }
-                    }, 500);
-                }
-            }, 100);
+                            // Add to gallery
+                            addImageToGallery(downloadURL, new Date().toLocaleString());
+                        });
+                    }
+                );
+            }
         }
         
-        // In a real implementation, you would need server-side code to:
-        // 1. Actually save the uploaded files to storage
-        // 2. Retrieve the list of images to display in the gallery
-        // 3. Handle potential security concerns with anonymous uploads
+        // Add image to gallery
+        function addImageToGallery(url, timestamp) {
+            const galleryItem = document.createElement('div');
+            galleryItem.className = 'gallery-item bg-white rounded-lg overflow-hidden shadow';
+            galleryItem.innerHTML = `
+                <img src="${url}" alt="Gallery image" class="w-full h-48 object-cover">
+                <div class="p-3">
+                    <p class="text-sm text-gray-600">Uploaded: ${timestamp}</p>
+                </div>
+            `;
+            galleryGrid.insertBefore(galleryItem, galleryGrid.firstChild);
+        }
     </script>
 <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=vorstcavry/simple-galery" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
 </html>