feat: improve index & change meta informations

.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

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;
+    font-size: 1.1rem;
-    line-height: 1.4;
+    line-height: 1.6;
+    text-align: justify;
 }
 
 .info-text {
@@ -1896,13 +2025,13 @@ img {
 }
 
 .footer-social {
-    display: grid;
+    display: flex;
-    grid-template-columns: repeat(3, 1fr);
+    flex-wrap: wrap;
-    justify-items: center;
+    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;
+    font-size: 1.1rem;
-    line-height: 1.4;
+    line-height: 1.6;
+    text-align: justify;
 }
 
 /* Media Queries pour grands écrans */

index.php

@@ -20,7 +20,7 @@ setSecurityHeaders();
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta name="csrf-token" content="<?php echo generateCSRFToken(); ?>">
-    <title>kaubuntu.re - Plateforme Multimédia</title>
+    <title><?php echo SITE_NAME; ?></title>
     <link rel="stylesheet" href="css/styles.css?v=<?php echo filemtime('css/styles.css'); ?>">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.1/css/all.min.css">
     <link rel="stylesheet" href="css/mastodon-timeline.min.css?v=<?php echo filemtime('css/mastodon-timeline.min.css'); ?>">
@@ -40,23 +40,23 @@ setSecurityHeaders();
     <meta name="mobile-web-app-capable" content="yes">
     <meta name="apple-mobile-web-app-capable" content="yes">
     <meta name="apple-mobile-web-app-status-bar-style" content="default">
-    <meta name="apple-mobile-web-app-title" content="kaubuntu.re">
+    <meta name="apple-mobile-web-app-title" content="<?php echo SITE_NAME; ?>">
-    <meta name="application-name" content="kaubuntu.re">
+    <meta name="application-name" content="<?php echo SITE_NAME; ?>">
     <meta name="msapplication-TileColor" content="#FF0000">
     <meta name="msapplication-config" content="browserconfig.xml">
 
     <!-- Open Graph Meta Tags -->
-    <meta property="og:title" content="kaubuntu.re - Plateforme Multimédia">
+    <meta property="og:title" content="<?php echo SITE_NAME; ?>">
     <meta property="og:description" content="Découvrez notre plateforme multimédia avec des vidéos, des shorts et des directs. Tendances, catégories et contenus exclusifs vous attendent.">
     <meta property="og:image" content="<?php echo 'https://' . $_SERVER['HTTP_HOST'] . '/img/logo.png'; ?>">
     <meta property="og:url" content="<?php echo 'https://' . $_SERVER['HTTP_HOST'] . $_SERVER['REQUEST_URI']; ?>">
     <meta property="og:type" content="website">
-    <meta property="og:site_name" content="kaubuntu.re">
+    <meta property="og:site_name" content="<?php echo SITE_NAME; ?>">
     <meta property="og:locale" content="fr_FR">
 
     <!-- Twitter Card Meta Tags -->
     <meta name="twitter:card" content="summary_large_image">
-    <meta name="twitter:title" content="kaubuntu.re - Plateforme Multimédia">
+    <meta name="twitter:title" content="<?php echo SITE_NAME; ?>">
     <meta name="twitter:description" content="Découvrez notre plateforme multimédia avec des vidéos, des shorts et des directs. Tendances, catégories et contenus exclusifs vous attendent.">
     <meta name="twitter:image" content="<?php echo 'https://' . $_SERVER['HTTP_HOST'] . '/img/logo.png'; ?>">
 
@@ -102,159 +102,7 @@ setSecurityHeaders();
         <!-- Hero and Mastodon container -->
         <div class="hero-mastodon-wrapper">
             <!-- Hero Banner -->
-            <section class="hero" aria-labelledby="live-section-title">
+            <?php include 'includes/hero-section.php'; ?>
-                <h2 id="live-section-title" class="sr-only">Diffusion en direct</h2>
-                <?php
-                // Vérifier s'il y a un direct en cours
-                $liveStream = getLiveStream();
-
-                if ($liveStream) {
-                    // Afficher le direct en cours
-                    ?>
-                    <div class="live-badge">
-                        <i class="fas fa-circle"></i> DIRECT
-                    </div>
-                    <div class="hero-video-container">
-                        <iframe
-                            src="<?php echo PEERTUBE_URL; ?>/videos/embed/<?php echo $liveStream['id']; ?>?autoplay=1&muted=1"
-                            frameborder="0"
-                            allowfullscreen="allowfullscreen"
-                            allow="autoplay; fullscreen"
-                            title="Diffusion en direct: <?php echo htmlspecialchars($liveStream['title']); ?>"
-                            aria-describedby="live-description">
-                        </iframe>
-                        <div id="live-description" class="sr-only">
-                            Lecteur vidéo pour la diffusion en direct de <?php echo htmlspecialchars($liveStream['channel']); ?>
-                        </div>
-                    </div>
-                    <div class="hero-video-info">
-                        <h2><?php echo htmlspecialchars($liveStream['title']); ?></h2>
-                        <div class="hero-channel-info">
-                            <?php if (strpos($liveStream['channelAvatar'], 'default-avatar.png') !== false || empty($liveStream['channelAvatar'])): ?>
-                                <div class="channel-avatar-placeholder" role="img" aria-label="Avatar par défaut">
-                                    <i class="fas fa-user-circle" aria-hidden="true"></i>
-                                </div>
-                            <?php else: ?>
-                                <img src="<?php echo $liveStream['channelAvatar']; ?>" alt="Avatar de la chaîne <?php echo htmlspecialchars($liveStream['channel']); ?>" class="channel-avatar">
-                            <?php endif; ?>
-                            <span class="channel-name"><?php echo htmlspecialchars($liveStream['channel']); ?></span>
-                        </div>
-                    </div>
-                <?php
-                } else {
-                    // Aucun direct en cours - vérifier s'il y a une annonce configurée
-                    $showNextLiveAnnouncement = defined('NEXT_LIVE_ENABLED') && NEXT_LIVE_ENABLED === true;
-
-                    if ($showNextLiveAnnouncement) {
-                        // Afficher l'annonce du prochain live
-                        // Définir l'image de fond si disponible
-                        $bgImageStyle = '';
-                        if (!empty(NEXT_LIVE_IMAGE) && file_exists(NEXT_LIVE_IMAGE)) {
-                            $bgImageStyle = 'background-image: url(\'' . htmlspecialchars(NEXT_LIVE_IMAGE) . '\');';
-                        }
-                        ?>
-                        <div class="hero-next-live" style="<?php echo $bgImageStyle; ?>">
-                            <?php if (!empty(NEXT_LIVE_IMAGE) && file_exists(NEXT_LIVE_IMAGE)): ?>
-                                <div class="hero-next-live-image-container">
-                                    <img src="<?php echo htmlspecialchars(NEXT_LIVE_IMAGE); ?>"
-                                         alt="<?php echo htmlspecialchars(NEXT_LIVE_TITLE); ?>"
-                                         class="hero-next-live-image">
-                                </div>
-                            <?php endif; ?>
-                            <div class="hero-next-live-content">
-                                <i class="fas fa-calendar-alt"></i>
-                                <?php
-                                if (!empty(NEXT_LIVE_DATE)) {
-                                    $liveDate = new DateTime(NEXT_LIVE_DATE, new DateTimeZone(DEFAULT_TIMEZONE));
-                                    $dayFormatter = new IntlDateFormatter(
-                                        'fr_FR',
-                                        IntlDateFormatter::FULL,
-                                        IntlDateFormatter::NONE,
-                                        DEFAULT_TIMEZONE,
-                                        IntlDateFormatter::GREGORIAN,
-                                        'EEEE d MMMM'
-                                    );
-                                    $formattedDay = $dayFormatter->format($liveDate);
-                                    $formattedDay = ucfirst($formattedDay);
-                                    $dynamicTitle = NEXT_LIVE_TITLE . ' - ' . $formattedDay;
-                                } else {
-                                    $dynamicTitle = NEXT_LIVE_TITLE;
-                                }
-                                ?>
-                                <h2><?php echo htmlspecialchars($dynamicTitle); ?></h2>
-                                <?php
-                                if (!empty(NEXT_LIVE_DATE)) {
-                                    $liveHour = $liveDate->format('H\hi');
-                                    $dynamicDescription = 'Rejoignez-nous à ' . $liveHour . '. ' . NEXT_LIVE_DESCRIPTION;
-                                } else {
-                                    $dynamicDescription = NEXT_LIVE_DESCRIPTION;
-                                }
-                                ?>
-                                <p><?php echo nl2br(htmlspecialchars($dynamicDescription)); ?></p>
-                                <?php if (!empty(NEXT_LIVE_DATE)): ?>
-                                    <div class="hero-next-live-datetime">
-                                        <p class="hero-next-live-date">
-                                            <i class="fas fa-clock"></i>
-                                            <?php
-                                            $formatter = new IntlDateFormatter(
-                                                'fr_FR',
-                                                IntlDateFormatter::FULL,
-                                                IntlDateFormatter::SHORT,
-                                                DEFAULT_TIMEZONE
-                                            );
-                                            echo $formatter->format($liveDate);
-
-                                            $offset = $liveDate->format('P');
-                                            echo ' <span class="utc-offset">(UTC' . $offset . ')</span>';
-                                            ?>
-                                        </p>
-
-                                        <!-- Autres fuseaux horaires -->
-                                        <div class="hero-next-live-timezones">
-                                            <?php
-                                            // Ordre croissant : du plus en retard au plus en avance
-                                            $timezones = [
-                                                'Ma\'ohi Nui' => '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 = ' <span class="day-shift">+1j</span>';
-                                                } elseif ($dayDiff < 0) {
-                                                    $dayIndicator = ' <span class="day-shift">-1j</span>';
-                                                }
-                                            ?>
-                                                <span class="hero-timezone-item">
-                                                    <strong><?php echo $name; ?> :</strong> <?php echo $liveDateLocal->format('H\hi'); ?><?php echo $dayIndicator; ?>
-                                                </span>
-                                            <?php endforeach; ?>
-                                        </div>
-                                    </div>
-                                <?php endif; ?>
-                            </div>
-                        </div>
-                    <?php
-                    } else {
-                        ?>
-                        <div class="hero-no-live">
-                            <i class="fas fa-tv"></i>
-                            <h2>Aucun direct en cours</h2>
-                            <p>Revenez plus tard pour découvrir nos prochaines diffusions en direct.</p>
-                        </div>
-                    <?php
-                    }
-                }
-                ?>
-            </section>
 
             <!-- Container pour Mastodon et WordPress côte à côte -->
             <div class="timeline-wordpress-container">
@@ -355,7 +203,7 @@ setSecurityHeaders();
         <section class="video-section" aria-labelledby="shorts-heading">
             <div class="section-header">
                 <div class="section-logo">
-                    <img src="img/logo.png" alt="Logo kaubuntu.re" aria-hidden="true">
+                    <img src="img/logo.png" alt="Logo <?php echo SITE_NAME; ?>" aria-hidden="true">
                 </div>
                 <h2 id="shorts-heading" class="section-title">Shorts</h2>
             </div>
@@ -411,7 +259,7 @@ setSecurityHeaders();
         <section class="video-section" aria-labelledby="recent-videos-heading">
             <header class="section-header">
                 <div class="section-logo">
-                    <img src="img/logo.png" alt="Logo kaubuntu.re" aria-hidden="true">
+                    <img src="img/logo.png" alt="Logo <?php echo SITE_NAME; ?>" aria-hidden="true">
                 </div>
                 <h2 id="recent-videos-heading" class="section-title">Dernières vidéos</h2>
             </header>
@@ -450,7 +298,9 @@ setSecurityHeaders();
                             <span class="channel-name"><?php echo $video['channel']; ?></span>
                         </div>
                         <div class="video-metadata">
+                            <?php if (defined('SHOW_VIDEO_VIEWS') && SHOW_VIDEO_VIEWS): ?>
                             <span class="video-views"><i class="fas fa-eye"></i> <?php echo formatViewCount($video['views']); ?> vues</span>
+                            <?php endif; ?>
                             <span class="video-date"><i class="far fa-calendar-alt"></i> <?php echo formatDate($video['date']); ?></span>
                         </div>
                     </div>
@@ -471,7 +321,7 @@ setSecurityHeaders();
         <section class="video-section" aria-labelledby="trending-videos-heading">
             <header class="section-header">
                 <div class="section-logo">
-                    <img src="img/logo.png" alt="Logo kaubuntu.re" aria-hidden="true">
+                    <img src="img/logo.png" alt="Logo <?php echo SITE_NAME; ?>" aria-hidden="true">
                 </div>
                 <h2 id="trending-videos-heading" class="section-title">Tendances</h2>
             </header>
@@ -508,7 +358,9 @@ setSecurityHeaders();
                             <span class="channel-name"><?php echo $video['channel']; ?></span>
                         </div>
                         <div class="video-metadata">
+                            <?php if (defined('SHOW_VIDEO_VIEWS') && SHOW_VIDEO_VIEWS): ?>
                             <span class="video-views"><i class="fas fa-eye"></i> <?php echo formatViewCount($video['views']); ?> vues</span>
+                            <?php endif; ?>
                             <span class="video-date"><i class="far fa-calendar-alt"></i> <?php echo formatDate($video['date']); ?></span>
                         </div>
                     </div>
@@ -538,7 +390,7 @@ setSecurityHeaders();
         <section class="video-section" data-category-id="<?php echo $category['id']; ?>" aria-labelledby="category-heading-<?php echo $category['id']; ?>">
             <header class="section-header">
                 <div class="section-logo">
-                    <img src="img/logo.png" alt="Logo kaubuntu.re" aria-hidden="true">
+                    <img src="img/logo.png" alt="Logo <?php echo SITE_NAME; ?>" aria-hidden="true">
                 </div>
                 <h2 id="category-heading-<?php echo $category['id']; ?>" class="section-title"><?php echo htmlspecialchars($category['name']); ?></h2>
             </header>
@@ -566,7 +418,9 @@ setSecurityHeaders();
                             <span class="channel-name"><?php echo $video['channel']; ?></span>
                         </div>
                         <div class="video-metadata">
+                            <?php if (defined('SHOW_VIDEO_VIEWS') && SHOW_VIDEO_VIEWS): ?>
                             <span class="video-views"><i class="fas fa-eye"></i> <?php echo formatViewCount($video['views']); ?> vues</span>
+                            <?php endif; ?>
                             <span class="video-date"><i class="far fa-calendar-alt"></i> <?php echo formatDate($video['date']); ?></span>
                         </div>
                     </div>
@@ -590,7 +444,13 @@ setSecurityHeaders();
             <?php if (defined('MOVEMENT_DESCRIPTION') && !empty(MOVEMENT_DESCRIPTION)): ?>
             <!-- Section Informations -->
             <article class="info-section">
-                <h2 class="info-header"><?php echo MOVEMENT_DESCRIPTION; ?></h2>
+                <h2 class="section-title centered"><?php echo defined('MOVEMENT_TITLE') && !empty(MOVEMENT_TITLE) ? MOVEMENT_TITLE : 'À propos'; ?></h2>
+
+                <p class="info-description"><?php echo MOVEMENT_DESCRIPTION; ?></p>
+
+                <?php if (defined('MOVEMENT_DESCRIPTION_2') && !empty(MOVEMENT_DESCRIPTION_2)): ?>
+                <p class="info-description"><?php echo MOVEMENT_DESCRIPTION_2; ?></p>
+                <?php endif; ?>
 
                 <?php if (defined('MOVEMENT_IMAGE') && !empty(MOVEMENT_IMAGE)): ?>
                 <figure class="movement-figure">
@@ -627,6 +487,7 @@ setSecurityHeaders();
     <?php include 'includes/footer.php'; ?>
     <?php include 'includes/mobile-menu.php'; ?>
     <script src="js/main.js"></script>
+    <script src="js/pleroma-adapter.js"></script>
     <script src="js/mastodon-timeline.umd.js"></script>
     <script src="js/mastodon-config.php"></script>