<div class="enrol-smooth-transitions-container" data-isstorybook=true data-bingmapkey=AuKIeCnpcLc3NMNJwnAQiVgk7_yVBU02azsFGs9iFEtoz83LYUscGBA5Fsvg-4cS data-sessionselector=false>
<div class="nav-row">
<nav data-visible="true" class="enrol-nav">
<div class="enrol-nav-wrapper">
<div class="banner-section">
<img src="/assets/example-content/my-learning-logo-nav.svg" alt="Background" class="nav-image" />
</div>
<div id="nav1" class="nav-item">
<span class="circle-num">1</span>
<span class="label-text">
Find a Course
</span>
</div>
<div class="progress-bar" id="bar1"></div>
<div id="nav2" class="nav-item">
<span class="circle-num">2</span>
<span class="label-text">
Eligibility Check
</span>
</div>
<div class="progress-bar" id="bar2"></div>
<div id="nav3" class="nav-item">
<span class="circle-num">3</span>
<span class="label-text">
Terms & conditions
</span>
</div>
</div>
</nav>
</div>
<section id="section1" class="enrol-section">
<div class="top-container">
<div class="left-wrapper">
<img src="/assets/example-content/downarrow.svg" class="downarrow-icon" id="closeBtn" />
<div class="content-box">
<h2 class="heading_text">Find a UEFA C course near you</h2>
<p class="sub_heading_text">Enter your postcode or town to see all available courses, ordered from nearest to furthest</p>
<div class="form-controls">
<div class="left-input-wrapper">
<div class="left-input--inner-wrapper">
<input type="text" id="postcodeInput" class="left-input-box" placeholder="Enter postcode or town" autocomplete="off" />
<img src="/assets/example-content/edit-icon.svg" class="edit-icon" alt="edit" />
<img src="/assets/example-content/clearicon.svg" class="clear-icon" alt="clear" />
</div>
<button class="left-search-btn disabled" disabled="true" id="searchBtn">Search</button>
</div>
</div>
</div>
</div>
<div class="right-wrapper" id="rightWrapper">
<div id="holdingScreen" class="holdingScreen ">
<div class="right-center-wrapper">
<img src="/assets/example-content/Crest.svg" class="Crest-logo" />
<div class="right-center-content">Take Your Coaching Further</div>
<div class="right-below-content">
<div id="content1" class="content-item">
<span class="bold-text">Flexible learning</span>
<span class="normal-text">- Online & in-person sessions</span>
</div>
<div id="content2" class="content-item">
<span class="bold-text">Expert Support</span>
<span class="normal-text">- Learn from top Coach Developers</span>
</div>
<div id="content3" class="content-item">
<span class="bold-text">Hands-on Experience</span>
<span class="normal-text">- Apply skills with your team</span>
</div>
</div>
</div>
</div>
<div id="loadingScreen" class="loadingScreen">
<div class="loading-inner">
<canvas class="loading-screen-canvas"></canvas>
<div class="loading"></div>
<div class="loading-bar-container">
<div class="loading-bar"></div>
</div>
<label class="searching-text">Searching</label>
</div>
<div id="courseListScreen" class="courseListScreen hidden">
</div>
</div>
</div>
</div>
<!-- Desktop-only button -->
<div id="bottomButtonContainer" class="bottom-button-container desktop-only hidden">
<div class="button-wrapper">
<button class="cohort-button">Apply for this cohort</button>
</div>
</div>
<!-- mobile-only button -->
<div id="mobileCourseActions" class="mobile-course-actions hidden">
<div class="expand-row" id="expandBtn">
<div class="left-label-group">
<img src="/assets/example-content/arrow_forward_ios.svg" class="arrow-forward" />
<span class="left-label">Expand Search</span>
</div>
<div class="right-label-group">
<span class="result-label">Showing 2 results</span>
<span class="result-label-code" id="selectedPostcode"></span>
</div>
</div>
<div class="button-wrapper">
<button class="cohort-button">Apply for this cohort</button>
</div>
</div>
</section>
<section id="section2" class="enrol-section">
<div class="section-inner">
<div class="section-content">
<div class="left-content">
<div class="prerequisites-inline">
<img src="/assets/example-content/info.svg" class="info-image" />
<div class="Prerequisites">Prerequisites not satisfied</div>
</div>
<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>
<section id="AgeCheck" class="eligibility-section">
<p class="eligiblity-header-title">Age check</p>
<ul class="eligibility-list">
<li id="agecheck_1" class="eligiblity-header-subtext-checked agechecks loadingstate">
<div class="rive-container">
<canvas class="rive-animation-canvas"></canvas>
<span class="defaultText">Checking if you are over 18 years age</span>
<span class="successText">You have passed our age check</span>
<span class="failureText">Sorry you have not passed our restrictions check</span>
<span class="warningtext">Safeguarding in children</span>
</div>
<p class="wrongstateerror"><a href=''>Click here</a> to see our age terms and conditions</p>
<p class="warningmessage">This qualification is about to expire</p>
</li>
</ul>
</section>
<section id="Qualifications" class="eligibility-section">
<p class="eligiblity-header-title">Course pre-requisites</p>
<ul class="eligibility-list">
<li id="qualificationcheck_1" class="eligiblity-header-subtext-checked qualificationchecks loadingstate">
<div class="rive-container">
<canvas class="rive-animation-canvas"></canvas>
<span class="defaultText">You must be physically fit to participate</span>
<span class="successText">You are physically fit to participate</span>
<span class="failureText">Sorry you are not physically fit to participate</span>
<span class="warningtext">Safeguarding in children</span>
</div>
<p class="wrongstateerror"><a href=''>Click here</a> to see our qualifications terms and conditions</p>
<p class="warningmessage">This qualification is about to expire</p>
</li>
<li id="qualificationcheck_2" class="eligiblity-header-subtext-checked qualificationchecks loadingstate">
<div class="rive-container">
<canvas class="rive-animation-canvas"></canvas>
<span class="defaultText">Introduction into first aid in football</span>
<span class="successText">Introduction into first aid in football</span>
<span class="failureText">Sorry you are not physically fit to participate</span>
<span class="warningtext">Safeguarding in children</span>
</div>
<p class="wrongstateerror"><a href=''>Click here</a> to see our qualifications terms and conditions</p>
<p class="warningmessage">This qualification is about to expire</p>
</li>
</ul>
</section>
<section id="Restrictions" class="eligibility-section">
<p class="eligiblity-header-title">Restrictions</p>
<ul class="eligibility-list">
<li id="restrictionscheck_1" class="eligiblity-header-subtext-checked restrictionschecks loadingstate">
<div class="rive-container">
<canvas class="rive-animation-canvas"></canvas>
<span class="defaultText">Checking if meet all the necessary restrictions</span>
<span class="successText">You have passed our restrictions check</span>
<span class="failureText">Sorry you have not passed our restrictions check</span>
<span class="warningtext">Safeguarding in children</span>
</div>
<p class="wrongstateerror"><a href=''>Click here</a> to see our restrictions terms and conditions </p>
<p class="warningmessage">This qualification is about to expire</p>
</li>
</ul>
</section>
</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 enrol-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>
</div>
No notes defined.
{
"navigationvisible": true,
"version": "v3",
"bingmapkey": "AuKIeCnpcLc3NMNJwnAQiVgk7_yVBU02azsFGs9iFEtoz83LYUscGBA5Fsvg-4cS",
"sessionselector": false,
"sessionselectorcontents": [
{
"sessiontexts": {
"title": "Start Your Coaching Journey",
"contents": [
{
"id": "1",
"text": "Check your eligibility and book your place on the Introduction to Coaching Football course."
},
{
"id": "2",
"text": "If you’re 14 or over, you can enrol today. We’ll confirm your eligibility, explain any funding options, and help you choose your preferred webinar date."
}
]
}
}
],
"steps": [
{
"id": "nav1",
"number": "1",
"label": "Find a Course",
"labelWebinar": "Find a Webinar",
"barId": "bar1",
"sectionId": "section1",
"leftContent": {
"title": "Find a UEFA C course near you",
"text": "Enter your postcode or town to see all available courses, ordered from nearest to furthest",
"showInput": true
},
"courseselect": true,
"rightcentercontent": "Take Your Coaching Further",
"rightbelowcontent": [
{
"id": "content1",
"boldtext": "Flexible learning",
"normaltext": "- Online & in-person sessions"
},
{
"id": "content2",
"boldtext": "Expert Support",
"normaltext": "- Learn from top Coach Developers"
},
{
"id": "content3",
"boldtext": "Hands-on Experience",
"normaltext": "- Apply skills with your team"
}
],
"nav1RightContent": {
"bgImage": "/assets/example-content/Background-enrolment.png"
}
},
{
"id": "nav2",
"number": "2",
"label": "Eligibility Check",
"labelWebinar": "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",
"ErrorLabel": "Prerequisites not satisfied",
"InfoIcon": "/assets/example-content/info.svg"
},
"rightContent": {
"title": "",
"text": ""
},
"eligiblityheader": [
{
"eligiblityheadertitle": "Age check",
"eligiblityheaderid": "AgeCheck",
"eligiblityheadersubtext": [
{
"id": "agecheck_1",
"group": "agechecks",
"state": "loadingstate",
"text": "Checking if you are over 18 years age",
"successtext": "You have passed our age check",
"failuretext": "Sorry you have not passed our restrictions check",
"warningtext": "Safeguarding in children",
"warningmessage": "This qualification is about to expire",
"wrongstateerror": "<a href=''>Click here</a> to see our age terms and conditions"
}
]
},
{
"eligiblityheadertitle": "Course pre-requisites",
"eligiblityheaderid": "Qualifications",
"eligiblityheadersubtext": [
{
"id": "qualificationcheck_1",
"group": "qualificationchecks",
"state": "loadingstate",
"text": "You must be physically fit to participate",
"successtext": "You are physically fit to participate",
"failuretext": "Sorry you are not physically fit to participate",
"warningtext": "Safeguarding in children",
"warningmessage": "This qualification is about to expire",
"wrongstateerror": "<a href=''>Click here</a> to see our qualifications terms and conditions"
},
{
"id": "qualificationcheck_2",
"group": "qualificationchecks",
"state": "loadingstate",
"text": "Introduction into first aid in football",
"successtext": "Introduction into first aid in football",
"failuretext": "Sorry you are not physically fit to participate",
"warningtext": "Safeguarding in children",
"warningmessage": "This qualification is about to expire",
"wrongstateerror": "<a href=''>Click here</a> to see our qualifications terms and conditions"
}
]
},
{
"eligiblityheadertitle": "Restrictions",
"eligiblityheaderid": "Restrictions",
"eligiblityheadersubtext": [
{
"id": "restrictionscheck_1",
"group": "restrictionschecks",
"state": "loadingstate",
"text": "Checking if meet all the necessary restrictions",
"successtext": "You have passed our restrictions check",
"failuretext": "Sorry you have not passed our restrictions check",
"warningtext": "Safeguarding in children",
"warningmessage": "This qualification is about to expire",
"wrongstateerror": "<a href=''>Click here</a> to see our restrictions terms and conditions "
}
]
}
]
},
{
"id": "nav3",
"number": "3",
"label": "Terms & conditions",
"labelWebinar": "Terms & conditions",
"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",
"isstorybook": true
}
<div class="enrol-smooth-transitions-container" data-isstorybook={{isstorybook}} data-bingmapkey={{bingmapkey}} data-sessionselector={{sessionselector}}>
<div class="nav-row">
<nav data-visible="{{navigationvisible}}" class="enrol-nav">
<div class="enrol-nav-wrapper">
<div class="banner-section">
<img src="{{mylearningmobile}}" alt="Background" class="nav-image" />
</div>
{{#each steps}}
<div id="{{id}}" class="nav-item">
<span class="circle-num">{{number}}</span>
<span class="label-text">
{{#if ../sessionselector}}
{{labelWebinar}}
{{else}}
{{label}}
{{/if}}
</span>
</div>
{{#if barId}}
<div class="progress-bar" id="{{barId}}"></div>
{{/if}}
{{/each}}
</div>
</nav>
</div>
{{#each steps}}
{{#if @last}}
{{!-- Last screen emergency contact info --}}
<section id="{{sectionId}}" class="final-section enrol-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}}
{{#if courseselect}}
<section id="{{sectionId}}" class="enrol-section">
<div class="top-container">
<div class="left-wrapper">
<img src="/assets/example-content/downarrow.svg" class="downarrow-icon" id="closeBtn" />
<div class="content-box">
{{!-- Session selector block --}}
{{#if ../sessionselector}}
{{#each ../sessionselectorcontents}}
<h2 class="heading_text">{{sessiontexts.title}}</h2>
{{#each sessiontexts.contents}}
<p id="sessioncontent{{id}}" class="sub_heading_text">{{text}}</p>
{{/each}}
{{/each}}
{{else}}
<h2 class="heading_text">{{leftContent.title}}</h2>
<p class="sub_heading_text">{{leftContent.text}}</p>
<div class="form-controls">
<div class="left-input-wrapper">
<div class="left-input--inner-wrapper">
<input type="text" id="postcodeInput" class="left-input-box" placeholder="Enter postcode or town" autocomplete="off"/>
<img src="/assets/example-content/edit-icon.svg" class="edit-icon" alt="edit"/>
<img src="/assets/example-content/clearicon.svg" class="clear-icon" alt="clear"/>
</div>
<button class="left-search-btn disabled" disabled="true" id="searchBtn">Search</button>
</div>
</div>
{{/if}}
</div>
</div>
<div class="right-wrapper" id="rightWrapper">
<div id="holdingScreen" class="holdingScreen {{#if sessionselector}}hidden{{/if}}">
<div class="right-center-wrapper">
<img src="/assets/example-content/Crest.svg" class="Crest-logo"/>
<div class="right-center-content">{{rightcentercontent}}</div>
<div class="right-below-content">
{{#each rightbelowcontent}}
<div id="{{id}}" class="content-item">
<span class="bold-text">{{boldtext}}</span>
<span class="normal-text">{{normaltext}}</span>
</div>
{{/each}}
</div>
</div>
</div>
<div id="loadingScreen" class="loadingScreen">
<div class="loading-inner">
<canvas class="loading-screen-canvas"></canvas>
{{!-- <div class="loadingcircle"></div> --}}
<div class="loading"></div>
<div class="loading-bar-container">
<div class="loading-bar"></div>
</div>
<label class="searching-text">Searching</label>
</div>
<div id="courseListScreen" class="courseListScreen hidden">
</div>
</div>
</div>
</div>
<!-- Desktop-only button -->
<div id="bottomButtonContainer" class="bottom-button-container desktop-only hidden">
<div class="button-wrapper">
<button class="cohort-button">Apply for this cohort</button>
</div>
</div>
<!-- mobile-only button -->
<div id="mobileCourseActions" class="mobile-course-actions hidden">
<div class="expand-row" id="expandBtn">
<div class="left-label-group">
<img src="/assets/example-content/arrow_forward_ios.svg" class="arrow-forward"/>
<span class="left-label">Expand Search</span>
</div>
<div class="right-label-group">
<span class="result-label">Showing 2 results</span>
<span class="result-label-code" id="selectedPostcode"></span>
</div>
</div>
<div class="button-wrapper">
<button class="cohort-button">Apply for this cohort</button>
</div>
</div>
</section>
{{else}}
<section id="{{sectionId}}" class="enrol-section">
<div class="section-inner">
<div class="section-content">
<div class="left-content">
{{#with leftContent}}
{{#if ErrorLabel}}
<div class="prerequisites-inline">
<img src="{{InfoIcon}}" class="info-image" />
<div class="Prerequisites">{{ErrorLabel}}</div>
</div>
{{/if}}
<h2 class="heading_text">{{title}}</h2>
<p class="sub_heading_text">{{text}}</p>
{{#if showInput}}
<div class="form-controls">
<div class="left-input-wrapper">
<input type="text" class="left-input-box" placeholder="Enter postcode or town" />
<button class="left-search-btn" id="searchBtn">Search</button>
</div>
</div>
{{/if}}
{{/with}}
</div>
<div class="right-content">
{{#with rightContent}}
<p>{{text}}</p>
{{/with}}
{{!-- first screen Course select --}}
{{#with courseselect}}
<div class="right-center-wrapper">
<img src="/assets/example-content/Crest.svg" class="Crest-logo"/>
<div class="right-center-content">Take Your Coaching Further</div>
<div class="right-below-content">Flexible learning -- Online & in-person sessions</div>
</div>
{{/with}}
{{!-- second screen Eligiblity check --}}
{{#each eligiblityheader}}
<section id="{{eligiblityheaderid}}" class="eligibility-section">
<p class="eligiblity-header-title">{{eligiblityheadertitle}}</p>
<ul class="eligibility-list">
{{#each eligiblityheadersubtext}}
<li id="{{id}}" class="eligiblity-header-subtext-checked {{group}} {{state}}">
<div class="rive-container">
<canvas class="rive-animation-canvas"></canvas>
<span class="defaultText">{{text}}</span>
<span class="successText">{{successtext}}</span>
<span class="failureText">{{failuretext}}</span>
<span class="warningtext">{{warningtext}}</span>
</div>
<p class="wrongstateerror">{{{wrongstateerror}}}</p>
<p class="warningmessage">{{{warningmessage}}}</p>
</li>
{{/each}}
</ul>
</section>
{{/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}}
{{/if}}
{{/each}}
</div>