erjemin/2026-hypn0-site
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

mod: интерфейс (6) выбранная глюко-фигура окрашивается.

Browse Source
This commit is contained in:
erjemin
2026-08-16 17:45:11 +03:00
parent c791df7b0d
commit c0cb0a2af9
1 changed files with 24 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files
hypn0/templates/index.html
+24 -24
View File
@@ -49,24 +49,24 @@
<!-- 1. Круг -->
<label class="cursor-pointer group" title="Круг">
<input type="radio" name="shape" value="circle" class="hidden peer" checked>
<div class="aspect-square flex flex-col items-center justify-center p-2 border-2 border-stone-100 dark:border-zinc-800 rounded-xl peer-checked:border-emerald-500 peer-checked:bg-emerald-50/10 transition-all hover:border-stone-300 dark:hover:border-zinc-700">
<div class="w-6 h-6 rounded-full bg-stone-400 group-hover:bg-emerald-500 peer-checked:bg-emerald-500 transition-colors"></div>
<div class="aspect-square flex flex-col items-center justify-center p-2 border-2 border-stone-100 dark:border-zinc-800 rounded-xl text-stone-400 group-hover:text-emerald-500 peer-checked:text-emerald-500 peer-checked:border-emerald-500 peer-checked:bg-emerald-50/10 transition-all hover:border-stone-300 dark:hover:border-zinc-700">
<div class="w-6 h-6 rounded-full bg-current transition-colors"></div>
</div>
</label>
<!-- 2. Кольцо (Бублик) -->
<label class="cursor-pointer group" title="Кольцо">
<input type="radio" name="shape" value="ring" class="hidden peer">
<div class="aspect-square flex flex-col items-center justify-center p-2 border-2 border-stone-100 dark:border-zinc-800 rounded-xl peer-checked:border-emerald-500 peer-checked:bg-emerald-50/10 transition-all hover:border-stone-300 dark:hover:border-zinc-700">
<div class="w-6 h-6 rounded-full border-[6px] border-stone-400 group-hover:border-emerald-500 peer-checked:border-emerald-500 transition-colors"></div>
<div class="aspect-square flex flex-col items-center justify-center p-2 border-2 border-stone-100 dark:border-zinc-800 rounded-xl text-stone-400 group-hover:text-emerald-500 peer-checked:text-emerald-500 peer-checked:border-emerald-500 peer-checked:bg-emerald-50/10 transition-all hover:border-stone-300 dark:hover:border-zinc-700">
<div class="w-6 h-6 rounded-full border-[6px] border-current transition-colors"></div>
</div>
</label>
<!-- 3. Треугольник -->
<label class="cursor-pointer group" title="Треугольник">
<input type="radio" name="shape" value="triangle" class="hidden peer">
<div class="aspect-square flex flex-col items-center justify-center p-2 border-2 border-stone-100 dark:border-zinc-800 rounded-xl peer-checked:border-emerald-500 peer-checked:bg-emerald-50/10 transition-all hover:border-stone-300 dark:hover:border-zinc-700">
<svg class="w-6 h-6 fill-stone-400 group-hover:fill-emerald-500 peer-checked:fill-emerald-500 transition-colors" viewBox="0 0 24 24">
<div class="aspect-square flex flex-col items-center justify-center p-2 border-2 border-stone-100 dark:border-zinc-800 rounded-xl text-stone-400 group-hover:text-emerald-500 peer-checked:text-emerald-500 peer-checked:border-emerald-500 peer-checked:bg-emerald-50/10 transition-all hover:border-stone-300 dark:hover:border-zinc-700">
<svg class="w-6 h-6 fill-current transition-colors" viewBox="0 0 24 24">
<path d="M12 4L2 20h20L12 4z"/>
</svg>
</div>
@@ -75,24 +75,24 @@
<!-- 4. Квадрат -->
<label class="cursor-pointer group" title="Квадрат">
<input type="radio" name="shape" value="square" class="hidden peer">
<div class="aspect-square flex flex-col items-center justify-center p-2 border-2 border-stone-100 dark:border-zinc-800 rounded-xl peer-checked:border-emerald-500 peer-checked:bg-emerald-50/10 transition-all hover:border-stone-300 dark:hover:border-zinc-700">
<div class="w-5 h-5 rounded-xs bg-stone-400 group-hover:bg-emerald-500 peer-checked:bg-emerald-500 transition-colors"></div>
<div class="aspect-square flex flex-col items-center justify-center p-2 border-2 border-stone-100 dark:border-zinc-800 rounded-xl text-stone-400 group-hover:text-emerald-500 peer-checked:text-emerald-500 peer-checked:border-emerald-500 peer-checked:bg-emerald-50/10 transition-all hover:border-stone-300 dark:hover:border-zinc-700">
<div class="w-5 h-5 rounded-xs bg-current transition-colors"></div>
</div>
</label>
<!-- 5. Ромб (Бриллиант) -->
<label class="cursor-pointer group" title="Ромб">
<input type="radio" name="shape" value="diamond" class="hidden peer">
<div class="aspect-square flex flex-col items-center justify-center p-2 border-2 border-stone-100 dark:border-zinc-800 rounded-xl peer-checked:border-emerald-500 peer-checked:bg-emerald-50/10 transition-all hover:border-stone-300 dark:hover:border-zinc-700">
<div class="w-5 h-5 rotate-45 rounded-xs bg-stone-400 group-hover:bg-emerald-500 peer-checked:bg-emerald-500 transition-colors"></div>
<div class="aspect-square flex flex-col items-center justify-center p-2 border-2 border-stone-100 dark:border-zinc-800 rounded-xl text-stone-400 group-hover:text-emerald-500 peer-checked:text-emerald-500 peer-checked:border-emerald-500 peer-checked:bg-emerald-50/10 transition-all hover:border-stone-300 dark:hover:border-zinc-700">
<div class="w-5 h-5 rotate-45 rounded-xs bg-current transition-colors"></div>
</div>
</label>
<!-- 6. Шестиугольник (Гексагон) -->
<label class="cursor-pointer group" title="Гексагон">
<input type="radio" name="shape" value="hexagon" class="hidden peer">
<div class="aspect-square flex flex-col items-center justify-center p-2 border-2 border-stone-100 dark:border-zinc-800 rounded-xl peer-checked:border-emerald-500 peer-checked:bg-emerald-50/10 transition-all hover:border-stone-300 dark:hover:border-zinc-700">
<svg class="w-6 h-6 fill-stone-400 group-hover:fill-emerald-500 peer-checked:fill-emerald-500 transition-colors" viewBox="0 0 24 24">
<div class="aspect-square flex flex-col items-center justify-center p-2 border-2 border-stone-100 dark:border-zinc-800 rounded-xl text-stone-400 group-hover:text-emerald-500 peer-checked:text-emerald-500 peer-checked:border-emerald-500 peer-checked:bg-emerald-50/10 transition-all hover:border-stone-300 dark:hover:border-zinc-700">
<svg class="w-6 h-6 fill-current transition-colors" viewBox="0 0 24 24">
<path d="M12 2l8.66 5v10L12 22l-8.66-5V7L12 2z"/>
</svg>
</div>
@@ -101,8 +101,8 @@
<!-- 7. Звездочка -->
<label class="cursor-pointer group" title="Звезда">
<input type="radio" name="shape" value="star" class="hidden peer">
<div class="aspect-square flex flex-col items-center justify-center p-2 border-2 border-stone-100 dark:border-zinc-800 rounded-xl peer-checked:border-emerald-500 peer-checked:bg-emerald-50/10 transition-all hover:border-stone-300 dark:hover:border-zinc-700">
<svg class="w-6 h-6 fill-stone-400 group-hover:fill-emerald-500 peer-checked:fill-emerald-500 transition-colors" viewBox="0 0 24 24">
<div class="aspect-square flex flex-col items-center justify-center p-2 border-2 border-stone-100 dark:border-zinc-800 rounded-xl text-stone-400 group-hover:text-emerald-500 peer-checked:text-emerald-500 peer-checked:border-emerald-500 peer-checked:bg-emerald-50/10 transition-all hover:border-stone-300 dark:hover:border-zinc-700">
<svg class="w-6 h-6 fill-current transition-colors" viewBox="0 0 24 24">
<path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/>
</svg>
</div>
@@ -111,8 +111,8 @@
<!-- 8. Сердечко -->
<label class="cursor-pointer group" title="Сердечко">
<input type="radio" name="shape" value="heart" class="hidden peer">
<div class="aspect-square flex flex-col items-center justify-center p-2 border-2 border-stone-100 dark:border-zinc-800 rounded-xl peer-checked:border-emerald-500 peer-checked:bg-emerald-50/10 transition-all hover:border-stone-300 dark:hover:border-zinc-700">
<svg class="w-6 h-6 fill-stone-400 group-hover:fill-emerald-500 peer-checked:fill-emerald-500 transition-colors" viewBox="0 0 24 24">
<div class="aspect-square flex flex-col items-center justify-center p-2 border-2 border-stone-100 dark:border-zinc-800 rounded-xl text-stone-400 group-hover:text-emerald-500 peer-checked:text-emerald-500 peer-checked:border-emerald-500 peer-checked:bg-emerald-50/10 transition-all hover:border-stone-300 dark:hover:border-zinc-700">
<svg class="w-6 h-6 fill-current transition-colors" viewBox="0 0 24 24">
<path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/>
</svg>
</div>
@@ -121,8 +121,8 @@
<!-- 9. Крестик / Плюс -->
<label class="cursor-pointer group" title="Крестик">
<input type="radio" name="shape" value="cross" class="hidden peer">
<div class="aspect-square flex flex-col items-center justify-center p-2 border-2 border-stone-100 dark:border-zinc-800 rounded-xl peer-checked:border-emerald-500 peer-checked:bg-emerald-50/10 transition-all hover:border-stone-300 dark:hover:border-zinc-700">
<svg class="w-6 h-6 fill-stone-400 group-hover:fill-emerald-500 peer-checked:fill-emerald-500 transition-colors" viewBox="0 0 24 24">
<div class="aspect-square flex flex-col items-center justify-center p-2 border-2 border-stone-100 dark:border-zinc-800 rounded-xl text-stone-400 group-hover:text-emerald-500 peer-checked:text-emerald-500 peer-checked:border-emerald-500 peer-checked:bg-emerald-50/10 transition-all hover:border-stone-300 dark:hover:border-zinc-700">
<svg class="w-6 h-6 fill-current transition-colors" viewBox="0 0 24 24">
<path d="M19 10.5h-5.5V5a1.5 1.5 0 00-3 0v5.5H5a1.5 1.5 0 000 3h5.5V19a1.5 1.5 0 003 0v-5.5H19a1.5 1.5 0 000-3z"/>
</svg>
</div>
@@ -131,8 +131,8 @@
<!-- 10. Черточка / Линия -->
<label class="cursor-pointer group" title="Линия">
<input type="radio" name="shape" value="line" class="hidden peer">
<div class="aspect-square flex flex-col items-center justify-center p-2 border-2 border-stone-100 dark:border-zinc-800 rounded-xl peer-checked:border-emerald-500 peer-checked:bg-emerald-50/10 transition-all hover:border-stone-300 dark:hover:border-zinc-700">
<div class="w-5 h-1 rounded-full bg-stone-400 group-hover:bg-emerald-500 peer-checked:bg-emerald-500 transition-colors"></div>
<div class="aspect-square flex flex-col items-center justify-center p-2 border-2 border-stone-100 dark:border-zinc-800 rounded-xl text-stone-400 group-hover:text-emerald-500 peer-checked:text-emerald-500 peer-checked:border-emerald-500 peer-checked:bg-emerald-50/10 transition-all hover:border-stone-300 dark:hover:border-zinc-700">
<div class="w-5 h-1 rounded-full bg-current transition-colors"></div>
</div>
</label>
@@ -140,8 +140,8 @@
<!-- 11. Волна / Синусоида -->
<label class="cursor-pointer group" title="Волна">
<input type="radio" name="shape" value="wave" class="hidden peer">
<div class="aspect-square flex flex-col items-center justify-center p-2 border-2 border-stone-100 dark:border-zinc-800 rounded-xl peer-checked:border-emerald-500 peer-checked:bg-emerald-50/10 transition-all hover:border-stone-300 dark:hover:border-zinc-700">
<svg class="w-6 h-6 stroke-stone-400 group-hover:stroke-emerald-500 peer-checked:stroke-emerald-500 transition-colors" fill="none" stroke-width="2.5" stroke-linecap="round" viewBox="0 0 24 24">
<div class="aspect-square flex flex-col items-center justify-center p-2 border-2 border-stone-100 dark:border-zinc-800 rounded-xl text-stone-400 group-hover:text-emerald-500 peer-checked:text-emerald-500 peer-checked:border-emerald-500 peer-checked:bg-emerald-50/10 transition-all hover:border-stone-300 dark:hover:border-zinc-700">
<svg class="w-6 h-6 stroke-current transition-colors" fill="none" stroke-width="2.5" stroke-linecap="round" viewBox="0 0 24 24">
<path d="M2 12c2.5-4 5.5-4 8 0s5.5 4 8 0 3.5-4 4-4"/>
</svg>
</div>
@@ -150,8 +150,8 @@
<!-- 12. Двоичный блок 3x3 -->
<label class="cursor-pointer group" title="Матрица 3x3 (0/1)">
<input type="radio" name="shape" value="binary" class="hidden peer">
<div class="aspect-square flex flex-col items-center justify-center p-1 border-2 border-stone-100 dark:border-zinc-800 rounded-xl peer-checked:border-emerald-500 peer-checked:bg-emerald-50/10 transition-all hover:border-stone-300 dark:hover:border-zinc-700">
<div class="grid grid-cols-2 gap-0.5 font-mono text-[14px] leading-[12px] font-black text-stone-400 group-hover:text-emerald-500 peer-checked:text-emerald-500 transition-colors select-none">
<div class="aspect-square flex flex-col items-center justify-center p-1 border-2 border-stone-100 dark:border-zinc-800 rounded-xl text-stone-400 group-hover:text-emerald-500 peer-checked:text-emerald-500 peer-checked:border-emerald-500 peer-checked:bg-emerald-50/10 transition-all hover:border-stone-300 dark:hover:border-zinc-700">
<div class="grid grid-cols-2 gap-0.5 font-mono text-[14px] leading-[12px] font-black transition-colors select-none">
<span>1</span><span>0</span>
<span>0</span><span>1</span>
</div>