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
58
galeries.php
58
galeries.php
@ -40,7 +40,8 @@ $parentPath = dirname($currentPath);
|
||||
if (!isSecurePath($parentPath)) {
|
||||
$parentPath = './liste_albums';
|
||||
}
|
||||
?><!DOCTYPE html>
|
||||
?>
|
||||
<!DOCTYPE html>
|
||||
<html lang="fr">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
@ -49,7 +50,18 @@ if (!isSecurePath($parentPath)) {
|
||||
<link rel="icon" type="image/png" href="favicon.png">
|
||||
<link rel="stylesheet" href="styles.css">
|
||||
</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>
|
||||
|
||||
<?php if ($headerImage): ?>
|
||||
@ -63,6 +75,12 @@ if (!isSecurePath($parentPath)) {
|
||||
<?php if (!empty($albumInfo['description'])): ?>
|
||||
<p><?php echo nl2br(htmlspecialchars($albumInfo['description'])); ?></p>
|
||||
<?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 class="gallery-grid" id="gallery-grid">
|
||||
@ -76,28 +94,8 @@ if (!isSecurePath($parentPath)) {
|
||||
</a>
|
||||
</div>
|
||||
<?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/imagesloaded@5/imagesloaded.pkgd.min.js"></script>
|
||||
<script>
|
||||
@ -127,7 +125,19 @@ document.addEventListener('DOMContentLoaded', function() {
|
||||
masonry.layout();
|
||||
}, 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>
|
||||
</body>
|
||||
</html>
|
||||
174
styles.css
174
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é */
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user