mod: интерфейс (5) больше вариантов глюко-точек

hypn0/templates/index.html

@@ -46,22 +46,121 @@
         <div class="space-y-6">
           <!-- Таб: Стиль (Фигуры) -->
           <div x-show="activeTab === 'style'" class="grid grid-cols-4 gap-2">
-            <label class="cursor-pointer group">
+            <!-- 1. Круг -->
+            <label class="cursor-pointer group" title="Круг">
               <input type="radio" name="shape" value="circle" class="hidden peer" checked>
-              <div
-                class="aspect-square flex items-center justify-center border-2 border-stone-100 dark:border-zinc-800 rounded-lg peer-checked:border-emerald-500 peer-checked:bg-emerald-50/10 transition-all">
-                <div class="w-6 h-6 rounded-full bg-stone-400 group-hover:bg-emerald-500"></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 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>
             </label>
-            <label class="cursor-pointer group">
+
+            <!-- 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>
+            </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">
+                  <path d="M12 4L2 20h20L12 4z"/>
+                </svg>
+              </div>
+            </label>
+
+            <!-- 4. Квадрат -->
+            <label class="cursor-pointer group" title="Квадрат">
               <input type="radio" name="shape" value="square" class="hidden peer">
-              <div
-                class="aspect-square flex items-center justify-center border-2 border-stone-100 dark:border-zinc-800 rounded-lg peer-checked:border-emerald-500 peer-checked:bg-emerald-50/10 transition-all">
-                <div class="w-6 h-6 bg-stone-400 group-hover:bg-emerald-500"></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 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>
             </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>
+            </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">
+                  <path d="M12 2l8.66 5v10L12 22l-8.66-5V7L12 2z"/>
+                </svg>
+              </div>
+            </label>
+
+            <!-- 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">
+                  <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>
+            </label>
+
+            <!-- 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">
+                  <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>
+            </label>
+
+            <!-- 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">
+                  <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>
+            </label>
+
+            <!-- 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>
+            </label>
+
+
+            <!-- 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">
+                  <path d="M2 12c2.5-4 5.5-4 8 0s5.5 4 8 0 3.5-4 4-4"/>
+                </svg>
+              </div>
+            </label>
+
+            <!-- 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">
+                  <span>1</span><span>0</span>
+                  <span>0</span><span>1</span>
+                </div>
+              </div>
+            </label>
+
+          </div>
+
+
 
           <!-- Таб: Цвет -->
           <div x-show="activeTab === 'color'" class="space-y-4">