938 lines
30 KiB
Plaintext
938 lines
30 KiB
Plaintext
{% if current_person.signed_in? == false %}
|
||
<script>
|
||
window.location.href = '/learners/sign_in'
|
||
</script>
|
||
{% endif %}
|
||
|
||
{% include "header" %}
|
||
<div class="page-container">
|
||
{% if current_person.signed_in? %}
|
||
<div class="np-hidden-mobile custom-sub-navigation">
|
||
{% include "sub_navigation" %}
|
||
</div>
|
||
{% endif %}
|
||
|
||
{%- comment -%} {% if current_person.email == 'alexa.taylor+1+preview-3hy5ulxxu@skuid.com' %}
|
||
<div onclick="callNPWebhook()" style="height: 50px; width: 100px;">Call Webhook</div>
|
||
{% endif %} {%- endcomment -%}
|
||
|
||
|
||
<main class="np-main np-subpage-container np-max-width certification-page">
|
||
{% comment %}================================================ REGISTRATION HEADER ============================================={% endcomment %}
|
||
|
||
{%- comment -%} <div class="register-button">Register Now</div> {%- endcomment -%}
|
||
|
||
{% comment %}=================================================== TEXT HEADER ==================================================={% endcomment %}
|
||
|
||
{%- comment -%} <div class="np-resource-title skuid-cert-reg-header">Skuid Certification Registration</div> {%- endcomment -%}
|
||
|
||
{% comment %}================================================= HEADER BUBBLES ==================================================={% endcomment %}
|
||
{% if current_person.properties.cert_status == 'Default' %}
|
||
<div class="base-state">
|
||
<div class="np-resource-title">Skuid Certification Registration</div>
|
||
</div>
|
||
{% else %}
|
||
<div class="cert-step-bubbles col-xs-12">
|
||
<div class="cert-bubble col-xs-3">GET STARTED</div>
|
||
<div class="cert-bubble col-xs-3 {% if current_person.properties.cert_status == 'Registered' %}cert-bubble-active{% endif %}">EXAM PREP</div>
|
||
<div class="cert-bubble col-xs-3 {% if current_person.properties.cert_status == 'Exists-qm' %}cert-bubble-active{% endif %}">EXAM PENDING</div>
|
||
<div class="cert-bubble col-xs-3 {% if current_person.properties.cert_status == 'Pass' or current_person.properties.cert_status == 'Fail' %}cert-bubble-active{% endif %}">
|
||
{% if current_person.properties.cert_status == 'Pass' or current_person.properties.cert_status == 'Fail' %}
|
||
{{current_person.properties.cert_status}}
|
||
{% else %}
|
||
COMPLETION STATUS
|
||
{% endif %}
|
||
</div>
|
||
</div>
|
||
{% endif %}
|
||
|
||
{% comment %}=========================================== CERTIFICATION REGISTRATION =============================================={% endcomment %}
|
||
|
||
{% if current_person.properties.cert_status == 'Default' %}
|
||
<div class="cert-content-container col-xs-12">
|
||
<div class="np-resource-title cert-header" style="color: #000;">Ready to be Skuid Certified?</div>
|
||
<div class="np-resource-subtitle cert-sub-header registration-sub-header">
|
||
<div>The Skuid - Certified Builder Exam assumes knowledge in topics from these learning paths: <a href="https://www.skuidskool.com/app/learning_paths/46ae5253-8c64-426b-a638-e80c08ce29da" class="registration-sub-header-link" target="_blank">Level 1</a>, <a href="https://www.skuidskool.com/app/learning_paths/e7d6e7ca-39ad-4a40-b75c-83d382715c4a" class="registration-sub-header-link" target="_blank">Level 2</a>, <a href="https://www.skuidskool.com/app/learning_paths/e15cd738-8681-4171-9d09-ba3d31c02005" class="registration-sub-header-link" target="_blank">Deploy and Manage Skuid Apps in Salesforce</a>, and <a href="https://www.skuidskool.com/app/learning_paths/e76d07d4-984b-41a9-b53f-2c300f8eeba9" class="registration-sub-header-link" target="_blank">Explore More</a>.</div>
|
||
{%- comment -%} <a href="/app" class="registration-sub-header-link" target="_blank">Skuid Skool</a> {%- endcomment -%}
|
||
<br>
|
||
<div>Click below to agree to the terms and register for your exam.</div>
|
||
</div>
|
||
|
||
<div style="background: rgb(255, 224, 143, 0.46); border-radius: 10px; padding: 20px 0; width: 80%;">
|
||
<div class="np-resource-subtitle cert-sub-header registration-sub-header" style="padding: 0; text-align: center; width: 100%;">
|
||
<span>
|
||
**Important: Make sure you register with the same email that you use in Skuid Skool.**
|
||
</span>
|
||
<br>
|
||
<span style="font-weight: 400;">If you don't, you may not be able to take the exam or get credit for the certification.</span>
|
||
</div>
|
||
<div style="align-items: center; display: flex; flex-direction: row; justify-content: center;" >
|
||
<input type="checkbox" id="skuid-cert-agreement-input" onclick="agreementValidator()" style="font-weight: 500; margin-right: 10px;"><span style="color: #000000;">I have read and understand the <a href="https://www.skuid.com/legal/skuid-certification-exam-agreement" target="_blank">Skuid Terms and Agreements*</a></span>
|
||
</div>
|
||
</div>
|
||
|
||
{%- comment -%} Test Button 1 {%- endcomment -%}
|
||
{%- comment -%} <form id="skuid-cert-registration-button" name="PrePage" method ="post" action = "https://scotest.authorize.net/payment/CatalogPayment.aspx" target="_blank" style="
|
||
height: 52px;
|
||
margin: 30px 0 25px;
|
||
pointer-events: none;">
|
||
<input type = "hidden" name = "LinkId" value ="f0b2546a-f610-4015-80b3-19357fbb7b88" />
|
||
<input type = "image" src ="//testcontent.authorize.net/images/buy-now-gold.gif" />
|
||
</form> {%- endcomment -%}
|
||
|
||
{%- comment -%} Test Button 2 {%- endcomment -%}
|
||
{%- comment -%} <form id="skuid-cert-registration-button" name="PrePage" method = "post" action = "https://scotest.authorize.net/payment/CatalogPayment.aspx" target="_blank" style="
|
||
height: 52px;
|
||
margin: 30px 0 25px;
|
||
pointer-events: none;">
|
||
<input type = "hidden" name = "LinkId" value ="f0b2546a-f610-4015-80b3-19357fbb7b88" />
|
||
<input type = "image" src ="https://uploads-ssl.webflow.com/5f3ae94493a8451beac90951/64ad5965ca60ccb9008e0cb0_RegisterButtonCert.svg" alt="Register Now" />
|
||
</form> {%- endcomment -%}
|
||
|
||
{%- comment -%} Test Button 3 {%- endcomment -%}
|
||
<form id="skuid-cert-registration-button" name="PrePage" method = "post" action = "https://Simplecheckout.authorize.net/payment/CatalogPayment.aspx" target="_blank" style="
|
||
height: 52px;
|
||
margin: 30px 0 25px;
|
||
pointer-events: none;">
|
||
<input type = "hidden" name = "LinkId" value ="ed5efb0e-a511-4f73-9d37-d47a2b6db15e" />
|
||
<input type = "image" src ="https://uploads-ssl.webflow.com/5f3ae94493a8451beac90951/64ad5965ca60ccb9008e0cb0_RegisterButtonCert.svg" alt="Register Now" />
|
||
</form>
|
||
|
||
<span style="color: #000; font-size: 20px; font-weight: 500; line-height: 20px; margin-bottom: 20px">Once you’ve registered, refresh this page to access the prep materials.</span>
|
||
|
||
{%- comment -%} <span style="
|
||
bottom: -200px;
|
||
color: #000;
|
||
font-size: 1rem;
|
||
font-weight: 500;
|
||
line-height: 28px;
|
||
position: absolute;">Learn more at <a href="https://skuidskool.com/certification" style="color: #000;">skuidskool.com/certification</a></span> {%- endcomment -%}
|
||
|
||
<img src="https://cdn.northpass.io/Skuid/images/Cert_Registration.svg" alt="exam-registration-image" class="exam-status-image exam-registration-image">
|
||
</img>
|
||
</div>
|
||
{% endif %}
|
||
|
||
|
||
{% comment %}================================================ EXAM PREP ==================================================={% endcomment %}
|
||
|
||
{% if current_person.properties.cert_status == 'Registered' or current_person.properties.cert_status == 'Exists-qm' %}
|
||
|
||
{%- comment -%} {% assign render_practice = true %}
|
||
{% if courses.enrolled.any? and courses.in_catalog.any? %}
|
||
{% for course in courses.enrolled %}
|
||
{% if course.id == '3500821c-4b76-4155-a714-2947dc1b8d0c' or course.id == '10eeed9b-a5b8-446d-8023-2d109766fda6' %}
|
||
{% if course.completed? %}
|
||
{% assign render_practice = false %}
|
||
{% endif %}
|
||
{% endif %}
|
||
{% endfor %}
|
||
|
||
{% for course in courses.in_catalog %}
|
||
{% if course.id == '3500821c-4b76-4155-a714-2947dc1b8d0c' or course.id == '10eeed9b-a5b8-446d-8023-2d109766fda6' %}
|
||
{% if course.completed? %}
|
||
{% assign render_practice = false %}
|
||
{% endif %}
|
||
{% endif %}
|
||
{% endfor %}
|
||
{% endif %} {%- endcomment -%}
|
||
|
||
<div class="cert-content-container col-xs-12">
|
||
<div class="np-resource-title cert-header">Skuid Certification Exam Prep</div>
|
||
<div class="np-resource-subtitle cert-sub-header" style="color: #000;">Prep, practice, and take your exam.</div>
|
||
|
||
<div class="cert-exam-prep-cards col-xs-9 col-sm-12">
|
||
{%- comment -%} {% if render_practice == true %}{% endif %} {%- endcomment -%}
|
||
<div class="cert-card col-xs-12 col-md-3">
|
||
<a class="cert-button" href="https://www.skuidskool.com/c/7ed8d12a54a69be1339fcc12ce5fce92c2da8d19" target="_blank">Prep Guide</a>
|
||
<div class="cert-card-blurb">
|
||
View courses, documentation, and other resources to prep for the certification exam.
|
||
</div>
|
||
</div>
|
||
<div class="cert-card col-xs-12 col-md-3">
|
||
<a class="cert-button" href="https://www.skuidskool.com/c/7288cf328ff4fa291c430d179fa962dc20c069ae" target="_blank">Practice Exam</a>
|
||
<div class="cert-card-blurb">
|
||
Take a practice exam to test what you've learned.
|
||
</div>
|
||
</div>
|
||
{%- comment -%} {% endif %} {%- endcomment -%}
|
||
{% if current_person.properties.cert_status == 'Registered' %}
|
||
<div class="cert-card col-xs-12 col-md-3">
|
||
<a class="cert-button cert-button-locked" href="#" target="_blank">Exam Not Ready</a>
|
||
<div class="cert-card-blurb">
|
||
This button will activate when you've received your exam confirmation email.
|
||
</div>
|
||
</div>
|
||
{% elsif current_person.properties.cert_status == 'Exists-qm' %}
|
||
<div class="cert-card col-xs-12 col-md-3">
|
||
<a class="cert-button" href="https://ondemand.questionmark.com/home/406287/user?destination=assessments" target="_blank">Take Exam</a>
|
||
<div class="cert-card-blurb">
|
||
Ready? Take your exam to become certified.
|
||
</div>
|
||
</div>
|
||
{% endif %}
|
||
</div>
|
||
|
||
<span style="font-size: 16px; font-weight: 500; line-height: 20px; margin: 30px 0 15px">
|
||
Not seeing what you expect? Refresh this page.
|
||
</span>
|
||
</div>
|
||
<div onclick="callNPWebhook()" style="display: none;" id="webhook-caller-item"></div>
|
||
<script>
|
||
$( document ).ready(function(){
|
||
let caller = document.getElementById('webhook-caller-item');
|
||
|
||
if(caller){
|
||
caller.click();
|
||
}
|
||
});
|
||
</script>
|
||
{% endif %}
|
||
|
||
{% comment %}============================================== PASSED ========================================================{% endcomment %}
|
||
|
||
{% if current_person.properties.cert_status == 'Pass' %}
|
||
<div class="cert-content-container col-xs-12 exam-status-container">
|
||
<img src="https://s3.amazonaws.com/static.northpass.com/Skuid/images/cert_exam_passed.svg" alt="exam-passed-background" class="exam-status-image">
|
||
<a class="cert-button-big share-cert-button" href="{{ current_person.properties.accredible_url }}" target="_blank">View Credential</a>
|
||
</img>
|
||
</div>
|
||
{% endif %}
|
||
|
||
{% comment %}=============================================== FAILED ======================================================{% endcomment %}
|
||
|
||
{% if current_person.properties.cert_status == 'Fail' %}
|
||
<div class="cert-content-container col-xs-12" style="padding-bottom: 30px;">
|
||
<div class="np-resource-title cert-header" style="color: #000;">Exam failed.</div>
|
||
<div class="np-resource-subtitle cert-sub-header">
|
||
If you'd like to try again, <a href="mailto:certification@skuid.com">certification@skuid.com</a>.
|
||
</div>
|
||
{%- comment -%} <a class="cert-button-big retake-cert-button" href="#">Register to retake the exam</a> {%- endcomment -%}
|
||
</div>
|
||
{% endif %}
|
||
|
||
{% comment %}============================================= CERTIFIED (UNUSED)======================================================{% endcomment %}
|
||
|
||
{%- comment -%} <div class="cert-content-container col-xs-12 exam-status-container">
|
||
<img src="https://cdn.northpass.io/Skuid/images/cert_recert.svg" alt="cert-recert-background" class="exam-status-image">
|
||
<div class="cert-recert-content-container">
|
||
<div class="np-resource-subtitle cert-sub-header">Recertification is due on 1/1/2024</div>
|
||
<a class="cert-button-med download-cert-button" href="#">Download Certificate</a>
|
||
</div>
|
||
</img>
|
||
</div> {%- endcomment -%}
|
||
|
||
{%- comment -%} <div class="cert-content-container col-xs-12">
|
||
<div class="np-resource-title cert-header">Congratulations you're certified!</div>
|
||
<div class="np-resource-subtitle cert-sub-header">Recertification is due on 1/1/2024</div>
|
||
|
||
<a class="cert-button-med download-cert-button" href="#">Download Certificate</a>
|
||
</div> {%- endcomment -%}
|
||
|
||
{% comment %}============================================ RECERTIFIED (UNUSED)====================================================={% endcomment %}
|
||
|
||
{%- comment -%} <div class="cert-content-container col-xs-12">
|
||
<div class="np-resource-title cert-header">Time for your recertification!</div>
|
||
<div class="np-resource-subtitle cert-sub-header">Recertification is due on 1/1/2024</div>
|
||
|
||
<a class="cert-button-med re-cert-button" href="#">Get recertified</a>
|
||
</div> {%- endcomment -%}
|
||
<div class="ceritfication-footer" style="
|
||
font-size: 20px;
|
||
font-weight: 500;
|
||
line-height: 20px;
|
||
margin-top: 15%;
|
||
text-align: center;
|
||
width: 100%;">
|
||
<span>Learn more at <a href="https://skuid.com/certification" style="color: #0d6efd;">skuid.com/certication</a>.</span>
|
||
<br>
|
||
<br>
|
||
<span>Questions? Contact us at <a href="mailto:certification@skuid.com" style="color: #0d6efd;">certification@skuid.com</a>.</span>
|
||
</div>
|
||
</main>
|
||
</div>
|
||
{%- comment -%} {% include "footer" %} {%- endcomment -%}
|
||
|
||
<!-- Hotjar Tracking Code for Skool Staging/test site -->
|
||
<script>
|
||
(function(h,o,t,j,a,r){
|
||
h.hj=h.hj||function(){(h.hj.q=h.hj.q||[]).push(arguments)};
|
||
h._hjSettings={hjid:3393511,hjsv:6};
|
||
a=o.getElementsByTagName('head')[0];
|
||
r=o.createElement('script');r.async=1;
|
||
r.src=t+h._hjSettings.hjid+j+h._hjSettings.hjsv;
|
||
a.appendChild(r);
|
||
})(window,document,'https://static.hotjar.com/c/hotjar-','.js?sv=');
|
||
|
||
let agreementValidator = () => {
|
||
if(document.getElementById('skuid-cert-agreement-input').checked){
|
||
document.getElementById('skuid-cert-registration-button').style.pointerEvents = 'auto'
|
||
} else {
|
||
document.getElementById('skuid-cert-registration-button').style.pointerEvents = 'none'
|
||
}
|
||
}
|
||
|
||
let callNPWebhook = async () => {
|
||
let webhookCaller = async () => {
|
||
return new Promise(function(res, rej) {
|
||
let xhr = new XMLHttpRequest();
|
||
url = "https://webhooks.workato.com/webhooks/rest/e3211958-706d-4f5d-8148-fc904421241b/webhook-from-templates";
|
||
|
||
//xhr.addEventListener("load", e => {
|
||
// window.location.replace('/app/waiting-room');
|
||
//});
|
||
xhr.open("POST", url, true);
|
||
xhr.send(JSON.stringify({
|
||
email: '{{ current_person.email }}',
|
||
name: "{{ current_person.first_name }} {{ current_person.last_name }}",
|
||
user_id: '{{ current_person.id }}',
|
||
cert_status: '{{ current_person.properties.cert_status }}',
|
||
learner_points: '{{ current_person.properties.learner_points }}'
|
||
}))
|
||
})
|
||
}
|
||
|
||
try {
|
||
await webhookCaller()
|
||
.then((res) => {
|
||
window.location.replace('/app/dashboard');
|
||
})
|
||
} catch(err) {
|
||
console.log(err)
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style>
|
||
.certification-page{
|
||
height: 100%;
|
||
padding: 40px 15px 20px;
|
||
width: 100%;
|
||
}
|
||
|
||
.cert-header,
|
||
.cert-sub-header{
|
||
text-align: center;
|
||
}
|
||
|
||
.cert-sub-header{
|
||
font-weight: 500;
|
||
margin-bottom: 40px;
|
||
}
|
||
|
||
.register-cert-button{
|
||
margin-top: -4px !important;
|
||
}
|
||
|
||
.cert-recert-content-container{
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
width: 100%;
|
||
position: absolute;
|
||
padding-top: 12%;
|
||
left: -5px;
|
||
font-size: 10px;
|
||
}
|
||
|
||
.cert-recert-content-container .cert-sub-header{
|
||
font-size: 8px;
|
||
}
|
||
|
||
.registration-sub-header{
|
||
color: #000000;
|
||
padding: 0 8%;
|
||
}
|
||
|
||
.registration-sub-header-link{
|
||
text-decoration: none;
|
||
}
|
||
|
||
@media screen and (min-width: 450px){
|
||
.cert-recert-content-container{
|
||
padding-top: 13%;
|
||
}
|
||
}
|
||
|
||
@media screen and (min-width: 550px){
|
||
.cert-recert-content-container{
|
||
padding-top: 14%;
|
||
}
|
||
|
||
.cert-recert-content-container .cert-sub-header{
|
||
font-size: 14px;
|
||
}
|
||
|
||
}
|
||
|
||
@media screen and (min-width: 768px){
|
||
.certification-page{
|
||
padding: 30px 3% 75px;
|
||
}
|
||
|
||
.cert-recert-content-container{
|
||
left: unset;
|
||
margin-right: 10px;
|
||
padding-top: 8%;
|
||
}
|
||
|
||
.cert-recert-content-container .cert-sub-header{
|
||
font-size: 14px;
|
||
}
|
||
}
|
||
|
||
@media screen and (min-width: 900px){
|
||
.cert-recert-content-container{
|
||
padding-top: 9%;
|
||
}
|
||
|
||
.cert-recert-content-container .cert-sub-header{
|
||
font-size: 16px;
|
||
}
|
||
}
|
||
|
||
@media screen and (min-width: 1150px){
|
||
.cert-recert-content-container{
|
||
padding-top: 10%;
|
||
}
|
||
|
||
.cert-recert-content-container .cert-sub-header{
|
||
font-size: 18px;
|
||
}
|
||
}
|
||
|
||
@media screen and (min-width: 1280px){
|
||
.cert-recert-content-container .cert-sub-header{
|
||
font-size: 20px;
|
||
}
|
||
}
|
||
|
||
@media screen and (min-width: 1440px){
|
||
.cert-recert-content-container{
|
||
padding-top: 11%;
|
||
}
|
||
|
||
.cert-recert-content-container .cert-sub-header{
|
||
font-size: 22px;
|
||
}
|
||
}
|
||
|
||
@media screen and (min-width: 1950px){
|
||
.cert-recert-content-container{
|
||
padding-top: 10%;
|
||
}
|
||
|
||
.cert-recert-content-container .cert-sub-header{
|
||
font-size: 24px;
|
||
}
|
||
}
|
||
|
||
@media screen and (min-width: 2150px){
|
||
.cert-recert-content-container{
|
||
padding-top: 200px;
|
||
}
|
||
|
||
.cert-recert-content-container .cert-sub-header{
|
||
font-size: 26px;
|
||
}
|
||
}
|
||
|
||
/* TOP ELEMENT STYLES */
|
||
|
||
.base-state{
|
||
align-items: center;
|
||
display: flex;
|
||
flex-direction: row;
|
||
justify-content: space-between;
|
||
margin-bottom: 30px;
|
||
}
|
||
|
||
.base-state .np-resources-title{
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
.register-button{
|
||
background: #603DD8;
|
||
color: #FFFFFF;
|
||
border-radius: 16px;
|
||
font-size: 16px;
|
||
font-weight: 500;
|
||
height: 35px;
|
||
padding: 5px;
|
||
text-align: center;
|
||
width: 150px;
|
||
}
|
||
|
||
.cert-step-bubbles{
|
||
align-items: center;
|
||
display: flex;
|
||
flex-direction: row;
|
||
height: 73px;
|
||
justify-content: space-between;
|
||
margin-bottom: 12px;
|
||
padding: 0;
|
||
}
|
||
|
||
.cert-bubble{
|
||
align-items: center;
|
||
background: #B195F4;
|
||
border-radius: 8px;
|
||
color: #FFFFFF;
|
||
display: flex;
|
||
font-size: 9px;
|
||
font-weight: 500;
|
||
height: 100%;
|
||
justify-content: center;
|
||
max-width: 24%;
|
||
text-align: center;
|
||
}
|
||
|
||
.cert-bubble-active{
|
||
background: #603DD8;
|
||
}
|
||
|
||
@media screen and (min-width: 450px){
|
||
.cert-bubble{
|
||
font-size: 10px;
|
||
}
|
||
}
|
||
|
||
@media screen and (min-width: 650px){
|
||
.cert-bubble{
|
||
font-size: 12px;
|
||
}
|
||
}
|
||
|
||
@media screen and (min-width: 750px){
|
||
.cert-bubble{
|
||
font-size: 14px;
|
||
}
|
||
}
|
||
|
||
@media screen and (min-width: 768px){
|
||
.base-state{
|
||
margin-bottom: 12px;
|
||
}
|
||
|
||
.cert-bubble{
|
||
font-size: 10px;
|
||
}
|
||
}
|
||
|
||
@media screen and (min-width: 850px){
|
||
.cert-bubble{
|
||
font-size: 12px;
|
||
}
|
||
}
|
||
|
||
@media screen and (min-width: 1100px){
|
||
.cert-bubble{
|
||
font-size: 14px;
|
||
}
|
||
}
|
||
|
||
@media screen and (min-width: 1200px){
|
||
.cert-bubble{
|
||
font-size: 12px;
|
||
}
|
||
}
|
||
|
||
|
||
/* CONTENT STYLES ===================================================================================================================================================== */
|
||
.certification-iframe,
|
||
.cert-content-container{
|
||
background: #F7F5FD;
|
||
width: 100%;
|
||
}
|
||
|
||
.certification-iframe{
|
||
min-height: 970px;
|
||
}
|
||
|
||
/* .certification-iframe::-webkit-scrollbar{
|
||
display: none;
|
||
} */
|
||
|
||
.cert-content-container{
|
||
align-items: center;
|
||
border-radius: 10px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
/* padding-bottom: 127px; */
|
||
padding-top: 50px;
|
||
}
|
||
|
||
.exam-status-container{
|
||
padding: 0;
|
||
}
|
||
|
||
.exam-status-image{
|
||
width: 100%;
|
||
}
|
||
|
||
.exam-registration-image{
|
||
margin-left: -15%;
|
||
}
|
||
|
||
.cert-exam-prep-cards{
|
||
align-items: center;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: space-evenly;
|
||
}
|
||
|
||
.cert-card{
|
||
align-items: center;
|
||
background: #E7E3F4;
|
||
border-radius: 10px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
width: 100%;
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
.cert-button{
|
||
margin-bottom: 24px;
|
||
margin-top: 40px;
|
||
width: 55%;
|
||
}
|
||
|
||
.cert-button-locked{
|
||
opacity: 0.65;
|
||
pointer-events: none;
|
||
}
|
||
|
||
.cert-button-med{
|
||
width: 45%;
|
||
}
|
||
|
||
.cert-button-big{
|
||
font-size: 18px;
|
||
height: 40px;
|
||
padding: 5px;
|
||
width: 70%;
|
||
}
|
||
|
||
.cert-button,
|
||
.cert-button-med{
|
||
font-size: 14px;
|
||
height: 35px;
|
||
padding: 7px
|
||
}
|
||
|
||
.cert-button-med,
|
||
.cert-button-big{
|
||
margin-top: 25px;
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
.cert-button,
|
||
.cert-button-med,
|
||
.cert-button-big{
|
||
background: #603DD8;
|
||
border-radius: 16px;
|
||
color: #FFFFFF;
|
||
font-weight: 500;
|
||
margin-bottom: 24px;
|
||
text-align: center;
|
||
text-decoration: none;
|
||
}
|
||
|
||
.retake-cert-button{
|
||
font-size: 16px;
|
||
padding: 7px;
|
||
}
|
||
|
||
.cert-button:hover,
|
||
.cert-button-big:hover{
|
||
color: #FFFFFF;
|
||
}
|
||
|
||
.cert-card-blurb{
|
||
font-size: 18px;
|
||
font-weight: 500;
|
||
min-height: 100px;
|
||
margin-bottom: 19px;
|
||
padding: 0 25px;
|
||
text-align: center;
|
||
}
|
||
|
||
.completion-status-card-blurb{
|
||
min-height: 70px;
|
||
}
|
||
|
||
.share-cert-button{
|
||
font-size: 12px !important;
|
||
height: 40px;
|
||
margin-top: -40%;
|
||
margin-bottom: calc(34% + 24px);
|
||
max-width: 275px;
|
||
padding: 11px 0px;
|
||
width: 38% !important;
|
||
}
|
||
|
||
.download-cert-button{
|
||
font-size: 12px;
|
||
height: 27px;
|
||
margin-top: -25px;
|
||
max-width: 210px;
|
||
padding-top: 5px;
|
||
}
|
||
|
||
@media screen and (min-width: 450px){
|
||
.cert-button{
|
||
font-size: 16px;
|
||
padding: 5px;
|
||
}
|
||
|
||
.cert-button-med{
|
||
width: 40%;
|
||
}
|
||
|
||
.cert-button-big{
|
||
width: 55%;
|
||
}
|
||
|
||
.download-cert-button{
|
||
font-size: 14px;
|
||
height: unset;
|
||
margin-top: -15px;
|
||
width: 40%;
|
||
}
|
||
}
|
||
|
||
@media screen and (min-width: 500px){
|
||
.retake-cert-button{
|
||
font-size: 18px;
|
||
padding: 5px;
|
||
}
|
||
|
||
.share-cert-button{
|
||
font-size: 14px;
|
||
padding: 8px;
|
||
}
|
||
}
|
||
|
||
@media screen and (min-width: 550px){
|
||
.cert-button-med{
|
||
width: 35%;
|
||
}
|
||
|
||
.cert-button-big{
|
||
width: 50%;
|
||
}
|
||
}
|
||
|
||
@media screen and (min-width: 600px){
|
||
.cert-button-med{
|
||
width: 30%;
|
||
}
|
||
|
||
.cert-button-big{
|
||
width: 45%;
|
||
}
|
||
}
|
||
|
||
@media screen and (min-width: 650px){
|
||
.cert-button-big{
|
||
width: 40%;
|
||
}
|
||
}
|
||
|
||
@media screen and (min-width: 700px){
|
||
.cert-button-med{
|
||
width: 27%;
|
||
}
|
||
|
||
.cert-button-big{
|
||
width: 35%;
|
||
}
|
||
}
|
||
|
||
@media screen and (min-width: 768px){
|
||
.cert-exam-prep-cards{
|
||
width: 100%;
|
||
}
|
||
|
||
.cert-card-blurb{
|
||
min-height: 130px;
|
||
}
|
||
|
||
.completion-status-card-button{
|
||
width: 75%;
|
||
}
|
||
|
||
.cert-button-med{
|
||
width: 35%;
|
||
}
|
||
|
||
.cert-button-big{
|
||
width: 50%;
|
||
}
|
||
|
||
.retake-cert-button{
|
||
font-size: 16px;
|
||
padding: 7px;
|
||
}
|
||
}
|
||
|
||
@media screen and (min-width: 850px){
|
||
.completion-status-card-button{
|
||
width: 65%;
|
||
}
|
||
|
||
.cert-button-med{
|
||
width: 30%;
|
||
}
|
||
|
||
.cert-button-big{
|
||
width: 45%;
|
||
}
|
||
}
|
||
|
||
@media screen and (min-width: 900px){
|
||
.completion-status-card-button{
|
||
width: 60%;
|
||
}
|
||
|
||
.share-cert-button{
|
||
font-size: 18px !important;
|
||
padding: 5px !important;
|
||
}
|
||
|
||
.cert-button-big{
|
||
width: 40%;
|
||
}
|
||
}
|
||
|
||
@media screen and (min-width: 950px){
|
||
.cert-button-med{
|
||
width: 25%;
|
||
}
|
||
|
||
.completion-status-card-button{
|
||
width: 55%;
|
||
}
|
||
}
|
||
|
||
@media screen and (min-width: 1000px){
|
||
.cert-button-big{
|
||
width: 35%;
|
||
}
|
||
}
|
||
|
||
@media screen and (min-width: 1024px){
|
||
.cert-exam-prep-cards{
|
||
flex-direction: row;
|
||
}
|
||
|
||
.cert-button{
|
||
font-size: 14px;
|
||
padding: 0;
|
||
padding-top: 7px;
|
||
width: 80%;
|
||
}
|
||
|
||
.cert-card-blurb{
|
||
min-height: 190px;
|
||
}
|
||
|
||
.completion-status-card-blurb{
|
||
min-height: 80px;
|
||
}
|
||
}
|
||
|
||
@media screen and (min-width: 1100px){
|
||
.cert-button{
|
||
font-size: 14px;
|
||
padding: 7px;
|
||
width: 75%;
|
||
}
|
||
|
||
.cert-button-med{
|
||
width: 22%;
|
||
}
|
||
}
|
||
|
||
@media screen and (min-width: 1150px){
|
||
.cert-button-big{
|
||
width: 30%;
|
||
}
|
||
}
|
||
|
||
@media screen and (min-width: 1200px){
|
||
.cert-button{
|
||
width: 70%;
|
||
}
|
||
}
|
||
|
||
@media screen and (min-width: 1300px){
|
||
.cert-button{
|
||
width: 65%;
|
||
}
|
||
|
||
.cert-button-med{
|
||
max-width: 170px;
|
||
}
|
||
|
||
.cert-button-big{
|
||
max-width: 230px;
|
||
width: 25%;
|
||
}
|
||
|
||
.download-cert-button{
|
||
margin-top: 25px;
|
||
}
|
||
}
|
||
|
||
@media screen and (min-width: 1350px){
|
||
.cert-button{
|
||
font-size: 16px;
|
||
padding: 6px;
|
||
}
|
||
}
|
||
|
||
@media screen and (min-width: 1440px){
|
||
.cert-button{
|
||
width: 60%;
|
||
}
|
||
|
||
.cert-card-blurb{
|
||
min-height: 140px;
|
||
}
|
||
|
||
.completion-status-card-blurb{
|
||
min-height: 80px;
|
||
}
|
||
}
|
||
</style>
|
||
|
||
|
||
{%- comment -%} UNUSED ELEMENTS {%- endcomment -%}
|
||
|
||
{% comment %}=================================================== IFRAME (REMOVE) =========================================================={% endcomment %}
|
||
|
||
{%- comment -%} <iframe src="https://www.skuid.com/certification" title="skuid_certification_embed" class="certification-iframe"></iframe> {%- endcomment -%}
|
||
|
||
{% comment %}============================================ EXAM NOT STARTED (UNUSED)=================================================={% endcomment %}
|
||
|
||
{%- comment -%} <div class="cert-content-container col-xs-12">
|
||
<div class="np-resource-title cert-header">Exam not started</div>
|
||
<div class="np-resource-subtitle cert-sub-header">See email for instructions or schedule your exam below</div>
|
||
|
||
<div class="cert-card col-xs-9 col-sm-5">
|
||
<a class="cert-button completion-status-card-button" href="#">Schedule Exam</a>
|
||
<div class="cert-card-blurb completion-status-card-blurb">
|
||
Ready? Schedule your exam to become certified.
|
||
</div>
|
||
</div>
|
||
</div> {%- endcomment -%}
|
||
|
||
{% comment %}============================================ EXAM COMPLETE ===================================================={% endcomment %}
|
||
|
||
{%- comment -%} <div class="np-resource-title cert-header">Exam complete</div>
|
||
<div class="np-resource-subtitle cert-sub-header">Results are still qm_created. Check back in 10 business days from your exam date.</div> {%- endcomment -%}
|
||
|
||
{%- comment -%} <div class="cert-content-container col-xs-12 exam-status-container">
|
||
<img src="https://cdn.northpass.io/Skuid/images/exam_complete_background.svg" alt="exam-complete-background" class="exam-status-image">
|
||
</div> {%- endcomment -%} |