<body class="smooth-transitions-container">
<div class="nav-row">
<nav data-visible="false">
<img src="/assets/example-content/my-learning-logo-nav.svg" alt="Background" class="nav-image" />
<button id="nav1">
<span class="circle-num">1</span>
<span class="label-text">Find a Course</span>
</button>
<div class="progress-bar" id="bar1"></div>
<button id="nav2">
<span class="circle-num">2</span>
<span class="label-text">Eligibility Check</span>
</button>
<div class="progress-bar" id="bar2"></div>
<button id="nav3">
<span class="circle-num">3</span>
<span class="label-text">Emergency contact info</span>
</button>
</nav>
</div>
<section id="section1">
<div class="section-inner">
<div class="section-content">
<div class="left-content">
<h2 class="heading_text"></h2>
<p class="sub_heading_text"></p>
</div>
<div class="right-content">
<p></p>
</div>
</div>
</div>
<div class="bottom-bar">
<div class="right-content-aligned">
<button class="next-button">Next</button>
</div>
</div>
</section>
<section id="section2">
<div class="section-inner">
<div class="section-content">
<div class="left-content">
<h2 class="heading_text">Checking Your Qualifications</h2>
<p class="sub_heading_text">We are currently checking that you have the required qualifications, safeguarding certificates, and are able to participate in football, in order to complete a UEFA C course</p>
</div>
<div class="right-content">
<p></p>
<p class="eligiblity-header-title">Important Reminder</p>
<p id="checkedstate" class="eligiblity-header-subtext-checked checkedstate">Ensure you meet all the necessary.</p>
<p class="wrongstateerror"></p>
<p class="eligiblity-header-title">Health Requirements</p>
<p id="loadingstate" class="eligiblity-header-subtext-checked loadingstate">You must be physically fit to participate.</p>
<p class="wrongstateerror"></p>
<p id="loadingstate" class="eligiblity-header-subtext-checked loadingstate">You must be physically fit to participate.</p>
<p class="wrongstateerror"></p>
<p id="loadingstate" class="eligiblity-header-subtext-checked loadingstate">You must be physically fit to participate.</p>
<p class="wrongstateerror"></p>
<p class="eligiblity-header-title">Health Requirements</p>
<p id="wrongstate" class="eligiblity-header-subtext-checked wrongstate">Sorry you have not passed our age check.</p>
<p class="wrongstateerror"><a href='' class='link-style'>Click here</a> to see our age terms and conditions </p>
</div>
</div>
</div>
<div class="bottom-bar">
<div class="right-content-aligned">
<button class="next-button">Next</button>
</div>
</div>
</section>
<section id="section4" class="final-section">
<div class="final-section-content">
<div class="text-block">
<h2 class="heading-text-final-section">Congratulations you’ve been accepted on the UEFA C course</h2>
<p class="sub_heading_text_final_section">What happens next:</p>
<ul class="subpoints-list">
<li id="subtextsubpoints1">We’ll redirect you to My Learning</li>
<li id="subtextsubpoints2">You can begin your learning!</li>
</ul>
<a href="" class="submit-returnlearning">Return to My Learning</a>
</div>
</div>
</section>
</body>
No notes defined.
{
"navigationvisible": false,
"steps": [
{
"id": "nav1",
"number": "1",
"label": "Find a Course",
"barId": "bar1",
"sectionId": "section1",
"leftContent": {
"title": "",
"text": ""
},
"rightContent": {
"text": ""
}
},
{
"id": "nav2",
"number": "2",
"label": "Eligibility Check",
"barId": "bar2",
"sectionId": "section2",
"leftContent": {
"title": "Checking Your Qualifications",
"text": "We are currently checking that you have the required qualifications, safeguarding certificates, and are able to participate in football, in order to complete a UEFA C course"
},
"rightContent": {
"title": "",
"text": ""
},
"eligiblityheader": [
{
"eligiblityheadertitle": "Important Reminder",
"eligiblityheadersubtext": [
{
"id": "checkedstate",
"text": "Ensure you meet all the necessary."
}
]
},
{
"eligiblityheadertitle": "Health Requirements",
"eligiblityheadersubtext": [
{
"id": "loadingstate",
"text": "You must be physically fit to participate."
},
{
"id": "loadingstate",
"text": "You must be physically fit to participate."
},
{
"id": "loadingstate",
"text": "You must be physically fit to participate."
}
]
},
{
"eligiblityheadertitle": "Health Requirements",
"eligiblityheadersubtext": [
{
"id": "wrongstate",
"text": "Sorry you have not passed our age check.",
"wrongstateerror": "<a href='' class='link-style'>Click here</a> to see our age terms and conditions "
}
]
}
]
},
{
"id": "nav3",
"number": "3",
"label": "Emergency contact info",
"barId": null,
"sectionId": "section4",
"headertext": {
"title": "Congratulations you’ve been accepted on the UEFA C course",
"subtext": "What happens next:",
"subtextsubpoints": [
{
"id": "subtextsubpoints1",
"text": "We’ll redirect you to My Learning"
},
{
"id": "subtextsubpoints2",
"text": "You can begin your learning!"
}
],
"submitbutton": "Return to My Learning",
"submitbuttonlink": ""
},
"rightContent": {
"text": ""
}
}
],
"mylearningmobile": "/assets/example-content/my-learning-logo-nav.svg"
}
const Enrolment = () => {
const getSteps = () => [
...document.querySelectorAll('nav button[id^="nav"]'),
];
const getSections = () => [
...document.querySelectorAll('section[id^="section"]'),
];
const updateNav = current => {
const steps = getSteps();
const total = steps.length;
steps.forEach((btn, i) => {
const index = i + 1;
const circle = btn.querySelector('.circle-num');
const bar = document.getElementById(`bar${index}`);
btn.classList.remove('active', 'checked');
const isCurrent = index === current;
const isChecked = index < current || (index === total && isCurrent);
if (isChecked) {
btn.classList.add('checked');
if (circle) {
circle.textContent = '';
}
if (bar) {
bar.style.backgroundColor = '#039855';
}
} else {
if (circle) {
circle.textContent = `${index}`;
}
if (bar) {
bar.style.backgroundColor = '#AEBDE6';
}
if (isCurrent) {
btn.classList.add('active');
}
}
});
const activeBtn = steps[current - 1];
if (activeBtn) {
const nav = activeBtn.closest('nav');
const prev = steps[current - 2];
const offset = prev ? prev.offsetWidth / 2 : 0;
nav.scrollLeft =
activeBtn.offsetLeft -
nav.offsetWidth / 2 +
activeBtn.offsetWidth / 2 -
offset;
}
};
let currentSectionIndex = 2;
const scrollToSection = (id, smooth = true) => {
const sections = getSections();
const target = document.getElementById(id);
if (!target) {
return;
}
const index = sections.indexOf(target);
if (index === -1) {
return;
}
updateNav(index + 1);
target.scrollIntoView({
behavior: smooth ? 'smooth' : 'auto',
block: 'start',
});
currentSectionIndex = index + 1;
};
const init = () => {
const sections = getSections();
document.querySelectorAll('.next-button').forEach(btn => {
btn.addEventListener('click', () => {
if (!btn.classList.contains('disabled')) {
const current = btn.closest('section');
const currentIndex = sections.indexOf(current);
const next = sections[currentIndex + 1];
if (next) {
scrollToSection(next.id);
}
}
});
});
if (sections[1]) {
scrollToSection(sections[1].id, false);
}
};
window.addEventListener('resize', () => {
setTimeout(() => scrollToSection(`section${currentSectionIndex}`), 200);
});
if (
document.readyState === 'complete' ||
document.readyState === 'interactive'
) {
init();
} else {
document.addEventListener('DOMContentLoaded', init);
}
};
export default Enrolment;
/* stylelint-disable*/
html {
scroll-behavior: smooth;
}
body,
html {
overflow: hidden;
height: 100%;
margin: 0;
font-family: Arial, sans-serif;
transition: opacity 0.5s;
}
section {
height: 100vh;
box-sizing: border-box;
position: relative;
display: flex;
flex-direction: column;
justify-content: space-between;
// background: linear-gradient(to right, #E9EBF1 50%, #fff 50%);
background: #E9EBF1;
}
.section-inner {
display: grid;
align-items: center;
padding: 120px clamp(16px, 4vw, 40px) 100px;
box-sizing: border-box;
height: 100%;
overflow-y: auto;
flex: 1;
gap: 5%;
}
.left-content {
align-self: center;
}
.right-content {
display: block;
overflow-y: scroll;
overflow-x: hidden;
max-height: calc(100vh - 220px);
box-sizing: border-box;
}
.right-content::-webkit-scrollbar {
width: 4px;
}
.right-content::-webkit-scrollbar-track {
border-radius: 10px;
}
.right-content::-webkit-scrollbar-thumb {
background-color: #024597;
border-radius: 10px;
background-clip: content-box;
}
nav {
position: fixed;
top: 0;
width: 100%;
background: #FFFFFF;
padding: 10px;
text-align: center;
z-index: 1000;
height: 104px;
display: flex;
align-items: center;
justify-content: center;
border-bottom: 1px solid #AEBDE6;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}
nav {
scroll-behavior: smooth;
scroll-padding-inline: 40vw;
}
nav button {
display: flex;
align-items: center;
gap: 10px;
background: none;
border: none;
color: #024597;
font-weight: 700;
cursor: pointer;
font-size: 16px;
font-family: 'FS Dillon', Arial, sans-serif;
}
nav[data-visible="false"] button,
nav[data-visible="false"] .progress-bar {
visibility: hidden;
pointer-events: none;
}
nav[data-visible="false"] .nav-image {
visibility: visible;
position: absolute;
left: 10%;
}
.progress-bar {
display: inline-block;
width: 130px;
height: 2px;
background-color: #AEBDE6;
vertical-align: middle;
margin: 0 5px;
border-radius: 3px;
transition: background-color 1.3s ease;
}
.circle-num {
width: 24px;
height: 24px;
border-radius: 50%;
background: #E9EBF1;
color: white;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 14px;
font-weight: bold;
transition: background-color 0.3s, content 0.3s;
}
.checked .circle-num {
background-color: #039855;
color: #333;
}
.checked .label-text {
color: #424A5C;
}
.checked .circle-num::before {
font-size: 14px;
content: "";
display: block;
width: 5px;
height: 11px;
border: solid #FFFFFF;
border-width: 0 3px 3px 0;
transform: rotate(45deg);
margin-top: -2px;
}
.section-content {
display: flex;
justify-content: center;
align-items: center;
gap: 10%;
}
.left-content,
.right-content {
width: 416px;
box-sizing: border-box;
}
.heading_text {
color: #011228;
font-size: 35.5px;
font-weight: 700;
line-height: 40px;
font-family: 'FS Dillon';
position: relative;
display: inline-block;
}
.heading_text::after,
.heading-text-final-section::after {
content: "";
position: absolute;
bottom: -15px;
left: 0;
width: 52px;
border-bottom: 3px solid #E1261C;
}
.sub_heading_text {
margin-top: 25px;
color: #424A5C;
font-size: 20px;
font-weight: 400;
line-height: 24px;
font-family: 'FS Dillon';
}
.bottom-bar {
position: absolute;
bottom: 0;
width: 100%;
height: 92px;
background: #fff;
border-top: 1px solid #AEBDE6;
display: flex;
justify-content: flex-end;
align-items: center;
padding-right: 8%;
box-sizing: border-box;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}
.bottom-bar .right-content-aligned {
width: 45%;
display: flex;
justify-content: center;
}
.next-button {
background-color: #E1261C;
color: #FFFFFF;
padding: 10px 25px;
border: none;
border-radius: 4px;
font-weight: 500;
font-size: 16px;
font-family: 'FS Dillon';
width: 80%;
height: 44px;
transition: background-color 0.3s;
cursor: pointer;
}
.next-button-disabled {
background-color: #F0F1F4;
color: #626E88;
padding: 10px 25px;
border: none;
border-radius: 4px;
font-weight: 500;
font-size: 16px;
font-family: 'FS Dillon';
width: 80%;
height: 44px;
}
.active .circle-num {
background-color: #00539F;
color: white;
}
.final-section {
//background-image: url('/assets/example-content/Background-enrolment.png');
background: #E9EBF1;
display: flex;
justify-content: center;
align-items: center;
background-repeat: no-repeat;
background-size: cover;
background-position: top center;
}
.heading-text-final-section {
color: #011228;
width: 400px;
font-size: 35.5px;
font-weight: 700;
line-height: 40px;
font-family: 'FS Dillon';
position: relative;
display: inline-block;
}
.sub_heading_text_final_section {
color: #424A5C;
font-size: 20px;
font-weight: 400;
line-height: 24px;
font-family: 'FS Dillon';
position: relative;
display: inline-block;
transform: translateY(25px);
padding-bottom: 20px;
}
.submit-returnlearning {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
background-color: #E1261C;
color: #FFFFFF;
font-size: 16px;
text-decoration: none;
line-height: 20px;
height: 44px;
border-radius: 4px;
border: none;
transform: translateY(30px);
font-family: 'FS Dillon';
cursor: pointer;
}
.final-section {
background: #E9EBF1;
display: flex;
justify-content: center;
align-items: center;
padding: 40px;
}
.text-block {
max-width: 400px;
}
.subpoints-list {
display: flex;
flex-direction: column;
}
.subpoints-list li {
color: #424A5C;
font-size: 20px;
font-weight: 400;
line-height: 24px;
font-family: 'FS Dillon';
margin-bottom: 10px;
transform: translateY(25px);
}
.subpoints-list {
list-style-type: disc;
padding-left: 20px;
}
.nav-image {
margin-right: 2%;
}
.eligiblity-header-title {
color: #024597;
text-transform: uppercase;
font-size: 15px;
font-weight: 700;
line-height: 20px;
font-family: 'FS Dillon';
border-bottom: 1px solid #E9EBF1;
padding-bottom: 10px;
margin-bottom: 10px;
letter-spacing: 1.8px;
}
.eligiblity-header-subtext-checked {
color: #011228;
font-size: 20px;
font-weight: 700;
line-height: 24px;
font-family: 'FS Dillon';
}
.eligiblity-header-subtext-checked {
position: relative;
padding-left: 42px;
/* space for circle */
margin-bottom: 15px;
font-size: 20px;
font-weight: 700;
font-family: 'FS Dillon';
color: #011228;
line-height: 24px;
min-height: 32px;
display: flex;
align-items: center;
}
.checkedstate::before,
.loadingstate::before,
.wrongstate::before {
content: '';
position: absolute;
left: 0;
width: 32px;
height: 32px;
border-radius: 50%;
display: block;
}
.checkedstate::before,
.wrongstate::before {
content: "";
display: block;
height: 100%;
border-radius: 50%;
top: 0;
left: 0;
animation: pop 1s ease-in-out;
}
.checkedstate::before {
background-color: #039855;
/* green */
}
.checkedstate::after {
content: "";
position: absolute;
left: 9px;
top: 11px;
width: 20px;
height: 20px;
background-image: url('/assets/example-content/tick-icon.svg');
background-repeat: no-repeat;
animation: tick 1s ease-in-out;
}
.wrongstate::before {
background-color: #f44336;
/* red */
}
.wrongstate::after {
content: "";
position: absolute;
top: 10px;
left: 10px;
width: 20px;
height: 20px;
background-image: url('/assets/example-content/close-icon-red.svg');
background-repeat: no-repeat;
animation: cross 1s ease-in-out;
}
@keyframes pop {
0% {
transform: scale(0.6);
opacity: 0;
}
100% {
transform: scale(1);
opacity: 1;
}
}
@keyframes tick {
0% {
height: 0;
width: 0;
opacity: 0;
}
100% {
height: 20px;
width: 10px;
opacity: 1;
}
}
@keyframes cross {
0% {
transform: scale(0);
opacity: 0;
}
100% {
transform: scale(1);
opacity: 1;
}
}
.loadingstate::before {
background: conic-gradient(from 0deg, #ffffff 0%, #dbe8f7 25%, #a3c3f0 50%, #6fa0e0 75%, #024597 100%);
mask: radial-gradient(farthest-side, transparent calc(100% - 3px), black calc(100% - 3px));
animation: spin 1s linear infinite;
}
.loadingstate::after {
content: '';
position: absolute;
left: 9px;
width: 12px;
height: 14px;
background-image: url('/assets/example-content/loadingbar-bg.svg');
background-size: contain;
background-repeat: no-repeat;
}
/* --- Spinner animation --- */
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.eligiblity-header-subtext-checked.wrongstate {
color: #DD221A;
}
// .terms-and-conditions {
// margin-top: 25px;
// }
.term-box {
margin-bottom: 15px;
}
.terms-heading {
font-size: 26.7px;
font-weight: 700;
color: #011228;
line-height: 32px;
font-family: 'FS Dillon';
}
.terms-subtext {
font-size: 20px;
color: #424A5C;
margin: 5px 0;
font-family: 'FS Dillon';
font-weight: 400;
line-height: 24px;
}
.custom-checkbox {
margin: 16px 0;
font-size: 20px;
font-family: 'FS Dillon';
color: #011228;
line-height: 1.6;
}
.custom-checkbox input {
display: none;
}
.custom-checkbox .checkmark {
display: inline-block;
vertical-align: middle;
width: 20px;
height: 20px;
border: 2px solid #515D7A;
border-radius: 4px;
margin-right: 10px;
position: relative;
cursor: pointer;
}
.custom-checkbox input:checked+.checkmark::after {
content: '';
position: absolute;
left: 5px;
top: 0px;
width: 6px;
height: 12px;
border: solid #515D7A;
border-width: 0 2px 2px 0;
transform: rotate(45deg);
}
.custom-checkbox .label-text {
display: inline;
}
.terms-subtext a,
.custom-checkbox a {
color: #024597;
text-decoration: underline;
font-weight: 500;
}
.wrongstateerror {
color: #011228;
font-weight: 700;
font-size: 16px;
font-family: 'FS Dillon';
line-height: 20px;
transform: translateX(40px);
letter-spacing: 0.32px;
}
.link-style {
color: #024597;
text-decoration: underline;
font-weight: 500;
letter-spacing: 0.32px;
}
// @media (max-width: 1199px) {
// nav {
// overflow-x: auto;
// white-space: nowrap;
// padding: 0px;
// justify-content: flex-start;
// align-items: center;
// scroll-behavior: smooth;
// }
// nav button {
// flex: 0 0 auto;
// margin-right: 10px;
// }
// .progress-bar {
// flex: 0 0 auto;
// width: 80px;
// height: 2px;
// background-color: #AEBDE6;
// vertical-align: middle;
// margin: 0 5px;
// border-radius: 3px;
// }
// .nav-image {
// padding-right: 30px;
// }
// .nav-image {
// position: sticky;
// left: 0;
// z-index: 2;
// background: #fff;
// padding-left: 10px;
// }
// .section-content {
// flex-direction: column;
// align-items: flex-start;
// }
// .left-content,
// .right-content {
// width: 100%;
// margin-bottom: 20px;
// }
// .bottom-bar {
// flex-direction: column;
// height: auto;
// padding: 20px;
// }
// .bottom-bar .right-content-aligned {
// width: 100%;
// justify-content: center;
// }
// .next-button {
// width: 100%;
// }
// .loadingstate::before {
// width: 32px;
// height: 32px;
// }
// .loadingstate::after {
// width: 12px;
// height: 14px;
// background-size: contain;
// }
// .section-inner {
// overflow-y: auto;
// padding: 120px clamp(16px, 5vw, 24px) 100px;
// }
// .left-content,
// .right-content {
// width: 100%;
// overflow: visible;
// margin-bottom: 40px;
// }
// .right-content {
// display: block;
// place-items: unset;
// align-items: center;
// max-height: none;
// }
// }
<body class="smooth-transitions-container">
<div class="nav-row">
<nav data-visible="{{navigationvisible}}">
<img src="{{mylearningmobile}}" alt="Background" class="nav-image" />
{{#each steps}}
<button id="{{id}}">
<span class="circle-num">{{number}}</span>
<span class="label-text">{{label}}</span>
</button>
{{#if barId}}
<div class="progress-bar" id="{{barId}}"></div>
{{/if}}
{{/each}}
</nav>
</div>
{{#each steps}}
{{#if @last}}
{{!-- Last screen emergency contact info --}}
<section id="{{sectionId}}" class="final-section">
{{#with headertext}}
<div class="final-section-content">
<div class="text-block">
<h2 class="heading-text-final-section">{{title}}</h2>
<p class="sub_heading_text_final_section">{{subtext}}</p>
{{#if subtextsubpoints}}
<ul class="subpoints-list">
{{#each subtextsubpoints}}
<li id="{{id}}">{{text}}</li>
{{/each}}
</ul>
{{/if}}
<a href="{{submitbuttonlink}}" class="submit-returnlearning">{{submitbutton}}</a>
</div>
</div>
{{/with}}
</section>
{{else}}
<section id="{{sectionId}}">
<div class="section-inner">
<div class="section-content">
<div class="left-content">
{{#with leftContent}}
<h2 class="heading_text">{{title}}</h2>
<p class="sub_heading_text">{{text}}</p>
{{/with}}
</div>
<div class="right-content">
{{#with rightContent}}
<p>{{text}}</p>
{{/with}}
{{!-- second screen Eligiblity check --}}
{{#each eligiblityheader}}
<p class="eligiblity-header-title">{{eligiblityheadertitle}}</p>
{{#each eligiblityheadersubtext}}
<p id="{{id}}" class="eligiblity-header-subtext-checked {{id}}">{{text}}</p>
<p class="wrongstateerror">{{{wrongstateerror}}}</p>
{{/each}}
{{/each}}
{{#if terms}}
{{!-- Third screen Terms and conditions --}}
<div class="terms-and-conditions">
{{#each terms}}
<div class="term-box">
<h3 class="terms-heading">{{heading}}</h3>
<p class="terms-subtext">{{{subtext}}}</p>
<label class="custom-checkbox">
<input type="checkbox" id="{{checkboxId}}" />
<span class="checkmark"></span>
{{{checkboxLabel}}}
</label>
</div>
{{/each}}
</div>
{{/if}}
</div>
</div>
</div>
{{!-- next button --}}
<div class="bottom-bar">
<div class="right-content-aligned">
<button class="next-button">Next</button>
</div>
</div>
</section>
{{/if}}
{{/each}}
</body>