add: галерея (4) первый этаж (плеск бессознательного) улучшен 3

hypn0/templates/gallery/detail.html

@@ -76,7 +76,8 @@
     </div>
 
     <!-- Полноэкранный просмотр SVG с живой анимацией и плавающими стрелками -->
-    <div class="relative w-full aspect-square max-h-[640px] flex items-center justify-center bg-stone-950 rounded-2xl overflow-hidden shadow-inner border border-stone-800/60 group select-none">
+    <div style="{{ item.card_bg_style }}" 
+         class="relative w-full aspect-square max-h-[640px] flex items-center justify-center rounded-2xl overflow-hidden shadow-inner border border-stone-300/80 dark:border-zinc-800/80 group select-none bg-[var(--card-bg-light)] dark:bg-[var(--card-bg-dark)]">
       
       <!-- Плавающая кнопка: Назад -->
       <a href="{{ prev_url }}"

hypn0/templates/gallery/floor.html

@@ -0,0 +1,113 @@
+{% extends '_base.html' %}
+{% load static %}
+
+{% block TITLE %}{{ floor_title }} — Галерея транса HypnoSVG{% endblock %}
+
+{% block CONTENT %}
+<div class="max-w-6xl mx-auto space-y-8">
+
+  <!-- Хлебные крошки и навигация -->
+  <div class="flex flex-wrap items-center justify-between gap-4">
+    <a href="{% url 'hypn0_site:index' %}"
+       class="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">
+      <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"/>
+      </svg>
+      <span>К генератору и витрине</span>
+    </a>
+
+    <span class="text-xs font-mono text-stone-500 dark:text-stone-400">
+      Фаза {{ page_obj.number }} из {{ page_obj.paginator.num_pages }} (Всего: {{ page_obj.paginator.count }})
+    </span>
+  </div>
+
+  <!-- Шапка раздела этажа -->
+  <div class="border-b border-stone-200 dark:border-zinc-800 pb-6 space-y-2">
+    <div class="flex flex-wrap items-center gap-3">
+      <h1 class="text-3xl font-black uppercase tracking-tight text-stone-900 dark:text-stone-100">
+        {{ floor_title }}
+      </h1>
+      <span class="text-xs font-bold font-mono px-2.5 py-1 rounded-full bg-{{ floor_badge_color }}-100 dark:bg-{{ floor_badge_color }}-950/70 text-{{ floor_badge_color }}-700 dark:text-{{ floor_badge_color }}-400 border border-{{ floor_badge_color }}-300 dark:border-{{ floor_badge_color }}-800/50">
+        {{ floor_badge }}
+      </span>
+    </div>
+    <p class="text-sm text-stone-500 dark:text-stone-400">
+      {{ floor_subtitle }}
+    </p>
+  </div>
+
+  <!-- Сетка картин (8 штук на страницу) -->
+  <div class="grid grid-cols-2 sm:grid-cols-2 md:grid-cols-4 gap-4 sm:gap-6">
+    {% for item in page_obj %}
+      {% include "block/gallery_card.html" %}
+    {% empty %}
+      <div class="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">
+        <svg class="w-12 h-12 mx-auto opacity-30 animate-pulse" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"/>
+        </svg>
+        <p class="font-medium text-sm">В этой зоне психо-матрицы пока нет зафиксированных картин.</p>
+      </div>
+    {% endfor %}
+  </div>
+
+  <!-- Пагинация (Предыдущая фаза / Следующая фаза) -->
+  {% if page_obj.has_other_pages %}
+    <div class="flex items-center justify-between pt-6 border-t border-stone-200 dark:border-zinc-800">
+      <div>
+        {% if page_obj.has_previous %}
+          <a href="?page={{ page_obj.previous_page_number }}"
+             class="inline-flex items-center gap-2 px-4 py-2.5 rounded-xl text-xs font-bold bg-stone-100 hover:bg-stone-200 dark:bg-zinc-800 dark:hover:bg-zinc-700 text-stone-700 dark:text-stone-300 transition-all hover:scale-105 active:scale-95 shadow-sm border border-stone-200 dark:border-zinc-700/60 cursor-pointer">
+            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/>
+            </svg>
+            <span>Предыдущая фаза</span>
+          </a>
+        {% else %}
+          <span class="inline-flex items-center gap-2 px-4 py-2.5 rounded-xl text-xs font-bold 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">
+            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/>
+            </svg>
+            <span>Предыдущая фаза</span>
+          </span>
+        {% endif %}
+      </div>
+
+      <!-- Номера страниц -->
+      <div class="hidden sm:flex items-center gap-1.5 font-mono text-xs">
+        {% for p in page_obj.paginator.page_range %}
+          {% if p == page_obj.number %}
+            <span class="w-8 h-8 rounded-lg bg-purple-600 text-white font-bold flex items-center justify-center shadow-md">
+              {{ p }}
+            </span>
+          {% else %}
+            <a href="?page={{ p }}"
+               class="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">
+              {{ p }}
+            </a>
+          {% endif %}
+        {% endfor %}
+      </div>
+
+      <div>
+        {% if page_obj.has_next %}
+          <a href="?page={{ page_obj.next_page_number }}"
+             class="inline-flex items-center gap-2 px-4 py-2.5 rounded-xl text-xs font-bold bg-purple-600 hover:bg-purple-700 text-white transition-all hover:scale-105 active:scale-95 shadow-md border-0 cursor-pointer">
+            <span>Следующая фаза</span>
+            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
+            </svg>
+          </a>
+        {% else %}
+          <span class="inline-flex items-center gap-2 px-4 py-2.5 rounded-xl text-xs font-bold 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">
+            <span>Следующая фаза</span>
+            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
+            </svg>
+          </span>
+        {% endif %}
+      </div>
+    </div>
+  {% endif %}
+
+</div>
+{% endblock CONTENT %}