From db58f5c4635a8a34b908b06a242c2c0dbd73e950 Mon Sep 17 00:00:00 2001
From: Kirill Pet <job.mori.1967@gmail.com>
Date: Tue, 8 Oct 2024 23:17:45 +0300
Subject: [PATCH] =?UTF-8?q?overlay=20js=20+=20css=20=D0=BF=D1=80=D0=B0?=
 =?UTF-8?q?=D0=B2=D0=BA=D0=B8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 assets/css/gp-style-core.css    |  2 -
 assets/css/gp-style-desktop.css | 12 ++++-
 assets/js/gp-main.js            | 30 +++++++++++++
 index.html                      | 77 +++++++++++++++++++++++++++++++--
 4 files changed, 114 insertions(+), 7 deletions(-)

diff --git a/assets/css/gp-style-core.css b/assets/css/gp-style-core.css
index a5c6f39..7ce062a 100644
--- a/assets/css/gp-style-core.css
+++ b/assets/css/gp-style-core.css
@@ -807,8 +807,6 @@ button{
   opacity: 0;
   transition: opacity .2s ease-out;
   pointer-events: none;
-
-  white-space: nowrap;
 }
 .modal.active{
   opacity: 1;
diff --git a/assets/css/gp-style-desktop.css b/assets/css/gp-style-desktop.css
index 10b5b01..4366900 100644
--- a/assets/css/gp-style-desktop.css
+++ b/assets/css/gp-style-desktop.css
@@ -326,6 +326,8 @@
     background-color: var(--background-grey);
     border-radius: 24px;
 
+    overflow: hidden;
+
     position: relative;
   }
   .product__item::before{
@@ -349,6 +351,9 @@
   .product__item:hover::before{
     opacity: 1;
   }
+  .product__item.active::before{
+    opacity: 0;
+  }
   .product-item__block-label{
     position: absolute;
     top: 16px;
@@ -449,7 +454,7 @@
   }
   .product-item__overlay{
     position: absolute;
-    top: 0;
+    top: 100%;
     left: 0;
 
     width: 100%;
@@ -466,6 +471,11 @@
     background-color: rgba(242, 242, 242, 0.8);
 
     z-index: 10;
+
+    transition: top .4s ease-out;
+  }
+  .product-item__overlay.active{
+    top: 0;
   }
   .product-item-overlay__header{}
   .product-item-overlay__tags{
diff --git a/assets/js/gp-main.js b/assets/js/gp-main.js
index a822581..dfd3fcf 100644
--- a/assets/js/gp-main.js
+++ b/assets/js/gp-main.js
@@ -16,6 +16,36 @@ modalClose('.modal__close');
 toggleOpenX('.toggle', '.toggle__title', '.toggle__content', '.toggle__block-content', true);
 // toggle
 
+// overlay
+let products = document.querySelectorAll('.product__item');
+
+products.forEach(productItem => {
+    let button = productItem.querySelector('.open-overlay'),
+        overlay = productItem.querySelector('.product-item__overlay');
+
+    
+    if (button) {
+        button.onclick = function (e) {
+            document.querySelectorAll('.product__item').forEach(e => {
+                if (e.classList.contains('active')) {
+                    e.classList.remove('active');
+                }
+            });
+            document.querySelectorAll('.product-item__overlay').forEach(e => {
+                if (e.classList.contains('active')) {
+                    e.classList.remove('active');
+                }
+            });
+
+            productItem.classList.toggle('active'); 
+            overlay.classList.toggle('active');            
+        }
+    }
+    
+})
+// overlay
+
+
 // select
 toggleOpenX('.select', '.select__state' , '.state__content', '.state__block', true);
 
diff --git a/index.html b/index.html
index 25ac878..5709153 100644
--- a/index.html
+++ b/index.html
@@ -274,7 +274,7 @@
                                 1 304
                             </p>
                             <div class="product-item__bye">
-                                <button class="button button--white button--100-perc">
+                                <button class="button button--white button--100-perc open-overlay">
                                     Купить
                                 </button>
                             </div>
@@ -368,11 +368,80 @@
                                 1 304
                             </p>
                             <div class="product-item__bye">
-                                <button class="button button--white button--100-perc">
+                                <button class="button button--white button--100-perc open-overlay ">
                                     Купить
                                 </button>
                             </div>
                         </div>
+                        <div class="product-item__overlay">
+                            <div class="product-item-overlay__header">
+                                <p class="product-item__title">
+                                    Сухой корм, 2 кг, для крупных и средних пород
+                                </p>
+                                <ul class="product-item-overlay__tags">
+                                    <li>Seperpremium</li>
+                                    <li>Для крупных и средних пород </li>
+                                    <li>Полнорационный</li>
+                                </ul>
+                            </div>
+                            
+                            <form class="product-item__form" method="post" action="/send-telegram.php">
+                                <div class="product-item-overlay__input-block">
+                                    <div class="product-item-overlay__field">
+                                        <p class="product-item-overlay-field__title">Объем</p>
+
+                                        <div class="select">
+                                            <input type="text" class="select__state" value="2 кг" readonly>
+                                            <div class="state__block">
+                                                <ul class="state__content">
+                                                    <li>
+                                                        <button class="state__button active">
+                                                            2 кг
+                                                        </button>
+                                                    </li>
+                                                    <li>
+                                                        <button class="state__button">
+                                                            3 кг
+                                                        </button>
+                                                    </li>
+                                                    <li>
+                                                        <button class="state__button">
+                                                            4 кг
+                                                        </button>
+                                                    </li>
+                                                </ul>
+                                            </div>
+                                        </div>
+                                    </div>
+                                    <div class="product-item-overlay__field">
+                                        <p class="product-item-overlay-field__title">Количество</p>
+
+                                        <div class="counter">
+                                            <button class="counter__button minus">
+                                                <img src="assets/img/svg/main/minus.svg" alt="">
+                                            </button>
+                                            <input type="text" class="counter__input" value="1">
+                                            <button class="counter__button plus">
+                                                <img src="assets/img/svg/main/plus.svg" alt="">
+                                            </button>
+                                        </div>
+                                    </div>
+                                </div>
+                                <p class="product-item-overlay__price">
+                                    1280
+                                </p>
+                                <div class="product-item-overlay__block-button">
+                                    <div class="product-item-overlay__button">
+                                        <input class="button button--gradient button--base button--100-perc" type="submit" value="Добавить в корзину">
+                                    </div>
+                                    <div class="product-item-overlay__button">
+                                        <button class="to-know button--100-perc">
+                                            <p>Подробнее</p>
+                                        </button>
+                                    </div>
+                                </div>
+                            </form>
+                        </div>
                     </div>
                     <div class="product__item hiding">
                         <div class="product-item__label">
@@ -421,7 +490,7 @@
                                 1 304
                             </p>
                             <div class="product-item__bye">
-                                <button class="button button--white button--100-perc">
+                                <button class="button button--white button--100-perc open-overlay">
                                     Купить
                                 </button>
                             </div>
@@ -446,7 +515,7 @@
                                 1 304
                             </p>
                             <div class="product-item__bye">
-                                <button class="button button--white button--100-perc">
+                                <button class="button button--white button--100-perc open-overlay">
                                     Купить
                                 </button>
                             </div>