From ebf78c2c48fe5fb86651715891b06120892b386b Mon Sep 17 00:00:00 2001 From: erjemin Date: Sat, 26 Sep 2026 16:29:15 +0300 Subject: [PATCH] =?UTF-8?q?mod:=20=D0=BE=D0=BF=D1=82=D0=B8=D0=BC=D0=B8?= =?UTF-8?q?=D0=B7=D0=B0=D1=86=D0=B8=D1=8F=20CSS=20=D0=B8=20=D1=81=D0=BF?= =?UTF-8?q?=D1=80=D1=8F=D1=82=D0=B0=D0=BD=D0=B0=20=D1=87=D0=B0=D1=81=D1=82?= =?UTF-8?q?=D1=8C=20tailwind=20"=D0=BA=D0=BB=D0=B0=D1=81=D1=81-=D0=BA?= =?UTF-8?q?=D0=BE=D0=BB=D0=B1=D0=B0=D1=81"?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- hypn0/hypn0_site/models.py | 24 +++ hypn0/hypn0_site/tests.py | 14 ++ hypn0/templates/block/gallery_card.html | 84 +++------- hypn0/templates/css/tailwind-custom.css | 203 ++++++++++++++++++++++++ hypn0/templates/gallery/archive.html | 57 ++++--- hypn0/templates/gallery/detail.html | 14 +- public/static/css/tailwind.min.css | 2 +- 7 files changed, 300 insertions(+), 98 deletions(-) diff --git a/hypn0/hypn0_site/models.py b/hypn0/hypn0_site/models.py index b795caa..8827cfa 100644 --- a/hypn0/hypn0_site/models.py +++ b/hypn0/hypn0_site/models.py @@ -1,4 +1,6 @@ import hashlib +from html import unescape +import re from django.core.exceptions import ValidationError from django.db import models, transaction, IntegrityError from django.db.models import F @@ -159,6 +161,17 @@ class TbHypn0Item(models.Model): def __str__(self) -> str: return f"{self.s_title} ({self.s_hash_id})" + @property + def s_title_plain(self) -> str: + """ + Возвращает чистый заголовок картины без HTML-тегов и с декодированными мнемониками (  и др.) + для безопасного использования в HTML-атрибутах (title, aria-label, alt, meta). + """ + if not self.s_title: + return "" + text = re.sub(r"<[^>]+>", "", self.s_title) + return unescape(text).replace("\xa0", " ").strip() + def get_absolute_url(self) -> str: """Возвращает канонический URL детальной страницы картины.""" return reverse("hypn0_site:gallery_detail", kwargs={"hash_id": self.s_hash_id}) @@ -564,6 +577,17 @@ class TbBlogPost(models.Model): def __str__(self) -> str: return self.s_title + @property + def s_title_plain(self) -> str: + """ + Возвращает чистый заголовок статьи без HTML-тегов и с декодированными мнемониками + для безопасного использования в мета-тегах и атрибутах. + """ + if not self.s_title: + return "" + text = re.sub(r"<[^>]+>", "", self.s_title) + return unescape(text).replace("\xa0", " ").strip() + def get_absolute_url(self) -> str: """Возвращает канонический URL статьи блога.""" return f"/blog/{self.slug}" if self.slug else f"/blog/{self.pk}" diff --git a/hypn0/hypn0_site/tests.py b/hypn0/hypn0_site/tests.py index 4004190..eeb5a5f 100644 --- a/hypn0/hypn0_site/tests.py +++ b/hypn0/hypn0_site/tests.py @@ -1505,3 +1505,17 @@ class BlogPostModelAndAdminTests(BaseMediaTestCase): resp500 = error_500(req500) self.assertEqual(resp500.status_code, 500) self.assertIn("Критический перегрев неокортекса", resp500.content.decode("utf-8")) + + def test_s_title_plain_property(self): + """Проверка очистки HTML-тегов и мнемоник в s_title_plain для моделей TbHypn0Item и TbBlogPost.""" + item = TbHypn0Item( + s_title="Шедевр ноосферы «Альфа»", + s_hash_id="testPlain", + ) + self.assertEqual(item.s_title_plain, "Шедевр ноосферы «Альфа»") + + post = TbBlogPost( + s_title="Записки Гипножабы: Раздел&Смысл", + slug="test-plain", + ) + self.assertEqual(post.s_title_plain, "Записки Гипножабы: Раздел&Смысл") diff --git a/hypn0/templates/block/gallery_card.html b/hypn0/templates/block/gallery_card.html index ec58bd3..15d0056 100644 --- a/hypn0/templates/block/gallery_card.html +++ b/hypn0/templates/block/gallery_card.html @@ -1,61 +1,25 @@ -{% load static %} -
- - - -
-
\ No newline at end of file diff --git a/hypn0/templates/css/tailwind-custom.css b/hypn0/templates/css/tailwind-custom.css index e4fadbf..b87c2f5 100644 --- a/hypn0/templates/css/tailwind-custom.css +++ b/hypn0/templates/css/tailwind-custom.css @@ -89,6 +89,209 @@ } } +/* ========================================================================== + КОМПОНЕНТЫ КАРТОЧКИ ГАЛЕРЕИ (HYPNO GALLERY CARD) + ========================================================================== */ + +@layer components { + /* Карточка картины */ + .card { + @apply aspect-square rounded-2xl border border-stone-300/80 dark:border-zinc-800/80 + overflow-hidden relative transition-all duration-300 + hover:scale-[1.03] hover:shadow-2xl hover:border-amber-500/60 dark:hover:border-amber-500/50 + flex items-center justify-center select-none shadow-sm + bg-[var(--card-bg-light)] dark:bg-[var(--card-bg-dark)]; + } + + /* Ссылка и оверлей */ + .card-link { + @apply absolute inset-0 z-10 flex items-center justify-center p-3 sm:p-4 + border-0 border-none no-underline hover:border-0 hover:border-none focus:outline-none; + } + + /* Контейнер SVG */ + .card-svg { + @apply w-full h-full flex items-center justify-center drop-shadow-sm + transition-transform duration-300 group-hover:scale-105 border-0; + } + + /* Верхний бейдж хэша и уровня */ + .card-tag { + @apply text-[10px] font-mono font-bold tracking-tight px-1.5 py-0.5 rounded + backdrop-blur-md transition-opacity; + } + .card-tag-immortal { + @apply bg-emerald-950/80 text-emerald-300 border border-emerald-500/30 opacity-80 group-hover:opacity-100; + } + .card-tag-curated { + @apply bg-cyan-950/80 text-cyan-300 border border-cyan-500/30 opacity-80 group-hover:opacity-100; + } + .card-tag-fresh { + @apply bg-stone-900/70 text-stone-200 border border-white/10 opacity-75 group-hover:opacity-100; + } + + /* Нижний бейдж статистики */ + .card-stat { + @apply inline-flex items-center gap-1 font-mono px-2 py-0.5 rounded-full + backdrop-blur-md shadow-sm transition-opacity; + } + .card-stat-immortal { + @apply text-[11px] font-bold bg-stone-900/80 text-emerald-400 border border-emerald-500/20 opacity-90 group-hover:opacity-100; + } + .card-stat-curated { + @apply text-[11px] font-bold bg-stone-900/80 text-cyan-400 border border-cyan-500/20 opacity-90 group-hover:opacity-100; + } + .card-stat-fresh { + @apply text-[11px] font-bold bg-stone-900/80 text-amber-400 border border-amber-500/20 opacity-90 group-hover:opacity-100; + } + .card-stat-views { + @apply text-[10px] bg-stone-900/80 text-stone-400 px-1.5 py-0.5 opacity-0 group-hover:opacity-100; + } + + /* Панели карточки */ + .card-top { + @apply absolute top-2 left-2 z-20 pointer-events-none flex items-center gap-1; + } + .card-bottom { + @apply absolute bottom-2 left-2 right-2 z-20 flex items-center justify-between pointer-events-none; + } + + /* Заглушка noscript внутри карточки */ + .card-noscript { + @apply flex flex-col items-center justify-center p-3 text-center gap-1; + } + .card-noscript-warn { + @apply text-[11px] font-bold text-amber-600 dark:text-amber-400; + } + .card-noscript-title { + @apply text-[10px] text-stone-500 dark:text-stone-400 underline; + } +} + +/* ========================================================================== + КОМПОНЕНТЫ СТРАНИЦЫ АРХИВА ГАЛЕРЕИ (GALLERY ARCHIVE) + ========================================================================== */ + +@layer components { + /* Навигация и заголовок архива */ + .archive-back { + @apply inline-flex items-center gap-2 text-xs font-bold uppercase tracking-wider + text-stone-500 hover:text-stone-900 dark:text-stone-400 dark:hover:text-stone-100 + transition-colors border-0 no-underline; + } + .archive-phase { + @apply text-xs font-mono text-stone-500 dark:text-stone-400; + } + .archive-header { + @apply border-b border-stone-200 dark:border-zinc-800 pb-6 space-y-2; + } + .archive-title { + @apply text-3xl font-black uppercase tracking-tight text-stone-900 dark:text-stone-100; + } + .archive-badge { + @apply text-xs font-bold font-mono px-2.5 py-1 rounded-full + bg-purple-100 dark:bg-purple-950/70 text-purple-700 dark:text-purple-400 + border border-purple-300 dark:border-purple-800/50; + } + .archive-desc { + @apply text-sm text-stone-500 dark:text-stone-400; + } + + /* Панель фильтров архива */ + .archive-filter-bar { + @apply flex flex-col md:flex-row md:items-center justify-between gap-4 + bg-stone-100/70 dark:bg-zinc-900/70 p-3 rounded-2xl + border border-stone-200 dark:border-zinc-800 backdrop-blur-sm; + } + .archive-tab { + @apply inline-flex items-center gap-1.5 px-3 py-1.5 rounded-xl text-xs font-bold + transition-all border-0 no-underline; + } + .archive-tab-all-active { + @apply bg-purple-600 text-white shadow-sm; + } + .archive-tab-all-idle { + @apply text-stone-600 dark:text-stone-300 hover:bg-stone-200/70 dark:hover:bg-zinc-800; + } + .archive-tab-fresh-active { + @apply bg-amber-500 text-white shadow-sm; + } + .archive-tab-fresh-idle { + @apply text-stone-600 dark:text-stone-300 hover:bg-amber-100/60 dark:hover:bg-amber-950/40; + } + .archive-tab-curated-active { + @apply bg-cyan-600 text-white shadow-sm; + } + .archive-tab-curated-idle { + @apply text-stone-600 dark:text-stone-300 hover:bg-cyan-100/60 dark:hover:bg-cyan-950/40; + } + .archive-tab-top-active { + @apply bg-emerald-600 text-white shadow-sm; + } + .archive-tab-top-idle { + @apply text-stone-600 dark:text-stone-300 hover:bg-emerald-100/60 dark:hover:bg-emerald-950/40; + } + + /* Сортировка */ + .archive-sort-wrap { + @apply flex items-center gap-2 self-end md:self-auto; + } + .archive-sort-label { + @apply text-xs font-bold text-stone-500 dark:text-stone-400 shrink-0; + } + .archive-sort-select { + @apply text-xs font-medium bg-white dark:bg-zinc-800 text-stone-800 dark:text-stone-200 + border border-stone-300 dark:border-zinc-700 rounded-xl px-3 py-1.5 + focus:outline-none focus:ring-2 focus:ring-purple-500/50 cursor-pointer shadow-sm; + } + + /* Сетка и пустое состояние */ + .gallery-grid { + @apply grid grid-cols-2 sm:grid-cols-2 md:grid-cols-4 gap-4 sm:gap-6; + } + .archive-empty { + @apply col-span-full py-16 text-center text-stone-400 space-y-3 + bg-stone-100/50 dark:bg-zinc-900/50 rounded-2xl border border-stone-200 dark:border-zinc-800; + } + .archive-empty-icon { + @apply w-12 h-12 mx-auto opacity-30 animate-pulse; + } + .archive-empty-text { + @apply font-medium text-sm; + } + + /* Пагинация */ + .paginator { + @apply flex items-center justify-between pt-6 border-t border-stone-200 dark:border-zinc-800; + } + .paginator-btn { + @apply inline-flex items-center gap-2 px-4 py-2.5 rounded-xl text-xs font-bold + transition-all border-0 no-underline; + } + .paginator-btn-prev { + @apply bg-stone-100 hover:bg-stone-200 dark:bg-zinc-800 dark:hover:bg-zinc-700 + text-stone-700 dark:text-stone-300 hover:scale-105 active:scale-95 shadow-sm + border border-stone-200 dark:border-zinc-700/60 cursor-pointer; + } + .paginator-btn-next { + @apply bg-purple-600 hover:bg-purple-700 text-white hover:scale-105 active:scale-95 shadow-md cursor-pointer; + } + .paginator-btn-disabled { + @apply text-stone-400 dark:text-stone-600 bg-stone-100/50 dark:bg-zinc-900/50 + border border-stone-200/50 dark:border-zinc-800/50 opacity-50 cursor-not-allowed; + } + .paginator-pages { + @apply hidden sm:flex items-center gap-1.5 font-mono text-xs; + } + .paginator-page-active { + @apply w-8 h-8 rounded-lg bg-purple-600 text-white font-bold flex items-center justify-center shadow-md; + } + .paginator-page-link { + @apply w-8 h-8 rounded-lg bg-stone-100 hover:bg-stone-200 dark:bg-zinc-800 dark:hover:bg-zinc-700 + text-stone-700 dark:text-stone-300 flex items-center justify-center transition-colors border-0 no-underline; + } +} + /* ========================================================================== ТИПОГРАФИКА И СТИЛИ ДЛЯ СТАТЕЙ БЛОГА (CodeMirror / Rich HTML Content) ========================================================================== */ diff --git a/hypn0/templates/gallery/archive.html b/hypn0/templates/gallery/archive.html index c24763a..b276360 100644 --- a/hypn0/templates/gallery/archive.html +++ b/hypn0/templates/gallery/archive.html @@ -27,49 +27,48 @@
- + К генератору - + Фаза {{ page_obj.number }} из {{ page_obj.paginator.num_pages }} (Всего: {{ page_obj.paginator.count }})
-
+
-

+

Галерея транса

- + ARCHIVE
-

+

Полный архив психоделических генераций • Сортировка по гравитации, признанию и свежести

-
+
+ class="archive-tab {% if current_floor == 'all' %}archive-tab-all-active{% else %}archive-tab-all-idle{% endif %}"> Все волны ({{ counts.all }}) + class="archive-tab {% if current_floor == 'fresh' %}archive-tab-fresh-active{% else %}archive-tab-fresh-idle{% endif %}"> Инкубатор ({{ counts.fresh }}) @@ -77,7 +76,7 @@ + class="archive-tab {% if current_floor == 'curated' %}archive-tab-curated-active{% else %}archive-tab-curated-idle{% endif %}"> Одобрено ({{ counts.curated }}) @@ -85,7 +84,7 @@ + class="archive-tab {% if current_floor == 'top' %}archive-tab-top-active{% else %}archive-tab-top-idle{% endif %}"> Золотой фонд ({{ counts.top }}) @@ -93,13 +92,13 @@
-
-