diff --git a/assets/css/css/aae-notice-black-friday.css b/assets/css/css/aae-notice-black-friday.css new file mode 100644 index 0000000..f81d184 --- /dev/null +++ b/assets/css/css/aae-notice-black-friday.css @@ -0,0 +1,569 @@ +@import url("https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&display=swap"); +* { + box-sizing: border-box; + margin: 0; + padding: 0; + font-family: "DM Sans", sans-serif; +} + +@font-face { + font-family: GlareRegular; + src: url(PPFragment-GlareRegular); +} +/* Keyframe Animations */ +@keyframes backgroundPulse { + 0%, 100% { + background-size: 100% 100%; + filter: brightness(1); + } + 50% { + background-size: 102% 102%; + filter: brightness(1.05); + } +} +@keyframes float { + 0%, 100% { + transform: translateY(0px) rotate(0deg); + } + 50% { + transform: translateY(-10px) rotate(5deg); + } +} +@keyframes shake { + 0%, 100% { + transform: rotate(0deg); + } + 10% { + transform: rotate(-8deg); + } + 20% { + transform: rotate(8deg); + } + 30% { + transform: rotate(-8deg); + } + 40% { + transform: rotate(8deg); + } + 50% { + transform: rotate(0deg); + } +} +@keyframes buttonShake { + 0%, 100% { + transform: rotate(0deg) scale(1); + } + 25% { + transform: rotate(-5deg) scale(1.05); + } + 75% { + transform: rotate(5deg) scale(1.05); + } +} +@keyframes fallingSlow { + 0% { + top: -10%; + transform: translateX(0) rotate(0deg); + opacity: 0; + } + 10% { + opacity: 1; + } + 90% { + opacity: 1; + } + 100% { + top: 110%; + transform: translateX(100px) rotate(360deg); + opacity: 0; + } +} +@keyframes fallingFast { + 0% { + top: -10%; + transform: translateX(0) rotate(0deg); + opacity: 0; + } + 10% { + opacity: 1; + } + 90% { + opacity: 1; + } + 100% { + top: 110%; + transform: translateX(-80px) rotate(-360deg); + opacity: 0; + } +} +@keyframes fallFromRight { + 0% { + top: -10%; + right: -5%; + transform: rotate(0deg); + opacity: 0; + } + 10% { + opacity: 1; + } + 90% { + opacity: 1; + } + 100% { + top: 110%; + right: 10%; + transform: rotate(360deg); + opacity: 0; + } +} +@keyframes fallFromLeft { + 0% { + top: -10%; + left: -5%; + transform: rotate(0deg); + opacity: 0; + } + 10% { + opacity: 1; + } + 90% { + opacity: 1; + } + 100% { + top: 110%; + left: 15%; + transform: rotate(-360deg); + opacity: 0; + } +} +@keyframes diagonalRightToLeft { + 0% { + top: -10%; + right: -10%; + transform: rotate(0deg) scale(0.8); + opacity: 0; + } + 10% { + opacity: 1; + } + 90% { + opacity: 1; + } + 100% { + top: 110%; + left: -10%; + transform: rotate(-180deg) scale(1); + opacity: 0; + } +} +@keyframes diagonalLeftToRight { + 0% { + top: -10%; + left: -10%; + transform: rotate(0deg) scale(0.8); + opacity: 0; + } + 10% { + opacity: 1; + } + 90% { + opacity: 1; + } + 100% { + top: 110%; + right: -10%; + transform: rotate(180deg) scale(1); + opacity: 0; + } +} +@keyframes spiralFall { + 0% { + top: -10%; + left: 50%; + transform: rotate(0deg) translateX(0); + opacity: 0; + } + 10% { + opacity: 1; + } + 25% { + transform: rotate(90deg) translateX(50px); + } + 50% { + transform: rotate(180deg) translateX(0); + } + 75% { + transform: rotate(270deg) translateX(-50px); + } + 90% { + opacity: 1; + } + 100% { + top: 110%; + left: 50%; + transform: rotate(360deg) translateX(0); + opacity: 0; + } +} +@keyframes floatingGhost { + 0% { + top: -10%; + left: -5%; + transform: translateY(0) rotate(0deg); + opacity: 0; + } + 10% { + opacity: 0.8; + } + 50% { + transform: translateY(-20px) rotate(10deg); + } + 90% { + opacity: 0.8; + } + 100% { + top: 110%; + left: 95%; + transform: translateY(0) rotate(-5deg); + opacity: 0; + } +} +@keyframes zigzagFall { + 0% { + top: -10%; + left: 20%; + opacity: 0; + } + 10% { + opacity: 1; + } + 25% { + left: 30%; + } + 50% { + left: 20%; + } + 75% { + left: 35%; + } + 90% { + opacity: 1; + } + 100% { + top: 110%; + left: 25%; + opacity: 0; + } +} +@keyframes titleGlow { + 0%, 100% { + text-shadow: 0 0 5px rgba(246, 80, 44, 0.3); + } + 50% { + text-shadow: 0 0 20px rgba(246, 80, 44, 0.6), 0 0 30px rgba(246, 80, 44, 0.4); + } +} +@keyframes slideInLeft { + 0% { + opacity: 0; + transform: translateX(-50px); + } + 100% { + opacity: 1; + transform: translateX(0); + } +} +@keyframes fadeInUp { + 0% { + opacity: 0; + transform: translateY(20px); + } + 100% { + opacity: 1; + transform: translateY(0); + } +} +.aae-halloween-container h1, .aae-halloween-container h2, .aae-halloween-container h3, .aae-halloween-container h4, .aae-halloween-container h5, .aae-halloween-container h6 { + margin: 0; + padding: 0; +} + +.aae-halloween-wrapper { + background-color: #000; + background-image: url("../../images/notice/black-friday-bg-2025.png"); + background-repeat: no-repeat; + background-size: 100% 100%; + padding: 5px 0 0px 0; + position: relative; + animation: backgroundPulse 8s ease-in-out infinite; + overflow: hidden; +} +@media (max-width: 1366px) { + .aae-halloween-wrapper { + background-size: cover; + } +} +@media (max-width: 767px) { + .aae-halloween-wrapper { + padding-top: 15px; + padding-bottom: 20px; + } +} + +.falling-element { + position: absolute; + font-size: 30px; + pointer-events: none; + z-index: 10; +} + +/* Top to Bottom - Center variations */ +.falling-element:nth-child(1) { + left: 10%; + animation: fallingSlow 8s linear infinite; + animation-delay: 0s; +} + +.falling-element:nth-child(2) { + left: 30%; + animation: fallingFast 6s linear infinite; + animation-delay: 0s; + font-size: 25px; +} + +.falling-element:nth-child(3) { + left: 50%; + animation: floatingGhost 10s ease-in-out infinite; + animation-delay: 0s; + font-size: 35px; +} + +.falling-element:nth-child(4) { + left: 70%; + animation: fallingSlow 7s linear infinite; + animation-delay: 0s; + font-size: 28px; +} + +.falling-element:nth-child(5) { + left: 85%; + animation: zigzagFall 9s linear infinite; + animation-delay: 0s; + font-size: 32px; +} + +.aae-halloween-item { + display: grid; + grid-template-columns: 0.15fr 1fr; + align-items: center; +} +@media (max-width: 1200px) { + .aae-halloween-item { + grid-template-columns: 0.2fr 1fr; + } +} +@media (max-width: 767px) { + .aae-halloween-item { + grid-template-columns: 1fr; + gap: 30px; + } +} + +.aae-halloween-logo { + display: flex; + align-items: center; + justify-content: end; + padding-right: 35px; + animation: shake 2s ease-in-out infinite; +} +@media (max-width: 767px) { + .aae-halloween-logo { + padding-right: 0; + justify-content: center; + } +} +@media (min-width: 1366px) and (max-width: 1500px) { + .aae-halloween-logo { + margin-left: 15px; + padding-right: 25px; + } +} + +.aae-halloween-logo img { + animation: slideInLeft 0.8s ease-out; +} + +.aae-halloween-content { + position: relative; + padding-left: 40px; +} +@media (min-width: 1366px) and (max-width: 1500px) { + .aae-halloween-content { + padding-left: 30px; + } +} +@media (max-width: 767px) { + .aae-halloween-content { + padding-left: 15px; + } +} +.aae-halloween-content::before { + content: ""; + width: 1px; + height: 112px; + left: 0; + top: 50%; + transform: translateY(-50%); + position: absolute; + background: linear-gradient(189deg, rgba(102, 102, 102, 0) 0%, rgba(102, 102, 102, 0.4) 50%, rgba(102, 102, 102, 0) 100%); +} +@media (max-width: 767px) { + .aae-halloween-content::before { + display: none; + } +} + +.aae-halloween-title { + font-style: normal; + font-weight: 400; + font-size: 24px; + line-height: 1.23; + text-transform: capitalize; + color: #fff; + margin-bottom: 15px; + animation: fadeInUp 0.8s ease-out 0.2s both; +} +.aae-halloween-title span { + color: #f6502c; + position: relative; + animation: titleGlow 2s ease-in-out infinite; +} +.aae-halloween-title span::before { + content: ""; + position: absolute; + bottom: 0; + left: -8px; + background-image: url("../../images/notice/bottom-line.png"); + background-repeat: no-repeat; + width: 88px; + height: 3px; +} + +.aae-halloween-text { + font-family: "DM Sans"; + font-style: normal; + font-weight: 400; + font-size: 15px; + line-height: 1.5; + letter-spacing: -0.01em; + color: #D5D5D5; + margin-bottom: 20px; + animation: fadeInUp 0.8s ease-out 0.4s both; +} +@media (max-width: 1440px) { + .aae-halloween-text { + max-width: 85%; + } +} +@media (max-width: 1366px) { + .aae-halloween-text { + max-width: 100%; + } +} +.aae-halloween-text a { + color: #fff; + transition: 0.2s ease-in-out; +} +.aae-halloween-text a:hover { + color: #f6502c; + text-decoration: none; +} + +.aae-halloween-btns { + display: flex; + gap: 16px; + animation: fadeInUp 0.8s ease-out 0.6s both; + padding-top: 5px; +} + +.aae-halloween-btn { + --halloween-bg: #f6502c; + --white: #fff; + --black: #000; + font-family: "DM Sans"; + font-style: normal; + font-weight: 600; + font-size: 14px; + line-height: 1; + letter-spacing: -0.01em; + color: var(--white); + background-color: var(--halloween-bg); + text-decoration: none; + padding: 8px 16px; + border: 1px solid transparent; + transition: 0.3s ease-in-out; + border-radius: 4px; + display: inline-flex; + align-items: center; + gap: 5px; +} +.aae-halloween-btn.outline { + background: transparent; + color: var(--white); + border: 1px solid var(--white); +} +.aae-halloween-btn.outline:hover { + background: var(--halloween-bg); + color: var(--white); + border: 1px solid transparent; + animation: buttonShake 0.5s ease-in-out; +} +.aae-halloween-btn:hover { + animation: buttonShake 0.5s ease-in-out; + color: var(--white); + box-shadow: 0 4px 18px #B18871; +} + +.aae-notice.notice { + padding: 0 !important; +} + +.aae-halloween-end-shape { + position: absolute; + right: 132px; + bottom: 0; +} +@media (max-width: 1366px) { + .aae-halloween-end-shape { + display: none; + } +} +@media (max-width: 1440px) { + .aae-halloween-end-shape { + right: 25px; + top: 40px; + } +} +@media (max-width: 767px) { + .aae-halloween-end-shape { + display: none; + } +} + +.aae-halloween-close { + position: absolute; + right: 10px; + top: 6px; + text-decoration: none; +} +.aae-halloween-close span { + color: #fff; + font-size: 14px; + padding: 2px; + border-radius: 50%; + border: 1px solid #fff; +} +.aae-halloween-close span:hover { + color: #f6502c; + border: 1px solid #f6502c; +} \ No newline at end of file diff --git a/assets/css/css/aae-notice-black-friday.min.css b/assets/css/css/aae-notice-black-friday.min.css new file mode 100644 index 0000000..b776236 --- /dev/null +++ b/assets/css/css/aae-notice-black-friday.min.css @@ -0,0 +1 @@ +@import url(https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&display=swap);*{box-sizing:border-box;margin:0;padding:0;font-family:"DM Sans",sans-serif}@font-face{font-family:GlareRegular;src:url(PPFragment-GlareRegular)}@keyframes backgroundPulse{0%,100%{background-size:100% 100%;filter:brightness(1)}50%{background-size:102% 102%;filter:brightness(1.05)}}@keyframes float{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-10px) rotate(5deg)}}@keyframes shake{0%,100%{transform:rotate(0)}10%{transform:rotate(-8deg)}20%{transform:rotate(8deg)}30%{transform:rotate(-8deg)}40%{transform:rotate(8deg)}50%{transform:rotate(0)}}@keyframes buttonShake{0%,100%{transform:rotate(0) scale(1)}25%{transform:rotate(-5deg) scale(1.05)}75%{transform:rotate(5deg) scale(1.05)}}@keyframes fallingSlow{0%{top:-10%;transform:translateX(0) rotate(0);opacity:0}10%{opacity:1}90%{opacity:1}100%{top:110%;transform:translateX(100px) rotate(360deg);opacity:0}}@keyframes fallingFast{0%{top:-10%;transform:translateX(0) rotate(0);opacity:0}10%{opacity:1}90%{opacity:1}100%{top:110%;transform:translateX(-80px) rotate(-360deg);opacity:0}}@keyframes fallFromRight{0%{top:-10%;right:-5%;transform:rotate(0);opacity:0}10%{opacity:1}90%{opacity:1}100%{top:110%;right:10%;transform:rotate(360deg);opacity:0}}@keyframes fallFromLeft{0%{top:-10%;left:-5%;transform:rotate(0);opacity:0}10%{opacity:1}90%{opacity:1}100%{top:110%;left:15%;transform:rotate(-360deg);opacity:0}}@keyframes diagonalRightToLeft{0%{top:-10%;right:-10%;transform:rotate(0) scale(.8);opacity:0}10%{opacity:1}90%{opacity:1}100%{top:110%;left:-10%;transform:rotate(-180deg) scale(1);opacity:0}}@keyframes diagonalLeftToRight{0%{top:-10%;left:-10%;transform:rotate(0) scale(.8);opacity:0}10%{opacity:1}90%{opacity:1}100%{top:110%;right:-10%;transform:rotate(180deg) scale(1);opacity:0}}@keyframes spiralFall{0%{top:-10%;left:50%;transform:rotate(0) translateX(0);opacity:0}10%{opacity:1}25%{transform:rotate(90deg) translateX(50px)}50%{transform:rotate(180deg) translateX(0)}75%{transform:rotate(270deg) translateX(-50px)}90%{opacity:1}100%{top:110%;left:50%;transform:rotate(360deg) translateX(0);opacity:0}}@keyframes floatingGhost{0%{top:-10%;left:-5%;transform:translateY(0) rotate(0);opacity:0}10%{opacity:.8}50%{transform:translateY(-20px) rotate(10deg)}90%{opacity:.8}100%{top:110%;left:95%;transform:translateY(0) rotate(-5deg);opacity:0}}@keyframes zigzagFall{0%{top:-10%;left:20%;opacity:0}10%{opacity:1}25%{left:30%}50%{left:20%}75%{left:35%}90%{opacity:1}100%{top:110%;left:25%;opacity:0}}@keyframes titleGlow{0%,100%{text-shadow:0 0 5px rgba(246,80,44,.3)}50%{text-shadow:0 0 20px rgba(246,80,44,.6),0 0 30px rgba(246,80,44,.4)}}@keyframes slideInLeft{0%{opacity:0;transform:translateX(-50px)}100%{opacity:1;transform:translateX(0)}}@keyframes fadeInUp{0%{opacity:0;transform:translateY(20px)}100%{opacity:1;transform:translateY(0)}}.aae-halloween-container h1,.aae-halloween-container h2,.aae-halloween-container h3,.aae-halloween-container h4,.aae-halloween-container h5,.aae-halloween-container h6{margin:0;padding:0}.aae-halloween-wrapper{background-color:#000;background-image:url(../../images/notice/black-friday-bg-2025.png);background-repeat:no-repeat;background-size:100% 100%;padding:5px 0 0 0;position:relative;animation:backgroundPulse 8s ease-in-out infinite;overflow:hidden}@media (max-width:1366px){.aae-halloween-wrapper{background-size:cover}}@media (max-width:767px){.aae-halloween-wrapper{padding-top:15px;padding-bottom:20px}}.falling-element{position:absolute;font-size:30px;pointer-events:none;z-index:10}.falling-element:nth-child(1){left:10%;animation:fallingSlow 8s linear infinite;animation-delay:0s}.falling-element:nth-child(2){left:30%;animation:fallingFast 6s linear infinite;animation-delay:0s;font-size:25px}.falling-element:nth-child(3){left:50%;animation:floatingGhost 10s ease-in-out infinite;animation-delay:0s;font-size:35px}.falling-element:nth-child(4){left:70%;animation:fallingSlow 7s linear infinite;animation-delay:0s;font-size:28px}.falling-element:nth-child(5){left:85%;animation:zigzagFall 9s linear infinite;animation-delay:0s;font-size:32px}.aae-halloween-item{display:grid;grid-template-columns:.15fr 1fr;align-items:center}@media (max-width:1200px){.aae-halloween-item{grid-template-columns:.2fr 1fr}}@media (max-width:767px){.aae-halloween-item{grid-template-columns:1fr;gap:30px}}.aae-halloween-logo{display:flex;align-items:center;justify-content:end;padding-right:35px;animation:shake 2s ease-in-out infinite}@media (max-width:767px){.aae-halloween-logo{padding-right:0;justify-content:center}}@media (min-width:1366px) and (max-width:1500px){.aae-halloween-logo{margin-left:15px;padding-right:25px}}.aae-halloween-logo img{animation:slideInLeft .8s ease-out}.aae-halloween-content{position:relative;padding-left:40px}@media (min-width:1366px) and (max-width:1500px){.aae-halloween-content{padding-left:30px}}@media (max-width:767px){.aae-halloween-content{padding-left:15px}}.aae-halloween-content::before{content:"";width:1px;height:112px;left:0;top:50%;transform:translateY(-50%);position:absolute;background:linear-gradient(189deg,rgba(102,102,102,0) 0,rgba(102,102,102,.4) 50%,rgba(102,102,102,0) 100%)}@media (max-width:767px){.aae-halloween-content::before{display:none}}.aae-halloween-title{font-style:normal;font-weight:400;font-size:24px;line-height:1.23;text-transform:capitalize;color:#fff;margin-bottom:15px;animation:fadeInUp .8s ease-out .2s both}.aae-halloween-title span{color:#f6502c;position:relative;animation:titleGlow 2s ease-in-out infinite}.aae-halloween-title span::before{content:"";position:absolute;bottom:0;left:-8px;background-image:url(../../images/notice/bottom-line.png);background-repeat:no-repeat;width:88px;height:3px}.aae-halloween-text{font-family:"DM Sans";font-style:normal;font-weight:400;font-size:15px;line-height:1.5;letter-spacing:-.01em;color:#d5d5d5;margin-bottom:20px;animation:fadeInUp .8s ease-out .4s both}@media (max-width:1440px){.aae-halloween-text{max-width:85%}}@media (max-width:1366px){.aae-halloween-text{max-width:100%}}.aae-halloween-text a{color:#fff;transition:.2s ease-in-out}.aae-halloween-text a:hover{color:#f6502c;text-decoration:none}.aae-halloween-btns{display:flex;gap:16px;animation:fadeInUp .8s ease-out .6s both;padding-top:5px}.aae-halloween-btn{--halloween-bg:#f6502c;--white:#fff;--black:#000;font-family:"DM Sans";font-style:normal;font-weight:600;font-size:14px;line-height:1;letter-spacing:-.01em;color:var(--white);background-color:var(--halloween-bg);text-decoration:none;padding:8px 16px;border:1px solid transparent;transition:.3s ease-in-out;border-radius:4px;display:inline-flex;align-items:center;gap:5px}.aae-halloween-btn.outline{background:0 0;color:var(--white);border:1px solid var(--white)}.aae-halloween-btn.outline:hover{background:var(--halloween-bg);color:var(--white);border:1px solid transparent;animation:buttonShake .5s ease-in-out}.aae-halloween-btn:hover{animation:buttonShake .5s ease-in-out;color:var(--white);box-shadow:0 4px 18px #b18871}.aae-notice.notice{padding:0!important}.aae-halloween-end-shape{position:absolute;right:132px;bottom:0}@media (max-width:1366px){.aae-halloween-end-shape{display:none}}@media (max-width:1440px){.aae-halloween-end-shape{right:25px;top:40px}}@media (max-width:767px){.aae-halloween-end-shape{display:none}}.aae-halloween-close{position:absolute;right:10px;top:6px;text-decoration:none}.aae-halloween-close span{color:#fff;font-size:14px;padding:2px;border-radius:50%;border:1px solid #fff}.aae-halloween-close span:hover{color:#f6502c;border:1px solid #f6502c} \ No newline at end of file diff --git a/assets/images/notice/black-friday-bg-2025.png b/assets/images/notice/black-friday-bg-2025.png new file mode 100644 index 0000000..1b544f9 Binary files /dev/null and b/assets/images/notice/black-friday-bg-2025.png differ diff --git a/assets/images/notice/black-friday-offer.png b/assets/images/notice/black-friday-offer.png new file mode 100644 index 0000000..4b60b7b Binary files /dev/null and b/assets/images/notice/black-friday-offer.png differ diff --git a/assets/images/notice/black-friday-shape-1.png b/assets/images/notice/black-friday-shape-1.png new file mode 100644 index 0000000..08dccd5 Binary files /dev/null and b/assets/images/notice/black-friday-shape-1.png differ diff --git a/assets/images/notice/hallowen-bg.png b/assets/images/notice/hallowen-bg-2025.png similarity index 100% rename from assets/images/notice/hallowen-bg.png rename to assets/images/notice/hallowen-bg-2025.png diff --git a/assets/src/notices/css/aae-notice-black-friday.css b/assets/src/notices/css/aae-notice-black-friday.css new file mode 100644 index 0000000..c237050 --- /dev/null +++ b/assets/src/notices/css/aae-notice-black-friday.css @@ -0,0 +1,558 @@ +@import url("https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&display=swap"); +* { + box-sizing: border-box; + margin: 0; + padding: 0; + font-family: "DM Sans", sans-serif; +} +@font-face { + font-family: GlareRegular; + src: url(PPFragment-GlareRegular); +} + +/* Keyframe Animations */ +@keyframes backgroundPulse { + 0%, 100% { + background-size: 100% 100%; + filter: brightness(1); + } + 50% { + background-size: 102% 102%; + filter: brightness(1.05); + } +} + +@keyframes float { + 0%, 100% { + transform: translateY(0px) rotate(0deg); + } + 50% { + transform: translateY(-10px) rotate(5deg); + } +} + +@keyframes shake { + 0%, 100% { + transform: rotate(0deg); + } + 10% { + transform: rotate(-8deg); + } + 20% { + transform: rotate(8deg); + } + 30% { + transform: rotate(-8deg); + } + 40% { + transform: rotate(8deg); + } + 50% { + transform: rotate(0deg); + } +} + +@keyframes buttonShake { + 0%, 100% { + transform: rotate(0deg) scale(1); + } + 25% { + transform: rotate(-5deg) scale(1.05); + } + 75% { + transform: rotate(5deg) scale(1.05); + } +} + +@keyframes fallingSlow { + 0% { + top: -10%; + transform: translateX(0) rotate(0deg); + opacity: 0; + } + 10% { + opacity: 1; + } + 90% { + opacity: 1; + } + 100% { + top: 110%; + transform: translateX(100px) rotate(360deg); + opacity: 0; + } +} + +@keyframes fallingFast { + 0% { + top: -10%; + transform: translateX(0) rotate(0deg); + opacity: 0; + } + 10% { + opacity: 1; + } + 90% { + opacity: 1; + } + 100% { + top: 110%; + transform: translateX(-80px) rotate(-360deg); + opacity: 0; + } +} + +@keyframes fallFromRight { + 0% { + top: -10%; + right: -5%; + transform: rotate(0deg); + opacity: 0; + } + 10% { + opacity: 1; + } + 90% { + opacity: 1; + } + 100% { + top: 110%; + right: 10%; + transform: rotate(360deg); + opacity: 0; + } +} + +@keyframes fallFromLeft { + 0% { + top: -10%; + left: -5%; + transform: rotate(0deg); + opacity: 0; + } + 10% { + opacity: 1; + } + 90% { + opacity: 1; + } + 100% { + top: 110%; + left: 15%; + transform: rotate(-360deg); + opacity: 0; + } +} + +@keyframes diagonalRightToLeft { + 0% { + top: -10%; + right: -10%; + transform: rotate(0deg) scale(0.8); + opacity: 0; + } + 10% { + opacity: 1; + } + 90% { + opacity: 1; + } + 100% { + top: 110%; + left: -10%; + transform: rotate(-180deg) scale(1); + opacity: 0; + } +} + +@keyframes diagonalLeftToRight { + 0% { + top: -10%; + left: -10%; + transform: rotate(0deg) scale(0.8); + opacity: 0; + } + 10% { + opacity: 1; + } + 90% { + opacity: 1; + } + 100% { + top: 110%; + right: -10%; + transform: rotate(180deg) scale(1); + opacity: 0; + } +} + +@keyframes spiralFall { + 0% { + top: -10%; + left: 50%; + transform: rotate(0deg) translateX(0); + opacity: 0; + } + 10% { + opacity: 1; + } + 25% { + transform: rotate(90deg) translateX(50px); + } + 50% { + transform: rotate(180deg) translateX(0); + } + 75% { + transform: rotate(270deg) translateX(-50px); + } + 90% { + opacity: 1; + } + 100% { + top: 110%; + left: 50%; + transform: rotate(360deg) translateX(0); + opacity: 0; + } +} + +@keyframes floatingGhost { + 0% { + top: -10%; + left: -5%; + transform: translateY(0) rotate(0deg); + opacity: 0; + } + 10% { + opacity: 0.8; + } + 50% { + transform: translateY(-20px) rotate(10deg); + } + 90% { + opacity: 0.8; + } + 100% { + top: 110%; + left: 95%; + transform: translateY(0) rotate(-5deg); + opacity: 0; + } +} + +@keyframes zigzagFall { + 0% { + top: -10%; + left: 20%; + opacity: 0; + } + 10% { + opacity: 1; + } + 25% { + left: 30%; + } + 50% { + left: 20%; + } + 75% { + left: 35%; + } + 90% { + opacity: 1; + } + 100% { + top: 110%; + left: 25%; + opacity: 0; + } +} + +@keyframes titleGlow { + 0%, 100% { + text-shadow: 0 0 5px rgba(246, 80, 44, 0.3); + } + 50% { + text-shadow: 0 0 20px rgba(246, 80, 44, 0.6), 0 0 30px rgba(246, 80, 44, 0.4); + } +} + +@keyframes slideInLeft { + 0% { + opacity: 0; + transform: translateX(-50px); + } + 100% { + opacity: 1; + transform: translateX(0); + } +} + +@keyframes fadeInUp { + 0% { + opacity: 0; + transform: translateY(20px); + } + 100% { + opacity: 1; + transform: translateY(0); + } +} +.aae-halloween-container{ + h1,h2,h3,h4,h5,h6{ + margin: 0; + padding: 0; + } +} +.aae-halloween-wrapper { + background-color: #000; + background-image: url("../../images/notice/black-friday-bg-2025.png"); + background-repeat: no-repeat; + background-size: 100% 100%; + padding: 5px 0 0px 0; + position: relative; + animation: backgroundPulse 8s ease-in-out infinite; + overflow: hidden; + @media (max-width:1366px){ + background-size: cover; + } + @media (max-width:767px){ + padding-top: 15px; + padding-bottom: 20px; + } +} + +.falling-element { + position: absolute; + font-size: 30px; + pointer-events: none; + z-index: 10; +} + +/* Top to Bottom - Center variations */ +.falling-element:nth-child(1) { + left: 10%; + animation: fallingSlow 8s linear infinite; + animation-delay: 0s; +} + +.falling-element:nth-child(2) { + left: 30%; + animation: fallingFast 6s linear infinite; + animation-delay: 0s; + font-size: 25px; +} + +.falling-element:nth-child(3) { + left: 50%; + animation: floatingGhost 10s ease-in-out infinite; + animation-delay: 0s; + font-size: 35px; +} + +.falling-element:nth-child(4) { + left: 70%; + animation: fallingSlow 7s linear infinite; + animation-delay: 0s; + font-size: 28px; +} + +.falling-element:nth-child(5) { + left: 85%; + animation: zigzagFall 9s linear infinite; + animation-delay: 0s; + font-size: 32px; +} + +.aae-halloween-item { + display: grid; + grid-template-columns: 0.15fr 1fr; + align-items: center; + @media (max-width: 1200px) { + grid-template-columns: .2fr 1fr; + } + @media (max-width: 767px) { + grid-template-columns: 1fr; + gap: 30px; + } +} +.aae-halloween-logo { + display: flex; + align-items: center; + justify-content: end; + padding-right: 35px; + animation: shake 2s ease-in-out infinite; + @media (max-width:767px){ + padding-right: 0; + justify-content: center; + } + + @media (min-width: 1366px) and (max-width: 1500px){ + margin-left: 15px; + padding-right: 25px; + } +} +.aae-halloween-logo img { + animation: slideInLeft 0.8s ease-out; +} +.aae-halloween-content { + position: relative; + padding-left: 40px; + + @media (min-width: 1366px) and (max-width: 1500px){ + padding-left: 30px; + } + + @media (max-width:767px){ + padding-left: 15px; + } + &::before { + content: ""; + width: 1px; + height: 112px; + left: 0; + top: 50%; + transform: translateY(-50%); + position: absolute; + background: linear-gradient( + 189deg, + rgba(102, 102, 102, 0) 0%, + rgba(102, 102, 102, 0.4) 50%, + rgba(102, 102, 102, 0) 100% + ); + @media (max-width: 767px) { + display: none; + } + } +} +.aae-halloween-title { + font-style: normal; + font-weight: 400; + font-size: 24px; + line-height: 1.23; + text-transform: capitalize; + color: #fff; + margin-bottom: 15px; + animation: fadeInUp 0.8s ease-out 0.2s both; + span{ + color: #f6502c; + position: relative; + animation: titleGlow 2s ease-in-out infinite; + &::before{ + content: ""; + position: absolute; + bottom: 0; + left: -8px; + background-image: url('../../images/notice/bottom-line.png'); + background-repeat: no-repeat; + width: 88px; + height: 3px; + } + } +} +.aae-halloween-text { + font-family: "DM Sans"; + font-style: normal; + font-weight: 400; + font-size: 15px; + line-height: 1.5; + letter-spacing: -0.01em; + color: #D5D5D5; + margin-bottom: 20px; + animation: fadeInUp 0.8s ease-out 0.4s both; + @media (max-width:1440px){ + max-width: 85%; + } + @media (max-width:1366px){ + max-width: 100%; + } + a{ + color: #fff; + transition: 0.2s ease-in-out; + &:hover{ + color: #f6502c; + text-decoration: none; + } + } +} +.aae-halloween-btns { + display: flex; + gap: 16px; + animation: fadeInUp 0.8s ease-out 0.6s both; + padding-top: 5px; +} +.aae-halloween-btn { + --halloween-bg: #f6502c; + --white: #fff; + --black: #000; + font-family: "DM Sans"; + font-style: normal; + font-weight: 600; + font-size: 14px; + line-height: 1; + letter-spacing: -0.01em; + color: var(--white); + background-color: var(--halloween-bg); + text-decoration: none; + padding: 8px 16px; + border: 1px solid transparent; + transition: 0.3s ease-in-out; + border-radius: 4px; + display: inline-flex; + align-items: center; + gap: 5px; + &.outline{ + background: transparent; + color: var(--white); + border: 1px solid var(--white); + &:hover{ + background: var(--halloween-bg); + color: var(--white); + border: 1px solid transparent; + animation: buttonShake 0.5s ease-in-out; + } + } + &:hover { + animation: buttonShake 0.5s ease-in-out; + color: var(--white); + box-shadow: 0 4px 18px #B18871; + } +} + +.aae-notice.notice { + padding: 0 !important; +} +.aae-halloween-end-shape { + position: absolute; + right: 132px; + bottom: 0; + @media (max-width:1366px){ + display: none; + } + @media (max-width:1440px){ + right: 25px; + top: 40px; + } + @media (max-width:767px){ + display: none; + } +} + +.aae-halloween-close { + position: absolute; + right: 10px; + top: 6px; + text-decoration: none; + span { + color: #fff; + font-size: 14px; + padding: 2px; + border-radius: 50%; + border: 1px solid #fff; + + &:hover { + color: #f6502c; + border: 1px solid #f6502c; + } + } +} \ No newline at end of file diff --git a/inc/admin/Notices/Notices.php b/inc/admin/Notices/Notices.php index 0d9ef3e..f5a793d 100644 --- a/inc/admin/Notices/Notices.php +++ b/inc/admin/Notices/Notices.php @@ -68,7 +68,7 @@ public function __construct() { */ public function enqueue_scripts() { wp_register_style( 'aae-notice', WCF_ADDONS_URL . 'assets/css/css/notice.css', array(), WCF_ADDONS_VERSION ); - wp_register_style( 'aae-notice-halloween', WCF_ADDONS_URL . 'assets/css/css/halloween-2025.css', array(), WCF_ADDONS_VERSION ); + wp_register_style( 'aae-notice-black-friday', WCF_ADDONS_URL . 'assets/css/css/aae-notice-black-friday.css', array(), WCF_ADDONS_VERSION ); wp_register_script( 'aae-notice', WCF_ADDONS_URL . 'assets/js/js/notice.js', array( 'jquery' ), WCF_ADDONS_VERSION, true ); } @@ -80,14 +80,22 @@ public function enqueue_scripts() { public function add_admin_notices() { $installed_time = absint( get_option( 'aae_installed' ) ); $current_time = absint( wp_date( 'U' ) ); + + $timezone = wp_timezone(); + + // Define your start and end dates in the same timezone + $start_time = ( new \DateTime( '2025-11-06 00:00:00', $timezone ) )->getTimestamp(); + $end_time = ( new \DateTime( '2025-12-05 23:59:59', $timezone ) )->getTimestamp(); + $plugin_file = WP_PLUGIN_DIR . '/animation-addons-for-elementor-pro/animation-addons-for-elementor-pro.php'; - if ( !file_exists( $plugin_file ) ) { - wp_enqueue_style( 'aae-notice-halloween' ); + + if ( file_exists( $plugin_file ) && $current_time >= $start_time && $current_time <= $end_time ) { + wp_enqueue_style( 'aae-notice-black-friday' ); $this->add( array( - 'message' => __DIR__ . '/views/halloween-2025.php', - 'notice_id' => 'aae_halloween', - 'style' => 'border-left-color: #FC6848; border-radius: 6px; overflow: hidden;', + 'message' => __DIR__ . '/views/black-friday-2025.php', + 'notice_id' => 'aae_black_friday_2025_notice', + 'style' => 'border-left-color: #000000; border-radius: 6px; overflow: hidden;', 'dismissible' => false, ) ); diff --git a/inc/admin/Notices/views/black-friday-2025.php b/inc/admin/Notices/views/black-friday-2025.php new file mode 100644 index 0000000..a29667e --- /dev/null +++ b/inc/admin/Notices/views/black-friday-2025.php @@ -0,0 +1,60 @@ + +
+ Animation Addons +
+
+ +
+

+ $1050!', 'animation-addons-for-elementor' ) + ) + ); + ?> +

+

+ Black Friday!', 'animation-addons-for-elementor' ), + 'Animation Addons for Elementor Pro', + '70% discount' + ) + ); + ?> + +

+
+ + + + + + + + +
+
+
+
+ + + +
+ diff --git a/widgets/toggle-switcher.php b/widgets/toggle-switcher.php index 50447dc..2e30c24 100644 --- a/widgets/toggle-switcher.php +++ b/widgets/toggle-switcher.php @@ -10,7 +10,7 @@ use Elementor\Widget_Base; use Elementor\Controls_Manager; -if (! defined('ABSPATH')) { +if ( ! defined( 'ABSPATH' ) ) { exit; } // Exit if accessed directly @@ -21,8 +21,8 @@ * * @since 1.0.0 */ -class Toggle_Switcher extends Widget_Base -{ +class Toggle_Switcher extends Widget_Base { + /** * Retrieve the widget name. @@ -32,8 +32,7 @@ class Toggle_Switcher extends Widget_Base * * @access public */ - public function get_name() - { + public function get_name() { return 'wcf--toggle-switch'; } @@ -45,9 +44,8 @@ public function get_name() * * @access public */ - public function get_title() - { - return esc_html__('Toggle Switch', 'animation-addons-for-elementor'); + public function get_title() { + return esc_html__( 'Toggle Switch', 'animation-addons-for-elementor' ); } /** @@ -58,8 +56,7 @@ public function get_title() * * @access public */ - public function get_icon() - { + public function get_icon() { return 'wcf eicon-t-letter'; } @@ -76,9 +73,8 @@ public function get_icon() * * @access public */ - public function get_categories() - { - return ['weal-coder-addon']; + public function get_categories() { + return array( 'weal-coder-addon' ); } /** @@ -86,15 +82,13 @@ public function get_categories() * * @return array */ - public function get_style_depends() - { - return ['wcf--toggle-switch']; + public function get_style_depends() { + return array( 'wcf--toggle-switch' ); } - public function get_script_depends() - { - return ['aae--switcher-toggle']; - } + public function get_script_depends() { + return array( 'aae--switcher-toggle' ); + } /** * Register the widget controls. @@ -105,432 +99,459 @@ public function get_script_depends() * * @access protected */ - protected function register_controls() - { + protected function register_controls() { $this->start_controls_section( 'section_toggle_switch', - [ - 'label' => esc_html__('Toggle Switch', 'animation-addons-for-elementor'), + array( + 'label' => esc_html__( 'Toggle Switch', 'animation-addons-for-elementor' ), 'tab' => Controls_Manager::TAB_CONTENT, - ] + ) ); $this->add_control( 'element_list', - [ - 'label' => esc_html__('Style', 'animation-addons-for-elementor'), + array( + 'label' => esc_html__( 'Style', 'animation-addons-for-elementor' ), 'type' => Controls_Manager::SELECT, 'default' => '1', - 'options' => [ - '1' => esc_html__('One', 'animation-addons-for-elementor'), - '2' => esc_html__('Two', 'animation-addons-for-elementor'), - ], - ] + 'options' => array( + '1' => esc_html__( 'One', 'animation-addons-for-elementor' ), + '2' => esc_html__( 'Two', 'animation-addons-for-elementor' ), + ), + ) ); $repeater = new Repeater(); $repeater->add_control( 'switch_title', - [ - 'label' => esc_html__('Title', 'animation-addons-for-elementor'), + array( + 'label' => esc_html__( 'Title', 'animation-addons-for-elementor' ), 'type' => Controls_Manager::TEXT, - 'placeholder' => esc_html__('Monthly', 'animation-addons-for-elementor'), - ] + 'placeholder' => esc_html__( 'Monthly', 'animation-addons-for-elementor' ), + ) ); $repeater->add_control( 'content_type', - [ - 'label' => esc_html__('Content Type', 'animation-addons-for-elementor'), + array( + 'label' => esc_html__( 'Content Type', 'animation-addons-for-elementor' ), 'type' => Controls_Manager::SELECT, - 'options' => [ - 'content' => esc_html__('Content', 'animation-addons-for-elementor'), - 'template' => esc_html__('Saved Templates', 'animation-addons-for-elementor'), - ], + 'options' => array( + 'content' => esc_html__( 'Content', 'animation-addons-for-elementor' ), + 'template' => esc_html__( 'Saved Templates', 'animation-addons-for-elementor' ), + ), 'default' => 'content', - ] + ) ); $repeater->add_control( 'elementor_templates', - [ - 'label' => esc_html__('Save Template', 'animation-addons-for-elementor'), + array( + 'label' => esc_html__( 'Save Template', 'animation-addons-for-elementor' ), 'type' => Controls_Manager::SELECT2, 'label_block' => false, 'multiple' => false, 'options' => wcf_addons_get_saved_template_list(), - 'condition' => [ + 'condition' => array( 'content_type' => 'template', - ], - ] + ), + ) ); $repeater->add_control( 'switch_content', - [ - 'label' => esc_html__('Content', 'animation-addons-for-elementor'), - 'default' => esc_html__('Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.', 'animation-addons-for-elementor'), + array( + 'label' => esc_html__( 'Content', 'animation-addons-for-elementor' ), + 'default' => esc_html__( 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.', 'animation-addons-for-elementor' ), 'type' => Controls_Manager::WYSIWYG, - 'condition' => [ + 'condition' => array( 'content_type' => 'content', - ], - ] + ), + ) ); $this->add_control( 'toggle_switcher', - [ - 'label' => esc_html__('Toggle Switcher', 'animation-addons-for-elementor'), + array( + 'label' => esc_html__( 'Toggle Switcher', 'animation-addons-for-elementor' ), 'type' => Controls_Manager::REPEATER, 'fields' => $repeater->get_controls(), - 'item_actions' => [ + 'item_actions' => array( 'add' => false, 'duplicate' => false, 'remove' => false, 'sort' => true, - ], - 'default' => [ - ['switch_title' => 'Monthly'], - ['switch_title' => 'Yearly'] - ], + ), + 'default' => array( + array( 'switch_title' => 'Monthly' ), + array( 'switch_title' => 'Yearly' ), + ), 'title_field' => '{{{ switch_title }}}', - ] + ) ); $this->add_responsive_control( 'toggle_gap', - [ - 'label' => esc_html__('Gap', 'animation-addons-for-elementor'), + array( + 'label' => esc_html__( 'Gap', 'animation-addons-for-elementor' ), 'type' => Controls_Manager::SLIDER, - 'size_units' => ['px', '%', 'em', 'rem', 'custom'], + 'size_units' => array( 'px', '%', 'em', 'rem', 'custom' ), 'separator' => 'before', - 'range' => [ - 'px' => [ + 'range' => array( + 'px' => array( 'min' => 0, 'max' => 200, - ], - '%' => [ + ), + '%' => array( 'min' => 0, 'max' => 100, - ], - ], - 'selectors' => [ + ), + ), + 'selectors' => array( '{{WRAPPER}} .slide-toggle-wrapper' => 'gap: {{SIZE}}{{UNIT}};', - ], - ] + ), + ) ); $this->add_responsive_control( 'toggle_bottom_space', - [ - 'label' => esc_html__('Bottom Space', 'animation-addons-for-elementor'), + array( + 'label' => esc_html__( 'Bottom Space', 'animation-addons-for-elementor' ), 'type' => Controls_Manager::SLIDER, - 'size_units' => ['px', '%', 'em', 'rem', 'custom'], + 'size_units' => array( 'px', '%', 'em', 'rem', 'custom' ), 'separator' => 'before', - 'range' => [ - 'px' => [ + 'range' => array( + 'px' => array( 'min' => 0, 'max' => 200, - ], - '%' => [ + ), + '%' => array( 'min' => 0, 'max' => 100, - ], - ], - 'selectors' => [ + ), + ), + 'selectors' => array( '{{WRAPPER}} .slide-toggle-wrapper' => 'margin-bottom: {{SIZE}}{{UNIT}};', - ], - ] + ), + ) ); $this->end_controls_section(); - //switcher wrapper + // switcher wrapper $this->start_controls_section( 'section_style_switcher_wrap', - [ - 'label' => __('Switcher Wrapper', 'animation-addons-for-elementor'), - 'tab' => Controls_Manager::TAB_STYLE, - ] - ); - - $this->add_group_control( - Group_Control_Background::get_type(), - [ - 'name' => 'switcher_wrap_background', - 'types' => ['classic', 'gradient'], - 'selector' => '{{WRAPPER}} .slide-toggle-wrapper', - ] + array( + 'label' => __( 'Switcher Wrap', 'animation-addons-for-elementor' ), + 'tab' => Controls_Manager::TAB_STYLE, + 'condition' => array( 'element_list' => '1' ), + ) ); $this->add_responsive_control( - 'switcher_wrap_padding', - [ - 'label' => esc_html__('Padding', 'animation-addons-for-elementor'), - 'type' => Controls_Manager::DIMENSIONS, - 'size_units' => ['px', '%'], - 'selectors' => [ - '{{WRAPPER}} .slide-toggle-wrapper' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};', - ], - ] + 'switcher_wrapper_alignment', + array( + 'label' => esc_html__( 'Alignment', 'animation-addons-for-elementor' ), + 'type' => Controls_Manager::CHOOSE, + 'options' => array( + 'flex-start' => array( + 'title' => esc_html__( 'Left', 'animation-addons-for-elementor' ), + 'icon' => 'eicon-text-align-left', + ), + 'center' => array( + 'title' => esc_html__( 'Center', 'animation-addons-for-elementor' ), + 'icon' => 'eicon-text-align-center', + ), + 'flex-end' => array( + 'title' => esc_html__( 'Right', 'animation-addons-for-elementor' ), + 'icon' => 'eicon-text-align-right', + ), + ), + 'default' => 'center', + 'selectors' => array( + '{{WRAPPER}} .slide-toggle-wrapper' => 'justify-content: {{VALUE}};', + ), + ) ); - $this->add_group_control( - Group_Control_Border::get_type(), - [ - 'name' => 'switcher_wrap_border', - 'selector' => '{{WRAPPER}} .slide-toggle-wrapper', - ] + $this->add_responsive_control( + 'switcher_wrapper_gap', + array( + 'label' => esc_html__( 'Gap', 'animation-addons-for-elementor' ), + 'type' => Controls_Manager::SLIDER, + 'size_units' => array( 'px' ), + 'range' => array( + 'px' => array( + 'min' => 0, + 'max' => 100, + ), + ), + 'default' => array( + 'unit' => 'px', + 'size' => 10, + ), + 'selectors' => array( + '{{WRAPPER}} .slide-toggle-wrapper' => 'gap: {{SIZE}}{{UNIT}};', + ), + ) ); - $this->add_control( - 'switcher_wrap_radius', - [ - 'label' => esc_html__('Border Radius', 'animation-addons-for-elementor'), + $this->add_responsive_control( + 'switcher_wrapper_margin', + array( + 'label' => esc_html__( 'Margin', 'animation-addons-for-elementor' ), 'type' => Controls_Manager::DIMENSIONS, - 'size_units' => ['px', '%'], - 'selectors' => [ - '{{WRAPPER}} .slide-toggle-wrapper' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};', - ], - ] + 'size_units' => array( 'px', '%', 'em' ), + 'selectors' => array( + '{{WRAPPER}} .slide-toggle-wrapper' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};', + ), + ) ); $this->end_controls_section(); - //switcher $this->start_controls_section( 'section_style_Switcher', - [ - 'label' => __('Switcher', 'animation-addons-for-elementor'), - 'tab' => Controls_Manager::TAB_STYLE, - 'condition' => ['element_list' => '1'] - ] + array( + 'label' => __( 'Switcher', 'animation-addons-for-elementor' ), + 'tab' => Controls_Manager::TAB_STYLE, + 'condition' => array( 'element_list' => '1' ), + ) ); - $this->add_control( + $this->add_responsive_control( 'switcher_width', - [ - 'label' => esc_html__('Width', 'animation-addons-for-elementor'), + array( + 'label' => esc_html__( 'Width', 'animation-addons-for-elementor' ), 'type' => Controls_Manager::SLIDER, - 'size_units' => ['px'], - 'range' => [ - 'px' => [ - 'min' => 0, - 'max' => 200, - ], - ], - 'selectors' => [ + 'size_units' => array( 'px' ), + 'range' => array( + 'px' => array( + 'min' => 0, + 'max' => 200, + ), + ), + 'default' => array( + 'unit' => 'px', + 'size' => 40, + ), + 'selectors' => array( '{{WRAPPER}} .slide-toggle-wrapper' => '--switcher-width: {{SIZE}}{{UNIT}};', - ], - ] + '{{WRAPPER}} .switcher' => 'width: {{SIZE}}{{UNIT}};', + ), + ) ); - $this->add_control( + $this->add_responsive_control( 'switcher_height', - [ - 'label' => esc_html__('Height', 'animation-addons-for-elementor'), + array( + 'label' => esc_html__( 'Height', 'animation-addons-for-elementor' ), 'type' => Controls_Manager::SLIDER, - 'size_units' => ['px'], - 'range' => [ - 'px' => [ - 'min' => 0, - 'max' => 200, - ], - ], - 'selectors' => [ + 'size_units' => array( 'px' ), + 'range' => array( + 'px' => array( + 'min' => 0, + 'max' => 200, + ), + ), + 'default' => array( + 'unit' => 'px', + 'size' => 20, + ), + 'selectors' => array( '{{WRAPPER}} .switcher' => 'height: {{SIZE}}{{UNIT}};', - ], - ] + ), + ) ); $this->add_control( 'switcher_background', - [ - 'label' => esc_html__('Background', 'animation-addons-for-elementor'), + array( + 'label' => esc_html__( 'Background', 'animation-addons-for-elementor' ), 'type' => Controls_Manager::COLOR, - 'selectors' => [ + 'selectors' => array( '{{WRAPPER}} .switcher' => 'background-color: {{VALUE}}; border-color: {{VALUE}};', - ], - ] + ), + ) ); - $this->add_control( + $this->add_responsive_control( 'switcher_radius', - [ - 'label' => esc_html__('Border Radius', 'animation-addons-for-elementor'), + array( + 'label' => esc_html__( 'Border Radius', 'animation-addons-for-elementor' ), 'type' => Controls_Manager::DIMENSIONS, - 'size_units' => ['px', '%'], - 'selectors' => [ + 'size_units' => array( 'px', '%' ), + 'selectors' => array( '{{WRAPPER}} .switcher' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};', - ], - ] + ), + ) ); $this->add_control( 'switcher_active_background', - [ - 'label' => esc_html__('Active Background', 'animation-addons-for-elementor'), + array( + 'label' => esc_html__( 'Active Background', 'animation-addons-for-elementor' ), 'type' => Controls_Manager::COLOR, - 'selectors' => [ + 'selectors' => array( '{{WRAPPER}} input:checked+.switcher' => 'background-color: {{VALUE}}; border-color: {{VALUE}};', - ], - ] + ), + ) ); $this->add_control( 'indicator_heading', - [ - 'label' => esc_html__('Indicator', 'animation-addons-for-elementor'), + array( + 'label' => esc_html__( 'Indicator', 'animation-addons-for-elementor' ), 'type' => Controls_Manager::HEADING, 'separator' => 'before', - ] + ) ); - $this->add_control( + $this->add_responsive_control( 'switcher_indicator_width', - [ - 'label' => esc_html__('Indicator Size', 'animation-addons-for-elementor'), + array( + 'label' => esc_html__( 'Indicator Size', 'animation-addons-for-elementor' ), 'type' => Controls_Manager::SLIDER, - 'size_units' => ['px'], - 'range' => [ - 'px' => [ + 'size_units' => array( 'px' ), + 'range' => array( + 'px' => array( 'min' => 0, 'max' => 200, - ], - ], - 'selectors' => [ + ), + ), + 'selectors' => array( '{{WRAPPER}} .slide-toggle-wrapper' => '--switcher-indicator-width: {{SIZE}}{{UNIT}};', - ], - ] + ), + ) ); - $this->add_control( + $this->add_responsive_control( 'switcher_indicator_space', - [ - 'label' => esc_html__('Indicator Space', 'animation-addons-for-elementor'), + array( + 'label' => esc_html__( 'Indicator Space', 'animation-addons-for-elementor' ), 'type' => Controls_Manager::SLIDER, - 'size_units' => ['px'], - 'range' => [ - 'px' => [ + 'size_units' => array( 'px' ), + 'range' => array( + 'px' => array( 'min' => 0, 'max' => 200, - ], - ], - 'selectors' => [ + ), + ), + 'selectors' => array( '{{WRAPPER}} .slide-toggle-wrapper' => '--switcher-border-width: {{SIZE}}{{UNIT}};', - ], - ] + ), + ) ); $this->add_control( 'switcher_indicator_background', - [ - 'label' => esc_html__('Background', 'animation-addons-for-elementor'), + array( + 'label' => esc_html__( 'Background', 'animation-addons-for-elementor' ), 'type' => Controls_Manager::COLOR, - 'selectors' => [ + 'selectors' => array( '{{WRAPPER}} .switcher::before' => 'background-color: {{VALUE}}; border-color: {{VALUE}};', - ], - ] + ), + ) ); - $this->add_control( + $this->add_responsive_control( 'switcher_indicator_radius', - [ - 'label' => esc_html__('Border Radius', 'animation-addons-for-elementor'), + array( + 'label' => esc_html__( 'Border Radius', 'animation-addons-for-elementor' ), 'type' => Controls_Manager::DIMENSIONS, - 'size_units' => ['px', '%'], - 'selectors' => [ + 'size_units' => array( 'px', '%' ), + 'selectors' => array( '{{WRAPPER}} .switcher::before' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};', - ], - ] + ), + ) ); $this->end_controls_section(); - //title + // title $this->start_controls_section( 'section_style_title', - [ - 'label' => __('Title', 'animation-addons-for-elementor'), + array( + 'label' => __( 'Title', 'animation-addons-for-elementor' ), 'tab' => Controls_Manager::TAB_STYLE, - ] + ) ); $this->add_group_control( Group_Control_Typography::get_type(), - [ + array( 'name' => 'title_typography', 'selector' => '{{WRAPPER}} .before_label, {{WRAPPER}} .after_label', - ] + ) ); $this->add_control( 'title_color', - [ - 'label' => esc_html__('Text Color', 'animation-addons-for-elementor'), - 'type' => Controls_Manager::COLOR, - 'selectors' => [ + array( + 'label' => esc_html__( 'Text Color', 'animation-addons-for-elementor' ), + 'type' => Controls_Manager::COLOR, + 'selectors' => array( '{{WRAPPER}} .before_label, {{WRAPPER}} .after_label' => 'color: {{VALUE}}', - ], - ] + ), + ) ); $this->end_controls_section(); $this->start_controls_section( 'section_style_active_title', - [ - 'label' => __('Active Title', 'animation-addons-for-elementor'), + array( + 'label' => __( 'Active Title', 'animation-addons-for-elementor' ), 'tab' => Controls_Manager::TAB_STYLE, - ] + ) ); $this->add_control( 'title_active_color', - [ - 'label' => esc_html__('Text Color', 'animation-addons-for-elementor'), + array( + 'label' => esc_html__( 'Text Color', 'animation-addons-for-elementor' ), 'type' => Controls_Manager::COLOR, - 'selectors' => [ + 'selectors' => array( '{{WRAPPER}} .before_label.active, {{WRAPPER}} .after_label.active' => 'color: {{VALUE}}', - ], - ] + ), + ) ); $this->add_group_control( Group_Control_Background::get_type(), - [ - 'name' => 'active_title_background', - 'types' => ['classic', 'gradient'], - 'selector' => '{{WRAPPER}} .before_label::after, {{WRAPPER}} .after_label::after', - 'condition' => ['element_list' => '2'] - ] + array( + 'name' => 'active_title_background', + 'types' => array( 'classic', 'gradient' ), + 'selector' => '{{WRAPPER}} .before_label::after, {{WRAPPER}} .after_label::after', + 'condition' => array( 'element_list' => '2' ), + ) ); $this->add_control( 'active_title_padding', - [ - 'label' => esc_html__('Padding', 'animation-addons-for-elementor'), + array( + 'label' => esc_html__( 'Padding', 'animation-addons-for-elementor' ), 'type' => Controls_Manager::DIMENSIONS, - 'size_units' => ['px'], - 'selectors' => [ + 'size_units' => array( 'px' ), + 'selectors' => array( '{{WRAPPER}} .before_label, {{WRAPPER}} .after_label' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};', - ], - 'condition' => ['element_list' => '2'] - ] + ), + 'condition' => array( 'element_list' => '2' ), + ) ); $this->add_control( 'active_title_radius', - [ - 'label' => esc_html__('Border Radius', 'animation-addons-for-elementor'), + array( + 'label' => esc_html__( 'Border Radius', 'animation-addons-for-elementor' ), 'type' => Controls_Manager::DIMENSIONS, - 'size_units' => ['px'], - 'selectors' => [ + 'size_units' => array( 'px' ), + 'selectors' => array( '{{WRAPPER}} .before_label::after, {{WRAPPER}} .after_label::after' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};', - ], - 'condition' => ['element_list' => '2'] - ] + ), + 'condition' => array( 'element_list' => '2' ), + ) ); $this->end_controls_section(); @@ -545,50 +566,52 @@ protected function register_controls() * * @access protected */ - protected function render() - { + protected function render() { $settings = $this->get_settings_for_display(); - $switcher = $settings['toggle_switcher']; + $switcher = $settings['toggle_switcher']; - $this->add_render_attribute('wrapper', 'class', [ - 'wcf__toggle_switcher', - 'style-' . $settings['element_list'] - ]); -?> -
print_render_attribute_string('wrapper'); ?>> + $this->add_render_attribute( + 'wrapper', + 'class', + array( + 'wcf__toggle_switcher', + 'style-' . $settings['element_list'], + ) + ); + ?> +
print_render_attribute_string( 'wrapper' ); ?>>
-
$item) { - ?> -
+ foreach ( $switcher as $index => $item ) { + ?> +
print_text_editor($item['switch_content']); - } else { - if (! empty($item['elementor_templates'])) { - echo Plugin::$instance->frontend->get_builder_content($item['elementor_templates'], true); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped - } + if ( 'content' === $item['content_type'] ) { + $this->print_text_editor( $item['switch_content'] ); + } elseif ( ! empty( $item['elementor_templates'] ) ) { + echo Plugin::$instance->frontend->get_builder_content( $item['elementor_templates'], true ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped + } ?>
-
-