From bbd8144c702e54e6ed83cf344f2ff222c9596bde Mon Sep 17 00:00:00 2001
From: erjemin <erjemin@gmail.com>
Date: Sun, 16 Aug 2026 21:09:43 +0300
Subject: [PATCH] =?UTF-8?q?mod:=20=D0=B8=D0=BD=D1=82=D0=B5=D1=80=D1=84?=
 =?UTF-8?q?=D0=B5=D0=B9=D1=81=20(8)=20=D1=82=D1=80=D0=B5=D1=85=D1=8D=D1=82?=
 =?UTF-8?q?=D0=B0=D0=B6=D0=BD=D0=B0=D1=8F=20=D0=B3=D0=B0=D0=BB=D0=B5=D1=80?=
 =?UTF-8?q?=D0=B5=D1=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 hypn0/templates/index.html | 125 +++++++++++++++++++++++++++++++------
 1 file changed, 105 insertions(+), 20 deletions(-)

diff --git a/hypn0/templates/index.html b/hypn0/templates/index.html
index 14f149e..20554d3 100644
--- a/hypn0/templates/index.html
+++ b/hypn0/templates/index.html
@@ -338,30 +338,115 @@
     </section>
   </div>
 
-  <!-- СЕКЦИЯ: ГАЛЕРЕЯ -->
-  <section class="mt-20">
-    <div class="flex items-center justify-between mb-8">
-      <h2 class="text-3xl font-black uppercase tracking-tighter">Галерея транса</h2>
-      <a href="#" class="text-emerald-600 font-bold hover:underline">Смотреть всё →</a>
+  <!-- СЕКЦИЯ: ТРЕХЭТАЖНАЯ ГАЛЕРЕЯ -->
+  <section class="mt-20 space-y-12">
+    <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-4 pb-6 border-b border-stone-200 dark:border-zinc-800">
+      <div>
+        <h2 class="text-3xl font-black uppercase tracking-tighter">Галерея транса</h2>
+        <p class="text-sm text-stone-500 dark:text-zinc-400 mt-1">Многоуровневое хранилище зрительного подчинения</p>
+      </div>
+      <a href="#" class="text-emerald-600 dark:text-emerald-400 font-bold hover:underline self-start sm:self-auto">Смотреть весь архив →</a>
     </div>
 
-    <div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-4">
-      <template x-for="i in 6">
-        <div
-          class="aspect-square bg-stone-200 dark:bg-zinc-900 rounded-xl border border-stone-300 dark:border-zinc-800 overflow-hidden relative group cursor-pointer">
-          <div
-            class="absolute inset-0 flex items-center justify-center text-stone-400 group-hover:scale-110 transition-transform">
-            <svg class="w-8 h-8 opacity-20" fill="currentColor" viewBox="0 0 24 24">
-              <path
-                d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"/>
-            </svg>
-          </div>
-          <div
-            class="absolute bottom-2 left-2 flex items-center gap-1 text-[10px] font-bold text-emerald-600 bg-white/80 dark:bg-zinc-900/80 px-2 py-0.5 rounded-full opacity-0 group-hover:opacity-100 transition-opacity">
-            ♥ <span x-text="Math.floor(Math.random()*100)"></span>
+<!-- 1-й ЭТАЖ: ПЛЕСК БЕССОЗНАТЕЛЬНОГО (Свежий поток)... Сюда попадет только что созданный шедевр (нужно чтобы это было интерактивно... лаккнул и сразу через HTMX на первом уровне галереи  -->
+    <div class="space-y-4">
+      <div class="flex items-center justify-between">
+        <div class="flex items-center gap-3">
+          <div class="w-5 h-5 rounded-full bg-amber-500"></div>
+          <div>
+            <h3 class="text-xl font-black uppercase tracking-tight flex items-center gap-2">
+              Плеск бессознательного
+              <span class="text-xs font-bold font-mono px-2 py-0.5 rounded-full bg-amber-100 dark:bg-amber-950/70 text-amber-700 dark:text-amber-400 border border-amber-300 dark:border-amber-800/50">FRESH STREAM</span>
+            </h3>
+            <p class="text-xs text-stone-400 dark:text-zinc-500">Свежие галлюцинации из инкубатора • Первичная оценка сообщества</p>
           </div>
         </div>
-      </template>
+        <span class="text-xs font-semibold text-stone-400">Свежее • до 100 лайков</span>
+      </div>
+
+      <div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-4">
+        <template x-for="i in 6">
+          <div class="aspect-square bg-stone-200 dark:bg-zinc-900 rounded-xl border border-stone-300 dark:border-zinc-800 overflow-hidden relative group cursor-pointer hover:border-amber-500/50 transition-all hover:scale-[1.02]">
+            <div class="absolute inset-0 flex items-center justify-center text-stone-400 group-hover:scale-110 transition-transform">
+              <svg class="w-8 h-8 opacity-20" fill="currentColor" viewBox="0 0 24 24">
+                <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"/>
+              </svg>
+            </div>
+            <div class="absolute bottom-2 left-2 flex items-center gap-1 text-[11px] font-bold text-amber-600 dark:text-amber-400 bg-white/90 dark:bg-zinc-900/90 px-2 py-0.5 rounded-full opacity-0 group-hover:opacity-100 transition-opacity">
+              ♥ <span x-text="Math.floor(Math.random()*99) + 1"></span>
+            </div>
+          </div>
+        </template>
+      </div>
     </div>
+
+    <!-- 2-й ЭТАЖ: ОДОБРЕНО МОЗГОВЫМ СЛИЗНЕМ (Кураторский отбор) -->
+    <div class="space-y-4">
+      <div class="flex items-center justify-between">
+        <div class="flex items-center gap-3">
+          <div class="w-5 h-5 rounded-full bg-cyan-500"></div>
+          <div>
+            <h3 class="text-xl font-black uppercase tracking-tight flex items-center gap-2">
+              Одобрено Мозговым Слизнем
+              <span class="text-xs font-bold font-mono px-2 py-0.5 rounded-full bg-cyan-100 dark:bg-cyan-950/70 text-cyan-700 dark:text-cyan-400 border border-cyan-300 dark:border-cyan-800/50">CURATED</span>
+            </h3>
+            <p class="text-xs text-stone-400 dark:text-zinc-500">Проверено контролем качества • Высокий психоделический резонанс</p>
+          </div>
+        </div>
+        <span class="text-xs font-semibold text-stone-400">100–999 лайков</span>
+      </div>
+
+      <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-4">
+        <template x-for="i in 6">
+          <div class="aspect-square bg-stone-200 dark:bg-zinc-900 rounded-xl border border-stone-300 dark:border-zinc-800 overflow-hidden relative group cursor-pointer hover:border-cyan-500/50 transition-all hover:scale-[1.02]">
+            <div class="absolute inset-0 flex items-center justify-center text-stone-400 group-hover:scale-110 transition-transform">
+              <svg class="w-8 h-8 opacity-20" fill="currentColor" viewBox="0 0 24 24">
+                <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"/>
+              </svg>
+            </div>
+            <div class="absolute bottom-2 left-2 flex items-center gap-1 text-[11px] font-bold text-cyan-600 dark:text-cyan-400 bg-white/90 dark:bg-zinc-900/90 px-2 py-0.5 rounded-full opacity-0 group-hover:opacity-100 transition-opacity">
+              ♥ <span x-text="100 + Math.floor(Math.random()*400)"></span>
+            </div>
+          </div>
+        </template>
+      </div>
+    </div>
+
+    <!-- 3-й ЭТАЖ: ГЛУБОКИЙ ТРАНС (Высшая лига) -->
+    <div class="space-y-4">
+      <div class="flex items-center justify-between">
+        <div class="flex items-center gap-3">
+          <div class="w-5 h-5"><img src="{% static 'img/favicon.svg' %}" alt="Favicon" class="w-full h-full object-cover"></div>
+          <div>
+            <h3 class="text-xl font-black uppercase tracking-tight flex items-center gap-2">
+              Глубокий транс
+              <span class="text-xs font-bold font-mono px-2 py-0.5 rounded-full bg-emerald-100 dark:bg-emerald-950/70 text-emerald-700 dark:text-emerald-400 border border-emerald-300 dark:border-emerald-800/50">TOP TIER</span>
+            </h3>
+            <p class="text-xs text-stone-400 dark:text-zinc-500">Золотой фонд гипноза • Абсолютное подчинение воли</p>
+          </div>
+        </div>
+        <span class="text-xs font-semibold text-stone-400">1000+ лайков</span>
+      </div>
+
+      <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-4">
+        <template x-for="i in 6">
+          <div class="aspect-square bg-stone-200 dark:bg-zinc-900 rounded-2xl border-2 border-emerald-500/30 dark:border-emerald-500/20 overflow-hidden relative group cursor-pointer shadow-lg shadow-emerald-950/5 hover:border-emerald-500 transition-all hover:scale-[1.02]">
+            <div class="absolute inset-0 flex items-center justify-center text-emerald-600/40 group-hover:scale-110 transition-transform">
+              <svg class="w-10 h-10 opacity-30" fill="currentColor" viewBox="0 0 24 24">
+                <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"/>
+              </svg>
+            </div>
+            <div class="absolute top-2 right-2 text-[10px] font-black tracking-widest text-emerald-600 dark:text-emerald-400 bg-emerald-500/10 backdrop-blur-md px-1.5 py-0.5 rounded border border-emerald-500/20">
+              ★ 99%
+            </div>
+            <div class="absolute bottom-2.5 left-2.5 flex items-center gap-1.5 text-xs font-bold text-white bg-emerald-600/90 backdrop-blur-md px-2.5 py-1 rounded-full shadow">
+              <span>♥</span> <span x-text="500 + Math.floor(Math.random()*500)"></span>
+            </div>
+          </div>
+        </template>
+      </div>
+    </div>
+
+
   </section>
 {% endblock CONTENT %}
\ No newline at end of file