From 456477856786eecf3067dfb5e18b5fe39ceccaca Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?C=C3=A9dric=20FAMIBELLE-PRONZOLA?= Date: Tue, 8 Apr 2025 06:51:33 +0400 Subject: [PATCH] improve style --- css/styles.css | 666 ++++++++++++++++++++++++++++++--------------- css/video-page.css | 329 +++++++++++++++------- index.php | 464 ++++++++++++++++++++++++++++--- js/main.js | 122 ++++----- video.php | 447 +++++++++++++++++++----------- 5 files changed, 1448 insertions(+), 580 deletions(-) diff --git a/css/styles.css b/css/styles.css index bc7a809..f66c94d 100644 --- a/css/styles.css +++ b/css/styles.css @@ -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; } } @@ -381,17 +585,25 @@ footer { .video-grid { 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; } } \ No newline at end of file diff --git a/css/video-page.css b/css/video-page.css index abaa133..3768a23 100644 --- a/css/video-page.css +++ b/css/video-page.css @@ -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; } } \ No newline at end of file diff --git a/index.php b/index.php index bc0d584..5023a3f 100644 --- a/index.php +++ b/index.php @@ -8,52 +8,440 @@ -
- + +
+ -
-
-
-

Bienvenue sur Kaubuntu.re

-

Votre plateforme de médias libres

-
-
- - -
+ +
+ + +
+ +
+
+
+ + +
+
+ + + +
+ + +
+
+ + +
+
+ +
+ +
+
+
+ + +
+ #Justice + #Romain + #Saint-Pierre + #Paris + #Afrique +
+ + +
+
+ +

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']; ?> +
+ +
+
+
+
+ +
+ +
+
+
+
+
+
+
+
+ + +
+
+ +

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): + ?> +
+
+ <?php echo $video['title']; ?> +
+ +
+
+
+

+
+ +
+ + vues +
+
-
- -
-

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): + ?> +
+
+ <?php echo $video['title']; ?> +
+ +
+
+
+

+
+ +
+ + vues +
+
+
-
- -
-

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): + ?> +
+
+ <?php echo $video['title']; ?> +
+ +
+
+
+

+
+ +
+ + vues +
+
+
+
+ +
+ + +
+ + +
+

Tendances

+ +
+ #LaRéunion + #Afrique + #Indépendance + #Saint-Pierre +
+
+ + +
+

KA UBUNTU est un mouvement politique indépendantiste et panafricaniste réunionnais qui a 5 objectifs :

+ + KA UBUNTU manifesto +
+ + +
+ + +
+ + + + +
+ +
CONTACT
+
zinfos@kaubuntu.com
+
- -
- + + + + +
+ + +
+
+ + +
+
+ + + Accueil + + + Direct + + +
+ + + Explorer + + + Actualité + + + Musique + + + Histoire + + + Sport +
- + 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) { -
- + +
+ -
-
-
- -
+
- - + +
Interview + + +
Conférence + + +
Colonialisme + + +
La Réunion + + +
Afrique + +
-
- + +
+ +
+
+
+ + +
+
+ + + +
+ + +
+
+ + +
+
+ +
+ +
+

+ +
+
+ vues + +
+ +
+ + + +
+
+ +
+
+ <?php echo $video['channel']; ?> +
+
+

+
+
+ +
+ +
+ +
+ + + +
+
+
+ + +
+

Commentaires

+ +
+
+ Avatar +
+
+ +
+ + +
+
+
+ +
+
+
+ Avatar +
+
+
Marie Dupont
+
Il y a 2 jours
+
+ Excellente vidéo ! J'ai beaucoup appris sur l'histoire de La Réunion. Merci pour ce contenu de qualité. +
+
+ + + +
+
+
+ +
+
+ Avatar +
+
+
Jean Martin
+
Il y a 5 jours
+
+ Pourriez-vous faire une vidéo plus détaillée sur certains aspects abordés ici ? J'aimerais approfondir ce sujet. +
+
+ + + +
+
+
+
+
+ + +
+

Vidéos suggérées

+ +
+ +
+
+ <?php echo $suggestedVideo['title']; ?> +
+ +
+
+
+

+
+ +
+ + vues +
+
+
+
+ +
+
+ + +
+ + +
+ + + + +
+ +
CONTACT
+
zinfos@kaubuntu.com
+
+
+ + + + +
+ + +
+
+ + +
+
+ + + Accueil + + + Direct + + +
+ + + Explorer + + + Actualité + + + Musique + + + Histoire + + + Sport +
- \ No newline at end of file