ajout affichage titre/description des albums
This commit is contained in:
parent
6cbc876cc2
commit
a4ccb0a553
12
albums.php
12
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']); ?>"
|
||||
|
||||
292
styles.css
292
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;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user