Spaces:

akbit
/

lumemgallery

Running

App Files Files Community

akbit commited on Apr 8

Commit

5897dc4

verified ·

1 Parent(s): dd16ae3

Add 2 files

Browse files

Files changed (2) hide show

README.md +7 -5
index.html +574 -19

README.md CHANGED Viewed

@@ -1,10 +1,12 @@
 ---
-title: Lumemgallery
-emoji: 🌖
-colorFrom: purple
-colorTo: blue
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: lumemgallery
+emoji: 🐳
+colorFrom: red
+colorTo: yellow
 sdk: static
 pinned: false
+tags:
+  - deepsite
 ---
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

index.html CHANGED Viewed

@@ -1,19 +1,574 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<html lang="en" class="dark">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Lumen Gallery | Premium Photo Experience</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <script>
+        tailwind.config = {
+            darkMode: 'class',
+            theme: {
+                extend: {
+                    colors: {
+                        primary: {
+                            50: '#f0f9ff',
+                            100: '#e0f2fe',
+                            200: '#bae6fd',
+                            300: '#7dd3fc',
+                            400: '#38bdf8',
+                            500: '#0ea5e9',
+                            600: '#0284c7',
+                            700: '#0369a1',
+                            800: '#075985',
+                            900: '#0c4a6e',
+                        }
+                    },
+                    animation: {
+                        'fade-in': 'fadeIn 0.3s ease-in-out',
+                        'flip-in': 'flipIn 0.5s ease-out',
+                        'zoom-in': 'zoomIn 0.3s ease-out',
+                    },
+                    keyframes: {
+                        fadeIn: {
+                            '0%': { opacity: '0' },
+                            '100%': { opacity: '1' },
+                        },
+                        flipIn: {
+                            '0%': { transform: 'rotateY(90deg)', opacity: '0' },
+                            '100%': { transform: 'rotateY(0)', opacity: '1' },
+                        },
+                        zoomIn: {
+                            '0%': { transform: 'scale(0.95)', opacity: '0' },
+                            '100%': { transform: 'scale(1)', opacity: '1' },
+                        }
+                    }
+                }
+            }
+        }
+    </script>
+    <style>
+        .album-thumbnail {
+            transition: all 0.3s ease;
+            transform-style: preserve-3d;
+        }
+        .album-thumbnail:hover {
+            transform: translateY(-5px) scale(1.02);
+            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+        }
+        .flipbook {
+            perspective: 2000px;
+        }
+        .flipbook-page {
+            transform-style: preserve-3d;
+            backface-visibility: hidden;
+            transition: transform 0.8s;
+        }
+        .flipbook-page.flipped {
+            transform: rotateY(-180deg);
+        }
+        .flipbook-page-inner {
+            position: absolute;
+            width: 100%;
+            height: 100%;
+            backface-visibility: hidden;
+        }
+        .flipbook-page-back {
+            transform: rotateY(180deg);
+        }
+        .modal-overlay {
+            background-color: rgba(0, 0, 0, 0.85);
+            backdrop-filter: blur(8px);
+        }
+        .image-zoom {
+            transition: transform 0.3s ease;
+        }
+        .image-zoom:hover {
+            transform: scale(1.03);
+        }
+        .login-card {
+            box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+        }
+        .private-badge {
+            position: absolute;
+            top: 10px;
+            right: 10px;
+            z-index: 10;
+        }
+    </style>
+</head>
+<body class="bg-gray-50 dark:bg-gray-900 text-gray-800 dark:text-gray-200 min-h-screen transition-colors duration-300">
+    <!-- Navigation -->
+    <nav class="bg-white dark:bg-gray-800 shadow-sm py-4 px-6 sticky top-0 z-50">
+        <div class="max-w-7xl mx-auto flex justify-between items-center">
+            <div class="flex items-center space-x-2">
+                <i class="fas fa-camera-retro text-2xl text-primary-600 dark:text-primary-400"></i>
+                <span class="text-xl font-bold text-primary-600 dark:text-primary-400">Lumen Gallery</span>
+            </div>
+            <div class="flex items-center space-x-6">
+                <a href="#" class="hover:text-primary-600 dark:hover:text-primary-400 transition-colors">Home</a>
+                <a href="#" class="hover:text-primary-600 dark:hover:text-primary-400 transition-colors">Public Albums</a>
+                <a href="#" id="login-link" class="hover:text-primary-600 dark:hover:text-primary-400 transition-colors">Login</a>
+                <button id="theme-toggle" class="p-2 rounded-full hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors">
+                    <i class="fas fa-moon dark:hidden"></i>
+                    <i class="fas fa-sun hidden dark:block"></i>
+                </button>
+            </div>
+        </div>
+    </nav>
+    <!-- Main Content -->
+    <main class="max-w-7xl mx-auto py-8 px-4 sm:px-6 lg:px-8">
+        <div class="text-center mb-12">
+            <h1 class="text-4xl font-bold mb-4">Your Visual Journey</h1>
+            <p class="text-lg text-gray-600 dark:text-gray-400 max-w-2xl mx-auto">
+                Explore stunning collections of photography in our premium gallery experience.
+            </p>
+        </div>
+        <!-- Album Grid -->
+        <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-8" id="album-grid">
+            <!-- Albums will be dynamically inserted here -->
+        </div>
+    </main>
+    <!-- Login Modal -->
+    <div id="login-modal" class="fixed inset-0 z-50 flex items-center justify-center hidden">
+        <div class="modal-overlay absolute inset-0"></div>
+        <div class="login-card bg-white dark:bg-gray-800 rounded-xl p-8 relative z-10 w-full max-w-md animate-zoom-in">
+            <div class="text-center mb-8">
+                <h2 class="text-2xl font-bold mb-2">Welcome Back</h2>
+                <p class="text-gray-600 dark:text-gray-400">Sign in to access private albums</p>
+            </div>
+            <form id="login-form" class="space-y-6">
+                <div>
+                    <label for="username" class="block text-sm font-medium mb-1">Username</label>
+                    <input type="text" id="username" class="w-full px-4 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 focus:ring-2 focus:ring-primary-500 focus:border-primary-500 transition">
+                </div>
+                <div>
+                    <label for="password" class="block text-sm font-medium mb-1">Password</label>
+                    <input type="password" id="password" class="w-full px-4 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 focus:ring-2 focus:ring-primary-500 focus:border-primary-500 transition">
+                </div>
+                <div class="flex items-center justify-between">
+                    <div class="flex items-center">
+                        <input type="checkbox" id="remember" class="h-4 w-4 text-primary-600 focus:ring-primary-500 border-gray-300 rounded">
+                        <label for="remember" class="ml-2 block text-sm">Remember me</label>
+                    </div>
+                    <a href="#" class="text-sm text-primary-600 dark:text-primary-400 hover:underline">Forgot password?</a>
+                </div>
+                <button type="submit" class="w-full bg-primary-600 hover:bg-primary-700 text-white py-2 px-4 rounded-lg transition-colors duration-300">
+                    Sign In
+                </button>
+            </form>
+            <button id="close-login" class="absolute top-4 right-4 p-2 text-gray-500 hover:text-gray-700 dark:hover:text-gray-300">
+                <i class="fas fa-times"></i>
+            </button>
+        </div>
+    </div>
+    <!-- Flipbook Viewer -->
+    <div id="flipbook-viewer" class="fixed inset-0 z-50 flex items-center justify-center hidden">
+        <div class="modal-overlay absolute inset-0"></div>
+        <div class="relative z-10 w-full max-w-6xl mx-4">
+            <button id="close-flipbook" class="absolute -top-12 right-0 p-2 text-white hover:text-primary-400 transition-colors">
+                <i class="fas fa-times text-2xl"></i>
+            </button>
+            <div class="flipbook bg-white dark:bg-gray-800 rounded-xl overflow-hidden shadow-2xl">
+                <div class="relative h-96 md:h-[32rem]">
+                    <!-- Flipbook pages will be dynamically inserted here -->
+                </div>
+                <div class="flex justify-between items-center p-4 bg-gray-100 dark:bg-gray-700">
+                    <button id="prev-page" class="p-2 rounded-full hover:bg-gray-200 dark:hover:bg-gray-600 transition-colors disabled:opacity-50 disabled:cursor-not-allowed">
+                        <i class="fas fa-chevron-left text-xl"></i>
+                    </button>
+                    <span id="page-indicator" class="text-sm font-medium">Page 1 of 3</span>
+                    <button id="next-page" class="p-2 rounded-full hover:bg-gray-200 dark:hover:bg-gray-600 transition-colors">
+                        <i class="fas fa-chevron-right text-xl"></i>
+                    </button>
+                </div>
+            </div>
+        </div>
+    </div>
+    <!-- Image Modal -->
+    <div id="image-modal" class="fixed inset-0 z-50 flex items-center justify-center hidden">
+        <div class="modal-overlay absolute inset-0"></div>
+        <div class="relative z-10 w-full max-w-6xl mx-4">
+            <div class="flex justify-between items-center mb-4">
+                <div class="flex space-x-2">
+                    <button id="zoom-out" class="p-2 rounded-full bg-gray-800 bg-opacity-50 text-white hover:bg-opacity-70 transition-colors">
+                        <i class="fas fa-search-minus"></i>
+                    </button>
+                    <button id="download-image" class="p-2 rounded-full bg-gray-800 bg-opacity-50 text-white hover:bg-opacity-70 transition-colors">
+                        <i class="fas fa-download"></i>
+                    </button>
+                </div>
+                <button id="close-image" class="p-2 rounded-full bg-gray-800 bg-opacity-50 text-white hover:bg-opacity-70 transition-colors">
+                    <i class="fas fa-times"></i>
+                </button>
+            </div>
+            <div class="bg-white dark:bg-gray-800 rounded-xl overflow-hidden shadow-2xl max-h-[90vh] flex items-center justify-center">
+                <img id="modal-image" src="" alt="" class="max-w-full max-h-[85vh] object-contain">
+            </div>
+        </div>
+    </div>
+    <!-- Upload Button (for admin) -->
+    <div id="upload-section" class="fixed bottom-8 right-8 hidden">
+        <button id="upload-btn" class="p-4 bg-primary-600 hover:bg-primary-700 text-white rounded-full shadow-lg transition-colors duration-300">
+            <i class="fas fa-plus text-xl"></i>
+        </button>
+    </div>
+    <script>
+        // Sample album data
+        const albums = [
+            {
+                id: 1,
+                title: "Mountain Escapes",
+                thumbnail: "https://source.unsplash.com/random/600x400/?mountain",
+                photoCount: 12,
+                isPublic: true,
+                photos: [
+                    "https://source.unsplash.com/random/800x600/?mountain,1",
+                    "https://source.unsplash.com/random/800x600/?mountain,2",
+                    "https://source.unsplash.com/random/800x600/?mountain,3",
+                    "https://source.unsplash.com/random/800x600/?mountain,4",
+                    "https://source.unsplash.com/random/800x600/?mountain,5",
+                    "https://source.unsplash.com/random/800x600/?mountain,6"
+                ]
+            },
+            {
+                id: 2,
+                title: "Urban Landscapes",
+                thumbnail: "https://source.unsplash.com/random/600x400/?city",
+                photoCount: 8,
+                isPublic: true,
+                photos: [
+                    "https://source.unsplash.com/random/800x600/?city,1",
+                    "https://source.unsplash.com/random/800x600/?city,2",
+                    "https://source.unsplash.com/random/800x600/?city,3",
+                    "https://source.unsplash.com/random/800x600/?city,4"
+                ]
+            },
+            {
+                id: 3,
+                title: "Ocean Wonders",
+                thumbnail: "https://source.unsplash.com/random/600x400/?ocean",
+                photoCount: 15,
+                isPublic: true,
+                photos: [
+                    "https://source.unsplash.com/random/800x600/?ocean,1",
+                    "https://source.unsplash.com/random/800x600/?ocean,2",
+                    "https://source.unsplash.com/random/800x600/?ocean,3",
+                    "https://source.unsplash.com/random/800x600/?ocean,4",
+                    "https://source.unsplash.com/random/800x600/?ocean,5",
+                    "https://source.unsplash.com/random/800x600/?ocean,6",
+                    "https://source.unsplash.com/random/800x600/?ocean,7"
+                ]
+            },
+            {
+                id: 4,
+                title: "Family Memories",
+                thumbnail: "https://source.unsplash.com/random/600x400/?family",
+                photoCount: 20,
+                isPublic: false,
+                photos: [
+                    "https://source.unsplash.com/random/800x600/?family,1",
+                    "https://source.unsplash.com/random/800x600/?family,2",
+                    "https://source.unsplash.com/random/800x600/?family,3",
+                    "https://source.unsplash.com/random/800x600/?family,4",
+                    "https://source.unsplash.com/random/800x600/?family,5",
+                    "https://source.unsplash.com/random/800x600/?family,6",
+                    "https://source.unsplash.com/random/800x600/?family,7",
+                    "https://source.unsplash.com/random/800x600/?family,8",
+                    "https://source.unsplash.com/random/800x600/?family,9",
+                    "https://source.unsplash.com/random/800x600/?family,10"
+                ]
+            },
+            {
+                id: 5,
+                title: "Wildlife Adventures",
+                thumbnail: "https://source.unsplash.com/random/600x400/?wildlife",
+                photoCount: 18,
+                isPublic: true,
+                photos: [
+                    "https://source.unsplash.com/random/800x600/?wildlife,1",
+                    "https://source.unsplash.com/random/800x600/?wildlife,2",
+                    "https://source.unsplash.com/random/800x600/?wildlife,3",
+                    "https://source.unsplash.com/random/800x600/?wildlife,4",
+                    "https://source.unsplash.com/random/800x600/?wildlife,5",
+                    "https://source.unsplash.com/random/800x600/?wildlife,6",
+                    "https://source.unsplash.com/random/800x600/?wildlife,7",
+                    "https://source.unsplash.com/random/800x600/?wildlife,8",
+                    "https://source.unsplash.com/random/800x600/?wildlife,9"
+                ]
+            },
+            {
+                id: 6,
+                title: "Architectural Marvels",
+                thumbnail: "https://source.unsplash.com/random/600x400/?architecture",
+                photoCount: 14,
+                isPublic: true,
+                photos: [
+                    "https://source.unsplash.com/random/800x600/?architecture,1",
+                    "https://source.unsplash.com/random/800x600/?architecture,2",
+                    "https://source.unsplash.com/random/800x600/?architecture,3",
+                    "https://source.unsplash.com/random/800x600/?architecture,4",
+                    "https://source.unsplash.com/random/800x600/?architecture,5",
+                    "https://source.unsplash.com/random/800x600/?architecture,6",
+                    "https://source.unsplash.com/random/800x600/?architecture,7"
+                ]
+            }
+        ];
+        // State variables
+        let currentUser = null;
+        let currentAlbum = null;
+        let currentPage = 0;
+        let totalPages = 0;
+        let isLoggedIn = false;
+        // DOM elements
+        const albumGrid = document.getElementById('album-grid');
+        const loginModal = document.getElementById('login-modal');
+        const loginLink = document.getElementById('login-link');
+        const closeLogin = document.getElementById('close-login');
+        const loginForm = document.getElementById('login-form');
+        const flipbookViewer = document.getElementById('flipbook-viewer');
+        const closeFlipbook = document.getElementById('close-flipbook');
+        const prevPageBtn = document.getElementById('prev-page');
+        const nextPageBtn = document.getElementById('next-page');
+        const pageIndicator = document.getElementById('page-indicator');
+        const imageModal = document.getElementById('image-modal');
+        const modalImage = document.getElementById('modal-image');
+        const closeImage = document.getElementById('close-image');
+        const zoomOutBtn = document.getElementById('zoom-out');
+        const downloadImageBtn = document.getElementById('download-image');
+        const themeToggle = document.getElementById('theme-toggle');
+        const uploadSection = document.getElementById('upload-section');
+        const uploadBtn = document.getElementById('upload-btn');
+        // Initialize the gallery
+        function initGallery() {
+            renderAlbums();
+            setupEventListeners();
+            checkDarkModePreference();
+        }
+        // Render albums to the grid
+        function renderAlbums() {
+            albumGrid.innerHTML = '';
+            const filteredAlbums = albums.filter(album => {
+                return album.isPublic || isLoggedIn;
+            });
+            filteredAlbums.forEach(album => {
+                const albumElement = document.createElement('div');
+                albumElement.className = 'album-thumbnail bg-white dark:bg-gray-800 rounded-xl overflow-hidden shadow-lg cursor-pointer relative';
+                albumElement.innerHTML = `
+                    <div class="relative h-48 overflow-hidden">
+                        <img src="${album.thumbnail}" alt="${album.title}" class="w-full h-full object-cover transition-transform duration-300 hover:scale-105">
+                        ${!album.isPublic ? '<span class="private-badge bg-primary-600 text-white text-xs px-2 py-1 rounded-full">Private</span>' : ''}
+                    </div>
+                    <div class="p-4">
+                        <h3 class="font-semibold text-lg mb-1">${album.title}</h3>
+                        <p class="text-sm text-gray-600 dark:text-gray-400">${album.photoCount} photos</p>
+                    </div>
+                `;
+                albumElement.addEventListener('click', () => openAlbum(album));
+                albumGrid.appendChild(albumElement);
+            });
+        }
+        // Open an album in the flipbook viewer
+        function openAlbum(album) {
+            if (!album.isPublic && !isLoggedIn) {
+                openLoginModal();
+                return;
+            }
+            currentAlbum = album;
+            currentPage = 0;
+            totalPages = Math.ceil(album.photos.length / 2);
+            renderFlipbook();
+            flipbookViewer.classList.remove('hidden');
+            document.body.style.overflow = 'hidden';
+        }
+        // Render the flipbook pages
+        function renderFlipbook() {
+            const flipbookContainer = flipbookViewer.querySelector('.flipbook > div');
+            flipbookContainer.innerHTML = '';
+            // Create pages with 2 photos each
+            for (let i = 0; i < currentAlbum.photos.length; i += 2) {
+                const page = document.createElement('div');
+                page.className = 'flipbook-page absolute inset-0 w-full h-full';
+                page.style.transform = i === 0 ? 'rotateY(0)' : 'rotateY(180deg)';
+                page.style.display = i === 0 ? 'block' : 'none';
+                const front = document.createElement('div');
+                front.className = 'flipbook-page-inner flex';
+                const photo1 = document.createElement('div');
+                photo1.className = 'w-1/2 p-4 flex items-center justify-center';
+                photo1.innerHTML = `<img src="${currentAlbum.photos[i]}" alt="Photo ${i+1}" class="max-h-full max-w-full rounded-lg shadow-md cursor-pointer image-zoom">`;
+                photo1.querySelector('img').addEventListener('click', () => openImageModal(currentAlbum.photos[i]));
+                const photo2 = document.createElement('div');
+                photo2.className = 'w-1/2 p-4 flex items-center justify-center';
+                if (i + 1 < currentAlbum.photos.length) {
+                    photo2.innerHTML = `<img src="${currentAlbum.photos[i+1]}" alt="Photo ${i+2}" class="max-h-full max-w-full rounded-lg shadow-md cursor-pointer image-zoom">`;
+                    photo2.querySelector('img').addEventListener('click', () => openImageModal(currentAlbum.photos[i+1]));
+                } else {
+                    photo2.innerHTML = '<div class="w-full h-full flex items-center justify-center bg-gray-100 dark:bg-gray-700 rounded-lg"><p class="text-gray-500 dark:text-gray-400">No photo</p></div>';
+                }
+                front.appendChild(photo1);
+                front.appendChild(photo2);
+                page.appendChild(front);
+                // For a real flipbook effect, we'd have back sides too, but we'll keep it simple
+                flipbookContainer.appendChild(page);
+            }
+            updatePageControls();
+        }
+        // Update flipbook page controls
+        function updatePageControls() {
+            pageIndicator.textContent = `Page ${currentPage + 1} of ${totalPages}`;
+            prevPageBtn.disabled = currentPage === 0;
+            nextPageBtn.disabled = currentPage === totalPages - 1;
+            // Show/hide pages
+            const pages = flipbookViewer.querySelectorAll('.flipbook-page');
+            pages.forEach((page, index) => {
+                page.style.display = index === currentPage ? 'block' : 'none';
+            });
+        }
+        // Open image modal
+        function openImageModal(imageUrl) {
+            modalImage.src = imageUrl;
+            modalImage.alt = "Enlarged photo";
+            imageModal.classList.remove('hidden');
+            document.body.style.overflow = 'hidden';
+        }
+        // Open login modal
+        function openLoginModal() {
+            loginModal.classList.remove('hidden');
+            document.body.style.overflow = 'hidden';
+        }
+        // Close login modal
+        function closeLoginModal() {
+            loginModal.classList.add('hidden');
+            document.body.style.overflow = '';
+        }
+        // Close flipbook viewer
+        function closeFlipbookViewer() {
+            flipbookViewer.classList.add('hidden');
+            document.body.style.overflow = '';
+        }
+        // Close image modal
+        function closeImageModal() {
+            imageModal.classList.add('hidden');
+            document.body.style.overflow = '';
+        }
+        // Setup event listeners
+        function setupEventListeners() {
+            // Login link
+            loginLink.addEventListener('click', (e) => {
+                e.preventDefault();
+                openLoginModal();
+            });
+            // Close login modal
+            closeLogin.addEventListener('click', closeLoginModal);
+            // Login form submission
+            loginForm.addEventListener('submit', (e) => {
+                e.preventDefault();
+                const username = document.getElementById('username').value;
+                const password = document.getElementById('password').value;
+                // Simple authentication (in a real app, this would be a server call)
+                if (username === 'admin' && password === 'password') {
+                    isLoggedIn = true;
+                    currentUser = { username: 'admin' };
+                    closeLoginModal();
+                    renderAlbums();
+                    uploadSection.classList.remove('hidden');
+                } else {
+                    alert('Invalid credentials. Try admin/password');
+                }
+            });
+            // Close flipbook
+            closeFlipbook.addEventListener('click', closeFlipbookViewer);
+            // Flipbook navigation
+            prevPageBtn.addEventListener('click', () => {
+                if (currentPage > 0) {
+                    currentPage--;
+                    updatePageControls();
+                }
+            });
+            nextPageBtn.addEventListener('click', () => {
+                if (currentPage < totalPages - 1) {
+                    currentPage++;
+                    updatePageControls();
+                }
+            });
+            // Close image modal
+            closeImage.addEventListener('click', closeImageModal);
+            // Zoom out button (placeholder functionality)
+            zoomOutBtn.addEventListener('click', () => {
+                modalImage.style.transform = 'scale(1)';
+            });
+            // Download button (placeholder functionality)
+            downloadImageBtn.addEventListener('click', () => {
+                alert('Download functionality would be implemented here');
+            });
+            // Theme toggle
+            themeToggle.addEventListener('click', () => {
+                document.documentElement.classList.toggle('dark');
+                localStorage.setItem('darkMode', document.documentElement.classList.contains('dark'));
+            });
+            // Upload button (placeholder functionality)
+            uploadBtn.addEventListener('click', () => {
+                alert('Upload functionality would be implemented here');
+            });
+        }
+        // Check user's dark mode preference
+        function checkDarkModePreference() {
+            if (localStorage.getItem('darkMode') === 'true' ||
+                (!localStorage.getItem('darkMode') && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
+                document.documentElement.classList.add('dark');
+            } else {
+                document.documentElement.classList.remove('dark');
+            }
+        }
+        // Initialize the gallery when the DOM is loaded
+        document.addEventListener('DOMContentLoaded', initGallery);
+    </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=akbit/lumemgallery" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
+</html>