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

improve style

Browse Source
This commit is contained in:
Cédric Famibelle-Pronzola
2025-04-08 06:51:33 +04:00
parent 62d926fe69
commit 4564778567
5 changed files with 1448 additions and 580 deletions
Download Patch File Download Diff File Expand all files Collapse all files
css/styles.css
+433 -221
View File
@@ -5,11 +5,28 @@
box-sizing: border-box;
}
:root {
--primary-red: #FF0000;
--primary-green: #008000;
--primary-black: #000000;
--sidebar-bg: #f0f0f0;
--main-bg: #ffffff;
--text-color: #000000;
--tag-bg: #f8f8f8;
--tag-border: #e0e0e0;
--search-bg: #e0e0e0;
--card-bg: #ffffff;
--card-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
--divider-color: #e5e5e5;
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
line-height: 1.6;
color: #333;
background-color: #f8f9fa;
color: var(--text-color);
background-color: var(--main-bg);
display: flex;
flex-direction: row;
}
.container {
@@ -21,7 +38,7 @@ body {
a {
text-decoration: none;
color: #0d6efd;
color: var(--text-color);
}
img {
@@ -29,123 +46,260 @@ img {
height: auto;
}
/* Header */
header {
background-color: #fff;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
position: sticky;
/* Layout */
.sidebar {
width: 250px;
height: 100vh;
position: fixed;
top: 0;
left: 0;
background-color: var(--sidebar-bg);
overflow-y: auto;
padding: 15px 0;
z-index: 100;
}
.header-container {
display: flex;
justify-content: space-between;
align-items: center;
padding: 15px 0;
.main-content {
margin-left: 250px;
width: calc(100% - 250px);
padding: 20px;
}
/* Logo */
.logo {
display: block;
padding: 10px 15px;
margin-bottom: 20px;
}
.logo img {
height: 40px;
}
.desktop-nav ul {
display: flex;
list-style: none;
}
.desktop-nav ul li {
margin-left: 20px;
}
.desktop-nav ul li a {
color: #333;
font-weight: 500;
transition: color 0.3s;
}
.desktop-nav ul li a:hover {
color: #0d6efd;
}
.mobile-menu-toggle {
display: none;
background: none;
border: none;
font-size: 24px;
cursor: pointer;
color: #333;
}
/* Hero Section */
.hero {
background-color: #0d6efd;
color: white;
padding: 60px 0;
text-align: center;
margin-bottom: 40px;
}
.hero-content h1 {
font-size: 2.5rem;
margin-bottom: 10px;
}
.hero-content p {
font-size: 1.2rem;
/* Navigation */
.sidebar-nav {
margin-bottom: 30px;
}
.nav-item {
display: flex;
align-items: center;
padding: 12px 15px;
font-size: 18px;
font-weight: 500;
transition: background-color 0.2s;
}
.nav-item:hover {
background-color: rgba(0, 0, 0, 0.05);
}
.nav-item i, .nav-item img {
margin-right: 15px;
width: 24px;
text-align: center;
}
.nav-divider {
height: 1px;
background-color: var(--divider-color);
margin: 15px 0;
}
.category-title {
font-size: 20px;
font-weight: 600;
padding: 10px 15px;
margin-top: 20px;
}
.tag-item {
display: flex;
align-items: center;
padding: 8px 15px;
font-size: 16px;
}
.tag-item .tag-dot {
width: 16px;
height: 16px;
border-radius: 50%;
background-color: var(--primary-red);
margin-right: 15px;
}
/* Header */
.header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 20px;
background-color: var(--main-bg);
position: sticky;
top: 0;
z-index: 50;
}
.search-container {
flex: 1;
max-width: 600px;
margin: 0 auto;
}
.search-container form {
display: flex;
position: relative;
}
.search-container input {
flex: 1;
width: 100%;
padding: 12px 15px;
border: none;
border-radius: 4px 0 0 4px;
border-radius: 4px;
background-color: var(--search-bg);
font-size: 16px;
}
.search-container button {
background-color: #fff;
color: #0d6efd;
position: absolute;
right: 10px;
top: 50%;
transform: translateY(-50%);
background: none;
border: none;
border-radius: 0 4px 4px 0;
padding: 0 20px;
cursor: pointer;
color: #555;
font-size: 18px;
}
/* Video Sections */
section {
margin-bottom: 40px;
.social-icons, .action-icons {
display: flex;
align-items: center;
}
section h2 {
font-size: 1.8rem;
.icon-button {
background: none;
border: none;
font-size: 24px;
color: var(--text-color);
margin-left: 15px;
cursor: pointer;
}
/* Hero Section */
.hero {
position: relative;
width: 100%;
height: 400px;
background-color: #888;
margin-bottom: 30px;
overflow: hidden;
border-radius: 8px;
}
.hero-content {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
color: white;
}
.hero-logo {
font-size: 50px;
font-weight: 700;
margin-bottom: 20px;
color: #333;
text-transform: uppercase;
}
.hero-logo .re {
color: var(--primary-red);
}
.play-button {
width: 80px;
height: 80px;
border-radius: 50%;
background-color: rgba(0, 0, 0, 0.7);
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
}
.play-button i {
color: white;
font-size: 36px;
}
/* Tags Section */
.tags-section {
margin-bottom: 30px;
overflow-x: auto;
white-space: nowrap;
padding-bottom: 10px;
}
.tag {
display: inline-block;
padding: 8px 15px;
margin-right: 10px;
border: 1px solid var(--tag-border);
border-radius: 20px;
font-size: 14px;
background-color: var(--tag-bg);
cursor: pointer;
transition: background-color 0.2s;
}
.tag:hover {
background-color: rgba(0, 0, 0, 0.05);
}
/* Section Headers */
.section-header {
display: flex;
justify-content: flex-start;
align-items: center;
margin-bottom: 20px;
}
.section-logo {
margin-right: 15px;
}
.section-logo img {
height: 40px;
}
.section-title {
font-size: 24px;
font-weight: 600;
}
/* Video Sections */
.video-section {
margin-bottom: 40px;
}
.video-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 20px;
}
.video-card {
background-color: white;
background-color: var(--card-bg);
border-radius: 8px;
overflow: hidden;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
box-shadow: var(--card-shadow);
transition: transform 0.3s;
cursor: pointer;
}
.video-card:hover {
@@ -166,15 +320,19 @@ section h2 {
object-fit: cover;
}
.video-duration {
.video-play-icon {
position: absolute;
bottom: 10px;
right: 10px;
background-color: rgba(0, 0, 0, 0.7);
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
padding: 2px 6px;
border-radius: 4px;
font-size: 12px;
font-size: 50px;
opacity: 0;
transition: opacity 0.3s;
}
.video-card:hover .video-play-icon {
opacity: 1;
}
.video-info {
@@ -185,195 +343,241 @@ section h2 {
font-size: 16px;
font-weight: 600;
margin-bottom: 8px;
}
.video-channel {
font-size: 14px;
color: #666;
margin-bottom: 5px;
line-height: 1.4;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.video-metadata {
display: flex;
font-size: 12px;
color: #888;
}
.video-views {
margin-right: 10px;
}
/* Categories Section */
.category-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 15px;
}
.category-card {
position: relative;
height: 120px;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
.category-card img {
width: 100%;
height: 100%;
object-fit: cover;
}
.category-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent);
display: flex;
align-items: flex-end;
padding: 15px;
}
.category-name {
color: white;
font-weight: 600;
}
/* Footer */
footer {
background-color: #333;
color: #fff;
padding: 40px 0;
}
.footer-container {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
font-size: 12px;
color: #666;
}
.footer-column {
flex: 1;
min-width: 200px;
.video-tag {
display: inline-block;
padding: 3px 8px;
background-color: #f0f0f0;
border-radius: 4px;
font-size: 12px;
margin-right: 5px;
}
.video-date, .video-views {
font-size: 12px;
}
/* Carousel */
.carousel {
position: relative;
overflow: hidden;
}
.carousel-container {
display: flex;
transition: transform 0.5s ease;
}
.carousel-item {
flex: 0 0 auto;
width: 280px;
margin-right: 20px;
}
.carousel-controls {
display: flex;
justify-content: center;
margin-top: 15px;
}
.carousel-dot {
width: 10px;
height: 10px;
border-radius: 50%;
background-color: #ccc;
margin: 0 5px;
cursor: pointer;
}
.carousel-dot.active {
background-color: var(--primary-red);
}
/* View More Button */
.view-more {
display: block;
width: max-content;
margin: 20px auto;
padding: 10px 25px;
background-color: var(--search-bg);
border: none;
border-radius: 4px;
font-size: 16px;
cursor: pointer;
transition: background-color 0.2s;
}
.view-more:hover {
background-color: #d0d0d0;
}
/* Info Section */
.info-section {
margin: 40px 0;
padding: 30px;
background-color: var(--card-bg);
border-radius: 8px;
box-shadow: var(--card-shadow);
}
.info-header {
font-size: 24px;
font-weight: 600;
margin-bottom: 20px;
}
.footer-column h3 {
margin-bottom: 15px;
font-size: 18px;
.info-text {
font-size: 16px;
line-height: 1.6;
margin-bottom: 20px;
}
.footer-column ul {
list-style: none;
.info-image {
width: 100%;
margin: 20px 0;
}
.footer-column ul li {
margin-bottom: 8px;
}
.footer-column ul li a {
color: #ccc;
transition: color 0.3s;
}
.footer-column ul li a:hover {
color: #fff;
}
.footer-bottom {
/* Footer */
.footer {
margin-top: 40px;
padding: 30px 0;
background-color: var(--sidebar-bg);
text-align: center;
padding-top: 20px;
margin-top: 20px;
border-top: 1px solid #444;
}
.footer-logo {
margin-bottom: 20px;
}
.footer-logo img {
height: 50px;
}
.footer-social {
display: flex;
justify-content: center;
margin-bottom: 20px;
}
.footer-social a {
margin: 0 10px;
font-size: 24px;
color: var(--text-color);
}
.footer-contact {
font-size: 18px;
font-weight: 600;
margin-bottom: 10px;
}
.footer-email {
font-size: 16px;
}
/* Dark Mode Toggle */
.dark-mode-toggle {
background: none;
border: none;
font-size: 20px;
cursor: pointer;
color: var(--text-color);
margin-left: 15px;
}
/* Mobile Menu */
.mobile-menu-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.8);
z-index: 200;
.mobile-menu-toggle {
display: none;
background: none;
border: none;
font-size: 24px;
cursor: pointer;
position: fixed;
top: 15px;
right: 15px;
z-index: 200;
}
.mobile-menu {
position: fixed;
top: 0;
left: 0;
width: 250px;
width: 100%;
height: 100%;
background-color: white;
padding: 20px;
overflow-y: auto;
background-color: var(--main-bg);
z-index: 150;
padding: 60px 20px 20px;
transform: translateX(-100%);
transition: transform 0.3s;
}
.mobile-menu-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 30px;
.mobile-menu.active {
transform: translateX(0);
}
.mobile-menu-close {
position: absolute;
top: 15px;
right: 15px;
background: none;
border: none;
font-size: 24px;
cursor: pointer;
}
.mobile-menu-nav ul {
list-style: none;
}
.mobile-menu-nav ul li {
margin-bottom: 15px;
}
.mobile-menu-nav ul li a {
color: #333;
font-size: 18px;
font-weight: 500;
}
/* Media Queries */
@media (max-width: 992px) {
.video-grid {
grid-template-columns: repeat(2, 1fr);
}
.category-grid {
grid-template-columns: repeat(3, 1fr);
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}
}
@media (max-width: 768px) {
.desktop-nav {
.sidebar {
display: none;
}
.main-content {
margin-left: 0;
width: 100%;
}
.mobile-menu-toggle {
display: block;
}
.header {
padding: 10px;
}
.search-container {
max-width: 100%;
}
.social-icons {
display: none;
}
.hero {
padding: 40px 0;
height: 300px;
}
.hero-content h1 {
font-size: 2rem;
}
.footer-container {
flex-direction: column;
}
.footer-column {
margin-bottom: 30px;
.hero-logo {
font-size: 40px;
}
}
@@ -382,16 +586,24 @@ footer {
grid-template-columns: 1fr;
}
.category-grid {
grid-template-columns: repeat(2, 1fr);
.section-title {
font-size: 20px;
}
.hero-content h1 {
font-size: 1.8rem;
.hero {
height: 250px;
}
.search-container input,
.search-container button {
padding: 10px;
.hero-logo {
font-size: 36px;
}
.play-button {
width: 60px;
height: 60px;
}
.play-button i {
font-size: 24px;
}
}
css/video-page.css
+234 -91
View File
@@ -12,8 +12,11 @@
.video-player {
position: relative;
padding-top: 56.25%; /* Ratio 16:9 */
width: 100%;
padding-bottom: 56.25%; /* Ratio 16:9 */
height: 0;
overflow: hidden;
margin-bottom: 1.5rem;
border-radius: 8px;
}
.video-player iframe {
@@ -37,26 +40,35 @@
.video-title {
font-size: 1.5rem;
margin-bottom: 10px;
font-weight: 600;
font-weight: 700;
line-height: 1.3;
margin-bottom: 1rem;
color: #000;
}
.video-stats {
.video-info {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
color: #666;
font-size: 14px;
margin-bottom: 1.5rem;
padding-bottom: 1.5rem;
border-bottom: 1px solid #eee;
}
.video-date {
margin-left: 15px;
.video-metadata {
display: flex;
flex-direction: column;
gap: 0.25rem;
}
.video-views, .video-date {
font-size: 0.875rem;
color: #666;
}
.video-actions {
display: flex;
margin-top: 10px;
gap: 1.5rem;
}
.action-button {
@@ -65,14 +77,20 @@
background: none;
border: none;
cursor: pointer;
margin-right: 20px;
color: #333;
font-size: 14px;
gap: 0.5rem;
font-size: 0.875rem;
padding: 0.5rem;
border-radius: 4px;
transition: background-color 0.2s;
}
.action-button:hover {
background-color: #f5f5f5;
}
.action-button i {
margin-right: 5px;
font-size: 18px;
font-size: 1.25rem;
color: #444;
}
.video-secondary-info {
@@ -82,30 +100,23 @@
.channel-info {
display: flex;
align-items: center;
margin-bottom: 15px;
gap: 1rem;
margin-bottom: 1.5rem;
padding-bottom: 1.5rem;
border-bottom: 1px solid #eee;
}
.channel-image {
width: 50px;
height: 50px;
margin-right: 15px;
}
.channel-image img {
width: 100%;
height: 100%;
.channel-avatar img {
width: 48px;
height: 48px;
border-radius: 50%;
object-fit: cover;
}
.channel-details {
flex: 1;
}
.channel-name {
font-size: 16px;
font-size: 1rem;
font-weight: 600;
margin-bottom: 5px;
margin: 0;
}
.subscribe-button {
@@ -124,109 +135,242 @@
}
.video-description {
margin-bottom: 20px;
font-size: 0.9375rem;
line-height: 1.6;
font-size: 14px;
margin-bottom: 1.5rem;
color: #333;
white-space: pre-line;
}
.video-tags {
margin-top: 10px;
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
margin-bottom: 1rem;
}
.tag {
display: inline-block;
color: #0d6efd;
margin-right: 10px;
font-size: 14px;
background-color: #f5f5f5;
border-radius: 16px;
padding: 0.4rem 0.75rem;
font-size: 0.8125rem;
color: #222;
text-decoration: none;
transition: background-color 0.2s;
}
.video-comments h2 {
font-size: 18px;
margin-bottom: 15px;
.tag:hover {
background-color: #e0e0e0;
}
/* Commentaires */
.comments-section {
background-color: #fff;
border-radius: 10px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
margin-bottom: 2rem;
padding: 1.5rem;
}
.section-title {
font-size: 1.25rem;
font-weight: 600;
margin-bottom: 1.5rem;
color: #000;
}
.comment-form {
margin-bottom: 25px;
display: flex;
gap: 1rem;
margin-bottom: 2rem;
}
.comment-form textarea {
.comment-avatar img {
width: 40px;
height: 40px;
border-radius: 50%;
object-fit: cover;
}
.comment-input {
flex: 1;
}
.comment-input textarea {
width: 100%;
padding: 10px;
padding: 0.75rem;
border: 1px solid #ddd;
border-radius: 4px;
margin-bottom: 10px;
resize: vertical;
min-height: 80px;
resize: none;
height: 80px;
margin-bottom: 0.75rem;
font-family: inherit;
}
.comment-buttons {
display: flex;
justify-content: flex-end;
gap: 0.75rem;
}
.comment-cancel {
padding: 0.5rem 0.75rem;
background: none;
border: none;
cursor: pointer;
font-weight: 500;
color: #666;
}
.comment-submit {
background-color: #0d6efd;
padding: 0.5rem 1.25rem;
background-color: #e62117;
color: white;
border: none;
padding: 8px 15px;
border-radius: 4px;
cursor: pointer;
float: right;
font-weight: 500;
transition: background-color 0.2s;
}
.comment-submit:hover {
background-color: #cc1e12;
}
.comments-list {
margin-top: 20px;
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.comment {
display: flex;
margin-bottom: 20px;
}
.comment-avatar {
width: 40px;
height: 40px;
margin-right: 15px;
}
.comment-avatar img {
width: 100%;
height: 100%;
border-radius: 50%;
object-fit: cover;
gap: 1rem;
}
.comment-content {
flex: 1;
}
.comment-header {
display: flex;
align-items: center;
margin-bottom: 5px;
}
.comment-author {
font-weight: 600;
margin-right: 10px;
margin-bottom: 0.25rem;
}
.comment-date {
font-size: 12px;
font-size: 0.75rem;
color: #666;
margin-bottom: 0.5rem;
}
.comment-text {
font-size: 14px;
margin-bottom: 5px;
font-size: 0.9375rem;
line-height: 1.5;
margin-bottom: 0.75rem;
}
.comment-actions {
display: flex;
gap: 1rem;
}
.comment-actions button {
background: none;
border: none;
color: #666;
margin-right: 15px;
font-size: 12px;
cursor: pointer;
font-size: 0.875rem;
color: #666;
padding: 0.25rem 0.5rem;
border-radius: 4px;
display: flex;
align-items: center;
gap: 0.375rem;
}
.comment-actions button i {
margin-right: 5px;
.comment-actions button:hover {
background-color: #f5f5f5;
}
/* Vidéos suggérées */
.suggested-videos {
background-color: #fff;
border-radius: 10px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
margin-bottom: 2rem;
padding: 1.5rem;
}
.video-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 1.5rem;
}
.video-card {
cursor: pointer;
transition: transform 0.2s;
}
.video-card:hover {
transform: translateY(-3px);
}
.video-thumbnail {
position: relative;
border-radius: 8px;
overflow: hidden;
margin-bottom: 0.75rem;
}
.video-thumbnail img {
width: 100%;
aspect-ratio: 16/9;
object-fit: cover;
transition: transform 0.3s;
}
.video-card:hover .video-thumbnail img {
transform: scale(1.05);
}
.video-play-icon {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
opacity: 0;
transition: opacity 0.3s;
}
.video-play-icon i {
font-size: 3rem;
color: white;
opacity: 0.9;
}
.video-card:hover .video-play-icon {
opacity: 1;
}
.video-info h3 {
font-size: 0.9375rem;
font-weight: 600;
line-height: 1.4;
margin-bottom: 0.5rem;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.video-tag {
display: inline-block;
background-color: #f0f0f0;
color: #333;
padding: 0.125rem 0.5rem;
border-radius: 4px;
font-size: 0.75rem;
margin-bottom: 0.25rem;
}
/* Vidéos associées */
@@ -323,24 +467,19 @@
}
@media (max-width: 768px) {
.video-stats {
.video-info {
flex-direction: column;
gap: 1rem;
align-items: flex-start;
}
.video-actions {
width: 100%;
margin-top: 15px;
justify-content: space-between;
}
.action-button {
margin-right: 0;
}
.video-date {
margin-left: 0;
margin-top: 5px;
.video-grid {
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}
}
@@ -367,6 +506,10 @@
}
.comment-avatar {
margin-bottom: 10px;
display: none;
}
.video-grid {
grid-template-columns: 1fr;
}
}
index.php
+418 -30
View File
@@ -8,50 +8,438 @@
<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>
<section class="hero">
<div class="hero-content">
<h1>Bienvenue sur Kaubuntu.re</h1>
<p>Votre plateforme de médias libres</p>
<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="query" placeholder="Rechercher des vidéos...">
<input type="text" name="q" placeholder="Recherche">
<button type="submit"><i class="fas fa-search"></i></button>
</form>
</div>
</div>
</section>
<section class="featured-videos">
<h2>Vidéos à la une</h2>
<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>
<!-- Hero Banner -->
<div class="hero">
<div class="hero-content">
<div class="hero-logo">KAUBUNTU<span class="re">.RE</span></div>
<div class="play-button">
<i class="fas fa-play"></i>
</div>
</div>
</div>
<!-- Hashtags en ligne -->
<div class="tags-section">
<a href="#" class="tag">#Justice</a>
<a href="#" class="tag">#Romain</a>
<a href="#" class="tag">#Saint-Pierre</a>
<a href="#" class="tag">#Paris</a>
<a href="#" class="tag">#Afrique</a>
</div>
<!-- Section Shorts -->
<div class="video-section">
<div class="section-header">
<div class="section-logo">
<img src="img/logo.png" alt="Kaubuntu.re">
</div>
<h2 class="section-title">Shorts</h2>
</div>
<div class="carousel">
<div class="carousel-container">
<?php
// Dans un vrai projet, ces données viendraient d'une API PeerTube
$shorts = [
[
'id' => 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):
?>
<div class="carousel-item">
<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']; ?>">
<div class="video-play-icon">
<i class="fas fa-play-circle"></i>
</div>
</div>
</div>
</div>
<?php endforeach; ?>
</div>
<div class="carousel-controls">
<div class="carousel-dot active"></div>
<div class="carousel-dot"></div>
<div class="carousel-dot"></div>
<div class="carousel-dot"></div>
</div>
</div>
</div>
<!-- Section Dernières vidéos -->
<div class="video-section">
<div class="section-header">
<div class="section-logo">
<img src="img/logo.png" alt="Kaubuntu.re">
</div>
<h2 class="section-title">Dernières vidéos</h2>
</div>
<div class="video-grid">
<?php include 'includes/featured-videos.php'; ?>
</div>
</section>
<?php
// Dans un vrai projet, ces données viendraient d'une API PeerTube
$recentVideos = [
[
'id' => 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):
?>
<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']; ?>">
<div class="video-play-icon">
<i class="fas fa-play-circle"></i>
</div>
</div>
<div class="video-info">
<h3 class="video-title"><?php echo $video['title']; ?></h3>
<div class="video-metadata">
<span class="video-tag"><?php echo $video['tag']; ?></span>
<div>
<span class="video-date"><?php echo $video['date']; ?></span>
<span class="video-views"><?php echo $video['views']; ?> vues</span>
</div>
</div>
</div>
</div>
<?php endforeach; ?>
</div>
<button class="view-more">Voir plus</button>
</div>
<!-- Section Tendances -->
<div class="video-section">
<div class="section-header">
<div class="section-logo">
<img src="img/logo.png" alt="Kaubuntu.re">
</div>
<h2 class="section-title">Tendances</h2>
</div>
<section class="recent-videos">
<h2>Vidéos récentes</h2>
<div class="video-grid">
<?php include 'includes/recent-videos.php'; ?>
</div>
</section>
<?php
// Dans un vrai projet, ces données viendraient d'une API PeerTube
$trendingVideos = [
[
'id' => 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
]
];
<section class="categories">
<h2>Catégories</h2>
<div class="category-grid">
<?php include 'includes/categories.php'; ?>
foreach ($trendingVideos 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']; ?>">
<div class="video-play-icon">
<i class="fas fa-play-circle"></i>
</div>
</section>
</main>
<?php include 'includes/footer.php'; ?>
</div>
<div class="video-info">
<h3 class="video-title"><?php echo $video['title']; ?></h3>
<div class="video-metadata">
<span class="video-tag"><?php echo $video['tag']; ?></span>
<div>
<span class="video-date"><?php echo $video['date']; ?></span>
<span class="video-views"><?php echo $video['views']; ?> vues</span>
</div>
</div>
</div>
</div>
<?php endforeach; ?>
</div>
<div class="mobile-menu-overlay" id="mobileMenuOverlay">
<?php include 'includes/mobile-menu.php'; ?>
<button class="view-more">Voir plus</button>
</div>
<!-- Section Indépendance -->
<div class="video-section">
<div class="section-header">
<div class="section-logo">
<img src="img/logo.png" alt="Kaubuntu.re">
</div>
<h2 class="section-title">Indépendance</h2>
</div>
<div class="video-grid">
<?php
// Dans un vrai projet, ces données viendraient d'une API PeerTube
$independenceVideos = [
[
'id' => 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):
?>
<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']; ?>">
<div class="video-play-icon">
<i class="fas fa-play-circle"></i>
</div>
</div>
<div class="video-info">
<h3 class="video-title"><?php echo $video['title']; ?></h3>
<div class="video-metadata">
<span class="video-tag"><?php echo $video['tag']; ?></span>
<div>
<span class="video-date"><?php echo $video['date']; ?></span>
<span class="video-views"><?php echo $video['views']; ?> vues</span>
</div>
</div>
</div>
</div>
<?php endforeach; ?>
</div>
<button class="view-more">Voir plus</button>
</div>
<!-- Section Tendances Hashtags -->
<div class="video-section">
<h2 class="section-title">Tendances</h2>
<div class="tags-section">
<a href="#" class="tag">#LaRéunion</a>
<a href="#" class="tag">#Afrique</a>
<a href="#" class="tag">#Indépendance</a>
<a href="#" class="tag">#Saint-Pierre</a>
</div>
</div>
<!-- Section Informations -->
<div class="info-section">
<h2 class="info-header">KA UBUNTU est un mouvement politique indépendantiste et panafricaniste réunionnais qui a 5 objectifs :</h2>
<img src="img/ka-ubuntu-manifesto.png" alt="KA UBUNTU manifesto" class="info-image">
</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>
js/main.js
+58 -64
View File
@@ -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);
});
});
});
video.php
+218 -87
View File
@@ -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,83 +75,165 @@ 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">
<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>
</div>
</div>
<div class="video-content">
<div class="video-primary-info">
<div class="video-details">
<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-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 formatViewCount($video['likes']); ?></span>
<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-bookmark"></i>
<span>Enregistrer</span>
<i class="fas fa-download"></i>
<span>Télécharger</span>
</button>
</div>
</div>
</div>
<div class="video-secondary-info">
<div class="channel-info">
<div class="channel-image">
<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>
<button class="subscribe-button">S'abonner</button>
</div>
</div>
<div class="video-description">
<p><?php echo $video['description']; ?></p>
<?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>
<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>
<!-- Section commentaires -->
<div class="comments-section">
<h2 class="section-title">Commentaires</h2>
<div class="comment-form">
<textarea placeholder="Ajouter un commentaire..."></textarea>
<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">
<!-- 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">
<img src="img/avatars/user1.jpg" alt="Avatar">
</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-author">Marie Dupont</div>
<div class="comment-date">Il y a 2 jours</div>
<div class="comment-text">
<p>Excellente vidéo ! J'ai beaucoup appris sur ce sujet. Merci pour ce contenu de qualité.</p>
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>
@@ -150,15 +245,13 @@ function formatDate($dateString) {
<div class="comment">
<div class="comment-avatar">
<img src="img/avatars/user2.jpg" alt="Utilisateur">
<img src="img/avatars/user2.jpg" alt="Avatar">
</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-author">Jean Martin</div>
<div class="comment-date">Il y a 5 jours</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>
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>
@@ -169,59 +262,97 @@ function formatDate($dateString) {
</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>
<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'; ?>
<!-- Footer -->
<div class="footer">
<div class="footer-logo">
<img src="img/logo.png" alt="Kaubuntu.re">
</div>
<div class="mobile-menu-overlay" id="mobileMenuOverlay">
<?php include 'includes/mobile-menu.php'; ?>
<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>