Untitled
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...