Untitled

 avatar
unknown
plain_text
2 years ago
6.1 kB
3
Indexable
(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_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);

      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 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: 100px;
}

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;
}


@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;
    }
    
    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_overlay .eg_footer {
        display: flex !important;
        justify-content: space-between !important;
        align-items: baseline !important;
        padding-inline: 30px !important;
    }

}
</style>
Editor is loading...