implémentation des albums matures P2
troisième partie, gère les albums matures dans l'affichage des galeries
This commit is contained in:
parent
b83414d3f4
commit
38498adeeb
54
galeries.php
54
galeries.php
@ -40,7 +40,8 @@ $parentPath = dirname($currentPath);
|
|||||||
if (!isSecurePath($parentPath)) {
|
if (!isSecurePath($parentPath)) {
|
||||||
$parentPath = './liste_albums';
|
$parentPath = './liste_albums';
|
||||||
}
|
}
|
||||||
?><!DOCTYPE html>
|
?>
|
||||||
|
<!DOCTYPE html>
|
||||||
<html lang="fr">
|
<html lang="fr">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
@ -49,7 +50,18 @@ if (!isSecurePath($parentPath)) {
|
|||||||
<link rel="icon" type="image/png" href="favicon.png">
|
<link rel="icon" type="image/png" href="favicon.png">
|
||||||
<link rel="stylesheet" href="styles.css">
|
<link rel="stylesheet" href="styles.css">
|
||||||
</head>
|
</head>
|
||||||
<body class="gallery-page">
|
<body class="gallery-page<?php echo $albumInfo['mature_content'] ? ' gallery-page-mature content-blurred' : ''; ?>">
|
||||||
|
<?php if ($albumInfo['mature_content']): ?>
|
||||||
|
<div id="mature-warning" class="mature-overlay">
|
||||||
|
<div class="mature-content">
|
||||||
|
<div class="mature-icon">🔞</div>
|
||||||
|
<h2>Contenu réservé aux plus de 18 ans</h2>
|
||||||
|
<p>Cet album contient du contenu réservé à un public averti.</p>
|
||||||
|
<button onclick="acceptMatureContent()" class="mature-button">J'ai plus de 18 ans - Afficher le contenu</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<?php endif; ?>
|
||||||
|
|
||||||
<a href="albums.php?path=<?php echo urlencode($parentPath); ?>" class="back-button">Retour</a>
|
<a href="albums.php?path=<?php echo urlencode($parentPath); ?>" class="back-button">Retour</a>
|
||||||
|
|
||||||
<?php if ($headerImage): ?>
|
<?php if ($headerImage): ?>
|
||||||
@ -63,6 +75,12 @@ if (!isSecurePath($parentPath)) {
|
|||||||
<?php if (!empty($albumInfo['description'])): ?>
|
<?php if (!empty($albumInfo['description'])): ?>
|
||||||
<p><?php echo nl2br(htmlspecialchars($albumInfo['description'])); ?></p>
|
<p><?php echo nl2br(htmlspecialchars($albumInfo['description'])); ?></p>
|
||||||
<?php endif; ?>
|
<?php endif; ?>
|
||||||
|
<?php if ($albumInfo['mature_content']): ?>
|
||||||
|
<div class="mature-badge">
|
||||||
|
<span class="mature-badge-icon">🔞</span>
|
||||||
|
Contenu réservé aux plus de 18 ans
|
||||||
|
</div>
|
||||||
|
<?php endif; ?>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="gallery-grid" id="gallery-grid">
|
<div class="gallery-grid" id="gallery-grid">
|
||||||
@ -78,26 +96,6 @@ if (!isSecurePath($parentPath)) {
|
|||||||
<?php endforeach; ?>
|
<?php endforeach; ?>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<script>
|
|
||||||
document.addEventListener('DOMContentLoaded', function() {
|
|
||||||
const grid = document.querySelector('#gallery-grid');
|
|
||||||
|
|
||||||
// Initialiser Masonry immédiatement sans attendre le chargement des images
|
|
||||||
const masonry = new Masonry(grid, {
|
|
||||||
itemSelector: '.gallery-item',
|
|
||||||
columnWidth: '.gallery-item',
|
|
||||||
gutter: 20,
|
|
||||||
fitWidth: true
|
|
||||||
});
|
|
||||||
|
|
||||||
// Réorganiser la grille quand une image est chargée
|
|
||||||
grid.addEventListener('load', function(e) {
|
|
||||||
if (e.target.tagName === 'IMG') {
|
|
||||||
masonry.layout();
|
|
||||||
}
|
|
||||||
}, true);
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
<script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script>
|
<script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script>
|
||||||
<script src="https://unpkg.com/imagesloaded@5/imagesloaded.pkgd.min.js"></script>
|
<script src="https://unpkg.com/imagesloaded@5/imagesloaded.pkgd.min.js"></script>
|
||||||
<script>
|
<script>
|
||||||
@ -128,6 +126,18 @@ document.addEventListener('DOMContentLoaded', function() {
|
|||||||
}, 100);
|
}, 100);
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
|
// Gestion du contenu mature
|
||||||
|
function acceptMatureContent() {
|
||||||
|
document.body.classList.remove('content-blurred');
|
||||||
|
const warning = document.getElementById('mature-warning');
|
||||||
|
if (warning) {
|
||||||
|
warning.style.opacity = '0';
|
||||||
|
setTimeout(() => {
|
||||||
|
warning.style.display = 'none';
|
||||||
|
}, 300);
|
||||||
|
}
|
||||||
|
}
|
||||||
</script>
|
</script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
174
styles.css
174
styles.css
@ -105,7 +105,34 @@ body {
|
|||||||
overflow-y: auto;
|
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 {
|
.album-card-mature .album-images {
|
||||||
filter: blur(10px);
|
filter: blur(10px);
|
||||||
transition: filter 0.3s ease;
|
transition: filter 0.3s ease;
|
||||||
@ -144,33 +171,6 @@ body {
|
|||||||
opacity: 0;
|
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 {
|
.album-card {
|
||||||
background-color: #1e1e1e;
|
background-color: #1e1e1e;
|
||||||
border-radius: 1rem;
|
border-radius: 1rem;
|
||||||
@ -180,6 +180,7 @@ body {
|
|||||||
opacity: 0;
|
opacity: 0;
|
||||||
transform: translateY(20px);
|
transform: translateY(20px);
|
||||||
transition: opacity 0.5s ease, transform 0.5s ease;
|
transition: opacity 0.5s ease, transform 0.5s ease;
|
||||||
|
position: relative;
|
||||||
}
|
}
|
||||||
|
|
||||||
.album-card.visible {
|
.album-card.visible {
|
||||||
@ -243,6 +244,84 @@ body {
|
|||||||
margin: 0;
|
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 {
|
.gallery-header {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 500px;
|
height: 500px;
|
||||||
@ -472,6 +551,27 @@ body {
|
|||||||
padding: 0.6rem 1.2rem;
|
padding: 0.6rem 1.2rem;
|
||||||
font-size: 0.9rem;
|
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) {
|
@media (max-width: 480px) {
|
||||||
@ -497,6 +597,24 @@ body {
|
|||||||
padding: 0.6rem 1.2rem;
|
padding: 0.6rem 1.2rem;
|
||||||
font-size: 0.9rem;
|
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é */
|
/* Accessibilité */
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user