Initial commit

playarea/assets/main/js/basket.js

@@ -0,0 +1,27 @@
+const addProducts = document.querySelectorAll('.amount-plus'),
+removeProducts = document.querySelectorAll('.amount-minus'),
+amountNum = document.querySelector('.amount-val');
+
+let count = 1;
+addProducts.forEach(add => {
+    add.addEventListener('click', () => {
+        count++
+        add.previousElementSibling.innerHTML = count;
+    });
+})
+
+removeProducts.forEach(rem => {
+    rem.addEventListener('click', () => {
+        if(count > 1) {
+            count--
+            rem.nextElementSibling.innerHTML = count;
+        }
+    });
+});
+
+
+
+
+// input mask
+$("#phone").inputmask({"mask": "+48999 999 999"});
+$("#zip-code").inputmask({"mask": "__-___"});

playarea/assets/main/js/btnAnim.js

@@ -0,0 +1,16 @@
+const btn_anim = document.querySelectorAll('.btn-anim');
+
+btn_anim.forEach(btn => {
+    btn.addEventListener('mouseover', () => {
+        setTimeout(() => {
+            btn.classList.add('addBorder')
+        }, 800);
+        
+       
+    })
+    btn.addEventListener('mouseout', () => {
+        setTimeout(() => {
+            btn.classList.remove('addBorder')
+        }, 800);
+    })
+})

playarea/assets/main/js/card.js

@@ -0,0 +1,56 @@
+
+var productSlider = new Swiper('.big-card', {
+    spaceBetween: 0,
+    centeredSlides: false,
+    loop:true,
+    loopedSlides: 4,
+    resizeObserver:true,
+
+    navigation: {
+      nextEl: '.swiper-product-next',
+      prevEl: '.swiper-product-prev',
+    },
+});
+var productThumbs = new Swiper('.small-card', {
+    spaceBetween: 12,
+    loop: true,
+    slideToClickedSlide: true,
+    slidesPerView: 4, 
+});
+productSlider.controller.control = productThumbs;
+productThumbs.controller.control = productSlider;
+
+
+
+const select = document.querySelector('.select-head');
+const options = document.querySelectorAll('.option');
+
+select.addEventListener('click', () => {
+  select.parentElement.classList.toggle('showSelect')
+});
+
+options.forEach(option => {
+  let active = option.parentElement.previousElementSibling.children[0];
+  option.addEventListener('click', () => {
+    option.parentElement.parentElement.classList.remove('showSelect');
+    active.textContent = option.textContent;
+    if(active.textContent == 'Co 1 tydzień') {
+      options[0].textContent = 'Co 2 tydzień';
+      options[1].textContent = 'Co 3 tydzień';
+    } 
+    else if(active.textContent == 'Co 2 tydzień') {
+      options[0].textContent = 'Co 1 tydzień';
+      options[1].textContent = 'Co 3 tydzień';
+    } 
+    else if(active.textContent == 'Co 3 tydzień') {
+      options[0].textContent = 'Co 1 tydzień';
+      options[1].textContent = 'Co 2 tydzień';
+    } 
+    console.dir( options[1].textContent)
+  })
+})
+
+
+document.addEventListener('click', (e) => {
+  select.parentElement.contains(e.target) || select.parentElement.classList.remove('showSelect')
+})

playarea/assets/main/js/faqs.js

@@ -0,0 +1,7 @@
+const showBtns = document.querySelectorAll('.show-btn');
+
+showBtns.forEach(btn => {
+    btn.addEventListener('click', () => {
+        btn.parentElement.parentElement.classList.toggle('hideItem')
+    })
+})

playarea/assets/main/js/form.js

@@ -0,0 +1,165 @@
+// form login
+const log_email = document.getElementById('log-email'),
+      log_pass = document.getElementById('log-pass'),
+      log_submit = document.querySelector('.log-submit');
+
+log_submit.addEventListener('click', () => {
+  checkInputsLogin();
+  let success_log_email = log_email.nextElementSibling.classList,
+      success_log_pass = log_pass.nextElementSibling.classList;
+
+      if(success_log_email == 'success' && success_log_pass == 'success') {
+        log_submit.type = 'submit'
+      }
+})
+
+
+
+function checkInputsLogin() {
+    let log_email_value = log_email.value.trim(),
+        log_pass_value = log_pass.value.trim();
+
+    if(log_pass_value === '') {
+        setErrorFor(log_pass, '1px solid #E47169')
+        } else {
+        setSuccesFor(log_pass)
+        log_pass.nextElementSibling.classList.add('success');
+    }
+    if(log_email_value === '') {
+        setErrorFor(log_email, '1px solid #E47169')
+    }
+    else if(!isEmail(log_email_value)) {
+        setErrorFor(log_email, '1px solid #E47169')
+    }
+    else {
+        setSuccesFor(log_email)
+        log_email.nextElementSibling.classList.add('success');
+    }
+}
+
+
+// form regis
+const regis_email = document.getElementById('regis-email'),
+      regis_pass = document.getElementById('regis-pass'),
+      regis_name = document.getElementById('regis-name'),
+      regis_lastName = document.getElementById('regis-lastName'),
+      regis_submit = document.querySelector('.regis-submit');
+
+regis_submit.addEventListener('click', () => {
+  checkInputsRegis();
+  let success_regis_email = regis_email.nextElementSibling.classList,
+      success_regis_pass = regis_pass.nextElementSibling.classList,
+      success_regis_name = regis_name.nextElementSibling.classList,
+      success_regis_lastName = regis_lastName.nextElementSibling.classList;
+
+      if(success_regis_email == 'success' && success_regis_pass == 'success' && success_regis_name == 'success' && success_regis_lastName == 'success') {
+        regis_submit.type = 'submit'
+      }
+})
+
+
+
+function checkInputsRegis() {
+    let regis_email_value = regis_email.value.trim(),
+        regis_pass_value = regis_pass.value.trim(),
+        regis_name_value = regis_name.value.trim(),
+        regis_lastName_value = regis_lastName.value.trim();
+
+    if(regis_name_value === '') {
+        setErrorFor(regis_name, '1px solid #E47169')
+        } else {
+        setSuccesFor(regis_name)
+        regis_name.nextElementSibling.classList.add('success');
+    }
+    if(regis_lastName_value === '') {
+        setErrorFor(regis_lastName, '1px solid #E47169')
+        } else {
+        setSuccesFor(regis_lastName)
+        regis_lastName.nextElementSibling.classList.add('success');
+    }
+    if(regis_pass_value === '') {
+        setErrorFor(regis_pass, '1px solid #E47169')
+        } else {
+        setSuccesFor(regis_pass)
+        regis_pass.nextElementSibling.classList.add('success');
+    }
+    if(regis_email_value === '') {
+        setErrorFor(regis_email, '1px solid #E47169')
+    }
+    else if(!isEmail(regis_email_value)) {
+        setErrorFor(regis_email, '1px solid #E47169')
+    }
+    else {
+        setSuccesFor(regis_email)
+        regis_email.nextElementSibling.classList.add('success');
+    }
+}
+
+
+// validate
+function setErrorFor(input, border) {
+    input.style.border = border
+}
+    
+function setSuccesFor(input) {
+    input.style.border = `1px solid #2C9A33`;
+} 
+    
+function isEmail(email) {
+    return /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/.test(email);
+}  
+
+
+// show password
+const show_pass = document.querySelectorAll('.show-pass');
+
+show_pass.forEach(btn => {
+    let x = btn.parentElement.children[0]
+    btn.addEventListener('click', () => {
+        if (x.type === "password") {
+            x.type = "text";
+            btn.classList.add('hide-pass')
+          } else {
+            x.type = "password";
+            btn.classList.remove('hide-pass')
+          }
+    })
+})
+
+
+
+const popUp = document.querySelector('.popUp');
+const regis_btn = document.querySelectorAll('.regis-btn');
+const goTo_regis = document.querySelector('.goTo-regis');
+const goTo_login = document.querySelector('.goTo-login');
+
+
+goTo_regis.addEventListener('click', () => {
+    goTo_regis.parentElement.parentElement.classList.add('d-none');
+    goTo_regis.parentElement.parentElement.nextElementSibling.classList.remove('d-none');
+});
+
+goTo_login.addEventListener('click', () => {
+    goTo_login.parentElement.parentElement.classList.add('d-none');
+    goTo_login.parentElement.parentElement.previousElementSibling.classList.remove('d-none');
+});
+
+regis_btn.forEach(btn => {
+    btn.addEventListener('click', () => {
+        popUp.classList.remove('d-none');
+        body.classList.add('bodyStopScroll')
+    })
+});
+
+window.addEventListener('click', (e) => {
+    if(e.target == popUp) {
+        popUp.children[0].classList.add('popUpHide');
+        
+        setTimeout(() => {
+          popUp.classList.add('d-none');
+          body.classList.remove('bodyStopScroll')
+          popUp.children[0].classList.remove('popUpHide');
+          location.reload();
+        }, 450);
+    }
+});

playarea/assets/main/js/header.js

@@ -0,0 +1,43 @@
+const menuBtn = document.querySelector('.menu-btn');
+const body = document.querySelector('body');
+const basket_count = document.querySelector('.basket-count');
+
+function funcTest() {
+    if(basket_count.textContent == 0) {
+        basket_count.classList.add('d-none')
+    }
+}
+
+funcTest();
+
+menuBtn.addEventListener('click', () => {
+    menuBtn.parentElement.parentElement.classList.toggle('showMenu');
+    body.classList.toggle('bodyStopScroll')
+});
+
+document.addEventListener('click', (e) => {
+    if(e.target == menuBtn.parentElement.parentElement) {
+        menuBtn.parentElement.parentElement.classList.remove('showMenu');
+        body.classList.remove('bodyStopScroll')
+    }
+});
+
+
+
+// chat 
+const chat = document.querySelector('.chat');
+const chatBtn = document.querySelector('.chat-btn');
+const chatBtn_hide = document.querySelector('.chat-hide');
+
+chatBtn.addEventListener('click', () => {
+    chat.classList.toggle('showChat')
+})
+
+chatBtn_hide.addEventListener('click', () => {
+    chat.classList.remove('showChat')
+});
+
+
+document.addEventListener('click', (e) => {
+    chat.contains(e.target) || chat.classList.remove('showChat')
+})

playarea/assets/main/js/profile.js

@@ -0,0 +1,13 @@
+const change_subscriptions = document.querySelector('.change-subscriptions');
+const save_subscriptions = document.querySelector('.subscriptions-save');
+
+change_subscriptions.addEventListener('click', () => {
+    change_subscriptions.parentElement.classList.toggle('show-subscriptions');
+});
+save_subscriptions.addEventListener('click', () => {
+    save_subscriptions.parentElement.parentElement.parentElement.classList.remove('show-subscriptions');
+});
+
+document.addEventListener('click', (e) => {
+    change_subscriptions.parentElement.contains(e.target) || change_subscriptions.parentElement.classList.remove('show-subscriptions');
+})