ORGANISATION-KA-INTERNATIONALE/kaubuntu.re
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
0e4a4dcdd8ecb7f20698bdc9d783f822dd9c0668
kaubuntu.re/video.php
T

358 lines
14 KiB
PHP
Raw Normal View History

basic project skeleton
2025-04-08 06:37:14 +04:00
<?php
// Dans un projet réel, on récupérerait l'ID de la vidéo et on ferait une requête à l'API PeerTube
$videoId = isset($_GET['id']) ? intval($_GET['id']) : 1;
// Exemple de données vidéo
$videos = [
1 => [
'id' => 1,
improve style
2025-04-08 06:51:33 +04:00
'title' => 'L\'indépendance de La Réunion : KA UBUNTU À BAKOU',
basic project skeleton
2025-04-08 06:37:14 +04:00
'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,
improve style
2025-04-08 06:51:33 +04:00
'date' => '29 mars 2025',
'tags' => ['#Bakou', '#LaRéunion', '#Indépendance']
basic project skeleton
2025-04-08 06:37:14 +04:00
],
2 => [
'id' => 2,
improve style
2025-04-08 06:51:33 +04:00
'title' => '#1 Départementalisation de La Réunion (1946) : l\'heure du bilan ?',
basic project skeleton
2025-04-08 06:37:14 +04:00
'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,
improve style
2025-04-08 06:51:33 +04:00
'date' => '29 mars 2025',
'tags' => ['#LaRéunion', '#Histoire', '#Politique']
basic project skeleton
2025-04-08 06:37:14 +04:00
],
// Autres vidéos...
];
// Récupération de la vidéo
$video = isset($videos[$videoId]) ? $videos[$videoId] : $videos[1];
improve style
2025-04-08 06:51:33 +04:00
// 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);
basic project skeleton
2025-04-08 06:37:14 +04:00
// Formatage des données
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);
return $date->format('d/m/Y');
}
?>
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title><?php echo $video['title']; ?> - Kaubuntu.re</title>
<link rel="stylesheet" href="css/styles.css">
<link rel="stylesheet" href="css/video-page.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
</head>
<body>
improve style
2025-04-08 06:51:33 +04:00
<!-- Sidebar de navigation -->
<div class="sidebar">
<a href="index.php" class="logo">
<img src="img/logo.png" alt="Kaubuntu.re">
</a>
basic project skeleton
2025-04-08 06:37:14 +04:00
improve style
2025-04-08 06:51:33 +04:00
<nav class="sidebar-nav">
<a href="index.php" class="nav-item">
<i class="fas fa-home"></i> Accueil
</a>
<a href="#" class="nav-item">
<i class="fas fa-broadcast-tower"></i> Direct
</a>
<div class="nav-divider"></div>
<a href="#" class="nav-item">
<i class="fas fa-compass"></i> Explorer
</a>
<a href="#" class="nav-item">
<i class="fas fa-globe"></i> Actualité
</a>
<a href="#" class="nav-item">
<i class="fas fa-music"></i> Musique
</a>
<a href="#" class="nav-item">
<i class="fas fa-monument"></i> Histoire
</a>
<a href="#" class="nav-item">
<i class="fas fa-running"></i> Sport
</a>
<div class="nav-divider"></div>
<div class="category-title">
<i class="fas fa-hashtag"></i> Hashtags
</div>
<a href="#" class="tag-item">
<div class="tag-dot"></div> Interview
</a>
<a href="#" class="tag-item">
<div class="tag-dot"></div> Conférence
</a>
<a href="#" class="tag-item">
<div class="tag-dot"></div> Colonialisme
</a>
<a href="#" class="tag-item">
<div class="tag-dot"></div> La Réunion
</a>
<a href="#" class="tag-item">
<div class="tag-dot"></div> Afrique
</a>
</nav>
</div>
<!-- Contenu principal -->
<div class="main-content">
<!-- Header avec barre de recherche et icônes -->
<div class="header">
<div class="search-container">
<form action="search.php" method="get">
<input type="text" name="q" placeholder="Recherche">
<button type="submit"><i class="fas fa-search"></i></button>
</form>
</div>
<div class="social-icons">
<a href="#" class="icon-button"><i class="fab fa-facebook"></i></a>
<a href="#" class="icon-button"><i class="fab fa-youtube"></i></a>
<a href="#" class="icon-button"><i class="fab fa-instagram"></i></a>
<a href="#" class="icon-button"><i class="fas fa-ellipsis-h"></i></a>
</div>
<div class="action-icons">
<a href="#" class="icon-button"><i class="fas fa-film"></i></a>
<button class="dark-mode-toggle"><i class="fas fa-moon"></i></button>
</div>
</div>
<!-- Section vidéo -->
<div class="video-container">
<div class="video-player">
<iframe src="<?php echo $video['url']; ?>" frameborder="0" allowfullscreen></iframe>
basic project skeleton
2025-04-08 06:37:14 +04:00
</div>
improve style
2025-04-08 06:51:33 +04:00
<div class="video-details">
<h1 class="video-title"><?php echo $video['title']; ?></h1>
<div class="video-info">
<div class="video-metadata">
<span class="video-views"><?php echo number_format($video['views']); ?> vues</span>
<span class="video-date"><?php echo $video['date']; ?></span>
</div>
basic project skeleton
2025-04-08 06:37:14 +04:00
improve style
2025-04-08 06:51:33 +04:00
<div class="video-actions">
<button class="action-button">
<i class="fas fa-thumbs-up"></i>
<span><?php echo number_format($video['likes']); ?></span>
</button>
<button class="action-button">
<i class="fas fa-share"></i>
<span>Partager</span>
</button>
<button class="action-button">
<i class="fas fa-download"></i>
<span>Télécharger</span>
</button>
basic project skeleton
2025-04-08 06:37:14 +04:00
</div>
</div>
improve style
2025-04-08 06:51:33 +04:00
<div class="channel-info">
<div class="channel-avatar">
<img src="img/channels/<?php echo $video['channelId']; ?>.jpg" alt="<?php echo $video['channel']; ?>">
basic project skeleton
2025-04-08 06:37:14 +04:00
</div>
improve style
2025-04-08 06:51:33 +04:00
<div class="channel-details">
<h3 class="channel-name"><?php echo $video['channel']; ?></h3>
basic project skeleton
2025-04-08 06:37:14 +04:00
</div>
</div>
improve style
2025-04-08 06:51:33 +04:00
<div class="video-description">
<?php echo $video['description']; ?>
</div>
<div class="video-tags">
<?php foreach ($video['tags'] as $tag): ?>
<a href="search.php?q=<?php echo urlencode($tag); ?>" class="tag"><?php echo $tag; ?></a>
<?php endforeach; ?>
</div>
</div>
</div>
<!-- Section commentaires -->
<div class="comments-section">
<h2 class="section-title">Commentaires</h2>
<div class="comment-form">
<div class="comment-avatar">
<img src="img/avatars/user.jpg" alt="Avatar">
</div>
<div class="comment-input">
<textarea placeholder="Ajouter un commentaire public..."></textarea>
<div class="comment-buttons">
<button class="comment-cancel">Annuler</button>
basic project skeleton
2025-04-08 06:37:14 +04:00
<button class="comment-submit">Commenter</button>
</div>
improve style
2025-04-08 06:51:33 +04:00
</div>
</div>
<div class="comments-list">
<div class="comment">
<div class="comment-avatar">
<img src="img/avatars/user1.jpg" alt="Avatar">
</div>
<div class="comment-content">
<div class="comment-author">Marie Dupont</div>
<div class="comment-date">Il y a 2 jours</div>
<div class="comment-text">
Excellente vidéo ! J'ai beaucoup appris sur l'histoire de La Réunion. Merci pour ce contenu de qualité.
basic project skeleton
2025-04-08 06:37:14 +04:00
</div>
improve style
2025-04-08 06:51:33 +04:00
<div class="comment-actions">
<button><i class="fas fa-thumbs-up"></i> 15</button>
<button><i class="fas fa-thumbs-down"></i></button>
<button>Répondre</button>
</div>
</div>
</div>
<div class="comment">
<div class="comment-avatar">
<img src="img/avatars/user2.jpg" alt="Avatar">
</div>
<div class="comment-content">
<div class="comment-author">Jean Martin</div>
<div class="comment-date">Il y a 5 jours</div>
<div class="comment-text">
Pourriez-vous faire une vidéo plus détaillée sur certains aspects abordés ici ? J'aimerais approfondir ce sujet.
</div>
<div class="comment-actions">
<button><i class="fas fa-thumbs-up"></i> 7</button>
<button><i class="fas fa-thumbs-down"></i></button>
<button>Répondre</button>
basic project skeleton
2025-04-08 06:37:14 +04:00
</div>
</div>
</div>
</div>
improve style
2025-04-08 06:51:33 +04:00
</div>
<!-- Section vidéos suggérées -->
<div class="suggested-videos">
<h2 class="section-title">Vidéos suggérées</h2>
basic project skeleton
2025-04-08 06:37:14 +04:00
improve style
2025-04-08 06:51:33 +04:00
<div class="video-grid">
<?php foreach ($suggestedVideos as $suggestedVideo): ?>
<div class="video-card" data-video-id="<?php echo $suggestedVideo['id']; ?>">
<div class="video-thumbnail">
<img src="img/video-thumbnails/recent-<?php echo $suggestedVideo['id']; ?>.jpg" alt="<?php echo $suggestedVideo['title']; ?>">
<div class="video-play-icon">
<i class="fas fa-play-circle"></i>
</div>
</div>
<div class="video-info">
<h3 class="video-title"><?php echo $suggestedVideo['title']; ?></h3>
<div class="video-metadata">
<span class="video-tag"><?php echo $suggestedVideo['tags'][0]; ?></span>
<div>
<span class="video-date"><?php echo $suggestedVideo['date']; ?></span>
<span class="video-views"><?php echo number_format($suggestedVideo['views']); ?> vues</span>
basic project skeleton
2025-04-08 06:37:14 +04:00
</div>
</div>
improve style
2025-04-08 06:51:33 +04:00
</div>
basic project skeleton
2025-04-08 06:37:14 +04:00
</div>
improve style
2025-04-08 06:51:33 +04:00
<?php endforeach; ?>
</div>
</div>
basic project skeleton
2025-04-08 06:37:14 +04:00
improve style
2025-04-08 06:51:33 +04:00
<!-- Footer -->
<div class="footer">
<div class="footer-logo">
<img src="img/logo.png" alt="Kaubuntu.re">
</div>
<div class="footer-social">
<a href="#"><i class="fab fa-facebook"></i></a>
<a href="#"><i class="fab fa-youtube"></i></a>
<a href="#"><i class="fab fa-instagram"></i></a>
<a href="#"><i class="fab fa-tiktok"></i></a>
</div>
<div class="footer-contact">CONTACT</div>
<div class="footer-email">zinfos@kaubuntu.com</div>
</div>
basic project skeleton
2025-04-08 06:37:14 +04:00
</div>
improve style
2025-04-08 06:51:33 +04:00
<!-- Menu mobile (masqué par défaut) -->
<button class="mobile-menu-toggle">
<i class="fas fa-bars"></i>
</button>
<div class="mobile-menu">
<button class="mobile-menu-close">
<i class="fas fa-times"></i>
</button>
<div class="search-container">
<form action="search.php" method="get">
<input type="text" name="q" placeholder="Recherche">
<button type="submit"><i class="fas fa-search"></i></button>
</form>
</div>
<a href="index.php" class="nav-item">
<i class="fas fa-home"></i> Accueil
</a>
<a href="#" class="nav-item">
<i class="fas fa-broadcast-tower"></i> Direct
</a>
<div class="nav-divider"></div>
<a href="#" class="nav-item">
<i class="fas fa-compass"></i> Explorer
</a>
<a href="#" class="nav-item">
<i class="fas fa-globe"></i> Actualité
</a>
<a href="#" class="nav-item">
<i class="fas fa-music"></i> Musique
</a>
<a href="#" class="nav-item">
<i class="fas fa-monument"></i> Histoire
</a>
<a href="#" class="nav-item">
<i class="fas fa-running"></i> Sport
</a>
basic project skeleton
2025-04-08 06:37:14 +04:00
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="js/main.js"></script>
</body>
</html>
Reference in New Issue Copy Permalink