improve style

js/main.js

@@ -1,34 +1,70 @@
 document.addEventListener('DOMContentLoaded', function() {
     // Gestion du menu mobile
     const mobileMenuToggle = document.querySelector('.mobile-menu-toggle');
-    const mobileMenuOverlay = document.getElementById('mobileMenuOverlay');
+    const mobileMenu = document.querySelector('.mobile-menu');
     const mobileMenuClose = document.querySelector('.mobile-menu-close');
     
     if (mobileMenuToggle) {
         mobileMenuToggle.addEventListener('click', function() {
-            mobileMenuOverlay.style.display = 'block';
+            mobileMenu.classList.add('active');
             document.body.style.overflow = 'hidden'; // Empêche le défilement de la page
         });
     }
     
     if (mobileMenuClose) {
         mobileMenuClose.addEventListener('click', function() {
-            mobileMenuOverlay.style.display = 'none';
+            mobileMenu.classList.remove('active');
             document.body.style.overflow = ''; // Réactive le défilement
         });
     }
     
-    // Fermer le menu en cliquant en dehors
-    if (mobileMenuOverlay) {
-        mobileMenuOverlay.addEventListener('click', function(e) {
-            if (e.target === mobileMenuOverlay) {
-                mobileMenuOverlay.style.display = 'none';
-                document.body.style.overflow = '';
+    // Gestion du mode sombre
+    const darkModeToggle = document.querySelector('.dark-mode-toggle');
+    const body = document.body;
+    
+    if (darkModeToggle) {
+        darkModeToggle.addEventListener('click', function() {
+            body.classList.toggle('dark-mode');
+            
+            // Changer l'icône
+            const icon = darkModeToggle.querySelector('i');
+            if (body.classList.contains('dark-mode')) {
+                icon.classList.remove('fa-moon');
+                icon.classList.add('fa-sun');
+            } else {
+                icon.classList.remove('fa-sun');
+                icon.classList.add('fa-moon');
             }
         });
     }
     
-    // Gestion des vidéos
+    // Gestion des carousels
+    const carousels = document.querySelectorAll('.carousel');
+    
+    carousels.forEach(carousel => {
+        const container = carousel.querySelector('.carousel-container');
+        const dots = carousel.querySelectorAll('.carousel-dot');
+        const items = carousel.querySelectorAll('.carousel-item');
+        
+        if (dots.length > 0 && items.length > 0) {
+            dots.forEach((dot, index) => {
+                dot.addEventListener('click', function() {
+                    // Calculer la distance à translater
+                    const itemWidth = items[0].offsetWidth + parseInt(getComputedStyle(items[0]).marginRight);
+                    const newTransform = -index * itemWidth;
+                    
+                    // Appliquer la transformation
+                    container.style.transform = `translateX(${newTransform}px)`;
+                    
+                    // Mettre à jour les dots
+                    dots.forEach(d => d.classList.remove('active'));
+                    dot.classList.add('active');
+                });
+            });
+        }
+    });
+    
+    // Gestion des clics sur les vidéos
     const videoCards = document.querySelectorAll('.video-card');
     
     videoCards.forEach(card => {
@@ -70,59 +106,17 @@ document.addEventListener('DOMContentLoaded', function() {
         });
     }
     
-    // Fonction pour formater le nombre de vues
-    function formatViewCount(views) {
-        if (views >= 1000000) {
-            return (views / 1000000).toFixed(1) + 'M';
-        } else if (views >= 1000) {
-            return (views / 1000).toFixed(1) + 'K';
-        } else {
-            return views.toString();
-        }
-    }
+    // Gestion des boutons "Voir plus"
+    const viewMoreButtons = document.querySelectorAll('.view-more');
     
-    // Fonction pour formater la durée des vidéos
-    function formatDuration(seconds) {
-        const hours = Math.floor(seconds / 3600);
-        const minutes = Math.floor((seconds % 3600) / 60);
-        const remainingSeconds = seconds % 60;
-        
-        if (hours > 0) {
-            return `${hours}:${minutes.toString().padStart(2, '0')}:${remainingSeconds.toString().padStart(2, '0')}`;
-        } else {
-            return `${minutes}:${remainingSeconds.toString().padStart(2, '0')}`;
-        }
-    }
-    
-    // Fonction pour formater la date
-    function formatDate(dateString) {
-        const date = new Date(dateString);
-        const now = new Date();
-        const diffTime = Math.abs(now - date);
-        const diffDays = Math.floor(diffTime / (1000 * 60 * 60 * 24));
-        
-        if (diffDays < 1) {
-            return 'Aujourd\'hui';
-        } else if (diffDays === 1) {
-            return 'Hier';
-        } else if (diffDays < 7) {
-            return `Il y a ${diffDays} jours`;
-        } else if (diffDays < 30) {
-            const diffWeeks = Math.floor(diffDays / 7);
-            return `Il y a ${diffWeeks} semaine${diffWeeks > 1 ? 's' : ''}`;
-        } else if (diffDays < 365) {
-            const diffMonths = Math.floor(diffDays / 30);
-            return `Il y a ${diffMonths} mois`;
-        } else {
-            const diffYears = Math.floor(diffDays / 365);
-            return `Il y a ${diffYears} an${diffYears > 1 ? 's' : ''}`;
-        }
-    }
-    
-    // Exposer ces fonctions utilitaires globalement
-    window.videoUtils = {
-        formatViewCount,
-        formatDuration,
-        formatDate
-    };
+    viewMoreButtons.forEach(button => {
+        button.addEventListener('click', function() {
+            // Dans un vrai projet, cela chargerait plus de contenu via AJAX
+            // Pour cet exemple, on simule juste un clic
+            button.innerText = 'Chargement...';
+            setTimeout(() => {
+                button.innerText = 'Voir plus';
+            }, 1000);
+        });
+    });
 });