Update index.html

index.html

@@ -235,6 +235,38 @@ select option {
     display: contents;
 }
 
+.style-grid {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 10px;
+}
+
+.style-btn {
+    padding: 12px 10px;
+    background-color: var(--input-bg);
+    border: 1px solid var(--border);
+    color: var(--text-secondary);
+    font-size: 0.85rem;
+    font-weight: 600;
+    cursor: pointer;
+    border-radius: 8px;
+    transition: all 0.3s ease;
+    text-align: center;
+    width: 100%;
+}
+
+.style-btn:hover {
+    border-color: var(--primary);
+    color: var(--text);
+}
+
+.style-btn.active {
+    background-color: var(--primary);
+    color: #000;
+    border-color: var(--primary);
+    box-shadow: 0 0 10px rgba(204, 255, 0, 0.3);
+}
+
 @media (max-width: 600px) {
     .form-grid {
         grid-template-columns: 1fr;
@@ -365,16 +397,16 @@ select option {
                         <option value="neon lights">Неоновый</option>
                     </select>
                 </div>
-                <div class="form-group">
-                    <label for="style">Эстетика</label>
-                    <select id="style">
-                        <option value="Raw Candid Photography">Живое фото (Raw)</option>
-                        <option value="Cinematic Movie Still">Кадр из фильма</option>
-                        <option value="Fashion Editorial">Модный журнал</option>
-                        <option value="Street Style Photo">Уличный стиль</option>
-                        <option value="Dark Moody Atmosphere">Мрачная атмосфера</option>
-                        <option value="Vintage Analog Film">Пленка (Vintage)</option>
-                    </select>
+                <div class="form-group full-width">
+                    <label>Эстетика</label>
+                    <div id="styleSelector" class="style-grid">
+                        <button type="button" class="style-btn active" data-value="Raw Candid Photography">Живое фото (Raw)</button>
+                        <button type="button" class="style-btn" data-value="Cinematic Movie Still">Кадр из фильма</button>
+                        <button type="button" class="style-btn" data-value="Fashion Editorial">Модный журнал</button>
+                        <button type="button" class="style-btn" data-value="Street Style Photo">Уличный стиль</button>
+                        <button type="button" class="style-btn" data-value="Dark Moody Atmosphere">Мрачная атмосфера</button>
+                        <button type="button" class="style-btn" data-value="Vintage Analog Film">Пленка (Vintage)</button>
+                    </div>
                 </div>
                 <div class="form-group">
                     <label for="camera">Камера/Объектив</label>
@@ -662,13 +694,26 @@ function toggleCreativeMode() {
     document.getElementById('object_background').disabled = isCreative;
 }
 
+function setupStyleSelector() {
+    const styleContainer = document.getElementById('styleSelector');
+    if (!styleContainer) return;
+    const styleButtons = styleContainer.querySelectorAll('.style-btn');
+
+    styleButtons.forEach(btn => {
+        btn.addEventListener('click', () => {
+            styleButtons.forEach(innerBtn => innerBtn.classList.remove('active'));
+            btn.classList.add('active');
+        });
+    });
+}
+
 async function processAndOpen() {
     const btn = document.querySelector('.action-btn');
     const originalText = btn.innerHTML;
     let fullPrompt = '';
     
     if (currentMode === 'model') {
-        const style = document.getElementById('style').value;
+        const style = document.querySelector('#styleSelector .style-btn.active').dataset.value;
         const shotType = document.getElementById('shotType').value;
         const age = document.getElementById('age').value;
         const nationality = document.getElementById('nationality').value;
@@ -777,6 +822,7 @@ document.addEventListener('DOMContentLoaded', () => {
     switchMode('model');
     switchChildrenSubMode('newborn');
     autoAdjustDefaults();
+    setupStyleSelector();
 });
 </script>