🎯 UX: Унифицированные размеры маркеров по высоте пилюли с динамическими интервалами

smartsoltech/web/templates/web/home_modern.html

@@ -699,13 +699,14 @@
     background: rgba(255, 255, 255, 0.1);
     backdrop-filter: blur(10px);
     border: 1px solid rgba(255, 255, 255, 0.2);
-    border-radius: 50px;
+    border-radius: 24px;
     padding: 8px;
     box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
     transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
-    min-width: 60px;
-    width: 120px;
+    min-width: 80px;
+    height: 48px;
     display: flex;
+    align-items: center;
     justify-content: center;
     transform-origin: center;
 }
@@ -716,23 +717,24 @@
 
 .pill-indicators {
     display: flex;
-    gap: 4px;
+    gap: 0;
     align-items: center;
     justify-content: center;
     background: transparent;
-    border-radius: 40px;
-    padding: 4px;
+    border-radius: 20px;
+    padding: 0;
     transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
+    height: 32px;
 }
 
 .pill-indicator {
     background: rgba(255, 255, 255, 0.4);
     border: none;
     border-radius: 50%;
-    width: 12px;
-    height: 12px;
+    width: 32px;
+    height: 32px;
     padding: 0;
-    margin: 0;
+    margin: 0 2px;
     color: transparent;
     font-size: 0;
     cursor: pointer;
@@ -744,13 +746,14 @@
     align-items: center;
     justify-content: center;
     box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.3);
+    flex-shrink: 0;
 }
 
 .pill-indicator::before {
     content: '';
     position: absolute;
-    width: 6px;
-    height: 6px;
+    width: 8px;
+    height: 8px;
     background: white;
     border-radius: 50%;
     opacity: 0.8;
@@ -762,12 +765,14 @@
     color: #333;
     font-size: 11px;
     font-weight: 600;
-    padding: 8px 16px;
-    border-radius: 25px;
+    padding: 0 16px;
+    border-radius: 16px;
     width: auto;
-    height: auto;
+    height: 32px;
+    min-width: 80px;
     box-shadow: 0 5px 15px rgba(255, 255, 255, 0.3);
     backdrop-filter: blur(10px);
+    margin: 0 4px;
 }
 
 .pill-indicator.active::before {
@@ -778,13 +783,13 @@
 
 .pill-indicator:not(.active):hover {
     background: rgba(255, 255, 255, 0.6);
-    transform: scale(1.2);
+    transform: scale(1.1);
     box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.6);
 }
 
 .pill-indicator:not(.active):hover::before {
     opacity: 1;
-    transform: scale(1.2);
+    transform: scale(1.1);
 }
 
 .pill-indicator-title {
@@ -930,28 +935,31 @@ document.addEventListener('DOMContentLoaded', function() {
         setTimeout(() => {
             if (outerPill) {
                 const activeIndicator = indicators[index];
+                const inactiveCount = indicators.length - 1;
+                
                 if (activeIndicator) {
                     // Даем время для применения стилей активного элемента
                     setTimeout(() => {
-                        // Вычисляем ширину на основе текста
+                        // Вычисляем ширину на основе текста активного элемента
                         const titleElement = activeIndicator.querySelector('.pill-indicator-title');
-                        let calculatedWidth = 120; // минимальная ширина
+                        let activePillWidth = 80; // минимальная ширина активного элемента
                         
                         if (titleElement && titleElement.textContent) {
-                            // Примерная формула: длина текста * 8px + padding
+                            // Формула: длина текста * 7px + padding (32px) + min-width
                             const textLength = titleElement.textContent.length;
-                            calculatedWidth = Math.max(textLength * 8 + 60, 120);
+                            activePillWidth = Math.max(textLength * 7 + 32, 80);
                         }
                         
-                        console.log('Updating outer pill width to:', calculatedWidth);
-                        outerPill.style.width = calculatedWidth + 'px';
+                        // Ширина неактивных элементов: 32px каждый + margin 4px между ними
+                        const inactiveWidth = inactiveCount * 32 + (inactiveCount - 1) * 4;
+                        
+                        // Общая ширина: активный + неактивные + отступы + margin между активным и неактивными
+                        const totalWidth = activePillWidth + inactiveWidth + 32 + (inactiveCount > 0 ? 8 : 0);
+                        
+                        console.log('Calculated widths - Active:', activePillWidth, 'Inactive total:', inactiveWidth, 'Total:', totalWidth);
+                        
+                        outerPill.style.width = totalWidth + 'px';
                         outerPill.style.transition = 'all 0.4s cubic-bezier(0.23, 1, 0.32, 1)';
-                        
-                        // Также обновляем ширину контейнера индикаторов
-                        const pillIndicators = document.querySelector('.pill-indicators');
-                        if (pillIndicators) {
-                            pillIndicators.style.transition = 'all 0.4s cubic-bezier(0.23, 1, 0.32, 1)';
-                        }
                     }, 50);
                 }
             }
@@ -980,7 +988,7 @@ document.addEventListener('DOMContentLoaded', function() {
         // Hover эффекты для неактивных элементов
         indicator.addEventListener('mouseenter', function() {
             if (!this.classList.contains('active')) {
-                this.style.transform = 'scale(1.2)';
+                this.style.transform = 'scale(1.1)';
                 this.style.background = 'rgba(255, 255, 255, 0.6)';
             }
         });