Init photo gallery with auto-indexing, thumbs, UI, deploy script
This commit is contained in:
Alex Assistant
commit
b5c49caeb2
17
.gitignore
vendored
Normal file
17
.gitignore
vendored
Normal file
|
|
@ -0,0 +1,17 @@
|
|||
# Runtime/generated
|
||||
thumbs/*
|
||||
!thumbs/.gitkeep
|
||||
photos/*
|
||||
!photos/.gitkeep
|
||||
data/last_indexed.txt
|
||||
|
||||
# OS/editor
|
||||
.DS_Store
|
||||
Thumbs.db
|
||||
*.swp
|
||||
*.swo
|
||||
.idea/
|
||||
.vscode/
|
||||
|
||||
# Logs/temp
|
||||
*.log
|
||||
96
README.md
Normal file
96
README.md
Normal file
|
|
@ -0,0 +1,96 @@
|
|||
# Галерея фотографий (PHP)
|
||||
|
||||
Локальный проект галереи, который:
|
||||
|
||||
- читает категории и фото из `photos/` (туда можно загружать по FTP),
|
||||
- при каждом открытии страницы проверяет, появились ли новые/обновлённые фото,
|
||||
- создаёт и обновляет превью в `thumbs/`,
|
||||
- показывает категории и фото в веб-интерфейсе,
|
||||
- открывает большую фотографию в лайтбоксе или в новой вкладке.
|
||||
|
||||
## Структура
|
||||
|
||||
```text
|
||||
photo-gallery/
|
||||
├─ index.php # основной скрипт: индексация + HTML
|
||||
├─ style.css # стили (material-like, строгий)
|
||||
├─ app.js # лайтбокс
|
||||
├─ photos/ # исходные фото по категориям (папкам)
|
||||
├─ thumbs/ # автогенерируемые превью
|
||||
└─ data/
|
||||
└─ last_indexed.txt # timestamp последней индексации
|
||||
```
|
||||
|
||||
## Как работает индексация
|
||||
|
||||
1. Скрипт читает `data/last_indexed.txt`.
|
||||
2. Сканирует `photos/<категория>/`.
|
||||
3. Для каждого изображения (`jpg/jpeg/png/webp/gif`):
|
||||
- если файл новее `last_indexed`,
|
||||
- или превью не существует,
|
||||
- или превью старее оригинала,
|
||||
тогда создаётся/обновляется превью (`.jpg`) в `thumbs/<категория>/`.
|
||||
4. Записывает новый timestamp в `last_indexed.txt`.
|
||||
|
||||
Индексация выполняется **на каждом обращении к `index.php`**.
|
||||
|
||||
## Требования
|
||||
|
||||
- PHP 8.2+ (8.3 тоже ок)
|
||||
- Расширение GD **или** Imagick
|
||||
- если есть Imagick — будет использоваться он,
|
||||
- иначе используется GD.
|
||||
|
||||
## Локальный запуск
|
||||
|
||||
Из папки `photo-gallery`:
|
||||
|
||||
```bash
|
||||
php -S 127.0.0.1:8080
|
||||
```
|
||||
|
||||
Открыть в браузере:
|
||||
|
||||
- `http://127.0.0.1:8080`
|
||||
|
||||
## Загрузка фото
|
||||
|
||||
Через FTP кладите файлы в:
|
||||
|
||||
- `photos/Свадьба/001.jpg`
|
||||
- `photos/Портреты/img_10.png`
|
||||
- и т.д.
|
||||
|
||||
Папка верхнего уровня = категория.
|
||||
|
||||
## Деплой (Timeweb shared hosting)
|
||||
|
||||
В проекте есть скрипт:
|
||||
|
||||
- `scripts/deploy.sh`
|
||||
|
||||
Он:
|
||||
|
||||
1. делает `git fetch`,
|
||||
2. жёстко переключает код на `origin/<branch>`,
|
||||
3. сохраняет runtime-папки (`photos`, `thumbs`, `data`),
|
||||
4. создаёт `data/last_indexed.txt` при первом запуске.
|
||||
|
||||
Запуск на хостинге:
|
||||
|
||||
```bash
|
||||
cd ~/www/photo-gallery
|
||||
bash scripts/deploy.sh
|
||||
```
|
||||
|
||||
По умолчанию ветка `main`. Для другой ветки:
|
||||
|
||||
```bash
|
||||
BRANCH=master bash scripts/deploy.sh
|
||||
```
|
||||
|
||||
## Примечания
|
||||
|
||||
- Превью генерируются в формате JPEG с качеством ~82.
|
||||
- При первом заходе на большую папку возможно небольшое ожидание (генерация превью).
|
||||
- Для production обычно лучше вынести индексацию в cron/очередь, но для текущей задачи это intentionally on-request.
|
||||
54
app.js
Normal file
54
app.js
Normal file
|
|
@ -0,0 +1,54 @@
|
|||
(() => {
|
||||
const lightbox = document.getElementById('lightbox');
|
||||
const lightboxImage = document.getElementById('lightboxImage');
|
||||
|
||||
if (!lightbox || !lightboxImage) {
|
||||
return;
|
||||
}
|
||||
|
||||
document.addEventListener('contextmenu', (e) => {
|
||||
e.preventDefault();
|
||||
});
|
||||
|
||||
document.addEventListener('dragstart', (e) => {
|
||||
e.preventDefault();
|
||||
});
|
||||
|
||||
document.addEventListener('keydown', (e) => {
|
||||
const key = e.key.toLowerCase();
|
||||
if ((e.ctrlKey || e.metaKey) && (key === 's' || key === 'u' || key === 'p')) {
|
||||
e.preventDefault();
|
||||
}
|
||||
|
||||
if (key === 'f12') {
|
||||
e.preventDefault();
|
||||
}
|
||||
|
||||
if (e.key === 'Escape' && !lightbox.hidden) {
|
||||
closeLightbox();
|
||||
}
|
||||
});
|
||||
|
||||
document.querySelectorAll('.js-thumb').forEach((button) => {
|
||||
button.addEventListener('click', () => {
|
||||
const full = button.dataset.full;
|
||||
const title = button.dataset.title || 'Фото';
|
||||
if (!full) return;
|
||||
|
||||
lightboxImage.src = full;
|
||||
lightboxImage.alt = title;
|
||||
lightbox.hidden = false;
|
||||
document.body.style.overflow = 'hidden';
|
||||
});
|
||||
});
|
||||
|
||||
lightbox.querySelectorAll('.js-close').forEach((el) => {
|
||||
el.addEventListener('click', closeLightbox);
|
||||
});
|
||||
|
||||
function closeLightbox() {
|
||||
lightbox.hidden = true;
|
||||
lightboxImage.src = '';
|
||||
document.body.style.overflow = '';
|
||||
}
|
||||
})();
|
||||
0
data/.gitkeep
Normal file
0
data/.gitkeep
Normal file
296
index.php
Normal file
296
index.php
Normal file
|
|
@ -0,0 +1,296 @@
|
|||
<?php
|
||||
|
||||
declare(strict_types=1);
|
||||
|
||||
const THUMB_WIDTH = 360;
|
||||
const THUMB_HEIGHT = 240;
|
||||
|
||||
$baseDir = __DIR__;
|
||||
$photosDir = $baseDir . '/photos';
|
||||
$thumbsDir = $baseDir . '/thumbs';
|
||||
$dataDir = $baseDir . '/data';
|
||||
$lastIndexedFile = $dataDir . '/last_indexed.txt';
|
||||
|
||||
ensureDirectories([$photosDir, $thumbsDir, $dataDir]);
|
||||
|
||||
$action = $_GET['action'] ?? null;
|
||||
if ($action === 'image') {
|
||||
serveImage($photosDir);
|
||||
}
|
||||
|
||||
$lastIndexedTimestamp = readLastIndexedTimestamp($lastIndexedFile);
|
||||
$maxTimestamp = $lastIndexedTimestamp;
|
||||
|
||||
$categories = scanCategories($photosDir);
|
||||
|
||||
foreach ($categories as $categoryName => &$images) {
|
||||
$categoryThumbDir = $thumbsDir . '/' . $categoryName;
|
||||
if (!is_dir($categoryThumbDir)) {
|
||||
mkdir($categoryThumbDir, 0775, true);
|
||||
}
|
||||
|
||||
foreach ($images as &$image) {
|
||||
$sourcePath = $image['abs_path'];
|
||||
$sourceMtime = (int) filemtime($sourcePath);
|
||||
$maxTimestamp = max($maxTimestamp, $sourceMtime);
|
||||
|
||||
$thumbExt = 'jpg';
|
||||
$thumbName = pathinfo($image['filename'], PATHINFO_FILENAME) . '.jpg';
|
||||
$thumbAbsPath = $categoryThumbDir . '/' . $thumbName;
|
||||
$thumbWebPath = 'thumbs/' . rawurlencode($categoryName) . '/' . rawurlencode($thumbName);
|
||||
|
||||
$needsThumb = !file_exists($thumbAbsPath)
|
||||
|| filemtime($thumbAbsPath) < $sourceMtime
|
||||
|| $sourceMtime > $lastIndexedTimestamp;
|
||||
|
||||
if ($needsThumb) {
|
||||
createThumbnail($sourcePath, $thumbAbsPath, THUMB_WIDTH, THUMB_HEIGHT);
|
||||
}
|
||||
|
||||
$image['thumb_path'] = $thumbWebPath;
|
||||
$image['full_path'] = '?action=image&category=' . rawurlencode($categoryName) . '&file=' . rawurlencode($image['filename']);
|
||||
$image['mtime'] = $sourceMtime;
|
||||
}
|
||||
|
||||
usort($images, static function (array $a, array $b): int {
|
||||
return $b['mtime'] <=> $a['mtime'];
|
||||
});
|
||||
}
|
||||
unset($images, $image);
|
||||
|
||||
if ($maxTimestamp > $lastIndexedTimestamp) {
|
||||
file_put_contents($lastIndexedFile, (string)$maxTimestamp);
|
||||
}
|
||||
|
||||
$selectedCategory = isset($_GET['category']) ? trim((string)$_GET['category']) : null;
|
||||
if ($selectedCategory !== null && $selectedCategory !== '' && !isset($categories[$selectedCategory])) {
|
||||
http_response_code(404);
|
||||
$selectedCategory = null;
|
||||
}
|
||||
|
||||
?><!doctype html>
|
||||
<html lang="ru">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Фотогалерея</title>
|
||||
<link rel="stylesheet" href="style.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="app">
|
||||
<header class="topbar">
|
||||
<h1>Фотогалерея</h1>
|
||||
<p class="subtitle">Категории и превью обновляются автоматически при каждом открытии страницы</p>
|
||||
</header>
|
||||
|
||||
<?php if ($selectedCategory === null): ?>
|
||||
<section class="panel">
|
||||
<h2>Категории</h2>
|
||||
<?php if (count($categories) === 0): ?>
|
||||
<p class="empty">Пока нет папок с фото. Загрузите файлы в <code>photos/<категория>/</code> через FTP.</p>
|
||||
<?php else: ?>
|
||||
<div class="categories-grid">
|
||||
<?php foreach ($categories as $categoryName => $images): ?>
|
||||
<a class="category-card" href="?category=<?= urlencode($categoryName) ?>">
|
||||
<span class="category-title"><?= htmlspecialchars($categoryName, ENT_QUOTES | ENT_SUBSTITUTE, 'UTF-8') ?></span>
|
||||
<span class="category-count"><?= count($images) ?> фото</span>
|
||||
</a>
|
||||
<?php endforeach; ?>
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
</section>
|
||||
<?php else: ?>
|
||||
<section class="panel">
|
||||
<div class="panel-header">
|
||||
<h2><?= htmlspecialchars($selectedCategory, ENT_QUOTES | ENT_SUBSTITUTE, 'UTF-8') ?></h2>
|
||||
<a class="btn" href="./">← Все категории</a>
|
||||
</div>
|
||||
|
||||
<?php $images = $categories[$selectedCategory] ?? []; ?>
|
||||
<?php if (count($images) === 0): ?>
|
||||
<p class="empty">В этой категории пока нет изображений.</p>
|
||||
<?php else: ?>
|
||||
<div class="gallery-grid">
|
||||
<?php foreach ($images as $img): ?>
|
||||
<button
|
||||
class="thumb-card js-thumb"
|
||||
data-full="<?= htmlspecialchars($img['full_path'], ENT_QUOTES | ENT_SUBSTITUTE, 'UTF-8') ?>"
|
||||
data-title="<?= htmlspecialchars($img['filename'], ENT_QUOTES | ENT_SUBSTITUTE, 'UTF-8') ?>"
|
||||
type="button"
|
||||
>
|
||||
<img
|
||||
src="<?= htmlspecialchars($img['thumb_path'], ENT_QUOTES | ENT_SUBSTITUTE, 'UTF-8') ?>"
|
||||
alt="<?= htmlspecialchars($img['filename'], ENT_QUOTES | ENT_SUBSTITUTE, 'UTF-8') ?>"
|
||||
loading="lazy"
|
||||
>
|
||||
</button>
|
||||
<?php endforeach; ?>
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
</section>
|
||||
<?php endif; ?>
|
||||
|
||||
<footer class="footer">
|
||||
<small>Последняя индексация: <?= file_exists($lastIndexedFile) ? date('Y-m-d H:i:s', (int)trim((string)file_get_contents($lastIndexedFile))) : '—' ?></small>
|
||||
</footer>
|
||||
</div>
|
||||
|
||||
<div class="lightbox" id="lightbox" hidden>
|
||||
<div class="lightbox-backdrop js-close"></div>
|
||||
<div class="lightbox-content">
|
||||
<button class="lightbox-close js-close" type="button" aria-label="Закрыть">×</button>
|
||||
<img id="lightboxImage" src="" alt="">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="app.js" defer></script>
|
||||
</body>
|
||||
</html>
|
||||
<?php
|
||||
|
||||
function serveImage(string $photosDir): never
|
||||
{
|
||||
$category = isset($_GET['category']) ? basename((string)$_GET['category']) : '';
|
||||
$file = isset($_GET['file']) ? basename((string)$_GET['file']) : '';
|
||||
|
||||
if ($category === '' || $file === '') {
|
||||
http_response_code(404);
|
||||
exit;
|
||||
}
|
||||
|
||||
$path = $photosDir . '/' . $category . '/' . $file;
|
||||
if (!is_file($path) || !isImage($path)) {
|
||||
http_response_code(404);
|
||||
exit;
|
||||
}
|
||||
|
||||
$mime = mime_content_type($path) ?: 'application/octet-stream';
|
||||
header('Content-Type: ' . $mime);
|
||||
header('Content-Length: ' . (string)filesize($path));
|
||||
header('X-Robots-Tag: noindex, nofollow');
|
||||
header('Content-Disposition: inline; filename="image"');
|
||||
header('Cache-Control: private, max-age=60');
|
||||
|
||||
readfile($path);
|
||||
exit;
|
||||
}
|
||||
|
||||
function ensureDirectories(array $dirs): void
|
||||
{
|
||||
foreach ($dirs as $dir) {
|
||||
if (!is_dir($dir)) {
|
||||
mkdir($dir, 0775, true);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function readLastIndexedTimestamp(string $path): int
|
||||
{
|
||||
if (!file_exists($path)) {
|
||||
return 0;
|
||||
}
|
||||
|
||||
$value = trim((string) file_get_contents($path));
|
||||
return ctype_digit($value) ? (int)$value : 0;
|
||||
}
|
||||
|
||||
function scanCategories(string $photosDir): array
|
||||
{
|
||||
$result = [];
|
||||
|
||||
$entries = @scandir($photosDir) ?: [];
|
||||
foreach ($entries as $entry) {
|
||||
if ($entry === '.' || $entry === '..') {
|
||||
continue;
|
||||
}
|
||||
|
||||
$categoryPath = $photosDir . '/' . $entry;
|
||||
if (!is_dir($categoryPath)) {
|
||||
continue;
|
||||
}
|
||||
|
||||
$images = [];
|
||||
$files = @scandir($categoryPath) ?: [];
|
||||
foreach ($files as $filename) {
|
||||
if ($filename === '.' || $filename === '..') {
|
||||
continue;
|
||||
}
|
||||
|
||||
$absPath = $categoryPath . '/' . $filename;
|
||||
if (!is_file($absPath) || !isImage($absPath)) {
|
||||
continue;
|
||||
}
|
||||
|
||||
$images[] = [
|
||||
'filename' => $filename,
|
||||
'abs_path' => $absPath,
|
||||
];
|
||||
}
|
||||
|
||||
$result[$entry] = $images;
|
||||
}
|
||||
|
||||
ksort($result, SORT_NATURAL | SORT_FLAG_CASE);
|
||||
return $result;
|
||||
}
|
||||
|
||||
function isImage(string $path): bool
|
||||
{
|
||||
$ext = strtolower(pathinfo($path, PATHINFO_EXTENSION));
|
||||
return in_array($ext, ['jpg', 'jpeg', 'png', 'webp', 'gif'], true);
|
||||
}
|
||||
|
||||
function createThumbnail(string $srcPath, string $thumbPath, int $targetWidth, int $targetHeight): void
|
||||
{
|
||||
if (extension_loaded('imagick')) {
|
||||
createThumbnailWithImagick($srcPath, $thumbPath, $targetWidth, $targetHeight);
|
||||
return;
|
||||
}
|
||||
|
||||
createThumbnailWithGd($srcPath, $thumbPath, $targetWidth, $targetHeight);
|
||||
}
|
||||
|
||||
function createThumbnailWithImagick(string $srcPath, string $thumbPath, int $targetWidth, int $targetHeight): void
|
||||
{
|
||||
$imagick = new Imagick($srcPath);
|
||||
$imagick->setIteratorIndex(0);
|
||||
$imagick->setImageOrientation(Imagick::ORIENTATION_UNDEFINED);
|
||||
$imagick->thumbnailImage($targetWidth, $targetHeight, true, true);
|
||||
$imagick->setImageFormat('jpeg');
|
||||
$imagick->setImageCompressionQuality(82);
|
||||
$imagick->writeImage($thumbPath);
|
||||
$imagick->clear();
|
||||
$imagick->destroy();
|
||||
}
|
||||
|
||||
function createThumbnailWithGd(string $srcPath, string $thumbPath, int $targetWidth, int $targetHeight): void
|
||||
{
|
||||
[$srcW, $srcH, $type] = @getimagesize($srcPath) ?: [0, 0, 0];
|
||||
if ($srcW < 1 || $srcH < 1) {
|
||||
return;
|
||||
}
|
||||
|
||||
$src = match ($type) {
|
||||
IMAGETYPE_JPEG => @imagecreatefromjpeg($srcPath),
|
||||
IMAGETYPE_PNG => @imagecreatefrompng($srcPath),
|
||||
IMAGETYPE_GIF => @imagecreatefromgif($srcPath),
|
||||
IMAGETYPE_WEBP => function_exists('imagecreatefromwebp') ? @imagecreatefromwebp($srcPath) : null,
|
||||
default => null,
|
||||
};
|
||||
|
||||
if (!$src) {
|
||||
return;
|
||||
}
|
||||
|
||||
$scale = min($targetWidth / $srcW, $targetHeight / $srcH);
|
||||
$dstW = max(1, (int) floor($srcW * $scale));
|
||||
$dstH = max(1, (int) floor($srcH * $scale));
|
||||
|
||||
$dst = imagecreatetruecolor($dstW, $dstH);
|
||||
imagecopyresampled($dst, $src, 0, 0, 0, 0, $dstW, $dstH, $srcW, $srcH);
|
||||
|
||||
imagejpeg($dst, $thumbPath, 82);
|
||||
|
||||
imagedestroy($src);
|
||||
imagedestroy($dst);
|
||||
}
|
||||
0
photos/.gitkeep
Normal file
0
photos/.gitkeep
Normal file
48
scripts/deploy.sh
Executable file
48
scripts/deploy.sh
Executable file
|
|
@ -0,0 +1,48 @@
|
|||
#!/usr/bin/env bash
|
||||
set -euo pipefail
|
||||
|
||||
# Timeweb shared hosting deploy script
|
||||
# Usage:
|
||||
# bash scripts/deploy.sh
|
||||
# Optional env:
|
||||
# APP_DIR=/home/USER/www/photo-gallery
|
||||
# BRANCH=main
|
||||
|
||||
APP_DIR="${APP_DIR:-$(cd "$(dirname "$0")/.." && pwd)}"
|
||||
BRANCH="${BRANCH:-main}"
|
||||
|
||||
cd "$APP_DIR"
|
||||
|
||||
echo "[deploy] dir: $APP_DIR"
|
||||
echo "[deploy] branch: $BRANCH"
|
||||
|
||||
if [ ! -d .git ]; then
|
||||
echo "[deploy] ERROR: .git not found in $APP_DIR"
|
||||
exit 1
|
||||
fi
|
||||
|
||||
# Keep runtime dirs
|
||||
mkdir -p photos thumbs data
|
||||
|
||||
# Protect user-uploaded photos from direct HTTP access (Apache)
|
||||
if [ -f photos/.htaccess ]; then
|
||||
:
|
||||
else
|
||||
cat > photos/.htaccess <<'HTACCESS'
|
||||
Require all denied
|
||||
HTACCESS
|
||||
fi
|
||||
|
||||
# Update code
|
||||
current_branch="$(git rev-parse --abbrev-ref HEAD)"
|
||||
if [ "$current_branch" != "$BRANCH" ]; then
|
||||
git checkout "$BRANCH"
|
||||
fi
|
||||
|
||||
git fetch --all --prune
|
||||
git reset --hard "origin/$BRANCH"
|
||||
|
||||
# Make sure runtime files exist
|
||||
[ -f data/last_indexed.txt ] || echo "0" > data/last_indexed.txt
|
||||
|
||||
echo "[deploy] done"
|
||||
220
style.css
Normal file
220
style.css
Normal file
|
|
@ -0,0 +1,220 @@
|
|||
:root {
|
||||
--bg: #f4f6f8;
|
||||
--surface: #ffffff;
|
||||
--surface-soft: #f9fbfd;
|
||||
--text: #1f2937;
|
||||
--muted: #6b7280;
|
||||
--primary: #1f6feb;
|
||||
--primary-soft: #dbe9ff;
|
||||
--border: #e5e7eb;
|
||||
--shadow: 0 8px 28px rgba(15, 23, 42, 0.08);
|
||||
--radius: 14px;
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html, body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background: var(--bg);
|
||||
color: var(--text);
|
||||
font-family: Inter, Roboto, "Segoe UI", Arial, sans-serif;
|
||||
}
|
||||
|
||||
.app {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
.topbar {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.topbar h1 {
|
||||
margin: 0;
|
||||
font-size: 30px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.2px;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
margin-top: 8px;
|
||||
color: var(--muted);
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.panel {
|
||||
background: var(--surface);
|
||||
border-radius: var(--radius);
|
||||
border: 1px solid var(--border);
|
||||
box-shadow: var(--shadow);
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.panel-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin: 0;
|
||||
font-size: 22px;
|
||||
}
|
||||
|
||||
.btn {
|
||||
background: var(--primary-soft);
|
||||
color: var(--primary);
|
||||
text-decoration: none;
|
||||
border-radius: 10px;
|
||||
padding: 10px 14px;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.categories-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
|
||||
gap: 14px;
|
||||
}
|
||||
|
||||
.category-card {
|
||||
display: block;
|
||||
background: var(--surface-soft);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 12px;
|
||||
padding: 16px;
|
||||
text-decoration: none;
|
||||
color: var(--text);
|
||||
transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
|
||||
}
|
||||
|
||||
.category-card:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 10px 22px rgba(31, 111, 235, 0.12);
|
||||
border-color: #c5d8fb;
|
||||
}
|
||||
|
||||
.category-title {
|
||||
display: block;
|
||||
font-weight: 650;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.category-count {
|
||||
color: var(--muted);
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.gallery-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.thumb-card {
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 10px;
|
||||
overflow: hidden;
|
||||
background: #fff;
|
||||
padding: 0;
|
||||
cursor: pointer;
|
||||
transition: transform .15s ease, box-shadow .15s ease;
|
||||
}
|
||||
|
||||
.thumb-card:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 8px 18px rgba(2, 6, 23, 0.12);
|
||||
}
|
||||
|
||||
.thumb-card img {
|
||||
width: 100%;
|
||||
display: block;
|
||||
aspect-ratio: 3 / 2;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.empty {
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.footer {
|
||||
margin-top: 14px;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.lightbox {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 999;
|
||||
}
|
||||
|
||||
.lightbox[hidden] {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.lightbox-backdrop {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: rgba(17, 24, 39, 0.75);
|
||||
}
|
||||
|
||||
.lightbox-content {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
width: min(92vw, 1100px);
|
||||
max-height: 90vh;
|
||||
background: #0f172a;
|
||||
border-radius: 14px;
|
||||
padding: 14px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.lightbox-content img {
|
||||
width: 100%;
|
||||
max-height: 78vh;
|
||||
object-fit: contain;
|
||||
border-radius: 10px;
|
||||
background: #020617;
|
||||
}
|
||||
|
||||
.lightbox-link {
|
||||
align-self: flex-end;
|
||||
color: #dbeafe;
|
||||
text-decoration: none;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.lightbox-close {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: 10px;
|
||||
width: 34px;
|
||||
height: 34px;
|
||||
border: 0;
|
||||
border-radius: 50%;
|
||||
background: rgba(255,255,255,0.22);
|
||||
color: #fff;
|
||||
font-size: 22px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
@media (max-width: 720px) {
|
||||
.app {
|
||||
padding: 14px;
|
||||
}
|
||||
|
||||
.topbar h1 {
|
||||
font-size: 24px;
|
||||
}
|
||||
}
|
||||
0
thumbs/.gitkeep
Normal file
0
thumbs/.gitkeep
Normal file
Loading…
Reference in New Issue
Block a user