+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ KAUBUNTU.RE
+
+
+
+
+
+
+
+
+
+ 
+
+
+ Shorts
+
+
+
+ 101,
+ 'thumbnail' => 'img/video-thumbnails/short-1.jpg',
+ 'title' => 'Interview avec Jean Dupont'
+ ],
+ [
+ 'id' => 102,
+ 'thumbnail' => 'img/video-thumbnails/short-2.jpg',
+ 'title' => 'Frédéric MAILLOT'
+ ],
+ [
+ 'id' => 103,
+ 'thumbnail' => 'img/video-thumbnails/short-3.jpg',
+ 'title' => 'Discussion sur l\'avenir'
+ ],
+ [
+ 'id' => 104,
+ 'thumbnail' => 'img/video-thumbnails/short-4.jpg',
+ 'title' => 'Panel sur les droits humains'
+ ]
+ ];
+
+ foreach ($shorts as $video):
+ ?>
+
+
+
+
+
+
+
+
+ ![<?php echo $video['title']; ?>](<?php echo $video['thumbnail']; ?>)
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Dernières vidéos
+
+ 1,
+ 'title' => 'L\'indépendance de La Réunion : KA UBUNTU À BAKOU',
+ 'thumbnail' => 'img/video-thumbnails/recent-1.jpg',
+ 'tag' => '#Bakou',
+ 'date' => '29 mars 2025',
+ 'views' => 10
+ ],
+ [
+ 'id' => 2,
+ 'title' => '#1 Départementalisation de La Réunion (1946) : l\'heure du bilan ?',
+ 'thumbnail' => 'img/video-thumbnails/recent-2.jpg',
+ 'tag' => '#LaRéunion',
+ 'date' => '29 mars 2025',
+ 'views' => 10
+ ],
+ [
+ 'id' => 3,
+ 'title' => 'POURQUOI L\'INDÉPENDANCE DE LA REUNION ?',
+ 'thumbnail' => 'img/video-thumbnails/recent-3.jpg',
+ 'tag' => '#Indépendance',
+ 'date' => '29 mars 2025',
+ 'views' => 10
+ ]
+ ];
+
+ foreach ($recentVideos as $video):
+ ?>
+
-
+
+
+
+
-
-
-
+
+
+
+
+
+
Vidéos à la une
-
-
+
+
+
+
+
+
+
-
-
-
+
-
-
-
Vidéos récentes
-
-
+
+
+ Tendances
+
+ 4,
+ 'title' => 'Serge Sinamalé i koz',
+ 'thumbnail' => 'img/video-thumbnails/trending-1.jpg',
+ 'tag' => '#Sinamalé',
+ 'date' => '29 mars 2025',
+ 'views' => 10
+ ],
+ [
+ 'id' => 5,
+ 'title' => '"Seule la lutte libère !" Thomas Sankara',
+ 'thumbnail' => 'img/video-thumbnails/trending-2.jpg',
+ 'tag' => '#LaRéunion',
+ 'date' => '29 mars 2025',
+ 'views' => 10
+ ],
+ [
+ 'id' => 6,
+ 'title' => 'La naissance d\'une nation',
+ 'thumbnail' => 'img/video-thumbnails/trending-3.jpg',
+ 'tag' => '#Indépendance',
+ 'date' => '29 mars 2025',
+ 'views' => 10
+ ]
+ ];
+
+ foreach ($trendingVideos as $video):
+ ?>
+
-
+
+
+
+
-
-
-
+
+
+
+
+
+
+
Catégories
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
-
-
-
-
+
Indépendance
+
+ 7,
+ 'title' => 'L\'HÉRITAGE AFRICAIN DANS NOS LUTTES : PRÉSENTATION DU PANAFRICANISME',
+ 'thumbnail' => 'img/video-thumbnails/independence-1.jpg',
+ 'tag' => '#Afrique',
+ 'date' => '29 mars 2025',
+ 'views' => 10
+ ],
+ [
+ 'id' => 8,
+ 'title' => 'Maloya : Musique de résistance',
+ 'thumbnail' => 'img/video-thumbnails/independence-2.jpg',
+ 'tag' => '#Maloya',
+ 'date' => '29 mars 2025',
+ 'views' => 10
+ ],
+ [
+ 'id' => 9,
+ 'title' => 'La lutte indépendantiste à la Réunion',
+ 'thumbnail' => 'img/video-thumbnails/independence-3.jpg',
+ 'tag' => '#Conférence',
+ 'date' => '29 mars 2025',
+ 'views' => 10
+ ]
+ ];
+
+ foreach ($independenceVideos as $video):
+ ?>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Tendances
+ + +
+ 
+
+
+
+ KA UBUNTU est un mouvement politique indépendantiste et panafricaniste réunionnais qui a 5 objectifs :
+ +
+
+
+
+
+
+
+
+
+
+
+
-
+
+
+
+
+
-
+
diff --git a/js/main.js b/js/main.js
index 1412c97..cdbb4da 100644
--- a/js/main.js
+++ b/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);
+ });
+ });
});
\ No newline at end of file
diff --git a/video.php b/video.php
index 98ae010..615dd5a 100644
--- a/video.php
+++ b/video.php
@@ -6,27 +6,27 @@ $videoId = isset($_GET['id']) ? intval($_GET['id']) : 1;
$videos = [
1 => [
'id' => 1,
- 'title' => 'Introduction à la culture libre et aux logiciels open source',
+ 'title' => 'L\'indépendance de La Réunion : KA UBUNTU À BAKOU',
'url' => 'https://peertube.example.com/embed/1',
'description' => 'Une introduction complète au monde de la culture libre et des logiciels open source. Découvrez les principes fondamentaux, les licences, et comment contribuer à des projets open source.',
'channel' => 'Tech Libre',
'channelId' => 1,
'views' => 15420,
'likes' => 1245,
- 'date' => '2023-11-15',
- 'tags' => ['open source', 'logiciels libres', 'tech', 'formation']
+ 'date' => '29 mars 2025',
+ 'tags' => ['#Bakou', '#LaRéunion', '#Indépendance']
],
2 => [
'id' => 2,
- 'title' => 'La Réunion: Découverte des sentiers cachés',
+ 'title' => '#1 Départementalisation de La Réunion (1946) : l\'heure du bilan ?',
'url' => 'https://peertube.example.com/embed/2',
'description' => 'Partez à la découverte des sentiers cachés de La Réunion. Cette vidéo vous guide à travers des paysages magnifiques et peu connus de l\'île.',
'channel' => 'Île Aventure',
'channelId' => 2,
'views' => 8745,
'likes' => 732,
- 'date' => '2023-12-02',
- 'tags' => ['La Réunion', 'voyage', 'randonnée', 'nature']
+ 'date' => '29 mars 2025',
+ 'tags' => ['#LaRéunion', '#Histoire', '#Politique']
],
// Autres vidéos...
];
@@ -34,6 +34,19 @@ $videos = [
// Récupération de la vidéo
$video = isset($videos[$videoId]) ? $videos[$videoId] : $videos[1];
+// Vidéos suggérées (normalement récupérées par un algorithme de recommandation)
+function getSuggestedVideos($videos, $currentId) {
+ $suggested = [];
+ foreach ($videos as $id => $video) {
+ if ($id != $currentId) {
+ $suggested[] = $video;
+ }
+ }
+ return $suggested;
+}
+
+$suggestedVideos = getSuggestedVideos($videos, $videoId);
+
// Formatage des données
function formatViewCount($views) {
if ($views >= 1000000) {
@@ -62,166 +75,284 @@ function formatDate($dateString) {
-
-
+
+
+
+
+
-
-
+
-
-
-
-
-
+
-
+
+
+
+
+
+
+
+
+
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ ![<?php echo $video['channel']; ?>](img/channels/<?php echo $video['channelId']; ?>.jpg)
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Vidéos suggérées
+ +
+
+
+
+
+
+
+ ![<?php echo $suggestedVideo['title']; ?>](img/video-thumbnails/recent-<?php echo $suggestedVideo['id']; ?>.jpg)
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Commentaires
+ +