🔧 HOTFIX: Возврат к flexbox позиционированию, исправлен эллипс внешней пилюли

smartsoltech/web/templates/web/home_modern.html

@@ -367,10 +367,6 @@
 <section class="section-padding bg-light" id="portfolio">
     <div class="container-modern">
         <div class="text-center mb-5">
-            <span class="badge bg-primary rounded-pill px-3 py-2 mb-3">
-                <i class="fas fa-briefcase me-2"></i>
-                💼 Портфолио
-            </span>
             <h2 class="display-6 fw-bold mb-3">
                 Наши <span class="text-gradient">работы</span>
             </h2>
@@ -420,10 +416,6 @@
 <section class="section-padding" id="blog">
     <div class="container-modern">
         <div class="text-center mb-5">
-            <span class="badge bg-success rounded-pill px-3 py-2 mb-3">
-                <i class="fas fa-blog me-2"></i>
-                📝 Блог
-            </span>
             <h2 class="display-6 fw-bold mb-3">
                 Последние <span class="text-gradient">статьи</span>
             </h2>
@@ -468,10 +460,7 @@
 <section class="section-padding bg-light" id="news">
     <div class="container-modern">
         <div class="text-center mb-5">
-            <span class="badge bg-warning rounded-pill px-3 py-2 mb-3">
-                <i class="fas fa-newspaper me-2"></i>
-                📰 Новости
-            </span>
+
             <h2 class="display-6 fw-bold mb-3">
                 Последние <span class="text-gradient">новости</span>
             </h2>
@@ -703,7 +692,7 @@
     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: 80px;
+    min-width: 120px;
     height: 48px;
     display: flex;
     align-items: center;
@@ -725,8 +714,7 @@
     padding: 0;
     transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
     height: 32px;
-    position: relative;
-    min-width: 200px;
+    width: 100%;
 }
 
 .pill-indicator {
@@ -736,12 +724,12 @@
     width: 32px;
     height: 32px;
     padding: 0;
-    margin: 0;
+    margin: 0 2px;
     color: transparent;
     font-size: 0;
     cursor: pointer;
     transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
-    position: absolute;
+    position: relative;
     overflow: hidden;
     backdrop-filter: blur(5px);
     display: flex;
@@ -749,9 +737,6 @@
     justify-content: center;
     box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.3);
     flex-shrink: 0;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
 }
 
 .pill-indicator::before {
@@ -772,15 +757,12 @@
     font-weight: 600;
     padding: 0 16px;
     border-radius: 16px;
-    width: 80px;
+    width: auto;
     height: 32px;
     min-width: 80px;
     box-shadow: 0 5px 15px rgba(255, 255, 255, 0.3);
     backdrop-filter: blur(10px);
-    position: relative;
-    top: auto;
-    left: auto;
-    transform: none;
+    margin: 0 8px;
 }
 
 .pill-indicator.active::before {
@@ -939,7 +921,7 @@ document.addEventListener('DOMContentLoaded', function() {
             }
         });
         
-        // Анимация внешней pill и позиционирование маркеров
+        // Обновляем ширину внешней пилюли
         setTimeout(() => {
             if (outerPill) {
                 const activeIndicator = indicators[index];
@@ -952,55 +934,24 @@ document.addEventListener('DOMContentLoaded', function() {
                         let activePillWidth = 80; // минимальная ширина активного элемента
                         
                         if (titleElement && titleElement.textContent) {
-                            // Формула: длина текста * 7px + padding (32px) + min-width
+                            // Формула: длина текста * 8px + padding (32px) + min-width
                             const textLength = titleElement.textContent.length;
-                            activePillWidth = Math.max(textLength * 7 + 32, 80);
+                            activePillWidth = Math.max(textLength * 8 + 32, 80);
                         }
                         
-                        // Устанавливаем ширину активного элемента для точного расчета
-                        activeIndicator.style.width = activePillWidth + 'px';
+                        // Количество неактивных маркеров
+                        const inactiveCount = indicators.length - 1;
                         
-                        // Рассчитываем позиции для каждого неактивного маркера
-                        const fixedGap = 8; // фиксированный интервал между элементами
-                        const markerSize = 32; // размер неактивного маркера
+                        // Ширина неактивных элементов: 32px каждый + margin 4px между ними
+                        const inactiveWidth = inactiveCount * 32 + (inactiveCount > 0 ? inactiveCount * 4 : 0);
                         
-                        indicators.forEach((indicator, i) => {
-                            if (i !== index) { // для неактивных маркеров
-                                let translateX = 0;
+                        // Margin активного элемента: 16px (8px с каждой стороны)
+                        const activeMargin = inactiveCount > 0 ? 16 : 0;
                         
-                                if (i < index) { // маркеры слева от активного
-                                    // Смещаем влево от центра на половину ширины активной пилюли + gap + позиция
-                                    const leftOffset = (activePillWidth / 2) + fixedGap + ((index - i - 1) * (markerSize + 4)) + markerSize;
-                                    translateX = -leftOffset;
-                                } else { // маркеры справа от активного
-                                    // Смещаем вправо от центра на половину ширины активной пилюли + gap + позиция
-                                    const rightOffset = (activePillWidth / 2) + fixedGap + ((i - index - 1) * (markerSize + 4));
-                                    translateX = rightOffset;
-                                }
+                        // Общая ширина: активный + неактивные + margin + padding контейнера
+                        const totalWidth = activePillWidth + inactiveWidth + activeMargin + 32;
                         
-                                indicator.style.transform = `translateX(${translateX}px)`;
-                                indicator.style.transition = 'all 0.4s cubic-bezier(0.23, 1, 0.32, 1)';
-                            } else {
-                                // Активный элемент остается в центре
-                                indicator.style.transform = 'translateX(0)';
-                            }
-                        });
-                        
-                        // Обновляем ширину внешней пилюли
-                        const totalMarkers = indicators.length;
-                        const inactiveCount = totalMarkers - 1;
-                        
-                        // Вычисляем максимальное смещение для определения общей ширины
-                        let maxOffset = 0;
-                        if (inactiveCount > 0) {
-                            const maxLeftOffset = (activePillWidth / 2) + fixedGap + ((index) * (markerSize + 4));
-                            const maxRightOffset = (activePillWidth / 2) + fixedGap + ((totalMarkers - index - 1) * (markerSize + 4));
-                            maxOffset = Math.max(maxLeftOffset, maxRightOffset);
-                        }
-                        
-                        const totalWidth = Math.max(activePillWidth + (maxOffset * 2) + 32, activePillWidth + 32);
-                        
-                        console.log('Active pill width:', activePillWidth, 'Total width:', totalWidth);
+                        console.log('Active pill width:', activePillWidth, 'Inactive width:', inactiveWidth, 'Total:', totalWidth);
                         
                         outerPill.style.width = totalWidth + 'px';
                         outerPill.style.transition = 'all 0.4s cubic-bezier(0.23, 1, 0.32, 1)';
@@ -1032,22 +983,14 @@ document.addEventListener('DOMContentLoaded', function() {
         // Hover эффекты для неактивных элементов
         indicator.addEventListener('mouseenter', function() {
             if (!this.classList.contains('active')) {
-                // Сохраняем текущий transform и добавляем scale
-                const currentTransform = this.style.transform;
-                const scaleTransform = currentTransform.includes('translateX') 
-                    ? currentTransform.replace(')', ' scale(1.1))')
-                    : 'translate(-50%, -50%) scale(1.1)';
-                this.style.transform = scaleTransform;
+                this.style.transform = 'scale(1.1)';
                 this.style.background = 'rgba(255, 255, 255, 0.6)';
             }
         });
         
         indicator.addEventListener('mouseleave', function() {
             if (!this.classList.contains('active')) {
-                // Восстанавливаем transform без scale
-                const currentTransform = this.style.transform;
-                const cleanTransform = currentTransform.replace(' scale(1.1)', '');
-                this.style.transform = cleanTransform;
+                this.style.transform = 'scale(1)';
                 this.style.background = 'rgba(255, 255, 255, 0.4)';
             }
         });