add fixes

WebArtWork · Dec 11, 2024 · fb40f7d · fb40f7d
1 parent b54fe30
commit fb40f7d
Show file tree

Hide file tree

Showing 8 changed files with 101 additions and 33 deletions.
diff --git a/css/index.css b/css/index.css
diff --git a/css/index.scss b/css/index.scss
@@ -1,4 +1,7 @@
 /* Приховати веб-кнопку кошика у мобільній версії */
+#hero-text{
+    order: -1;
+}
 .overlay {
     position: fixed;
     top: 0;
@@ -710,9 +713,14 @@ ul{
         transition: all .3s;
         z-index: -3;
         &--open{
-            opacity: 1;
-            width: 100%;
-            z-index: 1001;
+        opacity: 1;
+        width: 100%;
+        z-index: 1001;
+        position: fixed;
+        top: 0;
+        height: 100vh;
+        overflow-y: scroll;
+        padding: 10px;
         }
     }
     .product-category{

diff --git a/css/style.css b/css/style.css
@@ -11875,6 +11875,8 @@ h5,
   z-index: 2;
   color: white;
   text-align: center;
+  display: flex;
+  flex-flow: column wrap;
 }
 
 .btn-primary {

diff --git a/img/beef.svg b/img/beef.svg
diff --git a/img/bg.jpg b/img/bg.jpg
diff --git a/img/mobile.png b/img/mobile.png
diff --git a/js/index.js b/js/index.js
@@ -1,3 +1,7 @@
+document.querySelector(".burger-wrap").addEventListener("click", () => {
+    document.querySelector(".header__navigation").classList.toggle("header__navigation--open");
+    document.querySelector(".burger").classList.toggle("burger--close");
+});
  // Отримуємо елементи меню
  const menuLiquids = document.getElementById('menuLiquids');
  const submenuLiquids = document.getElementById('submenuLiquids');
@@ -23,10 +27,7 @@
  menuDevices.addEventListener('click', function() {
      toggleMenu(menuDevices, submenuDevices);
  });
-document.querySelector(".burger-wrap").addEventListener("click", () => {
-    document.querySelector(".header__navigation").classList.toggle("header__navigation--open");
-    document.querySelector(".burger").classList.toggle("burger--close");
-});
+
 var acc = document.getElementsByClassName("accordion");
         for (var i = 0; i < acc.length; i++) {
             acc[i].addEventListener("click", function() {
@@ -102,17 +103,20 @@ const priceRangeMin = document.getElementById('priceRangeMin');
             burger.addEventListener('click', function () {
               sidebar.classList.add('products-sidebar--open');
               overlay.classList.add('active');
+              document.body.style.overflowY = 'hidden'; // Блокируем скроллинг
             });
 
             // Закрываем сайдбар и затемняющий блок при клике на крестик
             closeBtn.addEventListener('click', function () {
               sidebar.classList.remove('products-sidebar--open');
               overlay.classList.remove('active');
+              document.body.style.overflowY = ''; // Возвращаем скроллинг
             });
 
             // Закрываем сайдбар и затемняющий блок при клике на затемняющий блок
             overlay.addEventListener('click', function () {
               sidebar.classList.remove('products-sidebar--open');
               overlay.classList.remove('active');
+              document.body.style.overflowY = ''; // Возвращаем скроллинг
             });
           });
diff --git a/pages/index/index.html b/pages/index/index.html
@@ -5,39 +5,42 @@ <h1 class="mb-2 text-white" id="hero-title">POD системи, комплект
 			серед клієнтів.</h1>
 		<h2 class="subheading mb-4 text-white" id="hero-text">Оффлайн магазини з можливістю доставки по місту та
 			доставка по Україні.</h2>
+
 	</div>
 </section>
 
 <script>
 	let view = true;
 
+	function insertImage() {
+    const heroText = document.getElementById("hero-text");
+
+    const img = document.createElement("img");
+    img.src = "img/beef.svg";
+    img.alt = "";
+    img.style.width = "300px";
+    img.style.marginBottom = "10px";
+
+    heroText.prepend(img); // Вставляємо зображення на початку
+}
 	function changeView() {
-		const heroSection = document.getElementById("home-section");
-		const heroTitle = document.getElementById("hero-title");
-		const heroText = document.getElementById("hero-text");
+    const heroSection = document.getElementById("home-section");
+    const heroTitle = document.getElementById("hero-title");
+    const heroText = document.getElementById("hero-text");
 
-		if (window.innerWidth > 768) {
-			// If the viewport width is greater than 768px (desktop)
-			if (view) {
-				heroSection.style.backgroundImage = "url('img/6.jpg')";
-				heroTitle.textContent = "POD системи, комплектуючі, рідини, та щомісячні розіграші серед клієнтів.";
-				heroText.innerHTML =
-					"Оффлайн магазини з можливістю доставки по місту та доставка по Україні.";
-			} else {
-				heroSection.style.backgroundImage = "url('img/6.jpg')";
-				heroTitle.textContent = "POD системи, комплектуючі, рідини, та щомісячні розіграші серед клієнтів.";
-				heroText.innerHTML =
-					"Оффлайн магазини з можливістю доставки по місту та доставка по Україні.";
-			}
-			view = !view;
-		} else {
-			// If the viewport width is less than or equal to 768px (mobile)
-			heroSection.style.backgroundImage = "url('img/bull-mobile.jpg')";
-			heroTitle.textContent = "POD системи, комплектуючі, рідини, та щомісячні розіграші серед клієнтів.";
-			heroText.innerHTML =
-				"Оффлайн магазини з можливістю доставки по місту та доставка по Україні.";
-		}
-	}
+    // Оновлюємо фонові зображення залежно від ширини екрану
+    if (window.innerWidth > 768) {
+        heroSection.style.backgroundImage = "url('img/bg.jpg')";
+        heroText.innerHTML = ""; // Очищаємо текст
+        insertImage(); // Додаємо зображення
+        heroTitle.textContent = "POD системи, комплектуючі, рідини, та щомісячні розіграші серед клієнтів.";
+    } else {
+        heroSection.style.backgroundImage = "url('img/mobile.png')";
+        heroText.innerHTML = ""; // Очищаємо текст
+        insertImage(); // Додаємо зображення
+        heroTitle.textContent = "POD системи, комплектуючі, рідини, та щомісячні розіграші серед клієнтів.";
+    }
+}
 
 	setInterval(changeView, 5000); // Change view every 5 seconds