ajout de la partie publique
This commit is contained in:
parent
c6af349844
commit
bd1bb9bb36
100
albums.php
Normal file
100
albums.php
Normal file
@ -0,0 +1,100 @@
|
|||||||
|
<?php
|
||||||
|
require_once 'fonctions.php';
|
||||||
|
session_start();
|
||||||
|
|
||||||
|
// Récupérer le chemin actuel depuis l'URL
|
||||||
|
$currentPath = isset($_GET['path']) ? $_GET['path'] : './liste_albums';
|
||||||
|
$currentPath = realpath($currentPath);
|
||||||
|
|
||||||
|
// Vérification de sécurité
|
||||||
|
if (!isSecurePath($currentPath)) {
|
||||||
|
header('Location: index.php');
|
||||||
|
exit;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Récupérer tous les sous-dossiers
|
||||||
|
$albums = [];
|
||||||
|
foreach (new DirectoryIterator($currentPath) as $item) {
|
||||||
|
if ($item->isDot()) continue;
|
||||||
|
if ($item->isDir()) {
|
||||||
|
$albumPath = $item->getPathname();
|
||||||
|
$info = getAlbumInfo($albumPath);
|
||||||
|
|
||||||
|
$images = hasSubfolders($albumPath) ?
|
||||||
|
getImagesRecursively($albumPath) :
|
||||||
|
getLatestImages($albumPath);
|
||||||
|
|
||||||
|
$albums[] = [
|
||||||
|
'path' => str_replace('\\', '/', $albumPath),
|
||||||
|
'title' => $info['title'],
|
||||||
|
'description' => $info['description'],
|
||||||
|
'images' => $images,
|
||||||
|
'hasSubfolders' => hasSubfolders($albumPath),
|
||||||
|
'hasImages' => hasImages($albumPath)
|
||||||
|
];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Déterminer le chemin parent pour le bouton retour
|
||||||
|
$parentPath = dirname($currentPath);
|
||||||
|
if (!isSecurePath($parentPath)) {
|
||||||
|
$parentPath = null;
|
||||||
|
}
|
||||||
|
?><!DOCTYPE html>
|
||||||
|
<html lang="fr">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Albums - ICO</title>
|
||||||
|
<link rel="icon" type="image/png" href="favicon.png">
|
||||||
|
<link rel="stylesheet" href="styles.css">
|
||||||
|
</head>
|
||||||
|
<body class="albums-page">
|
||||||
|
<?php if ($parentPath): ?>
|
||||||
|
<a href="?path=<?php echo urlencode($parentPath); ?>" class="back-button">Retour</a>
|
||||||
|
<?php else: ?>
|
||||||
|
<a href="index.php" class="back-button">Retour</a>
|
||||||
|
<?php endif; ?>
|
||||||
|
|
||||||
|
<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']); ?>"
|
||||||
|
class="album-card">
|
||||||
|
<div class="album-images">
|
||||||
|
<?php if (empty($album['images'])): ?>
|
||||||
|
<div class="empty-album"></div>
|
||||||
|
<?php else: ?>
|
||||||
|
<?php foreach ($album['images'] as $index => $image): ?>
|
||||||
|
<div class="album-image" style="background-image: url('<?php echo htmlspecialchars($image); ?>')"></div>
|
||||||
|
<?php endforeach; ?>
|
||||||
|
<?php for ($i = count($album['images']); $i < 4; $i++): ?>
|
||||||
|
<div class="empty-image"></div>
|
||||||
|
<?php endfor; ?>
|
||||||
|
<?php endif; ?>
|
||||||
|
</div>
|
||||||
|
<div class="album-info">
|
||||||
|
<h2><?php echo htmlspecialchars($album['title']); ?></h2>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
<?php endforeach; ?>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
document.addEventListener('DOMContentLoaded', function() {
|
||||||
|
const observer = new IntersectionObserver((entries) => {
|
||||||
|
entries.forEach(entry => {
|
||||||
|
if (entry.isIntersecting) {
|
||||||
|
entry.target.classList.add('visible');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}, {
|
||||||
|
threshold: 0.1
|
||||||
|
});
|
||||||
|
|
||||||
|
document.querySelectorAll('.album-card').forEach(card => {
|
||||||
|
observer.observe(card);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
BIN
favicon.png
Normal file
BIN
favicon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 68 KiB |
204
fonctions.php
Normal file
204
fonctions.php
Normal file
@ -0,0 +1,204 @@
|
|||||||
|
<?php
|
||||||
|
// Configuration
|
||||||
|
define('PROJECT_ROOT_DIR', 'test-ico');
|
||||||
|
define('ALLOWED_EXTENSIONS', ['jpg', 'jpeg', 'png', 'gif']);
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Obtient l'URL de base du site
|
||||||
|
* @return string L'URL de base du site
|
||||||
|
*/
|
||||||
|
function getBaseUrl() {
|
||||||
|
$protocol = isset($_SERVER['HTTPS']) && $_SERVER['HTTPS'] === 'on' ? 'https://' : 'http://';
|
||||||
|
return $protocol . $_SERVER['HTTP_HOST'] . '/' . PROJECT_ROOT_DIR;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Récupère les informations d'un album depuis son fichier infos.txt
|
||||||
|
* @param string $albumPath Chemin vers l'album
|
||||||
|
* @return array Tableau contenant le titre et la description de l'album
|
||||||
|
*/
|
||||||
|
function getAlbumInfo($albumPath) {
|
||||||
|
$infoFile = $albumPath . '/infos.txt';
|
||||||
|
$info = [
|
||||||
|
'title' => basename($albumPath),
|
||||||
|
'description' => ''
|
||||||
|
];
|
||||||
|
|
||||||
|
if (file_exists($infoFile)) {
|
||||||
|
$content = file_get_contents($infoFile);
|
||||||
|
$lines = explode("\n", $content);
|
||||||
|
if (isset($lines[0])) $info['title'] = trim($lines[0]);
|
||||||
|
if (isset($lines[1])) $info['description'] = trim($lines[1]);
|
||||||
|
}
|
||||||
|
|
||||||
|
return $info;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Récupère les dernières images d'un dossier
|
||||||
|
* @param string $albumPath Chemin vers l'album
|
||||||
|
* @param int $limit Nombre d'images à récupérer
|
||||||
|
* @return array Tableau des URLs des images
|
||||||
|
*/
|
||||||
|
function getLatestImages($albumPath, $limit = 4) {
|
||||||
|
$images = [];
|
||||||
|
$baseUrl = getBaseUrl();
|
||||||
|
|
||||||
|
if (!is_dir($albumPath)) return $images;
|
||||||
|
|
||||||
|
foreach (new DirectoryIterator($albumPath) as $file) {
|
||||||
|
if ($file->isDot()) continue;
|
||||||
|
if ($file->isFile()) {
|
||||||
|
$extension = strtolower($file->getExtension());
|
||||||
|
if (in_array($extension, ALLOWED_EXTENSIONS)) {
|
||||||
|
$relativePath = str_replace('\\', '/', substr($file->getPathname(), strlen(realpath('./'))));
|
||||||
|
$images[] = $baseUrl . '/' . ltrim($relativePath, '/');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
usort($images, function($a, $b) {
|
||||||
|
$pathA = realpath('.') . str_replace(getBaseUrl(), '', $a);
|
||||||
|
$pathB = realpath('.') . str_replace(getBaseUrl(), '', $b);
|
||||||
|
return filectime($pathB) - filectime($pathA);
|
||||||
|
});
|
||||||
|
|
||||||
|
return array_slice($images, 0, $limit);
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Récupère les images de manière récursive dans tous les sous-dossiers
|
||||||
|
* @param string $albumPath Chemin vers l'album
|
||||||
|
* @param int $limit Nombre d'images à récupérer
|
||||||
|
* @return array Tableau des URLs des images
|
||||||
|
*/
|
||||||
|
function getImagesRecursively($albumPath, $limit = 4) {
|
||||||
|
$images = [];
|
||||||
|
$baseUrl = getBaseUrl();
|
||||||
|
|
||||||
|
if (!is_dir($albumPath)) return $images;
|
||||||
|
|
||||||
|
$iterator = new RecursiveIteratorIterator(
|
||||||
|
new RecursiveDirectoryIterator($albumPath),
|
||||||
|
RecursiveIteratorIterator::SELF_FIRST
|
||||||
|
);
|
||||||
|
|
||||||
|
foreach ($iterator as $file) {
|
||||||
|
if ($file->isFile()) {
|
||||||
|
$extension = strtolower($file->getExtension());
|
||||||
|
if (in_array($extension, ALLOWED_EXTENSIONS)) {
|
||||||
|
$relativePath = str_replace('\\', '/', substr($file->getPathname(), strlen(realpath('./'))));
|
||||||
|
$images[] = $baseUrl . '/' . ltrim($relativePath, '/');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
usort($images, function($a, $b) {
|
||||||
|
$pathA = realpath('.') . str_replace(getBaseUrl(), '', $a);
|
||||||
|
$pathB = realpath('.') . str_replace(getBaseUrl(), '', $b);
|
||||||
|
return filectime($pathB) - filectime($pathA);
|
||||||
|
});
|
||||||
|
|
||||||
|
return array_slice($images, 0, $limit);
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Vérifie si un dossier contient des sous-dossiers
|
||||||
|
* @param string $path Chemin du dossier
|
||||||
|
* @return bool True si le dossier contient des sous-dossiers
|
||||||
|
*/
|
||||||
|
function hasSubfolders($path) {
|
||||||
|
if (!is_dir($path)) return false;
|
||||||
|
|
||||||
|
foreach (new DirectoryIterator($path) as $item) {
|
||||||
|
if ($item->isDot()) continue;
|
||||||
|
if ($item->isDir()) return true;
|
||||||
|
}
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Vérifie si un dossier contient des images
|
||||||
|
* @param string $path Chemin du dossier
|
||||||
|
* @return bool True si le dossier contient des images
|
||||||
|
*/
|
||||||
|
function hasImages($path) {
|
||||||
|
if (!is_dir($path)) return false;
|
||||||
|
|
||||||
|
foreach (new DirectoryIterator($path) as $item) {
|
||||||
|
if ($item->isDot()) continue;
|
||||||
|
if ($item->isFile()) {
|
||||||
|
$extension = strtolower($item->getExtension());
|
||||||
|
if (in_array($extension, ALLOWED_EXTENSIONS)) return true;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Vérifie si le chemin est sécurisé (dans le dossier liste_albums)
|
||||||
|
* @param string $path Chemin à vérifier
|
||||||
|
* @return bool True si le chemin est sécurisé
|
||||||
|
*/
|
||||||
|
function isSecurePath($path) {
|
||||||
|
$realPath = realpath($path);
|
||||||
|
$rootPath = realpath('./liste_albums');
|
||||||
|
return $realPath && strpos($realPath, $rootPath) === 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Formate la taille d'un fichier en format lisible
|
||||||
|
* @param int $bytes Taille en octets
|
||||||
|
* @return string Taille formatée (ex: "1.2 MB")
|
||||||
|
*/
|
||||||
|
function formatFileSize($bytes) {
|
||||||
|
$units = ['B', 'KB', 'MB', 'GB', 'TB'];
|
||||||
|
$bytes = max($bytes, 0);
|
||||||
|
$pow = floor(($bytes ? log($bytes) : 0) / log(1024));
|
||||||
|
$pow = min($pow, count($units) - 1);
|
||||||
|
$bytes /= pow(1024, $pow);
|
||||||
|
return round($bytes, 1) . ' ' . $units[$pow];
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Récupère les dimensions d'une image de manière sécurisée
|
||||||
|
* @param string $path Chemin vers l'image
|
||||||
|
* @return array|false Tableau contenant width et height ou false en cas d'erreur
|
||||||
|
*/
|
||||||
|
function getSecureImageSize($path) {
|
||||||
|
try {
|
||||||
|
if (!file_exists($path)) return false;
|
||||||
|
$imageInfo = getimagesize($path);
|
||||||
|
if ($imageInfo === false) return false;
|
||||||
|
return [
|
||||||
|
'width' => $imageInfo[0],
|
||||||
|
'height' => $imageInfo[1]
|
||||||
|
];
|
||||||
|
} catch (Exception $e) {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Génère un identifiant unique sécurisé
|
||||||
|
* @param int $length Longueur de l'identifiant
|
||||||
|
* @return string Identifiant unique
|
||||||
|
*/
|
||||||
|
function generateSecureId($length = 32) {
|
||||||
|
return bin2hex(random_bytes($length / 2));
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Nettoie et sécurise un nom de fichier
|
||||||
|
* @param string $filename Nom du fichier à nettoyer
|
||||||
|
* @return string Nom de fichier sécurisé
|
||||||
|
*/
|
||||||
|
function sanitizeFilename($filename) {
|
||||||
|
// Supprime les caractères spéciaux
|
||||||
|
$filename = preg_replace('/[^a-zA-Z0-9._-]/', '-', $filename);
|
||||||
|
// Évite les noms de fichiers commençant par un point
|
||||||
|
$filename = ltrim($filename, '.');
|
||||||
|
// Limite la longueur du nom de fichier
|
||||||
|
return substr($filename, 0, 255);
|
||||||
|
}
|
||||||
|
?>
|
||||||
110
galeries.php
Normal file
110
galeries.php
Normal file
@ -0,0 +1,110 @@
|
|||||||
|
<?php
|
||||||
|
require_once 'fonctions.php';
|
||||||
|
session_start();
|
||||||
|
|
||||||
|
// Récupérer le chemin actuel depuis l'URL
|
||||||
|
$currentPath = isset($_GET['path']) ? $_GET['path'] : './liste_albums';
|
||||||
|
$currentPath = realpath($currentPath);
|
||||||
|
|
||||||
|
// Vérification de sécurité
|
||||||
|
if (!isSecurePath($currentPath)) {
|
||||||
|
header('Location: index.php');
|
||||||
|
exit;
|
||||||
|
}
|
||||||
|
|
||||||
|
$albumInfo = getAlbumInfo($currentPath);
|
||||||
|
$images = [];
|
||||||
|
$baseUrl = getBaseUrl();
|
||||||
|
|
||||||
|
foreach (new DirectoryIterator($currentPath) as $file) {
|
||||||
|
if ($file->isDot()) continue;
|
||||||
|
if ($file->isFile()) {
|
||||||
|
$extension = strtolower($file->getExtension());
|
||||||
|
if (in_array($extension, ['jpg', 'jpeg', 'png', 'gif'])) {
|
||||||
|
$relativePath = str_replace('\\', '/', substr($file->getPathname(), strlen(realpath('./'))));
|
||||||
|
$url = $baseUrl . '/' . ltrim($relativePath, '/');
|
||||||
|
$images[] = $url;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
usort($images, function($a, $b) {
|
||||||
|
$pathA = realpath('.') . str_replace(getBaseUrl(), '', $a);
|
||||||
|
$pathB = realpath('.') . str_replace(getBaseUrl(), '', $b);
|
||||||
|
return filectime($pathB) - filectime($pathA);
|
||||||
|
});
|
||||||
|
|
||||||
|
$headerImage = !empty($images) ? $images[0] : null;
|
||||||
|
|
||||||
|
$parentPath = dirname($currentPath);
|
||||||
|
if (!isSecurePath($parentPath)) {
|
||||||
|
$parentPath = './liste_albums';
|
||||||
|
}
|
||||||
|
?><!DOCTYPE html>
|
||||||
|
<html lang="fr">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title><?php echo htmlspecialchars($albumInfo['title']); ?> - ICO</title>
|
||||||
|
<link rel="icon" type="image/png" href="favicon.png">
|
||||||
|
<link rel="stylesheet" href="styles.css">
|
||||||
|
</head>
|
||||||
|
<body class="gallery-page">
|
||||||
|
<a href="albums.php?path=<?php echo urlencode($parentPath); ?>" class="back-button">Retour</a>
|
||||||
|
|
||||||
|
<?php if ($headerImage): ?>
|
||||||
|
<div class="gallery-header">
|
||||||
|
<img src="<?php echo htmlspecialchars($headerImage); ?>" alt="Image principale" class="header-image">
|
||||||
|
</div>
|
||||||
|
<?php endif; ?>
|
||||||
|
|
||||||
|
<div class="gallery-info">
|
||||||
|
<h1><?php echo htmlspecialchars($albumInfo['title']); ?></h1>
|
||||||
|
<?php if (!empty($albumInfo['description'])): ?>
|
||||||
|
<p><?php echo nl2br(htmlspecialchars($albumInfo['description'])); ?></p>
|
||||||
|
<?php endif; ?>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="gallery-grid" id="gallery-grid">
|
||||||
|
<?php foreach($images as $image): ?>
|
||||||
|
<div class="gallery-item">
|
||||||
|
<a href="partage.php?image=<?php echo urlencode($image); ?>">
|
||||||
|
<img src="<?php echo htmlspecialchars($image); ?>" alt="Image de la galerie" loading="lazy">
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<?php endforeach; ?>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<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>
|
||||||
|
document.addEventListener('DOMContentLoaded', function() {
|
||||||
|
const grid = document.querySelector('#gallery-grid');
|
||||||
|
const loadingClass = 'is-loading';
|
||||||
|
|
||||||
|
// Ajouter une classe de chargement
|
||||||
|
grid.classList.add(loadingClass);
|
||||||
|
|
||||||
|
// Initialiser Masonry avec imagesLoaded
|
||||||
|
imagesLoaded(grid, function() {
|
||||||
|
const masonry = new Masonry(grid, {
|
||||||
|
itemSelector: '.gallery-item',
|
||||||
|
columnWidth: '.gallery-item',
|
||||||
|
gutter: 20,
|
||||||
|
fitWidth: true,
|
||||||
|
transitionDuration: 0 // Désactiver l'animation pour le premier rendu
|
||||||
|
});
|
||||||
|
|
||||||
|
// Retirer la classe de chargement
|
||||||
|
grid.classList.remove(loadingClass);
|
||||||
|
|
||||||
|
// Réactiver les animations après le premier rendu
|
||||||
|
setTimeout(() => {
|
||||||
|
masonry.options.transitionDuration = '0.3s';
|
||||||
|
masonry.layout();
|
||||||
|
}, 100);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
79
index.php
Normal file
79
index.php
Normal file
@ -0,0 +1,79 @@
|
|||||||
|
<?php
|
||||||
|
// Fonction pour récupérer les 5 dernières images
|
||||||
|
function getLatestImages($rootDir = './liste_albums', $limit = 5) {
|
||||||
|
$images = [];
|
||||||
|
$iterator = new RecursiveIteratorIterator(
|
||||||
|
new RecursiveDirectoryIterator($rootDir),
|
||||||
|
RecursiveIteratorIterator::SELF_FIRST
|
||||||
|
);
|
||||||
|
|
||||||
|
foreach ($iterator as $file) {
|
||||||
|
if ($file->isFile()) {
|
||||||
|
$extension = strtolower($file->getExtension());
|
||||||
|
if (in_array($extension, ['jpg', 'jpeg', 'png', 'gif'])) {
|
||||||
|
$images[] = str_replace('\\', '/', $file->getPathname());
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
usort($images, function($a, $b) {
|
||||||
|
return filectime($b) - filectime($a);
|
||||||
|
});
|
||||||
|
|
||||||
|
return array_slice($images, 0, $limit);
|
||||||
|
}
|
||||||
|
|
||||||
|
$latestImages = getLatestImages();
|
||||||
|
?>
|
||||||
|
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="fr">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>ICO - Galerie d'images</title>
|
||||||
|
<link rel="icon" type="image/png" href="favicon.png">
|
||||||
|
<link rel="stylesheet" href="styles.css">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="carousel">
|
||||||
|
<?php foreach($latestImages as $index => $image): ?>
|
||||||
|
<div class="carousel-slide <?php echo $index === 0 ? 'active' : ''; ?>">
|
||||||
|
<img src="<?php echo htmlspecialchars($image); ?>" alt="Image de la galerie">
|
||||||
|
</div>
|
||||||
|
<?php endforeach; ?>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="overlay">
|
||||||
|
<h1>ICO</h1>
|
||||||
|
<p>ICO est la galerie d'images de l'association Camélia Studio.</p>
|
||||||
|
<a href="albums.php" class="cta-button">Accéder aux galeries</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
document.addEventListener('DOMContentLoaded', function() {
|
||||||
|
let currentSlide = 0;
|
||||||
|
const slides = document.querySelectorAll('.carousel-slide');
|
||||||
|
|
||||||
|
function showSlide(index) {
|
||||||
|
slides.forEach(slide => {
|
||||||
|
slide.classList.remove('active');
|
||||||
|
});
|
||||||
|
|
||||||
|
slides[index].classList.add('active');
|
||||||
|
}
|
||||||
|
|
||||||
|
function nextSlide() {
|
||||||
|
currentSlide = (currentSlide + 1) % slides.length;
|
||||||
|
showSlide(currentSlide);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Initialiser le premier slide
|
||||||
|
showSlide(0);
|
||||||
|
|
||||||
|
// Changer de slide toutes les 5 secondes
|
||||||
|
setInterval(nextSlide, 5000);
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
2
liste_albums/infos.txt
Normal file
2
liste_albums/infos.txt
Normal file
@ -0,0 +1,2 @@
|
|||||||
|
Titre
|
||||||
|
Description sur la seconde ligne.
|
||||||
200
partage.php
Normal file
200
partage.php
Normal file
@ -0,0 +1,200 @@
|
|||||||
|
<?php
|
||||||
|
require_once 'fonctions.php';
|
||||||
|
|
||||||
|
// Vérifier que nous avons une URL d'image
|
||||||
|
$imageUrl = isset($_GET['image']) ? $_GET['image'] : null;
|
||||||
|
|
||||||
|
// Si pas d'image, redirection
|
||||||
|
if (!$imageUrl) {
|
||||||
|
header('Location: index.php');
|
||||||
|
exit;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Récupérer le nom du fichier pour le téléchargement
|
||||||
|
$filename = basename($imageUrl);
|
||||||
|
?>
|
||||||
|
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="fr">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Image - ICO</title>
|
||||||
|
<link rel="icon" type="image/png" href="favicon.png">
|
||||||
|
<link rel="stylesheet" href="styles.css">
|
||||||
|
</head>
|
||||||
|
<body class="share-page">
|
||||||
|
<div class="share-container">
|
||||||
|
<div class="share-image">
|
||||||
|
<img src="<?php echo htmlspecialchars($imageUrl); ?>" alt="Image partagée">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="share-actions">
|
||||||
|
<button class="action-button" onclick="shareImage()">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" class="icon" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2">
|
||||||
|
<path d="M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8"></path>
|
||||||
|
<polyline points="16 6 12 2 8 6"></polyline>
|
||||||
|
<line x1="12" y1="2" x2="12" y2="15"></line>
|
||||||
|
</svg>
|
||||||
|
Partager
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<button class="action-button" onclick="embedImage()">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" class="icon" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2">
|
||||||
|
<polyline points="16 18 22 12 16 6"></polyline>
|
||||||
|
<polyline points="8 6 2 12 8 18"></polyline>
|
||||||
|
</svg>
|
||||||
|
Intégrer
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<a href="<?php echo htmlspecialchars($imageUrl); ?>"
|
||||||
|
download="<?php echo htmlspecialchars($filename); ?>"
|
||||||
|
class="action-button">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" class="icon" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2">
|
||||||
|
<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
|
||||||
|
<polyline points="7 10 12 15 17 10"></polyline>
|
||||||
|
<line x1="12" y1="15" x2="12" y2="3"></line>
|
||||||
|
</svg>
|
||||||
|
Télécharger
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
function copyToClipboard(text, button) {
|
||||||
|
const input = document.createElement('input');
|
||||||
|
input.value = text;
|
||||||
|
document.body.appendChild(input);
|
||||||
|
input.select();
|
||||||
|
document.execCommand('copy');
|
||||||
|
document.body.removeChild(input);
|
||||||
|
|
||||||
|
// Sauvegarder l'HTML original
|
||||||
|
const originalHTML = button.innerHTML;
|
||||||
|
|
||||||
|
// Afficher la confirmation
|
||||||
|
button.innerHTML = `
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" class="icon" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2">
|
||||||
|
<path d="M20 6L9 17l-5-5"></path>
|
||||||
|
</svg>
|
||||||
|
Copié !
|
||||||
|
`;
|
||||||
|
|
||||||
|
// Restaurer l'état original après 2 secondes
|
||||||
|
setTimeout(() => {
|
||||||
|
button.innerHTML = originalHTML;
|
||||||
|
}, 2000);
|
||||||
|
}
|
||||||
|
|
||||||
|
function shareImage() {
|
||||||
|
copyToClipboard(window.location.href, document.querySelector('.action-button'));
|
||||||
|
}
|
||||||
|
|
||||||
|
function embedImage() {
|
||||||
|
const imageUrl = '<?php echo htmlspecialchars($imageUrl); ?>';
|
||||||
|
copyToClipboard(imageUrl, document.querySelector('.action-button:nth-child(2)'));
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html><?php
|
||||||
|
require_once 'functions.php';
|
||||||
|
|
||||||
|
// Vérifier que nous avons une URL d'image
|
||||||
|
$imageUrl = isset($_GET['image']) ? $_GET['image'] : null;
|
||||||
|
$returnUrl = isset($_GET['return']) ? $_GET['return'] : 'index.php';
|
||||||
|
|
||||||
|
// Si pas d'image, redirection
|
||||||
|
if (!$imageUrl) {
|
||||||
|
header('Location: ' . $returnUrl);
|
||||||
|
exit;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Récupérer le nom du fichier pour le téléchargement
|
||||||
|
$filename = basename($imageUrl);
|
||||||
|
?>
|
||||||
|
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="fr">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Partager l'image - ICO</title>
|
||||||
|
<link rel="stylesheet" href="styles.css">
|
||||||
|
</head>
|
||||||
|
<body class="share-page">
|
||||||
|
<!-- Remplacer le lien de retour par un bouton -->
|
||||||
|
<button onclick="window.close();" class="back-button">Retour à la galerie</button>
|
||||||
|
|
||||||
|
<div class="share-container">
|
||||||
|
<div class="share-image">
|
||||||
|
<img src="<?php echo htmlspecialchars($imageUrl); ?>" alt="Image partagée">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="share-actions">
|
||||||
|
<button class="action-button" onclick="shareImage()">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" class="icon" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2">
|
||||||
|
<path d="M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8"></path>
|
||||||
|
<polyline points="16 6 12 2 8 6"></polyline>
|
||||||
|
<line x1="12" y1="2" x2="12" y2="15"></line>
|
||||||
|
</svg>
|
||||||
|
Partager
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<button class="action-button" onclick="embedImage()">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" class="icon" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2">
|
||||||
|
<polyline points="16 18 22 12 16 6"></polyline>
|
||||||
|
<polyline points="8 6 2 12 8 18"></polyline>
|
||||||
|
</svg>
|
||||||
|
Intégrer
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<a href="<?php echo htmlspecialchars($imageUrl); ?>"
|
||||||
|
download="<?php echo htmlspecialchars($filename); ?>"
|
||||||
|
class="action-button">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" class="icon" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2">
|
||||||
|
<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
|
||||||
|
<polyline points="7 10 12 15 17 10"></polyline>
|
||||||
|
<line x1="12" y1="15" x2="12" y2="3"></line>
|
||||||
|
</svg>
|
||||||
|
Télécharger
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
function copyToClipboard(text, button) {
|
||||||
|
const input = document.createElement('input');
|
||||||
|
input.value = text;
|
||||||
|
document.body.appendChild(input);
|
||||||
|
input.select();
|
||||||
|
document.execCommand('copy');
|
||||||
|
document.body.removeChild(input);
|
||||||
|
|
||||||
|
// Sauvegarder l'HTML original
|
||||||
|
const originalHTML = button.innerHTML;
|
||||||
|
|
||||||
|
// Afficher la confirmation
|
||||||
|
button.innerHTML = `
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" class="icon" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2">
|
||||||
|
<path d="M20 6L9 17l-5-5"></path>
|
||||||
|
</svg>
|
||||||
|
Copié !
|
||||||
|
`;
|
||||||
|
|
||||||
|
// Restaurer l'état original après 2 secondes
|
||||||
|
setTimeout(() => {
|
||||||
|
button.innerHTML = originalHTML;
|
||||||
|
}, 2000);
|
||||||
|
}
|
||||||
|
|
||||||
|
function shareImage() {
|
||||||
|
copyToClipboard(window.location.href, document.querySelector('.action-button'));
|
||||||
|
}
|
||||||
|
|
||||||
|
function embedImage() {
|
||||||
|
const imageUrl = '<?php echo htmlspecialchars($imageUrl); ?>';
|
||||||
|
copyToClipboard(imageUrl, document.querySelector('.action-button:nth-child(2)'));
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
460
styles.css
Normal file
460
styles.css
Normal file
@ -0,0 +1,460 @@
|
|||||||
|
/* 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 */
|
||||||
|
* {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
font-family: 'Segoe UI', system-ui, sans-serif;
|
||||||
|
background-color: #121212;
|
||||||
|
color: #ffffff;
|
||||||
|
min-height: 100vh;
|
||||||
|
overflow-x: hidden;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Styles de la page d'accueil */
|
||||||
|
.carousel {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100vh;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.carousel-slide {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
opacity: 0;
|
||||||
|
transition: opacity 1s ease-in-out;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.carousel-slide.active {
|
||||||
|
opacity: 1;
|
||||||
|
z-index: 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.carousel-slide img {
|
||||||
|
width: 100%;
|
||||||
|
height: 100vh;
|
||||||
|
object-fit: cover;
|
||||||
|
filter: brightness(0.6);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Overlay contenu */
|
||||||
|
.overlay {
|
||||||
|
position: fixed;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
text-align: center;
|
||||||
|
z-index: 20;
|
||||||
|
width: 90%;
|
||||||
|
max-width: 600px;
|
||||||
|
padding: 2rem;
|
||||||
|
background-color: rgba(0, 0, 0, 0.7);
|
||||||
|
border-radius: 1rem;
|
||||||
|
backdrop-filter: blur(10px);
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
font-size: 4rem;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
font-weight: 700;
|
||||||
|
letter-spacing: 0.2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
font-size: 1.2rem;
|
||||||
|
margin-bottom: 2rem;
|
||||||
|
line-height: 1.6;
|
||||||
|
color: #e0e0e0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cta-button {
|
||||||
|
display: inline-block;
|
||||||
|
padding: 1rem 2rem;
|
||||||
|
background-color: #2196f3;
|
||||||
|
color: white;
|
||||||
|
text-decoration: none;
|
||||||
|
border-radius: 2rem;
|
||||||
|
font-size: 1.1rem;
|
||||||
|
font-weight: 500;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
border: 2px solid transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cta-button:hover {
|
||||||
|
background-color: #1976d2;
|
||||||
|
transform: translateY(-2px);
|
||||||
|
box-shadow: 0 4px 12px rgba(33, 150, 243, 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Styles pour la page des albums */
|
||||||
|
.albums-page {
|
||||||
|
background-color: #121212;
|
||||||
|
min-height: 100vh;
|
||||||
|
padding: 2rem;
|
||||||
|
overflow-y: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.albums-grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
|
||||||
|
gap: 2rem;
|
||||||
|
max-width: 1800px;
|
||||||
|
margin: 4rem auto 2rem auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.album-card {
|
||||||
|
background-color: #1e1e1e;
|
||||||
|
border-radius: 1rem;
|
||||||
|
overflow: hidden;
|
||||||
|
text-decoration: none;
|
||||||
|
color: white;
|
||||||
|
opacity: 0;
|
||||||
|
transform: translateY(20px);
|
||||||
|
transition: opacity 0.5s ease, transform 0.5s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.album-card.visible {
|
||||||
|
opacity: 1;
|
||||||
|
transform: translateY(0);
|
||||||
|
}
|
||||||
|
|
||||||
|
.album-card:hover {
|
||||||
|
transform: translateY(-5px);
|
||||||
|
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.album-images {
|
||||||
|
position: relative;
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(2, 1fr);
|
||||||
|
grid-template-rows: repeat(2, 1fr);
|
||||||
|
aspect-ratio: 1;
|
||||||
|
gap: 2px;
|
||||||
|
background-color: #2a2a2a;
|
||||||
|
}
|
||||||
|
|
||||||
|
.album-image {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background-size: cover;
|
||||||
|
background-position: center;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
}
|
||||||
|
|
||||||
|
.empty-image {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background-color: #2a2a2a;
|
||||||
|
}
|
||||||
|
|
||||||
|
.empty-album {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background-color: #2a2a2a;
|
||||||
|
grid-column: 1 / -1;
|
||||||
|
grid-row: 1 / -1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.album-info {
|
||||||
|
padding: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.album-info h2 {
|
||||||
|
font-size: 1.2rem;
|
||||||
|
margin: 0;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Styles pour la page galerie */
|
||||||
|
.gallery-page {
|
||||||
|
background-color: #121212;
|
||||||
|
min-height: 100vh;
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gallery-header {
|
||||||
|
width: 100%;
|
||||||
|
height: 500px;
|
||||||
|
overflow: hidden;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-image {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
object-fit: cover;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gallery-info {
|
||||||
|
padding: 2rem;
|
||||||
|
max-width: 1800px;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gallery-grid {
|
||||||
|
padding: 2rem;
|
||||||
|
max-width: 1800px;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gallery-grid.is-loading .gallery-item {
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gallery-grid .gallery-item {
|
||||||
|
opacity: 1;
|
||||||
|
transition: opacity 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gallery-item {
|
||||||
|
width: calc((100% - (7 * 20px)) / 8);
|
||||||
|
min-width: 200px;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
border-radius: 8px;
|
||||||
|
overflow: hidden;
|
||||||
|
background-color: #1e1e1e;
|
||||||
|
transition: transform 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gallery-item:hover {
|
||||||
|
transform: translateY(-5px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.gallery-item img {
|
||||||
|
width: 100%;
|
||||||
|
height: auto;
|
||||||
|
min-height: 150px;
|
||||||
|
object-fit: cover;
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.share-page {
|
||||||
|
background-color: rgba(0, 0, 0, 0.9);
|
||||||
|
min-height: 100vh;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.share-container {
|
||||||
|
max-width: 90vw;
|
||||||
|
max-height: 90vh;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.share-image {
|
||||||
|
border-radius: 8px;
|
||||||
|
overflow: hidden;
|
||||||
|
background-color: #1e1e1e;
|
||||||
|
box-shadow: 0 4px 24px rgba(0, 0, 0, 0.5);
|
||||||
|
}
|
||||||
|
|
||||||
|
.share-image img {
|
||||||
|
max-width: 100%;
|
||||||
|
max-height: 90vh;
|
||||||
|
display: block;
|
||||||
|
object-fit: contain;
|
||||||
|
}
|
||||||
|
|
||||||
|
.share-actions {
|
||||||
|
position: fixed;
|
||||||
|
bottom: 2rem;
|
||||||
|
left: 50%;
|
||||||
|
transform: translateX(-50%);
|
||||||
|
display: flex;
|
||||||
|
gap: 1rem;
|
||||||
|
background-color: rgba(0, 0, 0, 0.8);
|
||||||
|
padding: 1rem;
|
||||||
|
border-radius: 2rem;
|
||||||
|
backdrop-filter: blur(10px);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Ajuster .action-button pour la page de partage */
|
||||||
|
.share-actions .action-button {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.5rem;
|
||||||
|
padding: 0.8rem 1.5rem;
|
||||||
|
background-color: #2196f3;
|
||||||
|
color: white;
|
||||||
|
border: none;
|
||||||
|
border-radius: 2rem;
|
||||||
|
cursor: pointer;
|
||||||
|
font-size: 1rem;
|
||||||
|
text-decoration: none;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.share-actions .action-button:hover {
|
||||||
|
background-color: #1976d2;
|
||||||
|
transform: translateY(-2px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.share-actions .action-button .icon {
|
||||||
|
width: 1.2em;
|
||||||
|
height: 1.2em;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Protection par mot de passe */
|
||||||
|
.protected-indicator {
|
||||||
|
display: inline-block;
|
||||||
|
margin-left: 0.5rem;
|
||||||
|
font-size: 0.8em;
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Media queries pour la page de partage */
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
.share-actions {
|
||||||
|
flex-direction: column;
|
||||||
|
padding: 0.8rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.share-actions .action-button {
|
||||||
|
padding: 0.6rem 1.2rem;
|
||||||
|
font-size: 0.9rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media (prefers-reduced-motion: reduce) {
|
||||||
|
* {
|
||||||
|
animation-duration: 0.01ms !important;
|
||||||
|
animation-iteration-count: 1 !important;
|
||||||
|
transition-duration: 0.01ms !important;
|
||||||
|
scroll-behavior: auto !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
Loading…
x
Reference in New Issue
Block a user