improve style
This commit is contained in:
+433
-221
@@ -5,11 +5,28 @@
|
|||||||
box-sizing: border-box;
|
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 {
|
body {
|
||||||
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
||||||
line-height: 1.6;
|
line-height: 1.6;
|
||||||
color: #333;
|
color: var(--text-color);
|
||||||
background-color: #f8f9fa;
|
background-color: var(--main-bg);
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
}
|
}
|
||||||
|
|
||||||
.container {
|
.container {
|
||||||
@@ -21,7 +38,7 @@ body {
|
|||||||
|
|
||||||
a {
|
a {
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
color: #0d6efd;
|
color: var(--text-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
img {
|
img {
|
||||||
@@ -29,123 +46,260 @@ img {
|
|||||||
height: auto;
|
height: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Header */
|
/* Layout */
|
||||||
header {
|
.sidebar {
|
||||||
background-color: #fff;
|
width: 250px;
|
||||||
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
|
height: 100vh;
|
||||||
position: sticky;
|
position: fixed;
|
||||||
top: 0;
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
background-color: var(--sidebar-bg);
|
||||||
|
overflow-y: auto;
|
||||||
|
padding: 15px 0;
|
||||||
z-index: 100;
|
z-index: 100;
|
||||||
}
|
}
|
||||||
|
|
||||||
.header-container {
|
.main-content {
|
||||||
display: flex;
|
margin-left: 250px;
|
||||||
justify-content: space-between;
|
width: calc(100% - 250px);
|
||||||
align-items: center;
|
padding: 20px;
|
||||||
padding: 15px 0;
|
}
|
||||||
|
|
||||||
|
/* Logo */
|
||||||
|
.logo {
|
||||||
|
display: block;
|
||||||
|
padding: 10px 15px;
|
||||||
|
margin-bottom: 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.logo img {
|
.logo img {
|
||||||
height: 40px;
|
height: 40px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.desktop-nav ul {
|
/* Navigation */
|
||||||
display: flex;
|
.sidebar-nav {
|
||||||
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;
|
|
||||||
margin-bottom: 30px;
|
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 {
|
.search-container {
|
||||||
|
flex: 1;
|
||||||
max-width: 600px;
|
max-width: 600px;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
.search-container form {
|
.search-container form {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
position: relative;
|
||||||
}
|
}
|
||||||
|
|
||||||
.search-container input {
|
.search-container input {
|
||||||
flex: 1;
|
width: 100%;
|
||||||
padding: 12px 15px;
|
padding: 12px 15px;
|
||||||
border: none;
|
border: none;
|
||||||
border-radius: 4px 0 0 4px;
|
border-radius: 4px;
|
||||||
|
background-color: var(--search-bg);
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.search-container button {
|
.search-container button {
|
||||||
background-color: #fff;
|
position: absolute;
|
||||||
color: #0d6efd;
|
right: 10px;
|
||||||
|
top: 50%;
|
||||||
|
transform: translateY(-50%);
|
||||||
|
background: none;
|
||||||
border: none;
|
border: none;
|
||||||
border-radius: 0 4px 4px 0;
|
|
||||||
padding: 0 20px;
|
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
color: #555;
|
||||||
font-size: 18px;
|
font-size: 18px;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Video Sections */
|
.social-icons, .action-icons {
|
||||||
section {
|
display: flex;
|
||||||
margin-bottom: 40px;
|
align-items: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
section h2 {
|
.icon-button {
|
||||||
font-size: 1.8rem;
|
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;
|
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 {
|
.video-grid {
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: repeat(3, 1fr);
|
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
|
||||||
gap: 20px;
|
gap: 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.video-card {
|
.video-card {
|
||||||
background-color: white;
|
background-color: var(--card-bg);
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
box-shadow: var(--card-shadow);
|
||||||
transition: transform 0.3s;
|
transition: transform 0.3s;
|
||||||
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
.video-card:hover {
|
.video-card:hover {
|
||||||
@@ -166,15 +320,19 @@ section h2 {
|
|||||||
object-fit: cover;
|
object-fit: cover;
|
||||||
}
|
}
|
||||||
|
|
||||||
.video-duration {
|
.video-play-icon {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
bottom: 10px;
|
top: 50%;
|
||||||
right: 10px;
|
left: 50%;
|
||||||
background-color: rgba(0, 0, 0, 0.7);
|
transform: translate(-50%, -50%);
|
||||||
color: white;
|
color: white;
|
||||||
padding: 2px 6px;
|
font-size: 50px;
|
||||||
border-radius: 4px;
|
opacity: 0;
|
||||||
font-size: 12px;
|
transition: opacity 0.3s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.video-card:hover .video-play-icon {
|
||||||
|
opacity: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
.video-info {
|
.video-info {
|
||||||
@@ -185,195 +343,241 @@ section h2 {
|
|||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
margin-bottom: 8px;
|
margin-bottom: 8px;
|
||||||
}
|
line-height: 1.4;
|
||||||
|
display: -webkit-box;
|
||||||
.video-channel {
|
-webkit-line-clamp: 2;
|
||||||
font-size: 14px;
|
-webkit-box-orient: vertical;
|
||||||
color: #666;
|
overflow: hidden;
|
||||||
margin-bottom: 5px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.video-metadata {
|
.video-metadata {
|
||||||
display: flex;
|
display: flex;
|
||||||
font-size: 12px;
|
align-items: center;
|
||||||
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;
|
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
flex-wrap: wrap;
|
font-size: 12px;
|
||||||
|
color: #666;
|
||||||
}
|
}
|
||||||
|
|
||||||
.footer-column {
|
.video-tag {
|
||||||
flex: 1;
|
display: inline-block;
|
||||||
min-width: 200px;
|
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;
|
margin-bottom: 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.footer-column h3 {
|
.info-text {
|
||||||
margin-bottom: 15px;
|
font-size: 16px;
|
||||||
font-size: 18px;
|
line-height: 1.6;
|
||||||
|
margin-bottom: 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.footer-column ul {
|
.info-image {
|
||||||
list-style: none;
|
width: 100%;
|
||||||
|
margin: 20px 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.footer-column ul li {
|
/* Footer */
|
||||||
margin-bottom: 8px;
|
.footer {
|
||||||
}
|
margin-top: 40px;
|
||||||
|
padding: 30px 0;
|
||||||
.footer-column ul li a {
|
background-color: var(--sidebar-bg);
|
||||||
color: #ccc;
|
|
||||||
transition: color 0.3s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.footer-column ul li a:hover {
|
|
||||||
color: #fff;
|
|
||||||
}
|
|
||||||
|
|
||||||
.footer-bottom {
|
|
||||||
text-align: center;
|
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 */
|
||||||
.mobile-menu-overlay {
|
.mobile-menu-toggle {
|
||||||
position: fixed;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
background-color: rgba(0, 0, 0, 0.8);
|
|
||||||
z-index: 200;
|
|
||||||
display: none;
|
display: none;
|
||||||
|
background: none;
|
||||||
|
border: none;
|
||||||
|
font-size: 24px;
|
||||||
|
cursor: pointer;
|
||||||
|
position: fixed;
|
||||||
|
top: 15px;
|
||||||
|
right: 15px;
|
||||||
|
z-index: 200;
|
||||||
}
|
}
|
||||||
|
|
||||||
.mobile-menu {
|
.mobile-menu {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
top: 0;
|
top: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
width: 250px;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
background-color: white;
|
background-color: var(--main-bg);
|
||||||
padding: 20px;
|
z-index: 150;
|
||||||
overflow-y: auto;
|
padding: 60px 20px 20px;
|
||||||
|
transform: translateX(-100%);
|
||||||
|
transition: transform 0.3s;
|
||||||
}
|
}
|
||||||
|
|
||||||
.mobile-menu-header {
|
.mobile-menu.active {
|
||||||
display: flex;
|
transform: translateX(0);
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
margin-bottom: 30px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.mobile-menu-close {
|
.mobile-menu-close {
|
||||||
|
position: absolute;
|
||||||
|
top: 15px;
|
||||||
|
right: 15px;
|
||||||
background: none;
|
background: none;
|
||||||
border: none;
|
border: none;
|
||||||
font-size: 24px;
|
font-size: 24px;
|
||||||
cursor: pointer;
|
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 Queries */
|
||||||
@media (max-width: 992px) {
|
@media (max-width: 992px) {
|
||||||
.video-grid {
|
.video-grid {
|
||||||
grid-template-columns: repeat(2, 1fr);
|
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
|
||||||
}
|
|
||||||
|
|
||||||
.category-grid {
|
|
||||||
grid-template-columns: repeat(3, 1fr);
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width: 768px) {
|
@media (max-width: 768px) {
|
||||||
.desktop-nav {
|
.sidebar {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.main-content {
|
||||||
|
margin-left: 0;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
.mobile-menu-toggle {
|
.mobile-menu-toggle {
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.header {
|
||||||
|
padding: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.search-container {
|
||||||
|
max-width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.social-icons {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
.hero {
|
.hero {
|
||||||
padding: 40px 0;
|
height: 300px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.hero-content h1 {
|
.hero-logo {
|
||||||
font-size: 2rem;
|
font-size: 40px;
|
||||||
}
|
|
||||||
|
|
||||||
.footer-container {
|
|
||||||
flex-direction: column;
|
|
||||||
}
|
|
||||||
|
|
||||||
.footer-column {
|
|
||||||
margin-bottom: 30px;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -382,16 +586,24 @@ footer {
|
|||||||
grid-template-columns: 1fr;
|
grid-template-columns: 1fr;
|
||||||
}
|
}
|
||||||
|
|
||||||
.category-grid {
|
.section-title {
|
||||||
grid-template-columns: repeat(2, 1fr);
|
font-size: 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.hero-content h1 {
|
.hero {
|
||||||
font-size: 1.8rem;
|
height: 250px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.search-container input,
|
.hero-logo {
|
||||||
.search-container button {
|
font-size: 36px;
|
||||||
padding: 10px;
|
}
|
||||||
|
|
||||||
|
.play-button {
|
||||||
|
width: 60px;
|
||||||
|
height: 60px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.play-button i {
|
||||||
|
font-size: 24px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
+234
-91
@@ -12,8 +12,11 @@
|
|||||||
|
|
||||||
.video-player {
|
.video-player {
|
||||||
position: relative;
|
position: relative;
|
||||||
padding-top: 56.25%; /* Ratio 16:9 */
|
padding-bottom: 56.25%; /* Ratio 16:9 */
|
||||||
width: 100%;
|
height: 0;
|
||||||
|
overflow: hidden;
|
||||||
|
margin-bottom: 1.5rem;
|
||||||
|
border-radius: 8px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.video-player iframe {
|
.video-player iframe {
|
||||||
@@ -37,26 +40,35 @@
|
|||||||
|
|
||||||
.video-title {
|
.video-title {
|
||||||
font-size: 1.5rem;
|
font-size: 1.5rem;
|
||||||
margin-bottom: 10px;
|
font-weight: 700;
|
||||||
font-weight: 600;
|
line-height: 1.3;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
color: #000;
|
||||||
}
|
}
|
||||||
|
|
||||||
.video-stats {
|
.video-info {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-wrap: wrap;
|
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
color: #666;
|
margin-bottom: 1.5rem;
|
||||||
font-size: 14px;
|
padding-bottom: 1.5rem;
|
||||||
|
border-bottom: 1px solid #eee;
|
||||||
}
|
}
|
||||||
|
|
||||||
.video-date {
|
.video-metadata {
|
||||||
margin-left: 15px;
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 0.25rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.video-views, .video-date {
|
||||||
|
font-size: 0.875rem;
|
||||||
|
color: #666;
|
||||||
}
|
}
|
||||||
|
|
||||||
.video-actions {
|
.video-actions {
|
||||||
display: flex;
|
display: flex;
|
||||||
margin-top: 10px;
|
gap: 1.5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.action-button {
|
.action-button {
|
||||||
@@ -65,14 +77,20 @@
|
|||||||
background: none;
|
background: none;
|
||||||
border: none;
|
border: none;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
margin-right: 20px;
|
gap: 0.5rem;
|
||||||
color: #333;
|
font-size: 0.875rem;
|
||||||
font-size: 14px;
|
padding: 0.5rem;
|
||||||
|
border-radius: 4px;
|
||||||
|
transition: background-color 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.action-button:hover {
|
||||||
|
background-color: #f5f5f5;
|
||||||
}
|
}
|
||||||
|
|
||||||
.action-button i {
|
.action-button i {
|
||||||
margin-right: 5px;
|
font-size: 1.25rem;
|
||||||
font-size: 18px;
|
color: #444;
|
||||||
}
|
}
|
||||||
|
|
||||||
.video-secondary-info {
|
.video-secondary-info {
|
||||||
@@ -82,30 +100,23 @@
|
|||||||
.channel-info {
|
.channel-info {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
margin-bottom: 15px;
|
gap: 1rem;
|
||||||
|
margin-bottom: 1.5rem;
|
||||||
|
padding-bottom: 1.5rem;
|
||||||
|
border-bottom: 1px solid #eee;
|
||||||
}
|
}
|
||||||
|
|
||||||
.channel-image {
|
.channel-avatar img {
|
||||||
width: 50px;
|
width: 48px;
|
||||||
height: 50px;
|
height: 48px;
|
||||||
margin-right: 15px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.channel-image img {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
object-fit: cover;
|
object-fit: cover;
|
||||||
}
|
}
|
||||||
|
|
||||||
.channel-details {
|
|
||||||
flex: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.channel-name {
|
.channel-name {
|
||||||
font-size: 16px;
|
font-size: 1rem;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
margin-bottom: 5px;
|
margin: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.subscribe-button {
|
.subscribe-button {
|
||||||
@@ -124,109 +135,242 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.video-description {
|
.video-description {
|
||||||
margin-bottom: 20px;
|
font-size: 0.9375rem;
|
||||||
line-height: 1.6;
|
line-height: 1.6;
|
||||||
font-size: 14px;
|
margin-bottom: 1.5rem;
|
||||||
|
color: #333;
|
||||||
|
white-space: pre-line;
|
||||||
}
|
}
|
||||||
|
|
||||||
.video-tags {
|
.video-tags {
|
||||||
margin-top: 10px;
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 0.5rem;
|
||||||
|
margin-bottom: 1rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.tag {
|
.tag {
|
||||||
display: inline-block;
|
background-color: #f5f5f5;
|
||||||
color: #0d6efd;
|
border-radius: 16px;
|
||||||
margin-right: 10px;
|
padding: 0.4rem 0.75rem;
|
||||||
font-size: 14px;
|
font-size: 0.8125rem;
|
||||||
|
color: #222;
|
||||||
|
text-decoration: none;
|
||||||
|
transition: background-color 0.2s;
|
||||||
}
|
}
|
||||||
|
|
||||||
.video-comments h2 {
|
.tag:hover {
|
||||||
font-size: 18px;
|
background-color: #e0e0e0;
|
||||||
margin-bottom: 15px;
|
}
|
||||||
|
|
||||||
|
/* 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 {
|
.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%;
|
width: 100%;
|
||||||
padding: 10px;
|
padding: 0.75rem;
|
||||||
border: 1px solid #ddd;
|
border: 1px solid #ddd;
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
margin-bottom: 10px;
|
resize: none;
|
||||||
resize: vertical;
|
height: 80px;
|
||||||
min-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 {
|
.comment-submit {
|
||||||
background-color: #0d6efd;
|
padding: 0.5rem 1.25rem;
|
||||||
|
background-color: #e62117;
|
||||||
color: white;
|
color: white;
|
||||||
border: none;
|
border: none;
|
||||||
padding: 8px 15px;
|
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
float: right;
|
font-weight: 500;
|
||||||
|
transition: background-color 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.comment-submit:hover {
|
||||||
|
background-color: #cc1e12;
|
||||||
}
|
}
|
||||||
|
|
||||||
.comments-list {
|
.comments-list {
|
||||||
margin-top: 20px;
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 1.5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.comment {
|
.comment {
|
||||||
display: flex;
|
display: flex;
|
||||||
margin-bottom: 20px;
|
gap: 1rem;
|
||||||
}
|
|
||||||
|
|
||||||
.comment-avatar {
|
|
||||||
width: 40px;
|
|
||||||
height: 40px;
|
|
||||||
margin-right: 15px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.comment-avatar img {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
border-radius: 50%;
|
|
||||||
object-fit: cover;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.comment-content {
|
.comment-content {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
.comment-header {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
margin-bottom: 5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.comment-author {
|
.comment-author {
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
margin-right: 10px;
|
margin-bottom: 0.25rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.comment-date {
|
.comment-date {
|
||||||
font-size: 12px;
|
font-size: 0.75rem;
|
||||||
color: #666;
|
color: #666;
|
||||||
|
margin-bottom: 0.5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.comment-text {
|
.comment-text {
|
||||||
font-size: 14px;
|
font-size: 0.9375rem;
|
||||||
margin-bottom: 5px;
|
line-height: 1.5;
|
||||||
|
margin-bottom: 0.75rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.comment-actions {
|
||||||
|
display: flex;
|
||||||
|
gap: 1rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.comment-actions button {
|
.comment-actions button {
|
||||||
background: none;
|
background: none;
|
||||||
border: none;
|
border: none;
|
||||||
color: #666;
|
|
||||||
margin-right: 15px;
|
|
||||||
font-size: 12px;
|
|
||||||
cursor: pointer;
|
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 {
|
.comment-actions button:hover {
|
||||||
margin-right: 5px;
|
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 */
|
/* Vidéos associées */
|
||||||
@@ -323,24 +467,19 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width: 768px) {
|
@media (max-width: 768px) {
|
||||||
.video-stats {
|
.video-info {
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
gap: 1rem;
|
||||||
align-items: flex-start;
|
align-items: flex-start;
|
||||||
}
|
}
|
||||||
|
|
||||||
.video-actions {
|
.video-actions {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
margin-top: 15px;
|
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
}
|
}
|
||||||
|
|
||||||
.action-button {
|
.video-grid {
|
||||||
margin-right: 0;
|
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
|
||||||
}
|
|
||||||
|
|
||||||
.video-date {
|
|
||||||
margin-left: 0;
|
|
||||||
margin-top: 5px;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -367,6 +506,10 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.comment-avatar {
|
.comment-avatar {
|
||||||
margin-bottom: 10px;
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.video-grid {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -8,50 +8,438 @@
|
|||||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div class="container">
|
<!-- Sidebar de navigation -->
|
||||||
<?php include 'includes/header.php'; ?>
|
<div class="sidebar">
|
||||||
|
<a href="index.php" class="logo">
|
||||||
|
<img src="img/logo.png" alt="Kaubuntu.re">
|
||||||
|
</a>
|
||||||
|
|
||||||
<main>
|
<nav class="sidebar-nav">
|
||||||
<section class="hero">
|
<a href="index.php" class="nav-item">
|
||||||
<div class="hero-content">
|
<i class="fas fa-home"></i> Accueil
|
||||||
<h1>Bienvenue sur Kaubuntu.re</h1>
|
</a>
|
||||||
<p>Votre plateforme de médias libres</p>
|
<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">
|
<div class="search-container">
|
||||||
<form action="search.php" method="get">
|
<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>
|
<button type="submit"><i class="fas fa-search"></i></button>
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<section class="featured-videos">
|
<div class="social-icons">
|
||||||
<h2>Vidéos à la une</h2>
|
<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">
|
<div class="video-grid">
|
||||||
<?php include 'includes/featured-videos.php'; ?>
|
<?php
|
||||||
</div>
|
// Dans un vrai projet, ces données viendraient d'une API PeerTube
|
||||||
</section>
|
$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">
|
<div class="video-grid">
|
||||||
<?php include 'includes/recent-videos.php'; ?>
|
<?php
|
||||||
</div>
|
// Dans un vrai projet, ces données viendraient d'une API PeerTube
|
||||||
</section>
|
$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">
|
foreach ($trendingVideos as $video):
|
||||||
<h2>Catégories</h2>
|
?>
|
||||||
<div class="category-grid">
|
<div class="video-card" data-video-id="<?php echo $video['id']; ?>">
|
||||||
<?php include 'includes/categories.php'; ?>
|
<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>
|
||||||
</section>
|
</div>
|
||||||
</main>
|
<div class="video-info">
|
||||||
|
<h3 class="video-title"><?php echo $video['title']; ?></h3>
|
||||||
<?php include 'includes/footer.php'; ?>
|
<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>
|
||||||
|
|
||||||
<div class="mobile-menu-overlay" id="mobileMenuOverlay">
|
<button class="view-more">Voir plus</button>
|
||||||
<?php include 'includes/mobile-menu.php'; ?>
|
</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>
|
</div>
|
||||||
|
|
||||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
|
||||||
|
|||||||
+58
-64
@@ -1,34 +1,70 @@
|
|||||||
document.addEventListener('DOMContentLoaded', function() {
|
document.addEventListener('DOMContentLoaded', function() {
|
||||||
// Gestion du menu mobile
|
// Gestion du menu mobile
|
||||||
const mobileMenuToggle = document.querySelector('.mobile-menu-toggle');
|
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');
|
const mobileMenuClose = document.querySelector('.mobile-menu-close');
|
||||||
|
|
||||||
if (mobileMenuToggle) {
|
if (mobileMenuToggle) {
|
||||||
mobileMenuToggle.addEventListener('click', function() {
|
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
|
document.body.style.overflow = 'hidden'; // Empêche le défilement de la page
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
if (mobileMenuClose) {
|
if (mobileMenuClose) {
|
||||||
mobileMenuClose.addEventListener('click', function() {
|
mobileMenuClose.addEventListener('click', function() {
|
||||||
mobileMenuOverlay.style.display = 'none';
|
mobileMenu.classList.remove('active');
|
||||||
document.body.style.overflow = ''; // Réactive le défilement
|
document.body.style.overflow = ''; // Réactive le défilement
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
// Fermer le menu en cliquant en dehors
|
// Gestion du mode sombre
|
||||||
if (mobileMenuOverlay) {
|
const darkModeToggle = document.querySelector('.dark-mode-toggle');
|
||||||
mobileMenuOverlay.addEventListener('click', function(e) {
|
const body = document.body;
|
||||||
if (e.target === mobileMenuOverlay) {
|
|
||||||
mobileMenuOverlay.style.display = 'none';
|
if (darkModeToggle) {
|
||||||
document.body.style.overflow = '';
|
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');
|
const videoCards = document.querySelectorAll('.video-card');
|
||||||
|
|
||||||
videoCards.forEach(card => {
|
videoCards.forEach(card => {
|
||||||
@@ -70,59 +106,17 @@ document.addEventListener('DOMContentLoaded', function() {
|
|||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
// Fonction pour formater le nombre de vues
|
// Gestion des boutons "Voir plus"
|
||||||
function formatViewCount(views) {
|
const viewMoreButtons = document.querySelectorAll('.view-more');
|
||||||
if (views >= 1000000) {
|
|
||||||
return (views / 1000000).toFixed(1) + 'M';
|
|
||||||
} else if (views >= 1000) {
|
|
||||||
return (views / 1000).toFixed(1) + 'K';
|
|
||||||
} else {
|
|
||||||
return views.toString();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Fonction pour formater la durée des vidéos
|
viewMoreButtons.forEach(button => {
|
||||||
function formatDuration(seconds) {
|
button.addEventListener('click', function() {
|
||||||
const hours = Math.floor(seconds / 3600);
|
// Dans un vrai projet, cela chargerait plus de contenu via AJAX
|
||||||
const minutes = Math.floor((seconds % 3600) / 60);
|
// Pour cet exemple, on simule juste un clic
|
||||||
const remainingSeconds = seconds % 60;
|
button.innerText = 'Chargement...';
|
||||||
|
setTimeout(() => {
|
||||||
if (hours > 0) {
|
button.innerText = 'Voir plus';
|
||||||
return `${hours}:${minutes.toString().padStart(2, '0')}:${remainingSeconds.toString().padStart(2, '0')}`;
|
}, 1000);
|
||||||
} 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
|
|
||||||
};
|
|
||||||
});
|
});
|
||||||
@@ -6,27 +6,27 @@ $videoId = isset($_GET['id']) ? intval($_GET['id']) : 1;
|
|||||||
$videos = [
|
$videos = [
|
||||||
1 => [
|
1 => [
|
||||||
'id' => 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',
|
'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.',
|
'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',
|
'channel' => 'Tech Libre',
|
||||||
'channelId' => 1,
|
'channelId' => 1,
|
||||||
'views' => 15420,
|
'views' => 15420,
|
||||||
'likes' => 1245,
|
'likes' => 1245,
|
||||||
'date' => '2023-11-15',
|
'date' => '29 mars 2025',
|
||||||
'tags' => ['open source', 'logiciels libres', 'tech', 'formation']
|
'tags' => ['#Bakou', '#LaRéunion', '#Indépendance']
|
||||||
],
|
],
|
||||||
2 => [
|
2 => [
|
||||||
'id' => 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',
|
'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.',
|
'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',
|
'channel' => 'Île Aventure',
|
||||||
'channelId' => 2,
|
'channelId' => 2,
|
||||||
'views' => 8745,
|
'views' => 8745,
|
||||||
'likes' => 732,
|
'likes' => 732,
|
||||||
'date' => '2023-12-02',
|
'date' => '29 mars 2025',
|
||||||
'tags' => ['La Réunion', 'voyage', 'randonnée', 'nature']
|
'tags' => ['#LaRéunion', '#Histoire', '#Politique']
|
||||||
],
|
],
|
||||||
// Autres vidéos...
|
// Autres vidéos...
|
||||||
];
|
];
|
||||||
@@ -34,6 +34,19 @@ $videos = [
|
|||||||
// Récupération de la vidéo
|
// Récupération de la vidéo
|
||||||
$video = isset($videos[$videoId]) ? $videos[$videoId] : $videos[1];
|
$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
|
// Formatage des données
|
||||||
function formatViewCount($views) {
|
function formatViewCount($views) {
|
||||||
if ($views >= 1000000) {
|
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">
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div class="container">
|
<!-- Sidebar de navigation -->
|
||||||
<?php include 'includes/header.php'; ?>
|
<div class="sidebar">
|
||||||
|
<a href="index.php" class="logo">
|
||||||
|
<img src="img/logo.png" alt="Kaubuntu.re">
|
||||||
|
</a>
|
||||||
|
|
||||||
<main class="video-page">
|
<nav class="sidebar-nav">
|
||||||
<div class="video-player-container">
|
<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">
|
<div class="video-player">
|
||||||
<iframe src="<?php echo $video['url']; ?>" frameborder="0" allowfullscreen></iframe>
|
<iframe src="<?php echo $video['url']; ?>" frameborder="0" allowfullscreen></iframe>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="video-content">
|
<div class="video-details">
|
||||||
<div class="video-primary-info">
|
|
||||||
<h1 class="video-title"><?php echo $video['title']; ?></h1>
|
<h1 class="video-title"><?php echo $video['title']; ?></h1>
|
||||||
|
|
||||||
<div class="video-stats">
|
<div class="video-info">
|
||||||
<span class="video-views"><?php echo formatViewCount($video['views']); ?> vues</span>
|
<div class="video-metadata">
|
||||||
<span class="video-date">Publié le <?php echo formatDate($video['date']); ?></span>
|
<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">
|
<div class="video-actions">
|
||||||
<button class="action-button">
|
<button class="action-button">
|
||||||
<i class="fas fa-thumbs-up"></i>
|
<i class="fas fa-thumbs-up"></i>
|
||||||
<span><?php echo formatViewCount($video['likes']); ?></span>
|
<span><?php echo number_format($video['likes']); ?></span>
|
||||||
</button>
|
</button>
|
||||||
<button class="action-button">
|
<button class="action-button">
|
||||||
<i class="fas fa-share"></i>
|
<i class="fas fa-share"></i>
|
||||||
<span>Partager</span>
|
<span>Partager</span>
|
||||||
</button>
|
</button>
|
||||||
<button class="action-button">
|
<button class="action-button">
|
||||||
<i class="fas fa-bookmark"></i>
|
<i class="fas fa-download"></i>
|
||||||
<span>Enregistrer</span>
|
<span>Télécharger</span>
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="video-secondary-info">
|
|
||||||
<div class="channel-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']; ?>">
|
<img src="img/channels/<?php echo $video['channelId']; ?>.jpg" alt="<?php echo $video['channel']; ?>">
|
||||||
</div>
|
</div>
|
||||||
<div class="channel-details">
|
<div class="channel-details">
|
||||||
<h3 class="channel-name"><?php echo $video['channel']; ?></h3>
|
<h3 class="channel-name"><?php echo $video['channel']; ?></h3>
|
||||||
<button class="subscribe-button">S'abonner</button>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="video-description">
|
<div class="video-description">
|
||||||
<p><?php echo $video['description']; ?></p>
|
<?php echo $video['description']; ?>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="video-tags">
|
<div class="video-tags">
|
||||||
<?php foreach ($video['tags'] as $tag): ?>
|
<?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; ?>
|
<?php endforeach; ?>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="video-comments">
|
<!-- Section commentaires -->
|
||||||
<h2>Commentaires</h2>
|
<div class="comments-section">
|
||||||
|
<h2 class="section-title">Commentaires</h2>
|
||||||
|
|
||||||
<div class="comment-form">
|
<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>
|
<button class="comment-submit">Commenter</button>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="comments-list">
|
<div class="comments-list">
|
||||||
<!-- Les commentaires seraient chargés dynamiquement dans un vrai projet -->
|
|
||||||
<div class="comment">
|
<div class="comment">
|
||||||
<div class="comment-avatar">
|
<div class="comment-avatar">
|
||||||
<img src="img/avatars/user1.jpg" alt="Utilisateur">
|
<img src="img/avatars/user1.jpg" alt="Avatar">
|
||||||
</div>
|
</div>
|
||||||
<div class="comment-content">
|
<div class="comment-content">
|
||||||
<div class="comment-header">
|
<div class="comment-author">Marie Dupont</div>
|
||||||
<span class="comment-author">Marie Dupont</span>
|
<div class="comment-date">Il y a 2 jours</div>
|
||||||
<span class="comment-date">Il y a 2 jours</span>
|
|
||||||
</div>
|
|
||||||
<div class="comment-text">
|
<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>
|
||||||
<div class="comment-actions">
|
<div class="comment-actions">
|
||||||
<button><i class="fas fa-thumbs-up"></i> 15</button>
|
<button><i class="fas fa-thumbs-up"></i> 15</button>
|
||||||
@@ -150,15 +245,13 @@ function formatDate($dateString) {
|
|||||||
|
|
||||||
<div class="comment">
|
<div class="comment">
|
||||||
<div class="comment-avatar">
|
<div class="comment-avatar">
|
||||||
<img src="img/avatars/user2.jpg" alt="Utilisateur">
|
<img src="img/avatars/user2.jpg" alt="Avatar">
|
||||||
</div>
|
</div>
|
||||||
<div class="comment-content">
|
<div class="comment-content">
|
||||||
<div class="comment-header">
|
<div class="comment-author">Jean Martin</div>
|
||||||
<span class="comment-author">Jean Martin</span>
|
<div class="comment-date">Il y a 5 jours</div>
|
||||||
<span class="comment-date">Il y a 5 jours</span>
|
|
||||||
</div>
|
|
||||||
<div class="comment-text">
|
<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>
|
||||||
<div class="comment-actions">
|
<div class="comment-actions">
|
||||||
<button><i class="fas fa-thumbs-up"></i> 7</button>
|
<button><i class="fas fa-thumbs-up"></i> 7</button>
|
||||||
@@ -169,59 +262,97 @@ function formatDate($dateString) {
|
|||||||
</div>
|
</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>
|
</div>
|
||||||
|
|
||||||
<aside class="related-videos">
|
<!-- Footer -->
|
||||||
<h2>Vidéos suggérées</h2>
|
<div class="footer">
|
||||||
<div class="related-videos-list">
|
<div class="footer-logo">
|
||||||
<?php
|
<img src="img/logo.png" alt="Kaubuntu.re">
|
||||||
// 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'; ?>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="mobile-menu-overlay" id="mobileMenuOverlay">
|
<div class="footer-social">
|
||||||
<?php include 'includes/mobile-menu.php'; ?>
|
<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>
|
</div>
|
||||||
|
|
||||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
|
||||||
<script src="js/main.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>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
Reference in New Issue
Block a user