improve style
This commit is contained in:
@@ -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) {
|
||||
<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'; ?>
|
||||
<!-- Sidebar de navigation -->
|
||||
<div class="sidebar">
|
||||
<a href="index.php" class="logo">
|
||||
<img src="img/logo.png" alt="Kaubuntu.re">
|
||||
</a>
|
||||
|
||||
<main class="video-page">
|
||||
<div class="video-player-container">
|
||||
<div class="video-player">
|
||||
<iframe src="<?php echo $video['url']; ?>" frameborder="0" allowfullscreen></iframe>
|
||||
</div>
|
||||
<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>
|
||||
|
||||
<div class="video-content">
|
||||
<div class="video-primary-info">
|
||||
<h1 class="video-title"><?php echo $video['title']; ?></h1>
|
||||
|
||||
<div class="video-stats">
|
||||
<span class="video-views"><?php echo formatViewCount($video['views']); ?> vues</span>
|
||||
<span class="video-date">Publié le <?php echo formatDate($video['date']); ?></span>
|
||||
|
||||
<div class="video-actions">
|
||||
<button class="action-button">
|
||||
<i class="fas fa-thumbs-up"></i>
|
||||
<span><?php echo formatViewCount($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-bookmark"></i>
|
||||
<span>Enregistrer</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="video-secondary-info">
|
||||
<div class="channel-info">
|
||||
<div class="channel-image">
|
||||
<img src="img/channels/<?php echo $video['channelId']; ?>.jpg" alt="<?php echo $video['channel']; ?>">
|
||||
</div>
|
||||
<div class="channel-details">
|
||||
<h3 class="channel-name"><?php echo $video['channel']; ?></h3>
|
||||
<button class="subscribe-button">S'abonner</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="video-description">
|
||||
<p><?php echo $video['description']; ?></p>
|
||||
|
||||
<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>
|
||||
|
||||
<div class="video-comments">
|
||||
<h2>Commentaires</h2>
|
||||
<div class="comment-form">
|
||||
<textarea placeholder="Ajouter un commentaire..."></textarea>
|
||||
<button class="comment-submit">Commenter</button>
|
||||
</div>
|
||||
|
||||
<div class="comments-list">
|
||||
<!-- Les commentaires seraient chargés dynamiquement dans un vrai projet -->
|
||||
<div class="comment">
|
||||
<div class="comment-avatar">
|
||||
<img src="img/avatars/user1.jpg" alt="Utilisateur">
|
||||
</div>
|
||||
<div class="comment-content">
|
||||
<div class="comment-header">
|
||||
<span class="comment-author">Marie Dupont</span>
|
||||
<span class="comment-date">Il y a 2 jours</span>
|
||||
</div>
|
||||
<div class="comment-text">
|
||||
<p>Excellente vidéo ! J'ai beaucoup appris sur ce sujet. Merci pour ce contenu de qualité.</p>
|
||||
</div>
|
||||
<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="Utilisateur">
|
||||
</div>
|
||||
<div class="comment-content">
|
||||
<div class="comment-header">
|
||||
<span class="comment-author">Jean Martin</span>
|
||||
<span class="comment-date">Il y a 5 jours</span>
|
||||
</div>
|
||||
<div class="comment-text">
|
||||
<p>Pourriez-vous faire une vidéo plus détaillée sur certains aspects abordés ici ? J'aimerais approfondir ce sujet.</p>
|
||||
</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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<aside class="related-videos">
|
||||
<h2>Vidéos suggérées</h2>
|
||||
<div class="related-videos-list">
|
||||
<?php
|
||||
// Dans un vrai projet, on récupérerait des vidéos similaires
|
||||
foreach (array_slice($videos, 0, 5) as $relatedVideo):
|
||||
if ($relatedVideo['id'] != $videoId):
|
||||
?>
|
||||
<div class="related-video-card" data-video-id="<?php echo $relatedVideo['id']; ?>">
|
||||
<div class="related-video-thumbnail">
|
||||
<img src="img/video-thumbnails/featured-<?php echo $relatedVideo['id']; ?>.jpg" alt="<?php echo $relatedVideo['title']; ?>">
|
||||
</div>
|
||||
<div class="related-video-info">
|
||||
<h3 class="related-video-title"><?php echo $relatedVideo['title']; ?></h3>
|
||||
<div class="related-video-channel"><?php echo $relatedVideo['channel']; ?></div>
|
||||
<div class="related-video-metadata">
|
||||
<span class="related-video-views"><?php echo formatViewCount($relatedVideo['views']); ?> vues</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<?php
|
||||
endif;
|
||||
endforeach;
|
||||
?>
|
||||
</div>
|
||||
</aside>
|
||||
</main>
|
||||
|
||||
<?php include 'includes/footer.php'; ?>
|
||||
<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>
|
||||
|
||||
<div class="mobile-menu-overlay" id="mobileMenuOverlay">
|
||||
<?php include 'includes/mobile-menu.php'; ?>
|
||||
<!-- 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>
|
||||
</div>
|
||||
|
||||
<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>
|
||||
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="channel-info">
|
||||
<div class="channel-avatar">
|
||||
<img src="img/channels/<?php echo $video['channelId']; ?>.jpg" alt="<?php echo $video['channel']; ?>">
|
||||
</div>
|
||||
<div class="channel-details">
|
||||
<h3 class="channel-name"><?php echo $video['channel']; ?></h3>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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>
|
||||
<button class="comment-submit">Commenter</button>
|
||||
</div>
|
||||
</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é.
|
||||
</div>
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Section vidéos suggérées -->
|
||||
<div class="suggested-videos">
|
||||
<h2 class="section-title">Vidéos suggérées</h2>
|
||||
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<?php endforeach; ?>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 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>
|
||||
</div>
|
||||
|
||||
<!-- 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>
|
||||
</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 vidéos suggérées
|
||||
const relatedVideoCards = document.querySelectorAll('.related-video-card');
|
||||
|
||||
relatedVideoCards.forEach(card => {
|
||||
card.addEventListener('click', function() {
|
||||
const videoId = this.dataset.videoId;
|
||||
if (videoId) {
|
||||
window.location.href = 'video.php?id=' + videoId;
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user