Update index.html

index.html

@@ -175,13 +175,6 @@
             display: inline-block;
             position: relative;
         }
-        .cta-button:hover .button-text {
-            animation: fadeIn 0.3s ease;
-        }
-        @keyframes fadeIn {
-            from { opacity: 0; transform: translateY(3px); }
-            to { opacity: 1; transform: translateY(0); }
-        }
         .services {
             padding: var(--section-padding);
             background: linear-gradient(175deg, #fff 60%, var(--light) 100%);
@@ -276,6 +269,7 @@
             overflow: hidden;
             box-shadow: 0 4px 12px rgba(0,0,0,0.08);
             transition: transform 0.3s;
+            position: relative;
         }
         .material-card:hover {
             transform: translateY(-5px);
@@ -306,10 +300,6 @@
             width: 20px;
             text-align: center;
         }
-        .material-props i.fa-wave-square { color: var(--accent); }
-        .material-props i.fa-temperature-low { color: #2dd4bf; }
-        .material-props i.fa-snowflake { color: #38bdf8; }
-        .material-props i.fa-boxes { color: #f59e0b; }
         .steps-section {
             padding: var(--section-padding);
             background: var(--light);
@@ -442,16 +432,37 @@
                 margin: 0 1rem;
             }
         }
-        @keyframes fadeIn {
-            from { opacity: 0; transform: translateY(20px); }
-            to { opacity: 1; transform: translateY(0); }
+        .material-description {
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: rgba(255, 255, 255, 0.98);
+            padding: 1.5rem;
+            opacity: 0;
+            visibility: hidden;
+            transition: all 0.3s ease;
+            overflow-y: auto;
+            font-size: 0.9rem;
+            line-height: 1.5;
+            border-radius: 12px;
+            box-shadow: 0 4px 12px rgba(0,0,0,0.1);
         }
-        .section-title,
-        .services-grid,
-        .swiper,
-        .step-list,
-        .social-buttons {
-            animation: fadeIn 0.6s ease-out;
+        .material-card:hover .material-description {
+            opacity: 1;
+            visibility: visible;
+        }
+        @media (max-width: 768px) {
+            .material-description {
+                padding: 1rem;
+                font-size: 0.85rem;
+            }
+            .material-card.active .material-description {
+                opacity: 1;
+                visibility: visible;
+                z-index: 100;
+            }
         }
     </style>
 </head>
@@ -540,6 +551,7 @@
     <section class="materials-section" id="materials">
         <h2 class="section-title">Предоставляемые материалы</h2>
         <div class="materials-grid">
+            <!-- Material Cards -->
             <div class="material-card">
                 <div class="material-image">
                     <img src="https://akm.kiev.ua/image/cache/catalog/glavna/2022/1-3-360-263-falc-370x270.jpg" alt="Фальцевая кровля">
@@ -553,7 +565,11 @@
                         <li><i class="fas fa-tools"></i> Монтаж: бесщелевой</li>
                     </ul>
                 </div>
+                <div class="material-description">
+                    <!-- Добавьте описание здесь -->
+                </div>
             </div>
+
             <div class="material-card">
                 <div class="material-image">
                     <img src="https://akm.kiev.ua/image/cache/catalog/glavna/2022/1-4-360-263-profnastil-001-370x270.jpg" alt="Профнастил">
@@ -567,7 +583,11 @@
                         <li><i class="fas fa-palette"></i> Цвета: 20 вариантов</li>
                     </ul>
                 </div>
+                <div class="material-description">
+                    <!-- Добавьте описание здесь -->
+                </div>
             </div>
+
             <div class="material-card">
                 <div class="material-image">
                     <img src="https://akm.kiev.ua/image/cache/catalog/glavna/2022/3-4-360-263-soffit-370x270.jpg" alt="Подшивка софит">
@@ -581,7 +601,11 @@
                         <li><i class="fas fa-sun"></i> УФ-защита</li>
                     </ul>
                 </div>
+                <div class="material-description">
+                    <!-- Добавьте описание здесь -->
+                </div>
             </div>
+
             <div class="material-card">
                 <div class="material-image">
                     <img src="https://akm.kiev.ua/image/cache/catalog/glavna/2022/2-2-823-289-m.okna-750x263.jpg" alt="Мансардные окна">
@@ -595,7 +619,11 @@
                         <li><i class="fas fa-cog"></i> Механизм открывания</li>
                     </ul>
                 </div>
+                <div class="material-description">
+                    <!-- Добавьте описание зд��сь -->
+                </div>
             </div>
+
             <div class="material-card">
                 <div class="material-image">
                     <img src="https://akm.kiev.ua/image/cache/catalog/glavna/2022/2-1-397-611-vodostok-002-370x570.jpg" alt="Водосточные системы">
@@ -609,7 +637,11 @@
                         <li><i class="fas fa-boxes"></i> Комплектующие в наборе</li>
                     </ul>
                 </div>
+                <div class="material-description">
+                    <!-- Добавьте описание здесь -->
+                </div>
             </div>
+
             <div class="material-card">
                 <div class="material-image">
                     <img src="https://akm.kiev.ua/image/cache/catalog/glavna/2022/1-1-397-611-metall-005-370x570.jpg" alt="Металлочерепица">
@@ -622,7 +654,11 @@
                         <li><i class="fas fa-palette"></i> Цвета: 15 вариантов</li>
                     </ul>
                 </div>
+                <div class="material-description">
+                    <!-- Добавьте описание здесь -->
+                </div>
             </div>
+
             <div class="material-card">
                 <div class="material-image">
                     <img src="https://www.1d.ua/image/cache/webp/catalog/fotosNew/bitumna-cherepytsia/brava-bitumna-cherepytsia/76331-700x700.webp" alt="Гибкая черепица">
@@ -635,7 +671,11 @@
                         <li><i class="fas fa-tint"></i> Водонепроницаемость: 100%</li>
                     </ul>
                 </div>
+                <div class="material-description">
+                    <!-- Добавьте описание здесь -->
+                </div>
             </div>
+
             <div class="material-card">
                 <div class="material-image">
                     <img src="https://www.sddu.com.ua/images/1-_enl.jpg" alt="Медная кровля">
@@ -648,6 +688,9 @@
                         <li><i class="fas fa-atom"></i> Патина: естественное покрытие</li>
                     </ul>
                 </div>
+                <div class="material-description">
+                    <!-- Добавьте описание здесь -->
+                </div>
             </div>
         </div>
     </section>
@@ -723,16 +766,19 @@
             navigation: { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev' },
             grabCursor: true,
         });
+
         const menuToggle = document.querySelector('.menu-toggle');
         const navLinks = document.querySelector('.nav-links');
         menuToggle.addEventListener('click', () => {
             navLinks.classList.toggle('active');
         });
+
         document.addEventListener('click', (e) => {
             if (!e.target.closest('.nav')) {
                 navLinks.classList.remove('active');
             }
         });
+
         document.querySelectorAll('a[href^="#"]').forEach(anchor => {
             anchor.addEventListener('click', function(e) {
                 e.preventDefault();
@@ -740,6 +786,7 @@
                 target.scrollIntoView({ behavior: 'smooth', block: 'start' });
             });
         });
+
         document.querySelectorAll('.cta-button[data-phone]').forEach(button => {
             const operator = button.dataset.operator;
             const phone = button.dataset.phone;
@@ -747,6 +794,23 @@
             button.addEventListener('mouseenter', () => textSpan.textContent = phone);
             button.addEventListener('mouseleave', () => textSpan.textContent = operator);
         });
+
+        // Обработчики для мобильных описаний
+        document.querySelectorAll('.material-card').forEach(card => {
+            card.addEventListener('click', function(e) {
+                if (window.matchMedia("(max-width: 768px)").matches) {
+                    this.classList.toggle('active');
+                }
+            });
+        });
+
+        document.addEventListener('click', (e) => {
+            if (!e.target.closest('.material-card') && window.matchMedia("(max-width: 768px)").matches) {
+                document.querySelectorAll('.material-card').forEach(card => {
+                    card.classList.remove('active');
+                });
+            }
+        });
     </script>
 </body>
 </html>