From a4ccb0a55370fb06e7b7c84dd7a9033a6e7778b2 Mon Sep 17 00:00:00 2001
From: Esenjin <esenjin@sangigi-fuchsia.fr>
Date: Mon, 30 Dec 2024 22:10:46 +0100
Subject: [PATCH] ajout affichage titre/description des albums

---
 albums.php |  12 ++-
 styles.css | 292 ++++++++++++++++++++++++++++-------------------------
 2 files changed, 164 insertions(+), 140 deletions(-)
diff --git a/albums.php b/albums.php
index 80449b5..7e4d899 100644
--- a/albums.php
+++ b/albums.php
@@ -12,6 +12,9 @@ if (!isSecurePath($currentPath)) {
     exit;
 }
 
+// Récupérer les informations de l'album courant
+$currentAlbumInfo = getAlbumInfo($currentPath);
+
 // Récupérer tous les sous-dossiers
 $albums = [];
 foreach (new DirectoryIterator($currentPath) as $item) {
@@ -45,7 +48,7 @@ if (!isSecurePath($parentPath)) {
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Albums - ICO</title>
+    <title><?php echo htmlspecialchars($currentAlbumInfo['title']); ?> - ICO</title>
     <link rel="icon" type="image/png" href="favicon.png">
     <link rel="stylesheet" href="styles.css">
 </head>
@@ -56,6 +59,13 @@ if (!isSecurePath($parentPath)) {
     <a href="index.php" class="back-button">Retour</a>
     <?php endif; ?>
 
+    <div class="album-info">
+        <h1 class="current-album-title"><?php echo htmlspecialchars($currentAlbumInfo['title']); ?></h1>
+        <?php if (!empty($currentAlbumInfo['description'])): ?>
+            <p><?php echo nl2br(htmlspecialchars($currentAlbumInfo['description'])); ?></p>
+        <?php endif; ?>
+    </div>
+
     <div class="albums-grid">
         <?php foreach ($albums as $album): ?>
         <a href="<?php echo $album['hasSubfolders'] ? 'albums.php' : 'galeries.php'; ?>?path=<?php echo urlencode($album['path']); ?>" 
diff --git a/styles.css b/styles.css
index 9b91012..b980d24 100644
--- a/styles.css
+++ b/styles.css
@@ -1,12 +1,4 @@
-/* Accessibilité */
-@media (prefers-reduced-motion: reduce) {
-    * {
-        animation-duration: 0.01ms !important;
-        animation-iteration-count: 1 !important;
-        transition-duration: 0.01ms !important;
-        scroll-behavior: auto !important;
-    }
-}/* Reset et styles de base */
+/* Reset et styles de base */
 * {
     margin: 0;
     padding: 0;
@@ -55,7 +47,7 @@ body {
     filter: brightness(0.6);
 }
 
-/* Overlay contenu */
+/* Overlay contenu de la page d'accueil */
 .overlay {
     position: fixed;
     top: 50%;
@@ -71,20 +63,21 @@ body {
     backdrop-filter: blur(10px);
 }
 
-h1 {
+.overlay h1 {
     font-size: 4rem;
     margin-bottom: 1rem;
     font-weight: 700;
     letter-spacing: 0.2rem;
 }
 
-p {
+.overlay p {
     font-size: 1.2rem;
     margin-bottom: 2rem;
     line-height: 1.6;
     color: #e0e0e0;
 }
 
+/* Bouton d'appel à l'action */
 .cta-button {
     display: inline-block;
     padding: 1rem 2rem;
@@ -112,12 +105,31 @@ p {
     overflow-y: auto;
 }
 
+.album-info {
+    max-width: 1800px;
+    margin: 0 auto;
+    padding: 2rem;
+}
+
+.album-info .current-album-title {
+    font-size: 2.5rem;
+    margin: 3rem 0 1rem 0;
+    color: #ffffff;
+}
+
+.album-info p {
+    font-size: 1.1rem;
+    color: #e0e0e0;
+    line-height: 1.6;
+    max-width: 800px;
+}
+
 .albums-grid {
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
     gap: 2rem;
     max-width: 1800px;
-    margin: 4rem auto 2rem auto;
+    margin: 2rem auto;
 }
 
 .album-card {
@@ -173,11 +185,12 @@ p {
     grid-row: 1 / -1;
 }
 
-.album-info {
+.album-card .album-info {
     padding: 1rem;
+    margin: 0;
 }
 
-.album-info h2 {
+.album-card .album-info h2 {
     font-size: 1.2rem;
     margin: 0;
     font-weight: 500;
@@ -244,122 +257,7 @@ p {
     display: block;
 }
 
-/* Bouton retour commun */
-.back-button {
-    position: fixed;
-    top: 2rem;
-    left: 2rem;
-    padding: 0.8rem 1.5rem;
-    background-color: rgba(0, 0, 0, 0.7);
-    color: white;
-    text-decoration: none;
-    border-radius: 2rem;
-    backdrop-filter: blur(10px);
-    z-index: 100;
-    transition: all 0.3s ease;
-}
-
-.back-button:hover {
-    background-color: rgba(0, 0, 0, 0.9);
-    transform: translateY(-2px);
-}
-
-/* Media Queries */
-@media (min-width: 1400px) {
-    .albums-grid {
-        grid-template-columns: repeat(5, 1fr);
-    }
-}
-
-@media (max-width: 1600px) {
-    .gallery-item {
-        width: calc((100% - (5 * 20px)) / 6);
-    }
-}
-
-@media (max-width: 1200px) {
-    .albums-grid {
-        grid-template-columns: repeat(4, 1fr);
-    }
-    .gallery-item {
-        width: calc((100% - (3 * 20px)) / 5);
-    }
-}
-
-@media (max-width: 992px) {
-    .albums-grid {
-        grid-template-columns: repeat(3, 1fr);
-    }
-    .gallery-item {
-        width: calc((100% - (3 * 20px)) / 4);
-    }
-}
-
-@media (max-width: 768px) {
-    .albums-grid {
-        grid-template-columns: repeat(2, 1fr);
-        gap: 1rem;
-    }
-    
-    .albums-page {
-        padding: 1rem;
-    }
-    
-    .gallery-item {
-        width: calc((100% - (2 * 20px)) / 3);
-    }
-    
-    .gallery-header {
-        height: 300px;
-    }
-    
-    .gallery-info {
-        padding: 1.5rem;
-    }
-    
-    .gallery-info h1 {
-        font-size: 2rem;
-    }
-
-    h1 {
-        font-size: 3rem;
-    }
-
-    p {
-        font-size: 1rem;
-    }
-
-    .cta-button {
-        padding: 0.8rem 1.6rem;
-        font-size: 1rem;
-    }
-}
-
-@media (max-width: 480px) {
-    .albums-grid {
-        grid-template-columns: 1fr;
-    }
-    
-    .gallery-item {
-        width: calc((100% - 20px) / 2);
-    }
-    
-    .gallery-grid {
-        padding: 0.5rem;
-    }
-    
-    .gallery-header {
-        height: 200px;
-    }
-    
-    .back-button {
-        top: 1rem;
-        left: 1rem;
-        padding: 0.6rem 1.2rem;
-        font-size: 0.9rem;
-    }
-}
-
+/* Styles pour la page de partage */
 .share-page {
     background-color: rgba(0, 0, 0, 0.9);
     min-height: 100vh;
@@ -401,7 +299,7 @@ p {
     backdrop-filter: blur(10px);
 }
 
-/* Ajuster .action-button pour la page de partage */
+/* Boutons d'action */
 .share-actions .action-button {
     display: inline-flex;
     align-items: center;
@@ -427,16 +325,105 @@ p {
     height: 1.2em;
 }
 
-/* Protection par mot de passe */
-.protected-indicator {
-    display: inline-block;
-    margin-left: 0.5rem;
-    font-size: 0.8em;
-    vertical-align: middle;
+/* Bouton retour commun */
+.back-button {
+    position: fixed;
+    top: 2rem;
+    left: 2rem;
+    padding: 0.8rem 1.5rem;
+    background-color: rgba(0, 0, 0, 0.7);
+    color: white;
+    text-decoration: none;
+    border-radius: 2rem;
+    backdrop-filter: blur(10px);
+    z-index: 100;
+    transition: all 0.3s ease;
+}
+
+.back-button:hover {
+    background-color: rgba(0, 0, 0, 0.9);
+    transform: translateY(-2px);
+}
+
+/* Media Queries */
+@media (min-width: 1400px) {
+    .albums-grid {
+        grid-template-columns: repeat(5, 1fr);
+    }
+}
+
+@media (max-width: 1600px) {
+    .gallery-item {
+        width: calc((100% - (5 * 20px)) / 6);
+    }
+}
+
+@media (max-width: 1200px) {
+    .albums-grid {
+        grid-template-columns: repeat(4, 1fr);
+    }
+    .gallery-item {
+        width: calc((100% - (3 * 20px)) / 4);
+    }
+}
+
+@media (max-width: 992px) {
+    .albums-grid {
+        grid-template-columns: repeat(3, 1fr);
+    }
+    .gallery-item {
+        width: calc((100% - (3 * 20px)) / 4);
+    }
 }
 
-/* Media queries pour la page de partage */
 @media (max-width: 768px) {
+    .albums-grid {
+        grid-template-columns: repeat(2, 1fr);
+        gap: 1rem;
+    }
+    
+    .albums-page {
+        padding: 1rem;
+    }
+    
+    .gallery-item {
+        width: calc((100% - (2 * 20px)) / 3);
+    }
+    
+    .gallery-header {
+        height: 300px;
+    }
+    
+    .gallery-info {
+        padding: 1.5rem;
+    }
+
+    .album-info {
+        padding: 1rem;
+    }
+
+    .album-info .current-album-title {
+        font-size: 2rem;
+        margin: 2.5rem 0 1rem 0;
+    }
+
+    .album-info p {
+        font-size: 1rem;
+    }
+    
+    .overlay h1 {
+        font-size: 3rem;
+    }
+
+    .overlay p {
+        font-size: 1rem;
+    }
+
+    .cta-button {
+        padding: 0.8rem 1.6rem;
+        font-size: 1rem;
+    }
+
     .share-actions {
         flex-direction: column;
         padding: 0.8rem;
@@ -447,6 +434,33 @@ p {
         font-size: 0.9rem;
     }
 }
+
+@media (max-width: 480px) {
+    .albums-grid {
+        grid-template-columns: 1fr;
+    }
+    
+    .gallery-item {
+        width: calc((100% - 20px) / 2);
+    }
+    
+    .gallery-grid {
+        padding: 0.5rem;
+    }
+    
+    .gallery-header {
+        height: 200px;
+    }
+    
+    .back-button {
+        top: 1rem;
+        left: 1rem;
+        padding: 0.6rem 1.2rem;
+        font-size: 0.9rem;
+    }
+}
+
+/* Accessibilité */
 @media (prefers-reduced-motion: reduce) {
     * {
         animation-duration: 0.01ms !important;
