From 50d472a9a43e22beb3077b5e270b33fbfd03f30d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?C=C3=A9dric=20FAMIBELLE-PRONZOLA?= Date: Fri, 17 Oct 2025 12:28:07 +0400 Subject: [PATCH] feat: improve index & change meta informations --- .gitignore | 3 + css/styles.css | 154 ++++++++++++++++++++++++++++++++++++---- index.php | 189 +++++++------------------------------------------ 3 files changed, 170 insertions(+), 176 deletions(-) diff --git a/.gitignore b/.gitignore index 2a408f3..5552979 100644 --- a/.gitignore +++ b/.gitignore @@ -2,6 +2,7 @@ includes/config.local.php # Fichiers personnalisables pour chaque installation +.htaccess sitemap.xml robots.txt site.webmanifest @@ -31,3 +32,5 @@ uploads/* # Fichiers de dépendances (si nécessaire) # vendor/ # node_modules/ + +img/movement_presentation.png diff --git a/css/styles.css b/css/styles.css index 93577a0..01f8682 100644 --- a/css/styles.css +++ b/css/styles.css @@ -42,9 +42,9 @@ --primary-red: #FF4444; --primary-green: #00AA00; --primary-black: #ffffff; - --sidebar-bg: #1e1e1e; + --sidebar-bg: #121212; --footer-bg: #1a1a1a; - --main-bg: #121212; + --main-bg: #1a1a1a; --text-color: #ffffff; --text-secondary: #b3b3b3; --tag-bg: #2d2d2d; @@ -157,6 +157,16 @@ img { height: 100px; } +/* Amélioration de la visibilité des logos en mode dark */ +[data-theme="dark"] .logo img, +[data-theme="dark"] .section-logo img, +[data-theme="dark"] .footer-logo img { + filter: + drop-shadow(0 0 1px rgba(255, 255, 255, 0.8)) + drop-shadow(0 0 2px rgba(255, 255, 255, 0.6)) + drop-shadow(0 0 3px rgba(255, 255, 255, 0.4)); +} + /* Navigation */ .sidebar-nav { margin-bottom: 30px; @@ -584,6 +594,18 @@ img { align-items: start; } +/* Quand pas de hero (HERO_TYPE = 'none') et pas de WordPress: centrer la timeline Mastodon */ +.hero-mastodon-wrapper:has(.timeline-wordpress-container:only-child) .timeline-wordpress-container:not(:has(.wordpress-section)) { + grid-column: 1 / -1; + display: flex; + justify-content: center; +} + +.hero-mastodon-wrapper:has(.timeline-wordpress-container:only-child) .timeline-wordpress-container:not(:has(.wordpress-section)) #mt-container { + max-width: 800px; + width: 100%; +} + /* Responsive breakpoint pour écrans entre 1025px et 1699px */ @media (max-width: 1699px) and (min-width: 1025px) { .hero-mastodon-wrapper { @@ -740,6 +762,112 @@ img { opacity: 0.9; } +/* ========================================= */ +/* Styles pour la section PLAYLIST */ +/* ========================================= */ + +.hero-playlist { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + display: flex; + flex-direction: column; + background: linear-gradient(135deg, var(--sidebar-bg) 0%, var(--main-bg) 100%); +} + +.hero-playlist-header { + padding: 15px 20px; + background: rgba(0, 0, 0, 0.3); + border-bottom: 1px solid rgba(255, 255, 255, 0.1); + display: flex; + align-items: center; + gap: 15px; +} + +.hero-playlist-header i { + font-size: 24px; + color: var(--primary-red); +} + +.hero-playlist-info h2 { + font-size: 18px; + font-weight: 600; + margin: 0 0 5px 0; + color: var(--text-primary); +} + +.hero-playlist-info p { + font-size: 14px; + margin: 0; + color: var(--text-secondary); + opacity: 0.9; +} + +.hero-playlist-container { + flex: 1; + position: relative; + overflow: hidden; +} + +.hero-playlist-container iframe { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + border: none; +} + +.hero-playlist-footer { + padding: 12px 20px; + background: rgba(0, 0, 0, 0.3); + border-top: 1px solid rgba(255, 255, 255, 0.1); + display: flex; + justify-content: center; +} + +.hero-playlist-link { + color: var(--primary-red); + text-decoration: none; + font-size: 14px; + font-weight: 500; + display: inline-flex; + align-items: center; + gap: 8px; + padding: 8px 16px; + border-radius: 4px; + transition: background-color 0.2s ease; +} + +.hero-playlist-link:hover { + background-color: rgba(255, 255, 255, 0.1); +} + +.hero-playlist-link i { + font-size: 12px; +} + +/* Responsive pour les playlists */ +@media (max-width: 768px) { + .hero-playlist-header { + padding: 12px 15px; + } + + .hero-playlist-info h2 { + font-size: 16px; + } + + .hero-playlist-info p { + font-size: 13px; + } + + .hero-playlist-footer { + padding: 10px 15px; + } +} + /* Annonce du prochain live dans le hero (page d'accueil) - Split gauche/droite */ .hero-next-live { position: absolute; @@ -1485,11 +1613,12 @@ img { box-shadow: var(--card-shadow); } -.info-header { +.info-description { margin-top: 0; margin-bottom: 20px; - font-size: 1.25rem; - line-height: 1.4; + font-size: 1.1rem; + line-height: 1.6; + text-align: justify; } .info-text { @@ -1896,13 +2025,13 @@ img { } .footer-social { - display: grid; - grid-template-columns: repeat(3, 1fr); - justify-items: center; + display: flex; + flex-wrap: wrap; + justify-content: center; align-items: center; margin-bottom: 25px; gap: 20px; - max-width: 300px; + max-width: 500px; margin-left: auto; margin-right: auto; } @@ -3210,11 +3339,12 @@ i.icon-mastodon, box-shadow: var(--card-shadow); } -.info-header { +.info-description { margin-top: 0; margin-bottom: 20px; - font-size: 1.25rem; - line-height: 1.4; + font-size: 1.1rem; + line-height: 1.6; + text-align: justify; } /* Media Queries pour grands écrans */ diff --git a/index.php b/index.php index dc65f41..4cb6c8f 100644 --- a/index.php +++ b/index.php @@ -20,7 +20,7 @@ setSecurityHeaders(); - kaubuntu.re - Plateforme Multimédia + <?php echo SITE_NAME; ?> @@ -40,23 +40,23 @@ setSecurityHeaders(); - - + + - + - + - + @@ -102,159 +102,7 @@ setSecurityHeaders();
-
-

Diffusion en direct

- -
- DIRECT -
-
- -
- Lecteur vidéo pour la diffusion en direct de -
-
-
-

-
- - - - Avatar de la chaîne <?php echo htmlspecialchars($liveStream['channel']); ?> - - -
-
- -
- -
- <?php echo htmlspecialchars(NEXT_LIVE_TITLE); ?> -
- -
- - format($liveDate); - $formattedDay = ucfirst($formattedDay); - $dynamicTitle = NEXT_LIVE_TITLE . ' - ' . $formattedDay; - } else { - $dynamicTitle = NEXT_LIVE_TITLE; - } - ?> -

- format('H\hi'); - $dynamicDescription = 'Rejoignez-nous à ' . $liveHour . '. ' . NEXT_LIVE_DESCRIPTION; - } else { - $dynamicDescription = NEXT_LIVE_DESCRIPTION; - } - ?> -

- -
-

- - format($liveDate); - - $offset = $liveDate->format('P'); - echo ' (UTC' . $offset . ')'; - ?> -

- - -
- 'Pacific/Tahiti', - 'Martinique / Guadeloupe' => 'America/Martinique', - 'Guyane' => 'America/Cayenne', - 'France' => 'Europe/Paris', - 'Kanaky' => 'Pacific/Noumea' - ]; - - foreach($timezones as $name => $timezone): - $liveDateLocal = clone $liveDate; - $liveDateLocal->setTimezone(new DateTimeZone($timezone)); - $dayDiff = $liveDateLocal->format('j') - $liveDate->format('j'); - - $dayIndicator = ''; - if ($dayDiff > 0) { - $dayIndicator = ' +1j'; - } elseif ($dayDiff < 0) { - $dayIndicator = ' -1j'; - } - ?> - - : format('H\hi'); ?> - - -
-
- -
-
- -
- -

Aucun direct en cours

-

Revenez plus tard pour découvrir nos prochaines diffusions en direct.

-
- -
+
@@ -355,7 +203,7 @@ setSecurityHeaders();

Shorts

@@ -411,7 +259,7 @@ setSecurityHeaders();

Dernières vidéos

@@ -450,7 +298,9 @@ setSecurityHeaders();
+ vues +
@@ -471,7 +321,7 @@ setSecurityHeaders();
@@ -508,7 +358,9 @@ setSecurityHeaders();
+ vues +
@@ -538,7 +390,7 @@ setSecurityHeaders();

@@ -566,7 +418,9 @@ setSecurityHeaders();
+ vues +
@@ -590,7 +444,13 @@ setSecurityHeaders();
-

+

+ +

+ + +

+
@@ -627,6 +487,7 @@ setSecurityHeaders(); +