From 15f8200b1d1154ab726b01f2c82bd40765beb8fc Mon Sep 17 00:00:00 2001
From: "Andrey K. Choi" <a.choi@smartsoltech.kr>
Date: Tue, 25 Nov 2025 12:52:46 +0900
Subject: [PATCH] =?UTF-8?q?=F0=9F=94=A7=20FIX:=20=D0=A0=D0=B0=D1=81=D1=82?=
 =?UTF-8?q?=D1=8F=D0=B3=D0=B8=D0=B2=D0=B0=D0=BD=D0=B8=D0=B5=20=D0=B2=D0=BD?=
 =?UTF-8?q?=D0=B5=D1=88=D0=BD=D0=B5=D0=B9=20=D0=BF=D0=B8=D0=BB=D1=8E=D0=BB?=
 =?UTF-8?q?=D0=B8=20=D1=81=20=D1=83=D0=BB=D1=83=D1=87=D1=88=D0=B5=D0=BD?=
 =?UTF-8?q?=D0=BD=D0=BE=D0=B9=20=D0=BB=D0=BE=D0=B3=D0=B8=D0=BA=D0=BE=D0=B9?=
 =?UTF-8?q?=20=D0=B8=20ResizeObserver?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../web/templates/web/home_modern.html        | 85 ++++++++++++++++---
 1 file changed, 72 insertions(+), 13 deletions(-)

diff --git a/smartsoltech/web/templates/web/home_modern.html b/smartsoltech/web/templates/web/home_modern.html
index d030d36..d2b7c25 100644
--- a/smartsoltech/web/templates/web/home_modern.html
+++ b/smartsoltech/web/templates/web/home_modern.html
@@ -704,8 +704,14 @@
     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;
     display: flex;
     justify-content: center;
+    transform-origin: center;
+}
+
+.outer-pill.expanding {
+    transform: scale(1.02);
 }
 
 .pill-indicators {
@@ -921,19 +927,35 @@ document.addEventListener('DOMContentLoaded', function() {
         });
         
         // Анимация внешней pill (растягивается под активный элемент)
-        if (outerPill) {
-            const activeIndicator = indicators[index];
-            if (activeIndicator) {
-                // Измеряем ширину активного элемента
-                const activeRect = activeIndicator.getBoundingClientRect();
-                const containerRect = outerPill.getBoundingClientRect();
-                
-                // Вычисляем нужную ширину (с учетом 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)';
+        setTimeout(() => {
+            if (outerPill) {
+                const activeIndicator = indicators[index];
+                if (activeIndicator) {
+                    // Даем время для применения стилей активного элемента
+                    setTimeout(() => {
+                        // Вычисляем ширину на основе текста
+                        const titleElement = activeIndicator.querySelector('.pill-indicator-title');
+                        let calculatedWidth = 120; // минимальная ширина
+                        
+                        if (titleElement && titleElement.textContent) {
+                            // Примерная формула: длина текста * 8px + padding
+                            const textLength = titleElement.textContent.length;
+                            calculatedWidth = Math.max(textLength * 8 + 60, 120);
+                        }
+                        
+                        console.log('Updating outer pill width to:', calculatedWidth);
+                        outerPill.style.width = calculatedWidth + '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);
+                }
             }
-        }
+        }, 10);
         
         currentActiveIndex = index;
     }
@@ -941,7 +963,17 @@ 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);
         });
         
@@ -965,14 +997,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