@ -12,19 +12,7 @@
</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' %}
@ -53,7 +41,6 @@
<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>
@ -71,25 +58,6 @@
</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;
@ -100,62 +68,72 @@
<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>
<style>
.certification-footer{
font-size: 8px !important;
line-height: 7px !important;
max-width: 65%;
margin: -10% auto 0;
}
@media screen and (min-width: 500px){
.certification-footer{
font-size: 12px !important;
line-height: 12px !important;
}
}
@media screen and (min-width: 575px){
.certification-footer{
line-height: 20px !important;
}
}
@media screen and (min-width: 768px){
.certification-footer{
line-height: 14px !important;
}
}
@media screen and (min-width: 1000px){
.certification-footer{
font-size: 15px !important;
line-height: 20px !important;
}
}
@media screen and (min-width: 1100px){
.certification-footer{
font-size: 20px !important;
}
}
</style>
{% 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 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 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 >
<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>
{%- comment -%} {% endif %} {%- endcomment -%}
</div>
{% 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>
@ -173,7 +151,7 @@
{% endif %}
</div>
<span style="font-size: 16 px; font-weight: 500; line-height: 20px; margin: 30px 0 15px ">
<span style="font-size: 20 px; font-weight: 500; line-height: 20px;">
Not seeing what you expect? Refresh this page.
</span>
</div>
@ -187,6 +165,39 @@
}
});
</script>
<style>
.cert-content-container > span{
margin: 30px 0 100px;
}
.certification-footer{
margin-top: -16%;
margin-bottom: 50px;
}
@media screen and (min-width: 485px){
.certification-footer{
margin-top: -10%;
}
}
@media screen and (min-width: 768px){
.certification-footer{
margin-top: -8%;
}
}
@media screen and (min-width: 1000px){
.cert-content-container > span{
margin: 30px 0 85px;
}
.certification-footer{
margin-top: -60px;
}
}
</style>
{% endif %}
{% comment %}============================================== PASSED ========================================================{% endcomment %}
@ -197,6 +208,93 @@
<a class="cert-button-big share-cert-button" href="{{ current_person.properties.accredible_url }}" target="_blank">View Credential</a>
</img>
</div>
<style>
.share-cert-button{
margin-bottom: calc(20% + 24px) !important;
}
.certification-footer{
font-size: 8px !important;
max-width: 65%;
margin: -10% auto 0 !important;
}
@media screen and (min-width: 370px){
.certification-footer{
margin-top: -8% !important;
}
}
@media screen and (min-width: 400px){
.certification-footer{
margin-top: -6% !important;
}
}
@media screen and (min-width: 425px){
.certification-footer{
margin-top: -4% !important;
}
}
@media screen and (min-width: 465px){
.certification-footer{
margin-bottom: 50px !important;
margin-top: 0 !important;
}
}
@media screen and (min-width: 569px){
.certification-footer{
font-size: 12px !important;
}
}
@media screen and (min-width: 665px){
.certification-footer{
font-size: 15px !important;
}
}
@media screen and (min-width: 768px){
.certification-footer{
font-size: 10px !important;
margin: -10% auto 50px;
}
}
@media screen and (min-width: 900px){
.certification-footer{
font-size: 14px !important;
margin-top: -4% !important;
}
}
@media screen and (min-width: 1000px){
.share-cert-button{
margin-bottom: calc(24% + 24px) !important;
}
}
@media screen and (min-width: 1150px){
.certification-footer{
font-size: 18px !important;
}
}
@media screen and (min-width: 1150px){
.certification-footer{
font-size: 20px !important;
margin-bottom: 10% !important;
}
}
@media screen and (min-width: 1300px){
.share-cert-button{
margin-bottom: calc(30% + 24px) !important;
}
}
</style>
{% endif %}
{% comment %}=============================================== FAILED ======================================================{% endcomment %}
@ -204,50 +302,32 @@
{% 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 class="np-resource-subtitle cert-sub-header" style="color: #000;" >
If you'd like to try again, email <a href="mailto:certification@skuid.com" style="color: #000;" >certification@skuid.com</a>.
</div>
{%- comment -%} <a class="cert-button-big retake-cert-button" href="#">Register to retake the exam</a> {%- endcomment -%}
</div>
<style>
.certification-footer{
margin-top: -4%;
}
</style>
{% 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="
{% comment %}============================================ FOOTER ====================================================={% endcomment %}
<div class="certification-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 >
{% if current_person.properties.cert_status == 'Default' %}
<span>Learn more at <a href="https://skuid.com/certification" style="color: #0d6efd;">skuid.com/certication</a>.</span >
<br>
<br >
{% endif %}
{% unless current_person.properties.cert_status == 'Fail' %}
<span>Questions? Contact us at <a href="mailto:certification@skuid.com" style="color: #0d6efd;">certification@skuid.com</a>.</span>
{% endunless %}
</div>
</main>
</div>
@ -935,4 +1015,32 @@
{%- 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 -%}
</div> {%- endcomment -%}
{% 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 -%}