/*! elementor - v3.23.0 - 05-08-2024 */ .elementor-widget-text-editor.elementor-drop-cap-view-stacked .elementor-drop-cap{background-color:#69727d;color:#fff}.elementor-widget-text-editor.elementor-drop-cap-view-framed .elementor-drop-cap{color:#69727d;border:3px solid;background-color:transparent}.elementor-widget-text-editor:not(.elementor-drop-cap-view-default) .elementor-drop-cap{margin-top:8px}.elementor-widget-text-editor:not(.elementor-drop-cap-view-default) .elementor-drop-cap-letter{width:1em;height:1em}.elementor-widget-text-editor .elementor-drop-cap{float:right;text-align:center;line-height:1;font-size:50px}.elementor-widget-text-editor .elementor-drop-cap-letter{display:inline-block} .story-container { width: 100%; /* height: 806px; */ /*background-size: 375px 806px;*/ position: relative; margin: 0 auto; overflow: hidden; text-align: center; /*padding: 45px 13px 39px 13px;*/ } .story-container .story-inner { /* background-color: #fff; */ position: relative; width: 100%; height: 100%; border-radius: 30px; overflow: hidden; } .story-container .story-inner .title { position: relative; } .story-container .story-inner .title h1 { font-family: "Poppins", sans-serif; font-weight: 700; font-size: 1.4em; letter-spacing: 0.02em; color: #fff; margin: 0; padding: 0; padding: 14px; background-color: #d62196; } .story-container .story-inner .title span { position: absolute; left: 30px; top: 50%; transform: translateY(-50%); font-size: 1em; color: #fff; z-index: 2; } .story-container .story-inner .title span.im-share { left: inherit; right: 30px; } .story-container .story-inner .story-bubbles { position: relative; width: 100%; height: auto; overflow-y: hidden; padding: 5px; /* background-color: #6915cf; */ -webkit-overflow-scrolling: touch; display: flex; justify-content: start; } @media (min-width: 400px) { .story-container .story-inner .story-bubbles { justify-content: center; } } .story-container .story-inner .story-bubbles::-webkit-scrollbar-track { background-color: transparent; } .story-container .story-inner .story-bubbles::-webkit-scrollbar { height: 4px; background-color: transparent; } .story-container .story-inner .story-bubbles::-webkit-scrollbar-thumb { background-color: rgba(255, 255, 255, 0.5); } .story-container .story-inner .story-bubbles .bubbles { display: inline-flex; align-items: center; position: relative; width: max-content; height: auto; } .story-container .story-inner .story-bubbles .bubbles .bubble { width: 70px; height: auto; margin: 3rem; transform: scale(1.4); } .story-container .story-inner .story-bubbles .bubbles .bubble a { display: block; text-decoration: none; } .story-container .story-inner .story-bubbles .bubbles .bubble.read .thumb { border: 0 solid; background-image: none; } .story-container .story-inner .story-bubbles .bubbles .bubble.read .thumb img { border: 0 solid; border-radius: 0; } .story-container .story-inner .story-bubbles .bubbles .bubble .thumb { width: 100%; height: 70px; border-radius: 50%; position: relative; overflow: hidden; border: 3px solid transparent; background-image: linear-gradient(white, white), radial-gradient(circle at top left, red, orange); background-origin: border-box; background-clip: content-box, border-box; } .story-container .story-inner .story-bubbles .bubbles .bubble .thumb img { width: 100%; height: 100%; border: 2px solid #fff; border-radius: 50%; display: block; object-fit: cover; } .story-container .story-inner .story-bubbles .bubbles .bubble .text { padding: 5px 0 0 0; } .story-container .story-inner .story-bubbles .bubbles .bubble .text span { font-family: "Poppins", sans-serif; font-size: 0.88em; color: #101010; display: block; width: 100%; font-weight: 400; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; letter-spacing: 0.02em; } .story-container .story-inner .stories { position: absolute; left: 0; top: 0; background-color: rgba(0, 0, 0, 0.9); width: 100%; height: 100%; border-radius: 30px; text-align: left; z-index: 99; color: #fff; opacity: 0; pointer-events: none; visibility: hidden; } .story-container .story-inner .stories.show { opacity: 1; visibility: visible; pointer-events: auto; } .story-container .story-inner .stories .content { position: relative; width: 100%; height: 100%; } .story-container .story-inner .stories .content .st-header { position: absolute; left: 0; top: 40px; z-index: 3; width: 100%; display: flex; align-items: center; justify-content: space-between; padding: 0 15px; } .story-container .story-inner .stories .content .st-header .close-icon { margin-right: 15px; } .story-container .story-inner .stories .content .st-header .close-icon a { text-decoration: none; color: #fff; } .story-container .story-inner .stories .content .st-header .close-icon a em { font-size: 1em; } .story-container .story-inner .stories .content .st-slider { position: relative; } .story-container .story-inner .stories .content .st-slider, .story-container .story-inner .stories .content .st-slider .swiper-container, .story-container .story-inner .stories .content .st-slider .swiper-wrapper, .story-container .story-inner .stories .content .st-slider .swiper-slide, .story-container .story-inner .stories .content .st-slider .item { width: 100%; height: 100%; } .story-container .story-inner .stories .content .st-slider .swiper-wrapper .swiper-slide .item { position: relative; } .story-container .story-inner .stories .content .st-slider .swiper-wrapper .swiper-slide .item::after, .story-container .story-inner .stories .content .st-slider .swiper-wrapper .swiper-slide .item::before { content: ""; width: 100%; height: 50%; position: absolute; z-index: 8; left: 0; } .story-container .story-inner .stories .content .st-slider .swiper-wrapper .swiper-slide .item::after { top: 0; background: linear-gradient(180deg, #1e2129 0%, rgba(30, 33, 41, 0) 100%); } .story-container .story-inner .stories .content .st-slider .swiper-wrapper .swiper-slide .item::before { bottom: 0; background: linear-gradient(180deg, rgba(30, 33, 41, 0) 0%, #1e2129 100%); } .story-container .story-inner .stories .content .st-slider .swiper-wrapper .swiper-slide .item .image { width: 100%; height: 100%; } .story-container .story-inner .stories .content .st-slider .swiper-wrapper .swiper-slide .item .image img { width: 100%; height: 100%; display: block; object-fit: cover; } .story-container .story-inner .stories .content .st-slider .swiper-wrapper .swiper-slide .item .sharing-time { position: absolute; right: 15px; top: 40px; z-index: 9; } .story-container .story-inner .stories .content .st-slider .swiper-wrapper .swiper-slide .item .sharing-time span { font-family: "Poppins", sans-serif; font-weight: 300; font-size: 0.92em; color: #fff; } .story-container .story-inner .stories .content .st-slider .swiper-wrapper .swiper-slide .item .text { position: absolute; left: 0; bottom: 110px; width: 100%; z-index: 1; padding: 0 15px; z-index: 9; } .story-container .story-inner .stories .content .st-slider .swiper-wrapper .swiper-slide .item .text .category span { display: inline-block; background-color: #d62196; font-size: 0.92em; padding: 5px 10px; color: #fff; border-radius: 4px; } .story-container .story-inner .stories .content .st-slider .swiper-wrapper .swiper-slide .item .text .name { margin-top: 15px; } .story-container .story-inner .stories .content .st-slider .swiper-wrapper .swiper-slide .item .text .name > * { font-family: "Poppins", sans-serif; font-weight: 700; color: #fff; font-size: 1.4em; margin: 0; padding: 0; } .story-container .story-inner .stories .content .st-slider .swiper-wrapper .swiper-slide .item .text .capt p { font-size: 1em; line-height: 1.6; margin: 10px 0 0 0; } .story-container .story-inner .stories .content .st-slider .swiper-wrapper .swiper-slide .item .read-btn { position: absolute; left: 0; bottom: 0; padding: 40px 15px; z-index: 11; } .story-container .story-inner .stories .content .st-slider .swiper-wrapper .swiper-slide .item .read-btn a { display: inline-block; font-family: "Poppins", sans-serif; font-weight: 500; letter-spacing: 0.04em; font-size: 1em; color: #fff; text-decoration: none; padding: 13px 22px; border-radius: 4px; background-color: #6915cf; text-transform: uppercase; } .story-container .story-inner .stories .content .st-slider .swiper-wrapper .swiper-slide .item .next, .story-container .story-inner .stories .content .st-slider .swiper-wrapper .swiper-slide .item .prev { position: absolute; top: 0; height: 100%; background-color: transparent; z-index: 10; outline: none; } .story-container .story-inner .stories .content .st-slider .swiper-wrapper .swiper-slide .item .next.next, .story-container .story-inner .stories .content .st-slider .swiper-wrapper .swiper-slide .item .prev.next { right: 0; width: 60%; } .story-container .story-inner .stories .content .st-slider .swiper-wrapper .swiper-slide .item .next.prev, .story-container .story-inner .stories .content .st-slider .swiper-wrapper .swiper-slide .item .prev.prev { left: 0; width: 40%; } .story-container .story-inner .stories .content .st-slider .swiper-pagination { bottom: inherit; top: 0; left: 0; width: 100%; text-align: left; padding: 20px 12px; display: flex; } .story-container .story-inner .stories .content .st-slider .swiper-pagination .swiper-pagination-bullet { position: relative; flex: 1; background-color: rgba(255, 255, 255, 0.2); opacity: 1; border-radius: 0; margin: 0 3px; height: 3px; overflow: hidden; } .story-container .story-inner .stories .content .st-slider .swiper-pagination .swiper-pagination-bullet em { content: ""; position: absolute; left: 0; top: 0; width: 0; height: 100%; background-color: #fff; transition: all 0.2s linear; max-width: 100%; } .story-container .story-inner .lorem-text { background-color: #380e7f; color: #fff; padding: 20px 15px; position: relative; } .story-container .story-inner .lorem-text h2 { margin: 0; padding: 0; font-family: "Poppins", sans-serif; font-size: 1.2em; font-weight: 700; } .story-container .story-inner .lorem-text p { font-size: 0.89em; color: rgba(255, 255, 255, 0.9); line-height: 1.7; } .story-container .story-inner .lorem-image { width: 100%; height: 300px; position: relative; } .story-container .story-inner .lorem-image img { width: 100%; height: 100%; object-fit: cover; } .story-container .story-inner .footer { background-color: #d62196; height: 52px; color: #fff; font-size: 0.82em; line-height: 52px; } نخ دوک کش و بند لایی پرشین سوزن چرخ قیچی دستی پارچه پرده ای /* delete all cookies - make stories unread Object.keys(Cookies.get()).forEach(function(cookieName) { Cookies.remove(cookieName); }); */ const isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent); /*drag scrolling. - js https://codepen.io/toddwebdev/pen/yExKoj */ if(!isMobile){ const slider = document.querySelector('.story-bubbles'); let isDown = false; let startX; let scrollLeft; slider.addEventListener('mousedown', (e) => { isDown = true; slider.classList.add('active'); startX = e.pageX - slider.offsetLeft; scrollLeft = slider.scrollLeft; }); slider.addEventListener('mouseleave', () => { isDown = false; slider.classList.remove('active'); }); slider.addEventListener('mouseup', () => { isDown = false; slider.classList.remove('active'); }); slider.addEventListener('mousemove', (e) => { if(!isDown) return; e.preventDefault(); const x = e.pageX - slider.offsetLeft; const walk = (x - startX) * 1; //scroll-fast slider.scrollLeft = scrollLeft - walk; }); } function is_alphaDash(str){ regexp = /^[a-z\-]+$/i; if (regexp.test(str)){ return true; }else{ return false; } } /*Click Bubble*/ let bubbles = document.querySelectorAll('.story-bubbles .bubbles .bubble'); let storiesContainer = document.querySelector('.stories'); let storiesClose = document.querySelector('.stories .st-header .close-icon a'); let swiper; let delay = 10000; let slidePauseB = false; let newDelay = 0; let countdownFnc; let percentage = 0; let newPercentage = 0; let bullet; let navigationEl = document.querySelectorAll('.next, .prev'); let allPagiProgress; let throttleAmount = 4; let getCookies = Cookies.get(); bubbles.forEach(function($bubble){ let postTitle = $bubble.dataset.postTitle; let postId = $bubble.dataset.postId; if(Object.keys(getCookies).length !== 0 && getCookies.constructor === Object){ for (const [key, value] of Object.entries(Cookies.get())) { if(!is_alphaDash(key)){ }else{ let obj = JSON.parse(value); if(postTitle == key && obj.id == postId && obj.reed == 1){ $bubble.classList.add('read'); $bubble.style.order = obj.order; $bubble.closest('.story-bubbles').querySelector('.bubbles.readon').appendChild($bubble); $bubble.dataset.postReed = 1; $bubble.dataset.postOrder = obj.order; document.querySelectorAll('.swiper-slide').forEach(function($swipe){ let swipePostTitle = $swipe.dataset.postTitle; let swipePostId = $swipe.dataset.postId; if(swipePostTitle == postTitle && swipePostId == postId){ $swipe.dataset.postReed = 1; } }); } } } } $bubble.addEventListener('click', bubbleClick); }); function bubbleClick(e){ let orderArr = []; let maxOrder = 0; let bubble = e.target.closest('.bubble'); let postId = bubble.dataset.postId; let postTitle = bubble.dataset.postTitle; let postReed = bubble.dataset.postReed; let postOrder = bubble.dataset.postOrder; if(Object.keys(Cookies.get()).length !== 0 && Cookies.get().constructor === Object){ for (const [key, value] of Object.entries(Cookies.get())) { if(!is_alphaDash(key)){ }else{ let getCookOrder = JSON.parse(value); orderArr.push(getCookOrder.order); } } maxOrder = Math.min.apply(Math, orderArr); } Cookies.set(postTitle, JSON.stringify({ id: postId, reed: 1, order: parseInt(maxOrder) - 1 })); getCookies = Cookies.get(postTitle); getCookies = JSON.parse(getCookies); storiesContainer.classList.add('show'); if(storiesContainer.classList.contains('show')){ /*stories slider swiper.js*/ function countdown(secs, np = 0, isSlideEnd = false) { let milli = secs * (1000); let st = new Date().getTime(); let isSE = false; percentage = 0; var counter = setInterval(function() { if((percentage + np) == 100) { clearInterval(counter); if(isSlideEnd){ isSE = true; storiesContainer.classList.remove('show'); swiper.destroy(); } } milli -= throttleAmount; newDelay = milli; var diff = Math.round(new Date().getTime() - st); percentage = Math.round(diff / delay * 100); newPercentage = (percentage + np); if(!isSE){ document.querySelector('.st-slider .swiper-pagination .swiper-pagination-bullet-active em').style.width = (percentage + np) + '%'; } }, throttleAmount); return counter; } swiper = new Swiper('.stories .st-slider .swiper-container', { effect: 'cube', init: false, speed: 600, initialSlide: parseInt(postId) - 1, autoplay: { delay: delay, stopOnLastSlide: true, disableOnInteraction: false }, simulateTouch: true, pagination: { el: '.stories .st-slider .swiper-pagination', renderBullet: function (index, className) { return ''; } }, navigation: { nextEl: '.stories .st-slider .next', prevEl: '.stories .st-slider .prev', }, on: { slideChange: function(){ clearInterval(countdownFnc); swiper.autoplay.stop(); swiper.params.autoplay = {delay: delay}; swiper.autoplay.start(); swiper.update(); document.querySelectorAll('.st-slider .swiper-pagination .swiper-pagination-bullet:not(.swiper-pagination-bullet-active) em').forEach(function($el){ $el.style.width = 100 + '%'; }); document.querySelectorAll('.st-slider .swiper-pagination .swiper-pagination-bullet-active ~ .swiper-pagination-bullet em').forEach(function($el){ $el.style.width = 0; }); countdownFnc = countdown(delay / 1000, 0, swiper.isEnd); /*Cookie Add*/ let slideActive = document.querySelector('.swiper-slide-active'); let slideOrderArr = []; let slideMaxOrder = 0; let isCook = false; let slidePostId = slideActive.dataset.postId; let slidePostTitle = slideActive.dataset.postTitle; let slidePostReed = slideActive.dataset.postReed; if(Object.keys(Cookies.get()).length !== 0 && Cookies.get().constructor === Object){ for (const [key, value] of Object.entries(Cookies.get())) { if(!is_alphaDash(key)){ }else{ let obj = JSON.parse(value); let getCookOrder = obj.order; slideOrderArr.push(getCookOrder); if(slidePostTitle == key && obj.id == slidePostId && obj.reed == 1){ isCook = true; } } } slideMaxOrder = Math.min.apply(Math, slideOrderArr); } if(!isCook){ Cookies.set(slidePostTitle, JSON.stringify({ id: slidePostId, reed: 1, order: parseInt(slideMaxOrder) - 1 })); getCookies = Cookies.get(slidePostTitle); getCookies = JSON.parse(getCookies); if(getCookies && getCookies.reed == 1 && slideActive.dataset.postReed == 0){ slideActive.dataset.postReed = 1; bubbles.forEach(function($bubble){ let bubblePostTitle = $bubble.dataset.postTitle; let bubblePostId = $bubble.dataset.postId; if(slidePostTitle == bubblePostTitle && slidePostId == bubblePostId){ $bubble.classList.add('read'); $bubble.style.order = getCookies.order; $bubble.closest('.story-bubbles').querySelector('.bubbles.readon').appendChild($bubble); $bubble.dataset.postReed = 1; $bubble.dataset.postOrder = getCookies.order; } }); } } }, touchStart: function(){ timeStop = setTimeout(slidePause, 600); function slidePause(){ navigationEl.forEach(function($el){ $el.style.display = 'none' }); swiper.autoplay.stop(); clearInterval(countdownFnc); slidePauseB = true; } }, touchEnd: function(){ clearTimeout(timeStop); if(slidePauseB){ navigationEl.forEach(function($el){ $el.style.display = 'block' }); if (!this.autoplay.running) { swiper.params.autoplay = {delay: newDelay}; swiper.autoplay.start(); swiper.update(); } slidePauseB = false; countdownFnc = countdown(Math.round(newDelay / 1000), newPercentage, swiper.isEnd); } } } }); swiper.on('init', function(){ document.querySelectorAll('.st-slider .swiper-pagination .swiper-pagination-bullet:not(.swiper-pagination-bullet-active) em').forEach(function($el){ $el.style.width = 100 + '%'; }); document.querySelectorAll('.st-slider .swiper-pagination .swiper-pagination-bullet-active ~ .swiper-pagination-bullet em').forEach(function($el){ $el.style.width = 0; }); countdownFnc = countdown(delay / 1000, 0, swiper.isEnd); }); swiper.init(); } if(getCookies && getCookies.reed == 1 && bubble.dataset.postReed == 0){ bubble.classList.add('read'); bubble.style.order = getCookies.order; bubble.closest('.story-bubbles').querySelector('.bubbles.readon').appendChild(bubble); bubble.dataset.postReed = 1; bubble.dataset.postOrder = getCookies.order; document.querySelector('.swiper-slide-active').dataset.postReed = 1; } e.preventDefault(); } storiesClose.addEventListener('click', function(e){ storiesContainer.classList.remove('show'); swiper.destroy(); clearInterval(countdownFnc); e.preventDefault(); }); تخفیف شگفت انگیز var swiperrr = new Swiper(".product-slider-swiperrr", { slidesPerView: 5, spaceBetween: 10, navigation: { nextEl: ".swiper-button-next", prevEl: ".swiper-button-prev", }, breakpoints: { 320: { slidesPerView: 2.5, spaceBetween: 20, }, 576: { slidesPerView: 3, spaceBetween: 20, }, 768: { slidesPerView: 3, spaceBetween: 20, }, 1024: { slidesPerView: 3, spaceBetween: 20, }, 1200: { slidesPerView: 4, spaceBetween: 20, }, 1400: { slidesPerView: 5, spaceBetween: 20, }}, }); function updateCountdowns() { const countdownElements = document.querySelectorAll('.countdown'); countdownElements.forEach(countdownElement => { const endTime = countdownElement.dataset.endTime; const remainingTime = endTime - Math.floor(Date.now() / 1000); if (remainingTime بیشتر بخوانید