Untitled

mail@pastecode.io avatar
unknown
plain_text
2 years ago
9.4 kB
1
Indexable
Never
(function () {
  try {
    /* main variables */
    var debug = 0;
    var variation_name = "";
    var $;
    /* all Pure helper functions */

    function waitForElement(selector, trigger, delayInterval, delayTimeout) {
      var interval = setInterval(function () {
        if (
          document &&
          document.querySelector(selector) &&
          document.querySelectorAll(selector).length > 0
        ) {
          clearInterval(interval);
          trigger();
        }
      }, delayInterval);
      setTimeout(function () {
        clearInterval(interval);
      }, delayTimeout);
    }

    var eg_overlay = ''+
    '<div class="eg_overlay">'+
    '      <div class="eg_header">'+
    '           <div class="eg_logo"><a href="/"><img class="mt-3" src="https://lingokids-api-assets-us-west-2-production.s3.us-west-2.amazonaws.com/web/images/logo-green.svg"></a></div>'+
    '      </div>'+
    '      <div class="eg_body">'+
    '            <div class="eg_hero">'+
    '                  <img src="https://lingokids-api-assets-us-west-2-production.s3.us-west-2.amazonaws.com/web/images/header-team-lk.svg">'+
    '            </div>'+
    '            <div class="eg_content">'+
    '                  <h3>When <span>learning is fun</span>, kids love to learn!</h3>'+
    '                  <p>Lingokids is the Playlearning<sup>TM</sup> app<br> for kids 2-8 years old</p>'+
    '                  <div class="eg_slider">'+
    '                        <div><img src="https://lingokids-api-assets-us-west-2-production.s3.us-west-2.amazonaws.com/web/images/50m-families.svg"></div>'+
    '                        <div><img src="https://lingokids-api-assets-us-west-2-production.s3.us-west-2.amazonaws.com/web/images/first-app.svg"></div>'+
    '                        <div><img src="https://lingokids-api-assets-us-west-2-production.s3.us-west-2.amazonaws.com/web/images/store-reviews.svg"></div>'+
    '                        <div><img class="eg_awards" src="https://lingokids-api-assets-us-west-2-production.s3.us-west-2.amazonaws.com/web/images/ksa22-badge.png"></div>'+
    '                  </div>'+
    '                  <div class="eg_btn--wrapper"><button class="eg_button">Get started</button></div>'+
    '            </div>'+
    '      </div>'+
    '      <div class="eg_footer">'+
    '           <div class="items-center text-center mt-2 ml-1 mr-1">'+ 
    '               <small><a class="text-blueberry-600 mr-2" href="https://lingokids.com/terms-of-service">Terms of service</a></small>'+ 
    '               <small class="text-gray-600 mr-2">|</small>'+ 
    '               <small><a class="text-blueberry-600 mr-2" href="https://lingokids.com/privacy-policy">Privacy Policy</a></small>'+ 
    '               <small class="text-gray-600 mr-2">|</small>'+ 
    '               <small><a class="text-blueberry" href="https://lingokids.com/cookie-notice">Cookies</a></small>'+ 
    '           </div>'+ 
    '           <div class=" text-night-700">'+ 
    '               <small>© 2022 Monkimun, Inc.</small>'+ 
    '           </div>'+ 
    '      </div>'+
    '</div>';
    /* Variation Init */
    function init() {
      /* start your code here */
      document.querySelector('body').classList.add('eg_show')
      document.querySelector('body').insertAdjacentHTML('afterend',eg_overlay);

      var getLang = document.querySelector('[data-controller="locale-selector"]').parentElement.innerHTML;
      document.querySelector('.eg_header').insertAdjacentHTML('beforeend',getLang);

      waitForjQuery(function(){
        addSlickScript();
        waitForSlick(function(){
          var $ = window.jQuery; 
          $('.eg_slider').slick({
            infinite: true,
            slidesToShow: 1,
            slidesToScroll: 1,
            arrows: false,
            dots: true,
            autoplay: true,
            autoplaySpeed: 2000,
            speed: 2000,
          });
          $(".eg_slider").on("beforeChange", function (){
            trackGAEvent('Slider','Swipe','Slides');
        })
        },50,15000)
      },50,15000)

      document.querySelector('.eg_overlay .eg_content button').addEventListener('click',function(){
        document.querySelector('.eg_overlay').remove();
        document.querySelector('body').classList.remove('eg_show')
      });
      document.querySelector('.eg_button').addEventListener('click',function(){
        trackGAEvent('Button','Click','Get Started');
        });

    }

    function addSlickScript() {
      var linkEl = document.createElement("link");
      linkEl.rel = "stylesheet";
      linkEl.type = "text/css";
      linkEl.href =
        "https://cdn.jsdelivr.net/jquery.slick/1.6.0/slick.css";
      document.head.insertAdjacentElement("beforeend", linkEl);
      var scriptEl = document.createElement("script");
      scriptEl.src =
        "https://cdn.jsdelivr.net/jquery.slick/1.6.0/slick.min.js";
      document.head.insertAdjacentElement("beforeend", scriptEl);
    }

    function waitForjQuery(trigger, delayInterval, delayTimeout) {
      var interval = setInterval(function() {
        if (window.jQuery != undefined) {
          clearInterval(interval);
          trigger();
        }
      }, delayInterval);
      setTimeout(function() {
        clearInterval(interval);
      }, delayTimeout);
    }

    function waitForSlick(trigger, delayInterval, delayTimeout) {
      var interval = setInterval(function() {
        if (window.jQuery && window.jQuery.fn && window.jQuery.fn.slick) {
          clearInterval(interval);
          trigger();
        }
      }, delayInterval);
      setTimeout(function() {
        clearInterval(interval);
      }, delayTimeout);
    }
    function trackGAEvent(eventCategory, eventAction, eventLabel) {
        if ('ga' in window) {
          ga.getAll()[0].send('event', {
            eventCategory: eventCategory,
            eventAction: eventAction,
            eventLabel: eventLabel,
          });
        }
      }
    /* Initialize variation */
    waitForElement('body [data-controller="locale-selector"]', init, 50, 15000);
  } catch (e) {
    if (debug) console.log(e, "error in Test" + variation_name);
  }
})();






<style>
html body.eg_show{
    display: none !important;
}
html .eg_overlay{
    background: url(https://lingokids-api-assets-us-west-2-production.s3.us-west-2.amazonaws.com/web/images/bubble-background.svg);
    background-repeat: no-repeat;
    background-size: contain;
    background-color: #fff;
    display: flex;
    flex-direction: column;
    height: 100%;
}

html .eg_overlay .eg_header {
    display: flex;
    justify-content: flex-end;
    padding: 1.5rem;
    position: relative;
}

html .eg_overlay .eg_logo {
    position: absolute;
    left: 50%;
    transform: translate(-50%);
}

html .eg_overlay .eg_body{
    flex: 1 1 0%;
    padding: 1rem;
}

html .eg_overlay .eg_hero {
    display: flex;
    justify-content: center;
}

html .eg_overlay .eg_content h3 {
    font-size: 32px;
    font-weight: 700;
    line-height: 40px;
    margin: 20px 0;
    font-family: GothamRndMedium;
}

html .eg_overlay .eg_content h3 span{
    color: #019e99;
}

html .eg_overlay .eg_content p{
    font-size: 18px;
    font-family: GothamRndMedium;
    color: #646b9e;
    margin-bottom: 10px;
}

html .eg_overlay .eg_content .eg_btn--wrapper{
    background: #fff;
    position: sticky;
    bottom: 0;
}

html .eg_overlay .eg_content .eg_button{
    font-family: GothamRndMedium;
    width: 100%;
    padding: 0.75rem 1rem;
    background: #019e99;
    color: #fff;
    font-size: 0.875rem;
    border-radius: 0.375rem;
    margin-bottom: 50px;
}

html .eg_overlay .eg_footer {
    border-top: 1px solid #dbe0f7;
    text-align: center;
    padding-bottom: 10px;
}

html .eg_overlay .eg_footer *{
    font-family: GothamRndMedium;
}

html .eg_overlay .eg_footer a{
    font-weight: 600;
}

html .eg_slider{
    max-width: 180px;
    margin: auto;
    margin-bottom: 35px;
}
html .eg_slider img{
    height: 100%;
    width: 100%;
}

html .eg_slider .eg_awards{
    max-width: 100px !important;
    margin: auto;
}

html .eg_slider .slick-track{
    display: flex;
    align-items: center;
}

html .eg_slider .slick-dots {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-top: 5px;
}

html .eg_slider .slick-dots li button{
    display: none;
}
html .eg_slider .slick-dots li{
    position: relative;
}
html .eg_slider .slick-dots li::before{
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 100px;
    position: absolute;
    background: #fff;
    border: 2px solid #9ea4ca;
    left: 0px;
}

html .eg_slider .slick-dots li.slick-active::before{
    background: #9ea4ca;
}


@media screen and (min-width: 768px) {
    
    .eg_content {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    
    .eg_content p br {
        display: none;
    }
    html > div > div.eg_body > div.eg_content > p {
        font-size: 19px;
        margin-bottom: 15px;
    }
    
    html > div > div.eg_body > div.eg_content > p {
        font-size: 19px;
    }
    
    html .eg_overlay .eg_content .eg_button {
        width: 100%;
        padding: 0.75rem 3rem;
        font-size: 1rem;;
    }
html body .eg_footer {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding-inline: 30px !important;
}
}
</style>