*{margin: 0; --main-opacity: 1; font-weight: normal; box-sizing: border-box;}.dua-app-demo{height: 768px; width: 558px; overflow: hidden; position: relative; margin: 0 auto; border-radius: 15px; user-select: none;}.dua-app-demo-container{position: relative; margin: 0 auto; height: 100%;}.dua-app-card-container{display: flex; justify-content: center; position: relative; height: 100%; margin: 0 auto;}.dua-app-card{position: absolute; width: 297px; aspect-ratio: 8 / 13; background-color: #fff; border-radius: 32px; overflow: hidden; cursor: grab; user-select: none; transition: .1s all; pointer-events: none;}.dua-app-card:nth-last-child(1){pointer-events: inherit;}.dua-app-card.dua-app-card-transition{transform: translateX(0) rotate(0); animation-name: myMove; animation-duration: 1.5s; animation-timing-function: ease-in-out;}.dua-app-card.dua-app-card-default-state{transform: translateX(40px) rotate(2deg);}@keyframes myMove{0%{transform: translateX(40px) rotate(2deg);}60%{transform: translateX(60px) rotate(4deg);}100%{transform: translateX(0) rotate(0);}}.dua-app-card:after{position: absolute; content: ''; background-color: #E9E9E9; width: 100%; height: 100%; left: 0; top: 0; opacity: var(--main-opacity); transition: .2s all;}.dua-app-card:nth-last-child(1):after{opacity: 0;}.dua-app-card:nth-last-child(2):after{background-color: #E9E9E9;}.dua-app-card:nth-last-child(3):after{background-color: #f4f4f4;}.dua-app-card > div:nth-last-child(1){background-size: cover; background-position: center center; width: 100%; height: 100%; display: flex; align-items: end;}.dua-app-cardData{padding: 40px;}.dua-app-cardData h3{font-size: 28px; line-height: 36px; color: #fff; font-family: 'tt_norms_probold', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif; margin-bottom: 0 !important;}.dua-app-cardData h3 svg{margin-left: 8px;}.dua-app-cardData p{margin-top: 12px; font-size: 14px; line-height: 18px; color: #fff; font-family: 'tt_norms_pronormal', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif; display: flex;}.dua-app-cardData p svg{margin-right: 6px;}.dua-app-card *{user-select: none;}.actionSection{position: absolute; bottom: 27px; right: 119px; display: flex; flex-direction: column; align-items: center; gap: 16px; z-index: 10;}.actionSection button{width: 52px; height: 52px; border-radius: 50%; border: none; cursor: pointer; padding: 0; background: rgba(255, 255, 255, 0.4) !important; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); display: flex; justify-content: center; align-items: center;}.actionSection button:nth-last-child(1){width: 64px; height: 64px; background: rgba(52, 199, 89, 0.8) !important; backdrop-filter: blur(4px);}.actionSection button:nth-last-child(1) svg{width: 28px; height: 28px;}.action-popup{position: fixed; width: 100%; height: 100%; left: 0; top: 0; background-color: rgb(9, 10, 12, .5); transition: .35s all; visibility: hidden; opacity: 0; display: flex; justify-content: center; align-items: center; z-index: 11;}.popup-container{position: relative; text-align: center}.popup-content{background-color: #fff; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08); border-radius: 20px; padding: 40px;}.popup-content img{width: 48px; height: 48px; border-radius: 10px; margin-bottom: 16px;}.download-popup-content{width: 361px;}.popup-container h3{font-size: 20px; line-height: 26px; color: #35393D; font-family: 'tt_norms_probold', -apple-system, sans-serif;}.popup-container p{font-size: 14px; line-height: 18px; color: #626568; font-weight: 400; margin-top: 12px; margin-bottom: 40px; font-family: 'tt_norms_pronormal', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;}.popup-container button{text-align: center; border: none; outline: none; box-shadow: none; cursor: pointer;}.download-popup-buttons{display: flex; flex-direction: column; gap: 16px; align-items: center;}.download-popup-buttons span{width: 170px; height: 48px; background-color: #1F2327 !important; border-radius: 38px; display: flex; justify-content: center; align-items: center;}.popup-container .close-popup{background-color: transparent !important; color: #fff; font-family: 'tt_norms_promedium', -apple-system, sans-serif; font-weight: 500; font-size: 16px; line-height: 20px; margin-top: 32px; padding: inherit !important;}@media only screen and (min-width: 1200px){.dua-app-card:nth-last-child(1){width: 393px; top: 24px;}.dua-app-card:nth-last-child(2){width: 345px; top: 12px;}}@media only screen and (min-width: 576px){.dua-app-demo:after{position: absolute; content: ''; right: 0; top: 0; width: 75px; height: 100%; background: -webkit-linear-gradient(to left, white 0%, rgba(255, 255, 255, 0.738) 19%, rgba(255, 255, 255, 0.541) 34%, rgba(255, 255, 255, 0.382) 47%, rgba(255, 255, 255, 0.278) 56.5%, rgba(255, 255, 255, 0.194) 65%, rgba(255, 255, 255, 0.126) 73%, rgba(255, 255, 255, 0.075) 80.2%, rgba(255, 255, 255, 0.042) 86.1%, rgba(255, 255, 255, 0.021) 91%, rgba(255, 255, 255, 0.008) 95.2%, rgba(255, 255, 255, 0.002) 98.2%, transparent 100%); background: -moz-linear-gradient(to left, white 0%, rgba(255, 255, 255, 0.738) 19%, rgba(255, 255, 255, 0.541) 34%, rgba(255, 255, 255, 0.382) 47%, rgba(255, 255, 255, 0.278) 56.5%, rgba(255, 255, 255, 0.194) 65%, rgba(255, 255, 255, 0.126) 73%, rgba(255, 255, 255, 0.075) 80.2%, rgba(255, 255, 255, 0.042) 86.1%, rgba(255, 255, 255, 0.021) 91%, rgba(255, 255, 255, 0.008) 95.2%, rgba(255, 255, 255, 0.002) 98.2%, transparent 100%); background: linear-gradient(to left, white 0%, rgba(255, 255, 255, 0.738) 19%, rgba(255, 255, 255, 0.541) 34%, rgba(255, 255, 255, 0.382) 47%, rgba(255, 255, 255, 0.278) 56.5%, rgba(255, 255, 255, 0.194) 65%, rgba(255, 255, 255, 0.126) 73%, rgba(255, 255, 255, 0.075) 80.2%, rgba(255, 255, 255, 0.042) 86.1%, rgba(255, 255, 255, 0.021) 91%, rgba(255, 255, 255, 0.008) 95.2%, rgba(255, 255, 255, 0.002) 98.2%, transparent 100%); z-index: 9; user-select: none; pointer-events:none;}.dua-app-demo:before{position: absolute; content: ''; left: 0; top: 0; width: 75px; height: 100%; background: -webkit-linear-gradient(to right, white 0%, rgba(255, 255, 255, 0.738) 19%, rgba(255, 255, 255, 0.541) 34%, rgba(255, 255, 255, 0.382) 47%, rgba(255, 255, 255, 0.278) 56.5%, rgba(255, 255, 255, 0.194) 65%, rgba(255, 255, 255, 0.126) 73%, rgba(255, 255, 255, 0.075) 80.2%, rgba(255, 255, 255, 0.042) 86.1%, rgba(255, 255, 255, 0.021) 91%, rgba(255, 255, 255, 0.008) 95.2%, rgba(255, 255, 255, 0.002) 98.2%, transparent 100%); background: -moz-linear-gradient(to right, white 0%, rgba(255, 255, 255, 0.738) 19%, rgba(255, 255, 255, 0.541) 34%, rgba(255, 255, 255, 0.382) 47%, rgba(255, 255, 255, 0.278) 56.5%, rgba(255, 255, 255, 0.194) 65%, rgba(255, 255, 255, 0.126) 73%, rgba(255, 255, 255, 0.075) 80.2%, rgba(255, 255, 255, 0.042) 86.1%, rgba(255, 255, 255, 0.021) 91%, rgba(255, 255, 255, 0.008) 95.2%, rgba(255, 255, 255, 0.002) 98.2%, transparent 100%); background: linear-gradient(to right, white 0%, rgba(255, 255, 255, 0.738) 19%, rgba(255, 255, 255, 0.541) 34%, rgba(255, 255, 255, 0.382) 47%, rgba(255, 255, 255, 0.278) 56.5%, rgba(255, 255, 255, 0.194) 65%, rgba(255, 255, 255, 0.126) 73%, rgba(255, 255, 255, 0.075) 80.2%, rgba(255, 255, 255, 0.042) 86.1%, rgba(255, 255, 255, 0.021) 91%, rgba(255, 255, 255, 0.008) 95.2%, rgba(255, 255, 255, 0.002) 98.2%, transparent 100%); z-index: 9; user-select: none; pointer-events:none;}.dua-app-demo > div:nth-child(1){position: absolute; content: ''; left: 0; top: 0; height: 75px; width: 100%; background: -webkit-linear-gradient(to bottom, white 0%, rgba(255, 255, 255, 0.738) 19%, rgba(255, 255, 255, 0.541) 34%, rgba(255, 255, 255, 0.382) 47%, rgba(255, 255, 255, 0.278) 56.5%, rgba(255, 255, 255, 0.194) 65%, rgba(255, 255, 255, 0.126) 73%, rgba(255, 255, 255, 0.075) 80.2%, rgba(255, 255, 255, 0.042) 86.1%, rgba(255, 255, 255, 0.021) 91%, rgba(255, 255, 255, 0.008) 95.2%, rgba(255, 255, 255, 0.002) 98.2%, transparent 100%); background: -moz-linear-gradient(to bottom, white 0%, rgba(255, 255, 255, 0.738) 19%, rgba(255, 255, 255, 0.541) 34%, rgba(255, 255, 255, 0.382) 47%, rgba(255, 255, 255, 0.278) 56.5%, rgba(255, 255, 255, 0.194) 65%, rgba(255, 255, 255, 0.126) 73%, rgba(255, 255, 255, 0.075) 80.2%, rgba(255, 255, 255, 0.042) 86.1%, rgba(255, 255, 255, 0.021) 91%, rgba(255, 255, 255, 0.008) 95.2%, rgba(255, 255, 255, 0.002) 98.2%, transparent 100%); background: linear-gradient(to bottom, white 0%, rgba(255, 255, 255, 0.738) 19%, rgba(255, 255, 255, 0.541) 34%, rgba(255, 255, 255, 0.382) 47%, rgba(255, 255, 255, 0.278) 56.5%, rgba(255, 255, 255, 0.194) 65%, rgba(255, 255, 255, 0.126) 73%, rgba(255, 255, 255, 0.075) 80.2%, rgba(255, 255, 255, 0.042) 86.1%, rgba(255, 255, 255, 0.021) 91%, rgba(255, 255, 255, 0.008) 95.2%, rgba(255, 255, 255, 0.002) 98.2%, transparent 100%); z-index: 9; user-select: none; pointer-events:none;}}@media only screen and (min-width: 576px) and (max-width: 1199px){.dua-app-demo-container{height: calc(100% - 60px);}.dua-app-card{width: 264px;}.dua-app-card:nth-last-child(1){width: 350px; top: 24px;}.dua-app-card:nth-last-child(2){width: 302px; top: 12px;}.actionSection{right: 128px; bottom: 36px;}}@media only screen and (max-width: 575px){.dua-app-demo{width: 100%;}.dua-app-demo-container{width: 393px; max-width: calc(100% - 32px);}.popup-content{width: calc(100% - 32px); margin: 0 auto;}.dua-app-card{width: calc(100% - 96px);}.dua-app-card:nth-last-child(2){width: calc(100% - 48px); top: 12px;}.dua-app-card:nth-last-child(1){width: 100%; top: 24px}.actionSection{right: 24px; bottom: 24px;}.dua-app-cardData{padding: 24px}}
let startX,startY,currentX,currentY,isDragging=!1,currentIndex=0,countCardInteractions=0;const documentLang=document.documentElement.lang,stringsByLanguage=[{"en-US":{download_now:"Download now",download_for_the_full_experience:"Download the app for the full experience.",later:"Later",kms_away:" kilometers away"},sq:{download_now:"Shkarko tani",download_for_the_full_experience:"Shkarko aplikacionin për përvojën e plotë.",later:"Më vonë",kms_away:" kilometra larg"},"de-DE":{download_now:"Jetzt herunterladen",download_for_the_full_experience:"Lade die App herunter, um das volle Erlebnis zu haben.",later:"Später",kms_away:" Kilometer entfernt"},"pl-PL":{download_now:"Pobierz teraz",download_for_the_full_experience:"Pobierz aplikację, aby uzyskać pełne wrażenia.",later:"Później",kms_away:" kilometrów"},"ro-RO":{download_now:"Descarca datele",download_for_the_full_experience:"Descărcați aplicația pentru o experiență completă.",later:"Mai tarziu",kms_away:" kilometri distanță"},tr:{download_now:"Şimdi İndirin",download_for_the_full_experience:"Tam deneyim için uygulamayı indirin.",later:"Daha sonra",kms_away:" kilometre uzakta"}}],userCards=[{imgUrl:"https://www.dua.com/wp-content/uploads/2023/06/user-m1.jpg",name:"Bikr",age:29},{imgUrl:"https://www.dua.com/wp-content/uploads/2023/06/user-m2.jpg",name:"Darid",age:31},{imgUrl:"https://www.dua.com/wp-content/uploads/2023/06/user-m3.jpg",name:"Elaid",age:27},{imgUrl:"https://www.dua.com/wp-content/uploads/2023/06/user-m4.jpg",name:"Fael",age:29},{imgUrl:"https://www.dua.com/wp-content/uploads/2023/06/user-m5.jpg",name:"Ilias",age:27},{imgUrl:"https://www.dua.com/wp-content/uploads/2023/06/user-w2-min.jpg",name:"Fatima",age:26},{imgUrl:"https://www.dua.com/wp-content/uploads/2023/06/user-w4-min.jpg",name:"Amina",age:24},{imgUrl:"https://www.dua.com/wp-content/uploads/2023/06/user-w6-min.jpg",name:"Zara",age:31},{imgUrl:"https://www.dua.com/wp-content/uploads/2023/06/user-w1-min-scaled.jpg",name:"Layla",age:28},{imgUrl:"https://www.dua.com/wp-content/uploads/2023/06/user-w3-min-scaled.jpg",name:"Lina",age:24},{imgUrl:"https://www.dua.com/wp-content/uploads/2023/06/user-m6.jpg",name:"Abad",age:26},{imgUrl:"https://www.dua.com/wp-content/uploads/2023/06/user-w5-min-scaled.jpg",name:"Zoya",age:27}];function startDragging(e){startX=e.clientX,startY=e.clientY,isDragging=!0,currentIndex=Array.from(document.querySelectorAll(".dua-app-card")).indexOf(this),document.getElementById("actionSection").style.pointerEvents="none",this.addEventListener("mousedown",startDragging),this.addEventListener("mousemove",drag),this.addEventListener("mouseup",endDragging),this.addEventListener("mouseleave",endDragging)}function drag(e){isDragging&&(currentX=e.clientX-startX,currentY=e.clientY-startY,this.style.transform=`translateX(${currentX}px) translateY(${currentY}px) rotate(${currentX/20}deg)`,this.style.transition="0s all",currentIndex&&document.querySelectorAll(".dua-app-card")&&document.querySelectorAll(".dua-app-card")[currentIndex-1].style.setProperty("--main-opacity","0"))}function endDragging(){isDragging=!1;this.style.transition="0s all",currentX100?swipe("right"):currentY<-100?swipe("up"):(this.style.transform="translateX(0) rotate(0)",currentIndex&&document.querySelectorAll(".dua-app-card")&&document.querySelectorAll(".dua-app-card")[currentIndex-1].style.setProperty("--main-opacity","1")),document.getElementById("actionSection").style.pointerEvents="inherit",this.removeEventListener("mousemove",drag),this.removeEventListener("mouseup",endDragging),this.removeEventListener("mouseleave",endDragging)}function swipe(e){const t=document.querySelectorAll(".dua-app-card");if(t.length<1)return;t.length=3||"up"===e){a.style.transform="translateX(0) rotate(0)",currentIndex&&document.querySelectorAll(".dua-app-card")&&document.querySelectorAll(".dua-app-card")[currentIndex-1].style.setProperty("--main-opacity","1");const e=document.getElementById("download-popup"),t=document.getElementById("dismiss-popup");return e.style.visibility="inherit",e.style.opacity="1",void closePopup(e,t)}"left"===e?a.style.transform="translateX(-800px) rotate(-45deg)":"right"===e?a.style.transform="translateX(800px) rotate(45deg)":"up"===e&&(a.style.transform="translateY(-800px)"),countCardInteractions+=1,setTimeout((()=>{if(a.remove(),3===countCardInteractions){const e=document.getElementById("download-popup"),t=document.getElementById("dismiss-popup");e.style.visibility="inherit",e.style.opacity="1",closePopup(e,t)}}),500)}function closePopup(e,t){t.addEventListener("click",(()=>{e.style.opacity="0",e.style.visibility="hidden"}))}window.onload=()=>{const e=document.getElementById("dua-app-card-container");const t=function(e){let t,a,n=e.length;for(;0!==n;)a=Math.floor(Math.random()*n),n-=1,t=e[n],e[n]=e[a],e[a]=t;return e}(userCards);for(let a=0;a<t.length;a++){const t=document.createElement("div");t.classList.add("dua-app-card"),a===userCards.length-1&&t.classList.add("dua-app-card-default-state"),a===userCards.length-2&&t.style.setProperty("--main-opacity","0");const n=document.createElement("div");n.style.backgroundImage=`url('${userCards[a].imgUrl}')`;const r=document.createElement("div");r.className="dua-app-cardData";const o=document.createElement("h3");o.innerHTML=`${userCards[a].name}, ${userCards[a].age} \n \n \n `;const i=document.createElement("p");i.innerHTML=`\n \n ${Math.floor(10*Math.random())+7} kilometers away`,n.appendChild(r),r.appendChild(o),r.appendChild(i),t.appendChild(n),t.addEventListener("mousedown",startDragging),e.appendChild(t)}let a=document.querySelectorAll(".dua-app-card");const n=a[a.length-1],r=a[a.length-2];if(setTimeout((function(){n.classList.add("dua-app-card-transition")}),800),setTimeout((function(){n.classList.remove("dua-app-card-default-state"),r.style.setProperty("--main-opacity","1")}),2e3),screen.width{e.querySelectorAll("p").forEach((e=>{e.innerText=`${Math.floor(10*Math.random())+5} ${stringsByLanguage[0][documentLang].kms_away}`}))})),document.getElementById("download_app_title_id").innerText=stringsByLanguage[0][documentLang].download_now,document.getElementById("download_app_text_id").innerText=stringsByLanguage[0][documentLang].download_for_the_full_experience,document.getElementById("create_account_later_button_id").innerText=stringsByLanguage[0][documentLang].later}};