From 0bb5b4dcf93c1d6cd4f741488851d47054203106 Mon Sep 17 00:00:00 2001
From: Alex Assistant <alex-assistant@local>
Date: Thu, 19 Feb 2026 17:35:27 +0300
Subject: [PATCH] Show category cover thumbnails on public gallery

---
 index.php |  9 +++++++++
 style.css | 12 +++++++++++-
 2 files changed, 20 insertions(+), 1 deletion(-)

diff --git a/index.php b/index.php
index dfd27ed..658fcdd 100644
--- a/index.php
+++ b/index.php
@@ -99,7 +99,16 @@ if ($selectedCategory !== null && $selectedCategory !== '' && !isset($categories
             <?php else: ?>
                 <div class="categories-grid">
                     <?php foreach ($categories as $categoryName => $images): ?>
+                        <?php $cover = $images[0]['thumb_path'] ?? null; ?>
                         <a class="category-card" href="?category=<?= urlencode($categoryName) ?>">
+                            <?php if ($cover): ?>
+                                <img
+                                    class="category-cover"
+                                    src="<?= htmlspecialchars($cover, ENT_QUOTES | ENT_SUBSTITUTE, 'UTF-8') ?>"
+                                    alt="<?= htmlspecialchars($categoryName, ENT_QUOTES | ENT_SUBSTITUTE, 'UTF-8') ?>"
+                                    loading="lazy"
+                                >
+                            <?php endif; ?>
                             <span class="category-title"><?= htmlspecialchars($categoryName, ENT_QUOTES | ENT_SUBSTITUTE, 'UTF-8') ?></span>
                             <span class="category-count"><?= count($images) ?> фото</span>
                         </a>
diff --git a/style.css b/style.css
index 0b33355..d9859cb 100644
--- a/style.css
+++ b/style.css
@@ -88,12 +88,22 @@ h2 {
     background: var(--surface-soft);
     border: 1px solid var(--border);
     border-radius: 12px;
-    padding: 16px;
+    padding: 12px;
     text-decoration: none;
     color: var(--text);
     transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
 }
 
+.category-cover {
+    width: 100%;
+    aspect-ratio: 16 / 9;
+    object-fit: cover;
+    border-radius: 10px;
+    border: 1px solid var(--border);
+    display: block;
+    margin-bottom: 10px;
+}
+
 .category-card:hover {
     transform: translateY(-2px);
     box-shadow: 0 10px 22px rgba(31, 111, 235, 0.12);