From 38498adeebc4bc937b82cfc112b73db80d8b6428 Mon Sep 17 00:00:00 2001 From: Esenjin Date: Mon, 30 Dec 2024 23:59:17 +0100 Subject: [PATCH] =?UTF-8?q?impl=C3=A9mentation=20des=20albums=20matures=20?= =?UTF-8?q?P2?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit troisième partie, gère les albums matures dans l'affichage des galeries --- galeries.php | 58 ++++++++++------- styles.css | 174 ++++++++++++++++++++++++++++++++++++++++++--------- 2 files changed, 180 insertions(+), 52 deletions(-) diff --git a/galeries.php b/galeries.php index b730337..40aa63c 100644 --- a/galeries.php +++ b/galeries.php @@ -40,7 +40,8 @@ $parentPath = dirname($currentPath); if (!isSecurePath($parentPath)) { $parentPath = './liste_albums'; } -?> +?> + @@ -49,7 +50,18 @@ if (!isSecurePath($parentPath)) { - + + +
+
+
🔞
+

Contenu réservé aux plus de 18 ans

+

Cet album contient du contenu réservé à un public averti.

+ +
+
+ + Retour @@ -63,6 +75,12 @@ if (!isSecurePath($parentPath)) {

+ +
+ 🔞 + Contenu réservé aux plus de 18 ans +
+ - + - \ No newline at end of file diff --git a/styles.css b/styles.css index b0ccf9f..c623491 100644 --- a/styles.css +++ b/styles.css @@ -105,7 +105,34 @@ body { overflow-y: auto; } -/* Styles pour le contenu mature */ +.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: 2rem auto; +} + +/* Styles pour le contenu mature dans les albums */ .album-card-mature .album-images { filter: blur(10px); transition: filter 0.3s ease; @@ -144,33 +171,6 @@ body { opacity: 0; } -.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: 2rem auto; -} - .album-card { background-color: #1e1e1e; border-radius: 1rem; @@ -180,6 +180,7 @@ body { opacity: 0; transform: translateY(20px); transition: opacity 0.5s ease, transform 0.5s ease; + position: relative; } .album-card.visible { @@ -243,6 +244,84 @@ body { margin: 0; } +/* Styles pour le contenu mature dans la galerie */ +.gallery-page-mature.content-blurred .gallery-header, +.gallery-page-mature.content-blurred .gallery-grid { + filter: blur(20px); + transition: filter 0.3s ease; +} + +.mature-overlay { + position: fixed; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: rgba(0, 0, 0, 0.9); + display: flex; + align-items: center; + justify-content: center; + z-index: 1000; + transition: opacity 0.3s ease; +} + +.mature-content { + text-align: center; + padding: 2rem; + background: #1e1e1e; + border-radius: 1rem; + max-width: 90%; + width: 500px; +} + +.mature-icon { + font-size: 4rem; + margin-bottom: 1rem; +} + +.mature-content h2 { + font-size: 1.5rem; + margin-bottom: 1rem; + color: #dc3545; +} + +.mature-content p { + margin-bottom: 2rem; + color: #e0e0e0; +} + +.mature-button { + background: #dc3545; + color: white; + border: none; + padding: 1rem 2rem; + border-radius: 2rem; + font-size: 1rem; + cursor: pointer; + transition: all 0.3s ease; +} + +.mature-button:hover { + background: #c82333; + transform: translateY(-2px); +} + +.mature-badge { + display: inline-flex; + align-items: center; + gap: 0.5rem; + background: rgba(220, 53, 69, 0.1); + color: #dc3545; + padding: 0.5rem 1rem; + border-radius: 2rem; + font-size: 0.9rem; + margin-top: 1rem; +} + +.mature-badge-icon { + font-size: 1.2rem; +} + .gallery-header { width: 100%; height: 500px; @@ -472,6 +551,27 @@ body { padding: 0.6rem 1.2rem; font-size: 0.9rem; } + + .mature-content { + padding: 1.5rem; + } + + .mature-icon { + font-size: 3rem; + } + + .mature-content h2 { + font-size: 1.2rem; + } + + .mature-content p { + font-size: 0.9rem; + } + + .mature-button { + padding: 0.8rem 1.5rem; + font-size: 0.9rem; + } } @media (max-width: 480px) { @@ -497,6 +597,24 @@ body { padding: 0.6rem 1.2rem; font-size: 0.9rem; } + + .mature-content { + padding: 1rem; + } + + .mature-icon { + font-size: 2.5rem; + } + + .mature-content h2 { + font-size: 1.1rem; + } + + .mature-button { + padding: 0.7rem 1.4rem; + font-size: 0.85rem; + width: 100%; + } } /* Accessibilité */