small script changes. Updates to G2's modal popup.
This commit is contained in:
Norm Rasmussen
@ -1,9 +1,13 @@
|
||||
<script>
|
||||
function showPopup() {
|
||||
var dialogShown = localStorage.getItem('dialogShown')
|
||||
if (!dialogShown) {
|
||||
setTimeout(function() {
|
||||
document.querySelector(".popup-trigger").click()
|
||||
console.log("showing popup")
|
||||
localStorage.setItem('dialogShown', 1)
|
||||
}, 500)}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
@ -30,9 +34,9 @@
|
||||
<div class="modal-headline">Welcome to G2 University, {{ current_person.first_name }}! Have you become
|
||||
#G2Certified yet?</div>
|
||||
<div class="modal-links">
|
||||
<a href="javascript:setPopupSeenProperty('/app')" class="secondary" data-toggle-trigger-off>
|
||||
<a class="secondary" data-toggle-trigger-off>
|
||||
I'm just looking around.</a>
|
||||
<a href="javascript:setPopupSeenProperty('/app/learning_paths')" data-redirect="/app">Let's get
|
||||
<a href="/app/learning_paths" data-redirect="/app">Let's get
|
||||
#G2Certified!</a>
|
||||
</div>
|
||||
</div>
|
||||
@ -62,6 +66,10 @@
|
||||
</script>
|
||||
<style>
|
||||
/* MODAL POPUP */
|
||||
.popup-trigger {
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
}
|
||||
.first-time-user-popup {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
@ -103,6 +111,7 @@
|
||||
font-weight: 500;
|
||||
margin-bottom: 32px;
|
||||
text-align: center;
|
||||
color: #F7492D;
|
||||
}
|
||||
|
||||
.modal-links {
|
||||
@ -111,7 +120,7 @@
|
||||
|
||||
.modal-links a {
|
||||
border: 2px solid #3c228a;
|
||||
background: #3c228a;
|
||||
background: #F7492D;
|
||||
padding: 8px 16px;
|
||||
text-align: center;
|
||||
width: calc(50% - 8px);
|
||||
|
||||
@ -20,7 +20,7 @@
|
||||
</div>
|
||||
{% include "sub_navigation" %}
|
||||
{% include 'courses_catalog' %}
|
||||
</main>
|
||||
{% include 'modal_popup' %}
|
||||
{% include "footer" %}
|
||||
|
||||
<style>
|
||||
|
||||
BIN
Custom_Templates/customer_templates/Skuid/.DS_Store
vendored
Normal file
BIN
Custom_Templates/customer_templates/Skuid/.DS_Store
vendored
Normal file
Binary file not shown.
@ -0,0 +1,19 @@
|
||||
<form class="np-form" action="{{ form.options.action }}" method="post" id="desktop_edit_learner" novalidate>
|
||||
<input type="hidden" name="_method" value="{{ form.options.http_method }}">
|
||||
{% form_authenticity_token %}
|
||||
<div class="np-card">
|
||||
<div class="np-card-container np-card-padding">
|
||||
<div class="row">
|
||||
<div class="col-sm-7 np-account-form">
|
||||
{% render "account_form", form: form, version: "desktop" %}
|
||||
<button type="submit" class="account-submit-button np-button np-button-big np-button-large-font np-form-action" onclick="hubspotOptOutSubmit()">
|
||||
{% t shared.account.save %}
|
||||
</button>
|
||||
</div>
|
||||
<div class="col-sm-5 np-account-avatar">
|
||||
{% include "account_avatar", version: "desktop" %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
@ -0,0 +1,131 @@
|
||||
<div class="np-resource-title">
|
||||
{% t .header %}
|
||||
</div>
|
||||
<div class="np-form-field {% if form.errors contains 'email' %}np-account-form-field-error{% endif %}">
|
||||
<label class="np-input-label" for="{{version}}_learner_email">{% t shared.email %} *</label>
|
||||
<input
|
||||
{% if form.options.invite? %} disabled {% endif %}
|
||||
autofocus="autofocus"
|
||||
class="np-input"
|
||||
id="{{version}}_learner_email"
|
||||
name="learner[email]"
|
||||
type="email"
|
||||
value="{{ form.email }}"
|
||||
/>
|
||||
</div>
|
||||
<div class="np-form-field {% if form.errors contains 'first_name' %}np-account-form-field-error{% endif %}">
|
||||
<label class="np-input-label" for="{{version}}_learner_first_name">
|
||||
{% t shared.first_name %} *
|
||||
</label>
|
||||
<input
|
||||
class="np-input"
|
||||
id="{{version}}_learner_first_name"
|
||||
name="learner[first_name]"
|
||||
value="{{ form.first_name }}"
|
||||
/>
|
||||
</div>
|
||||
<div class="np-form-field {% if form.errors contains 'last_name' %}np-account-form-field-error{% endif %}">
|
||||
<label class="np-input-label" for="{{version}}_learner_last_name">
|
||||
{% t shared.last_name %} *
|
||||
</label>
|
||||
<input
|
||||
class="np-input"
|
||||
id="{{version}}_learner_last_name"
|
||||
name="learner[last_name]"
|
||||
value="{{ form.last_name }}"
|
||||
/>
|
||||
</div>
|
||||
<div class="np-form-field {% if form.errors contains 'display_name' %}np-account-form-field-error{% endif %}">
|
||||
<label class="np-input-label" for="{{version}}_learner_display_name">
|
||||
{% t .display_name %}
|
||||
</label>
|
||||
<input
|
||||
class="np-input"
|
||||
id="{{version}}_learner_display_name"
|
||||
name="learner[display_name]"
|
||||
value="{{ form.display_name }}"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{% unless form.options.invite? %}
|
||||
<div class="np-form-field {% if form.errors contains 'current_password' %}np-account-form-field-error{% endif %}">
|
||||
<label class="np-input-label" for="{{version}}_learner_current_password">
|
||||
{% t .current_password %} *
|
||||
</label>
|
||||
<input
|
||||
class="np-input"
|
||||
id="{{version}}_learner_current_password"
|
||||
name="learner[current_password]"
|
||||
type="password"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="np-form-field {% if form.errors contains 'password' %}np-account-form-field-error{% endif %}">
|
||||
<label class="np-input-label" for="{{version}}_learner_password">
|
||||
{% t .new_password %} *
|
||||
</label>
|
||||
<input
|
||||
class="np-input"
|
||||
id="{{version}}_learner_password"
|
||||
name="learner[password]"
|
||||
type="password"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="np-form-field {% if form.errors contains 'password_confirmation' %}np-account-form-field-error{% endif %}">
|
||||
<label class="np-input-label" for="{{version}}_learner_password_confirmation">
|
||||
{% t .confirm_new_password %} *
|
||||
</label>
|
||||
<input
|
||||
class="np-input"
|
||||
id="{{version}}_learner_password_confirmation"
|
||||
name="learner[password_confirmation]"
|
||||
type="password"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{%- comment -%} <div class="np-form-field">
|
||||
<input
|
||||
class="hubspotOptOutCheckbox"
|
||||
id="hubspotOptOut"
|
||||
name="hubspotOptOutCheckbox"
|
||||
onchange="checkCheckbox(this)"
|
||||
style="margin-right: 15px;"
|
||||
type="checkbox"
|
||||
/>
|
||||
<label class="hubspotOptOutLabel" for="hubspotOptOut">
|
||||
Opt Out of Skuid Skool Email List
|
||||
</label>
|
||||
</div> {%- endcomment -%}
|
||||
{% endunless %}
|
||||
|
||||
{% if form.options.invite? %}
|
||||
<div class="np-form-field {% if form.errors contains 'password' %}np-account-form-field-error{% endif %}">
|
||||
<label class="np-input-label" for="{{version}}_learner_password">
|
||||
{% t shared.password %} *
|
||||
</label>
|
||||
<input
|
||||
class="np-input"
|
||||
id="{{version}}_learner_password"
|
||||
name="learner[password]"
|
||||
type="password"
|
||||
/>
|
||||
</div>
|
||||
<div class="np-form-field terms-of-service {% if form.errors contains 'terms_of_service_accepted' %}np-account-form-field-error{% endif %}">
|
||||
<input
|
||||
id="{{version}}_learner_terms_of_service"
|
||||
name="learner[terms_of_service_accepted]"
|
||||
type="checkbox"
|
||||
/>
|
||||
<div class="label">
|
||||
{% t .terms_of_service %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<input
|
||||
id="{{version}}_invite_token"
|
||||
name="learner[token]"
|
||||
value="{{ form.invite_token }}"
|
||||
type="hidden"
|
||||
/>
|
||||
{% endif %}
|
||||
@ -0,0 +1,17 @@
|
||||
<form class="np-form" action="{{ form.options.action }}" method="post" id="mobile_edit_learner" novalidate>
|
||||
<input type="hidden" name="_method" value="{{ form.options.http_method }}">
|
||||
{% form_authenticity_token %}
|
||||
<div class="np-card np-account-form">
|
||||
<div class="np-card-container np-card-padding">
|
||||
{% render "account_form", form: form, version: "mobile" %}
|
||||
</div>
|
||||
</div>
|
||||
<div class="np-card np-account-avatar">
|
||||
<div class="np-card-container np-card-padding">
|
||||
{% include "account_avatar", version: "mobile" %}
|
||||
</div>
|
||||
</div>
|
||||
<button type="submit" class="account-submit-button np-button np-button-big np-button-large-font np-form-action" onclick="hubspotOptOutSubmit()">
|
||||
{% t shared.account.save %}
|
||||
</button>
|
||||
</form>
|
||||
@ -0,0 +1,102 @@
|
||||
<div class="np-card np-no-horizontal-padding">
|
||||
<div class="np-card-container">
|
||||
<div class="np-learning-path np-featured-course">
|
||||
<div class="np-featured-course-img-container">
|
||||
<div class="np-card-image-content-top">
|
||||
{% include "course_details" %}
|
||||
</div>
|
||||
<img
|
||||
class="np-card-image"
|
||||
alt="{{ course.name }}"
|
||||
src="{{ course.image_url }}"
|
||||
style="width: 100%;"
|
||||
>
|
||||
</div>
|
||||
<div class="np-card-text-wrapper" style="border: none !important;">
|
||||
|
||||
<div class="np-card-content np-card-padding np-card-content-vertical" style="border: none !important; background: #F2F2F2">
|
||||
<h3 class="np-card-content-title" style="border: none;">
|
||||
{{ course.name }}
|
||||
</h3>
|
||||
|
||||
<div class="np-card-content-description" style='font-size: 16px !important; line-height: 24px !important; color: #2c4265 !important; font-family: Lexend !important;'>
|
||||
{{ course.full_description }}
|
||||
</div>
|
||||
|
||||
<div class="np-card-content-footer" style='display: flex; justify-content: space-between;'>
|
||||
<div class='np-card-content-footer-left'style='display: flex; justify-content: left;'>
|
||||
{% comment %}<a
|
||||
class="np-top-button np-button-font-color np-button" href="{% route course_enrollment, code: course.enrollment_code %}" style='background: linear-gradient(90deg, #089FB7 0%, #15824B 100%); font-weight: 800;
|
||||
border-radius: 8px; margin-right: 24px;'
|
||||
>{% endcomment %}
|
||||
<a
|
||||
class="np-top-button np-button-font-color np-button" href="{% route course_enrollment, code: course.enrollment_code %}" style='background: linear-gradient(45deg, #2c4265 0%, #34abe2 100%); font-weight: 800;
|
||||
border-radius: 8px; margin-right: 24px;'
|
||||
>
|
||||
{% if course.enrolled? == false %}
|
||||
{% t shared.enroll %}
|
||||
{% elsif course.started? == false %}
|
||||
{% t shared.start, key: current_school.course_vocabulary %}
|
||||
{% elsif course.completed? %}
|
||||
{% t shared.course.view, key: current_school.course_vocabulary %}
|
||||
{% else %}
|
||||
{% t shared.continue %}
|
||||
{% endif %}
|
||||
</a>
|
||||
<div class="np-card-progress np-button-color" style='font-weight: 700; font-size: 12px; align-self: center; text-transform: uppercase;'>
|
||||
{% t shared.progress, count: course.progress %}
|
||||
</div>
|
||||
</div>
|
||||
{% comment %}<div class='course-detail-rating'>
|
||||
<div class='course-detail-rating-stars'>
|
||||
{% for i in (1..5) %}
|
||||
{% if course.properties.course_rating >= i %}
|
||||
<svg width="20" height="19" viewBox="0 0 20 19" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M10 0L12.5863 6.44033L19.5106 6.90983L14.1846 11.3597L15.8779 18.0902L10 14.4L4.12215 18.0902L5.81535 11.3597L0.489435 6.90983L7.41374 6.44033L10 0Z" fill="#089FB7"/>
|
||||
</svg>
|
||||
{% else %}
|
||||
<svg width="20" height="19" viewBox="0 0 20 19" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path opacity="0.25" d="M10 0L12.5863 6.44033L19.5106 6.90983L14.1846 11.3597L15.8779 18.0902L10 14.4L4.12215 18.0902L5.81535 11.3597L0.489435 6.90983L7.41374 6.44033L10 0Z" fill="#089FB7"/>
|
||||
</svg>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
<span class="np-details-label" style= 'display: flex; color: #2c4265;'>
|
||||
{{course.properties.course_rating}} <div style='font-weight: 500; padding-left: 5px; color: #2c4265;'>({{course.properties.course_rating_count}}) </div>
|
||||
</span>
|
||||
</div>{% endcomment %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.np-card-content.np-card-padding.np-card-content-vertical {
|
||||
border-radius: 0 8px 8px 0;
|
||||
}
|
||||
@media screen and (max-width: 1024px) {
|
||||
.np-card-content.np-card-padding.np-card-content-vertical {
|
||||
border-radius: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.np-card-image {
|
||||
border-top-left-radius: 8px;
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-left-radius: 8px;
|
||||
}
|
||||
@media screen and (max-width: 1024px) {
|
||||
.np-card-image {
|
||||
border-top-right-radius: 8px;
|
||||
border-bottom-left-radius: 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
$(".np-card-content-description").css('font-size','16px !important')
|
||||
$(".np-card-content-description").css('color','white !important')
|
||||
$(".np-card-content-description").css('font-family', 'Lexend !important')
|
||||
</script>
|
||||
@ -0,0 +1,51 @@
|
||||
{% comment %}<div class="np-card np-event-card">{% endcomment %}
|
||||
<div class="np-event-card">
|
||||
<div class="np-card-container">
|
||||
<div class="np-card-content-training-event">
|
||||
<h3 class="np-card-content-title">
|
||||
{{ training_event.title }}
|
||||
</h3>
|
||||
<div class="np-card-content-subtitle">
|
||||
{% t shared.event_types, key: training_event.event_type %}
|
||||
</div>
|
||||
<div class="np-card-training-session">
|
||||
<span class="np-card-content-label" style='border-radius: 4px; opacity: 0.15;'>
|
||||
{% t .next_session %}
|
||||
</span>
|
||||
<div class="np-card-training-session-date">
|
||||
<div>
|
||||
<div class="np-card-training-session-date-month">
|
||||
{{ training_event.sessions.first.month }}
|
||||
</div>
|
||||
<div class="np-card-training-session-date-year np-opacity-50">
|
||||
{{ training_event.sessions.first.year }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="np-card-training-session-date-day">
|
||||
{% if training_event.sessions.first.day < 10 %}0{% endif %}{{ training_event.sessions.first.day }}
|
||||
</div>
|
||||
<div class="np-button-background-color np-card-training-session-date-bar" style='border-right: 16px solid #089FB7;'></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="np-card-content np-card-content-vertical np-card-padding">
|
||||
<div class="np-card-training-sessions">
|
||||
<span class="np-card-training-sessions-label">
|
||||
{% t .sessions, count: training_event.sessions.size %}
|
||||
</span>
|
||||
{% comment %}<a
|
||||
class="np-button"
|
||||
href="{% route training_session, id: training_event.sessions.first.id %}"
|
||||
style='background: linear-gradient(90deg, #089FB7 0%, #15824B 100%); border-radius: 8px;'
|
||||
>{% endcomment %}
|
||||
<a
|
||||
class="np-button"
|
||||
href="{% route training_session, id: training_event.sessions.first.id %}"
|
||||
style='background: linear-gradient(45deg, #2c4265 0%, #34abe2 100%); border-radius: 8px;'
|
||||
>
|
||||
{% t shared.view %}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -0,0 +1,62 @@
|
||||
{% assign topic_classname = topic | split: " " %}
|
||||
|
||||
<div class="courses-carousel np-carousel" data-topic="{{ topic_classname | join: '-' | downcase }}">
|
||||
{% if items.any? %}
|
||||
{% assign sorted_items =items | sort: "name" %}
|
||||
{% for course in sorted_items %}
|
||||
|
||||
{% comment %} USED FOR PROGRESS FILTER {% endcomment %}
|
||||
{% assign course_status = "" %}
|
||||
|
||||
{% if course.started? == false %}
|
||||
{% assign course_status = "not-started" %}
|
||||
{% elsif course.completed? %}
|
||||
{% assign course_status = "completed" %}
|
||||
{% elsif course.started? %}
|
||||
{% assign course_status = "in-progress" %}
|
||||
{% endif %}
|
||||
|
||||
{% if topic == "Not Categorized" %}
|
||||
<div class="np-carousel-card {{course_status}}"> {% include "cards_course" with course %}</div>
|
||||
{% else %}
|
||||
{% for category in course.categories %}
|
||||
{% if category.name == topic %}
|
||||
<div class="np-carousel-card {{course_status}}"> {% include "cards_course" with course %}</div>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<script>
|
||||
|
||||
$(document).ready(function(){
|
||||
|
||||
$(".courses-carousel").not('.slick-initialized').slick({
|
||||
slidesToShow: 3,
|
||||
cssEase: 'linear',
|
||||
prevArrow: '<i class="fal fa-chevron-left"></i>',
|
||||
nextArrow: '<i class="fal fa-chevron-right"></i>',
|
||||
infinite: false,
|
||||
responsive: [
|
||||
{
|
||||
breakpoint: 1170,
|
||||
settings: {
|
||||
slidesToShow: 2,
|
||||
}
|
||||
},
|
||||
{
|
||||
breakpoint: 768,
|
||||
settings: {
|
||||
slidesToShow: 1,
|
||||
slidesToScroll: 1,
|
||||
dots: false,
|
||||
arrows: true,
|
||||
}
|
||||
}
|
||||
]
|
||||
});
|
||||
});
|
||||
|
||||
</script>
|
||||
@ -0,0 +1,37 @@
|
||||
<div class="events-carousel np-carousel np-carousel-bg-blue" id="events-carousel">
|
||||
{% if items.any? %}
|
||||
{% for training_event in items %}
|
||||
<div class="np-carousel-card"> {% include "cards_training_event" with training_event %}</div>
|
||||
{% endfor %}
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<script>
|
||||
$(document).ready(function(){
|
||||
|
||||
$(".events-carousel").slick({
|
||||
slidesToShow: 3,
|
||||
prevArrow: '<i class="fal fa-chevron-left"></i>',
|
||||
nextArrow: '<i class="fal fa-chevron-right"></i>',
|
||||
infinite: false,
|
||||
dots: false,
|
||||
arrows: true,
|
||||
responsive: [
|
||||
{
|
||||
breakpoint: 1170,
|
||||
settings: {
|
||||
slidesToShow: 2,
|
||||
}
|
||||
},
|
||||
{
|
||||
breakpoint: 768,
|
||||
settings: {
|
||||
slidesToShow: 1,
|
||||
|
||||
}
|
||||
}
|
||||
]
|
||||
});
|
||||
});
|
||||
|
||||
</script>
|
||||
@ -0,0 +1,136 @@
|
||||
{% assign used_instructor_names = "" %}
|
||||
|
||||
<div class="instructors-carousel np-carousel" id="instructors-carousel">
|
||||
<div class="np-carousel-card">
|
||||
<div class="instructor-slide">
|
||||
<div class="instructor-image" style='height:160px; width: 160px;'>
|
||||
<img style='height: 136px; width: 136px;' src="https://s3.amazonaws.com/static.northpass.com/NorthpassAcademy/headshot_1.jpg" />
|
||||
</div>
|
||||
<div class="instructor-info">
|
||||
<div class="instructor-name">Paula Naba</div>
|
||||
<a href="mailto:paula@northpass.com" target="_blank" class="instructor-email" style='color: #089FB7;'>paula@northpass.com</a>
|
||||
<div class="instructor-joined">Director of Customer Success</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="np-carousel-card">
|
||||
<div class="instructor-slide">
|
||||
<div class="instructor-image" style='height:160px; width: 160px;'>
|
||||
<img style='height: 136px; width: 136px;' src="https://s3.amazonaws.com/static.northpass.com/NorthpassAcademy/charlie+1.png" />
|
||||
</div>
|
||||
<div class="instructor-info">
|
||||
<div class="instructor-name">Charlie Bencivenga</div>
|
||||
<a href="mailto:cbencivenga@northpass.com" target="_blank" class="instructor-email" style='color: #089FB7;'>cbencivenga@northpass.com</a>
|
||||
<div class="instructor-joined">Solutions Engineering Manager</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% comment %}<div class="np-carousel-card">
|
||||
<div class="instructor-slide">
|
||||
<div class="instructor-image" style='height:160px; width: 160px;'>
|
||||
<img style='height: 136px; width: 136px;' src="https://s3.amazonaws.com/static.northpass.com/NorthpassAcademy/headshot_4.jpg" />
|
||||
</div>
|
||||
<div class="instructor-info">
|
||||
<div class="instructor-name">Rob Abrams</div>
|
||||
<a href="mailto:rabrams@northpass.com" target="_blank" class="instructor-email" style='color: #089FB7;'>rabrams@northpass.com</a>
|
||||
<div class="instructor-joined">Senior Implementation Manager</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>{% endcomment %}
|
||||
<div class="np-carousel-card">
|
||||
<div class="instructor-slide">
|
||||
<div class="instructor-image" style='height:160px; width: 160px;'>
|
||||
<img style='height: 136px; width: 136px;' src="https://s3.amazonaws.com/static.northpass.com/NorthpassAcademy/headshot_2.jpg" />
|
||||
</div>
|
||||
<div class="instructor-info">
|
||||
<div class="instructor-name">Bridget Cafaro</div>
|
||||
<a href="mailto:bcafaro@northpass.com" target="_blank" class="instructor-email" style='color: #089FB7;'>bcafaro@northpass.com</a>
|
||||
<div class="instructor-joined">Customer Success Manager</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="np-carousel-card">
|
||||
<div class="instructor-slide">
|
||||
<div class="instructor-image" style='height:160px; width: 160px;'>
|
||||
<img style='height: 136px; width: 136px;' src="https://s3.amazonaws.com/static.northpass.com/NorthpassAcademy/nergis2.png" />
|
||||
</div>
|
||||
<div class="instructor-info">
|
||||
<div class="instructor-name">Nergis Tepeli</div>
|
||||
<a href="mailto:ntepeli@northpass.com" target="_blank" class="instructor-email" style='color: #089FB7;'>ntepeli@northpass.com</a>
|
||||
<div class="instructor-joined">Customer Success Manager</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% comment %}<div class="np-carousel-card">
|
||||
<div class="instructor-slide">
|
||||
<div class="instructor-image" style='height:160px; width: 160px;'>
|
||||
<img style='height: 136px; width: 136px;' src="https://s3.amazonaws.com/static.northpass.com/NorthpassAcademy/eric.png" />
|
||||
</div>
|
||||
<div class="instructor-info">
|
||||
<div class="instructor-name">Eric Pavan</div>
|
||||
<a href="mailto:epavan@northpass.com" target="_blank" class="instructor-email" style='color: #089FB7;'>epavan@northpass.com</a>
|
||||
<div class="instructor-joined">Customer Success Manager</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>{% endcomment %}
|
||||
|
||||
<div class="np-carousel-card">
|
||||
<div class="instructor-slide">
|
||||
<div class="instructor-image" style='height:160px; width: 160px;'>
|
||||
<img style='height: 136px; width: 136px;' src="https://s3.amazonaws.com/static.northpass.com/NorthpassAcademy/brian.png" />
|
||||
</div>
|
||||
<div class="instructor-info">
|
||||
<div class="instructor-name">Brian Bastante</div>
|
||||
<a href="mailto:bbastante@northpass.com" target="_blank" class="instructor-email" style='color: #089FB7;'>bbastante@northpass.com</a>
|
||||
<div class="instructor-joined">Technical Support Specialist</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="np-carousel-card">
|
||||
<div class="instructor-slide">
|
||||
<div class="instructor-image" style='height:160px; width: 160px;'>
|
||||
<img style='height: 136px; width: 136px;' src="https://s3.amazonaws.com/static.northpass.com/NorthpassAcademy/headshot_3.png" />
|
||||
</div>
|
||||
<div class="instructor-info">
|
||||
<div class="instructor-name">Kasia Cholewa</div>
|
||||
<a href="mailto:paula@northpass.com" target="_blank" class="instructor-email" style='color: #089FB7;'>support@northpass.com</a>
|
||||
<div class="instructor-joined">Technical Support Specialist</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
$(document).ready(function(){
|
||||
|
||||
$(".instructors-carousel").slick({
|
||||
slidesToShow: 2.5,
|
||||
prevArrow: '<i class="fal fa-chevron-left"></i>',
|
||||
nextArrow: '<i class="fal fa-chevron-right"></i>',
|
||||
infinite: false,
|
||||
dots: false,
|
||||
arrows: true,
|
||||
responsive: [
|
||||
{
|
||||
breakpoint: 1170,
|
||||
settings: {
|
||||
slidesToShow: 2,
|
||||
}
|
||||
},
|
||||
{
|
||||
breakpoint: 768,
|
||||
settings: {
|
||||
slidesToShow: 1,
|
||||
}
|
||||
}
|
||||
]
|
||||
});
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.instructors-carousel .fa-chevron-right:before {
|
||||
right: -7px !important;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,4 @@
|
||||
{% comment %} <i class="far fa-lock-alt np-course-outline-content-activity-icon-locked"></i> {% endcomment %}
|
||||
<span class="np-course-outline-content-activity-link">
|
||||
{{ activity.title }}
|
||||
</span>
|
||||
@ -0,0 +1,21 @@
|
||||
<div class="col-xs-12 np-top-image-spacing np-course-banner">
|
||||
<div class="np-course-banner-overlay"></div>
|
||||
<img
|
||||
src="{{ course.image_url }}"
|
||||
class="np-course-banner-image"
|
||||
alt="{{ course.name }}"
|
||||
/>
|
||||
<div class="np-course-info np-course-banner-info">
|
||||
<div class="np-course-title" style="color: #34abe2">{{ course.name }}</div>
|
||||
{%- comment -%} {% include "course_details_review" %} {%- endcomment -%}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.fas.fa-star {
|
||||
color: white;
|
||||
}
|
||||
.fas.fa-star {
|
||||
line-height: 1.15;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,60 @@
|
||||
<div class="np-card-container">
|
||||
<div class="row np-course-content np-card-padding-dynamic">
|
||||
{% include "course_banner" %}
|
||||
<div class="col-xs-12 col-sm-6">
|
||||
{% include "course_description" %}
|
||||
|
||||
{% comment %} {% if course.categories.any? %}
|
||||
<div class="np-card-content-divider">
|
||||
{% include "course_categories" %}
|
||||
</div>
|
||||
{% endif %} {% endcomment %}
|
||||
|
||||
{% if course.instructors.any? %}
|
||||
<div class="np-card-content-divider">
|
||||
{% include "course_instructors" %}
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{% if course.events.any? %}
|
||||
<div class="np-card-content-divider">
|
||||
{% include "course_events" %}
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
<div class="np-grid-spacing col-xs-12 col-sm-6">
|
||||
<div class="np-top-cta">
|
||||
{% include "course_progress_and_cta" %}
|
||||
</div>
|
||||
{% include "course_outline" %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
@media only screen and (min-width: 768px) {
|
||||
body {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
grid-template-areas: "header" "nav" "main" "footer" "powered";
|
||||
grid-template-rows: 120px 50px 1fr 160px 60px;
|
||||
}
|
||||
header {
|
||||
grid-area: header;
|
||||
}
|
||||
nav {
|
||||
grid-area: nav;
|
||||
margin-bottom: 17px;
|
||||
}
|
||||
main {
|
||||
grid-area: main;
|
||||
margin-top: 0 !important;
|
||||
}
|
||||
footer {
|
||||
grid-area: footer;
|
||||
}
|
||||
.np-powered-by {
|
||||
grid-area: powered;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,34 @@
|
||||
{% assign activities_count = 0 %}
|
||||
{% for course_section in course.sections %}
|
||||
{% for course_activity in course_section.activities %}
|
||||
{% assign activities_count = activities_count | plus: 1 %}
|
||||
{% endfor %}
|
||||
{% endfor %}
|
||||
|
||||
<div class="np-course-details">
|
||||
<div class="np-course-detail" style="color: #2c4265">
|
||||
<strong>{{ activities_count }}</strong>
|
||||
<span class="np-details-label" style="color: #2c4265">
|
||||
{% if activities_count == 1 %}Activity{% else %}Activities{% endif %}
|
||||
</span>
|
||||
</div>
|
||||
<div class="np-course-detail" style="color: #2c4265">
|
||||
{% if course.properties.course_time contains 'missing property' %}
|
||||
missing property: course.properties.course_time
|
||||
{% else %}
|
||||
{% if course.properties.course_time %}
|
||||
{% if course.properties.course_time > 0 %}
|
||||
<strong>{{course.properties.course_time}}</strong> mins<span class="np-details-label" style="color: #2c4265">Duration</span>
|
||||
{% else %}
|
||||
<div> </div>
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
/* .np-course-details {
|
||||
text-shadow: 1px 1px #34abe2;
|
||||
} */
|
||||
</style>
|
||||
@ -0,0 +1,60 @@
|
||||
{% assign activities_count = 0 %}
|
||||
{% for course_section in course.sections %}
|
||||
{% for course_activity in course_section.activities %}
|
||||
{% assign activities_count = activities_count | plus: 1 %}
|
||||
{% endfor %}
|
||||
{% endfor %}
|
||||
|
||||
<div class="np-course-details" style="text-align: center; ">
|
||||
<div class="np-course-detail" id='hideable'>
|
||||
<strong>{{ activities_count }}</strong>
|
||||
<span class="np-details-label">
|
||||
{% if activities_count == 1 %}Activity{% else %}Activities{% endif %}
|
||||
</span>
|
||||
</div>
|
||||
<div class="np-course-detail">
|
||||
{% if course.properties.course_time contains 'missing property' %}
|
||||
missing property: course.properties.course_time
|
||||
{% else %}
|
||||
{% if course.properties.course_time %}
|
||||
{% if course.properties.course_time > 0 %}
|
||||
<strong>{{course.properties.course_time}}</strong> mins<span class="np-details-label">Duration</span>
|
||||
{% else %}
|
||||
<div> </div>
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
</div>
|
||||
{% comment %}<div class="np-course-detail course-detail-rating">
|
||||
<div class='course-detail-rating-stars' style='display: flex; flex-wrap: nowrap;'>
|
||||
{% for i in (1..5) %}
|
||||
{% if course.properties.course_rating >= i %}
|
||||
<svg width="20" height="19" viewBox="0 0 20 19" preserveAspectRatio fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M10 0L12.5863 6.44033L19.5106 6.90983L14.1846 11.3597L15.8779 18.0902L10 14.4L4.12215 18.0902L5.81535 11.3597L0.489435 6.90983L7.41374 6.44033L10 0Z" fill="#089FB7"/>
|
||||
</svg>
|
||||
{% else %}
|
||||
<svg width="20" height="19" viewBox="0 0 20 19" preserveAspectRatio fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path opacity="0.25" d="M10 0L12.5863 6.44033L19.5106 6.90983L14.1846 11.3597L15.8779 18.0902L10 14.4L4.12215 18.0902L5.81535 11.3597L0.489435 6.90983L7.41374 6.44033L10 0Z" fill="#089FB7"/>
|
||||
</svg>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
<span class="np-details-label" style= 'display: flex;'>
|
||||
{{course.properties.course_rating}} <div style='font-weight: 500; padding-left: 5px; color: #2c4265;'>({{course.properties.course_rating_count}}) </div>
|
||||
</span>
|
||||
</div>{% endcomment %}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.course-detail-rating {
|
||||
align-self: flex-end;
|
||||
}
|
||||
.course-detail-rating-stars {
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
@media screen and (max-width: 768px) {
|
||||
.course-detail-rating-stars {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,38 @@
|
||||
<div class="np-course-outline">
|
||||
<div class="np-text-title np-course-outline-title" style='color: #FFFFFF; opacity: 0.5;'>
|
||||
{% t .header, key: current_school.course_vocabulary %}
|
||||
</div>
|
||||
<div class="np-course-outline-content">
|
||||
<ol class="np-course-outline-content-section">
|
||||
{% for section in course.sections %}
|
||||
<li class="np-course-outline-content-section-list">
|
||||
<div class="np-course-outline-content-section-name np-text-title-bold np-text-title-bold">
|
||||
{{ section.name }}
|
||||
</div>
|
||||
<ol class="np-course-outline-content-activity">
|
||||
{% for activity in section.activities %}
|
||||
|
||||
<li class="np-course-outline-content-activity-list">
|
||||
{% if activity.completed? %}
|
||||
<i class="fas fa-check np-course-outline-content-activity-icon"></i>
|
||||
{% if activity.locked? %}
|
||||
{% include "course_activity_locked" %}
|
||||
{% else %}
|
||||
{% include "course_activity_unlocked", class: "np-course-outline-content-activity-link-completed" %}
|
||||
{% endif %}
|
||||
{% else %}
|
||||
<i class="icon-course-not-started np-course-outline-content-activity-icon"></i>
|
||||
{% if activity.locked? %}
|
||||
{% include "course_activity_locked" %}
|
||||
{% else %}
|
||||
{% include "course_activity_unlocked", class: "np-course-outline-content-activity-link" %}
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ol>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ol>
|
||||
</div>
|
||||
</div>
|
||||
@ -0,0 +1,124 @@
|
||||
<header class="np-header np-header-color" style="background: #fafafa; border: none; height: 3.5rem; position: fixed; margin-top: 4rem;">
|
||||
<div class="np-header-content">
|
||||
<div class="np-hidden-desktop np-header-mobile-menu-nav">
|
||||
{% if current_person.signed_in? %}
|
||||
<button
|
||||
data-toggle-class="np-hidden"
|
||||
class="np-header-mobile-menu-nav-button fal fa-times np-hidden np-header-font-color"
|
||||
data-toggle-target=".np-header-mobile-avatar-menu,
|
||||
.np-header-mobile-menu-content, .np-main, .np-footer"
|
||||
></button>
|
||||
<button
|
||||
data-test="open-mobile-menu"
|
||||
data-toggle-class="np-hidden"
|
||||
class="np-header-mobile-menu-nav-button np-header-mobile-avatar-menu"
|
||||
data-toggle-target=".fa-times, .np-header-mobile-menu-content, .np-main, .np-footer"
|
||||
>
|
||||
<img
|
||||
alt="{{ current_person.name }}"
|
||||
class="np-header-avatar-image"
|
||||
src="{{ current_person.avatar_url }}"
|
||||
/>
|
||||
</button>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% if current_school.logo_url %}
|
||||
<h1 class="np-header-logo">
|
||||
<a href="{% route home %}">
|
||||
<img
|
||||
alt="{{ current_school.name }}"
|
||||
class="np-header-logo-image"
|
||||
src="{{ current_school.logo_url }}"
|
||||
/>
|
||||
</a>
|
||||
</h1>
|
||||
{% else %}
|
||||
<a href="{% route home %}" class="np-school-name np-header-font-color">
|
||||
{{ current_school.name }}
|
||||
</a>
|
||||
{% endif %}
|
||||
|
||||
<div class="np-hidden-mobile np-header-desktop-nav">
|
||||
<ul class="np-header-desktop-nav-list">
|
||||
{% for website_navigation in navigations.header_navigations_external %}
|
||||
<li class= "np-header-desktop-nav-item">
|
||||
<a
|
||||
href="{{ website_navigation.path }}"
|
||||
class="np-header-desktop-nav-link np-header-font-color"
|
||||
target="_blank"
|
||||
>
|
||||
{{ website_navigation.name }}
|
||||
</a>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
{% if current_person.signed_in? %}
|
||||
<div class="np-hidden-mobile np-header-search np-header-search-expanded">
|
||||
<form action="{% route search %}" method="get" data-test="desktop-search">
|
||||
<input
|
||||
aria-label="{% t .search %}"
|
||||
class="np-header-search-input np-header-font-background-color"
|
||||
type="text"
|
||||
name="q"
|
||||
placeholder="{% t .search %}"
|
||||
/>
|
||||
<i class="np-header-search-icon far fa-search"></i>
|
||||
</form>
|
||||
</div>
|
||||
<div class="np-hidden-mobile np-header-avatar">
|
||||
<button
|
||||
class="np-header-avatar-button"
|
||||
data-test="open-desktop-menu"
|
||||
data-toggle-class-on-target="np-hidden"
|
||||
data-toggle-target=".np-header-avatar-tooltip"
|
||||
data-toggle-outside
|
||||
>
|
||||
<img
|
||||
alt="{{ current_person.name }}"
|
||||
class="np-header-avatar-image"
|
||||
src="{{ current_person.avatar_url }}"
|
||||
>
|
||||
</button>
|
||||
<div class="np-header-avatar-tooltip np-hidden" role="tooltip">
|
||||
<span class="np-header-avatar-tooltip-arrow-up"></span>
|
||||
<div class="np-header-avatar-tooltip-learner">
|
||||
<div class="np-header-avatar-tooltip-learner-name">
|
||||
{{ current_person.name }}
|
||||
</div>
|
||||
<div class="np-header-avatar-tooltip-learner-email">
|
||||
{{ current_person.email }}
|
||||
</div>
|
||||
</div>
|
||||
<nav class="np-header-avatar-tooltip-navigation">
|
||||
<a class="np-header-avatar-tooltip-navigation-link" onclick="buildURL(window.location.pathname)" style="cursor:pointer">
|
||||
Default
|
||||
</a>
|
||||
{% unless current_school.sso_active? %}
|
||||
<a
|
||||
class="np-header-avatar-tooltip-navigation-link"
|
||||
href="{% route account %}"
|
||||
>
|
||||
Profile Settings
|
||||
</a>
|
||||
{% endunless %}
|
||||
<a
|
||||
class="np-header-avatar-tooltip-navigation-link np-danger"
|
||||
href="{% route logout %}"
|
||||
>
|
||||
Sign Out
|
||||
</a>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
{% else %}
|
||||
<a
|
||||
class="np-header-sign-in np-header-desktop-nav-link np-header-font-color"
|
||||
href="{% route login %}"
|
||||
>
|
||||
{% t shared.sign_in %}
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</header>
|
||||
@ -0,0 +1,112 @@
|
||||
{% assign topic_classname = topic | split: " " %}
|
||||
|
||||
<div class="np-progress-filter-wrapper">
|
||||
{% if label %}
|
||||
<div class="np-progress-filter-label">{{ label }}</div>
|
||||
{% endif %}
|
||||
<div class="progress-filter filter-select-wrapper select-wrapper np-button" data-topic="{{ topic_classname | join: '-' | downcase }}" style="border-radius: 8px;">
|
||||
<select >
|
||||
<option selected disabled hidden>{{ default_option}}</option>
|
||||
<option value="a">All Courses</option>
|
||||
<option value="n">Not Started</option>
|
||||
<option value="i">In Progress</option>
|
||||
<option value="c">Completed</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.np-progress-filter-label {
|
||||
color: #2c4265;
|
||||
padding-right: 7px;
|
||||
text-transform: none;
|
||||
font-weight:500;
|
||||
font-size:0.812rem;
|
||||
}
|
||||
.np-progress-filter-wrapper {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
}
|
||||
.filter-select-wrapper {
|
||||
position: relative;
|
||||
padding:0;
|
||||
border: 2px solid #2c4265;
|
||||
color: #fff;
|
||||
height:auto;
|
||||
text-transform: none;
|
||||
background: transparent;
|
||||
border-radius:0;
|
||||
}
|
||||
.filter-select-wrapper:hover {
|
||||
background:transparent;
|
||||
color:#fff;
|
||||
}
|
||||
.select-items {
|
||||
position: absolute;
|
||||
background-color: #FFFFFF;
|
||||
top: 105%;
|
||||
left: -2px;
|
||||
z-index: 99;
|
||||
width: 102%;
|
||||
border: 2px solid #2c4265;
|
||||
border-top:none;
|
||||
}
|
||||
.select-items div {
|
||||
color: #2c4265;
|
||||
border-top:none;
|
||||
cursor: pointer;
|
||||
width:100%;
|
||||
padding: 12px 16px;
|
||||
}
|
||||
|
||||
.select-items div:hover { color: rgba(255, 255, 255, 1); }
|
||||
.select-selected {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 9px 66px 9px 20px;
|
||||
position: relative;
|
||||
color:#2c4265;
|
||||
}
|
||||
.select-selected::after {
|
||||
content:"\f078";
|
||||
font-family: "Font Awesome 5 Pro";
|
||||
position: absolute;
|
||||
width:20px;
|
||||
height:100%;
|
||||
color:#2c4265;
|
||||
right:10px;
|
||||
top:0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size:1rem;
|
||||
}
|
||||
.select-selected::before {
|
||||
content:"";
|
||||
position: absolute;
|
||||
width:20px;
|
||||
height:100%;
|
||||
border-left:2px solid #2c4265;
|
||||
right:20px;
|
||||
top:0;
|
||||
}
|
||||
.select-selected.select-arrow-active::after { transform: rotate(180deg); }
|
||||
.same-as-selected,
|
||||
.filter-select-wrapper select,
|
||||
.select-hide {
|
||||
display: none;
|
||||
}
|
||||
.mo-filter-wrapper {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
.select-items div:hover,
|
||||
.same-as-selected {
|
||||
background-color: #062531;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -3,7 +3,11 @@
|
||||
<div>
|
||||
<span>© {{"now" | date: "%Y"}} Skuid, Inc.</span>
|
||||
<span class="np-hidden-mobile inline-text" style="margin-left: 15px;">
|
||||
<a class="policy-links" href="{{ current_school.terms_of_service_url }}">Terms of Use</a> | <a class="policy-links" href="https://www.skuid.com/legal/privacy-policy">Privacy Policy</a></span>
|
||||
<a class="policy-links" href="{{ current_school.terms_of_service_url }}">Terms of Use</a> | <a class="policy-links" href="https://www.skuid.com/legal/privacy-policy">Privacy Policy</a>
|
||||
</span>
|
||||
<span class="inline-text" style="margin-left: 15px;">
|
||||
Can we help you? Contact us at <a href="mailto:training@skuid.com" class="policy-links inline-text">training@skuid.com</a>
|
||||
</span>
|
||||
</div>
|
||||
<div>
|
||||
<nav class="np-footer-social-links">
|
||||
@ -202,6 +206,7 @@
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<script>
|
||||
let viewMore = () => {
|
||||
let additionalCourses = document.querySelectorAll('.view-more-hidden');
|
||||
@ -214,14 +219,18 @@
|
||||
})
|
||||
}
|
||||
</script>
|
||||
<script>
|
||||
window.Appcues.identify(
|
||||
'{{current_person.id}}',
|
||||
{
|
||||
accountId: '{{current_person.id}}',
|
||||
firstName: '{{current_person.first_name}}',
|
||||
lastName: '{{current_person.last_name}}',
|
||||
email: '{{current_person.email}}'
|
||||
}
|
||||
);
|
||||
</script>
|
||||
{% if current_person.signed_in? %}
|
||||
<script>
|
||||
console.log('Appcues Identifying')
|
||||
window.Appcues.identify(
|
||||
'{{current_person.id}}',
|
||||
{
|
||||
accountId: '{{current_person.id}}',
|
||||
firstName: '{{current_person.first_name}}',
|
||||
lastName: '{{current_person.last_name}}',
|
||||
email: '{{current_person.email}}',
|
||||
createdAt: '{{current_person.created_at}}'
|
||||
}
|
||||
);
|
||||
</script>
|
||||
{% endif %}
|
||||
@ -16,8 +16,10 @@
|
||||
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tiny-slider/2.9.4/tiny-slider.css">
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/tiny-slider/2.9.2/min/tiny-slider.js"></script>
|
||||
|
||||
<!-- Appcues code snippet -->
|
||||
<script type="text/javascript">
|
||||
console.log('Apppcues Enabled')
|
||||
window.AppcuesSettings = {enableURLDetection: true}
|
||||
</script>
|
||||
<script src="//fast.appcues.com/69414.js"></script>
|
||||
@ -1,4 +1,4 @@
|
||||
{% assign redirect = true %}
|
||||
{%- comment -%} {% assign redirect = true %}
|
||||
{% if current_person.signed_in? %}
|
||||
{% for group in current_person.groups %}
|
||||
{% if group.id == "29ae12e6-f740-4190-a5c2-a7e12e87926f" or group.id == "aa36069f-e354-4dbe-9972-9ce70ad146d7" or group.id == "8cd6ec9c-101e-4b1a-82c7-77dac583a1f5" %}
|
||||
@ -17,7 +17,7 @@
|
||||
}
|
||||
</script>
|
||||
{% endunless %}
|
||||
{% endif %}
|
||||
{% endif %} {%- endcomment -%}
|
||||
|
||||
<header id="header" class="np-header np-header-color">
|
||||
<div class="np-header-content">
|
||||
|
||||
@ -0,0 +1,17 @@
|
||||
<header class="np-box-header">
|
||||
<a class="np-box-header-link" href="{% route home %}">
|
||||
{% if current_school.logo_url %}
|
||||
<img
|
||||
alt="{{ current_school.name }}"
|
||||
src="{{ current_school.logo_url }}"
|
||||
class="np-box-header-logo"
|
||||
/>
|
||||
{% else %}
|
||||
<span class="np-school-name np-header-font-color">
|
||||
{{ current_school.name }}
|
||||
</span>
|
||||
{% endif %}
|
||||
</a>
|
||||
</header>
|
||||
|
||||
{% include "messages" %}
|
||||
@ -0,0 +1,148 @@
|
||||
<header class="np-header np-header-color"">
|
||||
<div class="np-header-content">
|
||||
<div class="np-hidden-desktop np-header-mobile-menu-nav">
|
||||
{% if current_person.signed_in? %}
|
||||
<button
|
||||
data-toggle-class="np-hidden"
|
||||
class="np-header-mobile-menu-nav-button fal fa-times np-hidden np-header-font-color"
|
||||
data-toggle-target=".np-header-mobile-avatar-menu,
|
||||
.np-header-mobile-menu-content, .np-main, .np-footer"
|
||||
></button>
|
||||
<button
|
||||
data-test="open-mobile-menu"
|
||||
data-toggle-class="np-hidden"
|
||||
class="np-header-mobile-menu-nav-button np-header-mobile-avatar-menu"
|
||||
data-toggle-target=".fa-times, .np-header-mobile-menu-content, .np-main, .np-footer"
|
||||
>
|
||||
<img
|
||||
alt="{{ current_person.name }}"
|
||||
class="np-header-avatar-image"
|
||||
src="{{ current_person.avatar_url }}"
|
||||
/>
|
||||
</button>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% if current_school.logo_url %}
|
||||
<h1 class="np-header-logo">
|
||||
<a href="{% route home %}">
|
||||
<img
|
||||
alt="{{ current_school.name }}"
|
||||
class="np-header-logo-image"
|
||||
src="{{ current_school.logo_url }}"
|
||||
/>
|
||||
</a>
|
||||
</h1>
|
||||
{% else %}
|
||||
<a href="{% route home %}" class="np-school-name np-header-font-color">
|
||||
{{ current_school.name }}
|
||||
</a>
|
||||
{% endif %}
|
||||
|
||||
<div class="np-hidden-mobile np-header-desktop-nav">
|
||||
<ul class="np-header-desktop-nav-list">
|
||||
{% for website_navigation in navigations.header_navigations_external %}
|
||||
<li class= "np-header-desktop-nav-item">
|
||||
<a
|
||||
href="{{ website_navigation.path }}"
|
||||
class="np-header-desktop-nav-link np-header-font-color"
|
||||
target="_blank"
|
||||
>
|
||||
{{ website_navigation.name }}
|
||||
</a>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
{% if current_person.signed_in? %}
|
||||
<div class="np-hidden-mobile np-header-search np-header-search-expanded">
|
||||
<form action="{% route search %}" method="get" data-test="desktop-search">
|
||||
<input
|
||||
aria-label="{% t .search %}"
|
||||
class="np-header-search-input np-header-font-background-color"
|
||||
type="text"
|
||||
name="q"
|
||||
placeholder="{% t .search %}"
|
||||
/>
|
||||
<i class="np-header-search-icon far fa-search"></i>
|
||||
</form>
|
||||
</div>
|
||||
<div>
|
||||
<a class='help-guide-link' href="https://help.scenariocloud.com/ENTERPRISE/" target="_blank">Help Guide</a>
|
||||
</div>
|
||||
<div class="np-hidden-mobile np-header-avatar">
|
||||
<button
|
||||
class="np-header-avatar-button"
|
||||
data-test="open-desktop-menu"
|
||||
data-toggle-class-on-target="np-hidden"
|
||||
data-toggle-target=".np-header-avatar-tooltip"
|
||||
data-toggle-outside
|
||||
>
|
||||
<img
|
||||
alt="{{ current_person.name }}"
|
||||
class="np-header-avatar-image"
|
||||
src="{{ current_person.avatar_url }}"
|
||||
>
|
||||
</button>
|
||||
<div class="np-header-avatar-tooltip np-hidden" role="tooltip">
|
||||
<span class="np-header-avatar-tooltip-arrow-up"></span>
|
||||
<div class="np-header-avatar-tooltip-learner">
|
||||
<div class="np-header-avatar-tooltip-learner-name">
|
||||
{{ current_person.name }}
|
||||
</div>
|
||||
<div class="np-header-avatar-tooltip-learner-email">
|
||||
{{ current_person.email }}
|
||||
</div>
|
||||
</div>
|
||||
<nav class="np-header-avatar-tooltip-navigation">
|
||||
<a class="np-header-avatar-tooltip-navigation-link" onclick="buildURL(window.location.pathname)" style="cursor:pointer">
|
||||
Default
|
||||
</a>
|
||||
{% unless current_school.sso_active? %}
|
||||
<a
|
||||
class="np-header-avatar-tooltip-navigation-link"
|
||||
href="{% route account %}"
|
||||
>
|
||||
Profile Settings
|
||||
</a>
|
||||
{% endunless %}
|
||||
<a
|
||||
class="np-header-avatar-tooltip-navigation-link np-danger"
|
||||
href="{% route logout %}"
|
||||
>
|
||||
Sign Out
|
||||
</a>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
{% else %}
|
||||
<a
|
||||
class="np-header-sign-in np-header-desktop-nav-link np-header-font-color"
|
||||
href="{% route login %}"
|
||||
>
|
||||
{% t shared.sign_in %}
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</header>
|
||||
<style>
|
||||
.np-header{
|
||||
background: #fafafa;
|
||||
border: none;
|
||||
height: 3.5rem;
|
||||
margin-top: 4rem;
|
||||
position: fixed;
|
||||
}
|
||||
|
||||
.help-guide-link {
|
||||
color: #2c4265;
|
||||
font-size: 18px;
|
||||
font-weight: 500;
|
||||
margin: 0 15px;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.help-guide-link:hover{
|
||||
color: rgb(4, 173, 240);
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,106 @@
|
||||
<div class="np-homepage-featured np-faq np-max-width">
|
||||
<div class="np-homepage-featured-text">
|
||||
<div class="np-homepage-headline">
|
||||
Frequently Asked Questions
|
||||
</div>
|
||||
</div>
|
||||
<div class="row np-faqs" style='margin:0;'>
|
||||
<div class="col-md-6">
|
||||
<div class="np-accordion">
|
||||
<div class="accordion-btn">
|
||||
<i class="fal fa-plus"></i>
|
||||
<div class="accordion-title"><strong>Q:</strong> Do I need to be a customer before creating a course on Northpass?</div>
|
||||
</div>
|
||||
<div class="accordion-panel">
|
||||
<div class="accordion-panel-content">
|
||||
<p><strong>A:</strong> Absolutely not! We often set up trials for folks shopping for an LMS. To set up your trial, click the following link and you’ll be intro’d to the correct reps to get started.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="np-accordion">
|
||||
<div class="accordion-btn">
|
||||
<i class="fal fa-plus"></i>
|
||||
<div class="accordion-title"><strong>Q:</strong> Do I need to sign up for an advanced package option?</div>
|
||||
</div>
|
||||
<div class="accordion-panel">
|
||||
<div class="accordion-panel-content">
|
||||
<p><strong>A:</strong> No, Northpass product packages have a variety of services. Our Essentials package is great to get started, especially with internal training. Looking for something more, both our Premium and Enterprise packages allow for advanced options including custom design and data connections via webhooks and API. To learn more, please contact your rep or support@northpass.com.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="np-accordion">
|
||||
<div class="accordion-btn">
|
||||
<i class="fal fa-plus"></i>
|
||||
<div class="accordion-title"><strong>Q:</strong> There are a lot of courses, which one should I start with as a new admin?</div>
|
||||
</div>
|
||||
<div class="accordion-panel">
|
||||
<div class="accordion-panel-content">
|
||||
<p><strong>A:</strong> We recommend starting with the Getting Started with Northpass Learning Path. It has all the foundational information needed to become familiar with our platform. Even more, you can pick and choose which information you’d like to view in the Learning Path.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div class="np-accordion">
|
||||
<div class="accordion-btn">
|
||||
<i class="fal fa-plus"></i>
|
||||
<div class="accordion-title"><strong>Q:</strong> I cannot find a course on a topic, how should I share this feedback?</div>
|
||||
</div>
|
||||
<div class="accordion-panel">
|
||||
<div class="accordion-panel-content">
|
||||
<p><strong>A:</strong> Thank you for letting us know that you’d like to learn something more. Please reach out to our support team at support@northpass.com and our service team is happy to assist.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="np-accordion">
|
||||
<div class="accordion-btn">
|
||||
<i class="fal fa-plus"></i>
|
||||
<div class="accordion-title"><strong>Q:</strong> I'm having a billing issue, who should I contact?</div>
|
||||
</div>
|
||||
<div class="accordion-panel">
|
||||
<div class="accordion-panel-content">
|
||||
<p><strong>A:</strong> Great question and happy to help! For all billing inquiries, please reach out to billing@northpass.com, and our finance and operations team is happy to assist.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="np-accordion">
|
||||
<div class="accordion-btn">
|
||||
<i class="fal fa-plus"></i>
|
||||
<div class="accordion-title"><strong>Q:</strong> I'm interested in setting up an integration that's not listed. What should I do?</div>
|
||||
</div>
|
||||
<div class="accordion-panel">
|
||||
<div class="accordion-panel-content">
|
||||
<p><strong>A:</strong> Excellent, we always look forward to new integrations. Please reach out to support@northpass.com and your assigned rep when applicable. They will be happy to help further and loop in the respective folks to scope out the integration further.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.clicked {
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
.accordion-panel {
|
||||
border-radius: 0 0 8px 8px;
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
let accordions = document.getElementsByClassName("accordion-btn");
|
||||
|
||||
for (let i = 0; i < accordions.length; i++) {
|
||||
accordions[i].addEventListener("click", function() {
|
||||
this.querySelector('.fal').classList.toggle("fa-plus");
|
||||
this.querySelector('.fal').classList.toggle("fa-minus");
|
||||
this.classList.toggle("clicked");
|
||||
let panel = this.nextElementSibling;
|
||||
panel.classList.toggle("panel-open");
|
||||
if (panel.style.maxHeight) {
|
||||
panel.style.maxHeight = null;
|
||||
} else {
|
||||
panel.style.maxHeight = panel.scrollHeight + "px";
|
||||
}
|
||||
});
|
||||
}
|
||||
</script>
|
||||
@ -0,0 +1,26 @@
|
||||
<div class="np-homepage-featured np-homepage-topics np-max-width">
|
||||
<div class="np-homepage-featured-text">
|
||||
<div class="np-homepage-headline">
|
||||
Popular Topics
|
||||
</div>
|
||||
</div>
|
||||
<div class="np-topics-list row">
|
||||
<div class="col-xs-12 np-stretch-content" style="justify-content: space-evenly; flex-direction: row-reverse;">
|
||||
{% for category in current_school.filterable_categories %}
|
||||
<a class="np-top-button np-button np-button-secondary topic-button col-xs-2" href="/app/catalog?filter[category_uuid][in][]={{category.id}}">{{category.name}}</a>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.topic-button {
|
||||
border-radius: 8px;
|
||||
color: #2c4265 !important;
|
||||
border: 1px solid #2c4265 !important;
|
||||
}
|
||||
|
||||
.topic-button:hover{
|
||||
color: #34abe2 !important;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,76 @@
|
||||
{% capture quotes %}
|
||||
<svg width="52" height="40" viewBox="0 0 52 40" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M12.656 39.76C9.072 39.76 6.048 38.3787 3.584 35.616C1.19467 32.7787 0 29.12 0 24.64C0 21.056 0.858667 17.584 2.576 14.224C4.29333 10.864 6.68267 7.91467 9.744 5.376C12.0458 3.46723 14.5797 1.98056 17.3458 0.916004C19.0264 0.269172 20.8915 0.900303 22.0271 2.29798C23.9806 4.70233 22.9585 8.2866 20.493 10.1624C19.6235 10.8239 18.8405 11.5431 18.144 12.32C16.2027 14.4853 15.232 16.3147 15.232 17.808C15.232 18.48 15.3813 19.2267 15.68 20.048C16.0533 20.7947 16.9493 21.5787 18.368 22.4C20.2347 23.5947 21.5413 24.9013 22.288 26.32C23.0347 27.664 23.408 29.232 23.408 31.024C23.408 33.712 22.4 35.84 20.384 37.408C18.368 38.976 15.792 39.76 12.656 39.76ZM40.32 39.76C36.736 39.76 33.712 38.3787 31.248 35.616C28.8587 32.7787 27.664 29.12 27.664 24.64C27.664 21.056 28.5227 17.584 30.24 14.224C31.9573 10.864 34.3467 7.91467 37.408 5.376C39.7098 3.46723 42.2437 1.98056 45.0098 0.916003C46.6904 0.269172 48.5555 0.900303 49.6911 2.29797C51.6446 4.70233 50.6225 8.2866 48.157 10.1624C47.2875 10.8239 46.5045 11.5431 45.808 12.32C43.8667 14.4853 42.896 16.3147 42.896 17.808C42.896 18.48 43.0453 19.2267 43.344 20.048C43.7173 20.7947 44.6133 21.5787 46.032 22.4C47.8987 23.5947 49.2053 24.9013 49.952 26.32C50.6987 27.664 51.072 29.232 51.072 31.024C51.072 33.712 50.064 35.84 48.048 37.408C46.032 38.976 43.456 39.76 40.32 39.76Z" fill="url(#paint0_linear_2_541)"/>
|
||||
<defs>
|
||||
<linearGradient id="paint0_linear_2_541" x1="1.24909e-07" y1="19.88" x2="53.648" y2="19.88" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#089FB7"/>
|
||||
<stop offset="1" stop-color="#15824B"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
</svg>
|
||||
{% endcapture %}
|
||||
|
||||
<div class="np-homepage-featured np-homepage-tips-tricks np-max-width">
|
||||
<div class="np-homepage-featured-text">
|
||||
<div class="np-homepage-headline">
|
||||
Testimonials From Our Customers
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="tips-tricks-carousel np-carousel" id="tips-tricks-carousel">
|
||||
<div class="np-carousel-card">
|
||||
<div class="quote-block np-carousel-bg-blue">
|
||||
<i class="quotes-left"> {{quotes}} </i>
|
||||
<div class="quote">
|
||||
Northpass is an easy-to-manage LMS with the freedom to create and scale learning programs the way we want. Ultra-fast authoring and intelligent administration, along with integrated learning experiences. Plus, responsive support.
|
||||
</div>
|
||||
</div>
|
||||
<div class="quote-author-info">
|
||||
Administrator in Real Estate<br>
|
||||
<span>> 1000 employees</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="np-carousel-card">
|
||||
<div class="quote-block np-carousel-bg-blue">
|
||||
<i class="quotes-left"> {{quotes}} </i>
|
||||
<div class="quote ">
|
||||
Northpass is an LMS with the learner experience front and center. Their UI principles lead to a clean and focused learner experience that removes the typical distractions of finding and beginning courses in an LMS. They have over the years made significant investments into the admin experience and platform integrations which have helped it grow into areas where other established players would have had a leg up. Their customer success management approach is excellent and one that I routinely use as the bar with other software vendors we utilize.
|
||||
</div>
|
||||
</div>
|
||||
<div class="quote-author-info">
|
||||
Executive Sponsor in Retail<br>
|
||||
<span>> 1000 employees</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="np-carousel-card">
|
||||
<div class="quote-block np-carousel-bg-blue">
|
||||
<i class="quotes-left"> {{quotes}} </i>
|
||||
<div class="quote ">
|
||||
The ability to build a learning management for both internal employees and external clients is harder to find than I would have thought. Because Northpass is focused solely on the ability to build on-demand training, it's simplicity allows you to use those courses in whatever way you want/need.
|
||||
</div>
|
||||
</div>
|
||||
<div class="quote-author-info">
|
||||
Client Enablement Manager Mid-Market<br>
|
||||
<span>51-1000 employees</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<script>
|
||||
$(document).ready(function(){
|
||||
|
||||
$("#tips-tricks-carousel").slick({
|
||||
slidesToShow: 1,
|
||||
slidesToScroll: 1,
|
||||
cssEase: 'linear',
|
||||
prevArrow: '<i class="fal fa-chevron-left"></i>',
|
||||
nextArrow: '<i class="fal fa-chevron-right"></i>',
|
||||
infinite: true,
|
||||
adaptiveHeight: true
|
||||
});
|
||||
});
|
||||
|
||||
</script>
|
||||
@ -28,5 +28,22 @@
|
||||
</div>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
{%- comment -%} <div class="np-sub-navigation-content-item np-sub-navigation-content-item-inactive custom-navigation-content-item" id="certification-sub-nav-item">
|
||||
<a class="np-sub-navigation-content-item-link custom-navigation-item-link" href="/app/certification">
|
||||
<i
|
||||
class="far fa-diploma np-button-color np-sub-navigation-content-item-icon custom-navigation-content-item-icon"></i>
|
||||
<span style="margin-left: 10px; color: #000000;">Certification</span>
|
||||
</a>
|
||||
</div> {%- endcomment -%}
|
||||
</div>
|
||||
</nav>
|
||||
</nav>
|
||||
|
||||
<script>
|
||||
if(window.location.href.indexOf('/app/certification') > -1){
|
||||
document.querySelector('#certification-sub-nav-item').classList.remove('np-sub-navigation-content-item-inactive');
|
||||
document.querySelector('#certification-sub-nav-item').classList.add('np-sub-navigation-content-item-active');
|
||||
} else {
|
||||
document.querySelector('#certification-sub-nav-item').classList.remove('np-sub-navigation-content-item-active');
|
||||
document.querySelector('#certification-sub-nav-item').classList.add('np-sub-navigation-content-item-inactive');
|
||||
}
|
||||
</script>
|
||||
@ -0,0 +1,61 @@
|
||||
{% if training_session.approved? %}
|
||||
<div class="np-training-session-cta-note">
|
||||
<i class="far fa-check np-training-session-icon"></i>
|
||||
{% t .registered %}
|
||||
</div>
|
||||
{% elsif training_session.pending? %}
|
||||
<div class="np-training-session-cta-note np-training-session-cta-note-error">
|
||||
{% t .pending %}
|
||||
</div>
|
||||
{% elsif training_session.denied? %}
|
||||
<div class="np-training-session-cta-note np-training-session-cta-note-error">
|
||||
{% t .denied %}
|
||||
</div>
|
||||
{% elsif training_session.too_late? %}
|
||||
<div class="np-training-session-cta-note np-training-session-cta-note-error">
|
||||
{% t .too_late %}
|
||||
</div>
|
||||
{% elsif training_session.no_seats? %}
|
||||
<div class="np-training-session-cta-note np-training-session-cta-note-error">
|
||||
{% t .no_seats %}
|
||||
</div>
|
||||
{% endif %}
|
||||
<div class="np-training-session-cta">
|
||||
<div class="np-training-session-cta-buttons">
|
||||
<form
|
||||
action="{% route training_session_registration, id: training_session.id %}"
|
||||
method="post"
|
||||
>
|
||||
{% form_authenticity_token %}
|
||||
|
||||
{% if training_session.internal? and training_session.approved? %}
|
||||
{% if features.training_events_google_calendar? %}
|
||||
{% include "training_session_calendars" %}
|
||||
<button type="submit" class="np-top-button np-button np-button-big np-button-secondary">
|
||||
{% t .unregister %}
|
||||
</button>
|
||||
{% else %}
|
||||
<button type="submit" class="np-top-button np-button-font-color np-button np-button-big">
|
||||
{% t .unregister %}
|
||||
</button>
|
||||
{% endif %}
|
||||
|
||||
<input type="hidden" name="_method" value="delete" />
|
||||
{% endif %}
|
||||
|
||||
{% if training_session.not_registered? %}
|
||||
<button type="submit" class="np-top-button np-button np-button-big">
|
||||
{% t .register %}
|
||||
</button>
|
||||
{% endif %}
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.np-button-big {
|
||||
/* background: linear-gradient(90deg, #089FB7 0%, #15824B 100%) !important; */
|
||||
background: linear-gradient(45deg, #2c4265 0%, #34abe2 100%) !important;
|
||||
border-radius: 8px !important;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,14 @@
|
||||
<div class="np-card-training-session-date">
|
||||
<div class="np-button-background-color np-card-training-session-date-bar"></div>
|
||||
<div class="np-card-training-session-date-day" style='margin-right: 5px;'>
|
||||
{{ training_session.day }}
|
||||
</div>
|
||||
<div>
|
||||
<div class="np-card-training-session-date-month">
|
||||
{{ training_session.month }}
|
||||
</div>
|
||||
<div class="np-card-training-session-date-year">
|
||||
{{ training_session.year }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -0,0 +1,6 @@
|
||||
{%comment%}<h3 class="np-card-heading">
|
||||
{% t .header %}
|
||||
</h3>{%endcomment%}
|
||||
<div class="np-card-text">
|
||||
{{ training_event.description }}
|
||||
</div>
|
||||
@ -0,0 +1,24 @@
|
||||
<div class="np-card-spacing-large">
|
||||
{% include "training_session_date" %}
|
||||
|
||||
<div class="np-training-session-time">
|
||||
<i class="fal fa-clock np-button-color np-training-session-icon" style='color: #089FB7;'></i>
|
||||
{{ training_session.time_period }} {{ training_session.time_zone }}
|
||||
</div>
|
||||
|
||||
{% if training_session.location %}
|
||||
<div class="np-training-session-location">
|
||||
<i class="fal fa-map-marker-alt np-button-color np-training-session-icon"></i>
|
||||
{{ training_session.location }}
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{% if training_session.session_url %}
|
||||
<div class="np-training-session-location">
|
||||
<i class="fal fa-map-marker-alt np-button-color np-training-session-icon"></i>
|
||||
<a href="{{ training_session.session_url }}" class="np-button-color" target="_blank" >
|
||||
{{ training_session.session_url }}
|
||||
</a>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
@ -0,0 +1,10 @@
|
||||
<div class="np-top-vocabulary np-text-title">
|
||||
{% t shared.event_types, key: training_event.event_type %}
|
||||
<i class="fal fa-users-class np-button-color np-training-session-icon" style='color: #089FB7;'></i>
|
||||
</div>
|
||||
<div class="np-top-title">
|
||||
<a href="{% route home %}" class="np-back-button" aria-label="{% t shared.go_back %}">
|
||||
<i class="far fa-arrow-left np-hidden-mobile np-icon-back"></i>
|
||||
</a>
|
||||
{{ training_event.title }}
|
||||
</div>
|
||||
@ -81,4 +81,43 @@
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
</style>
|
||||
<script>
|
||||
let checkboxFlag = false;
|
||||
|
||||
let checkCheckbox = (element) => {
|
||||
if(element.checked){
|
||||
checkboxFlag = true;
|
||||
} else {
|
||||
checkboxFlag = false;
|
||||
}
|
||||
}
|
||||
|
||||
let hubspotOptOutSubmit = (e) => {
|
||||
let learner_email;
|
||||
let learner_name;
|
||||
|
||||
if(window.innerWidth > 768){
|
||||
learner_email = $('#desktop_learner_email')[0].value;
|
||||
learner_name = `${$('#desktop_learner_first_name')[0].value} ${$('#desktop_learner_last_name')[0].value}`;
|
||||
} else {
|
||||
learner_email = $('#mobile_learner_email').value;
|
||||
learner_name = `${$('#mobile_learner_first_name')} ${$('#mobile_learner_last_name')}`;
|
||||
}
|
||||
|
||||
if(checkboxFlag){
|
||||
alert('sending http req')
|
||||
|
||||
let xhr = new XMLHttpRequest();
|
||||
let url = 'https://www.workato.com/webhooks/rest/bd1a1eb7-7e79-4208-a1db-8e9c7440bcc9/hubspot_opt_out';
|
||||
|
||||
xhr.open("POST", url, true);
|
||||
xhr.send(JSON.stringify({
|
||||
learner_email,
|
||||
learner_name,
|
||||
checkboxFlag: checkboxFlag
|
||||
}));
|
||||
}
|
||||
return;
|
||||
}
|
||||
</script>
|
||||
@ -0,0 +1,101 @@
|
||||
<main class="np-box-container np-open-access">
|
||||
<div class="np-box">
|
||||
{% include "header_minimal" %}
|
||||
<div class="np-box-content-container">
|
||||
<form class="np-form np-box-content" action="{{ form.url }}" method="get" novalidate>
|
||||
{% form_authenticity_token %}
|
||||
<div class="np-form-headline">
|
||||
{% t shared.welcome_to_school, school_name: current_school.name %}
|
||||
</div>
|
||||
<div class="np-form-subheadline">
|
||||
{% t .headline, key: current_school.course_vocabulary %}
|
||||
</div>
|
||||
<div class="np-form-field">
|
||||
<label class="np-input-label" for="learner_first_name">
|
||||
{% t shared.first_name %}
|
||||
</label>
|
||||
<input
|
||||
class="np-input"
|
||||
autofocus="autofocus"
|
||||
type="text"
|
||||
name="first_name"
|
||||
id="learner_first_name"
|
||||
value="{{ form.first_name }}"
|
||||
/>
|
||||
</div>
|
||||
<div class="np-form-field">
|
||||
<label class="np-input-label" for="learner_last_name">
|
||||
{% t shared.last_name %}
|
||||
</label>
|
||||
<input
|
||||
class="np-input"
|
||||
type="text"
|
||||
name="last_name"
|
||||
id="learner_last_name"
|
||||
value="{{ form.last_name }}"
|
||||
/>
|
||||
</div>
|
||||
<div class="np-form-field">
|
||||
<label class="np-input-label" for="learner_email">
|
||||
Company Email
|
||||
</label>
|
||||
<input
|
||||
class="np-input"
|
||||
type="text"
|
||||
name="email"
|
||||
id="learner_email"
|
||||
value="{{ form.email }}"
|
||||
/>
|
||||
</div>
|
||||
<p style="display: none;" id="bad_email_alert">PLEASE ENTER YOUR COMPANY EMAIL</p>
|
||||
<input
|
||||
type="submit"
|
||||
name="commit"
|
||||
value="{% t shared.enter %}"
|
||||
id="submit_button"
|
||||
class="np-button np-button-big np-form-action"
|
||||
/>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<script>
|
||||
// document.getElementById("header").scrollIntoView();
|
||||
|
||||
function checkIfInputsExist (){
|
||||
window.setTimeout(function(){
|
||||
// Regular expression to check if string is email
|
||||
const regexExp = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
|
||||
|
||||
// Grabs Email Address Value
|
||||
const learnerEmail = $("#learner_email")[0].value;
|
||||
|
||||
if ($("#learner_email")[0].value.length > 0){
|
||||
if(regexExp.test(learnerEmail) == true){
|
||||
if ($("#learner_email")[0].value.includes('@scenariocloud.com')){
|
||||
$("#learner_email").css("background", "#f2f4f5");
|
||||
$("#bad_email_alert").css("display", "none");
|
||||
$("#submit_button").css("pointer-events", "auto");
|
||||
}
|
||||
else {
|
||||
$("#learner_email").css("background", "salmon");
|
||||
$("#bad_email_alert").css("color", "#f2f4f5");
|
||||
$("#bad_email_alert").css("display", "block");
|
||||
$("#submit_button").css("pointer-events","none");
|
||||
}
|
||||
} else {
|
||||
$("#learner_email").css("background", "#f2f4f5");
|
||||
$("#bad_email_alert").css("display", "none");
|
||||
$("#submit_button").css("pointer-events", "auto");
|
||||
}
|
||||
}
|
||||
}, 500)
|
||||
}
|
||||
document.addEventListener('keyup', checkIfInputsExist);
|
||||
console.log(123213213);
|
||||
</script>
|
||||
<style>
|
||||
.np-input-label{
|
||||
color: #ffffff;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,864 @@
|
||||
{% comment %} skip-auth {% endcomment %}
|
||||
{% 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">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 <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 the <a href="https://www.skuidskool.com/app/learning_paths/e76d07d4-984b-41a9-b53f-2c300f8eeba9" class="registration-sub-header-link" target="_blank">Explore More</a> learning paths within <a href="/app" class="registration-sub-header-link" target="_blank">Skuid Skool</a>.</div>
|
||||
<br>
|
||||
<div>Click below to register for your exam.</div>
|
||||
<span style="color: red;">
|
||||
**Important: Please make sure you use the same email that you are using in Skuid Skool. 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;" >
|
||||
<input type="checkbox" id="skuid-cert-agreement-input" onclick="agreementValidator()" style="margin-right: 10px;"><span>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>
|
||||
|
||||
<form id="skuid-cert-registration-button" name="PrePage" method ="post" action = "https://scotest.authorize.net/payment/CatalogPayment.aspx" target="_blank" style="margin: 25px 0; 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>
|
||||
|
||||
<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">Prep, practice, or schedule you 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="#" target="_blank">Take Exam</a>
|
||||
<div class="cert-card-blurb">
|
||||
Ready? Take your exam to become certified.
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
$( document ).ready(callNPWebhook());
|
||||
</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://cdn.northpass.io/Skuid/images/exam_passed_background.svg" alt="exam-passed-background" class="exam-status-image">
|
||||
<a class="cert-button-big share-cert-button" href="#">View Credential</a>
|
||||
</img>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{% comment %}=============================================== FAILED ======================================================{% endcomment %}
|
||||
|
||||
{% if current_person.properties.cert_status == 'Fail' %}
|
||||
<div class="cert-content-container col-xs-12">
|
||||
<div class="np-resource-title cert-header">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 -%}
|
||||
</main>
|
||||
</div>
|
||||
{% include "footer" %}
|
||||
|
||||
<!-- 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 }}'
|
||||
}))
|
||||
})
|
||||
}
|
||||
|
||||
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;
|
||||
}
|
||||
|
||||
.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-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: 91px;
|
||||
}
|
||||
|
||||
.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: -38%;
|
||||
margin-bottom: calc(38% + 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 -%}
|
||||
@ -17,6 +17,7 @@
|
||||
|
||||
$(document).ready(function () {
|
||||
setLastViewedCourse();
|
||||
addTargetBlankToLinksInCourseDescription();
|
||||
});
|
||||
|
||||
function setLastViewedCourse() {
|
||||
@ -26,7 +27,7 @@
|
||||
};
|
||||
$.ajax({
|
||||
type: 'POST',
|
||||
url: 'https://www.workato.com/webhooks/rest/bd1a1eb7-7e79-4208-a1db-8e9c7440bcc9/course-viewed', //workato link
|
||||
url: 'https://www.workato.com/webhooks/rest/bd1a1eb7-7e79-4208-a1db-8e9c7440bcc9/course-viewed', //workato link
|
||||
data: JSON.stringify(data),
|
||||
success: function (data) {
|
||||
console.log(data);
|
||||
@ -38,10 +39,28 @@
|
||||
});
|
||||
}
|
||||
|
||||
function addTargetBlankToLinksInCourseDescription() {
|
||||
let rte = document.getElementsByClassName("np-card-text")[0];
|
||||
let links;
|
||||
|
||||
if (rte) {
|
||||
links = rte.querySelectorAll("a");
|
||||
if (links) {
|
||||
for (i = 0; i < links.length; i++) {
|
||||
links[i].setAttribute("target", "_blank");
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.custom-course-page {
|
||||
max-width: 1600px !important;
|
||||
}
|
||||
|
||||
/* Based on how things are setup, at the course cover page, the footer is entirely blocked due to all of the customizations */
|
||||
.np-footer{
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
@ -43,6 +43,34 @@
|
||||
{% endif %}
|
||||
|
||||
{% unless current_person.signed_in? %}
|
||||
|
||||
<div class="sign-up-banner-mobile">
|
||||
<img class="sign-up-banner-image" src="https://cdn.northpass.io/Skuid/images/sign_up_banner.svg" />
|
||||
<div class="sign-up-banner-content-container-mobile">
|
||||
<div class="sign-up-banner-text-container">
|
||||
<span class="sign-up-banner-header">Registration is Free</span>
|
||||
<br>
|
||||
<span class="sign-up-banner-subheader">Sign up for free and start taking additional courses today!</span>
|
||||
</div>
|
||||
<a class="sign-up-banner-button sign-up-banner-button-mobile">Register For Free</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="sign-up-banner-desktop">
|
||||
<img class="sign-up-banner-image" src="https://cdn.northpass.io/Skuid/images/sign_up_banner.svg" />
|
||||
<div class="sign-up-banner-text-container">
|
||||
<span class="sign-up-banner-header">Registration is Free</span>
|
||||
<br>
|
||||
<span class="sign-up-banner-subheader">Sign up for free and start taking additional courses today!</span>
|
||||
</div>
|
||||
<div class="sign-up-banner-button-container">
|
||||
<a class="sign-up-banner-button">Register For Free</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="learning-path-not-logged">
|
||||
{% include 'learning_paths_collection' %}
|
||||
</div>
|
||||
@ -172,6 +200,98 @@
|
||||
|
||||
</script>
|
||||
<style>
|
||||
.sign-up-banner-desktop,
|
||||
.sign-up-banner-mobile{
|
||||
align-items: center;
|
||||
background: #EBF5FF;
|
||||
border-radius: 8px;
|
||||
box-shadow: 5px 5px 0px rgba(128, 173, 220, 0.32);
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 35px;
|
||||
}
|
||||
|
||||
.sign-up-banner-desktop{
|
||||
display: none;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.sign-up-banner-mobile{
|
||||
display: flex;
|
||||
margin: 0 auto;
|
||||
width: 95%;
|
||||
}
|
||||
|
||||
.sign-up-banner-image{
|
||||
max-width: 30%;
|
||||
}
|
||||
|
||||
.sign-up-banner-content-container-mobile{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.sign-up-banner-header{
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.sign-up-banner-subheader,
|
||||
.sign-up-banner-button{
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.sign-up-banner-button{
|
||||
background: #005CB9;
|
||||
border-radius: 32px;
|
||||
color: #FFFFFF;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.sign-up-banner-button-mobile{
|
||||
align-self: center;
|
||||
margin-top: 5px;
|
||||
width: 65%;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 768px){
|
||||
.sign-up-banner-desktop{
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.sign-up-banner-mobile{
|
||||
display: none;
|
||||
}
|
||||
|
||||
.sign-up-banner-image{
|
||||
max-width: 25%;
|
||||
}
|
||||
|
||||
.sign-up-banner-text-container{
|
||||
max-width: 43%;
|
||||
padding: 0 10px 0 25px;
|
||||
}
|
||||
|
||||
.sign-up-banner-button-container{
|
||||
max-width: 32%;
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
.sign-up-banner-button{
|
||||
padding: 4px 4px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1020px){
|
||||
.sign-up-banner-button-container{
|
||||
padding-right: 20px;
|
||||
}
|
||||
|
||||
.sign-up-banner-button{
|
||||
padding: 8px 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.tns-item img {
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
@ -0,0 +1,12 @@
|
||||
<div class="uk-container uk-container-center uk-padding-large-horizontal uk-margin-large-top uk-margin-bottom">
|
||||
<hgroup class="uk-text-center vertical-align uk-padding-large-top">
|
||||
<h1 class="page-head">{% t .headline %}</h1>
|
||||
</hgroup>
|
||||
|
||||
<div class="uk-width-small-1-1 uk-width-medium-1-2 uk-container-center uk-padding-large-top">
|
||||
<div class="school-website-custom-page-content uk-text-center uk-padding-large-bottom uk-margin-large-bottom">
|
||||
<h3 class="uk-margin-top-remove uk-margin-large-bottom">{% t .subheadline %}</h3>
|
||||
<p><a href="/" class="uk-button uk-button-primary">{% t .home %}</a></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -6,6 +6,10 @@
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
|
||||
<script>
|
||||
window.location.replace('/app');
|
||||
</script>
|
||||
|
||||
<body>
|
||||
{% include "header" %}
|
||||
<main class="np-main np-box-container">
|
||||
@ -46,6 +50,7 @@
|
||||
</label>
|
||||
<select
|
||||
class="np-input"
|
||||
type="text"
|
||||
name="learner[role]"
|
||||
id="learner_role"
|
||||
required
|
||||
@ -56,6 +61,24 @@
|
||||
<option class="selection-option" value="other">Other</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="np-form-field">
|
||||
<label class="np-input-label" for="hear_about">
|
||||
</label>
|
||||
<select
|
||||
class="np-input"
|
||||
type="text"
|
||||
name="how_did_you_hear"
|
||||
id="how_did_you_hear"
|
||||
required
|
||||
>
|
||||
<option value="" selected>How did you Hear about Skuid Skool?</option>
|
||||
<option value="My Colleague or Team Member">My Colleague or Team Member</option>
|
||||
<option value="Skuid Team Member/Skuid Employee">Skuid Team Member/Skuid Employee</option>
|
||||
<option value="Skuid newsletter, email, social media or other form of Skuid communication">Skuid newsletter, email, social media or other form of Skuid communication</option>
|
||||
<option value="Internet Search">Internet Search</option>
|
||||
<option value="Other">Other</option>
|
||||
</select>
|
||||
</div>
|
||||
</form>
|
||||
<button id="send_button" onclick="SendInfos()" class="np-button np-button-big np-button-large-font np-form-action" style="border-radius: 56px;">
|
||||
Update Information
|
||||
@ -192,7 +215,6 @@
|
||||
#learner_role {
|
||||
color: #1B1C1D;
|
||||
text-align: left;
|
||||
text-align-last: left;
|
||||
}
|
||||
@media only screen and (min-width: 1190px) {
|
||||
.hero-image-left-desktop {
|
||||
@ -263,7 +285,7 @@
|
||||
|
||||
function checkIfInputsExist (){
|
||||
window.setTimeout(function(){
|
||||
if ($("#learner_company")[0].value.length * $("#learner_title")[0].value.length && $("#learner_role")[0].value != "Your Skuid Builder Role") {
|
||||
if ($("#learner_company")[0].value.length * $("#learner_title")[0].value.length && $("#learner_role")[0].value != "Your Skuid Builder Role" && $("#how_did_you_hear")[0].value.length != 0) {
|
||||
$("#send_button").css("background-color","#005cb9");
|
||||
$("#send_button").css("pointer-events","auto");
|
||||
}
|
||||
@ -275,6 +297,7 @@
|
||||
}
|
||||
document.addEventListener('keydown', checkIfInputsExist);
|
||||
document.getElementById("learner_role").addEventListener('change', checkIfInputsExist);
|
||||
$("#how_did_you_hear")[0].addEventListener('change', checkIfInputsExist);
|
||||
|
||||
function SendInfos() {
|
||||
var xhr = new XMLHttpRequest();
|
||||
@ -290,7 +313,10 @@
|
||||
user_id: '{{ current_person.id }}',
|
||||
company: $("#learner_company")[0].value,
|
||||
title: $("#learner_title")[0].value,
|
||||
role: $("#learner_role")[0].value
|
||||
role: $("#learner_role")[0].value,
|
||||
email: '{{ current_person.email }}',
|
||||
name: '{{ current_person.first_name }} {{ current_person.last_name }}',
|
||||
howDidYouHear: $('#how_did_you_hear')[0].value
|
||||
}));
|
||||
};
|
||||
</script>
|
||||
|
||||
@ -52,6 +52,7 @@
|
||||
required
|
||||
>
|
||||
</div>
|
||||
<p style="display: none; color: salmon;" id="skuid-domain-alert">Skuid team members please login to <a href="https://www.skuadskool.com/" style="text-decoration: none;">skuadskool.com</a></p>
|
||||
<div class="np-form-field">
|
||||
<label class="np-input-label" for="learner_password">
|
||||
</label>
|
||||
@ -77,7 +78,35 @@
|
||||
required
|
||||
>
|
||||
</div>
|
||||
<div class="np-form-field">
|
||||
<div class="np-form-field checkbox-field">
|
||||
<label class="checkbox-container">
|
||||
<input type="checkbox" id="attestationCheckbox">
|
||||
I have read and agree to the <a href="http://www.skuid.com/legal/privacy-policy">privacy policy</a> and <a
|
||||
href="http://www.skuid.com/legal/terms-of-use">terms of use</a>.
|
||||
<span class="checkmark"></span>
|
||||
</label>
|
||||
</div>
|
||||
{%- comment -%} <div class="np-form-field">
|
||||
<label class="np-input-label" for="hear_about">
|
||||
</label>
|
||||
<select
|
||||
class="np-input"
|
||||
type="text"
|
||||
name="how_did_you_hear"
|
||||
id="how_did_you_hear"
|
||||
style="text-align-last: left;"
|
||||
required
|
||||
>
|
||||
<option value="" selected disabled>How did you Hear about Skuid Skool?</option>
|
||||
<option value="Colleague or Team Member">Colleague or Team Member</option>
|
||||
<option value="Skuid Team Member/Employee">Skuid Team Member/Employee</option>
|
||||
<option value="Skuid newsletter, email, social media or other form of Skuid communication">Skuid newsletter, email, social media or other form of Skuid communication</option>
|
||||
<option value="Internet Search">Internet Search</option>
|
||||
<option value="Other">Other</option>
|
||||
</select>
|
||||
</div> {%- endcomment -%}
|
||||
|
||||
{% comment %}<div class="np-form-field">
|
||||
<label class="np-input-label" for="hear_about">
|
||||
</label>
|
||||
<select
|
||||
@ -91,13 +120,15 @@
|
||||
<option value="Colleague or Team Member">Colleague or Team Member</option>
|
||||
<option value="Skuid Team Member/Employee">Skuid Team Member/Employee</option>
|
||||
<option value="Skuid newsletter, email, social media or other form of Skuid communication">Skuid newsletter, email, social media or other form of Skuid communication</option>
|
||||
<option value="Internet Search">Internet Search</option
|
||||
<option value="Internet Search">Internet Search</option>
|
||||
<option value="Other">Other</option>
|
||||
</div>
|
||||
</select>
|
||||
</div>{% endcomment %}
|
||||
<p style="display: none;" id="passwords-dont-match-alert">Passwords don't match</p>
|
||||
<button type="submit" id="send_button" class="np-button np-button-big np-button-large-font np-form-action" style="border-radius: 56px;" onclick="googleReport(event)">
|
||||
Register
|
||||
</button>
|
||||
<div class="err-required" style="display:none;">Please complete all required fields.</div>
|
||||
</form>
|
||||
{% comment %} <span class="np-form-terms">
|
||||
By submitting this form you agree to the
|
||||
@ -120,6 +151,7 @@
|
||||
</a>
|
||||
Terms of Use
|
||||
</span> {% endcomment %}
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
@ -307,8 +339,9 @@
|
||||
function checkIfInputsExist (){
|
||||
window.setTimeout(function(){
|
||||
if ($("#learner_email")[0].value.length >0){
|
||||
if ($("#learner_email")[0].value.match(/^[^\s@]+@[^\s@]+\.[^\s@]+$/)){
|
||||
$("#learner_email").css("background-color", "#FFF6F0")
|
||||
if ($("#learner_email")[0].value.match(/^[^\s@]+@[^\s@]+\.[^\s@]+$/) && $("#learner_email")[0].value.includes('@skuid') == false){
|
||||
$("#skuid-domain-alert").css("display", "none");
|
||||
$("#learner_email").css("background-color", "#FFF6F0");
|
||||
if ($("#learner_password")[0].value.length > 0){
|
||||
if (!$("#learner_password")[0].value.match(/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&.#^+-/()=<>~`:;'",])[A-Za-z\d@$!%*?&.#^+-/()=<>~`:;'",]{8,}$/)) {
|
||||
$("#password-too-short-alert").css("display", "block");
|
||||
@ -321,8 +354,8 @@
|
||||
$("#learner_password").css("background-color", "#FFF6F0");
|
||||
if ($("#learner_password")[0].value == $("#learner_second_password")[0].value){
|
||||
$("#passwords-dont-match-alert").css("display", "none");
|
||||
$("#learner_second_password").css("background-color", "#FFF6F0")
|
||||
if ($("#learner_first_name")[0].value.length * $("#learner_last_name")[0].value.length * $("#learner_email")[0].value.length * $("#learner_password")[0].value.length * $("#learner_second_password")[0].value.length != 0) {
|
||||
$("#learner_second_password").css("background-color", "#FFF6F0");
|
||||
if ($("#learner_first_name")[0].value.length * $("#learner_last_name")[0].value.length * $("#learner_email")[0].value.length * $("#learner_password")[0].value.length) {
|
||||
$("#send_button").css("background-color","#005cb9");
|
||||
$("#send_button").css("pointer-events","auto");
|
||||
}
|
||||
@ -345,6 +378,7 @@
|
||||
}
|
||||
}
|
||||
else {
|
||||
$("#learner_email")[0].value.includes('@skuid') ? $("#skuid-domain-alert").css("display", "block") : $("#skuid-domain-alert").css("display", "none");
|
||||
$("#learner_email").css("background-color", "salmon")
|
||||
$("#send_button").css("background-color","#6F7277");
|
||||
$("#send_button").css("pointer-events","none");
|
||||
@ -353,10 +387,21 @@
|
||||
}, 500)
|
||||
}
|
||||
document.addEventListener('keydown', checkIfInputsExist);
|
||||
$("#learner_email")[0].addEventListener('change', checkIfInputsExist);
|
||||
</script>
|
||||
<script>
|
||||
let googleReport = (event) => {
|
||||
let userData = $('#how_did_you_hear')[0].value;
|
||||
console.log(userData);
|
||||
}
|
||||
</script>
|
||||
//validate the checkbox is selected
|
||||
|
||||
$('.np-form-action').click(function(e) {
|
||||
e.preventDefault()
|
||||
console.log("clicked")
|
||||
|
||||
if($("#attestationCheckbox").is(":checked")) {
|
||||
$('.np-form').submit()
|
||||
} else {
|
||||
console.log("Checkbox is not checked")
|
||||
$('.checkbox-field').addClass('has-err')
|
||||
$('.err-required').show();
|
||||
}
|
||||
});
|
||||
</script>
|
||||
@ -724,6 +724,7 @@ body {
|
||||
|
||||
.page-container {
|
||||
display: flex;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.mo-filter-wrapper {
|
||||
@ -845,9 +846,6 @@ footer {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
select {
|
||||
text-align-last: center;
|
||||
}
|
||||
#prog-filter:focus {
|
||||
outline: none !important;
|
||||
}
|
||||
|
||||
@ -12,12 +12,8 @@ def create_cred():
|
||||
"recipient": {
|
||||
"name": "Norm Test",
|
||||
"email": "norm+accredtest2@northpass.com",
|
||||
# "id": "TEST21234",
|
||||
},
|
||||
# "name": "Skuid Test Credential",
|
||||
"group_id": 461982,
|
||||
# "issued_on": "07/08/2023",
|
||||
# "expired_on": "07/08/2024",
|
||||
"complete": True,
|
||||
"private": False,
|
||||
},
|
||||
|
||||
Reference in New Issue
Block a user