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

smartsoltech/web/templates/web/home_modern.html

@@ -699,34 +699,42 @@
     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;
+    min-width: 80px;
+    height: 48px;
     display: flex;
+    align-items: center;
     justify-content: center;
+    transform-origin: center;
+}
+
+.outer-pill.expanding {
+    transform: scale(1.02);
 }
 
 .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;
@@ -738,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;
@@ -756,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 {
@@ -772,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 {
@@ -921,19 +932,38 @@ document.addEventListener('DOMContentLoaded', function() {
         });
         
         // Анимация внешней pill (растягивается под активный элемент)
-        if (outerPill) {
-            const activeIndicator = indicators[index];
-            if (activeIndicator) {
-                // Измеряем ширину активного элемента
-                const activeRect = activeIndicator.getBoundingClientRect();
-                const containerRect = outerPill.getBoundingClientRect();
+        setTimeout(() => {
+            if (outerPill) {
+                const activeIndicator = indicators[index];
+                const inactiveCount = indicators.length - 1;
                 
-                // Вычисляем нужную ширину (с учетом padding)
-                const newWidth = Math.max(activeRect.width + 40, 120);
-                outerPill.style.width = newWidth + 'px';
-                outerPill.style.transition = 'all 0.4s cubic-bezier(0.23, 1, 0.32, 1)';
+                if (activeIndicator) {
+                    // Даем время для применения стилей активного элемента
+                    setTimeout(() => {
+                        // Вычисляем ширину на основе текста активного элемента
+                        const titleElement = activeIndicator.querySelector('.pill-indicator-title');
+                        let activePillWidth = 80; // минимальная ширина активного элемента
+                        
+                        if (titleElement && titleElement.textContent) {
+                            // Формула: длина текста * 7px + padding (32px) + min-width
+                            const textLength = titleElement.textContent.length;
+                            activePillWidth = Math.max(textLength * 7 + 32, 80);
+                        }
+                        
+                        // Ширина неактивных элементов: 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)';
+                    }, 50);
+                }
             }
-        }
+        }, 10);
         
         currentActiveIndex = index;
     }
@@ -941,14 +971,24 @@ document.addEventListener('DOMContentLoaded', function() {
     // Обработчики событий для индикаторов
     indicators.forEach((indicator, index) => {
         indicator.addEventListener('click', function() {
+            console.log('Clicked indicator:', index);
             currentActiveIndex = index;
+            
+            // Добавляем класс расширения
+            if (outerPill) {
+                outerPill.classList.add('expanding');
+                setTimeout(() => {
+                    outerPill.classList.remove('expanding');
+                }, 400);
+            }
+            
             updatePillState(index);
         });
         
         // 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)';
             }
         });
@@ -965,14 +1005,41 @@ document.addEventListener('DOMContentLoaded', function() {
     if (carousel) {
         carousel.addEventListener('slide.bs.carousel', function(event) {
             const nextIndex = event.to;
+            console.log('Carousel sliding to:', nextIndex);
             currentActiveIndex = nextIndex;
+            
+            // Добавляем класс расширения при смене слайда
+            if (outerPill) {
+                outerPill.classList.add('expanding');
+                setTimeout(() => {
+                    outerPill.classList.remove('expanding');
+                }, 400);
+            }
+            
             updatePillState(nextIndex);
         });
         
         // Инициализируем первое состояние
         setTimeout(() => {
+            console.log('Initializing pill state...');
             updatePillState(0);
-        }, 100);
+        }, 200);
+    }
+    
+    // Отслеживаем изменения размеров активного элемента
+    if (window.ResizeObserver) {
+        const resizeObserver = new ResizeObserver(entries => {
+            if (outerPill) {
+                const activeIndicator = indicators[currentActiveIndex];
+                if (activeIndicator && activeIndicator.classList.contains('active')) {
+                    updatePillState(currentActiveIndex);
+                }
+            }
+        });
+        
+        indicators.forEach(indicator => {
+            resizeObserver.observe(indicator);
+        });
     }
     
     // Animate elements on scroll