Spaces:
Running
Running
| <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> | |
| <!-- Pagination --> | |
| <div class="flex justify-center mt-8" id="pagination"> | |
| <!-- Pagination will be inserted here by JavaScript --> | |
| </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>© 2025 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://images.unsplash.com/photo-1606800052052-a08af7148866?q=80&w=2940&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D", | |
| description: "Un magnifique mariage en plein air avec décoration florale." | |
| }, | |
| { | |
| id: 2, | |
| title: "Anniversaire surprise", | |
| category: "anniversaire", | |
| image: "https://plus.unsplash.com/premium_photo-1691688119380-1300e7aac0ea?q=80&w=2938&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D", | |
| description: "Fête d'anniversaire surprise organisée pour les 40 ans de Marie." | |
| }, | |
| { | |
| id: 3, | |
| title: "Conférence annuelle", | |
| category: "entreprise", | |
| image: "https://images.unsplash.com/photo-1547495827-fff7a5e8b26c?q=80&w=1287&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D", | |
| description: "Notre conférence annuelle avec plus de 200 participants." | |
| }, | |
| { | |
| id: 4, | |
| title: "Festival culturel", | |
| category: "culturel", | |
| image: "https://images.unsplash.com/photo-1682946617853-adb104368281?q=80&w=2940&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D", | |
| description: "Participation au festival culturel régional 2023." | |
| }, | |
| { | |
| id: 5, | |
| title: "Mariage traditionnel", | |
| category: "mariage", | |
| image: "https://images.unsplash.com/photo-1557393153-6cfbb0fd31eb?q=80&w=2940&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D", | |
| description: "Cérémonie de mariage traditionnelle avec costumes régionaux." | |
| }, | |
| { | |
| id: 6, | |
| title: "Team building", | |
| category: "entreprise", | |
| image: "https://plus.unsplash.com/premium_photo-1661767467261-4a4bed92a507?q=80&w=2940&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D", | |
| description: "Activités de team building pour renforcer la cohésion d'équipe." | |
| }, | |
| { | |
| id: 7, | |
| title: "Anniversaire enfant", | |
| category: "anniversaire", | |
| image: "https://plus.unsplash.com/premium_photo-1691752880941-5fe0a0ad4c1b?q=80&w=2938&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D", | |
| description: "Fête d'anniversaire thématique pour les 8 ans de Lucas." | |
| }, | |
| { | |
| id: 8, | |
| title: "Spectacle de danse", | |
| category: "culturel", | |
| image: "https://images.unsplash.com/photo-1651329660382-5d5220c25367?q=80&w=2940&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D", | |
| description: "Représentation de danse contemporaine lors du festival des arts." | |
| }, | |
| { | |
| id: 9, | |
| title: "Mariage plage", | |
| category: "mariage", | |
| image: "https://plus.unsplash.com/premium_photo-1674252314224-bbcbf0703150?q=80&w=2940&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D", | |
| description: "Cérémonie de mariage romantique au coucher du soleil." | |
| }, | |
| { | |
| id: 10, | |
| title: "Lancement produit", | |
| category: "entreprise", | |
| image: "https://images.unsplash.com/photo-1563549054059-bf4ebe2f49d5?q=80&w=2940&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D", | |
| description: "Événement de lancement de notre nouveau produit phare." | |
| }, | |
| { | |
| id: 11, | |
| title: "Anniversaire vintage", | |
| category: "anniversaire", | |
| image: "https://images.unsplash.com/photo-1692623650168-2fa4d2611346?q=80&w=2880&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D", | |
| description: "Fête d'anniversaire sur le thème des années 60." | |
| }, | |
| { | |
| id: 12, | |
| title: "Exposition artistique", | |
| category: "culturel", | |
| image: "https://images.unsplash.com/photo-1582555172866-f73bb12a2ab3?q=80&w=2080&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D", | |
| description: "Vernissage de notre exposition d'art contemporain." | |
| } | |
| ]; | |
| // DOM Elements | |
| const galleryGrid = document.getElementById('gallery-grid'); | |
| const filterButtons = document.querySelectorAll('.filter-btn'); | |
| 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'; | |
| const itemsPerPage = 8; | |
| let currentPage = 1; | |
| let currentImageIndex = 0; | |
| let filteredGallery = []; | |
| // Initialize gallery | |
| function initGallery() { | |
| renderGallery(); | |
| setupEventListeners(); | |
| } | |
| // Render gallery based on filter and page | |
| function renderGallery() { | |
| galleryGrid.innerHTML = ''; | |
| // Filter gallery items | |
| filteredGallery = currentFilter === 'all' | |
| ? galleryData | |
| : galleryData.filter(item => item.category === currentFilter); | |
| // Calculate pagination | |
| const totalPages = Math.ceil(filteredGallery.length / itemsPerPage); | |
| const startIndex = (currentPage - 1) * itemsPerPage; | |
| const endIndex = startIndex + itemsPerPage; | |
| // Display items for current page | |
| const itemsToDisplay = filteredGallery.slice(startIndex, endIndex); | |
| // 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); | |
| }); | |
| // Render pagination | |
| renderPagination(totalPages); | |
| } | |
| // 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(); | |
| } | |
| // Render pagination controls | |
| function renderPagination(totalPages) { | |
| const paginationContainer = document.getElementById('pagination'); | |
| paginationContainer.innerHTML = ''; | |
| if (totalPages <= 1) return; | |
| // Previous button - only show if not on first page | |
| if (currentPage > 1) { | |
| const prevBtn = document.createElement('button'); | |
| prevBtn.innerHTML = '<i class="fas fa-arrow-left"></i>'; | |
| prevBtn.className = 'mx-1 px-4 py-2 border border-gray-300 bg-gray-200 text-gray-600 hover:bg-gray-300 rounded-md transition-colors'; | |
| prevBtn.addEventListener('click', () => { | |
| currentPage--; | |
| renderGallery(); | |
| }); | |
| paginationContainer.appendChild(prevBtn); | |
| } | |
| // Page numbers | |
| for (let i = 1; i <= totalPages; i++) { | |
| const pageBtn = document.createElement('button'); | |
| pageBtn.textContent = i; | |
| pageBtn.className = `mx-1 px-4 py-2 border border-gray-300 transition-colors ${currentPage === i ? 'bg-blue-500 text-white border border-blue-800 rounded-md' : 'bg-gray-200 text-gray-700 hover:bg-gray-300 rounded-md'}`; | |
| pageBtn.addEventListener('click', () => { | |
| currentPage = i; | |
| renderGallery(); | |
| }); | |
| paginationContainer.appendChild(pageBtn); | |
| } | |
| // Next button - only show if not on last page | |
| if (currentPage < totalPages) { | |
| const nextBtn = document.createElement('button'); | |
| nextBtn.innerHTML = '<i class="fas fa-arrow-right"></i>'; | |
| nextBtn.className = 'mx-1 px-4 py-2 border border-gray-300 bg-gray-200 text-gray-600 hover:bg-gray-300 rounded-md transition-colors'; | |
| nextBtn.addEventListener('click', () => { | |
| currentPage++; | |
| renderGallery(); | |
| }); | |
| paginationContainer.appendChild(nextBtn); | |
| } | |
| } | |
| // Filter gallery by category | |
| function filterGallery(filter) { | |
| currentFilter = filter; | |
| currentPage = 1; | |
| renderGallery(); | |
| // Update active filter button | |
| filterButtons.forEach(btn => { | |
| btn.classList.toggle('active', btn.dataset.filter === filter); | |
| }); | |
| } | |
| // Setup event listeners | |
| function setupEventListeners() { | |
| // Filter buttons | |
| filterButtons.forEach(btn => { | |
| btn.addEventListener('click', () => filterGallery(btn.dataset.filter)); | |
| }); | |
| // 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> |