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

add links to search

Browse Source
This commit is contained in:
Cédric Famibelle-Pronzola
2025-04-10 13:10:24 +04:00
parent d598190655
commit 500fedbaca
7 changed files with 260 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files
css/styles.css
+232 -16
View File
@@ -115,18 +115,31 @@ img {
}
.tag-item {
position: relative;
display: flex;
align-items: center;
padding: 8px 15px;
font-size: 16px;
padding: 10px 15px 10px 25px;
color: var(--text-color);
text-decoration: none;
transition: all 0.2s ease;
font-size: 14px;
}
.tag-item .tag-dot {
width: 16px;
height: 16px;
border-radius: 50%;
background-color: var(--primary-red);
margin-right: 15px;
.tag-item:hover {
background-color: rgba(0, 0, 0, 0.05);
color: var(--primary-red);
transform: translateX(5px);
}
.tag-icon {
color: var(--primary-red);
font-size: 0.9em;
margin-right: 10px;
transition: transform 0.2s ease;
}
.tag-item:hover .tag-icon {
transform: scale(1.5);
}
/* Header */
@@ -139,6 +152,7 @@ img {
position: sticky;
top: 0;
z-index: 50;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}
.search-container {
@@ -154,23 +168,54 @@ img {
.search-container input {
width: 100%;
padding: 12px 15px;
border: none;
border-radius: 4px;
background-color: var(--search-bg);
padding: 12px 45px 12px 15px;
border: 1px solid #e0e0e0;
border-radius: 25px;
background-color: #f8f8f8;
font-size: 16px;
transition: all 0.3s ease;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
color: var(--text-color);
}
.search-container input:focus {
outline: none;
border-color: var(--primary-red);
background-color: white;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
.search-container input::placeholder {
color: #9e9e9e;
transition: opacity 0.3s ease;
}
.search-container input:focus::placeholder {
opacity: 0.7;
}
.search-container button {
position: absolute;
right: 10px;
right: 5px;
top: 50%;
transform: translateY(-50%);
background: none;
background-color: var(--primary-red);
color: white;
border: none;
border-radius: 50%;
width: 35px;
height: 35px;
cursor: pointer;
color: #555;
font-size: 18px;
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
transition: all 0.3s ease;
}
.search-container button:hover {
background-color: #d40000;
transform: translateY(-50%) scale(1.05);
}
.social-icons, .action-icons {
@@ -1672,4 +1717,175 @@ i.icon-x,
.category-videos {
grid-template-columns: 1fr;
}
}
/* Page de recherche */
.search-page {
margin-bottom: 40px;
}
.search-form-container {
margin: 20px 0 30px;
}
.search-form {
display: flex;
max-width: 600px;
margin: 0 auto;
}
.search-form input[type="text"] {
flex: 1;
padding: 12px 15px;
font-size: 16px;
border: 2px solid #ddd;
border-right: none;
border-radius: 4px 0 0 4px;
width: 100%;
}
.search-form button {
background-color: var(--primary-red);
color: white;
border: none;
padding: 0 20px;
cursor: pointer;
border-radius: 0 4px 4px 0;
font-size: 16px;
transition: background-color 0.3s;
}
.search-form button:hover {
background-color: #d40000;
}
.search-results-count {
text-align: center;
margin-bottom: 20px;
padding: 10px;
background-color: #f9f9f9;
border-radius: 4px;
}
.search-instructions {
text-align: center;
margin: 40px auto;
max-width: 500px;
padding: 30px;
background-color: #f9f9f9;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}
.search-instructions i {
font-size: 48px;
color: var(--primary-red);
margin-bottom: 15px;
opacity: 0.7;
}
.search-instructions h3 {
font-size: 22px;
margin-bottom: 15px;
color: #333;
}
.search-instructions p {
color: #666;
line-height: 1.5;
margin-bottom: 10px;
}
.search-instructions .mt-2 {
margin-top: 20px;
}
.search-instructions strong {
color: var(--primary-red);
font-weight: 600;
}
/* Pagination */
.pagination {
display: flex;
justify-content: center;
align-items: center;
margin-top: 30px;
margin-bottom: 20px;
}
.page-numbers {
display: flex;
align-items: center;
}
.page-number {
width: 36px;
height: 36px;
display: flex;
align-items: center;
justify-content: center;
margin: 0 5px;
border-radius: 4px;
background-color: #f5f5f5;
text-decoration: none;
color: #333;
font-weight: 500;
transition: all 0.2s;
}
.page-number:hover {
background-color: #e0e0e0;
}
.page-number.current {
background-color: var(--primary-red);
color: white;
cursor: default;
}
.page-link {
display: flex;
align-items: center;
padding: 8px 15px;
border-radius: 4px;
background-color: #f5f5f5;
text-decoration: none;
color: #333;
font-weight: 500;
margin: 0 10px;
transition: all 0.2s;
}
.page-link:hover {
background-color: #e0e0e0;
}
.page-link.prev i {
margin-right: 8px;
}
.page-link.next i {
margin-left: 8px;
}
.page-dots {
margin: 0 5px;
color: #666;
}
/* Styles pour les hashtags dans le menu mobile */
.mobile-menu .nav-item .fas.fa-hashtag {
color: var(--primary-red);
font-size: 0.9em;
transition: transform 0.2s ease;
}
.mobile-menu .nav-item:hover .fas.fa-hashtag {
transform: scale(1.2);
}
.mobile-menu .nav-item:hover {
color: var(--primary-red);
background-color: rgba(255, 0, 0, 0.05);
}
css/video-page.css
+7 -1
View File
@@ -460,11 +460,17 @@
font-size: 0.8125rem;
color: #222;
text-decoration: none;
transition: background-color 0.2s;
transition: all 0.2s ease;
border: 1px solid #e0e0e0;
display: inline-flex;
align-items: center;
}
.tag:hover {
background-color: #e0e0e0;
color: var(--primary-red);
transform: translateY(-2px);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
/* Commentaires */
includes/footer.php
+4 -4
View File
@@ -31,10 +31,10 @@
<div class="footer-column">
<h3 class="footer-title">Hashtags</h3>
<ul class="footer-links">
<li><a href="#">Colonialisme</a></li>
<li><a href="#">La Réunion</a></li>
<li><a href="#">Panafricanisme</a></li>
<li><a href="#">Conférence</a></li>
<li><a href="recherche.php?q=%23Colonialisme">Colonialisme</a></li>
<li><a href="recherche.php?q=%23La%20R%C3%A9union">La Réunion</a></li>
<li><a href="recherche.php?q=%23Panafricanisme">Panafricanisme</a></li>
<li><a href="recherche.php?q=%23Conf%C3%A9rence">Conférence</a></li>
</ul>
</div>
includes/header.php
+2 -2
View File
@@ -1,8 +1,8 @@
<!-- 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">
<form action="recherche.php" method="get">
<input type="text" name="q" placeholder="Rechercher...">
<button type="submit"><i class="fas fa-search"></i></button>
</form>
</div>
includes/mobile-menu.php
+6 -6
View File
@@ -5,8 +5,8 @@
</button>
<div class="search-container">
<form action="search.php" method="get">
<input type="text" name="q" placeholder="Recherche">
<form action="recherche.php" method="get">
<input type="text" name="q" placeholder="Rechercher...">
<button type="submit"><i class="fas fa-search"></i></button>
</form>
</div>
@@ -57,16 +57,16 @@
<div class="nav-divider"></div>
<h3 class="mobile-section-title">Hashtags populaires</h3>
<a href="#" class="nav-item">
<a href="recherche.php?q=%23Colonialisme" class="nav-item">
<i class="fas fa-hashtag"></i> Colonialisme
</a>
<a href="#" class="nav-item">
<a href="recherche.php?q=%23La%20R%C3%A9union" class="nav-item">
<i class="fas fa-hashtag"></i> La Réunion
</a>
<a href="#" class="nav-item">
<a href="recherche.php?q=%23Panafricanisme" class="nav-item">
<i class="fas fa-hashtag"></i> Panafricanisme
</a>
<a href="#" class="nav-item">
<a href="recherche.php?q=%23Conf%C3%A9rence" class="nav-item">
<i class="fas fa-hashtag"></i> Conférence
</a>
includes/sidebar.php
+8 -8
View File
@@ -54,17 +54,17 @@
<i class="fas fa-hashtag"></i> <span>Hashtags</span>
</div>
<a href="#" class="tag-item" data-title="Colonialisme">
<div class="tag-dot"></div> <span>Colonialisme</span>
<a href="recherche.php?q=%23Colonialisme" class="tag-item" data-title="Colonialisme">
<i class="fas fa-hashtag tag-icon"></i> <span>Colonialisme</span>
</a>
<a href="#" class="tag-item" data-title="La Réunion">
<div class="tag-dot"></div> <span>La Réunion</span>
<a href="recherche.php?q=%23La%20R%C3%A9union" class="tag-item" data-title="La Réunion">
<i class="fas fa-hashtag tag-icon"></i> <span>La Réunion</span>
</a>
<a href="#" class="tag-item" data-title="Panafricanisme">
<div class="tag-dot"></div> <span>Panafricanisme</span>
<a href="recherche.php?q=%23Panafricanisme" class="tag-item" data-title="Panafricanisme">
<i class="fas fa-hashtag tag-icon"></i> <span>Panafricanisme</span>
</a>
<a href="#" class="tag-item" data-title="Conférence">
<div class="tag-dot"></div> <span>Conférence</span>
<a href="recherche.php?q=%23Conf%C3%A9rence" class="tag-item" data-title="Conférence">
<i class="fas fa-hashtag tag-icon"></i> <span>Conférence</span>
</a>
</nav>
</div>
video.php
+1 -1
View File
@@ -298,7 +298,7 @@ if (empty($videoData) || isset($videoData['error'])) {
<?php if (!empty($video['tags'])): ?>
<div class="video-tags">
<?php foreach ($video['tags'] as $tag): ?>
<a href="search.php?q=<?php echo urlencode($tag); ?>" class="tag">#<?php echo htmlspecialchars($tag); ?></a>
<a href="recherche.php?q=<?php echo urlencode('#' . $tag); ?>" class="tag">#<?php echo htmlspecialchars($tag); ?></a>
<?php endforeach; ?>
</div>
<?php endif; ?>