Untitled

 avatar
unknown
plain_text
2 years ago
14 kB
7
Indexable
(function(){
    (function (w) {
  "use strict";

  var tag = "cv-2",
    debug = document.cookie.indexOf("cfQA") > -1,
    window = typeof unsafeWindow !== "undefined" ? unsafeWindow : w,
    testData = {
      "assets": {
        "logo": "https://cfactory-img.s3.amazonaws.com/pitches/chrysaliscourses/cvClogo.png",
        "featuredLogos": [
          "https://cfactory-img.s3.amazonaws.com/pitches/chrysaliscourses/Frame%20279.png",
          "https://cfactory-img.s3.amazonaws.com/pitches/chrysaliscourses/Frame%20277.png",
          "https://cfactory-img.s3.amazonaws.com/pitches/chrysaliscourses/Frame%20278.png",
          "https://cfactory-img.s3.amazonaws.com/pitches/chrysaliscourses/Frame%20280.png"
        ],
        "heroBigImg": "https://cfactory-img.s3.amazonaws.com/pitches/chrysaliscourses/cvDesktopHero.png",
        "ratingStars": "https://cfactory-img.s3.amazonaws.com/pitches/chrysaliscourses/Trustrating.svg"
      },
      "reviews": [
        {
          "date": "28 May 2023",
          "comment": "I did the Level 5 Diploma in Psychotherapeutic Counselling over two years and loved it. I <strong>felt fullly supported</strong> by student support and had no issues during my time",
          "author": "donna hastings"
        },
        {
          "date": "4 Aug 2023",
          "comment": "<strong>Great support</strong>, thank you. Clear information and advice, quick response and very professional.",
          "author": "N Waters"
        },
        {
          "date": "19 Jul 2023",
          "comment": "<strong>The course has been superb</strong>, catering for all abilities and learning preferences.",
          "author": "Sarah"
        },
      ],
      "heroCopy": {
        "headline": "Start your",
        "subHeadline": '"Have you ever imagined what your life would be like if you could make a real difference to people’s lives in a career that you love?" Become a Counsellor with Chrysalis',
        "ctaText": "Contact US"
      }
    };

  window[tag] = {
    log: function (msg) {
      if (debug) console.log("[CV]", tag, "-->", msg);
    },

    waitForElement: function (cssSelector, callback, timeout = 5000) {
      var stop,
        elementCached,
        timeout,
        check = function () {
          try {
            elementCached = document.querySelector(cssSelector);

            if (stop) return;

            if (elementCached) {
              callback(elementCached);
              clearTimeout(timeout);

              window[tag].log(cssSelector + " found");
            } else {
              window.requestAnimationFrame(check);
            }
          } catch (err) {
            window[tag].log(err.message);
          }
        };

      window.requestAnimationFrame(check);

      timeout = setTimeout(function () {
        stop = true;
        window[tag].log(cssSelector + " not found");
      }, timeout);
    },

    testStart: function () {
      try {
        this.waitForElement("body", function (docBody) {
          docBody.classList.add(tag);
        });
        initVariation();
        window[tag].log("test running");
      } catch (err) {
        window[tag].log(err.message);
      }
    },
  };
  window[tag].testStart();
  function initVariation() {
    window[tag].waitForElement("html body footer", () => {
      // changing logo
      changeLogo();
      // changeHero
      changeHero();
    });
  }
  const changeLogo = () => {
    const imgUrl = testData.assets.logo;
    document.querySelector('html body #navigation-header .grid-container .logo-container>a').innerHTML = `<img src="${imgUrl}">`;
  }
  const changeHero = () => {
    const featuredLogosHtml = generateFeaturedLogosHTML();
    const newHeroStructureHTML = `
      <div class="cv-2-hero">
        <div class="cv-2-hero_contianer">
          <div class="cv-2-hero-left">
            <h1>${testData.heroCopy.headline}</h1>
            <p>${testData.heroCopy.subHeadline}</p>
            <a>${testData.heroCopy.ctaText}</a>
          </div>
          <div class="cv-2-hero-right">
            <div class="cv-2-hero_slides">
                ${generateReviews()}
            </div>
            <img src="${testData.assets.heroBigImg}">
          </div>
        </div>
      </div>
      <div class="${tag}-featured-logos">
        <div class="${tag}-featured-logos_contianer">
          <div class="${tag}-logo-card">fully accredited</div>
          <!-- logos will go here -->
          ${featuredLogosHtml}
        </div>
      </div>`;
    document.querySelector('html body main[class*="homepage"] .header-slider').innerHTML = newHeroStructureHTML;
  }
  const generateFeaturedLogosHTML = () => {
    const logos = testData.assets.featuredLogos;
    const fHtml = logos.reduce((t, crr) => {
      return t += `<div class="${tag}-logo-card"><img src="${crr}"></div>`;
    }, "");
    return fHtml;
  }
  const generateReviews = () => {
    const reviews = testData.reviews;
    const rHtml = reviews.reduce((t, crr) => {
      return t += `<div class="${tag}-hero_slide">
                      <span class="${tag}-hero_slide_top"><img src="${testData.assets.ratingStars}">${crr.date}</span>
                      <p class="${tag}-hero_slide_comment">${crr.comment}</p>
                      <span class="${tag}-hero_slide_author">${crr.author}</span>
                  </div>`;
    }, "");
    return rHtml;
  }
})(window);var style=document.createElement('style');style.type='text/css';style.appendChild(document.createTextNode('/* nav bar */html body #navigation-container {    background: white !important;    height: auto !important;    position: static !important;    box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.07);}html body #navigation-header .grid-container {    padding: 16px 40px !important;    max-width: 1280px !important;    margin-left: auto;    margin-right: auto;}html body #navigation-header .grid-container .logo-wrapper {    margin-top: unset !important;}html body #navigation-header .grid-container .logo-container {    position: static !important;    height: auto !important;    width: auto !important;    box-shadow: none !important;    border: none !important;    padding: 0 !important;}html body #navigation-header {    height: auto !important;}html body #navigation-header .grid-container .logo-container {    width: 189px !important;}@media(max-width:768px) {    html body #navigation-header .grid-container {        padding: 12px 16px !important;    }    html body #navigation-header .grid-container .logo-container {        width: 141px !important;    }}/* nav bar *//* hiding the shape 01 */html body .featured-content[class*="homepage"]:nth-child(2)>div.content-borders[class*="shape-01"] {    display: none !important;}/* hiding the shape 01 *//* main */html body main {    margin-top: 0 !important;}/* main *//* full accredicted */html body main[class*="homepage"] .header-slider {    background: white !important;    padding-top: 0 !important;}html body .cv-2-featured-logos {    background: rgba(60, 182, 206, 0.08);    padding: 25px 100px;}html body .cv-2-featured-logos_contianer {    max-width: 1127px !important;    margin-left: auto;    margin-right: auto;    display: flex;    align-items: center;    justify-content: space-between;}html body .cv-2-logo-card {    color: #313131;    font-size: 14px;    font-style: normal;    font-weight: 700 !important;    line-height: 150%;    /* 21px */    text-transform: uppercase;    width: 118.131px;    height: 50px;    display: flex;    justify-content: center;    align-items: center;}html body .cv-2-logo-card:first-child {    min-width: max-content;}html body .cv-2-logo-card+.cv-2-logo-card {    margin-left: 20px !important;}/* full accredicted *//* hero */html body .cv-2-hero_contianer {    max-width: 1180px;    width: 100%;    margin-left: auto;    margin-right: auto;    display: flex;    justify-content: space-between;}html body .cv-2-hero {    padding: 0 39px 0 100px !important;}html body .cv-2-hero-left {    width: 346px;    display: flex;    flex-direction: column;    justify-content: center;}html body .cv-2-hero-left h1 {    color: #313131;    font-size: 52px;    font-style: normal;    font-weight: 700;    /* 62.4px */    text-transform: uppercase;    line-height: 62.4px;    margin-bottom: 12px !important;}html body .cv-2-hero-left h1::after {    content: "journey";    color: #B51556;    display: block;}html body .cv-2-hero-left p {    color: #313131;    font-size: 16px;    font-style: normal;    line-height: 24px;    /* 24px */    margin-bottom: 32px !important;}html body .cv-2-hero-left a {    color: #FFF;    font-size: 14px;    font-style: normal;    font-weight: 550;    line-height: 21px;    text-transform: uppercase;    background: #3CB6CE;    display: flex;    padding: 12px 40px;    width: max-content;    align-items: center;    transition: background-color .25s ease-out, color .25s ease-out;}html body .cv-2-hero-left a:hover {    background-color: #2d9eb5;    color: #fff;}html body .cv-2-hero_slide {    display: flex;    padding: 20px;    flex-direction: column;    align-items: flex-start;    grid-gap: 16px;    background: #FFF;    box-shadow: 0px 20px 62px 1px rgba(0, 0, 0, 0.08);    position: absolute;}html body .cv-2-hero_slide_top {    display: flex;    align-items: center;    justify-content: space-between;    color: rgba(49, 49, 49, 0.60);    text-align: right;    font-feature-settings: \'cv09\' on, \'cv04\' on, \'ss01\' on, \'cv03\' on, \'ss03\' on, \'cv06\' on;    font-size: 12px;    font-style: normal;    font-weight: 550;    line-height: 12px;    width: 100%;}html body .cv-2-hero_slide_comment {    margin-bottom: 0 !important;    color: #313131;    font-feature-settings: \'cv09\' on, \'cv04\' on, \'ss01\' on, \'cv03\' on, \'ss03\' on, \'cv06\' on;    font-size: 14px;    font-style: normal;    font-weight: 550;    line-height: 19.6px;}html body .cv-2-hero_slide_author {    color: rgba(49, 49, 49, 0.60);    font-feature-settings: \'cv09\' on, \'cv04\' on, \'ss01\' on, \'cv03\' on, \'ss03\' on, \'cv06\' on;    font-size: 11px;    font-style: normal;    font-weight: 550;    line-height: 11px;    text-transform: uppercase;}html body .cv-2-hero-right {    flex: 1;    margin-left: 106px !important;    position: relative;    display: flex;    justify-content: center;    align-items: center;    isolation: isolate;    padding-top: 76px;}html body .cv-2-hero-right>img {    width: 360px !important;    z-index: 99;}html body .cv-2-hero_slide:first-child {    right: 24px;    bottom: 126px;    z-index: 100;    width: 225px;}html body .cv-2-hero_slide:nth-child(2) {    top: 77px;    left: 50px;    width: 260px;}html body .cv-2-hero_slide:nth-child(3) {    bottom: 56px;    left: 2px;    z-index: 100;    width: 232px;}@media(max-width:1100px) and (min-width:769px) {    html body .cv-2-hero_slide {        width: 163px !important;        padding: 10px !important;    }    html body .cv-2-hero_slide * {        font-size: 10px !important;    }    html body .cv-2-hero-right>img {        margin-right: -101px !important;    }    html body .cv-2-hero-right {        margin-left: 10px !important;    }    html body .cv-2-hero {        padding-left: 30px !important;        padding-right: 30px !important;    }    html body .cv-2-hero-right>img {        width: 300px !important;    }    html body .cv-2-hero_slide:first-child {        bottom: 77px !important;    }}/* 768px */@media(max-width:768px) {    html body .cv-2-hero {        padding: 0 !important;    }    html body .cv-2-featured-logos_contianer {        flex-wrap: wrap;    }    html body .cv-2-logo-card:first-child {        width: 100%;        height: auto !important;        margin-bottom: 13px;    }    html body .cv-2-logo-card+.cv-2-logo-card {        margin-left: 0 !important;    }    html body main[class*="homepage"] .header-slider {        padding-left: 16px;        padding-right: 16px;    }    html body .cv-2-hero_contianer {        flex-direction: column;    }    html body .cv-2-hero-left h1 {        font-size: 36px;        line-height: normal;        margin-bottom: 23px !important;        margin-top: 44px !important;    }    html body .cv-2-hero-left p {        max-width: 291px !important;        margin-bottom: 21px !important;    }    html body .cv-2-hero-left {        width: 100% !important;    }    html body .cv-2-hero-right {        padding-top: 82px !important;        margin-left: -16px !important;        margin-right: -16px !important;    }    html body .cv-2-hero_slide {        position: static !important;        min-width: 216px !important;        max-width: 216px !important;    }    html body .cv-2-hero-right>img {        position: absolute !important;        z-index: 1 !important;        bottom: 0 !important;        right: -110px !important;        width: 304px !important;    }    html body .cv-2-hero_slides {        position: relative;        z-index: 9;        display: flex;        width: max-content;        overflow-x: scroll;        grid-gap: 10px !important;        padding-bottom: 20px;        padding-left: 18px;        padding-right: 18px;    }    html body .cv-2-hero_slides::-webkit-scrollbar {        display: none !important;    }    html body .cv-2-featured-logos {        padding: 25px 30px !important;        margin-left: -16px !important;        margin-right: -16px;    }    html body .cv-2-hero-left a {        padding: 12px 24px !important;    }}@media(max-width:1280px) {    html body .cv-2-hero_slide:nth-child(2) {        left: 0px !important;    }}@media(min-width:576px) and (max-width:768px) {    html body .cv-2-hero-left h1::after {        display: inline !important;    }    html body .cv-2-hero-left p {        max-width: 466px !important;    }}@media(max-width:440px) {    html body .cv-2-logo-card:nth-child(2),    html body .cv-2-logo-card:nth-child(3) {        margin-bottom: 30px !important;    }}'));document.head.appendChild(style);

})();
Editor is loading...