Spaces:

jerome-dreville
/

arc-galeries

Running

App Files Files Community

jerome-dreville commited on Jul 30

Commit

dcf8a5b

verified ·

1 Parent(s): 45cc9ef

Créer moi une page qui affiche les galeries photos et les photos de nos événements. - Initial Deployment

Browse files

Files changed (2) hide show

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

README.md CHANGED Viewed

@@ -1,10 +1,12 @@
 ---
-title: Arc Galeries
-emoji: 📊
-colorFrom: pink
-colorTo: indigo
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: arc-galeries
+emoji: 🐳
+colorFrom: blue
+colorTo: gray
 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,416 @@
-<!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="fr">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Galerie Photo - Nos Événements</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">
+    <style>
+        .gallery-item {
+            transition: all 0.3s ease;
+        }
+        .gallery-item:hover {
+            transform: scale(1.03);
+            box-shadow: 0 10px 20px rgba(0,0,0,0.2);
+        }
+        .filter-btn.active {
+            background-color: #3b82f6;
+            color: white;
+        }
+        .modal {
+            transition: opacity 0.3s ease;
+        }
+        .modal-content {
+            max-height: 90vh;
+        }
+    </style>
+</head>
+<body class="bg-gray-50 font-sans">
+    <!-- Header -->
+    <header class="bg-white shadow-sm">
+        <div class="container mx-auto px-4 py-6">
+            <h1 class="text-3xl md:text-4xl font-bold text-center text-blue-600">Galerie Photo de Nos Événements</h1>
+            <p class="text-center text-gray-600 mt-2">Revivez les moments forts de nos événements passés</p>
+        </div>
+    </header>
+    <!-- Main Content -->
+    <main class="container mx-auto px-4 py-8">
+        <!-- Filter Buttons -->
+        <div class="flex flex-wrap justify-center gap-2 mb-8">
+            <button class="filter-btn active px-4 py-2 rounded-full bg-gray-200 text-gray-800 hover:bg-blue-100 transition" data-filter="all">
+                <i class="fas fa-layer-group mr-2"></i>Tous
+            </button>
+            <button class="filter-btn px-4 py-2 rounded-full bg-gray-200 text-gray-800 hover:bg-blue-100 transition" data-filter="mariage">
+                <i class="fas fa-ring mr-2"></i>Mariages
+            </button>
+            <button class="filter-btn px-4 py-2 rounded-full bg-gray-200 text-gray-800 hover:bg-blue-100 transition" data-filter="anniversaire">
+                <i class="fas fa-birthday-cake mr-2"></i>Anniversaires
+            </button>
+            <button class="filter-btn px-4 py-2 rounded-full bg-gray-200 text-gray-800 hover:bg-blue-100 transition" data-filter="entreprise">
+                <i class="fas fa-briefcase mr-2"></i>Événements d'entreprise
+            </button>
+            <button class="filter-btn px-4 py-2 rounded-full bg-gray-200 text-gray-800 hover:bg-blue-100 transition" data-filter="culturel">
+                <i class="fas fa-theater-masks mr-2"></i>Événements culturels
+            </button>
+        </div>
+        <!-- Gallery Grid -->
+        <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6" id="gallery-grid">
+            <!-- Gallery items will be inserted here by JavaScript -->
+        </div>
+        <!-- Load More Button -->
+        <div class="text-center mt-10">
+            <button id="load-more" class="px-6 py-3 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition shadow-md">
+                <i class="fas fa-plus-circle mr-2"></i>Charger plus de photos
+            </button>
+        </div>
+    </main>
+    <!-- Image Modal -->
+    <div id="image-modal" class="modal fixed inset-0 bg-black bg-opacity-80 z-50 flex items-center justify-center hidden">
+        <div class="modal-content bg-white rounded-lg overflow-hidden max-w-4xl w-full mx-4">
+            <div class="flex justify-between items-center bg-gray-100 px-4 py-2">
+                <h3 class="text-lg font-semibold" id="modal-title">Titre de l'image</h3>
+                <button id="close-modal" class="text-gray-600 hover:text-gray-900">
+                    <i class="fas fa-times text-2xl"></i>
+                </button>
+            </div>
+            <div class="p-4">
+                <img id="modal-image" src="" alt="" class="w-full h-auto max-h-[70vh] object-contain">
+                <p id="modal-description" class="text-gray-700 mt-4"></p>
+                <div class="flex justify-between items-center mt-4">
+                    <button id="prev-btn" class="px-4 py-2 bg-gray-200 rounded hover:bg-gray-300">
+                        <i class="fas fa-chevron-left mr-2"></i>Précédent
+                    </button>
+                    <button id="next-btn" class="px-4 py-2 bg-gray-200 rounded hover:bg-gray-300">
+                        Suivant<i class="fas fa-chevron-right ml-2"></i>
+                    </button>
+                </div>
+            </div>
+        </div>
+    </div>
+    <!-- Footer -->
+    <footer class="bg-gray-800 text-white py-8 mt-12">
+        <div class="container mx-auto px-4">
+            <div class="flex flex-col md:flex-row justify-between items-center">
+                <div class="mb-4 md:mb-0">
+                    <h2 class="text-xl font-bold">Notre Galerie Photo</h2>
+                    <p class="text-gray-400">Capturant vos moments précieux depuis 2010</p>
+                </div>
+                <div class="flex space-x-4">
+                    <a href="#" class="text-gray-400 hover:text-white transition">
+                        <i class="fab fa-facebook-f text-xl"></i>
+                    </a>
+                    <a href="#" class="text-gray-400 hover:text-white transition">
+                        <i class="fab fa-instagram text-xl"></i>
+                    </a>
+                    <a href="#" class="text-gray-400 hover:text-white transition">
+                        <i class="fab fa-pinterest-p text-xl"></i>
+                    </a>
+                </div>
+            </div>
+            <div class="border-t border-gray-700 mt-6 pt-6 text-center text-gray-400">
+                <p>&copy; 2023 Galerie Photo Événements. Tous droits réservés.</p>
+            </div>
+        </div>
+    </footer>
+    <script>
+        // Sample gallery data
+        const galleryData = [
+            {
+                id: 1,
+                title: "Mariage d'été",
+                category: "mariage",
+                image: "https://source.unsplash.com/random/600x400/?wedding,1",
+                description: "Un magnifique mariage en plein air avec décoration florale."
+            },
+            {
+                id: 2,
+                title: "Anniversaire surprise",
+                category: "anniversaire",
+                image: "https://source.unsplash.com/random/600x400/?birthday,1",
+                description: "Fête d'anniversaire surprise organisée pour les 40 ans de Marie."
+            },
+            {
+                id: 3,
+                title: "Conférence annuelle",
+                category: "entreprise",
+                image: "https://source.unsplash.com/random/600x400/?conference,1",
+                description: "Notre conférence annuelle avec plus de 200 participants."
+            },
+            {
+                id: 4,
+                title: "Festival culturel",
+                category: "culturel",
+                image: "https://source.unsplash.com/random/600x400/?festival,1",
+                description: "Participation au festival culturel régional 2023."
+            },
+            {
+                id: 5,
+                title: "Mariage traditionnel",
+                category: "mariage",
+                image: "https://source.unsplash.com/random/600x400/?wedding,2",
+                description: "Cérémonie de mariage traditionnelle avec costumes régionaux."
+            },
+            {
+                id: 6,
+                title: "Team building",
+                category: "entreprise",
+                image: "https://source.unsplash.com/random/600x400/?team,building",
+                description: "Activités de team building pour renforcer la cohésion d'équipe."
+            },
+            {
+                id: 7,
+                title: "Anniversaire enfant",
+                category: "anniversaire",
+                image: "https://source.unsplash.com/random/600x400/?kids,birthday",
+                description: "Fête d'anniversaire thématique pour les 8 ans de Lucas."
+            },
+            {
+                id: 8,
+                title: "Spectacle de danse",
+                category: "culturel",
+                image: "https://source.unsplash.com/random/600x400/?dance,show",
+                description: "Représentation de danse contemporaine lors du festival des arts."
+            },
+            {
+                id: 9,
+                title: "Mariage plage",
+                category: "mariage",
+                image: "https://source.unsplash.com/random/600x400/?beach,wedding",
+                description: "Cérémonie de mariage romantique au coucher du soleil."
+            },
+            {
+                id: 10,
+                title: "Lancement produit",
+                category: "entreprise",
+                image: "https://source.unsplash.com/random/600x400/?product,launch",
+                description: "Événement de lancement de notre nouveau produit phare."
+            },
+            {
+                id: 11,
+                title: "Anniversaire vintage",
+                category: "anniversaire",
+                image: "https://source.unsplash.com/random/600x400/?vintage,party",
+                description: "Fête d'anniversaire sur le thème des années 60."
+            },
+            {
+                id: 12,
+                title: "Exposition artistique",
+                category: "culturel",
+                image: "https://source.unsplash.com/random/600x400/?art,exhibition",
+                description: "Vernissage de notre exposition d'art contemporain."
+            }
+        ];
+        // DOM Elements
+        const galleryGrid = document.getElementById('gallery-grid');
+        const filterButtons = document.querySelectorAll('.filter-btn');
+        const loadMoreBtn = document.getElementById('load-more');
+        const modal = document.getElementById('image-modal');
+        const modalImage = document.getElementById('modal-image');
+        const modalTitle = document.getElementById('modal-title');
+        const modalDescription = document.getElementById('modal-description');
+        const closeModal = document.getElementById('close-modal');
+        const prevBtn = document.getElementById('prev-btn');
+        const nextBtn = document.getElementById('next-btn');
+        // Variables
+        let currentFilter = 'all';
+        let displayedItems = 8;
+        let currentImageIndex = 0;
+        let filteredGallery = [];
+        // Initialize gallery
+        function initGallery() {
+            renderGallery();
+            setupEventListeners();
+        }
+        // Render gallery based on filter
+        function renderGallery() {
+            galleryGrid.innerHTML = '';
+            // Filter gallery items
+            filteredGallery = currentFilter === 'all'
+                ? galleryData
+                : galleryData.filter(item => item.category === currentFilter);
+            // Display limited number of items
+            const itemsToDisplay = filteredGallery.slice(0, displayedItems);
+            // Create gallery items
+            itemsToDisplay.forEach((item, index) => {
+                const galleryItem = document.createElement('div');
+                galleryItem.className = 'gallery-item bg-white rounded-lg overflow-hidden shadow-md cursor-pointer relative group';
+                galleryItem.dataset.category = item.category;
+                galleryItem.dataset.index = index;
+                galleryItem.innerHTML = `
+                    <div class="relative overflow-hidden">
+                        <img src="${item.image}" alt="${item.title}" class="w-full h-48 sm:h-56 object-cover transition duration-300 group-hover:scale-105">
+                        <div class="absolute inset-0 bg-black bg-opacity-30 flex items-center justify-center opacity-0 group-hover:opacity-100 transition">
+                            <span class="text-white text-lg font-medium"><i class="fas fa-search-plus mr-2"></i>Voir</span>
+                        </div>
+                    </div>
+                    <div class="p-4">
+                        <h3 class="font-semibold text-lg text-gray-800">${item.title}</h3>
+                        <div class="flex items-center mt-2">
+                            <span class="inline-block px-2 py-1 text-xs rounded-full ${getCategoryColor(item.category)}">
+                                ${getCategoryName(item.category)}
+                            </span>
+                        </div>
+                    </div>
+                `;
+                galleryItem.addEventListener('click', () => openModal(index));
+                galleryGrid.appendChild(galleryItem);
+            });
+            // Hide load more button if all items are displayed
+            loadMoreBtn.style.display = displayedItems >= filteredGallery.length ? 'none' : 'block';
+        }
+        // Get category name for display
+        function getCategoryName(category) {
+            const names = {
+                'mariage': 'Mariage',
+                'anniversaire': 'Anniversaire',
+                'entreprise': 'Entreprise',
+                'culturel': 'Culturel'
+            };
+            return names[category] || category;
+        }
+        // Get category color for badge
+        function getCategoryColor(category) {
+            const colors = {
+                'mariage': 'bg-pink-100 text-pink-800',
+                'anniversaire': 'bg-yellow-100 text-yellow-800',
+                'entreprise': 'bg-blue-100 text-blue-800',
+                'culturel': 'bg-purple-100 text-purple-800'
+            };
+            return colors[category] || 'bg-gray-100 text-gray-800';
+        }
+        // Open modal with image
+        function openModal(index) {
+            currentImageIndex = index;
+            const item = filteredGallery[index];
+            modalImage.src = item.image;
+            modalImage.alt = item.title;
+            modalTitle.textContent = item.title;
+            modalDescription.textContent = item.description;
+            modal.classList.remove('hidden');
+            document.body.style.overflow = 'hidden';
+            // Update navigation buttons state
+            updateNavButtons();
+        }
+        // Close modal
+        function closeModalHandler() {
+            modal.classList.add('hidden');
+            document.body.style.overflow = 'auto';
+        }
+        // Navigate to previous image
+        function prevImage() {
+            if (currentImageIndex > 0) {
+                currentImageIndex--;
+                openModal(currentImageIndex);
+            }
+        }
+        // Navigate to next image
+        function nextImage() {
+            if (currentImageIndex < filteredGallery.length - 1) {
+                currentImageIndex++;
+                openModal(currentImageIndex);
+            }
+        }
+        // Update navigation buttons state
+        function updateNavButtons() {
+            prevBtn.disabled = currentImageIndex === 0;
+            nextBtn.disabled = currentImageIndex === filteredGallery.length - 1;
+            if (prevBtn.disabled) {
+                prevBtn.classList.add('opacity-50', 'cursor-not-allowed');
+            } else {
+                prevBtn.classList.remove('opacity-50', 'cursor-not-allowed');
+            }
+            if (nextBtn.disabled) {
+                nextBtn.classList.add('opacity-50', 'cursor-not-allowed');
+            } else {
+                nextBtn.classList.remove('opacity-50', 'cursor-not-allowed');
+            }
+        }
+        // Filter gallery by category
+        function filterGallery(filter) {
+            currentFilter = filter;
+            displayedItems = 8;
+            renderGallery();
+            // Update active filter button
+            filterButtons.forEach(btn => {
+                btn.classList.toggle('active', btn.dataset.filter === filter);
+            });
+        }
+        // Load more items
+        function loadMoreItems() {
+            displayedItems += 4;
+            renderGallery();
+        }
+        // Setup event listeners
+        function setupEventListeners() {
+            // Filter buttons
+            filterButtons.forEach(btn => {
+                btn.addEventListener('click', () => filterGallery(btn.dataset.filter));
+            });
+            // Load more button
+            loadMoreBtn.addEventListener('click', loadMoreItems);
+            // Modal events
+            closeModal.addEventListener('click', closeModalHandler);
+            prevBtn.addEventListener('click', prevImage);
+            nextBtn.addEventListener('click', nextImage);
+            // Close modal when clicking outside
+            modal.addEventListener('click', (e) => {
+                if (e.target === modal) {
+                    closeModalHandler();
+                }
+            });
+            // Keyboard navigation
+            document.addEventListener('keydown', (e) => {
+                if (!modal.classList.contains('hidden')) {
+                    if (e.key === 'Escape') {
+                        closeModalHandler();
+                    } else if (e.key === 'ArrowLeft') {
+                        prevImage();
+                    } else if (e.key === 'ArrowRight') {
+                        nextImage();
+                    }
+                }
+            });
+        }
+        // Initialize the gallery when 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=jerome-dreville/arc-galeries" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
+</html>