moved a bunch of churned customers templates to a hidden folder. Added to Sandata's script and the new groups. Notes.
This commit is contained in:
Norm Rasmussen
BIN
Custom_Templates/.churned_customers/JJSV/.DS_Store
vendored
Normal file
BIN
Custom_Templates/.churned_customers/JJSV/.DS_Store
vendored
Normal file
Binary file not shown.
@ -0,0 +1,167 @@
|
||||
{% assign content_expired = false %}
|
||||
{% assign now = "now" | date: "%m/%d/%Y" %}
|
||||
|
||||
{% if now >= course.properties.content_expiration %}
|
||||
{% assign content_expired = true %}
|
||||
{% endif %}
|
||||
|
||||
{% assign categories = '' | split: '' %}
|
||||
{% for cat in course.categories %}
|
||||
{% if cat.name contains "~" %}
|
||||
{% assign cat_name = cat.name | remove: "~" %}
|
||||
{% assign cat_name = cat_name | split: "]" %}
|
||||
{% assign str_parts_size = cat_name | size %}
|
||||
{% assign cat_name = cat_name | slice: 1, 2 %}
|
||||
{% else %}
|
||||
{% assign cat_name = cat.name | split: '!@#$%^&*()' %}
|
||||
{% endif %}
|
||||
|
||||
{% assign categories = categories | concat: cat_name %}
|
||||
{% endfor %}
|
||||
|
||||
{% unless content_expired %}
|
||||
{% capture course_path %}{% route course, id: course.id %}{% endcapture %}
|
||||
<div class="catalog-card" data-category="{{categories | join: '+'}}" href="{{course_path}}" >
|
||||
<div class="catalog-card-img-container">
|
||||
{% if course.ribbon %}
|
||||
<div class="np-card-ribbon">
|
||||
{{ course.ribbon }}
|
||||
</div>
|
||||
{% endif %}
|
||||
<img
|
||||
class="np-card-image"
|
||||
alt="{{ course.name }}"
|
||||
src="{{ course.image_url }}"
|
||||
>
|
||||
</div>
|
||||
|
||||
<div class="catalog-card-content np-card-content-vertical">
|
||||
<div class="catalog-card-title">
|
||||
{{ course.name }}
|
||||
</div>
|
||||
<div class="catalog-card-desc">
|
||||
{{ course.full_description }}
|
||||
</div>
|
||||
|
||||
{% comment %} {% for course_category in course.categories %}
|
||||
<div class="catalog-card-category">{{course_category.name}}</div>
|
||||
{% endfor %} {% endcomment %}
|
||||
<div class="np-card-content-footer">
|
||||
<div style="display:flex; align-items:center;">
|
||||
<div class="np-card-content-progress np-button-color">
|
||||
{% if course.progress > 0 and course.progress < 100 %}
|
||||
{% t shared.progress, count: course.progress %}
|
||||
{% elsif course.progress == 100 %}
|
||||
Viewed
|
||||
{% else %}
|
||||
Not viewed
|
||||
{% endif %}
|
||||
|
||||
</div>
|
||||
<div class="card-details">
|
||||
{% unless course.properties.course_length contains 'NULL' %}
|
||||
<span style="margin-right:16px;">|</span> <strong>{{course.properties.course_length}}</strong>
|
||||
{% endunless %}
|
||||
</div>
|
||||
</div>
|
||||
{% capture course_path %}{% route course, id: course.id %}{% endcapture %}
|
||||
<a class="np-button np-button-wide" href="{{ course_path }}">
|
||||
{% if course.started? == false %}
|
||||
Start
|
||||
{% elsif course.progress > 0 and course.progress < 100 %}
|
||||
{% t shared.continue %}
|
||||
{% elsif course.completed? %}
|
||||
Resume
|
||||
{% endif %}
|
||||
</a>
|
||||
{% if course.has_to_restart? %}
|
||||
{% include "course_version_outdated_popup", path: course_path %}
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endunless %}
|
||||
|
||||
|
||||
<style>
|
||||
.catalog-card {
|
||||
background: #f3f3f3;
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
|
||||
.np-card-image {
|
||||
border-radius: 0;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
overflow: hidden;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.catalog-card-content {
|
||||
padding: 24px 32px;
|
||||
width:100%;
|
||||
}
|
||||
|
||||
.catalog-card-title {
|
||||
font-size:24px;
|
||||
margin-bottom:16px;
|
||||
}
|
||||
|
||||
.catalog-card-desc {
|
||||
font-size:16px;
|
||||
line-height:20px;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.np-button.np-button-wide {
|
||||
background-color: #cc0033;
|
||||
color: white;
|
||||
display: inline-flex;
|
||||
width: auto;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
.catalog-card-category {
|
||||
margin-right:8px;
|
||||
display: inline-block;
|
||||
background: rgba(0, 153, 153, 0.8);
|
||||
padding: 3px 6px;
|
||||
color: #fff;
|
||||
font-size: 12px;
|
||||
font-weight:700;
|
||||
}
|
||||
|
||||
.np-card-content-progress {
|
||||
margin:0 16px 0 0;
|
||||
}
|
||||
|
||||
.card-details {
|
||||
font-size:14px;
|
||||
}
|
||||
|
||||
@media (min-width: 1170px) {
|
||||
.catalog-card {
|
||||
display:flex;
|
||||
min-height:200px;
|
||||
}
|
||||
|
||||
.catalog-card-img-container {
|
||||
width:36%;
|
||||
min-width: 36%;
|
||||
position:relative;
|
||||
}
|
||||
|
||||
.np-card-image {
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
max-width:unset;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
</style>
|
||||
@ -0,0 +1,92 @@
|
||||
{% assign content_expired = false %}
|
||||
{% assign now = "now" | date: "%m/%d/%Y" %}
|
||||
|
||||
{% if now >= course.properties.content_expiration %}
|
||||
{% assign content_expired = true %}
|
||||
{% endif %}
|
||||
|
||||
{% unless content_expired %}
|
||||
<div class="np-card">
|
||||
<div class="np-card-container">
|
||||
{% if course.ribbon %}
|
||||
<div class="np-card-ribbon">
|
||||
{{ course.ribbon }}
|
||||
</div>
|
||||
{% endif %}
|
||||
<div class="np-card-image-content-top"></div>
|
||||
<img
|
||||
class="np-card-image"
|
||||
alt="{{ course.name }}"
|
||||
src="{{ course.image_url }}"
|
||||
>
|
||||
</div>
|
||||
<div class="np-card-content np-card-content-vertical np-card-padding course-card-content">
|
||||
<div class="course-title-vision">
|
||||
{{ course.name }}
|
||||
</div>
|
||||
<div class="course-desc">
|
||||
{{ course.full_description }}
|
||||
</div>
|
||||
<div class="np-card-content-footer">
|
||||
<div class="np-card-content-progress np-button-color">
|
||||
{% if course.progress > 0 and course.progress < 100 %}
|
||||
In progress
|
||||
{% elsif course.completed? %}
|
||||
Viewed
|
||||
{% else %}
|
||||
Not viewed
|
||||
{% endif %}
|
||||
|
||||
</div>
|
||||
{% capture course_path %}{% route course, id: course.id %}{% endcapture %}
|
||||
<a
|
||||
class="np-button-font-color np-button" href="{{course_path}}"
|
||||
>
|
||||
{% if course.started? == false %}
|
||||
Start
|
||||
{% elsif course.progress > 0 and course.progress < 100 %}
|
||||
{% t shared.continue %}
|
||||
{% elsif course.completed? %}
|
||||
Resume
|
||||
{% endif %}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endunless %}
|
||||
|
||||
<style>
|
||||
|
||||
.course-card-content {
|
||||
color: black!important;
|
||||
padding: 22px 16px 16px;
|
||||
}
|
||||
|
||||
.np-card-image {
|
||||
border-radius:0;
|
||||
}
|
||||
|
||||
.np-card {
|
||||
margin-bottom: 10px!important;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.course-title-vision {
|
||||
font-family: "PlusJakartaSans-Bold", sans-serif!important;
|
||||
font-weight: 700;
|
||||
margin-bottom:8px;
|
||||
font-size:18px;
|
||||
}
|
||||
|
||||
.course-desc {
|
||||
flex:2;
|
||||
}
|
||||
|
||||
.np-card .np-card-content-footer .np-button {
|
||||
background-color:#cc0033;
|
||||
width:auto;
|
||||
color:#fff!important;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,182 @@
|
||||
{% assign content_expired = false %}
|
||||
{% assign now = "now" | date: "%m/%d/%Y" %}
|
||||
|
||||
{% if now >= course.properties.content_expiration %}
|
||||
{% assign content_expired = true %}
|
||||
{% endif %}
|
||||
|
||||
{% unless content_expired %}
|
||||
{% capture course_path %}{% route course, id: course.id %}{% endcapture %}
|
||||
<div class="catalog-card" href="{{course_path}}" >
|
||||
<div class="catalog-card-img-container">
|
||||
{% if course.ribbon %}
|
||||
<div class="np-card-ribbon">
|
||||
{{ course.ribbon }}
|
||||
</div>
|
||||
{% endif %}
|
||||
<img
|
||||
class="np-card-image"
|
||||
alt="{{ course.name }}"
|
||||
src="{{ course.image_url }}"
|
||||
>
|
||||
</div>
|
||||
|
||||
<div class="catalog-card-content np-card-content-vertical">
|
||||
<div class="catalog-card-title">
|
||||
{{ course.name }}
|
||||
</div>
|
||||
<div class="catalog-card-desc">
|
||||
{{ course.full_description }}
|
||||
</div>
|
||||
|
||||
{% comment %} {% for course_category in course.categories %}
|
||||
<div class="catalog-card-category">{{course_category.name}}</div>
|
||||
{% endfor %} {% endcomment %}
|
||||
<div class="np-card-content-footer">
|
||||
<div style="display:flex; align-items:center;">
|
||||
<div class="np-card-content-progress np-button-color">
|
||||
{% if course.progress > 0 and course.progress < 100 %}
|
||||
{% t shared.progress, count: course.progress %}
|
||||
{% elsif course.progress == 100 %}
|
||||
Viewed
|
||||
{% else %}
|
||||
Not viewed
|
||||
{% endif %}
|
||||
|
||||
</div>
|
||||
<div class="card-details">
|
||||
{% unless course.properties.course_length contains 'NULL' %}
|
||||
<span style="margin-right:16px;">|</span><strong>{{course.properties.course_length}}</strong>
|
||||
{% endunless %}
|
||||
</div>
|
||||
</div>
|
||||
{% capture course_path %}{% route course, id: course.id %}{% endcapture %}
|
||||
<a class="np-button np-button-wide" href="{{ course_path }}">
|
||||
{% if course.started? == false %}
|
||||
Start
|
||||
{% elsif course.progress > 0 and course.progress < 100 %}
|
||||
{% t shared.continue %}
|
||||
{% elsif course.completed? %}
|
||||
Resume
|
||||
{% endif %}
|
||||
</a>
|
||||
{% if course.has_to_restart? %}
|
||||
{% include "course_version_outdated_popup", path: course_path %}
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endunless %}
|
||||
|
||||
|
||||
<style>
|
||||
.catalog-card {
|
||||
background: #f3f3f3;
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
|
||||
.catalog-card-img-container {
|
||||
position:relative;
|
||||
}
|
||||
|
||||
.np-card-image {
|
||||
border-radius: 0;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.catalog-card-content {
|
||||
padding: 24px 32px;
|
||||
width:100%;
|
||||
}
|
||||
|
||||
.catalog-card-title {
|
||||
font-size: 20px;
|
||||
line-height: 24px;
|
||||
margin-bottom:16px;
|
||||
}
|
||||
|
||||
.catalog-card-desc {
|
||||
font-size:16px;
|
||||
line-height:20px;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.np-button.np-button-wide {
|
||||
background-color: #cc0033;
|
||||
color: white;
|
||||
display: inline-flex;
|
||||
width: auto;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
.catalog-card-category {
|
||||
margin-right:8px;
|
||||
display: inline-block;
|
||||
background: rgba(0, 153, 153, 0.8);
|
||||
padding: 3px 6px;
|
||||
color: #fff;
|
||||
font-size: 12px;
|
||||
font-weight:700;
|
||||
}
|
||||
|
||||
.np-card-content-progress {
|
||||
margin:0 16px 0 0;
|
||||
}
|
||||
|
||||
.card-details {
|
||||
font-size:14px;
|
||||
}
|
||||
|
||||
@media (min-width: 992px) {
|
||||
.catalog-card {
|
||||
display:flex;
|
||||
min-height:200px;
|
||||
}
|
||||
|
||||
.catalog-card-img-container {
|
||||
width:45%;
|
||||
min-width: 45%;
|
||||
}
|
||||
|
||||
.np-card-image {
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
max-width:unset;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.catalog-card-content {
|
||||
padding: 16px 24px;
|
||||
display:flex;
|
||||
/*width:100%;*/
|
||||
}
|
||||
|
||||
.np-card-content-footer {
|
||||
flex:2;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width:1200px) {
|
||||
.catalog-card-img-container {
|
||||
width:36%;
|
||||
min-width: 36%;
|
||||
}
|
||||
|
||||
.catalog-card-content {
|
||||
padding: 20px 24px;
|
||||
}
|
||||
|
||||
.catalog-card-title {
|
||||
font-size: 22px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
</style>
|
||||
@ -0,0 +1,78 @@
|
||||
<div class="np-card np-no-horizontal-padding">
|
||||
<div class="np-card-container" style="border-radius: 8px;">
|
||||
<div class="np-learning-path">
|
||||
<img
|
||||
alt="{{ learning_path.name }}"
|
||||
class="np-card-image np-learning-path-image"
|
||||
src="{{ learning_path.image_url }}"
|
||||
/>
|
||||
<div class="np-card-text-wrapper">
|
||||
|
||||
<div class="np-card-content np-card-padding np-card-content-vertical">
|
||||
<h3 class="np-card-content-title">
|
||||
{{ learning_path.name }}
|
||||
</h3>
|
||||
|
||||
<div class="np-hidden-mobile np-card-content-description">
|
||||
{{ learning_path.description }}
|
||||
</div>
|
||||
|
||||
<div class="np-hidden-mobile np-card-content-progress
|
||||
np-button-color">
|
||||
{% t shared.progress, count: learning_path.progress %}
|
||||
</div>
|
||||
|
||||
<div class="np-hidden-mobile np-card-progress-bar-container">
|
||||
<div
|
||||
style="width: {{ learning_path.progress }}%;"
|
||||
class="np-button-background-color np-card-progress-bar">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="np-card-content-footer">
|
||||
<a
|
||||
class="np-button"
|
||||
{% if learning_path.enrolled? %}
|
||||
{% if learning_path.current_item.course? %}
|
||||
href="{% route learning_path, id: learning_path.id %}"
|
||||
{% elsif learning_path.current_item.training_event? %}
|
||||
href="{% route training_session, id: learning_path.current_item.id %}"
|
||||
{% endif %}
|
||||
{% else %}
|
||||
href="{% route learning_path_enrollment, code: learning_path.enrollment_code %}"
|
||||
{% endif %}
|
||||
>
|
||||
{% if learning_path.enrolled? == false %}
|
||||
{% t shared.enroll %}
|
||||
{% elsif learning_path.started? == false %}
|
||||
Start Program
|
||||
{% elsif learning_path.completed? %}
|
||||
{% t shared.learning_path.view %}
|
||||
{% else %}
|
||||
{% t shared.continue %}
|
||||
{% endif %}
|
||||
</a>
|
||||
<span class="np-hidden-mobile np-learning-path-items">
|
||||
<span class="np-learning-path-items-count">
|
||||
{{ learning_path.items.count }} {% t shared.course_vocabulary.plural, key: current_school.course_vocabulary %}
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.np-learning-path .np-card-content.np-card-padding.np-card-content-vertical {
|
||||
border-radius: 0 8px 8px 0;
|
||||
}
|
||||
|
||||
.np-learning-path .np-card-content-footer .np-button {
|
||||
width: auto;
|
||||
background:#cc0033;
|
||||
color:#fff!important;
|
||||
}
|
||||
|
||||
</style>
|
||||
@ -0,0 +1,62 @@
|
||||
<div class="np-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">
|
||||
{% if training_event.sessions.size > 1 %}
|
||||
<span class="np-card-content-label">
|
||||
{% t .next_session %}
|
||||
</span>
|
||||
{% endif %}
|
||||
<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">
|
||||
{{ training_event.sessions.first.day }}
|
||||
</div>
|
||||
<div>
|
||||
<div class="np-card-training-session-date-month">
|
||||
{{ training_event.sessions.first.month }}
|
||||
</div>
|
||||
<div class="np-card-training-session-date-year">
|
||||
{{ training_event.sessions.first.year }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="np-card-content np-card-content-vertical np-card-padding">
|
||||
<div class="np-card-training-sessions">
|
||||
|
||||
{% comment %} <i class="np-card-training-sessions-icon far fa-calendar-star"></i> {% endcomment %}
|
||||
<span class="np-card-training-sessions-label">
|
||||
{% if training_event.sessions.size > 1 %}
|
||||
{% t .sessions, count: training_event.sessions.size %}
|
||||
{% endif %}
|
||||
</span>
|
||||
|
||||
<a
|
||||
class="np-button np-button-wide"
|
||||
href="{% route training_session, id: training_event.sessions.first.id %}"
|
||||
>
|
||||
{% t shared.view %}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.np-training-events .np-card-container,
|
||||
.np-card-training-sessions {
|
||||
background-color:#f3f3f3;
|
||||
}
|
||||
|
||||
.np-card-training-sessions .np-button:hover {
|
||||
color:#fff;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,11 @@
|
||||
<div class="np-zero-state-container">
|
||||
<div class="np-zero-state-text">
|
||||
There are currently no topics available
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.np-zero-state-text a {
|
||||
color:#009999;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,121 @@
|
||||
{% assign top_level_course_categories = '' | split: '' %}
|
||||
{% assign second_level_course_categories = '' | split: '' %}
|
||||
|
||||
{% for course in catalog_courses %}
|
||||
|
||||
{% for cat in course.categories %}
|
||||
{% assign cat_name = cat.name | split: '!@#$%^&*()' %}
|
||||
{% if cat.name contains "~" %}
|
||||
{% assign second_level_course_categories = second_level_course_categories | concat: cat_name %}
|
||||
{% else %}
|
||||
{% assign top_level_course_categories = top_level_course_categories | concat: cat_name %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
{% endfor %}
|
||||
|
||||
{% assign unique_top_level_course_categories = top_level_course_categories | uniq | sort %}
|
||||
{% assign unique_second_level_course_categories = second_level_course_categories | uniq | sort %}
|
||||
|
||||
<div class="categories-filter">
|
||||
<div class='filter-section'>
|
||||
<div class='filter-title'>
|
||||
TOPICS
|
||||
</div>
|
||||
<div class='filter-element-category category-selected' data-category='all'>
|
||||
All
|
||||
</div>
|
||||
{% for cat in unique_top_level_course_categories %}
|
||||
|
||||
{% assign number_of_courses = top_level_course_categories | split: cat %}
|
||||
{% assign number_of_courses = number_of_courses.size | minus: 1 %}
|
||||
|
||||
{% assign has_sub_cat = false %}
|
||||
{% for sub_cat in unique_second_level_course_categories %}
|
||||
{% if sub_cat contains cat %}
|
||||
{% assign has_sub_cat = true %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
|
||||
{% if has_sub_cat %}
|
||||
<div class='filter-element-category has-sub-categories' data-category='{{cat}}'>
|
||||
<div class="top-level-filter">{{ cat }} <i class="fas fa-caret-right"></i></div>
|
||||
<div class="filter-item-sub-categories">
|
||||
{% for sub_cat in unique_second_level_course_categories %}
|
||||
<div class="filter-item-sub-category" data-category='{{sub_cat | remove: "~" | remove: "[" | remove: "]" | remove: cat}}'>{{sub_cat | remove: "~" | remove: "[" | remove: "]" | remove: cat}}</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
{% else %}
|
||||
<div class='filter-element-category' data-category='{{cat}}'>
|
||||
<div class="top-level-filter">{{ cat }}</div>
|
||||
|
||||
</div>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
|
||||
.filter-title {
|
||||
font-weight: 500;
|
||||
letter-spacing: 3px;
|
||||
opacity: 0.7;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
.filter-section {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.filter-element-category {
|
||||
margin-bottom: 16px;
|
||||
cursor: pointer;
|
||||
font-weight: 400;
|
||||
font-size: 18px;
|
||||
line-height: 24px;
|
||||
}
|
||||
|
||||
.top-level-filter .fa-caret-right {
|
||||
margin-left:8px;
|
||||
}
|
||||
|
||||
|
||||
.filter-item-sub-categories {
|
||||
margin-left:24px;
|
||||
height: 0;
|
||||
opacity: 0;
|
||||
overflow: hidden;
|
||||
transition:all 0.2s;
|
||||
}
|
||||
|
||||
.filter-element-category.has-sub-categories.filter-open .fa-caret-right {
|
||||
transform:rotate(90deg)
|
||||
}
|
||||
|
||||
.filter-element-category.has-sub-categories.filter-open .filter-item-sub-categories {
|
||||
height: auto;
|
||||
opacity: 1;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.filter-item-sub-category {
|
||||
font-size: 16px;
|
||||
line-height: 20px;
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
.filter-element-category:not(.has-sub-categories).category-selected,
|
||||
.filter-item-sub-category.category-selected {
|
||||
font-weight: 800 !important;
|
||||
}
|
||||
|
||||
@media (min-width:768px) {
|
||||
.categories-filter {
|
||||
border-right: 1px solid #ddd;
|
||||
padding-right: 16px;
|
||||
padding-bottom: 32px;
|
||||
margin-right:16px;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
@ -0,0 +1,120 @@
|
||||
{% assign product_education_course_categories = '' | split: '' %}
|
||||
|
||||
{% assign top_level_course_categories = '' | split: '' %}
|
||||
{% assign second_level_course_categories = '' | split: '' %}
|
||||
|
||||
{% for course in catalog_courses %}
|
||||
|
||||
{% for cat in course.categories %}
|
||||
{% assign cat_name = cat.name | split: '!@#$%^&*()' %}
|
||||
{% if cat.name contains "~[Product Education]" %}
|
||||
{% assign product_education_course_categories = product_education_course_categories | concat: cat_name %}
|
||||
{% endif %}
|
||||
|
||||
{% comment %} {% if cat.name contains "Product Education" %}
|
||||
|
||||
{% assign cat_name = cat.name | split: '!@#$%^&*()' %}
|
||||
|
||||
{% if cat.name contains "~[Product Education]" %}
|
||||
{% assign second_level_course_categories = product_education_course_categories | concat: cat_name %}
|
||||
{% else %}
|
||||
{% assign top_level_course_categories = top_level_course_categories | concat: cat_name %}
|
||||
{% endif %}
|
||||
{% endif %} {% endcomment %}
|
||||
{% endfor %}
|
||||
{% endfor %}
|
||||
|
||||
{% assign unique_product_education_course_categories = product_education_course_categories | uniq | sort %}
|
||||
|
||||
{% assign unique_top_level_course_categories = top_level_course_categories | uniq | sort %}
|
||||
{% assign unique_second_level_course_categories = second_level_course_categories | uniq | sort %}
|
||||
|
||||
<div class="categories-filter">
|
||||
<div class='filter-section'>
|
||||
<div class='filter-title'>
|
||||
TOPICS
|
||||
</div>
|
||||
<div class='filter-element-category category-selected' data-category='all'>
|
||||
All
|
||||
</div>
|
||||
|
||||
{% for cat in unique_product_education_course_categories %}
|
||||
<div class='filter-element-category' data-category='{{cat | remove: "~[Product Education] " }}'>
|
||||
<div class="top-level-filter">{{cat | remove: "~[Product Education] " }}</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
|
||||
.filter-title {
|
||||
font-weight: 500;
|
||||
letter-spacing: 3px;
|
||||
opacity: 0.7;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
.filter-section {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.filter-element-category {
|
||||
margin-bottom: 16px;
|
||||
cursor: pointer;
|
||||
font-weight: 400;
|
||||
font-size: 18px;
|
||||
line-height: 24px;
|
||||
}
|
||||
|
||||
.top-level-filter .fa-caret-right {
|
||||
margin-left:8px;
|
||||
}
|
||||
|
||||
|
||||
.filter-item-sub-categories {
|
||||
margin-left:24px;
|
||||
height: 0;
|
||||
opacity: 0;
|
||||
overflow: hidden;
|
||||
transition:all 0.2s;
|
||||
}
|
||||
|
||||
.filter-element-category.has-sub-categories.filter-open .fa-caret-right {
|
||||
transform:rotate(90deg)
|
||||
}
|
||||
|
||||
.filter-element-category.has-sub-categories.filter-open .filter-item-sub-categories {
|
||||
height: auto;
|
||||
opacity: 1;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.filter-item-sub-category {
|
||||
font-size: 16px;
|
||||
line-height: 20px;
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
.filter-element-category:not(.has-sub-categories).category-selected,
|
||||
.filter-item-sub-category.category-selected {
|
||||
font-weight: 800 !important;
|
||||
}
|
||||
|
||||
@media (min-width:768px) {
|
||||
.categories-filter {
|
||||
border-right: 1px solid #ddd;
|
||||
padding-right: 16px;
|
||||
padding-bottom: 32px;
|
||||
margin-right:16px;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
{% comment %}
|
||||
<script>
|
||||
$('document').ready(function() {
|
||||
$('.has-sub-categories .top-level-filter').click(function() {
|
||||
$(this).parent().toggleClass('filter-open')
|
||||
})
|
||||
})
|
||||
</script> {% endcomment %}
|
||||
@ -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,9 @@
|
||||
<a
|
||||
href="{% route activity_viewer,
|
||||
id: activity.id,
|
||||
course_id: params.course_id,
|
||||
learning_path_id: params.learning_path_id
|
||||
%}" class="{{ class }}"
|
||||
>
|
||||
{{ activity.title }}
|
||||
</a>
|
||||
@ -0,0 +1,21 @@
|
||||
<div class="col-xs-12 np-top-image-spacing np-course-banner">
|
||||
|
||||
<div class="np-course-info np-course-banner-info">
|
||||
<div class="np-course-title">{{ course.name }}</div>
|
||||
{% include "course_details_review" %}
|
||||
</div>
|
||||
<img
|
||||
src="{{ course.image_url }}"
|
||||
class="np-course-banner-image"
|
||||
alt="{{ course.name }}"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.fas.fa-star {
|
||||
color: white;
|
||||
}
|
||||
.fas.fa-star {
|
||||
line-height: 1.15;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,6 @@
|
||||
<h3 class="np-card-heading">
|
||||
About
|
||||
</h3>
|
||||
<div class="np-card-text">
|
||||
{{ course.full_description }}
|
||||
</div>
|
||||
@ -0,0 +1,32 @@
|
||||
<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" style="border-radius:0; opacity: 0 !important">
|
||||
{% comment %}{% include "course_progress_and_cta" %}{% endcomment %}
|
||||
</div>
|
||||
{% include "course_outline" %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -0,0 +1,29 @@
|
||||
{% 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" 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">
|
||||
{% unless course.properties.course_length contains 'NULL' %}
|
||||
<strong>{{course.properties.course_length}}</strong>
|
||||
<span class="np-details-label">
|
||||
Duration
|
||||
</span>
|
||||
{% endunless %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.course-detail-rating {
|
||||
align-self: flex-end;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,71 @@
|
||||
<div class="np-card-container np-card-padding-large">
|
||||
{% include "course_banner" %}
|
||||
<div class="np-top-cta">
|
||||
{% include "course_progress_and_cta" %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% if course.progress == 0 %}
|
||||
<div class="np-card-container np-card-padding np-card-spacing">
|
||||
{% include "course_description" %}
|
||||
</div>
|
||||
<div class="np-card-container np-card-padding np-card-spacing">
|
||||
{% include "course_outline" %}
|
||||
</div>
|
||||
{% else %}
|
||||
<div class="np-card-container np-card-padding np-card-spacing">
|
||||
{% include "course_outline" %}
|
||||
</div>
|
||||
<div class="np-card-container np-card-padding np-card-spacing">
|
||||
{% include "course_description" %}
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{% comment %} {% if course.categories.any? %}
|
||||
<div class="np-card-container np-card-padding np-card-spacing">
|
||||
{% include "course_categories" %}
|
||||
</div>
|
||||
{% endif %} {% endcomment %}
|
||||
|
||||
{% if course.instructors.any? %}
|
||||
<div class="np-card-container np-card-padding np-card-spacing">
|
||||
{% include "course_instructors" %}
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{% if course.events.any? %}
|
||||
<div class="np-card-container np-card-padding np-card-spacing">
|
||||
{% include "course_events" %}
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<style>
|
||||
@media only screen and (max-width: 630px) {
|
||||
.np-course-info.np-course-banner-info {
|
||||
position: absolute;
|
||||
bottom: 1.5rem;
|
||||
left: 1.5rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
width: 90%;
|
||||
height: 80%;
|
||||
}
|
||||
}
|
||||
@media only screen and (max-width: 360px) {
|
||||
#hideable {
|
||||
display: none;
|
||||
}
|
||||
.np-course-details {
|
||||
justify-content: space-between;
|
||||
color: white;
|
||||
}
|
||||
.np-course-info.np-course-banner-info {
|
||||
left: 0;
|
||||
margin: auto 1rem;
|
||||
}
|
||||
.np-course-banner .np-course-title {
|
||||
margin-bottom: 2.5rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,39 @@
|
||||
<div class="np-course-outline">
|
||||
<div class="np-text-title np-course-outline-title">
|
||||
Content
|
||||
{% comment %} {% t .header, key: current_school.course_vocabulary %} {% endcomment %}
|
||||
</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,46 @@
|
||||
{% comment %}<div class="np-top-cta-progress-content">
|
||||
<div class="np-top-cta-progress-title np-text-title">
|
||||
{% t .header %}
|
||||
</div>
|
||||
<div class="np-progress-bar-container" style='border-radius: 40px;'>
|
||||
<div
|
||||
style="width: {{ course.progress }}%; border-radius: 40px;background-color:#cc0033;"
|
||||
class="np-button-background-color np-card-progress-bar">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="np-top-cta-progress-text
|
||||
{% if course.completed? %} np-color-success {% else %} np-button-color {% endif %}
|
||||
">
|
||||
{% t shared.progress, count: course.progress %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% if course.learner_can_retake? %}
|
||||
<form action="{% route course_retake, id: course.id %}" method="POST">
|
||||
{% form_authenticity_token %}
|
||||
<button type="submit" class="np-top-button np-button-font-color np-button np-button-big" style=' border-radius: 40px;'>
|
||||
{% t .retake, key: current_school.course_vocabulary %}
|
||||
</button>
|
||||
</form>
|
||||
{% else %}
|
||||
<a
|
||||
class="np-top-button np-button-font-color np-button np-button-big"
|
||||
style=' margin-right: 24px;'
|
||||
{% if course.enrolled? %}
|
||||
href="{% route course_viewer, course_id: course.id, learning_path_id: params.learning_path_id %}"
|
||||
{% else %}
|
||||
href="{% route course_enrollment, code: course.enrollment_code %}"
|
||||
{% endif %}
|
||||
>
|
||||
{% if course.enrolled? == false %}
|
||||
{% t shared.enroll %}
|
||||
{% elsif course.started? == false %}
|
||||
{% t shared.course.start, key: current_school.course_vocabulary %}
|
||||
{% elsif course.completed? %}
|
||||
{% t shared.course.view, key: current_school.course_vocabulary %}
|
||||
{% else %}
|
||||
{% t shared.continue %}
|
||||
{% endif %}
|
||||
</a>
|
||||
{% endif %}{% endcomment %}
|
||||
@ -0,0 +1,20 @@
|
||||
{% if courses.in_catalog.any? %}
|
||||
<div class="np-catalog-courses row row-with-thumbnails">
|
||||
{% for course in courses.in_catalog %}
|
||||
|
||||
{% assign is_product_education_course = false %}
|
||||
|
||||
{% for cat in course.categories %}
|
||||
{% if cat.name contains "Product Education" %}
|
||||
{% assign is_product_education_course = true %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
|
||||
<div class="col-xs-12">
|
||||
{% include "cards_catalog" %}
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% else %}
|
||||
{% include "catalog_zero_state" %}
|
||||
{% endif %}
|
||||
@ -0,0 +1,22 @@
|
||||
{% if courses.in_catalog.any? %}
|
||||
<div class="np-catalog-courses row row-with-thumbnails">
|
||||
{% for course in courses.in_catalog %}
|
||||
|
||||
{% assign is_product_education_course = false %}
|
||||
|
||||
{% for cat in course.categories %}
|
||||
{% if cat.name contains "Product Education" %}
|
||||
{% assign is_product_education_course = true %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
|
||||
{% if is_product_education_course %}
|
||||
<div class="col-xs-12">
|
||||
{% include "cards_catalog" %}
|
||||
</div>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% else %}
|
||||
{% include "catalog_zero_state" %}
|
||||
{% endif %}
|
||||
@ -0,0 +1,16 @@
|
||||
{% if courses.enrolled.any? %}
|
||||
<div class="row row-with-thumbnails">
|
||||
{% for course in courses.enrolled %}
|
||||
<div class="{{ class }}">
|
||||
{% include "cards_course_horizontal" with course %}
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% else %}
|
||||
{% capture message %}
|
||||
{% t shared.zero_state.courses.index,
|
||||
key: current_school.course_vocabulary
|
||||
%}
|
||||
{% endcapture %}
|
||||
{% include "courses_zero_state", message: message %}
|
||||
{% endif %}
|
||||
@ -0,0 +1,12 @@
|
||||
<div class="np-zero-state-container">
|
||||
<div class="np-zero-state-text">
|
||||
You have not accessed any topics. Click <a href="/app/catalog">here</a> to explore all available topics.
|
||||
</div>
|
||||
{% comment %} <img class="np-zero-state-courses" alt="{{ message }}" /> {% endcomment %}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.np-zero-state-text a {
|
||||
color:#009999;
|
||||
}
|
||||
</style>
|
||||
260
Custom_Templates/.churned_customers/JJSV/_footer.html.liquid
Normal file
260
Custom_Templates/.churned_customers/JJSV/_footer.html.liquid
Normal file
@ -0,0 +1,260 @@
|
||||
<div class="footer-terms">
|
||||
<hr />
|
||||
<p>Please see our <a href="https://jjsvbucket.s3.us-east-
|
||||
2.amazonaws.com/Vision+Excellence+Institute+Privacy+Policy+Jan+2023.pdf" target="_blank">Privacy Policy</a>. Use of this site constitutes your consent to the application of such laws and regulations and to our <a href="https://jjsvbucket.s3.us-east-
|
||||
2.amazonaws.com/Vision+Excellence+Institute+Privacy+Policy+Jan+2023.pdf" target="_blank">Privacy Policy</a>. Your use of the information on this site is subject to the terms of our <a href="https://jjsvbucket.s3.us-east-2.amazonaws.com/Vision+Excellence+Terms+Of+Service.pdf">Terms of Use</a>. </p>
|
||||
|
||||
<p>This website is published by Johnson & Johnson Services, Inc., which is solely responsible for its content. This website is intended for visitors in the United States. Third-party trademarks used herein are trademarks of their respective owners. Portions of this website are intended for visitors from certain geographical regions only and will be indicated as such.</p>
|
||||
|
||||
<p>The materials on this website are intended to provide information about products of the Johnson & Johnson Medical Devices Companies. Each product has its own labeling, which may include specific limitations relevant to the use of the product and which may vary from country to country. Please remember to check the local labeling of each product you plan to use to be aware of these limitations. If you have any questions on the use of these products, please contact your sales consultant.</p>
|
||||
|
||||
<p>This is a Healthcare Professional (HCP) educational website published by the Johnson & Johnson Institute, LLC which is solely responsible for its content. It is intended for all HCPs. Third party trademarks used herein are trademarks of their respective owners. You are solely responsible for your interactions on this website and we encourage you to review the Privacy Policy. HCPs are advised to consult their respective regulatory bodies, licensing authorities and program directors for program and product specific information and applicable industry associations and laws related to interactions between suppliers and HCPs. HCPs are responsible for complying with any specific hospital/entity requirements as well as their respective legal and regulatory requirements - which may affect participation in the programs offered. Products and/or procedures referenced in program materials may not be approved for sale in your location or the approval may differ from what is presented. Please check your local product labeling/instructions for use for the approved use. Program materials are not intended to be relied upon for medical or other advice.</p>
|
||||
|
||||
{% comment %} <p>093430-180612</p> {% endcomment %}
|
||||
</div>
|
||||
|
||||
<div class="jnj-footer-links">
|
||||
<div class="links-col">
|
||||
<div class="links-col-header">About</div>
|
||||
<hr style="width:40px;"/>
|
||||
<div class="links-col-link">
|
||||
<a href="https://www.jjvision.com/about-us" target="_blank">About Us</a>
|
||||
<a href="https://www.jjvision.com/news-media-center" target="_blank">News & Media</a>
|
||||
<a href="https://www.jnjvisionpro.com/grants" target="_blank">Grants</a>
|
||||
<a href="http://www.jnjvisioncareinfo.com/" target="_blank">State & Federal Advocacy</a>
|
||||
<a href="http://www.mddtransparency.com/vistakon?siteFlag=1" target="_blank">Transparency</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="links-col">
|
||||
<div class="links-col-header">Useful Links</div>
|
||||
<hr style="width:40px;"/>
|
||||
<div class="links-col-link">
|
||||
<a href="https://jnjinstitute.com/" target="_blank">Johnson & Johnson Institute</a>
|
||||
<a href="https://www.jnjvisionpro.com/" target="_blank">Johnson & Johnson Vision Pro</a>
|
||||
<a href="https://www.jnjvisionpro.com/important-safety-information" target="_blank">Important Safety Information</a>
|
||||
<a href="https://www.jnjvisionpro.com/products/experience-all-benefits-direct-ordering" target="_blank">Direct Ordering</a>
|
||||
<a href="https://www.jnjvisionpro.com/discontinued-products" target="_blank">Discontinued Products</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="links-col">
|
||||
<div class="links-col-header">Legal</div>
|
||||
<hr style="width:40px;"/>
|
||||
<div class="links-col-link">
|
||||
<a href="https://jjsvbucket.s3.us-east-
|
||||
2.amazonaws.com/Vision+Excellence+Institute+Privacy+Policy+Jan+2023.pdf" target="_blank">Privacy Policy</a>
|
||||
<a href="https://jjsvbucket.s3.us-east-
|
||||
2.amazonaws.com/California+Compliance+Vision+Excellence+Institute.pdf" target="_blank">California Compliance</a>
|
||||
<a href="https://jjsvbucket.s3.us-east-2.amazonaws.com/Vision+Excellence+Terms+Of+Service.pdf">Terms of Service</a>
|
||||
<a href="https://jjsvbucket.s3.us-east-2.amazonaws.com/Vision+Excellence+Institute+Cookie+Policy.pdf" target="_blank">Cookie Policy</a>
|
||||
<a href="https://privacyportal-cdn.onetrust.com/dsarwebform/96f23ee1-34e3-41d6-8d5a-07f0d554152b/c94578a5-6ded-
|
||||
45d2-be92-383ccacdd0f8.html?Website=https://visionexcellence.northpass.com" target="_blank">Do Not Sell or Share My Personal Information</a>
|
||||
<a href="https://privacyportal-cdn.onetrust.com/dsarwebform/96f23ee1-34e3-41d6-8d5a-07f0d554152b/c94578a5-6ded-
|
||||
45d2-be92-383ccacdd0f8.html?Website=https://visionexcellence.northpass.com" target="_blank">Limit the use of my Sensitive Personal Information</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="links-col">
|
||||
<div class="links-col-header">Connect With Us</div>
|
||||
<hr style="width:40px;"/>
|
||||
<div class="links-col-link">
|
||||
<nav class="np-footer-social-links">
|
||||
{% if website_footer.show_social_media_links? %}
|
||||
<ul class="np-footer-social-links-list">
|
||||
{% for social_media_link in website_footer.social_media_links %}
|
||||
<li class="np-footer-social-links-item">
|
||||
<a
|
||||
class="np-footer-social-links-link np-button-color"
|
||||
href="{{ social_media_link.link }}"
|
||||
target="_blank" title="{{ social_media_link.name }}"
|
||||
>
|
||||
{% if social_media_link.name == 'linkedin' %}
|
||||
<i class="np-footer-social-links-icon
|
||||
fab fa-linkedin-in"
|
||||
></i>
|
||||
{% else %}
|
||||
<i class="np-footer-social-links-icon
|
||||
fab fa-{{ social_media_link.name }}"
|
||||
></i>
|
||||
{% endif %}
|
||||
</a>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
{% endif %}
|
||||
</nav>
|
||||
<a href="mailto:JJSVEducationDigitalPlatformSupport@its.jnj.com" target="_blank">Contact Us</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="footer-links-code">pp2023xxxx</div>
|
||||
</div>
|
||||
|
||||
<footer class="np-footer">
|
||||
<div class="np-footer-top">
|
||||
{% if website_footer.show_navigation_links? %}
|
||||
<div class="np-footer-navigation"'>
|
||||
<ul class="np-footer-navigation-list">
|
||||
{% for website_navigation in navigations.footer_navigations %}
|
||||
{% if website_navigation.external? %}
|
||||
<li class="np-footer-navigation-item">
|
||||
<a
|
||||
class="np-footer-navigation-link np-button-color"
|
||||
href="{{ website_navigation.path }}"
|
||||
{% if website_navigation.external? %} target="_blank" {% endif %}
|
||||
style='color: white;opacity: 0.5;''
|
||||
>
|
||||
{{ website_navigation.name }}
|
||||
</a>
|
||||
</li>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% if current_school.logo_url %}
|
||||
<h2 class="np-footer-logo">
|
||||
<a href="{% route home %}">
|
||||
<img
|
||||
alt="{{ current_school.name }}"
|
||||
class="np-footer-logo-image"
|
||||
src="{{ current_school.logo_url }}"
|
||||
/>
|
||||
</a>
|
||||
</h2>
|
||||
{% else %}
|
||||
<div class="np-school-name np-header-font-color">
|
||||
{{ current_school.name }}
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<div class="np-footer-bottom">
|
||||
<div class="copyright">©Johnson & Johnson Surgical Vision, Inc. <span class="current-year"></span>. All rights reserved. This site is published by Johnson & Johnson Surgical Vision, Inc., which is solely responsible for its content.</div>
|
||||
|
||||
{% if website_footer.show_customer_service_email? and
|
||||
website_footer.school_customer_service_email
|
||||
%}
|
||||
<div class="np-footer-support">
|
||||
<div class="np-footer-support-item np-footer-support-help">
|
||||
{% t .need_help %}
|
||||
</div>
|
||||
<div class="np-footer-support-item np-footer-support-email">
|
||||
{% t .email %}
|
||||
</div>
|
||||
<a
|
||||
class="np-footer-support-item np-footer-support-link np-button-color"
|
||||
href="mailto:{{ website_footer.school_customer_service_email }}"
|
||||
>
|
||||
{% comment %} {{ website_footer.school_customer_service_email }} {% endcomment %}
|
||||
support@northpass.com
|
||||
</a>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<style>
|
||||
.np-footer {
|
||||
background: #63666a !important;
|
||||
padding: 1rem 1.25rem;
|
||||
}
|
||||
.np-powered-by {
|
||||
background: #63666a !important;
|
||||
text-transform: uppercase !important;
|
||||
font-size: 12px !important;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.np-footer-logo-image {
|
||||
opacity:1;
|
||||
filter: brightness(0) invert(1);
|
||||
}
|
||||
|
||||
.copyright {
|
||||
color:#fff;
|
||||
}
|
||||
|
||||
.np-footer-social-links-list { padding:0;}
|
||||
|
||||
.np-footer-social-links-icon {
|
||||
color: #c03;
|
||||
font-size: 26px;
|
||||
}
|
||||
|
||||
.footer-terms {
|
||||
padding: 1rem 1.25rem;
|
||||
}
|
||||
|
||||
.footer-terms hr {
|
||||
margin-bottom:32px;
|
||||
}
|
||||
|
||||
.footer-terms a {
|
||||
color: #c03;
|
||||
text-decoration:none;
|
||||
}
|
||||
|
||||
.jnj-footer-links {
|
||||
width:100%;
|
||||
padding: 1rem 1.25rem;
|
||||
}
|
||||
|
||||
.jnj-footer-links .links-col {
|
||||
margin-bottom:32px;
|
||||
width:100%;
|
||||
}
|
||||
|
||||
.jnj-footer-links .links-col-header {
|
||||
font-size:18px;
|
||||
color:#cc0033;
|
||||
font-weight:700;
|
||||
}
|
||||
|
||||
.jnj-footer-links .links-col-link a {
|
||||
text-decoration:none;
|
||||
display:block;
|
||||
margin-bottom:16px;
|
||||
color:#212121;
|
||||
}
|
||||
|
||||
.jnj-footer-links .links-col-link a:hover {
|
||||
color:#009999;
|
||||
}
|
||||
|
||||
.footer-links-code {
|
||||
width:100%;
|
||||
text-align:right;
|
||||
font-size:14px;
|
||||
}
|
||||
|
||||
@media (min-width:768px) {
|
||||
.np-footer, .footer-terms, .jnj-footer-links {
|
||||
padding: 1rem 4%;
|
||||
}
|
||||
|
||||
.jnj-footer-links {
|
||||
display:flex;
|
||||
flex-wrap:wrap;
|
||||
}
|
||||
|
||||
.jnj-footer-links .links-col {
|
||||
width:50%;
|
||||
padding-right: 32px;
|
||||
}
|
||||
|
||||
.jnj-footer-links .links-col-header {
|
||||
font-size:22px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width:1200px) {
|
||||
|
||||
.jnj-footer-links .links-col {
|
||||
width:25%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
const year = new Date().getFullYear()
|
||||
|
||||
$(".current-year").text(year)
|
||||
</script>
|
||||
13
Custom_Templates/.churned_customers/JJSV/_head.html.liquid
Normal file
13
Custom_Templates/.churned_customers/JJSV/_head.html.liquid
Normal file
@ -0,0 +1,13 @@
|
||||
{% styles default %}
|
||||
{% styles colors %}
|
||||
{% styles custom %}
|
||||
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://s3.amazonaws.com/static.northpass.com/fonts/PlusJakartaSans-Regular.woff" rel="stylesheet">
|
||||
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.css" integrity="sha512-wR4oNhLBHf7smjy0K4oqzdWumd+r5/+6QO/vDda76MW5iug4PT7v86FoEkySIJft3XA0Ae6axhIvHrqwm793Nw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
|
||||
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js" type="text/javascript"></script>
|
||||
396
Custom_Templates/.churned_customers/JJSV/_header.html.liquid
Normal file
396
Custom_Templates/.churned_customers/JJSV/_header.html.liquid
Normal file
@ -0,0 +1,396 @@
|
||||
{% if current_person.signed_in? %}
|
||||
{% unless current_person.email contains "+preview" %}
|
||||
{% if current_person.properties.additional_user_info_complete == false %}
|
||||
<script>
|
||||
console.log('user not completed additional info - redirect to additional signup')
|
||||
|
||||
if (localStorage.getItem('learnerCompletedSecondaryRegistration') != null) {
|
||||
const secondaryInfoStored = localStorage.getItem("learnerCompletedSecondaryRegistration")
|
||||
const learnerCompany = localStorage.getItem("learnerCompany")
|
||||
const learnerCity = localStorage.getItem("learnerCity")
|
||||
const learnerState = localStorage.getItem("learnerState")
|
||||
const learnerCountry = localStorage.getItem("learnerCountry")
|
||||
const learnerRole = localStorage.getItem("learnerRole")
|
||||
const learnerSpecialty = localStorage.getItem("learnerSpecialty")
|
||||
|
||||
if ( learnerCompany != null && learnerCity != null && learnerState != null && learnerCountry != null && learnerRole != null && learnerSpecialty != null ) {
|
||||
let userData = {
|
||||
learner_uuid: '{{current_person.id}}',
|
||||
company: learnerCompany,
|
||||
city: learnerCity,
|
||||
state: learnerState,
|
||||
country: learnerCountry,
|
||||
role: learnerRole,
|
||||
specialty: learnerSpecialty,
|
||||
}
|
||||
rerunAdditionalLearnerInfoWorkflow(userData)
|
||||
}
|
||||
} else {
|
||||
window.location.replace('/app/sign-up-cont')
|
||||
}
|
||||
|
||||
function rerunAdditionalLearnerInfoWorkflow(data) {
|
||||
console.log("re-running workflow with data: ", data)
|
||||
|
||||
$.ajax({
|
||||
url: "https://www.workato.com/webhooks/rest/bd1a1eb7-7e79-4208-a1db-8e9c7440bcc9/additional-learner-info",
|
||||
data: JSON.stringify(data),
|
||||
method: 'POST',
|
||||
success: function(res){
|
||||
console.log(res)
|
||||
},
|
||||
error: function (xhr, status, error) {
|
||||
console.error("Error posting to workato!", error);
|
||||
}
|
||||
});
|
||||
}
|
||||
</script>
|
||||
{% elsif current_person.properties.additional_user_info_complete == true %}
|
||||
<script>
|
||||
console.log("property is set, can delete local storage")
|
||||
localStorage.removeItem("learnerCompletedSecondaryRegistration")
|
||||
localStorage.removeItem("learnerCompany")
|
||||
localStorage.removeItem("learnerCity")
|
||||
localStorage.removeItem("learnerState")
|
||||
localStorage.removeItem("learnerCountry")
|
||||
localStorage.removeItem("learnerRole")
|
||||
localStorage.removeItem("learnerSpecialty")
|
||||
</script>
|
||||
{% else %}
|
||||
<script>
|
||||
console.log("custom prop doesn't exist")
|
||||
|
||||
if (localStorage.getItem('learnerCompletedSecondaryRegistration') != null) {
|
||||
const secondaryInfoStored = localStorage.getItem("learnerCompletedSecondaryRegistration")
|
||||
const learnerCompany = localStorage.getItem("learnerCompany")
|
||||
const learnerCity = localStorage.getItem("learnerCity")
|
||||
const learnerState = localStorage.getItem("learnerState")
|
||||
const learnerCountry = localStorage.getItem("learnerCountry")
|
||||
const learnerRole = localStorage.getItem("learnerRole")
|
||||
const learnerSpecialty = localStorage.getItem("learnerSpecialty")
|
||||
|
||||
if ( learnerCompany != null && learnerCity != null && learnerState != null && learnerCountry != null && learnerRole != null && learnerSpecialty != null ) {
|
||||
let userData = {
|
||||
learner_uuid: '{{current_person.id}}',
|
||||
company: learnerCompany,
|
||||
city: learnerCity,
|
||||
state: learnerState,
|
||||
country: learnerCountry,
|
||||
role: learnerRole,
|
||||
specialty: learnerSpecialty,
|
||||
}
|
||||
rerunAdditionalLearnerInfoWorkflow(userData)
|
||||
}
|
||||
} else {
|
||||
window.location.replace('/app/sign-up-cont')
|
||||
}
|
||||
|
||||
function rerunAdditionalLearnerInfoWorkflow(data) {
|
||||
console.log("re-running workflow with data: ", data)
|
||||
|
||||
$.ajax({
|
||||
url: "https://www.workato.com/webhooks/rest/bd1a1eb7-7e79-4208-a1db-8e9c7440bcc9/additional-learner-info",
|
||||
data: JSON.stringify(data),
|
||||
method: 'POST',
|
||||
success: function(res){
|
||||
console.log(res)
|
||||
},
|
||||
error: function (xhr, status, error) {
|
||||
console.error("Error posting to workato!", error);
|
||||
}
|
||||
});
|
||||
}
|
||||
</script>
|
||||
{% endif %}
|
||||
{% endunless %}
|
||||
{% endif %}
|
||||
|
||||
<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"
|
||||
>
|
||||
<i class="far fa-bars"></i>
|
||||
</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">
|
||||
{% if current_person.signed_in? %}
|
||||
{% for link in navigations.sub_navigation %}
|
||||
{% unless link.url == "/app" or link.url == '/app/learning_paths' %}
|
||||
<li class= "np-header-desktop-nav-item {{ link.active_class }}">
|
||||
<a
|
||||
href="{{ link.url }}"
|
||||
class="np-header-desktop-nav-link np-header-font-color"
|
||||
>
|
||||
{% if link.label == 'Dashboard' %}
|
||||
My Topics
|
||||
{% elsif link.label == 'Catalog' %}
|
||||
All Content
|
||||
{% else %}
|
||||
{{ link.label }}
|
||||
{% endif %}
|
||||
|
||||
</a>
|
||||
</li>
|
||||
{% endunless %}
|
||||
{% endfor %}
|
||||
<li class= "np-header-desktop-nav-item">
|
||||
<a
|
||||
href="/app/product-education"
|
||||
class="np-header-desktop-nav-link np-header-font-color"
|
||||
>
|
||||
Product Education
|
||||
</a>
|
||||
</li>
|
||||
{% endif %}
|
||||
{% 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">
|
||||
{% unless current_school.sso_active? %}
|
||||
<a
|
||||
class="np-header-avatar-tooltip-navigation-link"
|
||||
href="{% route account %}"
|
||||
>
|
||||
{% t .profile_settings %}
|
||||
</a>
|
||||
{% endunless %}
|
||||
<a
|
||||
class="np-header-avatar-tooltip-navigation-link np-danger"
|
||||
href="{% route logout %}"
|
||||
>
|
||||
{% t .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>
|
||||
|
||||
<div class="np-hidden-desktop">
|
||||
<div class="np-header-mobile-menu-content np-hidden">
|
||||
{% if current_person.signed_in? %}
|
||||
<img
|
||||
alt="{{ current_person.name }}"
|
||||
class="np-header-mobile-menu-content-avatar"
|
||||
src="{{ current_person.avatar_url }}"
|
||||
/>
|
||||
<div class="np-header-mobile-menu-content-name">
|
||||
{{ current_person.name }}
|
||||
</div>
|
||||
{% endif %}
|
||||
<div class="np-header-mobile-menu-content-nav">
|
||||
<form
|
||||
class="np-header-search"
|
||||
data-test="mobile-search"
|
||||
method="get"
|
||||
action="{% route search %}"
|
||||
>
|
||||
<input
|
||||
aria-label="{% t .search %}"
|
||||
class="np-header-search-input"
|
||||
type="text"
|
||||
name="q"
|
||||
placeholder="{% t .search %}"
|
||||
/>
|
||||
<i class="np-header-search-icon far fa-search"></i>
|
||||
</form>
|
||||
{% for website_navigation in navigations.header_navigations %}
|
||||
{% unless website_navigation.path == '/app/learning_paths' %}
|
||||
<a
|
||||
href="{{ website_navigation.path }}"
|
||||
class="np-header-mobile-menu-content-button"
|
||||
{% if website_navigation.external? %} target="_blank" {% endif %}
|
||||
>
|
||||
{% if website_navigation.name == 'Dashboard' %}
|
||||
My Topics
|
||||
{% elsif website_navigation.name == 'Catalog' %}
|
||||
All Topics
|
||||
{% else %}
|
||||
{{ website_navigation.name }}
|
||||
{% endif %}
|
||||
</a>
|
||||
{% endunless %}
|
||||
{% endfor %}
|
||||
<a
|
||||
href="/app/catalog"
|
||||
class="np-header-mobile-menu-content-button"
|
||||
>
|
||||
All Content
|
||||
</a>
|
||||
<a
|
||||
href="/app/product-education"
|
||||
class="np-header-mobile-menu-content-button"
|
||||
>
|
||||
Product Education
|
||||
</a>
|
||||
<div class="np-header-mobile-menu-content-line"></div>
|
||||
{% unless current_school.sso_active? %}
|
||||
<a
|
||||
class="np-header-mobile-menu-content-button"
|
||||
href="{% route account %}"
|
||||
>
|
||||
{% t .profile_settings %}
|
||||
</a>
|
||||
{% endunless %}
|
||||
<a
|
||||
class="np-header-mobile-menu-content-button logout-button"
|
||||
href="{% route logout %}"
|
||||
>
|
||||
{% t .sign_out %}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% include "messages" %}
|
||||
|
||||
<style>
|
||||
|
||||
.np-header-mobile-menu-nav-button .fa-bars {
|
||||
font-size:25px;
|
||||
}
|
||||
|
||||
.np-header-logo {
|
||||
margin:0;
|
||||
}
|
||||
|
||||
.np-header-logo img.np-header-logo-image {
|
||||
height:30px;
|
||||
}
|
||||
|
||||
.np-header-mobile-menu-content {
|
||||
background-color:#f3f3f3;
|
||||
}
|
||||
|
||||
.np-header-mobile-menu-content-button.logout-button {
|
||||
background-color: transparent;
|
||||
border: 3px solid #009999;
|
||||
}
|
||||
|
||||
|
||||
.np-header-desktop-nav-link {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.np-header-desktop-nav-item.np-sub-navigation-content-item-active {
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 768px) {
|
||||
.np-header {
|
||||
height: auto;
|
||||
padding: 12px 4%;
|
||||
}
|
||||
|
||||
.np-header-desktop-nav-list {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.np-header-search-input {
|
||||
background:transparent;
|
||||
}
|
||||
|
||||
.np-header-search-icon {
|
||||
color:#212121;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width:992px) {
|
||||
.np-header-logo img.np-header-logo-image {
|
||||
height:40px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
if (window.location.pathname.includes("/app/product-education")) {
|
||||
|
||||
$(".np-header-desktop-nav-item a[href='/app/product-education']").parent().addClass("np-sub-navigation-content-item-active")
|
||||
}
|
||||
</script>
|
||||
@ -0,0 +1,197 @@
|
||||
<div class="homepage-hero-carousel" style="display:none;">
|
||||
<div class="homepage-hero-slide">
|
||||
<div class="homepage-hero-slide-image" style="background-image:url(https://s3.amazonaws.com/static.northpass.com/J%26J/pexels-andrea-piacquadio-3768131.jpg)">
|
||||
</div>
|
||||
<div class="homepage-hero-slide-content">
|
||||
<div class="homepage-hero-slide-headline">
|
||||
Vision Excellence Institute
|
||||
</div>
|
||||
<div class="homepage-hero-slide-subheadline">
|
||||
Powered by Johnson & Johnson Professional Education
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="homepage-hero-slide">
|
||||
<div class="homepage-hero-slide-image" style="background-image:url(https://s3.amazonaws.com/static.northpass.com/J%26J/2f537d7b-f756-492b-87e7-a62c2a4ed35c.jpeg)">
|
||||
</div>
|
||||
<div class="homepage-hero-slide-content">
|
||||
<div class="homepage-hero-slide-headline">
|
||||
Vision Excellence Institute
|
||||
</div>
|
||||
<div class="homepage-hero-slide-subheadline">
|
||||
Powered by Johnson & Johnson Professional Education
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="homepage-hero-slide">
|
||||
<div class="homepage-hero-slide-image" style="background-image:url(https://s3.amazonaws.com/static.northpass.com/J%26J/4de5b8a6-6b5c-41f6-96a3-e2ef31cf00ad.jpeg)">
|
||||
</div>
|
||||
<div class="homepage-hero-slide-content">
|
||||
<div class="homepage-hero-slide-headline">
|
||||
Vision Excellence Institute
|
||||
</div>
|
||||
<div class="homepage-hero-slide-subheadline">
|
||||
Powered by Johnson & Johnson Professional Education
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
$(document).ready(function() {
|
||||
$('.homepage-hero-carousel').on('init', function(slick){
|
||||
console.log(slick)
|
||||
$('.homepage-hero-carousel').css('display', 'block')
|
||||
})
|
||||
|
||||
$(".homepage-hero-carousel").slick({
|
||||
slidesToShow: 1,
|
||||
slidesToScroll: 1,
|
||||
dots: false,
|
||||
infinite: true,
|
||||
cssEase: 'linear',
|
||||
prevArrow: '<svg viewBox="0 0 20 20" class="_1ycOA _left"><path d="M12 16a.997.997 0 0 1-.707-.293l-5-5a.999.999 0 0 1 0-1.414l5-5a.999.999 0 1 1 1.414 1.414L8.414 10l4.293 4.293A.999.999 0 0 1 12 16" fill-rule="evenodd"></path></svg>',
|
||||
nextArrow: '<svg viewBox="0 0 20 20" class="_1ycOA _right"><path d="M8 16a.999.999 0 0 1-.707-1.707L11.586 10 7.293 5.707a.999.999 0 1 1 1.414-1.414l5 5a.999.999 0 0 1 0 1.414l-5 5A.997.997 0 0 1 8 16" fill-rule="evenodd"></path></svg>'
|
||||
});
|
||||
|
||||
|
||||
});
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.np-homepage-hero-content {
|
||||
position: inherit;
|
||||
}
|
||||
|
||||
.homepage-hero-slide {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
background-color: #cc0033;
|
||||
}
|
||||
|
||||
.homepage-hero-slide-image {
|
||||
height: 200px;
|
||||
width: 100%;
|
||||
background-size:cover;
|
||||
background-position:center;
|
||||
}
|
||||
|
||||
.homepage-hero-slide-content {
|
||||
color:#fff;
|
||||
text-align:center;
|
||||
padding:32px 16px;
|
||||
}
|
||||
|
||||
.homepage-hero-slide-headline {
|
||||
font-size: 28px;
|
||||
line-height: 32px;
|
||||
font-weight:700;
|
||||
}
|
||||
|
||||
.homepage-hero-slide-subheadline {
|
||||
opacity: 0.85;
|
||||
margin-top:8px;
|
||||
}
|
||||
|
||||
|
||||
@media screen and (min-width: 768px) {
|
||||
.homepage-hero-slide {
|
||||
display: flex!important;
|
||||
min-height:300px;
|
||||
}
|
||||
|
||||
.homepage-hero-slide-image {
|
||||
width: 50%;
|
||||
min-height: 100%;
|
||||
height:auto;
|
||||
}
|
||||
|
||||
.homepage-hero-slide-content {
|
||||
width: 50%;
|
||||
padding:32px 20px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 992px) {
|
||||
.homepage-hero-slide-image {
|
||||
width: 40%;
|
||||
}
|
||||
|
||||
.homepage-hero-slide-content {
|
||||
width: 60%;
|
||||
padding:48px;
|
||||
}
|
||||
|
||||
.homepage-hero-slide-headline {
|
||||
font-size: 32px;
|
||||
line-height: 36px;
|
||||
}
|
||||
|
||||
.homepage-hero-slide-subheadline {
|
||||
font-size:18px;
|
||||
line-height:20px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1200px) {
|
||||
|
||||
.homepage-hero-slide-headline {
|
||||
font-size: 40px;
|
||||
line-height: 48px;
|
||||
}
|
||||
}
|
||||
|
||||
._1ycOA {
|
||||
cursor: pointer;
|
||||
fill: #292824;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
border-radius: 50%;
|
||||
background: #fff;
|
||||
box-shadow: 0 0 1px rgba(66, 71, 76, 0.45), 0 2px 1px rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
._left:before,
|
||||
._right:before {
|
||||
font-size: 30px;
|
||||
background: black;
|
||||
color: white;
|
||||
border-radius: 50%;
|
||||
font-style: normal;
|
||||
font-feature-settings: normal;
|
||||
font-variant: normal;
|
||||
text-rendering: auto;
|
||||
line-height: 1;
|
||||
font-family: Font awesome\5 Pro;
|
||||
font-weight: 900;
|
||||
margin-bottom: 0;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
._left,
|
||||
._right {
|
||||
top: 50%;
|
||||
z-index: 1000;
|
||||
position: absolute;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
transform: translate(0, -50%);
|
||||
cursor: pointer;
|
||||
display: block;
|
||||
}
|
||||
|
||||
._right {
|
||||
right: 2%;
|
||||
}
|
||||
|
||||
._left {
|
||||
left: 2%;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,77 @@
|
||||
<div class="login-register-block np-hidden-mobile">
|
||||
{% if current_person.signed_in? %}
|
||||
<div class="welcome-block">
|
||||
<p class="welcome-block-header">Welcome {{current_person.first_name}}!</p>
|
||||
|
||||
</div>
|
||||
{% else %}
|
||||
<div class="login-block">
|
||||
<p class="block-header">Login</p>
|
||||
<form class="np-form np-box-content homepage-login-form" action="{% route login %}" method="post" novalidate>
|
||||
{% form_authenticity_token %}
|
||||
<div class="np-form-field">
|
||||
<label class="np-input-label" for="learner_email">
|
||||
{% t shared.email_address %}
|
||||
</label>
|
||||
<input
|
||||
class="np-input"
|
||||
autofocus="autofocus"
|
||||
type="email"
|
||||
name="learner[email]"
|
||||
id="learner_email"
|
||||
>
|
||||
</div>
|
||||
<div class="np-form-field">
|
||||
<label class="np-input-label" for="learner_password">
|
||||
{% t shared.password %}
|
||||
</label>
|
||||
<input
|
||||
class="np-input"
|
||||
type="password"
|
||||
name="learner[password]"
|
||||
id="learner_password"
|
||||
>
|
||||
</div>
|
||||
<button type="submit" class="np-button np-form-action">
|
||||
{% t shared.sign_in %}
|
||||
</button>
|
||||
<a class="np-form-link np-button-color" href="{% route forgot_password_new %}">
|
||||
Forgot Password
|
||||
</a>
|
||||
</form>
|
||||
</div>
|
||||
<hr style="margin-bottom:32px" />
|
||||
<div class="register-block">
|
||||
<p class="block-header">Register</p>
|
||||
<p class="register-block-subhead">If this is your first time visiting, please complete your registration</p>
|
||||
<a href="{% route sign_up %}" class="np-button register-btn">Register</a>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
|
||||
.login-register-block {
|
||||
background: #f3f3f3;
|
||||
padding: 32px;
|
||||
color: #212121;
|
||||
display: block;
|
||||
margin-bottom: 32px;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.login-register-block .np-input {
|
||||
background:#fff;
|
||||
}
|
||||
|
||||
.homepage-login-form {
|
||||
width:auto;
|
||||
margin-bottom:32px;
|
||||
display:block;
|
||||
}
|
||||
|
||||
.register-btn {
|
||||
color:#fff!important;
|
||||
}
|
||||
|
||||
</style>
|
||||
@ -0,0 +1,43 @@
|
||||
{% if learning_path.enrolled? %}
|
||||
<div class="np-top-cta-progress-content">
|
||||
<div class="np-top-cta-progress-title np-text-title">
|
||||
{% t .progress %}
|
||||
</div>
|
||||
<div class="np-progress-bar-container" style='border-radius: 40px;'>
|
||||
<div
|
||||
style="width: {{ learning_path.progress }}%; border-radius: 40px;"
|
||||
class="np-button-background-color np-card-progress-bar">
|
||||
</div>
|
||||
</div>
|
||||
<div class="np-top-cta-progress-text
|
||||
{% if learning_path.completed? %} np-color-success {% else %} np-button-color {% endif %}
|
||||
"
|
||||
style='color:#006161'>
|
||||
{% t shared.progress, count: learning_path.progress %}
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<a
|
||||
class="np-top-button np-button-font-color np-button np-button-big"
|
||||
style='border-radius: 40px;'
|
||||
{% if learning_path.enrolled? %}
|
||||
{% if learning_path.current_item.course? %}
|
||||
href="{% route learning_path_course, id: learning_path.current_item.id, learning_path_id: learning_path.id %}"
|
||||
{% elsif learning_path.current_item.training_event? %}
|
||||
href="{% route training_session, id: learning_path.current_item.id %}"
|
||||
{% endif %}
|
||||
{% else %}
|
||||
href="{% route learning_path_enrollment, code: learning_path.enrollment_code %}"
|
||||
{% endif %}
|
||||
>
|
||||
{% if learning_path.enrolled? == false %}
|
||||
{% t shared.enroll %}
|
||||
{% elsif learning_path.started? == false %}
|
||||
{% t shared.learning_path.start %}
|
||||
{% elsif learning_path.completed? %}
|
||||
{% t shared.learning_path.view %}
|
||||
{% else %}
|
||||
{% t shared.continue %}
|
||||
{% endif %}
|
||||
</a>
|
||||
@ -0,0 +1,26 @@
|
||||
<div class="np-learning-paths-resources">
|
||||
{% if items.any? %}
|
||||
{% for learning_path in items %}
|
||||
{% include "cards_learning_path" with learning_path %}
|
||||
{% endfor %}
|
||||
{% else %}
|
||||
<div class="np-learning-paths-resources-container">
|
||||
<div class="np-zero-state-text">
|
||||
You have not yet accessed any programs.
|
||||
</div>
|
||||
{% comment %} <img class="np-zero-state-learning-paths" alt="{% t .empty %}" /> {% endcomment %}
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.np-learning-paths-resources-container {
|
||||
text-align: left;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.np-learning-paths-resources {
|
||||
border-bottom: 1px solid #ddd;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,23 @@
|
||||
<div class="np-dashboard-resources">
|
||||
{% if training_events.enrolled.any? %}
|
||||
{% for training_event in training_events.enrolled %}
|
||||
{% include "cards_training_event" with training_event %}
|
||||
{% endfor %}
|
||||
{% else %}
|
||||
<div class="np-dashboard-resources-container">
|
||||
<div class="np-zero-state-text">
|
||||
You don't have any saved events. Click <a href="/app/training_events">here</a> to view all upcoming events.
|
||||
</div>
|
||||
<img
|
||||
class="np-zero-state-training-events"
|
||||
alt="{% t .empty %}"
|
||||
/>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.np-dashboard-resources .np-card-container {
|
||||
background: #f3f3f3;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,9 @@
|
||||
<div class="np-dashboard-resources-container">
|
||||
<div class="np-zero-state-text">
|
||||
There are currently no upcoming events. Please check back later.
|
||||
</div>
|
||||
<img
|
||||
class="np-zero-state-training-events"
|
||||
alt="{% t .empty %}"
|
||||
/>
|
||||
</div>
|
||||
@ -0,0 +1,57 @@
|
||||
{% if training_session.approved? %}
|
||||
<div class="np-training-session-cta-note">
|
||||
<i class="far fa-check np-training-session-icon"></i>
|
||||
{% comment %} {% t .registered %} {% endcomment %}
|
||||
Event Saved!
|
||||
</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">
|
||||
{% comment %} {% t .unregister %} {% endcomment %}
|
||||
Remove Event
|
||||
</button>
|
||||
{% else %}
|
||||
<button type="submit" class="np-top-button np-button-font-color np-button np-button-big">
|
||||
{% comment %} {% t .unregister %} {% endcomment %}
|
||||
Remove Event
|
||||
</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">
|
||||
{% comment %} {% t .register %} {% endcomment %}
|
||||
Save Event
|
||||
</button>
|
||||
{% endif %}
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
@ -0,0 +1,40 @@
|
||||
<div class="np-resource-header np-resource-header-card np-card-padding-large">
|
||||
{% include "training_session_header" %}
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-xs-12 col-sm-7">
|
||||
<div class="np-card-container">
|
||||
<div class="row">
|
||||
<div class="col-xs-12 col-sm-7">
|
||||
{% include "training_session_details" %}
|
||||
</div>
|
||||
<div class="col-xs-12 col-sm-5">
|
||||
{% include "training_session_cta" %}
|
||||
</div>
|
||||
</div>
|
||||
<div class="np-card-padding-large">
|
||||
<div class="np-card-content-divider">
|
||||
{% include "training_session_description" %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xs-12 col-sm-5 np-grid-spacing">
|
||||
<div class="np-training-session-sessions-title">
|
||||
{% t shared.more_sessions %}
|
||||
</div>
|
||||
{% if training_event.sessions.size > 1 %}
|
||||
{% include "training_session_more_sessions" %}
|
||||
{% else %}
|
||||
<div class="np-training-session-zero-state">
|
||||
<img
|
||||
alt="{% t .empty %}"
|
||||
class="np-zero-state-training-sessions"
|
||||
/>
|
||||
<div class="np-training-session-zero-state-text">
|
||||
{% t .empty %}
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
@ -0,0 +1,32 @@
|
||||
<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"></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">
|
||||
{% comment %} <i class="fal fa-map-marker-alt np-button-color np-training-session-icon"></i> {% endcomment %}
|
||||
<div class="np-training-session-location-desc">Register here:</div>
|
||||
<a href="{{ training_session.session_url }}" class="np-button-color" target="_blank" >
|
||||
{{ training_session.session_url }}
|
||||
</a>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.np-training-session-location-desc {
|
||||
font-weight:700;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,168 @@
|
||||
|
||||
<div class="videos-header">Video Spotlight</div>
|
||||
<div class="main-slider homepage-video-carousel" id="main-slider">
|
||||
{% comment %} <div class="video-slide">
|
||||
<div class="carousel-slide-trigger">
|
||||
<div class="thumbnail-wrapper">
|
||||
<video width="320" height="240" controls>
|
||||
<source src="https://s3.amazonaws.com/static.northpass.com/J%26J/video-embed-test_delete_later.mp4" type="video/mp4">
|
||||
Your browser does not support the video tag.
|
||||
</video>
|
||||
</div>
|
||||
|
||||
<div class="img-caption">
|
||||
<div class="img-caption-title">Video Title 1</div>
|
||||
<div class="img-caption-description">Nulla quis lorem ut libero malesuada feugiat. Proin eget tortor risus. Vivamus suscipit tortor eget felis porttitor volutpat. Pellentesque in ipsum id orci porta dapibus.</div>
|
||||
</div>
|
||||
</div>
|
||||
</div> {% endcomment %}
|
||||
{% comment %} <div class="video-slide">
|
||||
<div class="carousel-slide-trigger">
|
||||
<div class="thumbnail-wrapper">
|
||||
<video width="320" height="240" controls>
|
||||
<source src="https://s3.amazonaws.com/static.northpass.com/J%26J/video-embed-test_delete_later.mp4" type="video/mp4">
|
||||
Your browser does not support the video tag.
|
||||
</video>
|
||||
</div>
|
||||
<div class="img-caption">
|
||||
<div class="img-caption-title">Here is another video title</div>
|
||||
<div class="img-caption-description">Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus suscipit tortor eget felis porttitor volutpat. Quisque velit nisi, pretium ut lacinia in, elementum id enim.</div>
|
||||
</div>
|
||||
</div>
|
||||
</div> {% endcomment %}
|
||||
</div>
|
||||
|
||||
<script>
|
||||
|
||||
$(document).ready(function() {
|
||||
|
||||
const videoInfo = {{current_school.properties.video_carousel}}
|
||||
|
||||
if (videoInfo.length > 0) {
|
||||
$('#main-slider').slick({
|
||||
slidesToShow: 1,
|
||||
slidesToScroll: 1,
|
||||
//autoplay: true,
|
||||
autoplaySpeed: 3000,
|
||||
dots: true,
|
||||
infinite: true,
|
||||
arrows: false,
|
||||
gutter: 8,
|
||||
});
|
||||
|
||||
videoInfo.forEach(function(video) {
|
||||
|
||||
const videoSlide = $(`<div class='video-slide'><div class='carousel-slide-trigger'><div class='thumbnail-wrapper'><video width='320' height='240' controls><source src='${video.video_url}' type='video/mp4'>Your browser does not support the video tag.</video></div><div class="img-caption"><div class="img-caption-title">${video.video_title}</div><div class="img-caption-description">${video.video_description}</div></div></div></div>`)
|
||||
|
||||
$('#main-slider').slick("slickAdd", videoSlide);
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
.videos-header {
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
margin-bottom:16px;
|
||||
}
|
||||
|
||||
.homepage-video-carousel {
|
||||
margin-bottom:44px;
|
||||
}
|
||||
|
||||
.thumbnail-wrapper {
|
||||
position:relative;
|
||||
width: 100%;
|
||||
/*height: 100%;*/
|
||||
}
|
||||
|
||||
.video-thumbnail {
|
||||
background-size: cover;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
left: 0;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
background-position: center;
|
||||
}
|
||||
|
||||
.img-caption {
|
||||
background: #f3f3f3;
|
||||
color: #212121;
|
||||
padding: 16px;
|
||||
margin-top: -6px;
|
||||
flex:1;
|
||||
}
|
||||
|
||||
.img-caption-title {
|
||||
font-size: 20px;
|
||||
font-weight: 700;
|
||||
line-height: 26px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.carousel-slide-trigger {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
|
||||
.slick-dots {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin: 24px 0 0;
|
||||
padding: 0;
|
||||
list-style-type: none;
|
||||
}
|
||||
|
||||
.slick-dots li {
|
||||
margin: 0 0.25rem;
|
||||
}
|
||||
|
||||
.slick-dots button {
|
||||
display: block;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
padding: 0;
|
||||
border: none;
|
||||
border-radius: 100%;
|
||||
background-color: transparent;
|
||||
border: 1px solid #009999;
|
||||
text-indent: -9999px;
|
||||
}
|
||||
|
||||
.slick-dots li.slick-active button {
|
||||
background-color: #009999;
|
||||
}
|
||||
|
||||
video {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
@media (min-width:768px) {
|
||||
.videos-header {
|
||||
font-size: 20px;
|
||||
margin-bottom:24px;
|
||||
}
|
||||
|
||||
.img-caption {
|
||||
padding: 16px 32px;
|
||||
}
|
||||
|
||||
.img-caption-title {
|
||||
font-size: 22px;
|
||||
line-height: 28px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
174
Custom_Templates/.churned_customers/JJSV/catalog.html.liquid
Normal file
174
Custom_Templates/.churned_customers/JJSV/catalog.html.liquid
Normal file
@ -0,0 +1,174 @@
|
||||
{% assign catalog_courses = courses.in_catalog %}
|
||||
|
||||
{% include "header" %}
|
||||
|
||||
<div class="row subpage-intro">
|
||||
<div class="color-layer"></div>
|
||||
<div class="col-xs-12 col-sm-9 col-md-6" style="margin:auto;">
|
||||
<div class="subpage-intro-content-wrapper">
|
||||
<div class="subpage-intro-title">{{catalog.headline}}</div>
|
||||
<div class="subpage-intro-divider"></div>
|
||||
<div class="subpage-intro-subtitle">{{catalog.subheadline}}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content-disclaimer np-subpage-container">The content you access on this website is intended for Healthcare Professionals practicing in the U.S. and is consistent with U.S. labeling.</div>
|
||||
<main class="np-main np-catalog np-subpage-container np-max-width">
|
||||
<a class="mobile-filter-link np-hidden-desktop">Filter by Topic <i class="fas fa-filter"></i></a>
|
||||
<div class="np-hidden-desktop mobile-filter-sidebar">
|
||||
<i class="fal fa-times"></i>
|
||||
{% include 'category_filter_sidebar', catalog_courses: catalog_courses %}
|
||||
</div>
|
||||
<div class="row np-flex-center">
|
||||
<div class="col-xs-12 col-sm-3 np-hidden-mobile">
|
||||
{% include 'category_filter_sidebar', catalog_courses: catalog_courses %}
|
||||
</div>
|
||||
|
||||
<div class="col-xs-12 col-sm-9">
|
||||
{% include "courses_catalog" %}
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
{% include "footer" %}
|
||||
|
||||
<style>
|
||||
.subpage-intro {
|
||||
position:relative;
|
||||
background: url(https://s3.amazonaws.com/static.northpass.com/J%26J/homepage_banner_all_content.jpg);
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
padding: 64px 16px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.color-layer {
|
||||
background-color: rgba(51, 51, 51, 0.5);
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.subpage-intro-content-wrapper {
|
||||
text-align:center;
|
||||
color: #fff;
|
||||
position: relative;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.subpage-intro-title {
|
||||
font-size: 32px;
|
||||
line-height: normal;
|
||||
text-transform: uppercase;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
.subpage-intro-divider {
|
||||
height: 5px;
|
||||
margin: 16px auto;
|
||||
width:100px;
|
||||
background-color:#cc0033;
|
||||
}
|
||||
|
||||
.np-catalog {
|
||||
padding-top:80px;
|
||||
}
|
||||
|
||||
.category-hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.mobile-filter-link {
|
||||
margin-bottom: 32px;
|
||||
display: inline-block;
|
||||
text-decoration: none;
|
||||
color: #009999;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.mobile-filter-sidebar {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
background-color: #fff;
|
||||
height: 100vh;
|
||||
top: 0;
|
||||
padding: 60px 32px;
|
||||
width: 100%;
|
||||
max-width: 300px;
|
||||
transform: translateX(-300px);
|
||||
transition: transform 0.3s;
|
||||
z-index: 20;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
|
||||
.mobile-filter-sidebar.sidebar-open {
|
||||
transform: translateX(0);
|
||||
}
|
||||
|
||||
.mobile-filter-sidebar i.fa-times {
|
||||
position: relative;
|
||||
float: right;
|
||||
top: -30px;
|
||||
font-size: 25px;
|
||||
}
|
||||
|
||||
@media (min-width:768px) {
|
||||
.subpage-intro {
|
||||
min-height:400px;
|
||||
}
|
||||
.subpage-intro-content-wrapper {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.subpage-intro-title {
|
||||
font-size: 50px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
/* convert values to same format */
|
||||
$('[data-category]').each(function(){
|
||||
$(this).attr('data-category', $(this).attr('data-category').replaceAll(' ', '').replaceAll('+', ' ').toLowerCase());
|
||||
});
|
||||
|
||||
/* add action to filters on click */
|
||||
$('.filter-element-category:not(.has-sub-categories)').click(function(){
|
||||
filterCatalogCourses($(this))
|
||||
});
|
||||
|
||||
$('.filter-item-sub-category').click(function(){
|
||||
filterCatalogCourses($(this))
|
||||
});
|
||||
|
||||
$('.has-sub-categories .top-level-filter').click(function() {
|
||||
$(this).parent().toggleClass('filter-open')
|
||||
})
|
||||
|
||||
function filterCatalogCourses(elmnt) {
|
||||
const selectedCategory = elmnt.data('category')
|
||||
|
||||
$('.category-selected').removeClass('category-selected');
|
||||
elmnt.addClass('category-selected');
|
||||
|
||||
if (selectedCategory == 'all') {
|
||||
$('.catalog-card').removeClass('category-hidden');
|
||||
} else {
|
||||
$('.catalog-card').removeClass('category-hidden');
|
||||
/* hides all cards without selected category if the 'All' wasn't selected */
|
||||
$('.catalog-card').each(function(index, card) {
|
||||
$(`.catalog-card:not([data-category*="${selectedCategory}"])`).addClass('category-hidden')
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
$(".mobile-filter-link").click(function() {
|
||||
$(".mobile-filter-sidebar").addClass("sidebar-open")
|
||||
})
|
||||
|
||||
$(".mobile-filter-sidebar i.fa-times").click(function() {
|
||||
$(".mobile-filter-sidebar").removeClass("sidebar-open")
|
||||
})
|
||||
</script>
|
||||
79
Custom_Templates/.churned_customers/JJSV/course.html.liquid
Normal file
79
Custom_Templates/.churned_customers/JJSV/course.html.liquid
Normal file
@ -0,0 +1,79 @@
|
||||
{% assign is_skipped_category = false %}
|
||||
|
||||
{% for cat in course.categories %}
|
||||
{% assign cat_name = cat.name | downcase %}
|
||||
{% if cat_name contains "podcast" or cat_name contains "document" or cat_name contains "publication" %}
|
||||
{% assign is_skipped_category = true %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
|
||||
{% if course.properties.skip_course_cover_page or is_skipped_category %}
|
||||
{% if course.enrolled? %}
|
||||
<script>window.location.replace('{% route course_viewer, course_id: course.id, learning_path_id: params.learning_path_id %}')</script>
|
||||
{% else %}
|
||||
<script>window.location.replace('{% route course_enrollment, code: course.enrollment_code %}')</script>
|
||||
{% endif %}
|
||||
|
||||
{% else %}
|
||||
|
||||
{% include "header" %}
|
||||
|
||||
<main class="np-main np-max-width np-page-container">
|
||||
<div class="np-hidden-mobile" id="course-desktop">
|
||||
{% include "course_desktop_view" %}
|
||||
</div>
|
||||
<div class="np-hidden-desktop" id="course-mobile">
|
||||
{% include "course_mobile_view" %}
|
||||
</div>
|
||||
</main>
|
||||
{% include "footer" %}
|
||||
|
||||
<style>
|
||||
.course-detail-rating-stars svg > * {
|
||||
fill: white;
|
||||
}
|
||||
.course-detail-rating-stars svg {
|
||||
scale: 1.2;
|
||||
margin: 0 3px;
|
||||
}
|
||||
.course-detail-rating-stars {
|
||||
margin-bottom: 9px;
|
||||
}
|
||||
.np-course-banner-image {
|
||||
border-radius: 8px;
|
||||
}
|
||||
.np-course-banner-overlay {
|
||||
border-radius: 8px;
|
||||
}
|
||||
.np-top-cta {
|
||||
border-radius: 8px;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
#course-desktop .np-course-outline .np-course-outline-title {
|
||||
color:#cc0033;
|
||||
}
|
||||
|
||||
|
||||
@media screen and (max-width: 1170px) {
|
||||
.course-detail-rating-stars {
|
||||
margin-bottom: 5px;
|
||||
margin-left: -2px;
|
||||
}
|
||||
.course-detail-rating-stars svg {
|
||||
scale: 1;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 768px) {
|
||||
.course-detail-rating-stars {
|
||||
margin-bottom: 3px;
|
||||
margin-left: -1px;
|
||||
}
|
||||
.course-detail-rating-stars svg {
|
||||
scale: 0.8;
|
||||
margin: 0 -1px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
{% endif %}
|
||||
104
Custom_Templates/.churned_customers/JJSV/dashboard.html.liquid
Normal file
104
Custom_Templates/.churned_customers/JJSV/dashboard.html.liquid
Normal file
@ -0,0 +1,104 @@
|
||||
{% include "header" %}
|
||||
{% include "course_version_outdated_alert", courses: courses.enrolled %}
|
||||
{% comment %} {% include "sub_navigation" %} {% endcomment %}
|
||||
|
||||
<div class="row subpage-intro">
|
||||
<div class="color-layer"></div>
|
||||
<div class="col-xs-12 col-sm-9 col-md-6" style="margin:auto;">
|
||||
<div class="subpage-intro-content-wrapper">
|
||||
<div class="subpage-intro-title">My Topics</div>
|
||||
<div class="subpage-intro-divider"></div>
|
||||
<div class="subpage-intro-subtitle">Explore content curated for you based on your role and specialty. Looking for more? Access our Content Library to see all available topics.</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="content-disclaimer np-subpage-container">The content you access on this website is intended for Healthcare Professionals practicing in the U.S. and is consistent with U.S. labeling.</div>
|
||||
<main class="np-main np-dashboard np-subpage-container np-max-width">
|
||||
<div class="row">
|
||||
<div class="col-xs-12 col-lg-8">
|
||||
{% if features.learning_paths? %}
|
||||
<div class="np-dashboard-resources-title">
|
||||
Programs
|
||||
</div>
|
||||
{% include "learning_paths_index", items: learning_paths.enrolled %}
|
||||
{% endif %}
|
||||
<div class="np-dashboard-resources-title">
|
||||
Recommended Topics
|
||||
</div>
|
||||
{% include "courses_index", class: "col-xs-12 col-md-6 col-lg-12" %}
|
||||
</div>
|
||||
{% if features.training_events? %}
|
||||
{% if training_events.enrolled.any? %}
|
||||
<div class="np-grid-spacing col-xs-12 col-lg-4">
|
||||
<div class="np-dashboard-resources-title">
|
||||
Saved Events
|
||||
</div>
|
||||
{% include "training_events_dashboard" %}
|
||||
</div>
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
</div>
|
||||
</main>
|
||||
{% include "footer" %}
|
||||
|
||||
<style>
|
||||
.subpage-intro {
|
||||
position:relative;
|
||||
background: url(https://s3.amazonaws.com/static.northpass.com/J%26J/homepage_banner_my_topics.png);
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
padding: 64px 16px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.color-layer {
|
||||
background-color: rgba(51, 51, 51, 0.7);
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.subpage-intro-content-wrapper {
|
||||
text-align:center;
|
||||
color: #fff;
|
||||
position: relative;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.subpage-intro-title {
|
||||
font-size: 32px;
|
||||
line-height: normal;
|
||||
text-transform: uppercase;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
.subpage-intro-divider {
|
||||
height: 5px;
|
||||
margin: 16px auto;
|
||||
width:100px;
|
||||
background-color:#cc0033;
|
||||
}
|
||||
|
||||
.np-dashboard-resources-title {
|
||||
font-size:16px;
|
||||
line-height:18px;
|
||||
color:#212121;
|
||||
}
|
||||
|
||||
@media (min-width:768px) {
|
||||
.subpage-intro {
|
||||
min-height:400px;
|
||||
}
|
||||
.subpage-intro-content-wrapper {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.subpage-intro-title {
|
||||
font-size: 50px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
295
Custom_Templates/.churned_customers/JJSV/homepage.html.liquid
Normal file
295
Custom_Templates/.churned_customers/JJSV/homepage.html.liquid
Normal file
@ -0,0 +1,295 @@
|
||||
{% include "header" %}
|
||||
{% comment %} {% include "course_version_outdated_alert", courses: courses.featured %} {% endcomment %}
|
||||
|
||||
|
||||
<main class="np-main np-homepage">
|
||||
{% include "homepage_hero_carousel" %}
|
||||
|
||||
<div class="np-subpage-container">
|
||||
<div class="row">
|
||||
<div class="col-12 col-lg-6 col-xl-7">
|
||||
<div class="homepage-intro">
|
||||
<div class="homepage-intro-headline np-header-font-color">
|
||||
{{ homepage.featured_courses_headline }}
|
||||
</div>
|
||||
<div class="homepage-intro-subheadline">
|
||||
{{ homepage.featured_courses_subheadline }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-xs-12">
|
||||
{% include "video_carousel" %}
|
||||
</div>
|
||||
</div>
|
||||
<div class="row homepage-cards">
|
||||
{% if current_person.signed_in? %}
|
||||
<div class="col-xs-12 col-sm-6">
|
||||
<a class="np-card" href="/app/dashboard">
|
||||
<div class="category-card-container">
|
||||
<img
|
||||
class="np-categories-image"
|
||||
alt="Podcasts"
|
||||
src="https://s3.amazonaws.com/static.northpass.com/J%26J/homepage_card_my_topics.png"
|
||||
>
|
||||
</div>
|
||||
<div class="np-categories-content np-categories-content-vertical np-card-padding course-card-content" style='padding: 1.5rem;'>
|
||||
<p class="homepage-card-title">My Topics</p>
|
||||
<p class="homepage-card-desc">Access tailored content based on your specialty.</p>
|
||||
<div class="arrow-icon"><i class="fal fa-long-arrow-right"></i></div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
{% else %}
|
||||
<div class="col-xs-12 col-sm-6">
|
||||
<div class="np-card">
|
||||
<div class="category-card-container">
|
||||
<img
|
||||
class="np-categories-image"
|
||||
alt="Podcasts"
|
||||
src="https://s3.amazonaws.com/static.northpass.com/J%26J/homepage_card_my_topics.png"
|
||||
>
|
||||
</div>
|
||||
<div class="np-categories-content np-categories-content-vertical np-card-padding course-card-content" style='padding: 1.5rem;'>
|
||||
<p class="homepage-card-title">My Topics</p>
|
||||
<p class="homepage-card-desc">Access tailored content based on your specialty.</p>
|
||||
<div class="arrow-icon" style="visibility:hidden;"><i class="fal fa-long-arrow-right"></i></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% if current_person.signed_in? %}
|
||||
<div class="col-xs-12 col-sm-6">
|
||||
<a class="np-card" href="/app/training_events">
|
||||
<div class="category-card-container">
|
||||
<img
|
||||
class="np-categories-image"
|
||||
src="https://s3.amazonaws.com/static.northpass.com/J%26J/homepage_card_professional_events.jpg"
|
||||
>
|
||||
</div>
|
||||
<div class="np-categories-content np-categories-content-vertical np-card-padding course-card-content" style='padding: 1.5rem;'>
|
||||
<p class="homepage-card-title">Professional Events</p>
|
||||
<p class="homepage-card-desc">We welcome you to join us at Professional Education opportunities across
|
||||
the US and near you.</p>
|
||||
<div class="arrow-icon"><i class="fal fa-long-arrow-right"></i></div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
{% else %}
|
||||
<div class="col-xs-12 col-sm-6">
|
||||
<div class="np-card">
|
||||
<div class="category-card-container">
|
||||
<img
|
||||
class="np-categories-image"
|
||||
src="https://s3.amazonaws.com/static.northpass.com/J%26J/homepage_card_professional_events.jpg"
|
||||
>
|
||||
</div>
|
||||
<div class="np-categories-content np-categories-content-vertical np-card-padding course-card-content" style='padding: 1.5rem;'>
|
||||
<p class="homepage-card-title">Professional Events</p>
|
||||
<p class="homepage-card-desc">We welcome you to join us at Professional Education opportunities across
|
||||
the US and near you.</p>
|
||||
<div class="arrow-icon" style="visibility:hidden;"><i class="fal fa-long-arrow-right"></i></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<div class="col-xs-12 col-sm-6">
|
||||
<a class="np-card" href="/app/product-education">
|
||||
<div class="category-card-container">
|
||||
<img
|
||||
class="np-categories-image"
|
||||
alt="Podcasts"
|
||||
src="https://s3.amazonaws.com/static.northpass.com/J%26J/homepage_card_product_education.png"
|
||||
>
|
||||
</div>
|
||||
<div class="np-categories-content np-categories-content-vertical np-card-padding course-card-content" style='padding: 1.5rem;'>
|
||||
<p class="homepage-card-title">Product Education</p>
|
||||
<p class="homepage-card-desc">Videos, webinars, and education programs to improve your knowledge of
|
||||
Johnson and Johnson technologies.</p>
|
||||
<div class="arrow-icon"><i class="fal fa-long-arrow-right"></i></div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<div class="col-xs-12 col-sm-6">
|
||||
<a class="np-card" href="/app/catalog">
|
||||
<div class="category-card-container">
|
||||
<img
|
||||
class="np-categories-image"
|
||||
alt="Podcasts"
|
||||
src="https://s3.amazonaws.com/static.northpass.com/J%26J/homepage_card_all_content.jpg"
|
||||
>
|
||||
</div>
|
||||
<div class="np-categories-content np-categories-content-vertical np-card-padding course-card-content" style='padding: 1.5rem;'>
|
||||
<p class="homepage-card-title">Content Library</p>
|
||||
<p class="homepage-card-desc">Discover all available topics</p>
|
||||
<div class="arrow-icon"><i class="fal fa-long-arrow-right"></i></div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xl-1 offset-col"></div>
|
||||
<div class="col-12 col-lg-6 col-xl-4">
|
||||
{% include "homepage_login_registration" %}
|
||||
<a href="mailto:JJSVEducationDigitalPlatformSupport@its.jnj.com" class="contact-block" target="_blank">
|
||||
<p class="sidebar-header">Contact Us </p>
|
||||
<div class="sidebar-desc">Click here to contact us for more information <i class=" arrow-icon fal fa-long-arrow-right"></i></div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
{% include "footer" %}
|
||||
|
||||
<style>
|
||||
|
||||
.np-homepage .np-subpage-container {
|
||||
padding: 40px 24px 0;
|
||||
max-width: 1440px;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.offset-col {
|
||||
display:none;
|
||||
}
|
||||
|
||||
.homepage-intro {
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
|
||||
.homepage-intro-headline {
|
||||
font-size: 28px;
|
||||
line-height:36px;
|
||||
font-weight: bold;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.homepage-intro-subheadline {
|
||||
font-size: 16px;
|
||||
line-height: 24px;
|
||||
}
|
||||
|
||||
.contact-block,
|
||||
.contact-block:hover {
|
||||
background: #f3f3f3;
|
||||
padding: 32px;
|
||||
color: #212121;
|
||||
display: block;
|
||||
margin-bottom: 32px;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.contact-block .contact-block-header {
|
||||
font-size: 20px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.contact-block .arrow-icon {
|
||||
margin-top: 0!important;
|
||||
position: relative;
|
||||
top: 5px;
|
||||
left: 5px;
|
||||
color: #009999;
|
||||
font-size: 32px;
|
||||
text-align:right;
|
||||
}
|
||||
|
||||
@media (min-width:768px) {
|
||||
.np-homepage .np-subpage-container {
|
||||
padding: 80px 24px 0;
|
||||
}
|
||||
|
||||
.homepage-intro-headline {
|
||||
font-size: 36px;
|
||||
line-height:42px;
|
||||
font-weight: bold;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.homepage-intro-subheadline {
|
||||
font-size: 18px;
|
||||
line-height: 26px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width:1200px) {
|
||||
.offset-col {
|
||||
display:flex;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
.sidebar-header,
|
||||
.welcome-block-header,
|
||||
.block-header {
|
||||
font-size: 20px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.homepage-cards .np-card {
|
||||
padding:0 0 32px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
text-decoration:none;
|
||||
}
|
||||
|
||||
.category-card-container {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
height: 250px;
|
||||
}
|
||||
|
||||
.category-card-container img {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
transform: translate(-50%, -50%);
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.np-categories-content {
|
||||
color: #212121;
|
||||
background: #f3f3f3;
|
||||
font-size: 18px;
|
||||
flex:2;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.np-categories-content p {
|
||||
margin:0;
|
||||
}
|
||||
|
||||
.np-categories-content .arrow-icon {
|
||||
text-align:right;
|
||||
margin-top:12px;
|
||||
}
|
||||
|
||||
.np-categories-content .arrow-icon i {
|
||||
color: #009999;
|
||||
font-size: 32px;
|
||||
}
|
||||
|
||||
p.homepage-card-title {
|
||||
color: #212121;
|
||||
font-size: 20px;
|
||||
font-weight: 700;
|
||||
margin-bottom: 12px!important;
|
||||
}
|
||||
|
||||
p.homepage-card-desc {
|
||||
line-height:normal;
|
||||
font-size:16px;
|
||||
flex:1;
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
@ -0,0 +1,54 @@
|
||||
{% include "header" %}
|
||||
{% include "sub_navigation" %}
|
||||
<main class="np-main np-max-width np-page-container">
|
||||
<div class="np-hidden-mobile" id="learning-path-desktop">
|
||||
{% include "learning_path_desktop_view" %}
|
||||
</div>
|
||||
<div class="np-hidden-desktop" id="learning-path-mobile">
|
||||
{% include "learning_path_mobile_view" %}
|
||||
</div>
|
||||
</main>
|
||||
{% include "footer" %}
|
||||
|
||||
<style>
|
||||
.np-top-image, .np-learning-path-outline-course-image {
|
||||
border-radius: 8px;
|
||||
}
|
||||
@media only screen and (min-width: 768px) {
|
||||
.np-top-image, .np-learning-path-outline-course-image {
|
||||
border-radius: 8px 8px 0 0;
|
||||
}
|
||||
body {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
grid-template-areas: "header" "nav" "main" "footer" "powered";
|
||||
grid-template-rows: 120px 50px 1fr 160px 60px;
|
||||
}
|
||||
nav {
|
||||
grid-area: nav;
|
||||
margin-bottom: 17px;
|
||||
}
|
||||
header {
|
||||
grid-area: header;
|
||||
}
|
||||
main {
|
||||
grid-area: main;
|
||||
margin-top: 0 !important;
|
||||
}
|
||||
footer {
|
||||
grid-area: footer;
|
||||
}
|
||||
.np-powered-by {
|
||||
grid-area: powered;
|
||||
}
|
||||
}
|
||||
.np-top-cta {
|
||||
border-radius: 8px;
|
||||
}
|
||||
.np-card-container, .np-card-container-training-session {
|
||||
border-radius: 8px;
|
||||
}
|
||||
.np-card-content {
|
||||
border-radius: 8px;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,163 @@
|
||||
{% assign catalog_courses = courses.in_catalog %}
|
||||
|
||||
{% include "header" %}
|
||||
|
||||
<div class="row subpage-intro">
|
||||
<div class="color-layer"></div>
|
||||
<div class="col-xs-12 col-sm-9 col-md-6" style="margin:auto;">
|
||||
<div class="subpage-intro-content-wrapper">
|
||||
<div class="subpage-intro-title">{{custom_page.headline}}</div>
|
||||
<div class="subpage-intro-divider"></div>
|
||||
<div class="subpage-intro-subtitle">{{custom_page.subheadline}}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content-disclaimer np-subpage-container">The content you access on this website is intended for Healthcare Professionals practicing in the U.S. and is consistent with U.S. labeling.</div>
|
||||
|
||||
<main class="np-main np-catalog np-subpage-container np-max-width">
|
||||
<a class="mobile-filter-link np-hidden-desktop">Filter by Category <i class="fas fa-filter"></i></a>
|
||||
<div class="np-hidden-desktop mobile-filter-sidebar">
|
||||
<i class="fal fa-times"></i>
|
||||
{% include 'category_filter_sidebar_product_page', catalog_courses: catalog_courses %}
|
||||
</div>
|
||||
<div class="row np-flex-center">
|
||||
<div class="col-xs-12 col-sm-3 np-hidden-mobile">
|
||||
{% include 'category_filter_sidebar_product_page', catalog_courses: catalog_courses %}
|
||||
</div>
|
||||
|
||||
<div class="col-xs-12 col-sm-9">
|
||||
{% include "courses_catalog_product_education", catalog_courses: catalog_courses %}
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
{% include "footer" %}
|
||||
|
||||
<style>
|
||||
.subpage-intro {
|
||||
position:relative;
|
||||
background: url(https://s3.amazonaws.com/static.northpass.com/J%26J/homepage_banner_product_education.png);
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
padding: 64px 16px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.color-layer {
|
||||
background-color: rgba(51, 51, 51, 0.7);
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.subpage-intro-content-wrapper {
|
||||
text-align:center;
|
||||
color: #fff;
|
||||
position: relative;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.subpage-intro-title {
|
||||
font-size: 32px;
|
||||
line-height: normal;
|
||||
text-transform: uppercase;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
.subpage-intro-divider {
|
||||
height: 5px;
|
||||
margin: 16px auto;
|
||||
width:100px;
|
||||
background-color:#cc0033;
|
||||
}
|
||||
|
||||
.category-hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.mobile-filter-link {
|
||||
margin-bottom: 32px;
|
||||
display: inline-block;
|
||||
text-decoration: none;
|
||||
color: #009999;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.mobile-filter-sidebar {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
background-color: #fff;
|
||||
height: 100vh;
|
||||
top: 0;
|
||||
padding: 60px 32px;
|
||||
width: 100%;
|
||||
max-width: 300px;
|
||||
transform: translateX(-300px);
|
||||
transition: transform 0.3s;
|
||||
z-index: 20;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
|
||||
.mobile-filter-sidebar.sidebar-open {
|
||||
transform: translateX(0);
|
||||
}
|
||||
|
||||
.mobile-filter-sidebar i.fa-times {
|
||||
position: relative;
|
||||
float: right;
|
||||
top: -30px;
|
||||
font-size: 25px;
|
||||
}
|
||||
|
||||
@media (min-width:768px) {
|
||||
.subpage-intro {
|
||||
min-height:400px;
|
||||
}
|
||||
.subpage-intro-content-wrapper {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.subpage-intro-title {
|
||||
font-size: 50px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
/* convert values to same format */
|
||||
$('[data-category]').each(function(){
|
||||
$(this).attr('data-category', $(this).attr('data-category').replaceAll(' ', '').replaceAll('+', ' ').toLowerCase());
|
||||
});
|
||||
|
||||
/* add action to filters on click */
|
||||
$('.filter-element-category').click(function(){
|
||||
filterCatalogCourses($(this))
|
||||
});
|
||||
|
||||
function filterCatalogCourses(elmnt) {
|
||||
const selectedCategory = elmnt.data('category')
|
||||
|
||||
$('.category-selected').removeClass('category-selected');
|
||||
elmnt.addClass('category-selected');
|
||||
|
||||
if (selectedCategory == 'all') {
|
||||
$('.catalog-card').removeClass('category-hidden');
|
||||
} else {
|
||||
$('.catalog-card').removeClass('category-hidden');
|
||||
/* hides all cards without selected category if the 'All' wasn't selected */
|
||||
$('.catalog-card').each(function(index, card) {
|
||||
$(`.catalog-card:not([data-category*="${selectedCategory}"])`).addClass('category-hidden')
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
$(".mobile-filter-link").click(function() {
|
||||
$(".mobile-filter-sidebar").addClass("sidebar-open")
|
||||
})
|
||||
|
||||
$(".mobile-filter-sidebar i.fa-times").click(function() {
|
||||
$(".mobile-filter-sidebar").removeClass("sidebar-open")
|
||||
})
|
||||
</script>
|
||||
@ -0,0 +1,303 @@
|
||||
<main class="np-main np-box-container">
|
||||
<div class="np-box">
|
||||
{% include "header_minimal" %}
|
||||
<div class="np-box-content-container">
|
||||
<form class="np-form np-box-content" name="secondaryRegistrationForm" onsubmit(return false)>
|
||||
<div class="np-form-title"> Tell us more </div>
|
||||
<div class="form-description">Please provide the additional information below to tailor your experience on the Vision Excellence Institute. We will only use the information to share Professional Education Events happening in your area and to highlight content from the site related to your role and specialty under the My Topics section.</div>
|
||||
|
||||
<div class="form-disclaimer">All fields are required</div>
|
||||
<div class="np-form-field">
|
||||
<label class="np-input-label" for="company">
|
||||
Company / Practice Name*
|
||||
</label>
|
||||
<input
|
||||
class="np-input"
|
||||
autofocus="autofocus"
|
||||
type="text"
|
||||
name="company"
|
||||
id="company"
|
||||
required
|
||||
>
|
||||
</div>
|
||||
<input type="hidden" id="country" name="country" value="us">
|
||||
<div class="np-form-field">
|
||||
<label class="np-input-label" for="city">
|
||||
City*
|
||||
</label>
|
||||
<input
|
||||
class="np-input"
|
||||
type="text"
|
||||
name="city"
|
||||
id="city"
|
||||
required
|
||||
>
|
||||
</div>
|
||||
<div class="np-form-field">
|
||||
<label class="np-input-label" for="learner_state">
|
||||
State*
|
||||
</label>
|
||||
<select id="stateSelect">
|
||||
<option value="" selected>Select a state</option>
|
||||
<option value="Alabama">Alabama</option>
|
||||
<option value="Alaska">Alaska</option>
|
||||
<option value="Arizona">Arizona</option>
|
||||
<option value="Arkansas">Arkansas</option>
|
||||
<option value="California">California</option>
|
||||
<option value="Colorado">Colorado</option>
|
||||
<option value="Connecticut">Connecticut</option>
|
||||
<option value="Delaware">Delaware</option>
|
||||
<option value="District Of Columbia">District Of Columbia</option>
|
||||
<option value="Florida">Florida</option>
|
||||
<option value="Georgia">Georgia</option>
|
||||
<option value="Hawaii">Hawaii</option>
|
||||
<option value="Idaho">Idaho</option>
|
||||
<option value="Illinois">Illinois</option>
|
||||
<option value="Indiana">Indiana</option>
|
||||
<option value="Iowa">Iowa</option>
|
||||
<option value="Kansas">Kansas</option>
|
||||
<option value="Kentucky">Kentucky</option>
|
||||
<option value="Louisiana">Louisiana</option>
|
||||
<option value="Maine">Maine</option>
|
||||
<option value="Maryland">Maryland</option>
|
||||
<option value="Massachusetts">Massachusetts</option>
|
||||
<option value="Michigan">Michigan</option>
|
||||
<option value="Minnesota">Minnesota</option>
|
||||
<option value="Mississippi">Mississippi</option>
|
||||
<option value="Missouri">Missouri</option>
|
||||
<option value="Montana">Montana</option>
|
||||
<option value="Nebraska">Nebraska</option>
|
||||
<option value="Nevada">Nevada</option>
|
||||
<option value="New Hampshire">New Hampshire</option>
|
||||
<option value="New Jersey">New Jersey</option>
|
||||
<option value="New Mexico">New Mexico</option>
|
||||
<option value="New York">New York</option>
|
||||
<option value="North Carolina">North Carolina</option>
|
||||
<option value="North Dakota">North Dakota</option>
|
||||
<option value="Ohio">Ohio</option>
|
||||
<option value="Oklahoma">Oklahoma</option>
|
||||
<option value="Oregon">Oregon</option>
|
||||
<option value="Pennsylvania">Pennsylvania</option>
|
||||
<option value="Rhode Island">Rhode Island</option>
|
||||
<option value="South Carolina">South Carolina</option>
|
||||
<option value="South Dakota">South Dakota</option>
|
||||
<option value="Tennessee">Tennessee</option>
|
||||
<option value="Texas">Texas</option>
|
||||
<option value="Utah">Utah</option>
|
||||
<option value="Vermont">Vermont</option>
|
||||
<option value="Virginia">Virginia</option>
|
||||
<option value="Washington">Washington</option>
|
||||
<option value="West Virginia">West Virginia</option>
|
||||
<option value="Wisconsin">Wisconsin</option>
|
||||
<option value="Wyoming">Wyoming</option>
|
||||
</select>
|
||||
</div>
|
||||
{% comment %} Country is currently hard coded as United states to start. Eventually will add Canada and Latam (Latin America) {% endcomment %}
|
||||
<div class="np-form-field" style="display:none">
|
||||
<label class="np-input-label" for="country">
|
||||
Country*
|
||||
</label>
|
||||
<select id="countrySelect">
|
||||
{% comment %} <option value="">Select your Country</option> {% endcomment %}
|
||||
<option value="United States" selected>United States</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="np-form-field">
|
||||
<label class="np-input-label" for="learner_role">
|
||||
Role*
|
||||
</label>
|
||||
<select id="roleSelect">
|
||||
<option value="" selected>Select your role</option>
|
||||
<option value="Ophthalmologist">Ophthalmologist</option>
|
||||
<option value="Optometrist">Optometrist</option>
|
||||
<option value="Technician">Technician</option>
|
||||
<option value="Nurse">Nurse</option>
|
||||
<option value="Staff">Staff</option>
|
||||
<option value="JNJ Employee">JNJ Employee</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="np-form-field">
|
||||
<label class="np-input-label" for="learner_specialty">
|
||||
Primary Specialty*
|
||||
</label>
|
||||
<select id="specialtySelect">
|
||||
<option value="" selected>Select your primary specialty</option>
|
||||
<option value="Cataract">Cataract</option>
|
||||
<option value="General">General</option>
|
||||
<option value="Glaucoma">Glaucoma</option>
|
||||
<option value="Vitreoretinal">Vitreoretinal</option>
|
||||
<option value="Teaching Institution Faculty">Teaching Institution Faculty</option>
|
||||
<option value="JNJ Employee">JNJ Employee</option>
|
||||
</select>
|
||||
</div>
|
||||
<button type="submit" class="np-button np-button-big np-button-large-font np-form-action" id="completeRegistrationBtn">
|
||||
<span>Complete Registration</span> <div class="loader" style="display:none;"></div>
|
||||
</button>
|
||||
<span class="err-msg" style="display:none;">Please complete all fields</span>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<script>
|
||||
console.log("{{current_person.email}}")
|
||||
|
||||
$(document).ready(function() {
|
||||
$('#completeRegistrationBtn').click(function(e) {
|
||||
e.preventDefault()
|
||||
validateForm()
|
||||
})
|
||||
})
|
||||
|
||||
function validateForm() {
|
||||
let allDataValidated = false;
|
||||
|
||||
let userData = {
|
||||
learner_uuid: '{{current_person.id}}',
|
||||
company: '',
|
||||
city: '',
|
||||
state: '',
|
||||
country: '',
|
||||
role: '',
|
||||
specialty: '',
|
||||
}
|
||||
|
||||
const form = document.forms['secondaryRegistrationForm']
|
||||
|
||||
// validate company field
|
||||
let companyField = form["company"].value;
|
||||
let cityField = form["city"].value;
|
||||
let stateField = $('#stateSelect').val();
|
||||
let countryField = $('#countrySelect').val();
|
||||
let roleField = $('#roleSelect').val();
|
||||
let specialtyField = $('#specialtySelect').val();
|
||||
|
||||
companyField == "" ? "" : userData.company = companyField
|
||||
cityField == "" ? "" : userData.city = cityField
|
||||
stateField == "" ? "" : userData.state = stateField
|
||||
countryField == "" ? "" : userData.country = countryField
|
||||
roleField == "" ? "" : userData.role = roleField
|
||||
specialtyField == "" ? "" : userData.specialty = specialtyField
|
||||
|
||||
if (userData.company && userData.city && userData.state && userData.country && userData.role && userData.specialty) {
|
||||
|
||||
console.log("user Data: ", userData)
|
||||
|
||||
submitValidatedDataToLocalStorage(userData)
|
||||
submitValidatedDataToWorkato(userData)
|
||||
} else {
|
||||
$('.err-msg').show()
|
||||
}
|
||||
}
|
||||
|
||||
function submitValidatedDataToLocalStorage(data) {
|
||||
console.log("submitting user data to local storage")
|
||||
|
||||
// Save entered data as individual variables in local storage for later use
|
||||
localStorage.setItem("learnerCompany", data.company);
|
||||
localStorage.setItem("learnerCity", data.city);
|
||||
localStorage.setItem("learnerState", data.state);
|
||||
localStorage.setItem("learnerCountry", data.country);
|
||||
localStorage.setItem("learnerRole", data.role);
|
||||
localStorage.setItem("learnerSpecialty", data.specialty);
|
||||
|
||||
// Set isValidated value in local storage to true
|
||||
localStorage.setItem("learnerCompletedSecondaryRegistration", "true");
|
||||
}
|
||||
|
||||
function submitValidatedDataToWorkato(data) {
|
||||
console.log("submitting user data to Workato")
|
||||
|
||||
const secondaryInfoStored = localStorage.getItem("learnerCompletedSecondaryRegistration")
|
||||
|
||||
$('#completeRegistrationBtn').prop("disabled",true);
|
||||
$('#completeRegistrationBtn').addClass('submitting')
|
||||
$('.loader').show()
|
||||
$('#completeRegistrationBtn span').text('Completing Registration')
|
||||
|
||||
$.ajax({
|
||||
url: "https://www.workato.com/webhooks/rest/bd1a1eb7-7e79-4208-a1db-8e9c7440bcc9/additional-learner-info",
|
||||
data: JSON.stringify(data),
|
||||
method: 'POST',
|
||||
success: function(res){
|
||||
console.log(res)
|
||||
|
||||
setTimeout(function() {
|
||||
window.location.replace("/app")
|
||||
}, 2000)
|
||||
},
|
||||
error: function (xhr, status, error) {
|
||||
console.error("Error posting to workato!");
|
||||
|
||||
if (secondaryInfoStored == "true") {
|
||||
console.log("secondary information completed and stored in local storage")
|
||||
|
||||
setTimeout(function() {
|
||||
window.location.replace("/app")
|
||||
}, 2000)
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<style>
|
||||
body {
|
||||
height:auto;
|
||||
}
|
||||
|
||||
.np-box {
|
||||
margin:64px 0;
|
||||
}
|
||||
|
||||
.form-disclaimer {
|
||||
font-size:12px;
|
||||
margin-bottom:12px;
|
||||
margin-top:32px;
|
||||
font-weight:700;
|
||||
}
|
||||
|
||||
select {
|
||||
width: 100%;
|
||||
font-size: .9375rem;
|
||||
padding: 1rem;
|
||||
background: #f2f4f5;
|
||||
border: 1px solid #ccd4d8;
|
||||
border-radius: 4px;
|
||||
color: #1b3e4f;
|
||||
}
|
||||
|
||||
.err-msg {
|
||||
font-size:14px;
|
||||
color:#cc0033;
|
||||
margin-top:16px;
|
||||
}
|
||||
|
||||
.loader {
|
||||
border: 3px solid #f3f3f3;
|
||||
border-top: 3px solid #009999;
|
||||
border-radius: 50%;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
animation: spin 1.5s linear infinite;
|
||||
margin-left: 12px;
|
||||
}
|
||||
|
||||
#completeRegistrationBtn.submitting {
|
||||
background-color:#63666a;
|
||||
cursor:text;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
0% { transform: rotate(0deg); }
|
||||
100% { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
@media screen and (min-width: 768px) {
|
||||
.np-box-header {
|
||||
height: 70px;
|
||||
margin-top: 50px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
200
Custom_Templates/.churned_customers/JJSV/sign_up.html.liquid
Normal file
200
Custom_Templates/.churned_customers/JJSV/sign_up.html.liquid
Normal file
@ -0,0 +1,200 @@
|
||||
<main class="np-main np-box-container">
|
||||
<div class="np-box">
|
||||
{% include "header_minimal" %}
|
||||
<div class="np-box-content-container">
|
||||
|
||||
<form class="np-form np-box-content" action="{% route sign_up %}" method="post" novalidate>
|
||||
<span class="np-form-terms">Use of this site constitutes your consent to the application of such laws and regulations and to our <a class="np-button-color" href="https://jnjinstitute.com/en-us/privacy-policy" target="_blank">Privacy Policy</a>. Your use of the information on this site is subject to the terms of our <a href="{{ current_school.terms_of_service_url }}" class="np-button-color" target="_blank">Terms of Use</a>.</span>
|
||||
<div class="np-form-title"> {% t .create_account %} </div>
|
||||
{% form_authenticity_token %}
|
||||
<div class="np-form-flex-desktop">
|
||||
<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="learner[first_name]"
|
||||
id="learner_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="learner[last_name]"
|
||||
id="learner_last_name"
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<div class="np-form-field">
|
||||
<label class="np-input-label" for="learner_email">
|
||||
{% t shared.email_address %}
|
||||
</label>
|
||||
<input
|
||||
class="np-input"
|
||||
autofocus="autofocus"
|
||||
type="email"
|
||||
name="learner[email]"
|
||||
id="learner_email"
|
||||
>
|
||||
</div>
|
||||
<div class="np-form-field">
|
||||
<label class="np-input-label" for="learner_password">
|
||||
{% t shared.password %}
|
||||
</label>
|
||||
<input
|
||||
class="np-input"
|
||||
type="password"
|
||||
name="learner[password]"
|
||||
id="learner_password"
|
||||
>
|
||||
</div>
|
||||
<div class="np-form-field checkbox-field">
|
||||
<label class="checkbox-container">I attest that I am a Healthcare Professional or Johnson & Johnson employee.
|
||||
<input type="checkbox" id="attestationCheckbox">
|
||||
<span class="checkmark"></span>
|
||||
</label>
|
||||
</div>
|
||||
<button type="submit" class="np-button np-button-big np-button-large-font np-form-action">
|
||||
Continue
|
||||
</button>
|
||||
{% comment %} <span class="np-form-terms">
|
||||
{% t .terms %}
|
||||
<a
|
||||
class="np-form-link np-button-color"
|
||||
target="_blank"
|
||||
href="{{ current_school.terms_of_service_url }}"
|
||||
>
|
||||
{% t .terms_link %}
|
||||
</a>
|
||||
</span> {% endcomment %}
|
||||
<div class="err-required" style="display:none;">Please complete all required fields.</div>
|
||||
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<style>
|
||||
|
||||
.np-box-content-container {
|
||||
margin-top:0;
|
||||
padding-top:0;
|
||||
}
|
||||
|
||||
.np-form-terms {
|
||||
text-align:left;
|
||||
}
|
||||
/* Customize the label (the container) */
|
||||
.checkbox-container {
|
||||
display: block;
|
||||
position: relative;
|
||||
padding-left: 35px;
|
||||
margin-bottom: 8px;
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
line-height:24px;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
color:#486776;
|
||||
}
|
||||
|
||||
/* Hide the browser's default checkbox */
|
||||
.checkbox-container input {
|
||||
position: absolute;
|
||||
opacity: 0;
|
||||
cursor: pointer;
|
||||
height: 0;
|
||||
width: 0;
|
||||
}
|
||||
|
||||
/* Create a custom checkbox */
|
||||
.checkmark {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 25px;
|
||||
width: 25px;
|
||||
background: #f2f4f5;
|
||||
border: 1px solid #ccd4d8;
|
||||
border-radius:3px;
|
||||
}
|
||||
|
||||
.has-err .checkmark {
|
||||
background: #fcddd3;
|
||||
border: 1px solid #f05323;
|
||||
}
|
||||
|
||||
/* On mouse-over, add a grey background color */
|
||||
.checkbox-container:hover input ~ .checkmark {
|
||||
background-color: #ccd4d8;
|
||||
}
|
||||
|
||||
/* When the checkbox is checked, add a blue background */
|
||||
.checkbox-container input:checked ~ .checkmark {
|
||||
background-color: #009999;
|
||||
}
|
||||
|
||||
/* Create the checkmark/indicator (hidden when not checked) */
|
||||
.checkmark:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Show the checkmark when checked */
|
||||
.checkbox-container input:checked ~ .checkmark:after {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* Style the checkmark/indicator */
|
||||
.checkbox-container .checkmark:after {
|
||||
left: 8px;
|
||||
top: 5px;
|
||||
width: 7px;
|
||||
height: 11px;
|
||||
border: solid white;
|
||||
border-width: 0 3px 3px 0;
|
||||
-webkit-transform: rotate(45deg);
|
||||
-ms-transform: rotate(45deg);
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
|
||||
.err-required {
|
||||
color:#f05323;
|
||||
font-size:12px;
|
||||
margin-top:12px;
|
||||
}
|
||||
|
||||
@media (min-width:768px) {
|
||||
.np-box-header {
|
||||
height:130px;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<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>
|
||||
582
Custom_Templates/.churned_customers/JJSV/styles.css.liquid
Normal file
582
Custom_Templates/.churned_customers/JJSV/styles.css.liquid
Normal file
@ -0,0 +1,582 @@
|
||||
/*
|
||||
Put your custom overlay styles in here
|
||||
You can use your northpass color palette in this file
|
||||
|
||||
{{ color_palette.button_font_color }}
|
||||
{{ color_palette.button_color }}
|
||||
{{ color_palette.button_hover_color }}
|
||||
{{ color_palette.header_font_color }}
|
||||
{{ color_palette.header_font_hover_color }}
|
||||
{{ color_palette.header_color }}
|
||||
*/
|
||||
|
||||
/**** TABLE OF CONTENTS ========
|
||||
|
||||
1.0 - GLOBAL STYLING
|
||||
2.0 - PAGE SPECIFIC STYLING
|
||||
2.1 - HOMEPAGE
|
||||
2.3 - CATALOG
|
||||
2.4 - COURSE COVER PAGE
|
||||
2.7 - LEARNING PATH COVER PAGE
|
||||
3.0 - COMPONENT SPECIFIC STYLING
|
||||
3.2 - SUB NAV
|
||||
3.3 - FOOTER
|
||||
3.4 - BUTTONS
|
||||
3.5 - HEADINGS, SUBHEADS & GENERAL TEXT
|
||||
3.6 - COURSE CARD
|
||||
3.7 - LEARNING PATH CARD
|
||||
3.9 - COURSE BANNER
|
||||
3.10 - COURSE DETAILS
|
||||
3.11 - COURSE OUTLINE
|
||||
3.13 - CAROUSEL - GLOBAL STYLES
|
||||
*/
|
||||
|
||||
/*
|
||||
1.0 GLOBAL SYLING
|
||||
*/
|
||||
|
||||
@font-face {
|
||||
font-family: "PlusJakartaSans";
|
||||
src: url("https://s3.amazonaws.com/static.northpass.com/fonts/PlusJakartaSans-Regular.woff")
|
||||
format("woff");
|
||||
src: url("https://s3.amazonaws.com/static.northpass.com/fonts/PlusJakartaSans-Regular.ttf")
|
||||
format("truetype");
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "PlusJakartaSans";
|
||||
src: url("https://s3.amazonaws.com/static.northpass.com/fonts/PlusJakartaSans-Bold.woff")
|
||||
format("woff");
|
||||
src: url("https://s3.amazonaws.com/static.northpass.com/fonts/PlusJakartaSans-Bold.ttf")
|
||||
format("truetype");
|
||||
font-weight: bold;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
html,
|
||||
body {
|
||||
font-family: "PlusJakartaSans", "Roboto", sans-serif !important;
|
||||
}
|
||||
|
||||
body {
|
||||
background: white;
|
||||
font-family: "PlusJakartaSans", sans-serif;
|
||||
}
|
||||
|
||||
.np-card-ribbon {
|
||||
background-color:#009999;
|
||||
padding: 2px 6px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.content-disclaimer.np-subpage-container {
|
||||
padding-top:16px;
|
||||
padding-bottom:0;
|
||||
text-align:center;
|
||||
}
|
||||
|
||||
.np-subpage-container {
|
||||
padding: 80px 24px 0;
|
||||
max-width: 1440px;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
/* Alerts */
|
||||
.np-alert.np-alert-success,
|
||||
.np-alert.np-alert-error {
|
||||
background: #009999;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.np-card-content-title {
|
||||
shadow: 0 !important;
|
||||
}
|
||||
|
||||
.courses-left-small {
|
||||
padding-top: 190px;
|
||||
}
|
||||
|
||||
/* CARDS */
|
||||
.np-card-content {
|
||||
background: #f4f4f4 !important;
|
||||
}
|
||||
|
||||
.np-main {
|
||||
background: white;
|
||||
position:relative;
|
||||
}
|
||||
|
||||
/* OLD STYLES TO BE ORGANIZED OR REMOVED */
|
||||
|
||||
|
||||
.np-main .np-resource-title,
|
||||
.np-main .np-resource-subtitle,
|
||||
.np-top-title,
|
||||
.np-content-instructors-content-name,
|
||||
.np-content-instructors-content-info {
|
||||
color: black;
|
||||
}
|
||||
|
||||
.np-main .np-resource-subtitle,
|
||||
.np-content-instructors-content-info {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.np-resource-title {
|
||||
font-weight: bold;
|
||||
}
|
||||
.np-resource-header-card {
|
||||
background: transparent;
|
||||
box-shadow: none;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.np-top-cta {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.np-flex-wrapper {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.np-learning-paths-resources-container {
|
||||
border: 1px solid rgba(255, 255, 255, 0.5);
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.np-md-flex-wrapper {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
2.0 - PAGE SPECIFIC STYLING
|
||||
*/
|
||||
|
||||
/*
|
||||
2.4 - COURSE COVER PAGE
|
||||
*/
|
||||
#course-desktop .np-course-content {
|
||||
background: #fff;
|
||||
color: #212121;
|
||||
padding: 0;
|
||||
}
|
||||
#course-mobile .np-card-container {
|
||||
margin-top: 0;
|
||||
}
|
||||
.np-content-instructors-content-name {
|
||||
font-size: 1.062rem;
|
||||
margin-bottom: 3px;
|
||||
}
|
||||
.np-content-instructors-content-info {
|
||||
font-size: 0.937rem;
|
||||
}
|
||||
|
||||
/*
|
||||
2.4 - TRAINING SESSION PAGE
|
||||
*/
|
||||
|
||||
.np-training-session .np-card-heading {
|
||||
color: #009999;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.np-training-session .np-card-text p {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.np-training-session .np-card-text img {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.np-training-session .np-card-text a {
|
||||
color: #009999;
|
||||
}
|
||||
|
||||
.np-training-session .np-card-container {
|
||||
border: 2px solid #bac4ca;
|
||||
}
|
||||
|
||||
.np-training-session .np-card-content-divider {
|
||||
padding-top: 1.5rem;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 768px) {
|
||||
.np-training-session .np-card-training-session-date {
|
||||
margin-top: 48px;
|
||||
}
|
||||
|
||||
.np-training-session-cta {
|
||||
margin-top: 54px;
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
3.4 - BUTTONS
|
||||
*/
|
||||
|
||||
.np-button {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.np-top-button.np-button.np-button-secondary,
|
||||
.np-button.dropdown-button {
|
||||
background-color: #fafafa;
|
||||
padding: 0 1.25rem;
|
||||
font-weight: 600;
|
||||
border: 2px solid #fafafa;
|
||||
}
|
||||
|
||||
.np-button.np-background-color,
|
||||
.np-button.np-top-button,
|
||||
.np-card-content-footer .np-button {
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.np-button.np-top-button {
|
||||
border: 1px solid #009999;
|
||||
transition: background-color 0.1s;
|
||||
}
|
||||
|
||||
/* .np-button.np-top-button:hover {
|
||||
background-color: transparent;
|
||||
color: #009999;
|
||||
} */
|
||||
|
||||
button.enwYlE,
|
||||
button.enwYlE:hover {
|
||||
background-color: transparent;
|
||||
border: 1px solid rgba(255, 255, 255, 0.5);
|
||||
border-radius: 0;
|
||||
padding: 8px 12px;
|
||||
color: #fff !important;
|
||||
}
|
||||
|
||||
button.jryxug {
|
||||
color: #fff;
|
||||
}
|
||||
.bpSgf,
|
||||
.fsgQJU {
|
||||
color: rgba(255, 255, 255, 0.75) !important;
|
||||
}
|
||||
|
||||
.mjmTc {
|
||||
border-radius: 0 !important;
|
||||
}
|
||||
|
||||
/* 3.5 - HEADINGS, SUBHEADS & GENERAL TEXT */
|
||||
.np-card-heading {
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
.np-text-title {
|
||||
font-size: 0.937rem;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.np-card-heading {
|
||||
font-size: 1.5rem;
|
||||
line-height: 1.875rem;
|
||||
}
|
||||
.np-card-text {
|
||||
line-height: 1.75rem;
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
3.6 - COURSE CARD
|
||||
*/
|
||||
.np-card-container {
|
||||
height: auto;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.np-card-container {
|
||||
border-radius: 0;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.np-card-padding,
|
||||
.np-card-padding-dynamic {
|
||||
padding: 1.5rem;
|
||||
}
|
||||
|
||||
.np-card-image-overlay {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.np-card-image-content-top,
|
||||
.np-card-image-content-bottom {
|
||||
position: absolute;
|
||||
left: 1.5rem;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.np-card-image-content-top {
|
||||
top: 1.5rem;
|
||||
}
|
||||
.np-card-image-content-bottom {
|
||||
bottom: 1.5rem;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
.np-card-image-content-bottom .np-card-content-progress {
|
||||
color: #fff;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.np-card-content-footer {
|
||||
margin-top: 1.2rem;
|
||||
}
|
||||
.np-card-content-footer .np-button {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 768px) {
|
||||
.np-card-content-title {
|
||||
font-size: 1.1rem;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.np-card-image-content-top,
|
||||
.np-card-image-content-bottom {
|
||||
left: 1.5rem;
|
||||
right: 1.5rem;
|
||||
}
|
||||
|
||||
.np-card-image-content-top {
|
||||
top: 1.5rem;
|
||||
}
|
||||
.np-card-image-content-bottom {
|
||||
bottom: 1.5rem;
|
||||
}
|
||||
.np-card-padding,
|
||||
.np-card-padding-dynamic {
|
||||
padding: 1.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1024px) {
|
||||
.np-card-content-title {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.np-card-image-content-top,
|
||||
.np-card-image-content-bottom {
|
||||
left: 2rem;
|
||||
right: 2rem;
|
||||
}
|
||||
|
||||
.np-card-image-content-top {
|
||||
top: 2rem;
|
||||
}
|
||||
.np-card-image-content-bottom {
|
||||
bottom: 2rem;
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
3.9 - COURSE BANNER
|
||||
*/
|
||||
.np-course-banner {
|
||||
position: relative;
|
||||
margin-bottom: 2.5rem;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.np-course-banner-image {
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.np-course-info.np-course-banner-info {
|
||||
position: absolute;
|
||||
bottom: 1.5rem;
|
||||
left: 1.5rem;
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
.np-course-banner .np-course-title {
|
||||
font-size: 1.5rem;
|
||||
margin-bottom: 2rem;
|
||||
font-weight: bold;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.np-course-banner-image {
|
||||
margin: 0 0 0 auto;
|
||||
width: 45%;
|
||||
border-radius: 0 !important;
|
||||
}
|
||||
|
||||
.np-course-banner-overlay {
|
||||
background: #006161;
|
||||
position: absolute;
|
||||
width: 54%;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
top: 0;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.np-course-banner .np-course-title {
|
||||
font-size: 3rem;
|
||||
margin-bottom: 2.5rem;
|
||||
flex: 2;
|
||||
}
|
||||
|
||||
.np-course-info.np-course-banner-info {
|
||||
width: 54%;
|
||||
background: #006161;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
padding: 32px;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1170px) {
|
||||
.np-course-banner .np-course-title {
|
||||
font-size: 40px;
|
||||
line-height: 55px;
|
||||
}
|
||||
|
||||
.np-course-banner-info .np-course-details {
|
||||
max-width: 500px;
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
3.10 - COURSE DETAILS
|
||||
*/
|
||||
.np-course-details {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.np-course-detail {
|
||||
font-size: 1.125rem;
|
||||
color: #fff;
|
||||
flex: 0 1 calc(33.33%);
|
||||
}
|
||||
|
||||
.np-details-label {
|
||||
text-transform: uppercase;
|
||||
opacity: 0.5;
|
||||
font-size: 0.75rem;
|
||||
display: block;
|
||||
font-weight: bold;
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 768px) {
|
||||
.np-course-detail {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
.np-course-banner-info .np-course-details {
|
||||
max-width: 430px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1170px) {
|
||||
.np-course-banner-info .np-course-detail {
|
||||
font-size: 2rem;
|
||||
}
|
||||
.np-course-banner-info .np-details-label {
|
||||
font-size: 1.062rem;
|
||||
margin-top: 3px;
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
3.11 - COURSE PROGRESS & CTA
|
||||
*/
|
||||
.np-card-progress-bar-container,
|
||||
.np-progress-bar-container {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.np-card-progress-bar {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.np-top-cta-progress-title {
|
||||
/* color: #fff; */
|
||||
text-transform: none;
|
||||
margin-top: 0.7rem;
|
||||
margin-bottom: 0.7rem;
|
||||
}
|
||||
|
||||
/*
|
||||
3.12 - COURSE OUTLINE
|
||||
*/
|
||||
|
||||
.np-course-outline-content {
|
||||
margin-top: 20px;
|
||||
}
|
||||
.np-course-outline-content-section-name {
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.15);
|
||||
}
|
||||
|
||||
.np-course-outline-content-activity-icon,
|
||||
.np-course-outline-content-activity-title {
|
||||
color: rgba(255, 0, 51, 0.7);
|
||||
font-size: 0.937rem;
|
||||
padding: 0.15rem 1.25rem 0 0.75rem;
|
||||
}
|
||||
|
||||
.np-course-outline-content-activity-icon.fa-check {
|
||||
color: #2bb24c;
|
||||
}
|
||||
|
||||
.np-course-outline-content-activity-icon.icon-course-not-started {
|
||||
position: relative;
|
||||
width: 20px;
|
||||
height: 17px;
|
||||
margin-left: 11px;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.np-course-outline-content-activity-icon.icon-course-not-started::before,
|
||||
.np-course-outline-content-activity-icon.icon-course-not-started::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 16px;
|
||||
height: 2px;
|
||||
background-color: rgba(255, 0, 51, 0.7);
|
||||
left: 0;
|
||||
top: 5px;
|
||||
}
|
||||
|
||||
.np-course-outline-content-activity-icon.icon-course-not-started::before {
|
||||
width: 9px;
|
||||
top: 10px;
|
||||
}
|
||||
|
||||
.dropdown-menu.is-open {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/*
|
||||
CAROUSEL - GLOBAL STYLES
|
||||
*/
|
||||
|
||||
.slick-track {
|
||||
display: flex !important;
|
||||
}
|
||||
|
||||
.slick-slide {
|
||||
height: inherit !important;
|
||||
}
|
||||
@ -0,0 +1,77 @@
|
||||
{% include "header" %}
|
||||
{% comment %} {% include "sub_navigation" %} {% endcomment %}
|
||||
<div class="row subpage-intro">
|
||||
<div class="color-layer"></div>
|
||||
<div class="col-xs-12 col-sm-9 col-md-6" style="margin:auto;">
|
||||
<div class="subpage-intro-content-wrapper">
|
||||
<div class="subpage-intro-title">Professional Events</div>
|
||||
<div class="subpage-intro-divider"></div>
|
||||
<div class="subpage-intro-subtitle">Join us in learning, connecting, and sharing knowledge at one of our symposiums or virtual events.</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<main class="np-main np-training-events np-subpage-container np-max-width">
|
||||
<div class="row">
|
||||
<div class="col-xs-12 col-sm-2">
|
||||
{% include "training_events_filter" %}
|
||||
</div>
|
||||
</div>
|
||||
{% include "training_events_index" %}
|
||||
</main>
|
||||
{% include "footer" %}
|
||||
|
||||
<style>
|
||||
.subpage-intro {
|
||||
position:relative;
|
||||
background: url(https://s3.amazonaws.com/static.northpass.com/J%26J/homepage_banner_professional_events.png);
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
padding: 64px 16px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.color-layer {
|
||||
background-color: rgba(51, 51, 51, 0.7);
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.subpage-intro-content-wrapper {
|
||||
text-align:center;
|
||||
color: #fff;
|
||||
position: relative;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.subpage-intro-title {
|
||||
font-size: 32px;
|
||||
line-height: normal;
|
||||
text-transform: uppercase;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
.subpage-intro-divider {
|
||||
height: 5px;
|
||||
margin: 16px auto;
|
||||
width:100px;
|
||||
background-color:#cc0033;
|
||||
}
|
||||
|
||||
@media (min-width:768px) {
|
||||
.subpage-intro {
|
||||
min-height:400px;
|
||||
}
|
||||
.subpage-intro-content-wrapper {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.subpage-intro-title {
|
||||
font-size: 50px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user