311 lines
12 KiB
PHP
311 lines
12 KiB
PHP
|
<?php
|
||
|
|
// Récupération de l'ID de catégorie
|
||
|
|
$categoryId = isset($_GET['id']) ? intval($_GET['id']) : null;
|
||
|
|
|
||
|
|
// Définition des catégories
|
||
|
|
$categories = [
|
||
|
|
1 => [
|
||
|
|
'id' => 1,
|
||
|
|
'name' => 'Technologie',
|
||
|
|
'description' => 'Vidéos sur la technologie, l\'informatique, et les innovations tech.',
|
||
|
|
'image' => 'img/categories/tech.jpg'
|
||
|
|
],
|
||
|
|
2 => [
|
||
|
|
'id' => 2,
|
||
|
|
'name' => 'Culture',
|
||
|
|
'description' => 'Culture locale et internationale, événements culturels, et arts.',
|
||
|
|
'image' => 'img/categories/culture.jpg'
|
||
|
|
],
|
||
|
|
3 => [
|
||
|
|
'id' => 3,
|
||
|
|
'name' => 'Éducation',
|
||
|
|
'description' => 'Tutoriels, cours, et vidéos éducatives pour apprendre de nouvelles compétences.',
|
||
|
|
'image' => 'img/categories/education.jpg'
|
||
|
|
],
|
||
|
|
4 => [
|
||
|
|
'id' => 4,
|
||
|
|
'name' => 'Divertissement',
|
||
|
|
'description' => 'Vidéos de divertissement, humour, jeux et loisirs.',
|
||
|
|
'image' => 'img/categories/entertainment.jpg'
|
||
|
|
],
|
||
|
|
5 => [
|
||
|
|
'id' => 5,
|
||
|
|
'name' => 'Cuisine',
|
||
|
|
'description' => 'Recettes, conseils culinaires, et découverte de la gastronomie locale et internationale.',
|
||
|
|
'image' => 'img/categories/cuisine.jpg'
|
||
|
|
],
|
||
|
|
6 => [
|
||
|
|
'id' => 6,
|
||
|
|
'name' => 'Voyage',
|
||
|
|
'description' => 'Découverte de destinations, conseils de voyage, et aventures autour du monde.',
|
||
|
|
'image' => 'img/categories/travel.jpg'
|
||
|
|
],
|
||
|
|
7 => [
|
||
|
|
'id' => 7,
|
||
|
|
'name' => 'Sport',
|
||
|
|
'description' => 'Événements sportifs, tutoriels d\'entraînement, et actualités sportives.',
|
||
|
|
'image' => 'img/categories/sport.jpg'
|
||
|
|
],
|
||
|
|
8 => [
|
||
|
|
'id' => 8,
|
||
|
|
'name' => 'Musique',
|
||
|
|
'description' => 'Clips musicaux, concerts, et actualités musicales locales et internationales.',
|
||
|
|
'image' => 'img/categories/music.jpg'
|
||
|
|
]
|
||
|
|
];
|
||
|
|
|
||
|
|
// Définition des vidéos (dans un vrai projet, ces données viendraient d'une API)
|
||
|
|
$videos = [
|
||
|
|
[
|
||
|
|
'id' => 1,
|
||
|
|
'title' => 'Introduction à la culture libre et aux logiciels open source',
|
||
|
|
'thumbnail' => 'img/video-thumbnails/featured-1.jpg',
|
||
|
|
'duration' => 1245,
|
||
|
|
'channel' => 'Tech Libre',
|
||
|
|
'views' => 15420,
|
||
|
|
'date' => '2023-11-15',
|
||
|
|
'category_id' => 1
|
||
|
|
],
|
||
|
|
[
|
||
|
|
'id' => 2,
|
||
|
|
'title' => 'La Réunion: Découverte des sentiers cachés',
|
||
|
|
'thumbnail' => 'img/video-thumbnails/featured-2.jpg',
|
||
|
|
'duration' => 843,
|
||
|
|
'channel' => 'Île Aventure',
|
||
|
|
'views' => 8745,
|
||
|
|
'date' => '2023-12-02',
|
||
|
|
'category_id' => 6
|
||
|
|
],
|
||
|
|
[
|
||
|
|
'id' => 3,
|
||
|
|
'title' => 'Comment installer Linux sur un ancien ordinateur',
|
||
|
|
'thumbnail' => 'img/video-thumbnails/featured-3.jpg',
|
||
|
|
'duration' => 723,
|
||
|
|
'channel' => 'Tech Libre',
|
||
|
|
'views' => 24680,
|
||
|
|
'date' => '2023-10-25',
|
||
|
|
'category_id' => 1
|
||
|
|
],
|
||
|
|
[
|
||
|
|
'id' => 4,
|
||
|
|
'title' => 'Festival Sakifo 2023 - Les meilleurs moments',
|
||
|
|
'thumbnail' => 'img/video-thumbnails/recent-1.jpg',
|
||
|
|
'duration' => 1832,
|
||
|
|
'channel' => 'Culture 974',
|
||
|
|
'views' => 3420,
|
||
|
|
'date' => '2023-12-15',
|
||
|
|
'category_id' => 2
|
||
|
|
],
|
||
|
|
[
|
||
|
|
'id' => 5,
|
||
|
|
'title' => 'Cuisine créole: Recette du rougail saucisse traditionnel',
|
||
|
|
'thumbnail' => 'img/video-thumbnails/recent-2.jpg',
|
||
|
|
'duration' => 685,
|
||
|
|
'channel' => 'Saveurs des Îles',
|
||
|
|
'views' => 7245,
|
||
|
|
'date' => '2023-12-10',
|
||
|
|
'category_id' => 5
|
||
|
|
],
|
||
|
|
[
|
||
|
|
'id' => 6,
|
||
|
|
'title' => 'Tutoriel: Créer votre première application web avec PHP',
|
||
|
|
'thumbnail' => 'img/video-thumbnails/recent-3.jpg',
|
||
|
|
'duration' => 1540,
|
||
|
|
'channel' => 'CodeMastery',
|
||
|
|
'views' => 2180,
|
||
|
|
'date' => '2023-12-08',
|
||
|
|
'category_id' => 3
|
||
|
|
],
|
||
|
|
[
|
||
|
|
'id' => 7,
|
||
|
|
'title' => 'Les plus belles plages de La Réunion en 2023',
|
||
|
|
'thumbnail' => 'img/video-thumbnails/recent-4.jpg',
|
||
|
|
'duration' => 925,
|
||
|
|
'channel' => 'Île Aventure',
|
||
|
|
'views' => 5690,
|
||
|
|
'date' => '2023-12-05',
|
||
|
|
'category_id' => 6
|
||
|
|
],
|
||
|
|
[
|
||
|
|
'id' => 8,
|
||
|
|
'title' => 'Débat: L\'avenir du numérique à La Réunion',
|
||
|
|
'thumbnail' => 'img/video-thumbnails/recent-5.jpg',
|
||
|
|
'duration' => 3245,
|
||
|
|
'channel' => 'Tech Libre',
|
||
|
|
'views' => 1250,
|
||
|
|
'date' => '2023-12-01',
|
||
|
|
'category_id' => 1
|
||
|
|
],
|
||
|
|
[
|
||
|
|
'id' => 9,
|
||
|
|
'title' => 'Concert live: Groupe Sakili au Téat Plein Air',
|
||
|
|
'thumbnail' => 'img/video-thumbnails/recent-6.jpg',
|
||
|
|
'duration' => 4512,
|
||
|
|
'channel' => 'Culture 974',
|
||
|
|
'views' => 4325,
|
||
|
|
'date' => '2023-11-28',
|
||
|
|
'category_id' => 8
|
||
|
|
]
|
||
|
|
];
|
||
|
|
|
||
|
|
// Filtrer les vidéos par catégorie si une catégorie est sélectionnée
|
||
|
|
if ($categoryId) {
|
||
|
|
$categoryVideos = array_filter($videos, function($video) use ($categoryId) {
|
||
|
|
return $video['category_id'] == $categoryId;
|
||
|
|
});
|
||
|
|
|
||
|
|
$category = isset($categories[$categoryId]) ? $categories[$categoryId] : null;
|
||
|
|
} else {
|
||
|
|
$categoryVideos = [];
|
||
|
|
$category = null;
|
||
|
|
}
|
||
|
|
|
||
|
|
// Fonctions utilitaires
|
||
|
|
function formatDuration($seconds) {
|
||
|
|
$hours = floor($seconds / 3600);
|
||
|
|
$minutes = floor(($seconds % 3600) / 60);
|
||
|
|
$remainingSeconds = $seconds % 60;
|
||
|
|
|
||
|
|
if ($hours > 0) {
|
||
|
|
return sprintf('%d:%02d:%02d', $hours, $minutes, $remainingSeconds);
|
||
|
|
} else {
|
||
|
|
return sprintf('%d:%02d', $minutes, $remainingSeconds);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
function formatViewCount($views) {
|
||
|
|
if ($views >= 1000000) {
|
||
|
|
return round($views / 1000000, 1) . 'M';
|
||
|
|
} elseif ($views >= 1000) {
|
||
|
|
return round($views / 1000, 1) . 'K';
|
||
|
|
} else {
|
||
|
|
return $views;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
function formatDate($dateString) {
|
||
|
|
$date = new DateTime($dateString);
|
||
|
|
$now = new DateTime();
|
||
|
|
$interval = $now->diff($date);
|
||
|
|
|
||
|
|
if ($interval->days == 0) {
|
||
|
|
return 'Aujourd\'hui';
|
||
|
|
} elseif ($interval->days == 1) {
|
||
|
|
return 'Hier';
|
||
|
|
} elseif ($interval->days < 7) {
|
||
|
|
return 'Il y a ' . $interval->days . ' jours';
|
||
|
|
} elseif ($interval->days < 30) {
|
||
|
|
$weeks = floor($interval->days / 7);
|
||
|
|
return 'Il y a ' . $weeks . ' semaine' . ($weeks > 1 ? 's' : '');
|
||
|
|
} elseif ($interval->days < 365) {
|
||
|
|
$months = floor($interval->days / 30);
|
||
|
|
return 'Il y a ' . $months . ' mois';
|
||
|
|
} else {
|
||
|
|
$years = floor($interval->days / 365);
|
||
|
|
return 'Il y a ' . $years . ' an' . ($years > 1 ? 's' : '');
|
||
|
|
}
|
||
|
|
}
|
||
|
|
?>
|
||
|
|
|
||
|
|
<!DOCTYPE html>
|
||
|
|
<html lang="fr">
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
|
|
<title><?php echo $category ? $category['name'] : 'Catégories'; ?> - Kaubuntu.re</title>
|
||
|
|
<link rel="stylesheet" href="css/styles.css">
|
||
|
|
<link rel="stylesheet" href="css/categories.css">
|
||
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<div class="container">
|
||
|
|
<?php include 'includes/header.php'; ?>
|
||
|
|
|
||
|
|
<main>
|
||
|
|
<?php if ($category): ?>
|
||
|
|
<!-- Affichage des vidéos d'une catégorie spécifique -->
|
||
|
|
<div class="category-header">
|
||
|
|
<div class="category-banner" style="background-image: url('<?php echo $category['image']; ?>')">
|
||
|
|
<div class="category-overlay">
|
||
|
|
<h1><?php echo $category['name']; ?></h1>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="category-description">
|
||
|
|
<p><?php echo $category['description']; ?></p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<?php if (count($categoryVideos) > 0): ?>
|
||
|
|
<div class="category-videos">
|
||
|
|
<div class="video-grid">
|
||
|
|
<?php foreach ($categoryVideos as $video): ?>
|
||
|
|
<div class="video-card" data-video-id="<?php echo $video['id']; ?>">
|
||
|
|
<div class="video-thumbnail">
|
||
|
|
<img src="<?php echo $video['thumbnail']; ?>" alt="<?php echo $video['title']; ?>" data-src="<?php echo $video['thumbnail']; ?>">
|
||
|
|
<div class="video-duration"><?php echo formatDuration($video['duration']); ?></div>
|
||
|
|
</div>
|
||
|
|
<div class="video-info">
|
||
|
|
<h3 class="video-title"><?php echo $video['title']; ?></h3>
|
||
|
|
<div class="video-channel"><?php echo $video['channel']; ?></div>
|
||
|
|
<div class="video-metadata">
|
||
|
|
<span class="video-views"><?php echo formatViewCount($video['views']); ?> vues</span>
|
||
|
|
<span class="video-date"><?php echo formatDate($video['date']); ?></span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<?php endforeach; ?>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<?php else: ?>
|
||
|
|
<div class="no-videos">
|
||
|
|
<p>Aucune vidéo trouvée dans cette catégorie.</p>
|
||
|
|
</div>
|
||
|
|
<?php endif; ?>
|
||
|
|
|
||
|
|
<?php else: ?>
|
||
|
|
<!-- Affichage de toutes les catégories -->
|
||
|
|
<section class="categories-showcase">
|
||
|
|
<h1>Catégories</h1>
|
||
|
|
<p class="section-description">Découvrez nos vidéos par catégories</p>
|
||
|
|
|
||
|
|
<div class="categories-grid">
|
||
|
|
<?php foreach ($categories as $category): ?>
|
||
|
|
<a href="categories.php?id=<?php echo $category['id']; ?>" class="category-card-large">
|
||
|
|
<img src="<?php echo $category['image']; ?>" alt="<?php echo $category['name']; ?>" data-src="<?php echo $category['image']; ?>">
|
||
|
|
<div class="category-overlay">
|
||
|
|
<div class="category-name-large"><?php echo $category['name']; ?></div>
|
||
|
|
<div class="category-description-short"><?php echo substr($category['description'], 0, 60); ?>...</div>
|
||
|
|
</div>
|
||
|
|
</a>
|
||
|
|
<?php endforeach; ?>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
<?php endif; ?>
|
||
|
|
</main>
|
||
|
|
|
||
|
|
<?php include 'includes/footer.php'; ?>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="mobile-menu-overlay" id="mobileMenuOverlay">
|
||
|
|
<?php include 'includes/mobile-menu.php'; ?>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
|
||
|
|
<script src="js/main.js"></script>
|
||
|
|
<script>
|
||
|
|
document.addEventListener('DOMContentLoaded', function() {
|
||
|
|
// Gestion des clics sur les cartes vidéo
|
||
|
|
const videoCards = document.querySelectorAll('.video-card');
|
||
|
|
|
||
|
|
videoCards.forEach(card => {
|
||
|
|
card.addEventListener('click', function() {
|
||
|
|
const videoId = this.dataset.videoId;
|
||
|
|
if (videoId) {
|
||
|
|
window.location.href = 'video.php?id=' + videoId;
|
||
|
|
}
|
||
|
|
});
|
||
|
|
});
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
</html>
|