jjsv
This commit is contained in:
Norm Rasmussen
134
CSMInterviews.md
134
CSMInterviews.md
@ -106,3 +106,137 @@ How have you or what have you learned is the best approach for when a client com
|
||||
Curious to know about work life balance - am I satisfied?
|
||||
Looking back at the time on Northpass, what would have I told new hire me?
|
||||
|
||||
# Anthony DeSena
|
||||
* Interview Phone Screen on 8/24/22 at 3:30 pm
|
||||
* Part time Real Estate, Rutgers 2019
|
||||
* BDM functions
|
||||
* Team layoff, old manager brought him to Eden
|
||||
* Client Propspecting at Eden
|
||||
* Really liked relationship maintence, retention
|
||||
* AEE at Eden, going after new accounts or expansion accounts
|
||||
* Introducing Agreement and then helping be successful
|
||||
* Recently 40% of the company was laid off, everyone except him
|
||||
* Eden is going after a new business model
|
||||
|
||||
Metrics:
|
||||
* Quote as Senior BDR - scaled off meetings set and meetings completed
|
||||
* Self-prospecting and pulling in business
|
||||
* 12 meetings completed, 16 set
|
||||
|
||||
Has been wanting to move towards a CS role for the past year.
|
||||
Feels strongest skills are interpersonal skills and having a knack for working with people.
|
||||
Didn't like cut throat and numbers oriented aspects sales
|
||||
|
||||
Clients were surprised when he reached out as they expected the broker and/or BCBS would reach out. Apprehensive clients didn't trust him at first.
|
||||
This all sounds a lot more like Cold Calling
|
||||
|
||||
Active listener, delievered on clients needs instead of barging through
|
||||
|
||||
Eden is direct to employer concierge provider, 24/7 virtual platform
|
||||
Knowleldge of services
|
||||
|
||||
Has been completely remote
|
||||
Remote is perferrable, except for the right opportunity
|
||||
"Not a deal breaker for the right opportunity"
|
||||
Making calls all day in an office "just sucked"
|
||||
|
||||
# Tyler Delao
|
||||
* Interview Phone Screen 8/25/2022 at 12:30pm
|
||||
* Born and Raised in Syracuse
|
||||
* Marketing Coordinator at Keller Williams, 12 agents, helping with agents branding
|
||||
* Only Marketing Employee
|
||||
* Social Chair on Campus
|
||||
* Managed a budget
|
||||
* Sales Associate at Michael's Kohrs
|
||||
* Wants to be prepared for his work, wants clear kpis and metrics
|
||||
* General atmosphere
|
||||
*
|
||||
|
||||
# Kallan Smith
|
||||
* Overview
|
||||
* Enterprise
|
||||
* > $85k
|
||||
* 21 Customers
|
||||
* Discovery Call, Migrations and Configuration
|
||||
* Contract Lifecycle Management system
|
||||
* Custom dashboards and analytics
|
||||
* Authentication SSO
|
||||
* Roll into Onboarding phase - his favorite part
|
||||
* Steep Learning Curve
|
||||
* Procurement and IT groups are next departs that need an account
|
||||
* Has worked with his customers for 2 year +
|
||||
* Lots of platform versions - supporting 5 versions
|
||||
* Moving everyone to their Cloud Version
|
||||
* When he first started:
|
||||
* Was in charge of automating communications
|
||||
* NPS Surveys, Survey Monkey
|
||||
* Automating Salesforce
|
||||
* Improving knowledge transfer
|
||||
* Renewal and New Feature Communications
|
||||
* Intercom
|
||||
* What are you looking for?
|
||||
* Moving away from Legal Tech
|
||||
* Innovative Product
|
||||
* Spends a lot of time solving tickets
|
||||
* Wants to be more proactive
|
||||
|
||||
* Work Setup
|
||||
* Office in NYC closed a few years ago
|
||||
* WeWork that he goes to every other week
|
||||
* If CCO is in town, he'll go in, if London team
|
||||
* Is okay with in office
|
||||
|
||||
* Timeline
|
||||
* Third round with another few companies
|
||||
* Needs 2 weeks notice
|
||||
* Move in September
|
||||
|
||||
* CS Team is the Support Team
|
||||
* Team has tripled in size, 12 total now
|
||||
* 2nd in US
|
||||
* Wants to be as responsive as possible
|
||||
* Lets them know and tries to jump on calls ASAP
|
||||
* Ask a few extra questions
|
||||
* Likes to Document as much as possible
|
||||
* If he can't figure out a quick workaround, will give a timeline and offer a down the road solution
|
||||
* Open lines of communication
|
||||
|
||||
* What does he want to get better at?
|
||||
* Sharper at coding
|
||||
*
|
||||
|
||||
Favorite Projects:
|
||||
* Getting Integrations setup
|
||||
* Likes using API
|
||||
* Did the first salesforce integration
|
||||
* He is basically a DocuSign employee
|
||||
* Did a lot of Javascript, HTML, CSS with EdEx Studio
|
||||
* Inspect Element
|
||||
|
||||
# Brittany Marques
|
||||
* Biggest standouts were how our website talks about employees & clients
|
||||
* Works with "Enterprise" clients. But this could be mom and pop shops (5-10 locations) and some businesses with 100s of locations (MassageEnvy, EuropeanWaxCenter).
|
||||
* Works more in onboarding/implementation than anything else
|
||||
* Is looking for a "new home" and doesn't like to jump around
|
||||
* Wants to do full-cycle, not just onboarding
|
||||
* Wants to see what their clients do in the future and work with them over a longer period of time.
|
||||
* Current job doesn't have a CSM role, it is just Onboarding to Support.
|
||||
* What has kept her there for 7 years?
|
||||
* Has felt the limit of her grown which is why she is looking somewhere else
|
||||
* Leadership cleared house
|
||||
* Are fully remote, company sold the business
|
||||
* Wants to be fully in person
|
||||
* How to find information you don't know
|
||||
* Would research documentation
|
||||
* Research Hubspot and or Slack for similar situations
|
||||
* Look in Ticketing Software
|
||||
* Would get on the phone and call the client
|
||||
* Explain what is happening and say that she doesn't have the tools and will get back to them in the morning.
|
||||
* If the client isn't happy, letting them vent and talk it out
|
||||
* Something listening is the best thing you can do
|
||||
* Bigger Life Goal? Trying to get PMP certified. Prepping for test.
|
||||
* Went to school for Criminal Justice - Wanted to be FBI
|
||||
* At EWC learned the software that she is working for now.
|
||||
* Fell in love with working with clients
|
||||
* MSI remote install of software - takes 3-4 hours
|
||||
|
||||
|
||||
203
CustomerNotes.md
203
CustomerNotes.md
@ -77,10 +77,13 @@ Events should be figured out by our demo -
|
||||
* [X] Add all groups as per Kaitlyn's info
|
||||
* [X] Wants to start putting in content by the 15th August.
|
||||
* [ ] Create and send document for Melinda's instructions to add categories.
|
||||
* [ ] Delete all courses and everything from Media Library
|
||||
* [ ] Let Melinda know when clean state has been achieved
|
||||
* [X] Delete all courses and everything from Media Library
|
||||
* [X] Let Melinda know when clean state has been achieved
|
||||
* [ ] Create documentation for categories & adding courses to groups - understand catalog vs. groups
|
||||
* [ ] Update Smartsheet by moving all Phase II projects to new heading
|
||||
* [ ] New Footer: all About (minus Products/DO)
|
||||
* [ ] Useful Links - JJ vision Pro, Contact Us, JJI, YouTube
|
||||
* [ ] Legal All
|
||||
|
||||
In person events should change register button to "remind me"
|
||||
Melinda will then add the 3rd party links into the event description
|
||||
@ -335,6 +338,12 @@ Learning paths and programs to support knowledge journeys, including New Hire On
|
||||
|
||||
Opportunity to host content & events for Employee Resource Communities; to have a shared space for learning and collaborating.
|
||||
|
||||
## 500 Errors
|
||||
From Taylor: The most recent 500 error in the getting started was August 17th at 2pm
|
||||
* [ ] Look up DataDog logs for Talkspace
|
||||
* [ ] Use flashing continue button in the 1099 Getting Started Courses
|
||||
* [ ] Color: FlashSpeed: Course:
|
||||
|
||||
## Onboarding with BambooHR
|
||||
- Location is a filter in BBHR
|
||||
- Region is custom but not directly filterable, can pull analytics but can't filter
|
||||
@ -364,7 +373,6 @@ Compliance: mandatory courses on topics like Data Security or Workplace Inclusiv
|
||||
|
||||
|
||||
# Swift Medical
|
||||
|
||||
Gabriel, backend questions
|
||||
* didn't know about developer docs
|
||||
* is impressed with its extensiveness
|
||||
@ -434,6 +442,26 @@ Subsections
|
||||
Subheadings between them -
|
||||
Add progress filter
|
||||
|
||||
Kayla personal email: klambie@sympatico.ca
|
||||
|
||||
## Manager Questions
|
||||
* They want a manager to add or remove courses
|
||||
* A Wound Care Leader should be able to tell their employees and group to assign learners
|
||||
* A manager in that group should be able to manage the learners in group
|
||||
*
|
||||
|
||||
## New Use Case for Certificates
|
||||
* Show that anyone has done a certain course
|
||||
* Check whether a certificate is expired and then have them retake the course
|
||||
* These are bonuses to their existing experience
|
||||
|
||||
* [ ] Separate Page with Completed Courses
|
||||
* [ ] Retake Course button leads to certificate pdf
|
||||
* [ ] Retake Course > View Certificate
|
||||
* [ ] Most/all Courses are 1 year expirations - all will be same length
|
||||
* [ ] Learner completes course with milestone, after 1 year, recert course becomes availble
|
||||
|
||||
* Last thing: VP of clinical brought up - how easy is it to make content accessible to a group for a sub group?
|
||||
|
||||
|
||||
# Wild Health
|
||||
@ -643,14 +671,17 @@ Launching quickly is not realistic, moved back to November
|
||||
|
||||
## Tasks
|
||||
|
||||
[X] - Create Implementation Plan
|
||||
[X] - End of August Launch
|
||||
[X] - Help Asia create course
|
||||
[X] - Every Week Implementation, Wednesday @ 12:30pm (Tuesdays at 12:30 after next week)
|
||||
[X] - SSO - Reach out to Chris ASAP
|
||||
[ ] - Provide Burns with a deck on competitive analysis of why NP is superior
|
||||
[ ] - Instructor page demo
|
||||
[ ] - Create categories for each OS List
|
||||
* [X] Create Implementation Plan
|
||||
* [X] End of August Launch
|
||||
* [X] Help Asia create course
|
||||
* [X] Every Week Implementation, Wednesday @ 12:30pm (Tuesdays at 12:30 after next week)
|
||||
* [X] SSO - Reach out to Chris ASAP
|
||||
* [ ] Provide Burns with a deck on competitive analysis of why NP is superior
|
||||
* [ ] Instructor page demo
|
||||
* [ ] Create categories for each OS List
|
||||
|
||||
Asia off week of August 28th
|
||||
|
||||
|
||||
## Notes from Kick off
|
||||
|
||||
@ -988,11 +1019,15 @@ Status is they are mapping out and deciding what Northpass involvment should be
|
||||
- [ ] Wistia Project, what access do they have?
|
||||
[ ] Share button with /app/course within course viewer bright green 52 front
|
||||
- [X] EXpert led categories url not working
|
||||
- [ ] Change Enroll in Course to Watch Video
|
||||
- [ ]
|
||||
|
||||
## Notes
|
||||
|
||||
Can they embed a video from the Wistia Project video into Omnisend's product?
|
||||
|
||||
Kate having issue with security. Gets a warning when trying to access app.northpass.com
|
||||
|
||||
### Skip Cover Page logic
|
||||
|
||||
Is a user enrolled?
|
||||
@ -1092,7 +1127,15 @@ And 500 complete (this is a good number)
|
||||
160 have completed 75% (top 3 courses)
|
||||
50% would be fraud & hippaa
|
||||
Molly wants to try... 500 people get a message saying "you're going to see messages, please ignore"
|
||||
160 get invited to a group with the remaining courses
|
||||
160 get invited to a group with the remaining courses
|
||||
|
||||
- 8/26/2022
|
||||
- They are going to pay everyone no matter if they completed courses or not
|
||||
- We need to SHUT DOWN Courses without losing all this data
|
||||
- * [ ] Pull master Spreadsheet of Learning Paths, MCA
|
||||
- For Learning Paths, Compliance 2022, Cross Culture, April Learning Path, June Learning Path, July Learning Path
|
||||
- Deadline for shutting down courses: Tuesday, August 30
|
||||
- Molly told steve he's worked with a lot of homegrown LMS that were a pain to use
|
||||
|
||||
## Meeting with OpenSesame re: SCORM files
|
||||
* Possibly missed events!
|
||||
@ -1101,6 +1144,11 @@ Molly wants to try... 500 people get a message saying "you're going to see messa
|
||||
* RPX now is OS' social sign on and SSO communication
|
||||
* Osano is used by OS but not sure how it would factor in
|
||||
|
||||
QMC Audit, training audit by third party for training completed
|
||||
Rebecca Jewel, to reach out to Virun, Chief Medical Officer for this audit
|
||||
|
||||
|
||||
|
||||
# Mark43
|
||||
|
||||
We need Northapss to be able to parse the group id information in the JWT
|
||||
@ -1175,6 +1223,49 @@ Flow:
|
||||
Each district could be 2 people or 30 people
|
||||
Are they enabling their distcits to forward the emails along?
|
||||
|
||||
# Custom Reports
|
||||
* Group Name + Created + Members
|
||||
* List of People not Necessary
|
||||
* Back to School Season needs it Weekly
|
||||
* Last week of July to Last week of September
|
||||
* Friday Morning Delivery
|
||||
* No Group ID
|
||||
|
||||
Overall goal is spending less time in live trainings with small districts (<$50,000)
|
||||
This time last year, 35% of trainings were spent with small accounts
|
||||
This year, 26%! A 10% change.
|
||||
|
||||
115 actually did training, ~350 hours
|
||||
This is just training time, hours for travel and planning isnt' factored in
|
||||
This has been successful now and is positioning for something better in the future
|
||||
* They want to sell stuff in the future
|
||||
* The idea is being planted, but its not happening yet
|
||||
|
||||
Low enrollments because District Contact invites teachers to the platform
|
||||
Larson isn't in control of the communications
|
||||
Might be more comfortable a year from now helping with that
|
||||
It is a sticking point to be in control of teacher's emails and contacts
|
||||
|
||||
Other ideas:
|
||||
* SSO for their district
|
||||
* BigIdeasMath.com is where learner's sign in right now
|
||||
* Can we consolidate a single authentication method?
|
||||
* Integrations with:
|
||||
* Salesforce, Hubspot, Pendo, No BI Tool
|
||||
|
||||
Next 6-8 Months:
|
||||
* Back to school "ends" mid-September
|
||||
* Oct-December - Focus on Sales
|
||||
* Jan - Mar - Continued Sales
|
||||
* Launching new product segment, Elementary
|
||||
* Launched & Begin Sales Fall 2022
|
||||
* Implemented 2023
|
||||
* Trained by April 2023
|
||||
* Development of Resources in February 2022
|
||||
* April is "next year" of Northpass
|
||||
* Integrations, Design, and any other changes should be completed by April of 2023
|
||||
* Wait until November for New Conversations
|
||||
|
||||
## Tasks
|
||||
* [ ] /app/course, change text to: "Courses | Great Courses from the comfort of your home or classroom."
|
||||
* [ ] Add personalized message to /app.
|
||||
@ -1391,4 +1482,92 @@ They feel like this has been talked about for a longtime. Just waiting for a GO
|
||||
* [ ] Remove events from Homepage
|
||||
* [ ] Remove two buttons on homepage
|
||||
* [ ] Marketo - workflows? What data into marketo that can come from salesforce?
|
||||
* [ ] Update ILT Reg Page
|
||||
* [X] Register Button Copy > Learn More
|
||||
* [ ] https://TBD.TBD.com
|
||||
* [X] Remove Learning Paths from Templates (Homepage + Subnav)
|
||||
|
||||
|
||||
# Happy Culture
|
||||
|
||||
|
||||
# WellApp
|
||||
|
||||
SSO? They need to gate content
|
||||
|
||||
|
||||
# Douglas Elliman
|
||||
|
||||
Current Issues:
|
||||
* Videos would stop
|
||||
* Lots of people stuck at 17-18%
|
||||
* Charlie figured out workaround via Wistia
|
||||
* Videos just stopped? DE would have to reset everyone
|
||||
* This training is necessary for Audit.
|
||||
* They don't feel self-reliant or self-sufficient
|
||||
* Feels like digging out of a hole
|
||||
*
|
||||
|
||||
# Papa
|
||||
* Issues that may happen:
|
||||
* ADP is the brain - Integration
|
||||
* Transferring from LMS
|
||||
* Corporate & Care on Lessonly
|
||||
* Pals on Northpass
|
||||
* Integration with Snowflake and Looker in Phase 2
|
||||
|
||||
## People
|
||||
* Katie - Senior Learning - Care Team
|
||||
* Lizzy - PM on Katie's Team
|
||||
* Mini - Senior Training on Care Team
|
||||
* Becca - Learning Content Dev at Care Center
|
||||
* Yvette - Directors in Care Center - Inbound member PAL/Employer Teams
|
||||
* Sarah - Employee Experience & Culture Team
|
||||
* Amanda - HR Ppl partner, Biz Operations - Integrations for Compliance
|
||||
* Zeke - Dir of Compliance, works with Cheif Compliance Officer
|
||||
* Melanie - Sales Training & Enablement - new biz and CS success - use it for the sales team, self-directed, accountability as well
|
||||
* Natasha - HR Generalist for HR Operations (under Amanda)
|
||||
|
||||
## Level Setting & Introduction
|
||||
* Northpass was already being used for PAL Training & Support
|
||||
* Separate Instances for Internal Side & External Side
|
||||
* Lessonly Contract Expires on October 4th
|
||||
|
||||
# Nana
|
||||
* [ ] Send template blog, and academy screenshots
|
||||
* [ ]
|
||||
|
||||
# Meeting with Steve regarding my Accounts
|
||||
|
||||
* Talkspace - Ummey and Molly - Outlier of his conversations
|
||||
* LMS because they IPO'd - compliance became mandatory
|
||||
* QMC Audit - Lets better prepare them
|
||||
* 1099 audience, hard to manage course retaking because we don't have due dates
|
||||
* Hired a contractor to work on data for this to combine NP data and their data to retake courses
|
||||
* Lets connect SE to the contractor - explore how we can architect this for them?
|
||||
* Can we do data feed of their external data?
|
||||
* Next Steps: Conversation with Charlie & Contractor
|
||||
* Omnisend - Audrius
|
||||
* Bad implementation, now in a good place
|
||||
* 3 areas he would like to see:
|
||||
* Customization of the Course Player (to match brand)
|
||||
* Didn't understand that this was an enterprise thing
|
||||
* Sales process not clear
|
||||
* Faster Auth for OpenAccess
|
||||
* Initial load from email to academy takes 4-5 seconds
|
||||
* More seamless
|
||||
* Training Content unbundled from a course
|
||||
* Wistia Project
|
||||
* Next Steps: Speed up Auth and talk to Charlie about doing this
|
||||
* Talk to him about Enterprise and show *everything* - Analytics, Workflows, Comms, Custom Course Player, etc
|
||||
* Swift Medical - Kayla
|
||||
* Warms up after a while, seemed skeptical at first
|
||||
* Certifications are the big thing for her
|
||||
* She has to build everything in SCORM because they have to ship files to Hospitals who use their own LMS
|
||||
* Wild Health - Mike
|
||||
* Steve and Mike really got along, Steve liked him a lot
|
||||
* Big issue is authoring content
|
||||
* Finds it very cumbersome
|
||||
* Acquired by LivePerson - apparently LivePerson acquired a bunch of health companies
|
||||
* Next Batch: Another Person from Talkspace, DeptAgency
|
||||
*
|
||||
|
||||
BIN
NP_Custom_Templates/customer_templates/.DS_Store
vendored
BIN
NP_Custom_Templates/customer_templates/.DS_Store
vendored
Binary file not shown.
@ -156,4 +156,4 @@
|
||||
margin-left: 110px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
BIN
NP_Custom_Templates/customer_templates/JnJVision/.DS_Store
vendored
Normal file
BIN
NP_Custom_Templates/customer_templates/JnJVision/.DS_Store
vendored
Normal file
Binary file not shown.
@ -0,0 +1,132 @@
|
||||
{% 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 %}
|
||||
|
||||
<div class="catalog-card" data-category="{{categories | join: '+'}}" href="{% route course_enrollment, code: course.enrollment_code %}" >
|
||||
<div class="catalog-card-img-container">
|
||||
<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' %}
|
||||
<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 }}">
|
||||
{% t shared.view %}
|
||||
</a>
|
||||
{% if course.has_to_restart? %}
|
||||
{% include "course_version_outdated_popup", path: course_path %}
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<style>
|
||||
.catalog-card {
|
||||
background: #f3f3f3;
|
||||
margin-bottom: 32px;
|
||||
display:flex;
|
||||
}
|
||||
|
||||
.catalog-card-img-container {
|
||||
width:33%;
|
||||
min-width: 33%;
|
||||
position:relative;
|
||||
}
|
||||
|
||||
.np-card-image {
|
||||
border-radius: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
max-width:unset;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
|
||||
|
||||
</style>
|
||||
@ -1,4 +1,4 @@
|
||||
{% comment %} <div class="np-card">
|
||||
<div class="np-card">
|
||||
<div class="np-card-container">
|
||||
<div class="np-card-image-content-top">
|
||||
</div>
|
||||
@ -8,133 +8,40 @@
|
||||
src="{{ course.image_url }}"
|
||||
>
|
||||
</div>
|
||||
<div class="np-card-content np-card-content-vertical np-card-padding course-card-content" style='padding: 1.5rem;'>
|
||||
<div class="np-card-content np-card-content-vertical np-card-padding course-card-content">
|
||||
<p class="course-title-vision">
|
||||
{{ course.name }}
|
||||
</p>
|
||||
<div class="np-card-content-footer">
|
||||
{% capture course_path %}{% route course, id: course.id %}{% endcapture %}
|
||||
{% if course.has_to_restart? %}
|
||||
{% include "course_version_outdated_popup", path: course_path %}
|
||||
<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-top-button np-button-font-color np-button np-button-big" href="{% route course_enrollment, code: course.enrollment_code %}"
|
||||
style='background: linear-gradient(90deg, #006161 0%, #006161 100%); border-radius: 8px;'
|
||||
class="np-button-font-color np-button" href="{% route course_enrollment, code: course.enrollment_code %}"
|
||||
>
|
||||
{% if course.enrolled? == false %}
|
||||
{% t shared.enroll %}
|
||||
{% elsif course.started? == false %}
|
||||
{% t shared.start, key: current_school.course_vocabulary %}
|
||||
View
|
||||
{% elsif course.completed? %}
|
||||
{% t shared.course.view, key: current_school.course_vocabulary %}
|
||||
{% else %}
|
||||
{% t shared.continue %}
|
||||
{% endif %}
|
||||
</a>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div> {% endcomment %}
|
||||
|
||||
{% comment %} - This was Kaitlyn's original code, I'm commenting it out to keep it incase
|
||||
the client wants to revert back. My categories boxes are below. {% endcomment %}
|
||||
<a class="np-card" href="{% route course_enrollment, code: course.enrollment_code %}" >
|
||||
<div class="np-card-container">
|
||||
<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" style='padding: 1.5rem;'>
|
||||
<p class="course-title-vision">
|
||||
{{ course.name }}
|
||||
</p>
|
||||
<div class="np-card-content-footer">
|
||||
{% capture course_path %}{% route course, id: course.id %}{% endcapture %}
|
||||
{% if course.has_to_restart? %}
|
||||
{% include "course_version_outdated_popup", path: course_path %}
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
{% comment%}
|
||||
<a class="np-card" >
|
||||
<div class="np-card-container">
|
||||
<div class="np-card-image-content-top"> </div>
|
||||
<img
|
||||
class="np-card-image"
|
||||
src="https://s3.amazonaws.com/static.northpass.com/J%26J/white_beard_eye_exam.jpg"
|
||||
>
|
||||
</div>
|
||||
<div class="np-card-content np-card-content-vertical np-card-padding course-card-content" style='padding: 1.5rem;'>
|
||||
<p class="course-title-vision">
|
||||
Challenging Cases Video Series
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a class="np-card" >
|
||||
<div class="np-card-container">
|
||||
<div class="np-card-image-content-top"> </div>
|
||||
<img
|
||||
class="np-card-image"
|
||||
src="https://s3.amazonaws.com/static.northpass.com/J%26J/couple_ipad_podcast.jpg"
|
||||
>
|
||||
</div>
|
||||
<div class="np-card-content np-card-content-vertical np-card-padding course-card-content" style='padding: 1.5rem;'>
|
||||
<p class="course-title-vision">
|
||||
Fine-Tuned Podcast Series
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a class="np-card" >
|
||||
<div class="np-card-container">
|
||||
<div class="np-card-image-content-top"> </div>
|
||||
<img
|
||||
class="np-card-image"
|
||||
src="https://s3.amazonaws.com/static.northpass.com/J%26J/JNJ4.png"
|
||||
>
|
||||
</div>
|
||||
<div class="np-card-content np-card-content-vertical np-card-padding course-card-content" style='padding: 1.5rem;'>
|
||||
<p class="course-title-vision">
|
||||
Johnson & Johnson Product Education
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a class="np-card" >
|
||||
<div class="np-card-container">
|
||||
<div class="np-card-image-content-top"> </div>
|
||||
<img
|
||||
class="np-card-image"
|
||||
src="https://s3.amazonaws.com/static.northpass.com/J%26J/conference-audience.jpg"
|
||||
>
|
||||
</div>
|
||||
<div class="np-card-content np-card-content-vertical np-card-padding course-card-content" style='padding: 1.5rem;'>
|
||||
<p class="course-title-vision">
|
||||
Professional Webinars
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
{% endcomment %}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.np-card {
|
||||
text-decoration:none;
|
||||
}
|
||||
.fas.fa-star {
|
||||
line-height: 1.15;
|
||||
}
|
||||
|
||||
.course-card-content {
|
||||
color: black!important;
|
||||
@ -153,4 +60,10 @@ the client wants to revert back. My categories boxes are below. {% endcomment %}
|
||||
font-family: "PlusJakartaSans-Bold", !important;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.np-card .np-card-content-footer .np-button {
|
||||
background-color:#cc0033;
|
||||
width:auto;
|
||||
color:#fff!important;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,69 +0,0 @@
|
||||
<div class="np-card np-no-horizontal-padding">
|
||||
<div class="np-card-container">
|
||||
<div class="np-learning-path np-featured-course">
|
||||
<div class="np-featured-course-img-container">
|
||||
<div class="np-card-image-content-top">
|
||||
</div>
|
||||
<img
|
||||
class="np-card-image"
|
||||
alt="{{ course.name }}"
|
||||
src="{{ course.image_url }}"
|
||||
>
|
||||
</div>
|
||||
<div class="np-card-text-wrapper">
|
||||
|
||||
<div class="np-card-content np-card-padding np-card-content-vertical">
|
||||
<h3 class="np-card-content-title">
|
||||
{{ course.name }}
|
||||
</h3>
|
||||
|
||||
<div class="np-card-content-description" style='font-size: 16px !important; line-height: 24px !important; color: black !important; font-family: Lexend !important;'>
|
||||
{{ course.short_description }}
|
||||
</div>
|
||||
|
||||
<div class="np-card-content-footer" style='display: flex; justify-content: space-between;'>
|
||||
<div class='np-card-content-footer-left'style='display: flex; justify-content: left;'>
|
||||
<a
|
||||
class="np-top-button np-button-font-color np-button" href="{% route course_enrollment, code: course.enrollment_code %}" style='margin-right: 24px;'
|
||||
>
|
||||
{% if course.enrolled? == false %}
|
||||
{% t shared.enroll %}
|
||||
{% elsif course.started? == false %}
|
||||
{% t shared.start, key: current_school.course_vocabulary %}
|
||||
{% elsif course.completed? %}
|
||||
{% t shared.course.view, key: current_school.course_vocabulary %}
|
||||
{% else %}
|
||||
{% t shared.continue %}
|
||||
{% endif %}
|
||||
</a>
|
||||
<div class="np-card-progress np-button-color" style='color: #006161; font-weight: 700; font-size: 12px; align-self: center; text-transform: uppercase;'>
|
||||
{% t shared.progress, count: course.progress %}
|
||||
</div>
|
||||
</div>
|
||||
<div class= "np-card-course-details" style='float: right; align-text: center; color: #cc0033; font-weight: 700; font-size: 10px;'>
|
||||
{% include "course_details" %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
|
||||
.np-card-content-title {
|
||||
color: #cc0033!important;
|
||||
}
|
||||
|
||||
.np-card-image {
|
||||
border-radius:0;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
$(".np-card-content-description").css('font-size','16px !important')
|
||||
$(".np-card-content-description").css('color','black !important')
|
||||
$(".np-card-content-description").css('font-family', 'Lexend !important')
|
||||
</script>
|
||||
@ -18,13 +18,13 @@
|
||||
</div>
|
||||
|
||||
<div class="np-hidden-mobile np-card-content-progress
|
||||
np-button-color" style='color: #006161;'>
|
||||
np-button-color">
|
||||
{% t shared.progress, count: learning_path.progress %}
|
||||
</div>
|
||||
|
||||
<div class="np-hidden-mobile np-card-progress-bar-container" style='border-radius: 40px;'>
|
||||
<div class="np-hidden-mobile np-card-progress-bar-container">
|
||||
<div
|
||||
style="width: {{ learning_path.progress }}%; background: #006161; border-radius: 40px;"
|
||||
style="width: {{ learning_path.progress }}%;"
|
||||
class="np-button-background-color np-card-progress-bar">
|
||||
</div>
|
||||
</div>
|
||||
@ -40,13 +40,12 @@
|
||||
{% endif %}
|
||||
{% else %}
|
||||
href="{% route learning_path_enrollment, code: learning_path.enrollment_code %}"
|
||||
{% endif %}
|
||||
style='background: linear-gradient(90deg, #006161 0%, #006161 100%); font-weight: 800; border-radius: 8px;'
|
||||
{% endif %}
|
||||
>
|
||||
{% if learning_path.enrolled? == false %}
|
||||
{% t shared.enroll %}
|
||||
{% elsif learning_path.started? == false %}
|
||||
{% t shared.learning_path.start %}
|
||||
Start Program
|
||||
{% elsif learning_path.completed? %}
|
||||
{% t shared.learning_path.view %}
|
||||
{% else %}
|
||||
@ -69,20 +68,11 @@
|
||||
.np-learning-path .np-card-content.np-card-padding.np-card-content-vertical {
|
||||
border-radius: 0 8px 8px 0;
|
||||
}
|
||||
@media screen and (max-width: 768px) {
|
||||
.np-learning-path .np-card-content.np-card-padding.np-card-content-vertical {
|
||||
border-radius: 8px;
|
||||
}
|
||||
}
|
||||
.np-learning-path .np-card-image {
|
||||
border-top-left-radius: 8px;
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-left-radius: 8px;
|
||||
}
|
||||
@media screen and (max-width: 768px) {
|
||||
.np-learning-path .np-card-image {
|
||||
border-top-right-radius: 8px;
|
||||
border-bottom-left-radius: 0;
|
||||
}
|
||||
|
||||
.np-learning-path .np-card-content-footer .np-button {
|
||||
width: auto;
|
||||
background:#cc0033;
|
||||
color:#fff!important;
|
||||
}
|
||||
|
||||
</style>
|
||||
@ -1,4 +1,4 @@
|
||||
<div class="np-card np-event-card">
|
||||
<div class="np-card">
|
||||
<div class="np-card-container">
|
||||
<div class="np-card-content-training-event">
|
||||
<h3 class="np-card-content-title">
|
||||
@ -8,35 +8,40 @@
|
||||
{% t shared.event_types, key: training_event.event_type %}
|
||||
</div>
|
||||
<div class="np-card-training-session">
|
||||
<span class="np-card-content-label" style='border-radius: 4px; opacity: 0.15;'>
|
||||
{% t .next_session %}
|
||||
</span>
|
||||
{% 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 np-opacity-50">
|
||||
<div class="np-card-training-session-date-year">
|
||||
{{ training_event.sessions.first.year }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="np-card-training-session-date-day">
|
||||
{% if training_event.sessions.first.day < 10 %}0{% endif %}{{ training_event.sessions.first.day }}
|
||||
</div>
|
||||
<div class="np-button-background-color np-card-training-session-date-bar" style='border-right: 16px solid #006161;'></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="np-card-content np-card-content-vertical np-card-padding">
|
||||
<div class="np-card-training-sessions">
|
||||
<span class="np-card-training-sessions-label">
|
||||
{% t .sessions, count: training_event.sessions.size %}
|
||||
</span>
|
||||
|
||||
{% comment %} <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"
|
||||
class="np-button np-button-wide"
|
||||
href="{% route training_session, id: training_event.sessions.first.id %}"
|
||||
style='background: linear-gradient(90deg, #006161 0%, #006161 100%); border-radius: 8px;'
|
||||
|
||||
>
|
||||
{% t shared.view %}
|
||||
</a>
|
||||
@ -44,3 +49,14 @@
|
||||
</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>
|
||||
@ -1,62 +0,0 @@
|
||||
{% assign topic_classname = topic | split: " " %}
|
||||
|
||||
<div class="courses-carousel np-carousel" data-topic="{{ topic_classname | join: '-' | downcase }}">
|
||||
{% if items.any? %}
|
||||
{% assign sorted_items =items | sort: "name" %}
|
||||
{% for course in sorted_items %}
|
||||
|
||||
{% comment %} USED FOR PROGRESS FILTER {% endcomment %}
|
||||
{% assign course_status = "" %}
|
||||
|
||||
{% if course.started? == false %}
|
||||
{% assign course_status = "not-started" %}
|
||||
{% elsif course.completed? %}
|
||||
{% assign course_status = "completed" %}
|
||||
{% elsif course.started? %}
|
||||
{% assign course_status = "in-progress" %}
|
||||
{% endif %}
|
||||
|
||||
{% if topic == "Not Categorized" %}
|
||||
<div class="np-carousel-card {{course_status}}"> {% include "cards_course" with course %}</div>
|
||||
{% else %}
|
||||
{% for category in course.categories %}
|
||||
{% if category.name == topic %}
|
||||
<div class="np-carousel-card {{course_status}}"> {% include "cards_course" with course %}</div>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<script>
|
||||
|
||||
$(document).ready(function(){
|
||||
|
||||
$(".courses-carousel").not('.slick-initialized').slick({
|
||||
slidesToShow: 3,
|
||||
cssEase: 'linear',
|
||||
prevArrow: '<i class="fal fa-chevron-left"></i>',
|
||||
nextArrow: '<i class="fal fa-chevron-right"></i>',
|
||||
infinite: false,
|
||||
responsive: [
|
||||
{
|
||||
breakpoint: 1170,
|
||||
settings: {
|
||||
slidesToShow: 2,
|
||||
}
|
||||
},
|
||||
{
|
||||
breakpoint: 768,
|
||||
settings: {
|
||||
slidesToShow: 1,
|
||||
slidesToScroll: 1,
|
||||
dots: false,
|
||||
arrows: true,
|
||||
}
|
||||
}
|
||||
]
|
||||
});
|
||||
});
|
||||
|
||||
</script>
|
||||
@ -1,37 +0,0 @@
|
||||
<div class="events-carousel np-carousel np-carousel-bg-blue" id="events-carousel">
|
||||
{% if items.any? %}
|
||||
{% for training_event in items %}
|
||||
<div class="np-carousel-card"> {% include "cards_training_event" with training_event %}</div>
|
||||
{% endfor %}
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<script>
|
||||
$(document).ready(function(){
|
||||
|
||||
$(".events-carousel").slick({
|
||||
slidesToShow: 3,
|
||||
prevArrow: '<i class="fal fa-chevron-left"></i>',
|
||||
nextArrow: '<i class="fal fa-chevron-right"></i>',
|
||||
infinite: false,
|
||||
dots: false,
|
||||
arrows: true,
|
||||
responsive: [
|
||||
{
|
||||
breakpoint: 1170,
|
||||
settings: {
|
||||
slidesToShow: 2,
|
||||
}
|
||||
},
|
||||
{
|
||||
breakpoint: 768,
|
||||
settings: {
|
||||
slidesToShow: 1,
|
||||
|
||||
}
|
||||
}
|
||||
]
|
||||
});
|
||||
});
|
||||
|
||||
</script>
|
||||
@ -1,124 +0,0 @@
|
||||
{% assign used_instructor_names = "" %}
|
||||
|
||||
<div class="instructors-carousel np-carousel" id="instructors-carousel">
|
||||
<div class="np-carousel-card">
|
||||
<div class="instructor-slide">
|
||||
<div class="instructor-image" style='height:160px; width: 160px;'>
|
||||
<img style='height: 136px; width: 136px;' src="https://s3.amazonaws.com/static.northpass.com/NorthpassAcademy/headshot_1.jpg" />
|
||||
</div>
|
||||
<div class="instructor-info">
|
||||
<div class="instructor-name">Paula Naba</div>
|
||||
<a href="mailto:paula@northpass.com" target="_blank" class="instructor-email" style='color: #006161;'>paula@northpass.com</a>
|
||||
<div class="instructor-joined">Director of Customer Success</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="np-carousel-card">
|
||||
<div class="instructor-slide">
|
||||
<div class="instructor-image" style='height:160px; width: 160px;'>
|
||||
<img style='height: 136px; width: 136px;' src="https://s3.amazonaws.com/static.northpass.com/NorthpassAcademy/charlie+1.png" />
|
||||
</div>
|
||||
<div class="instructor-info">
|
||||
<div class="instructor-name">Charlie Bencivenga</div>
|
||||
<a href="mailto:cbencivenga@northpass.com" target="_blank" class="instructor-email" style='color: #006161;'>cbencivenga@northpass.com</a>
|
||||
<div class="instructor-joined">Solutions Engineering Manager</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="np-carousel-card">
|
||||
<div class="instructor-slide">
|
||||
<div class="instructor-image" style='height:160px; width: 160px;'>
|
||||
<img style='height: 136px; width: 136px;' src="https://s3.amazonaws.com/static.northpass.com/NorthpassAcademy/headshot_4.jpg" />
|
||||
</div>
|
||||
<div class="instructor-info">
|
||||
<div class="instructor-name">Rob Abrams</div>
|
||||
<a href="mailto:paula@northpass.com" target="_blank" class="instructor-email" style='color: #006161;'>rabrams@northpass.com</a>
|
||||
<div class="instructor-joined">Senior Implementation Manager</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="np-carousel-card">
|
||||
<div class="instructor-slide">
|
||||
<div class="instructor-image" style='height:160px; width: 160px;'>
|
||||
<img style='height: 136px; width: 136px;' src="https://s3.amazonaws.com/static.northpass.com/NorthpassAcademy/headshot_2.jpg" />
|
||||
</div>
|
||||
<div class="instructor-info">
|
||||
<div class="instructor-name">Bridget Cafaro</div>
|
||||
<a href="mailto:paula@northpass.com" target="_blank" class="instructor-email" style='color: #006161;'>bcafaro@northpass.com</a>
|
||||
<div class="instructor-joined">Customer Success Manager</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="np-carousel-card">
|
||||
<div class="instructor-slide">
|
||||
<div class="instructor-image" style='height:160px; width: 160px;'>
|
||||
<img style='height: 136px; width: 136px;' src="https://s3.amazonaws.com/static.northpass.com/NorthpassAcademy/eric.png" />
|
||||
</div>
|
||||
<div class="instructor-info">
|
||||
<div class="instructor-name">Eric Pavan</div>
|
||||
<a href="mailto:epavan@northpass.com" target="_blank" class="instructor-email" style='color: #006161;'>epavan@northpass.com</a>
|
||||
<div class="instructor-joined">Customer Success Manager</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="np-carousel-card">
|
||||
<div class="instructor-slide">
|
||||
<div class="instructor-image" style='height:160px; width: 160px;'>
|
||||
<img style='height: 136px; width: 136px;' src="https://s3.amazonaws.com/static.northpass.com/NorthpassAcademy/brian.png" />
|
||||
</div>
|
||||
<div class="instructor-info">
|
||||
<div class="instructor-name">Brian Bastante</div>
|
||||
<a href="mailto:paula@northpass.com" target="_blank" class="instructor-email" style='color: #006161;'>bbastante@northpass.com</a>
|
||||
<div class="instructor-joined">Technical Support Specialist</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="np-carousel-card">
|
||||
<div class="instructor-slide">
|
||||
<div class="instructor-image" style='height:160px; width: 160px;'>
|
||||
<img style='height: 136px; width: 136px;' src="https://s3.amazonaws.com/static.northpass.com/NorthpassAcademy/headshot_3.png" />
|
||||
</div>
|
||||
<div class="instructor-info">
|
||||
<div class="instructor-name">Kasia Cholewa</div>
|
||||
<a href="mailto:paula@northpass.com" target="_blank" class="instructor-email" style='color: #006161;'>support@northpass.com</a>
|
||||
<div class="instructor-joined">Technical Support Specialist</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
$(document).ready(function(){
|
||||
|
||||
$(".instructors-carousel").slick({
|
||||
slidesToShow: 2.5,
|
||||
prevArrow: '<i class="fal fa-chevron-left"></i>',
|
||||
nextArrow: '<i class="fal fa-chevron-right"></i>',
|
||||
infinite: false,
|
||||
dots: false,
|
||||
arrows: true,
|
||||
responsive: [
|
||||
{
|
||||
breakpoint: 1170,
|
||||
settings: {
|
||||
slidesToShow: 2,
|
||||
}
|
||||
},
|
||||
{
|
||||
breakpoint: 768,
|
||||
settings: {
|
||||
slidesToShow: 1,
|
||||
}
|
||||
}
|
||||
]
|
||||
});
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.instructors-carousel .fa-chevron-right:before {
|
||||
right: -7px !important;
|
||||
}
|
||||
</style>
|
||||
@ -1,56 +0,0 @@
|
||||
<div class="vision-catalog-card" href="{% route course_enrollment, code: course.enrollment_code %}" >
|
||||
<div class="np-card-container">
|
||||
<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" style="background: #fafafa; color: black !important; height: 190px;">
|
||||
<div class="course-title-vision">
|
||||
{{ course.name }}
|
||||
</div>
|
||||
<div class="np-card-content-footer">
|
||||
{% capture course_path %}{% route course, id: course.id %}{% endcapture %}
|
||||
<a class="np-button np-button-wide" href="{{ course_path }}">
|
||||
{% t shared.view %}
|
||||
</a>
|
||||
{% if course.has_to_restart? %}
|
||||
{% include "course_version_outdated_popup", path: course_path %}
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<style>
|
||||
.col-lg-4 {
|
||||
width: 25%;
|
||||
}
|
||||
|
||||
.vision-catalog-card {
|
||||
background: #fafafa;
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
margin-bottom: 120px;
|
||||
font-family: "PlusJakartaSans";
|
||||
font-weight: 700;
|
||||
}
|
||||
.course-title-vision {
|
||||
text-decoration: none !important;
|
||||
}
|
||||
.np-button.np-button-wide {
|
||||
background-color: #cc0033;
|
||||
color: white;
|
||||
display: inline-flex;
|
||||
width: auto;
|
||||
height: 40px;
|
||||
padding-left: 2rem;
|
||||
padding-right: 2rem;
|
||||
border-radius: 4px;
|
||||
margin-left: 150px;
|
||||
}
|
||||
|
||||
</style>
|
||||
@ -0,0 +1,126 @@
|
||||
{% assign top_level_course_categories = '' | split: '' %}
|
||||
{% assign second_level_course_categories = '' | split: '' %}
|
||||
|
||||
{% for course in courses.in_catalog %}
|
||||
|
||||
{% 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>
|
||||
.categories-filter {
|
||||
border-right: 1px solid #ddd;
|
||||
padding-right: 16px;
|
||||
padding-bottom: 32px;
|
||||
margin-right:16px;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<script>
|
||||
$('document').ready(function() {
|
||||
$('.has-sub-categories .top-level-filter').click(function() {
|
||||
$(this).parent().toggleClass('filter-open')
|
||||
})
|
||||
})
|
||||
</script>
|
||||
@ -1,13 +1,14 @@
|
||||
<div class="col-xs-12 np-top-image-spacing np-course-banner">
|
||||
<img
|
||||
src="{{ course.image_url }}"
|
||||
class="np-course-banner-image"
|
||||
alt="{{ course.name }}"
|
||||
/>
|
||||
|
||||
<div class="np-course-info np-course-banner-info">
|
||||
<div class="np-course-title">{{ course.name }}</div>
|
||||
{% include "course_details_review" %}
|
||||
</div>
|
||||
<img
|
||||
src="{{ course.image_url }}"
|
||||
class="np-course-banner-image"
|
||||
alt="{{ course.name }}"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
|
||||
@ -1,41 +0,0 @@
|
||||
{% 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">
|
||||
<strong>{{ activities_count }}</strong>
|
||||
<span class="np-details-label">
|
||||
{% if activities_count == 1 %}Activity{% else %}Activities{% endif %}
|
||||
</span>
|
||||
</div>
|
||||
<div class="np-course-detail">
|
||||
</div>
|
||||
<div class="np-course-detail">
|
||||
{% if course.properties.course_length contains 'missing property' %}
|
||||
missing property: course.properties.course_length
|
||||
{% else %}
|
||||
{% if course.properties.course_length %}
|
||||
{% if course.properties.course_length > 0 %}
|
||||
{{course.properties.course_length}} mins<span class="np-details-label">Duration</span>
|
||||
{% else %}
|
||||
<div> </div>
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.np-course-details {
|
||||
text-shadow: none;
|
||||
float: right;
|
||||
align: center;
|
||||
color: white;
|
||||
font-weight: 700;
|
||||
font-size: 10px;'
|
||||
}
|
||||
</style>
|
||||
@ -13,48 +13,17 @@
|
||||
</span>
|
||||
</div>
|
||||
<div class="np-course-detail">
|
||||
{% if course.properties.course_length contains 'missing property' %}
|
||||
missing property: course.properties.course_length
|
||||
{% else %}
|
||||
{% if course.properties.course_length %}
|
||||
{% if course.properties.course_length > 0 %}
|
||||
<strong>{{course.properties.course_length}}</strong> mins<span class="np-details-label">Duration</span>
|
||||
{% else %}
|
||||
<div> </div>
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
{% unless course.properties.course_length contains 'NULL' %}
|
||||
<strong>{{course.properties.course_length}}</strong>
|
||||
<span class="np-details-label">
|
||||
Duration
|
||||
</span>
|
||||
{% endunless %}
|
||||
</div>
|
||||
{% comment %} <div class="np-course-detail course-detail-rating">
|
||||
<div class='course-detail-rating-stars' style='display: flex; flex-wrap: nowrap;'>
|
||||
{% for i in (1..5) %}
|
||||
{% if course.properties.np_course_rating >= i %}
|
||||
<svg width="20" height="19" viewBox="0 0 20 19" preserveAspectRatio fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M10 0L12.5863 6.44033L19.5106 6.90983L14.1846 11.3597L15.8779 18.0902L10 14.4L4.12215 18.0902L5.81535 11.3597L0.489435 6.90983L7.41374 6.44033L10 0Z" fill="#006161"/>
|
||||
</svg>
|
||||
{% else %}
|
||||
<svg width="20" height="19" viewBox="0 0 20 19" preserveAspectRatio fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path opacity="0.25" d="M10 0L12.5863 6.44033L19.5106 6.90983L14.1846 11.3597L15.8779 18.0902L10 14.4L4.12215 18.0902L5.81535 11.3597L0.489435 6.90983L7.41374 6.44033L10 0Z" fill="#006161"/>
|
||||
</svg>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
<span class="np-details-label" style= 'display: flex;'>
|
||||
{{course.properties.np_course_rating}} <div style='font-weight: 500; padding-left: 5px;'>({{course.properties.np_course_rating_count}}) </div>
|
||||
</span>
|
||||
</div> {% endcomment %}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.course-detail-rating {
|
||||
align-self: flex-end;
|
||||
}
|
||||
.course-detail-rating-stars {
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
@media screen and (max-width: 768px) {
|
||||
.course-detail-rating-stars {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,52 +0,0 @@
|
||||
<h3 class="np-card-heading">
|
||||
Meet the Instructor
|
||||
</h3>
|
||||
<div class='np-flex'>
|
||||
{% for instructor in course.instructors limit: 2 %}
|
||||
<div class="np-content-instructors-content-item">
|
||||
<div class="instructor-image">
|
||||
<img
|
||||
src="{{ instructor.avatar_url }}"
|
||||
class="np-content-instructors-content-image"
|
||||
alt="{{ instructor.name }}"
|
||||
style='border-radius: 50%;'
|
||||
/>
|
||||
</div>
|
||||
<div class="np-content-instructors-content-description" style='margin: auto 1rem;'>
|
||||
<div class="np-content-instructors-content-name">
|
||||
{{ instructor.name }}
|
||||
</div>
|
||||
<div class="np-content-instructors-content-info">
|
||||
{{ instructor.title }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
<style>
|
||||
.instructor-image {
|
||||
background: #555269;
|
||||
border-radius: 50%;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
min-width: 100px;
|
||||
}
|
||||
.instructor-image img {
|
||||
border-radius: 50%;
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
}
|
||||
@media only screen and (min-width: 768px) and ( max-width: 920px) {
|
||||
.np-flex {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
@media only screen and ( max-width: 630px) {
|
||||
.np-flex {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,57 +0,0 @@
|
||||
|
||||
|
||||
<style>
|
||||
|
||||
.np-ratings-container {
|
||||
display:flex;
|
||||
align-items:center;
|
||||
font-size:0.75rem;
|
||||
color:#fff;
|
||||
font-weight:500;
|
||||
}
|
||||
|
||||
.np-ratings-button {
|
||||
background:transparent;
|
||||
outline:none;
|
||||
border: 2px solid transparent;
|
||||
transition:border-color 0.2s;
|
||||
border-radius:4px;
|
||||
cursor:pointer;
|
||||
padding: 1px 6px;
|
||||
}
|
||||
|
||||
.np-ratings-button:hover { border: 2px solid #E6E9EA; }
|
||||
|
||||
.np-course-rating-count {
|
||||
color:#bec2c6;
|
||||
margin-left:3px;
|
||||
}
|
||||
|
||||
.rating-group-static {
|
||||
margin-right:8px;
|
||||
display: inline-flex;
|
||||
}
|
||||
|
||||
.rating-group-static .fa-star,
|
||||
.rating-group-static .fa-star-half {
|
||||
color: #EBECED;
|
||||
font-size: 1.15rem;
|
||||
margin: 0 1px 3px;
|
||||
}
|
||||
|
||||
.rating-group-static .fa-star-half {
|
||||
position:relative;
|
||||
z-index:10;
|
||||
}
|
||||
|
||||
.rating-group-static .fa-star{
|
||||
margin-left: -22px;
|
||||
}
|
||||
|
||||
.rating-group-static .star-gold{ color: #F7BB17; }
|
||||
|
||||
@media (min-width:768px) {
|
||||
.np-ratings-button { margin-right:24px; }
|
||||
}
|
||||
|
||||
</style>
|
||||
@ -1,8 +1,8 @@
|
||||
{% if courses.in_catalog.any? %}
|
||||
<div class="np-catalog-courses row row-with-thumbnails">
|
||||
{% for course in courses.in_catalog %}
|
||||
<div class="col-xs-12 col-md-6 col-lg-4 col-sm-2 np-stretch-content">
|
||||
{% include "catalog_courses" %}
|
||||
<div class="col-xs-12">
|
||||
{% include "cards_catalog" %}
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
@ -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>
|
||||
@ -1,112 +0,0 @@
|
||||
{% assign topic_classname = topic | split: " " %}
|
||||
|
||||
<div class="np-progress-filter-wrapper">
|
||||
{% if label %}
|
||||
<div class="np-progress-filter-label">{{ label }}</div>
|
||||
{% endif %}
|
||||
<div class="progress-filter filter-select-wrapper select-wrapper np-button" data-topic="{{ topic_classname | join: '-' | downcase }}" style="border-radius: 8px;">
|
||||
<select >
|
||||
<option selected disabled hidden>{{ default_option}}</option>
|
||||
<option value="a">All Courses</option>
|
||||
<option value="n">Not Started</option>
|
||||
<option value="i">In Progress</option>
|
||||
<option value="c">Completed</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.np-progress-filter-label {
|
||||
color: rgba(255, 255, 255, 0.5);
|
||||
padding-right: 7px;
|
||||
text-transform: none;
|
||||
font-weight:500;
|
||||
font-size:0.812rem;
|
||||
}
|
||||
.np-progress-filter-wrapper {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
}
|
||||
.filter-select-wrapper {
|
||||
position: relative;
|
||||
padding:0;
|
||||
border: 2px solid rgba(255, 255, 255, 0.25);
|
||||
color: #fff;
|
||||
height:auto;
|
||||
text-transform: none;
|
||||
background: transparent;
|
||||
border-radius:0;
|
||||
}
|
||||
.filter-select-wrapper:hover {
|
||||
background:transparent;
|
||||
color:#fff;
|
||||
}
|
||||
.select-items {
|
||||
position: absolute;
|
||||
background-color: #062531;
|
||||
top: 105%;
|
||||
left: -2px;
|
||||
z-index: 99;
|
||||
width: 102%;
|
||||
border: 2px solid rgba(255, 255, 255, 0.25);
|
||||
border-top:none;
|
||||
}
|
||||
.select-items div {
|
||||
color: rgba(255, 255, 255, 0.5);
|
||||
border-top:none;
|
||||
cursor: pointer;
|
||||
width:100%;
|
||||
padding: 12px 16px;
|
||||
}
|
||||
|
||||
.select-items div:hover { color: rgba(255, 255, 255, 1); }
|
||||
.select-selected {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 9px 66px 9px 20px;
|
||||
position: relative;
|
||||
color:#fff;
|
||||
}
|
||||
.select-selected::after {
|
||||
content:"\f078";
|
||||
font-family: "Font Awesome 5 Pro";
|
||||
position: absolute;
|
||||
width:20px;
|
||||
height:100%;
|
||||
color:rgba(255, 255, 255, 0.5);
|
||||
right:10px;
|
||||
top:0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size:1rem;
|
||||
}
|
||||
.select-selected::before {
|
||||
content:"";
|
||||
position: absolute;
|
||||
width:20px;
|
||||
height:100%;
|
||||
border-left:2px solid rgba(255, 255, 255, 0.25);
|
||||
right:20px;
|
||||
top:0;
|
||||
}
|
||||
.select-selected.select-arrow-active::after { transform: rotate(180deg); }
|
||||
.same-as-selected,
|
||||
.filter-select-wrapper select,
|
||||
.select-hide {
|
||||
display: none;
|
||||
}
|
||||
.mo-filter-wrapper {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
.select-items div:hover,
|
||||
.same-as-selected {
|
||||
background-color: #062531;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,3 +1,15 @@
|
||||
<div class="footer-terms">
|
||||
<hr />
|
||||
<p>Please see our <a href="https://jnjinstitute.com/en-us/privacy-policy" target="_blank">Privacy Policy</a> and <a href="https://jnjinstitute.com/en-us/cookie-policy" target="_blank">Cookie Policy</a>. Use of this site constitutes your consent to the application of such laws and regulations and to our Privacy Policy and Cookie Policy. Your use of the information on this site is subject to the terms of our <a href="https://jnjinstitute.com/en-us/terms-of-use" target="_blank">Terms of Use</a>. <a href="mailto:JnJInstitute@its.jnj.com" target="_blank">Contact Us</a> with any questions or search this site for more information.</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 North America, EMEA, Latin America and Asia Pacific. 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>
|
||||
|
||||
<p>093430-180612</p>
|
||||
</div>
|
||||
<footer class="np-footer">
|
||||
<div class="np-footer-top">
|
||||
{% if website_footer.show_navigation_links? %}
|
||||
@ -51,12 +63,10 @@
|
||||
{% if social_media_link.name == 'linkedin' %}
|
||||
<i class="np-footer-social-links-icon
|
||||
fab fa-linkedin-in"
|
||||
style='color: #006161;'
|
||||
></i>
|
||||
{% else %}
|
||||
<i class="np-footer-social-links-icon
|
||||
fab fa-{{ social_media_link.name }}"
|
||||
style='color: #006161;'
|
||||
></i>
|
||||
{% endif %}
|
||||
</a>
|
||||
@ -65,15 +75,16 @@
|
||||
</ul>
|
||||
{% endif %}
|
||||
</nav>
|
||||
<div class="copyright">All contents © Johnson & Johnson Services, Inc. 2022. All Rights Reserved.</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 np-fc-white np-opacity-50">
|
||||
<div class="np-footer-support-item np-footer-support-help">
|
||||
{% t .need_help %}
|
||||
</div>
|
||||
<div class="np-footer-support-item np-footer-support-email np-fc-white np-opacity-50">
|
||||
<div class="np-footer-support-item np-footer-support-email">
|
||||
{% t .email %}
|
||||
</div>
|
||||
<a
|
||||
@ -90,19 +101,43 @@
|
||||
|
||||
<style>
|
||||
.np-footer {
|
||||
background: #dadada !important;
|
||||
background: #63666a !important;
|
||||
padding: 1rem 0;
|
||||
}
|
||||
.np-powered-by {
|
||||
background: #dadada !important;
|
||||
background: #63666a !important;
|
||||
text-transform: uppercase !important;
|
||||
font-size: 12px !important;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.np-footer-logo-image {
|
||||
height:50px;
|
||||
opacity:1;
|
||||
filter:none;
|
||||
filter: brightness(0) invert(1);
|
||||
}
|
||||
|
||||
.np-footer-social-links-icon,
|
||||
.copyright {
|
||||
color:#fff;
|
||||
}
|
||||
|
||||
.footer-terms {
|
||||
padding: 1rem 1.25rem;
|
||||
}
|
||||
|
||||
.footer-terms hr {
|
||||
margin-bottom:32px;
|
||||
}
|
||||
|
||||
.footer-terms a {
|
||||
color: #c03;
|
||||
text-decoration:none;
|
||||
}
|
||||
|
||||
@media (min-width:768px) {
|
||||
.np-footer, .footer-terms {
|
||||
padding: 1rem 4%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
@ -5,6 +5,7 @@
|
||||
<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">
|
||||
|
||||
|
||||
@ -1,4 +1,15 @@
|
||||
<header class="np-header np-header-color" >
|
||||
{% if current_person.signed_in? %}
|
||||
{% unless current_person.properties.additional_user_info_complete %}
|
||||
{% unless current_person.email contains "+preview" %}
|
||||
<script>
|
||||
console.log('user not completed additional info - redirect to additional signup')
|
||||
window.location.replace('/app/sign-up-cont')
|
||||
</script>
|
||||
{% endunless %}
|
||||
{% 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? %}
|
||||
@ -40,6 +51,27 @@
|
||||
|
||||
<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 Topics
|
||||
{% else %}
|
||||
{{ link.label }}
|
||||
{% endif %}
|
||||
|
||||
</a>
|
||||
</li>
|
||||
{% endunless %}
|
||||
{% endfor %}
|
||||
{% endif %}
|
||||
{% for website_navigation in navigations.header_navigations_external %}
|
||||
<li class= "np-header-desktop-nav-item">
|
||||
<a
|
||||
@ -51,38 +83,6 @@
|
||||
</a>
|
||||
</li>
|
||||
{% endfor %}
|
||||
<li class= "np-header-desktop-nav-item">
|
||||
<a
|
||||
href="#popular-topics"
|
||||
class="np-header-desktop-nav-link np-header-font-color"
|
||||
>
|
||||
Popular Topics
|
||||
</a>
|
||||
</li>
|
||||
<li class= "np-header-desktop-nav-item">
|
||||
<a
|
||||
href="#events"
|
||||
class="np-header-desktop-nav-link np-header-font-color"
|
||||
>
|
||||
Professional Events
|
||||
</a>
|
||||
</li>
|
||||
<li class= "np-header-desktop-nav-item">
|
||||
<a
|
||||
href="#faq"
|
||||
class="np-header-desktop-nav-link np-header-font-color"
|
||||
>
|
||||
FAQ
|
||||
</a>
|
||||
</li>
|
||||
<li class= "np-header-desktop-nav-item">
|
||||
<a
|
||||
href="#contact"
|
||||
class="np-header-desktop-nav-link np-header-font-color"
|
||||
>
|
||||
Contact Us
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@ -124,9 +124,6 @@
|
||||
</div>
|
||||
</div>
|
||||
<nav class="np-header-avatar-tooltip-navigation">
|
||||
<a class="np-header-avatar-tooltip-navigation-link" onclick="buildURL(window.location.pathname)" style="cursor:pointer">
|
||||
Default
|
||||
</a>
|
||||
{% unless current_school.sso_active? %}
|
||||
<a
|
||||
class="np-header-avatar-tooltip-navigation-link"
|
||||
@ -210,33 +207,5 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% comment %}
|
||||
|
||||
{% include "messages" %}
|
||||
{% endcomment %}
|
||||
<script>
|
||||
if (window.location.pathname === "/app") {
|
||||
const headerTag = document.querySelector(".np-header");
|
||||
headerTag.classList.add("np-header-absolute");
|
||||
}
|
||||
|
||||
$(".np-header-desktop-nav-link[href='https://change_to_mail.com'").attr("href", "mailto:support@northpass.com")
|
||||
/*
|
||||
function buildURL(path) {
|
||||
const url = "https://academy.getpixel.io" + path + "?first_name={{current_person.first_name}}&last_name={{current_person.last_name}}&email={{current_person.email}}"
|
||||
window.location.href = url
|
||||
}
|
||||
*/
|
||||
</script>
|
||||
|
||||
|
||||
<style>
|
||||
|
||||
.np-header {
|
||||
background: white!important;
|
||||
}
|
||||
|
||||
.np-header-nav-list {
|
||||
margin: 0 32px;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
<div class="row categories-row" id="popular-topics">
|
||||
<div class="{{ class }}">
|
||||
<a class="np-card" href="/app/catalog?filter%5Bcategory_uuid%5D%5Bin%5D%5B%5D=e2baf8b8-471a-43de-94f2-c8314395f4a9">
|
||||
<div class="row homepage-cards">
|
||||
{% comment %} <div class="{{ class }}">
|
||||
<a class="np-card" href="/app/training_events">
|
||||
<div class="category-card-container">
|
||||
<img
|
||||
class="np-categories-image"
|
||||
@ -29,7 +29,7 @@
|
||||
<div class="arrow-icon"><i class="fal fa-long-arrow-right"></i></div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div> {% endcomment %}
|
||||
|
||||
<div class="{{ class }}" >
|
||||
<a class="np-card" href="/app/catalog?filter%5Bcategory_uuid%5D%5Bin%5D%5B%5D=2a228ad1-225d-47ac-af0f-153c2b2fd689">
|
||||
@ -66,59 +66,5 @@
|
||||
|
||||
|
||||
<style>
|
||||
.categories-row {
|
||||
padding-top:64px;
|
||||
}
|
||||
|
||||
.categories-row .np-card {
|
||||
padding:0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
text-decoration:none;
|
||||
cursor:pointer;
|
||||
}
|
||||
|
||||
.category-card-container {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
height: 200px;
|
||||
}
|
||||
|
||||
.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: #fafafa;
|
||||
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;
|
||||
}
|
||||
|
||||
.course-title-vision {
|
||||
color: #212121;
|
||||
}
|
||||
</style>
|
||||
@ -1,290 +0,0 @@
|
||||
<div class='events-wrapper' id="events">
|
||||
<div class='events'>
|
||||
<div class='events-header'>
|
||||
<div class='events-header-title' style='color: black'>
|
||||
Professional Events
|
||||
</div>
|
||||
</div>
|
||||
<div class='events-event'>
|
||||
<div class='events-event-left'>
|
||||
<div class='events-event-left-title'>
|
||||
Choosing the Right Lens for Managing Patient Expectations and Visual Outcomes
|
||||
</div>
|
||||
<div class='events-event-left-subtitle'>
|
||||
Join our professional surgeons who guide you through patient lens choices.
|
||||
</div>
|
||||
<div class='events-event-left-date'>
|
||||
June 12, 2022 @ 2PM EST
|
||||
</div>
|
||||
<a class='events-event-left-button np-button np-top-button' href="https://visionexcellence.northpass.com/app/training_sessions/3e968f0f-c548-4592-931e-cc0bdcc7fe89">
|
||||
Register</a>
|
||||
</div>
|
||||
<div class='events-event-right'>
|
||||
<div class='events-event-right-title'>
|
||||
Hosts
|
||||
</div>
|
||||
<div class='events-event-right-person'>
|
||||
<img class='events-event-right-person-image' src='https://media-exp1.licdn.com/dms/image/C4E03AQGmIAB8KzcLyg/profile-displayphoto-shrink_400_400/0/1563204508254?e=1655337600&v=beta&t=1TMzm2rj1PjGWLyg_UlI1cEOHN_wDh1d0FLzGdqh6qY'>
|
||||
<div class='events-event-right-person-right'>
|
||||
<div class='events-event-right-person-right-name'>
|
||||
Giovanna E. Olivares
|
||||
</div>
|
||||
<div class='events-event-right-person-right-title'>
|
||||
Director, Professional Education
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class='events-event-right-person'>
|
||||
<img class='events-event-right-person-image' src='https://media-exp1.licdn.com/dms/image/C5603AQEbE5y7nUFrYQ/profile-displayphoto-shrink_400_400/0/1605247907015?e=1655337600&v=beta&t=6A9EDZYNqD2vNoU8EJELK4i9zSauRZsxkf4tSuJ73ko'>
|
||||
<div class='events-event-right-person-right'>
|
||||
<div class='events-event-right-person-right-name'>
|
||||
Dr. Monica Jong, PhD
|
||||
</div>
|
||||
<div class='events-event-right-person-right-title'>
|
||||
Global Director of Professional Education
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class='events-event'>
|
||||
<div class='events-event-left'>
|
||||
<div class='events-event-left-title'>
|
||||
ASCRS:The TECNIS® Story
|
||||
</div>
|
||||
<div class='events-event-left-subtitle'>
|
||||
|
||||
</div>
|
||||
<div class='events-event-left-date'>
|
||||
July 17th, 2022
|
||||
</div>
|
||||
<a class='events-event-left-button np-button np-top-button' href="https://visionexcellence.northpass.com/app/training_sessions/85fc3148-2ab1-4c71-b261-79d15dadb573">
|
||||
Register</a>
|
||||
</div>
|
||||
<div class='events-event-right'>
|
||||
<div class='events-event-right-title'>
|
||||
Host
|
||||
</div>
|
||||
<div class='events-event-right-person'>
|
||||
<img class='events-event-right-person-image' src='https://media-exp1.licdn.com/dms/image/C4E03AQF-xhRezHFBrw/profile-displayphoto-shrink_400_400/0/1572213065146?e=1655337600&v=beta&t=yDVM3z1qTt97FbPcmoSuRKtCOfrRTKc4NAgEg3OKx2U'>
|
||||
<div class='events-event-right-person-right'>
|
||||
<div class='events-event-right-person-right-name'>
|
||||
Dr. George Crawford Jr.
|
||||
</div>
|
||||
<div class='events-event-right-person-right-title'>
|
||||
General Surgeon Focused on Medical Education
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.events-wrapper {
|
||||
background-color:#f4f4f4;
|
||||
background: url(https://s3.amazonaws.com/static.northpass.com/J%26J/conference-audience.jpg) no-repeat;
|
||||
background-size: auto;
|
||||
background-position: center;
|
||||
}
|
||||
|
||||
.events {
|
||||
margin: auto;
|
||||
width: 100%;
|
||||
max-width: 1290px;
|
||||
padding: 60px 32px;
|
||||
}
|
||||
|
||||
.events-header {
|
||||
margin: 0 auto 32px;
|
||||
max-width:850px;
|
||||
}
|
||||
|
||||
.events-header-title {
|
||||
font-size: 26px;
|
||||
line-height: 32px;
|
||||
font-weight: 800;
|
||||
text-align: center;
|
||||
color:#fff;
|
||||
}
|
||||
|
||||
.events-header-subtitle {
|
||||
font-size: 21px;
|
||||
line-height: 29px;
|
||||
font-weight: 400;
|
||||
text-align: center;
|
||||
margin-top: 24px;
|
||||
}
|
||||
|
||||
.events-event {
|
||||
margin-bottom: 32px;
|
||||
padding: 30px;
|
||||
border-radius: 10px;
|
||||
background-color: #fff;
|
||||
box-shadow: 0 2px 20px 10px rgb(0 0 0 / 5%);
|
||||
}
|
||||
|
||||
.events-event-left {
|
||||
text-align:center;
|
||||
}
|
||||
|
||||
|
||||
.events-event-left-title {
|
||||
font-size: 24px;
|
||||
line-height: 30px;
|
||||
font-weight: 800;
|
||||
color: rgb(6, 40, 70);
|
||||
margin: 10px 0 20px;
|
||||
color:#cc0033;
|
||||
}
|
||||
|
||||
.events-event-left-subtitle {
|
||||
font-size: 21px;
|
||||
font-weight: 400;
|
||||
color: rgba(0, 0, 0, 0.75);
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.events-event-left-date {
|
||||
font-size: 16px;
|
||||
line-height:22px;
|
||||
font-weight: 700;
|
||||
color: rgb(6, 40, 70);
|
||||
margin: 10px 0;
|
||||
}
|
||||
|
||||
.events-event-left-button {
|
||||
padding: 16px 45px;
|
||||
margin-top: 40px;
|
||||
}
|
||||
|
||||
.events-event-right {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 32px 0;
|
||||
border-top: 1px solid #ccc;
|
||||
border-top: 1px solid rgba(0,0,0,.15);
|
||||
margin-top: 35px;
|
||||
}
|
||||
|
||||
.events-event-right-title {
|
||||
font-size: 16px;
|
||||
line-height:22px;
|
||||
font-weight: 800;
|
||||
color: #9BA9B5;
|
||||
}
|
||||
|
||||
.events-event-right-person {
|
||||
display: flex;
|
||||
margin: 30px 0;
|
||||
}
|
||||
|
||||
.events-event-right-person-image {
|
||||
border-radius: 50%;
|
||||
height: 52px;
|
||||
}
|
||||
|
||||
.events-event-right-person-right {
|
||||
margin-left: 20px;
|
||||
}
|
||||
|
||||
.events-event-right-person-right-name {
|
||||
color: rgb(6, 40, 70);
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
margin-bottom: 7px;
|
||||
}
|
||||
|
||||
.events-event-right-person-right-title {
|
||||
color: rgb(38, 49, 61);
|
||||
font-size: 16px;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
@media (min-width:768px) and (max-width:1169px) {
|
||||
.events-event {
|
||||
padding: 48px;
|
||||
}
|
||||
|
||||
.events-event-left {
|
||||
width: 65%;
|
||||
}
|
||||
|
||||
.events-event-right {
|
||||
width: 35%;
|
||||
margin-left: 45px;
|
||||
}
|
||||
|
||||
.events-event-right-person {
|
||||
display: block;
|
||||
margin: 16px 0;
|
||||
}
|
||||
|
||||
.events-event-right-person-image {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.events-event-left-subtitle {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@media (min-width:768px) {
|
||||
|
||||
.events {
|
||||
padding: 120px 32px;
|
||||
}
|
||||
|
||||
.events-header {
|
||||
margin-bottom:50px;
|
||||
}
|
||||
|
||||
.events-header-title {
|
||||
font-size: 43px;
|
||||
line-height:51px;
|
||||
}
|
||||
|
||||
.events-header-subtitle {
|
||||
font-size: 21px;
|
||||
width: 75%;
|
||||
margin: 40px auto 0;
|
||||
}
|
||||
|
||||
.events-event {
|
||||
padding: 50px 60px;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.events-event-left {
|
||||
width: 55%;
|
||||
text-align:left;
|
||||
}
|
||||
|
||||
.events-event-left-title {
|
||||
font-size: 28px;
|
||||
margin-top:0;
|
||||
}
|
||||
|
||||
.events-event-left-date {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.events-event-right {
|
||||
width:45%;
|
||||
margin-left: 70px;
|
||||
margin-top:0;
|
||||
padding:0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
border:none;
|
||||
}
|
||||
|
||||
.events-event-right-title {
|
||||
font-size: 21px;
|
||||
line-height:29px;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
@ -1,4 +1,4 @@
|
||||
<div class="homepage-hero-carousel">
|
||||
<div class="homepage-hero-carousel" style="display:none;">
|
||||
<div class="np-homepage-hero custom-flex">
|
||||
<img class="np-homepage-hero-image"
|
||||
src="https://s3.amazonaws.com/static.northpass.com/J%26J/pexels-andrea-piacquadio-3768131.jpg"
|
||||
@ -43,9 +43,14 @@
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function initializeCarousel(slickContainerClass, visibleSlides) {
|
||||
$(slickContainerClass).slick({
|
||||
slidesToShow: visibleSlides,
|
||||
$(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,
|
||||
@ -53,11 +58,11 @@
|
||||
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>'
|
||||
});
|
||||
}
|
||||
|
||||
$(document).ready(function () {
|
||||
initializeCarousel('.homepage-hero-carousel', 1)
|
||||
})
|
||||
|
||||
});
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
@ -0,0 +1,64 @@
|
||||
<div class="sidebar-content-block login-register-block">
|
||||
{% 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>
|
||||
|
||||
.homepage-login-form {
|
||||
width:auto;
|
||||
margin-bottom:32px;
|
||||
display:block;
|
||||
}
|
||||
|
||||
.register-btn {
|
||||
color:#fff!important;
|
||||
}
|
||||
|
||||
</style>
|
||||
@ -1,28 +0,0 @@
|
||||
{% if learning_path.instructors.any? %}
|
||||
<div class="np-card-content-divider">
|
||||
<h3 class="np-card-heading">
|
||||
{% t shared.instructors %}
|
||||
</h3>
|
||||
<div class="np-content-instructors-content row">
|
||||
{% for instructor in learning_path.instructors %}
|
||||
<div class="np-content-instructors-content-item col-xs-12 col-lg">
|
||||
<div class='instructor-image'>
|
||||
<img
|
||||
src="{{ instructor.avatar_url }}"
|
||||
class="np-content-instructors-content-image"
|
||||
alt="{{ instructor.name }}"
|
||||
>
|
||||
</div>
|
||||
<div class="np-content-instructors-content-description">
|
||||
<div class="np-content-instructors-content-name">
|
||||
{{ instructor.name }}
|
||||
</div>
|
||||
<div class="np-content-instructors-content-info np-text-light">
|
||||
{{ instructor.title }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
@ -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>
|
||||
@ -1,80 +0,0 @@
|
||||
<div class="np-progress-ring-wrapper">
|
||||
<svg
|
||||
class="progress-ring"
|
||||
width="{{ size }}"
|
||||
height="{{ size }}">
|
||||
<circle
|
||||
class="progress-ring__circle circle-{{name}}"
|
||||
stroke="#006161"
|
||||
stroke-width="10"
|
||||
fill="transparent"
|
||||
r="52"
|
||||
cx="60"
|
||||
cy="60"/>
|
||||
<circle
|
||||
class="progress-ring__circle circle-bg"
|
||||
stroke="{{ stroke_color_bg }}"
|
||||
stroke-width="10"
|
||||
fill="transparent"
|
||||
r="52"
|
||||
cx="60"
|
||||
cy="60"/>
|
||||
<text x="50%" y="50%" text-anchor="middle" stroke="t#fff" stroke-width="1px" fill="#fff" dy=".3em">{{count}}</text>
|
||||
</svg>
|
||||
<h3 class="np-card-content-title np-progress-circle-label">
|
||||
{{name}}
|
||||
</h3>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
document.addEventListener("DOMContentLoaded", function() {
|
||||
var circle = document.getElementsByClassName("circle-{{name}}")[0];
|
||||
var radius = circle.r.baseVal.value;
|
||||
var circumference = radius * 2 * Math.PI;
|
||||
|
||||
circle.style.strokeDasharray = `${circumference} ${circumference}`;
|
||||
circle.style.strokeDashoffset = `${circumference}`;
|
||||
|
||||
function setProgress(percent) {
|
||||
const offset = circumference - percent * circumference;
|
||||
circle.style.strokeDashoffset = offset;
|
||||
}
|
||||
setProgress('{{ count | divided_by: total }}')
|
||||
})
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.np-progress-ring-wrapper {
|
||||
flex: 0;
|
||||
flex-direction: column;
|
||||
display: flex;
|
||||
width: 100%;
|
||||
padding: 1.5rem 1rem 1rem 1rem;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.progress-ring circle { stroke-linecap: round; }
|
||||
.progress-ring text { font-size:2rem; }
|
||||
.progress-ring__circle {
|
||||
transition: stroke-dashoffset 0.35s;
|
||||
transform: rotate(-90deg);
|
||||
transform-origin: center;
|
||||
}
|
||||
|
||||
.np-progress-circle-label {
|
||||
color:#fff;
|
||||
text-transform: uppercase;
|
||||
opacity:0.35;
|
||||
font-size:0.875rem;
|
||||
margin-top:1rem;
|
||||
}
|
||||
|
||||
@media (min-width:768px) {
|
||||
.np-progress-ring-wrapper { padding: 1.5rem 0.4rem 1rem 0.4rem;}
|
||||
}
|
||||
|
||||
@media (min-width:1170px) {
|
||||
.progress-ring text { font-size:2.5rem; }
|
||||
.np-progress-ring-wrapper { padding: 1.5rem 1rem 1rem 1rem;}
|
||||
}
|
||||
</style>
|
||||
@ -1,17 +0,0 @@
|
||||
<div class="homepage-contact-section np-homepage-featured np-max-width" id="contact">
|
||||
<div class="np-homepage-headline">Contact us to learn more</div>
|
||||
<a class="np-button np-top-button
|
||||
" href="#">Contact us</a>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.homepage-contact-section {
|
||||
text-align:center;
|
||||
margin-bottom:75px;
|
||||
}
|
||||
|
||||
.homepage-contact-section .np-button {
|
||||
margin-top:32px;
|
||||
padding: 24px 40px;
|
||||
}
|
||||
</style>
|
||||
@ -1,106 +0,0 @@
|
||||
<div class="np-homepage-featured np-faq np-max-width" id="faq">
|
||||
<div class="np-homepage-featured-text">
|
||||
<div class="np-homepage-headline">
|
||||
Frequently Asked Questions
|
||||
</div>
|
||||
</div>
|
||||
<div class="row np-faqs" style='margin:0;'>
|
||||
<div class="col-12 col-lg-6">
|
||||
<div class="np-accordion">
|
||||
<div class="accordion-btn">
|
||||
<i class="fal fa-plus"></i>
|
||||
<div class="accordion-title"><strong>Q:</strong> How do I get started with J&J Vision Courses?</div>
|
||||
</div>
|
||||
<div class="accordion-panel">
|
||||
<div class="accordion-panel-content">
|
||||
<p><strong>A:</strong> Easy! Click on any of the above "Start Course" buttons and you'll be asked to register for the Vision Excellence Institute.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="np-accordion">
|
||||
<div class="accordion-btn">
|
||||
<i class="fal fa-plus"></i>
|
||||
<div class="accordion-title"><strong>Q:</strong> Do I need to pay for any courses?</div>
|
||||
</div>
|
||||
<div class="accordion-panel">
|
||||
<div class="accordion-panel-content">
|
||||
<p><strong>A:</strong> Absoutlely not! These educational resources are J&J Vision's commitment to your professional and personal well-being and are all free of charge. We will never surprise you with hidden costs or a paywalled course. </p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="np-accordion">
|
||||
<div class="accordion-btn">
|
||||
<i class="fal fa-plus"></i>
|
||||
<div class="accordion-title"><strong>Q:</strong> There are a lot of courses, which one should I start with as a new learner?</div>
|
||||
</div>
|
||||
<div class="accordion-panel">
|
||||
<div class="accordion-panel-content">
|
||||
<p><strong>A:</strong> We recommend starting with the Getting Started with J&J Vision Course. If you don't see it on your homepage, please contact us using the button below. </p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 col-lg-6">
|
||||
<div class="np-accordion">
|
||||
<div class="accordion-btn">
|
||||
<i class="fal fa-plus"></i>
|
||||
<div class="accordion-title"><strong>Q:</strong> I cannot find a course on a topic, how should I share this feedback?</div>
|
||||
</div>
|
||||
<div class="accordion-panel">
|
||||
<div class="accordion-panel-content">
|
||||
<p><strong>A:</strong> Thank you for letting us know that you can't find a course! Please use the contact us button below to submit a note. Our team is happy to assist.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="np-accordion">
|
||||
<div class="accordion-btn">
|
||||
<i class="fal fa-plus"></i>
|
||||
<div class="accordion-title"><strong>Q:</strong> I'm a new surgeon/doctor. Do you have podcasts or webinars that would help me start my career?</div>
|
||||
</div>
|
||||
<div class="accordion-panel">
|
||||
<div class="accordion-panel-content">
|
||||
<p><strong>A:</strong> Great question and welcome to the world of Ophthamology! Our Vision Podcast Series and Professional Webinars are great places to start for those types of media. Please scroll up to find both of them on this page! </p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="np-accordion">
|
||||
<div class="accordion-btn">
|
||||
<i class="fal fa-plus"></i>
|
||||
<div class="accordion-title"><strong>Q:</strong> I'm interested in sharing these courses with my co-workers, nurses, and doctors. How can I do that?</div>
|
||||
</div>
|
||||
<div class="accordion-panel">
|
||||
<div class="accordion-panel-content">
|
||||
<p><strong>A:</strong> Excellent, we always look forward to partnering with more professionals in the space. Please feel free to share a course of interest or the Institute's URL with those who may be interested. They can then make their account and starting their educational journey!</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.clicked {
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
.accordion-panel {
|
||||
border-radius: 0 0 8px 8px;
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
let accordions = document.getElementsByClassName("accordion-btn");
|
||||
|
||||
for (let i = 0; i < accordions.length; i++) {
|
||||
accordions[i].addEventListener("click", function() {
|
||||
this.querySelector('.fal').classList.toggle("fa-plus");
|
||||
this.querySelector('.fal').classList.toggle("fa-minus");
|
||||
this.classList.toggle("clicked");
|
||||
let panel = this.nextElementSibling;
|
||||
panel.classList.toggle("panel-open");
|
||||
if (panel.style.maxHeight) {
|
||||
panel.style.maxHeight = null;
|
||||
} else {
|
||||
panel.style.maxHeight = panel.scrollHeight + "px";
|
||||
}
|
||||
});
|
||||
}
|
||||
</script>
|
||||
@ -1,27 +0,0 @@
|
||||
<div class="np-homepage-featured np-homepage-topics np-max-width">
|
||||
<div class="np-homepage-featured-text">
|
||||
<div class="np-homepage-headline">
|
||||
Popular Topics
|
||||
</div>
|
||||
</div>
|
||||
<div class="np-topics-list row">
|
||||
<div class="col-xs-12 np-stretch-content">
|
||||
<a class="np-top-button np-button np-button-secondary topic-button" href="https://support.northpass.com/en/articles/5119428-course-publishing">Course Publishing</a>
|
||||
<a class="np-top-button np-button np-button-secondary topic-button" href="https://support.northpass.com/en/articles/3725263-northpass-course-marketplace">Course Marketplace</a>
|
||||
<a class="np-top-button np-button np-button-secondary topic-button" href="https://support.northpass.com/en/articles/5469361-iorad-integration">Interactive Content</a>
|
||||
<a class="np-top-button np-button np-button-secondary topic-button" href="https://support.northpass.com/en/articles/3310302-what-is-a-learning-path-and-how-do-i-use-it">Learning Paths</a>
|
||||
<a class="np-top-button np-button np-button-secondary topic-button" href="https://support.northpass.com/en/articles/3310269-overview-of-authentication-options">Authentication</a>
|
||||
<a class="np-top-button np-button np-button-secondary topic-button" href="https://support.northpass.com/en/articles/3310239-edit-domain-name">Edit Domain Name</a>
|
||||
<a class="np-top-button np-button np-button-secondary topic-button" href="https://support.northpass.com/en/collections/1919694-analytics">Analytics</a>
|
||||
<a class="np-top-button np-button np-button-secondary topic-button" href="https://support.northpass.com/en/articles/3310282-instructor-led-training">Instructor Led Training</a>
|
||||
<a class="np-top-button np-button np-button-secondary topic-button" href="https://support.northpass.com/en/collections/2428172-apps-integrations">Integrations</a>
|
||||
<a class="np-top-button np-button np-button-secondary topic-button" href="https://support.northpass.com/en/collections/1919697-advanced-options">Advanced Options</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.topic-button {
|
||||
border-radius: 8px;
|
||||
}
|
||||
</style>
|
||||
@ -1,76 +0,0 @@
|
||||
{% capture quotes %}
|
||||
<svg width="52" height="40" viewBox="0 0 52 40" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M12.656 39.76C9.072 39.76 6.048 38.3787 3.584 35.616C1.19467 32.7787 0 29.12 0 24.64C0 21.056 0.858667 17.584 2.576 14.224C4.29333 10.864 6.68267 7.91467 9.744 5.376C12.0458 3.46723 14.5797 1.98056 17.3458 0.916004C19.0264 0.269172 20.8915 0.900303 22.0271 2.29798C23.9806 4.70233 22.9585 8.2866 20.493 10.1624C19.6235 10.8239 18.8405 11.5431 18.144 12.32C16.2027 14.4853 15.232 16.3147 15.232 17.808C15.232 18.48 15.3813 19.2267 15.68 20.048C16.0533 20.7947 16.9493 21.5787 18.368 22.4C20.2347 23.5947 21.5413 24.9013 22.288 26.32C23.0347 27.664 23.408 29.232 23.408 31.024C23.408 33.712 22.4 35.84 20.384 37.408C18.368 38.976 15.792 39.76 12.656 39.76ZM40.32 39.76C36.736 39.76 33.712 38.3787 31.248 35.616C28.8587 32.7787 27.664 29.12 27.664 24.64C27.664 21.056 28.5227 17.584 30.24 14.224C31.9573 10.864 34.3467 7.91467 37.408 5.376C39.7098 3.46723 42.2437 1.98056 45.0098 0.916003C46.6904 0.269172 48.5555 0.900303 49.6911 2.29797C51.6446 4.70233 50.6225 8.2866 48.157 10.1624C47.2875 10.8239 46.5045 11.5431 45.808 12.32C43.8667 14.4853 42.896 16.3147 42.896 17.808C42.896 18.48 43.0453 19.2267 43.344 20.048C43.7173 20.7947 44.6133 21.5787 46.032 22.4C47.8987 23.5947 49.2053 24.9013 49.952 26.32C50.6987 27.664 51.072 29.232 51.072 31.024C51.072 33.712 50.064 35.84 48.048 37.408C46.032 38.976 43.456 39.76 40.32 39.76Z" fill="url(#paint0_linear_2_541)"/>
|
||||
<defs>
|
||||
<linearGradient id="paint0_linear_2_541" x1="1.24909e-07" y1="19.88" x2="53.648" y2="19.88" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#006161"/>
|
||||
<stop offset="1" stop-color="#006161"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
</svg>
|
||||
{% endcapture %}
|
||||
|
||||
<div class="np-homepage-featured np-homepage-tips-tricks np-max-width">
|
||||
<div class="np-homepage-featured-text">
|
||||
<div class="np-homepage-headline">
|
||||
Testimonials From Our Customers
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="tips-tricks-carousel np-carousel" id="tips-tricks-carousel">
|
||||
<div class="np-carousel-card">
|
||||
<div class="quote-block np-carousel-bg-blue">
|
||||
<i class="quotes-left"> {{quotes}} </i>
|
||||
<div class="quote">
|
||||
Northpass is an easy-to-manage LMS with the freedom to create and scale learning programs the way we want. Ultra-fast authoring and intelligent administration, along with integrated learning experiences. Plus, responsive support.
|
||||
</div>
|
||||
</div>
|
||||
<div class="quote-author-info">
|
||||
Administrator in Real Estate<br>
|
||||
<span>> 1000 employees</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="np-carousel-card">
|
||||
<div class="quote-block np-carousel-bg-blue">
|
||||
<i class="quotes-left"> {{quotes}} </i>
|
||||
<div class="quote ">
|
||||
Northpass is an LMS with the learner experience front and center. Their UI principles lead to a clean and focused learner experience that removes the typical distractions of finding and beginning courses in an LMS. They have over the years made significant investments into the admin experience and platform integrations which have helped it grow into areas where other established players would have had a leg up. Their customer success management approach is excellent and one that I routinely use as the bar with other software vendors we utilize.
|
||||
</div>
|
||||
</div>
|
||||
<div class="quote-author-info">
|
||||
Executive Sponsor in Retail<br>
|
||||
<span>> 1000 employees</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="np-carousel-card">
|
||||
<div class="quote-block np-carousel-bg-blue">
|
||||
<i class="quotes-left"> {{quotes}} </i>
|
||||
<div class="quote ">
|
||||
The ability to build a learning management for both internal employees and external clients is harder to find than I would have thought. Because Northpass is focused solely on the ability to build on-demand training, it's simplicity allows you to use those courses in whatever way you want/need.
|
||||
</div>
|
||||
</div>
|
||||
<div class="quote-author-info">
|
||||
Client Enablement Manager Mid-Market<br>
|
||||
<span>51-1000 employees</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<script>
|
||||
$(document).ready(function(){
|
||||
|
||||
$("#tips-tricks-carousel").slick({
|
||||
slidesToShow: 1,
|
||||
slidesToScroll: 1,
|
||||
cssEase: 'linear',
|
||||
prevArrow: '<i class="fal fa-chevron-left"></i>',
|
||||
nextArrow: '<i class="fal fa-chevron-right"></i>',
|
||||
infinite: true,
|
||||
adaptiveHeight: true
|
||||
});
|
||||
});
|
||||
|
||||
</script>
|
||||
@ -1,26 +0,0 @@
|
||||
<nav class="np-sub-navigation">
|
||||
<div class="np-sub-navigation-content">
|
||||
{% for link in navigations.sub_navigation %}
|
||||
<div class="np-sub-navigation-content-item {{ link.active_class }}">
|
||||
<div class="np-sub-navigation-content-item-bar np-button-background-color"></div>
|
||||
<a class="np-sub-navigation-content-item-link" href="{{ link.url }}">
|
||||
{{ link.label }}
|
||||
</a>
|
||||
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</nav>
|
||||
<style>
|
||||
.np-sub-navigation {
|
||||
background: white!important;
|
||||
color: #006161!important;
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
$(".np-sub-navigation-content-item-link[href='/app/catalog']").parent().remove()
|
||||
$(".np-sub-navigation-content-item-link:contains('Home')").attr('href', '/app/homepage')
|
||||
$(".np-sub-navigation-content-item-link:contains('Courses')").attr('href', '/app/new-dashboard')
|
||||
$(".np-sub-navigation-content-item-link:contains('Courses')").text('Dashboard')
|
||||
|
||||
</script>
|
||||
@ -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,140 @@
|
||||
|
||||
<div class="videos-header">Video Spotlight</div>
|
||||
<div class="main-slider homepage-video-carousel" id="main-slider">
|
||||
<div class="video-slide"
|
||||
>
|
||||
<div class="example-dialog-trigger 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>
|
||||
<div class="video-slide">
|
||||
<div class="example-dialog-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>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
|
||||
$('#main-slider').slick({
|
||||
slidesToShow: 1,
|
||||
slidesToScroll: 1,
|
||||
autoplay: true,
|
||||
autoplaySpeed: 3000,
|
||||
dots: true,
|
||||
infinite: true,
|
||||
arrows: false
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
.videos-header {
|
||||
font-size: 20px;
|
||||
font-weight: 700;
|
||||
margin-bottom:24px;
|
||||
}
|
||||
|
||||
.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: #63666a;
|
||||
color:#fff;
|
||||
padding: 16px 32px;
|
||||
text-align: center;
|
||||
margin-top: -6px;
|
||||
|
||||
}
|
||||
|
||||
.img-caption-title {
|
||||
font-size: 22px;
|
||||
font-weight: 700;
|
||||
line-height: 28px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.carousel-slide-trigger {
|
||||
display: inline-block;
|
||||
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;
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
@ -1,88 +0,0 @@
|
||||
<div class="np-dashboard-resources progress-card" style="padding-bottom: 0;">
|
||||
<div class="np-card" style="display:inline-flex; margin: auto; padding: 0px !important;">
|
||||
<div class="np-card-container np-card-content" style="border-radius: 8px; display: inline-block; margin: auto;">
|
||||
{% if courses.enrolled.any? %}
|
||||
{% assign countComplete = 0 %}
|
||||
{% assign countInProgress = 0 %}
|
||||
{% assign countNotStarted = 0 %}
|
||||
{% assign countTotal = 0 | times: 1.0 %}
|
||||
{% for course in courses.enrolled %}
|
||||
{% assign countTotal = countTotal | plus: 1 %}
|
||||
{% if course.progress == 100 %}
|
||||
{% assign countComplete = countComplete | plus: 1 %}
|
||||
{% endif %}
|
||||
{% if course.progress > 0 and course.progress < 100 %}
|
||||
{% assign countInProgress = countInProgress | plus: 1 %}
|
||||
{% endif %}
|
||||
{% if course.progress == 0 %}
|
||||
{% assign countNotStarted = countNotStarted | plus: 1 %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
<ul class="progress-circle-list">
|
||||
<li>
|
||||
{%
|
||||
include "progress_circle",
|
||||
name:'Completed' ,
|
||||
count: countComplete ,
|
||||
total: countTotal,
|
||||
size: "120",
|
||||
stroke_color: "rgba(43, 178, 76, 1)",
|
||||
stroke_color_bg: "rgba(255, 255, 255, 0.15)"
|
||||
%}
|
||||
</li>
|
||||
<li>
|
||||
{%
|
||||
include "progress_circle",
|
||||
name:'In Progress' ,
|
||||
count: countInProgress ,
|
||||
total: countTotal,
|
||||
size: "120",
|
||||
stroke_color: "rgba(43, 178, 76, 1)",
|
||||
stroke_color_bg: "rgba(255, 255, 255, 0.15)"
|
||||
%}
|
||||
</li>
|
||||
</ul>
|
||||
{% else %}
|
||||
{% capture message %}
|
||||
{% t shared.zero_state.courses.index,
|
||||
key: current_school.course_vocabulary
|
||||
%}
|
||||
{% endcapture %}
|
||||
{% include "courses_zero_state", message: message %}
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<style>
|
||||
.progress-circle-list {
|
||||
padding: 0;
|
||||
list-style-type: none !important;
|
||||
justify-content: space-around;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
max-width: 400px;
|
||||
margin: auto;
|
||||
}
|
||||
.progress-card {
|
||||
border-radius: 8px;
|
||||
background: #555269;
|
||||
height: 260px;
|
||||
padding: 0;
|
||||
display: inline-flex;
|
||||
}
|
||||
.np-progress-ring-wrapper {
|
||||
padding: 0 0.5rem;
|
||||
}
|
||||
@media screen and (max-width: 1023px) {
|
||||
.progress-card {
|
||||
height: 190px;
|
||||
margin-bottom: 2.187rem;
|
||||
display: flex;
|
||||
}
|
||||
.progress-circle-list {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,22 +1,108 @@
|
||||
{% include "header" %}
|
||||
{% include "sub_navigation" %}
|
||||
<main class="np-main np-catalog np-subpage-container np-max-width">
|
||||
<div class="np-catalog-header-wrapper">
|
||||
<div class="np-catalog-header">
|
||||
<div class="np-resource-title">{{ catalog.headline }}</div>
|
||||
<div class="np-resource-subtitle">{{ catalog.subheadline }}</div>
|
||||
</div>
|
||||
{% capture label %}{% t shared.filters.by_category %}{% endcapture %}
|
||||
|
||||
{% if courses.in_catalog.any? %}
|
||||
{%
|
||||
include "filter_dropdown",
|
||||
filters: courses.filters,
|
||||
key: "category_uuid",
|
||||
label: label
|
||||
%}
|
||||
{% endif %}
|
||||
<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">All Topics</div>
|
||||
<div class="subpage-intro-divider"></div>
|
||||
<div class="subpage-intro-subtitle">Nulla porttitor accumsan tincidunt. Donec rutrum congue leo eget malesuada. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Nulla porttitor accumsan tincidunt.</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% include "courses_catalog" %}
|
||||
<main class="np-main np-catalog np-subpage-container np-max-width">
|
||||
|
||||
<div class="row np-flex-center">
|
||||
<div class="col-xs-12 col-sm-3">
|
||||
{% include 'category_filter_sidebar' %}
|
||||
</div>
|
||||
|
||||
<div class="col-xs-12 col-sm-9">
|
||||
{% comment %} <div class="np-catalog-header-wrapper">
|
||||
<div class="np-catalog-header">
|
||||
<div class="np-resource-title">{{ catalog.headline }}</div>
|
||||
<div class="np-resource-subtitle">{{ catalog.subheadline }}</div>
|
||||
</div>
|
||||
</div> {% endcomment %}
|
||||
{% include "courses_catalog" %}
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
{% include "footer" %}
|
||||
{% include "footer" %}
|
||||
|
||||
<style>
|
||||
.subpage-intro {
|
||||
position:relative;
|
||||
background: url(https://s3.amazonaws.com/static.northpass.com/J%26J/white_beard_eye_exam.jpg);
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
padding: 64px 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: 20px;
|
||||
}
|
||||
|
||||
.subpage-intro-title {
|
||||
font-size: 50px;
|
||||
text-transform: uppercase;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
.subpage-intro-divider {
|
||||
height: 5px;
|
||||
margin: 16px auto;
|
||||
width:100px;
|
||||
background-color:#cc0033;
|
||||
}
|
||||
|
||||
.category-hidden {
|
||||
display: none;
|
||||
}
|
||||
</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))
|
||||
});
|
||||
|
||||
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')
|
||||
})
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@ -1,3 +1,87 @@
|
||||
<script>
|
||||
window.location.replace('/app/homepage');
|
||||
</script>
|
||||
{% 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">Nulla porttitor accumsan tincidunt. Donec rutrum congue leo eget malesuada. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Nulla porttitor accumsan tincidunt.</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<main class="np-main np-dashboard np-subpage-container np-max-width">
|
||||
<div class="row np-flex-center">
|
||||
<div class="col-xs-12 col-sm-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-sm-6 np-stretch-content" %}
|
||||
</div>
|
||||
{% if features.training_events? %}
|
||||
<div class="np-grid-spacing col-xs-12 col-sm-4">
|
||||
<div class="np-dashboard-resources-title">
|
||||
{% comment %} {% t .upcoming_events %} {% endcomment %}
|
||||
Saved Events
|
||||
</div>
|
||||
{% include "training_events_dashboard" %}
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</main>
|
||||
{% include "footer" %}
|
||||
|
||||
<style>
|
||||
.subpage-intro {
|
||||
position:relative;
|
||||
background: url(https://s3.amazonaws.com/static.northpass.com/J%26J/white_beard_eye_exam.jpg);
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
padding: 64px 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: 20px;
|
||||
}
|
||||
|
||||
.subpage-intro-title {
|
||||
font-size: 50px;
|
||||
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;
|
||||
}
|
||||
</style>
|
||||
@ -1,118 +1,241 @@
|
||||
{% include "header" %}
|
||||
{% include "course_version_outdated_alert", courses: courses.featured %}
|
||||
{% comment %} {% include "course_version_outdated_alert", courses: courses.featured %} {% endcomment %}
|
||||
|
||||
|
||||
<main class="np-main np-homepage">
|
||||
{% include "homepage_hero_carousel" %}
|
||||
{% comment %} {% include "sub_navigation" %} {% endcomment %}
|
||||
<div class="np-subpage-container">
|
||||
<div class="row intro-row" style="margin-top:64px;">
|
||||
<div class="col-12 col-md-6 col-lg-7">
|
||||
<div class="homepage-intro">
|
||||
|
||||
<div class="np-subpage-container">
|
||||
<div class="row">
|
||||
<div class="col-12 col-md-6 col-lg-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/training_events">
|
||||
<div class="category-card-container">
|
||||
<img
|
||||
class="np-categories-image"
|
||||
alt="Podcasts"
|
||||
src="https://s3.amazonaws.com/static.northpass.com/J%26J/conference-audience.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">Click here to register for upcoming events.</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/conference-audience.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">Register today and get access to upcoming profressional events.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
<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/JNJ4.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">Explore All Content</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 class="col-xs-12 col-sm-6">
|
||||
<a class="np-card" href="/app/catalog?category=productinformation">
|
||||
<div class="category-card-container">
|
||||
<img
|
||||
class="np-categories-image"
|
||||
alt="Podcasts"
|
||||
src="https://s3.amazonaws.com/static.northpass.com/J%26J/white_beard_eye_exam.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">Product Information</p>
|
||||
{% comment %} <p class="homepage-card-desc"></p> {% endcomment %}
|
||||
<div class="arrow-icon"><i class="fal fa-long-arrow-right"></i></div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
{% 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/couple_ipad_podcast.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">My Topics</p>
|
||||
<p class="homepage-card-desc">Tailored content based on your area of expertise</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/couple_ipad_podcast.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">My Topics</p>
|
||||
<p class="homepage-card-desc">Tailored content based on your area of expertise</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-0 col-lg-1"></div>
|
||||
<div class="col-12 col-md-6 col-lg-4">
|
||||
<a href="{% route catalog %}" class="catalog-card">
|
||||
<p class="catalog-card-header">Course Library</p>
|
||||
|
||||
<p class="catalog-card-subhead">Click here to explore our catalog of courses <i class="fal fa-long-arrow-right"></i></p>
|
||||
</a>
|
||||
|
||||
{% comment %} {% include "homepage_category_cards", class: "col-xs-12 col-sm-6" %} {% endcomment %}
|
||||
</div>
|
||||
<div class="col-0 col-lg-1"></div>
|
||||
<div class="col-12 col-md-6 col-lg-4">
|
||||
{% include "homepage_login_registration" %}
|
||||
<a href="https://app.smartsheet.com/b/form/36c0f66e21ff4bf8b833bb4bbbf0b635" class="sidebar-content-block 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>
|
||||
{% comment %} <div class="arrow-icon"><i class="fal fa-long-arrow-right"></i></div> {% endcomment %}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% include "cards_categories", class: "col-xs-12 col-sm-6 col-md-4 col-lg-3" %}
|
||||
|
||||
</div>
|
||||
|
||||
{% include "homepage_events" %}
|
||||
|
||||
{% include "section_faqs" %}
|
||||
|
||||
{% include "section_contact_us" %}
|
||||
|
||||
</main>
|
||||
|
||||
{% include "footer" %}
|
||||
|
||||
|
||||
<style>
|
||||
.homepage-intro {
|
||||
margin-bottom:64px;
|
||||
}
|
||||
.sidebar-content-block,
|
||||
.sidebar-content-block:hover {
|
||||
background: #f3f3f3;
|
||||
padding: 32px;
|
||||
color: #212121;
|
||||
display: block;
|
||||
margin-bottom:32px;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.homepage-intro-headline {
|
||||
font-size: 36px;
|
||||
font-weight: bold;
|
||||
margin-bottom:16px;
|
||||
}
|
||||
.sidebar-header,
|
||||
.welcome-block-header,
|
||||
.block-header {
|
||||
font-size: 20px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.homepage-intro-subheadline {
|
||||
font-size: 18px;
|
||||
line-height: 26px;
|
||||
}
|
||||
.sidebar-content-block .arrow-icon {
|
||||
text-align: right;
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
.np-homepage .np-subpage-container {
|
||||
padding: 0 24px 50px;
|
||||
max-width: 1400px;
|
||||
margin:auto;
|
||||
}
|
||||
.sidebar-content-block .arrow-icon .fa-long-arrow-right,
|
||||
.sidebar-desc .arrow-icon {
|
||||
color: #009999;
|
||||
font-size: 32px;
|
||||
|
||||
}
|
||||
|
||||
.catalog-card {
|
||||
background: #fafafa;
|
||||
padding: 32px;
|
||||
color: #212121;
|
||||
text-decoration: none;
|
||||
.sidebar-desc .arrow-icon {
|
||||
margin-top: 0!important;
|
||||
position: relative;
|
||||
top: 5px;
|
||||
left: 5px;
|
||||
}
|
||||
|
||||
.homepage-cards .np-card {
|
||||
padding:0 0 32px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
text-decoration:none;
|
||||
}
|
||||
|
||||
.category-card-container {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
height: 200px;
|
||||
}
|
||||
|
||||
.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;
|
||||
cursor:pointer;
|
||||
}
|
||||
|
||||
.catalog-card:hover {
|
||||
color: #212121;
|
||||
.np-categories-content p {
|
||||
margin:0;
|
||||
}
|
||||
|
||||
.catalog-card:hover .catalog-card-subhead {
|
||||
.np-categories-content .arrow-icon {
|
||||
text-align:right;
|
||||
margin-top:12px;
|
||||
}
|
||||
|
||||
.np-categories-content .arrow-icon i {
|
||||
color: #009999;
|
||||
font-size: 32px;
|
||||
}
|
||||
|
||||
.catalog-card-header {
|
||||
font-size: 24px;
|
||||
font-weight: bold;
|
||||
p.homepage-card-title {
|
||||
color: #212121;
|
||||
font-size: 20px;
|
||||
font-weight: 700;
|
||||
margin-bottom: 12px!important;
|
||||
}
|
||||
|
||||
.catalog-card-subhead {
|
||||
font-size:18px;
|
||||
line-height:22px;
|
||||
color:#009999;
|
||||
display:inline-flex;
|
||||
align-items: center;
|
||||
p.homepage-card-desc {
|
||||
line-height:normal;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
.np-card-content {
|
||||
background: #f4f4f4!important;
|
||||
}
|
||||
|
||||
.np-card-content-title {
|
||||
shadow: 0!important;
|
||||
}
|
||||
|
||||
.courses-left-small {
|
||||
padding-top: 190px;
|
||||
}
|
||||
|
||||
@media (min-width:1170px) {
|
||||
.np-homepage .np-subpage-container {
|
||||
padding: 0 22px 120px;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
</style>
|
||||
|
||||
@ -1,41 +0,0 @@
|
||||
{% include "header" %}
|
||||
{% include "sub_navigation" %}
|
||||
<main class="np-main np-learning-paths np-subpage-container np-max-width">
|
||||
<div class="np-learning-paths-main">
|
||||
<div class="np-resource-title">
|
||||
{% t shared.learning_paths %}
|
||||
</div>
|
||||
<div class="np-resource-subtitle">
|
||||
{% t .subtitle %}.
|
||||
</div>
|
||||
{% include "learning_paths_index", items: learning_paths.available %}
|
||||
</div>
|
||||
</main>
|
||||
{% include "footer" %}
|
||||
|
||||
<style>
|
||||
@media only screen and (min-width: 768px) {
|
||||
body {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
grid-template-areas: "header" "subnav" "main" "footer" "powered";
|
||||
grid-template-rows: 120px 50px 1fr 160px 60px;
|
||||
}
|
||||
header {
|
||||
grid-area: header;
|
||||
}
|
||||
nav {
|
||||
grid-area: subnav;
|
||||
margin-top: 0 !important;
|
||||
}
|
||||
main {
|
||||
grid-area: main;
|
||||
}
|
||||
footer {
|
||||
grid-area: footer;
|
||||
}
|
||||
.np-powered-by {
|
||||
grid-area: powered;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,230 +0,0 @@
|
||||
|
||||
{% include "header" %}
|
||||
{% include "course_version_outdated_alert", courses: courses.enrolled %}
|
||||
{% include "sub_navigation" %}
|
||||
<main class="np-main np-dashboard np-subpage-container np-max-width" style='background: #00283D;'>
|
||||
<div class="np-dashboard-header">
|
||||
<div class="np-resource-title">Hi {{current_person.first_name}}! 👋</div>
|
||||
<div class="np-resource-subtitle">This is what's relevant to you right now in Northpass Academy.</div>
|
||||
</div>
|
||||
<div class="row np-flex-center">
|
||||
<div class="col-xs-12 col-md-8">
|
||||
{% if features.learning_paths? %}
|
||||
<div class="np-dashboard-resources-title">
|
||||
{% t shared.learning_paths %}
|
||||
</div>
|
||||
{% include "learning_paths_index", items: learning_paths.enrolled %}
|
||||
{% endif %}
|
||||
</div>
|
||||
<div class="np-grid-spacing col-xs-12 col-md-4 progress-section">
|
||||
<div class="np-dashboard-resources-title">Course Progress</div>
|
||||
{% include "widget_course_progress" %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row dashboard-section-courses">
|
||||
<div class="col-xs-12">
|
||||
{% if courses.enrolled.any? %}
|
||||
{% if categories.enrolled.any? %}
|
||||
{% assign all_categories = categories.enrolled | map: "name" %}
|
||||
{% for enrolled_category in all_categories %}
|
||||
<div class="np-md-flex-wrapper">
|
||||
<div>
|
||||
<div class="np-dashboard-resources-title">
|
||||
Topic
|
||||
</div>
|
||||
<div class="np-dashboard-resources-category">
|
||||
{{ enrolled_category }}
|
||||
</div>
|
||||
</div>
|
||||
{%
|
||||
include "filter_by_progress",
|
||||
label: "Filter by Progress:",
|
||||
default_option: "All Courses",
|
||||
topic: enrolled_category,
|
||||
%}
|
||||
</div>
|
||||
{%
|
||||
include "carousel_courses",
|
||||
items: courses.enrolled,
|
||||
topic: enrolled_category,
|
||||
%}
|
||||
{% endfor %}
|
||||
{% else %}
|
||||
{% assign enrolled_category = "Not Categorized" %}
|
||||
<div class="np-md-flex-wrapper">
|
||||
<div>
|
||||
<div class="np-dashboard-resources-title">
|
||||
Topic
|
||||
</div>
|
||||
<div class="np-dashboard-resources-category">
|
||||
{{ enrolled_category }}
|
||||
</div>
|
||||
</div>
|
||||
{%
|
||||
include "filter_by_progress",
|
||||
label: "Filter by Progress:",
|
||||
default_option: "All Courses",
|
||||
topic: enrolled_category,
|
||||
%}
|
||||
</div>
|
||||
{%
|
||||
include "carousel_courses",
|
||||
items: courses.enrolled,
|
||||
topic: enrolled_category,
|
||||
%}
|
||||
{% endif %}
|
||||
{% else %}
|
||||
<div class="np-dashboard-resources-title" style="margin-bottom:19px;">
|
||||
Courses
|
||||
</div>
|
||||
{% capture message %}
|
||||
{% t shared.zero_state.courses.index,
|
||||
key: current_school.course_vocabulary
|
||||
%}
|
||||
{% endcapture %}
|
||||
<div style="margin-bottom:3rem;">
|
||||
{% include "courses_zero_state", message: message %}
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row dashboard-section-events">
|
||||
<div class="col-xs-12">
|
||||
<div class="np-dashboard-resources-title" style="margin-bottom: 5px;">
|
||||
Training Events
|
||||
</div>
|
||||
<div class="np-dashboard-resources-category" style="margin-bottom: 19px;">
|
||||
Discover online events to maximize your learning
|
||||
</div>
|
||||
{% if training_events.enrolled.any? %}
|
||||
{%
|
||||
include "carousel_events",
|
||||
items: training_events.enrolled,
|
||||
%}
|
||||
{% else %}
|
||||
<div style="margin-bottom:3rem;">
|
||||
{% include "training_events_zero_state" %}
|
||||
</div>
|
||||
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row dashboard-section-instructors">
|
||||
<div class="col-xs-12">
|
||||
<div class="np-dashboard-resources-title">
|
||||
Meet the Team
|
||||
</div>
|
||||
{%
|
||||
include "carousel_instructors",
|
||||
%}
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
{% include "footer" %}
|
||||
|
||||
<style>
|
||||
@media screen and (max-width: 1024px) {
|
||||
.progress-section {
|
||||
padding-left: 0.5rem
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
// Creates the custom dropdown and dropdown functionality
|
||||
var x, i, j, l, ll, selElmnt, a, b, c;
|
||||
/* Look for any elements with the class “select-wrapper”: */
|
||||
x = document.getElementsByClassName("progress-filter");
|
||||
l = x.length;
|
||||
for (i = 0; i < l; i++) {
|
||||
selElmnt = x[i].getElementsByTagName("select")[0];
|
||||
ll = selElmnt.length;
|
||||
a = document.createElement("DIV");
|
||||
a.setAttribute("class", "select-selected");
|
||||
a.innerHTML = selElmnt.options[selElmnt.selectedIndex].innerHTML;
|
||||
x[i].appendChild(a);
|
||||
b = document.createElement("DIV");
|
||||
b.setAttribute("class", "select-items select-hide");
|
||||
for (j = 1; j < ll; j++) {
|
||||
c = document.createElement("DIV");
|
||||
c.innerHTML = selElmnt.options[j].innerHTML;
|
||||
c.addEventListener("click", function(e) {
|
||||
var y, i, k, s, h, sl, yl;
|
||||
s = this.parentNode.parentNode.getElementsByTagName("select")[0];
|
||||
sl = s.length;
|
||||
h = this.parentNode.previousSibling;
|
||||
for (i = 0; i < sl; i++) {
|
||||
if (s.options[i].innerHTML == this.innerHTML) {
|
||||
s.selectedIndex = i;
|
||||
h.innerHTML = this.innerHTML;
|
||||
y = this.parentNode.getElementsByClassName("same-as-selected");
|
||||
yl = y.length;
|
||||
for (k = 0; k < yl; k++) {
|
||||
y[k].removeAttribute("class");
|
||||
}
|
||||
this.setAttribute("class", "same-as-selected");
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
filterCourses(this);
|
||||
|
||||
h.click();
|
||||
});
|
||||
b.appendChild(c);
|
||||
}
|
||||
x[i].appendChild(b);
|
||||
a.addEventListener("click", function(e) {
|
||||
e.stopPropagation();
|
||||
closeAllSelect(this);
|
||||
this.nextSibling.classList.toggle("select-hide");
|
||||
this.classList.toggle("select-arrow-active");
|
||||
});
|
||||
}
|
||||
|
||||
function closeAllSelect(elmnt) {
|
||||
var x, y, i, xl, yl, arrNo = [];
|
||||
x = document.getElementsByClassName("select-items");
|
||||
y = document.getElementsByClassName("select-selected");
|
||||
xl = x.length;
|
||||
yl = y.length;
|
||||
for (i = 0; i < yl; i++) {
|
||||
if (elmnt == y[i]) {
|
||||
arrNo.push(i)
|
||||
} else {
|
||||
y[i].classList.remove("select-arrow-active");
|
||||
}
|
||||
}
|
||||
for (i = 0; i < xl; i++) {
|
||||
if (arrNo.indexOf(i)) {
|
||||
x[i].classList.add("select-hide");
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* If the user clicks anywhere outside the select box,
|
||||
then close all select boxes: */
|
||||
document.addEventListener("click", closeAllSelect);
|
||||
$(".select-items div").each(function() {
|
||||
if($( this ).text() == $(".select-selected").text()) {
|
||||
$(this).addClass("same-as-selected");
|
||||
}
|
||||
});
|
||||
|
||||
function filterCourses(selectedItem) {
|
||||
|
||||
let filterGroup = $(selectedItem).closest(".progress-filter").data("topic");
|
||||
let selectedFilter = $(selectedItem).text().replace(" ", "-").toLowerCase();
|
||||
let carouselGroup = $('.courses-carousel[data-topic="' + filterGroup + '"]');
|
||||
|
||||
carouselGroup.slick('slickUnfilter');
|
||||
|
||||
if (selectedFilter != "all-courses") {
|
||||
carouselGroup.slick('slickFilter', `.${selectedFilter}`);
|
||||
}
|
||||
|
||||
}
|
||||
$(".np-sub-navigation-content-item-link:contains('Dashboard')").parent().addClass("np-sub-navigation-content-item-active")
|
||||
</script>
|
||||
@ -0,0 +1,266 @@
|
||||
<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">Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus.</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: '',
|
||||
country: '',
|
||||
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) {
|
||||
submitValidatedData(userData)
|
||||
} else {
|
||||
$('.err-msg').show()
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
function submitValidatedData(data) {
|
||||
console.log(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)
|
||||
$('#completeRegistrationBtn').prop("disabled",true);
|
||||
$('#completeRegistrationBtn').addClass('submitting')
|
||||
$('.loader').show()
|
||||
$('#completeRegistrationBtn span').text('Completing Registration')
|
||||
|
||||
setTimeout(function() {
|
||||
window.location.replace("/app")
|
||||
}, 2000)
|
||||
},
|
||||
error: function (xhr, status, error) {
|
||||
console.error("Error posting to workato!");
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.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>
|
||||
@ -0,0 +1,183 @@
|
||||
<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>
|
||||
<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>
|
||||
<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> and <a href="https://jnjinstitute.com/en-us/cookie-policy" class="np-button-color" target="_blank">Cookie 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>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<style>
|
||||
/* 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;
|
||||
}
|
||||
|
||||
</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>
|
||||
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,71 @@
|
||||
{% 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">Nulla porttitor accumsan tincidunt. Donec rutrum congue leo eget malesuada. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Nulla porttitor accumsan tincidunt.</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<main class="np-main np-training-events np-subpage-container np-max-width">
|
||||
<div class="row">
|
||||
{% comment %} <div class="col-xs-12 col-sm-10">
|
||||
<div class="np-resource-title">
|
||||
Professional Events
|
||||
</div>
|
||||
<div class="np-resource-subtitle">
|
||||
Discover in-person and online events
|
||||
|
||||
</div>
|
||||
</div> {% endcomment %}
|
||||
<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/conference-audience.jpg);
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
padding: 64px 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: 20px;
|
||||
}
|
||||
|
||||
.subpage-intro-title {
|
||||
font-size: 50px;
|
||||
text-transform: uppercase;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
.subpage-intro-divider {
|
||||
height: 5px;
|
||||
margin: 16px auto;
|
||||
width:100px;
|
||||
background-color:#cc0033;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,14 @@
|
||||
{% include "header" %}
|
||||
{% include "course_version_outdated_alert", courses: courses.in_catalog %}
|
||||
{% include "sub_navigation" %}
|
||||
<main class="np-main np-catalog np-subpage-container np-max-width">
|
||||
<div class="np-catalog-header-wrapper">
|
||||
<div class="np-catalog-header">
|
||||
<div class="np-resource-title">{{ catalog.headline }}</div>
|
||||
<div class="np-resource-subtitle">{{ catalog.subheadline }}</div>
|
||||
</div>
|
||||
{% capture label %}{% t shared.filters.by_category %}{% endcapture %}
|
||||
</div>
|
||||
{% include "courses_catalog" %}
|
||||
</main>
|
||||
{% include "footer" %}
|
||||
@ -226,6 +226,8 @@
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
|
||||
<style>
|
||||
.footer {
|
||||
background: #1E2423;
|
||||
|
||||
@ -41,12 +41,12 @@
|
||||
href="{% route course_enrollment, code: course.enrollment_code %}"
|
||||
{% endif %}>
|
||||
{% if course.started? %}
|
||||
Continue course
|
||||
Continue Watching
|
||||
{% else %}
|
||||
{% if course.enrolled? %}
|
||||
Start Course
|
||||
{% else %}
|
||||
Enroll in course
|
||||
Watch Video
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
</a>
|
||||
@ -386,4 +386,4 @@
|
||||
window.location.replace('{% route course_viewer, course_id: course.id, learning_path_id: params.learning_path_id %}')
|
||||
})
|
||||
}
|
||||
</script>
|
||||
</script>
|
||||
|
||||
BIN
NP_Custom_Templates/customer_templates/Scenario/.DS_Store
vendored
Normal file
BIN
NP_Custom_Templates/customer_templates/Scenario/.DS_Store
vendored
Normal file
Binary file not shown.
@ -9,6 +9,7 @@
|
||||
class="np-card-image"
|
||||
alt="{{ course.name }}"
|
||||
src="{{ course.image_url }}"
|
||||
style="width: 100%;"
|
||||
>
|
||||
</div>
|
||||
<div class="np-card-text-wrapper" style="border: none !important;">
|
||||
|
||||
@ -113,4 +113,11 @@
|
||||
|
||||
<script>
|
||||
$(".np-footer-navigation-link[href='https://change_to_mail.com'").attr("href", "mailto:support@northpass.com")
|
||||
</script>
|
||||
</script>
|
||||
|
||||
<script>
|
||||
if(document.referrer == 'https://academy.scenariocloud.com/auth/auth_url_email/login'){
|
||||
console.log('Redirecting to Homepage');
|
||||
window.location.href = '/app';
|
||||
}
|
||||
</script>
|
||||
|
||||
@ -22,7 +22,7 @@
|
||||
</button>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% comment %}{% if current_school.logo_url %}
|
||||
{% if current_school.logo_url %}
|
||||
<h1 class="np-header-logo">
|
||||
<a href="{% route home %}">
|
||||
<img
|
||||
@ -36,7 +36,7 @@
|
||||
<a href="{% route home %}" class="np-school-name np-header-font-color">
|
||||
{{ current_school.name }}
|
||||
</a>
|
||||
{% endif %}{% endcomment %}
|
||||
{% endif %}
|
||||
|
||||
<div class="np-hidden-mobile np-header-desktop-nav">
|
||||
<ul class="np-header-desktop-nav-list">
|
||||
@ -100,7 +100,6 @@
|
||||
class="np-header-avatar-tooltip-navigation-link"
|
||||
href="{% route account %}"
|
||||
>
|
||||
{% comment %}{% t .profile_settings %}{% endcomment %}
|
||||
Profile Settings
|
||||
</a>
|
||||
{% endunless %}
|
||||
@ -108,7 +107,6 @@
|
||||
class="np-header-avatar-tooltip-navigation-link np-danger"
|
||||
href="{% route logout %}"
|
||||
>
|
||||
{% comment %}{% t .sign_out %}{% endcomment %}
|
||||
Sign Out
|
||||
</a>
|
||||
</nav>
|
||||
@ -168,14 +166,14 @@
|
||||
class="np-header-mobile-menu-content-button"
|
||||
href="{% route account %}"
|
||||
>
|
||||
{% t .profile_settings %}
|
||||
Profile Settings
|
||||
</a>
|
||||
{% endunless %}
|
||||
<a
|
||||
class="np-header-mobile-menu-content-button np-danger"
|
||||
href="{% route logout %}"
|
||||
>
|
||||
{% t .sign_out %}
|
||||
Sign Out
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -0,0 +1,17 @@
|
||||
<header class="np-box-header">
|
||||
<a class="np-box-header-link" href="{% route home %}">
|
||||
{% if current_school.logo_url %}
|
||||
<img
|
||||
alt="{{ current_school.name }}"
|
||||
src="{{ current_school.logo_url }}"
|
||||
class="np-box-header-logo"
|
||||
/>
|
||||
{% else %}
|
||||
<span class="np-school-name np-header-font-color">
|
||||
{{ current_school.name }}
|
||||
</span>
|
||||
{% endif %}
|
||||
</a>
|
||||
</header>
|
||||
|
||||
{% include "messages" %}
|
||||
@ -0,0 +1,208 @@
|
||||
<header class="np-header np-header-color" style="background: #fafafa; border: none; height: 3.5rem;">
|
||||
<div class="np-header-content">
|
||||
<div class="np-hidden-desktop np-header-mobile-menu-nav">
|
||||
{% if current_person.signed_in? %}
|
||||
<button
|
||||
data-toggle-class="np-hidden"
|
||||
class="np-header-mobile-menu-nav-button fal fa-times np-hidden np-header-font-color"
|
||||
data-toggle-target=".np-header-mobile-avatar-menu,
|
||||
.np-header-mobile-menu-content, .np-main, .np-footer"
|
||||
></button>
|
||||
<button
|
||||
data-test="open-mobile-menu"
|
||||
data-toggle-class="np-hidden"
|
||||
class="np-header-mobile-menu-nav-button np-header-mobile-avatar-menu"
|
||||
data-toggle-target=".fa-times, .np-header-mobile-menu-content, .np-main, .np-footer"
|
||||
>
|
||||
<img
|
||||
alt="{{ current_person.name }}"
|
||||
class="np-header-avatar-image"
|
||||
src="{{ current_person.avatar_url }}"
|
||||
/>
|
||||
</button>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% if current_school.logo_url %}
|
||||
<h1 class="np-header-logo">
|
||||
<a href="{% route home %}">
|
||||
<img
|
||||
alt="{{ current_school.name }}"
|
||||
class="np-header-logo-image"
|
||||
src="{{ current_school.logo_url }}"
|
||||
/>
|
||||
</a>
|
||||
</h1>
|
||||
{% else %}
|
||||
<a href="{% route home %}" class="np-school-name np-header-font-color">
|
||||
{{ current_school.name }}
|
||||
</a>
|
||||
{% endif %}
|
||||
|
||||
<div class="np-hidden-mobile np-header-desktop-nav">
|
||||
<ul class="np-header-desktop-nav-list">
|
||||
{% for website_navigation in navigations.header_navigations_external %}
|
||||
<li class= "np-header-desktop-nav-item">
|
||||
<a
|
||||
href="{{ website_navigation.path }}"
|
||||
class="np-header-desktop-nav-link np-header-font-color"
|
||||
target="_blank"
|
||||
>
|
||||
{{ website_navigation.name }}
|
||||
</a>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
{% if current_person.signed_in? %}
|
||||
<div class="np-hidden-mobile np-header-search np-header-search-expanded">
|
||||
<form action="{% route search %}" method="get" data-test="desktop-search">
|
||||
<input
|
||||
aria-label="{% t .search %}"
|
||||
class="np-header-search-input np-header-font-background-color"
|
||||
type="text"
|
||||
name="q"
|
||||
placeholder="{% t .search %}"
|
||||
/>
|
||||
<i class="np-header-search-icon far fa-search"></i>
|
||||
</form>
|
||||
</div>
|
||||
<div class="np-hidden-mobile np-header-avatar">
|
||||
<button
|
||||
class="np-header-avatar-button"
|
||||
data-test="open-desktop-menu"
|
||||
data-toggle-class-on-target="np-hidden"
|
||||
data-toggle-target=".np-header-avatar-tooltip"
|
||||
data-toggle-outside
|
||||
>
|
||||
<img
|
||||
alt="{{ current_person.name }}"
|
||||
class="np-header-avatar-image"
|
||||
src="{{ current_person.avatar_url }}"
|
||||
>
|
||||
</button>
|
||||
<div class="np-header-avatar-tooltip np-hidden" role="tooltip">
|
||||
<span class="np-header-avatar-tooltip-arrow-up"></span>
|
||||
<div class="np-header-avatar-tooltip-learner">
|
||||
<div class="np-header-avatar-tooltip-learner-name">
|
||||
{{ current_person.name }}
|
||||
</div>
|
||||
<div class="np-header-avatar-tooltip-learner-email">
|
||||
{{ current_person.email }}
|
||||
</div>
|
||||
</div>
|
||||
<nav class="np-header-avatar-tooltip-navigation">
|
||||
<a class="np-header-avatar-tooltip-navigation-link" onclick="buildURL(window.location.pathname)" style="cursor:pointer">
|
||||
Default
|
||||
</a>
|
||||
{% unless current_school.sso_active? %}
|
||||
<a
|
||||
class="np-header-avatar-tooltip-navigation-link"
|
||||
href="{% route account %}"
|
||||
>
|
||||
Profile Settings
|
||||
</a>
|
||||
{% endunless %}
|
||||
<a
|
||||
class="np-header-avatar-tooltip-navigation-link np-danger"
|
||||
href="{% route logout %}"
|
||||
>
|
||||
Sign Out
|
||||
</a>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
{% else %}
|
||||
<a
|
||||
class="np-header-sign-in np-header-desktop-nav-link np-header-font-color"
|
||||
href="{% route login %}"
|
||||
>
|
||||
{% t shared.sign_in %}
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<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 %}
|
||||
<a
|
||||
href="{{ website_navigation.path }}"
|
||||
class="np-header-mobile-menu-content-button"
|
||||
{% if website_navigation.external? %} target="_blank" {% endif %}
|
||||
>
|
||||
{{ website_navigation.name }}
|
||||
</a>
|
||||
{% endfor %}
|
||||
<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 %}"
|
||||
>
|
||||
Profile Settings
|
||||
</a>
|
||||
{% endunless %}
|
||||
<a
|
||||
class="np-header-mobile-menu-content-button np-danger"
|
||||
href="{% route logout %}"
|
||||
>
|
||||
Sign Out
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="np-homepage-hero" style="background: #34abe2; z-index: -1; margin-top: -8rem; padding-top: 0.5rem;">
|
||||
<img class="np-homepage-hero-image"
|
||||
src="#"
|
||||
alt="{{ homepage.headline }}"
|
||||
/>
|
||||
<div class="np-homepage-hero-content">
|
||||
<div class="np-homepage-headline np-header-font-color">
|
||||
{{ homepage.headline }}
|
||||
</div>
|
||||
<div class="np-homepage-subheadline np-header-font-color">
|
||||
{{ homepage.subheadline }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<main class="np-main np-subpage-container np-account">
|
||||
<div class="np-hidden-desktop">
|
||||
{% include "account_mobile_view", form: form %}
|
||||
</div>
|
||||
|
||||
<div class="np-hidden-mobile np-flex np-flex-center">
|
||||
{% include "account_desktop_view", form: form %}
|
||||
</div>
|
||||
</main>
|
||||
|
||||
{% include "footer" %}
|
||||
|
||||
@ -0,0 +1,101 @@
|
||||
<main class="np-box-container np-open-access">
|
||||
<div class="np-box">
|
||||
{% include "header_minimal" %}
|
||||
<div class="np-box-content-container">
|
||||
<form class="np-form np-box-content" action="{{ form.url }}" method="get" novalidate>
|
||||
{% form_authenticity_token %}
|
||||
<div class="np-form-headline">
|
||||
{% t shared.welcome_to_school, school_name: current_school.name %}
|
||||
</div>
|
||||
<div class="np-form-subheadline">
|
||||
{% t .headline, key: current_school.course_vocabulary %}
|
||||
</div>
|
||||
<div class="np-form-field">
|
||||
<label class="np-input-label" for="learner_first_name">
|
||||
{% t shared.first_name %}
|
||||
</label>
|
||||
<input
|
||||
class="np-input"
|
||||
autofocus="autofocus"
|
||||
type="text"
|
||||
name="first_name"
|
||||
id="learner_first_name"
|
||||
value="{{ form.first_name }}"
|
||||
/>
|
||||
</div>
|
||||
<div class="np-form-field">
|
||||
<label class="np-input-label" for="learner_last_name">
|
||||
{% t shared.last_name %}
|
||||
</label>
|
||||
<input
|
||||
class="np-input"
|
||||
type="text"
|
||||
name="last_name"
|
||||
id="learner_last_name"
|
||||
value="{{ form.last_name }}"
|
||||
/>
|
||||
</div>
|
||||
<div class="np-form-field">
|
||||
<label class="np-input-label" for="learner_email">
|
||||
Company Email
|
||||
</label>
|
||||
<input
|
||||
class="np-input"
|
||||
type="text"
|
||||
name="email"
|
||||
id="learner_email"
|
||||
value="{{ form.email }}"
|
||||
/>
|
||||
</div>
|
||||
<p style="display: none;" id="bad_email_alert">PLEASE ENTER YOUR COMPANY EMAIL</p>
|
||||
<input
|
||||
type="submit"
|
||||
name="commit"
|
||||
value="{% t shared.enter %}"
|
||||
id="submit_button"
|
||||
class="np-button np-button-big np-form-action"
|
||||
/>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<script>
|
||||
// document.getElementById("header").scrollIntoView();
|
||||
|
||||
function checkIfInputsExist (){
|
||||
window.setTimeout(function(){
|
||||
// Regular expression to check if string is email
|
||||
const regexExp = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
|
||||
|
||||
// Grabs Email Address Value
|
||||
const learnerEmail = $("#learner_email")[0].value;
|
||||
|
||||
if ($("#learner_email")[0].value.length > 0){
|
||||
if(regexExp.test(learnerEmail) == true){
|
||||
if ($("#learner_email")[0].value.includes('@scenariocloud.com')){
|
||||
$("#learner_email").css("background", "#f2f4f5");
|
||||
$("#bad_email_alert").css("display", "none");
|
||||
$("#submit_button").css("pointer-events", "auto");
|
||||
}
|
||||
else {
|
||||
$("#learner_email").css("background", "salmon");
|
||||
$("#bad_email_alert").css("color", "#f2f4f5");
|
||||
$("#bad_email_alert").css("display", "block");
|
||||
$("#submit_button").css("pointer-events","none");
|
||||
}
|
||||
} else {
|
||||
$("#learner_email").css("background", "#f2f4f5");
|
||||
$("#bad_email_alert").css("display", "none");
|
||||
$("#submit_button").css("pointer-events", "auto");
|
||||
}
|
||||
}
|
||||
}, 500)
|
||||
}
|
||||
document.addEventListener('keyup', checkIfInputsExist);
|
||||
console.log(123213213);
|
||||
</script>
|
||||
<style>
|
||||
.np-input-label{
|
||||
color: #ffffff;
|
||||
}
|
||||
</style>
|
||||
@ -1,4 +1,4 @@
|
||||
<header class="np-header np-header-color" style="background: transparent; border: none;">
|
||||
<header class="np-header np-header-color" style="background: #fafafa; border: none; height: 3.5rem;">
|
||||
<div class="np-header-content">
|
||||
<div class="np-hidden-desktop np-header-mobile-menu-nav">
|
||||
{% if current_person.signed_in? %}
|
||||
@ -22,6 +22,21 @@
|
||||
</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">
|
||||
@ -85,14 +100,14 @@
|
||||
class="np-header-avatar-tooltip-navigation-link"
|
||||
href="{% route account %}"
|
||||
>
|
||||
{% t .profile_settings %}
|
||||
Profile Settings
|
||||
</a>
|
||||
{% endunless %}
|
||||
<a
|
||||
class="np-header-avatar-tooltip-navigation-link np-danger"
|
||||
href="{% route logout %}"
|
||||
>
|
||||
{% t .sign_out %}
|
||||
Sign Out
|
||||
</a>
|
||||
</nav>
|
||||
</div>
|
||||
@ -151,14 +166,14 @@
|
||||
class="np-header-mobile-menu-content-button"
|
||||
href="{% route account %}"
|
||||
>
|
||||
{% t .profile_settings %}
|
||||
Profile Settings
|
||||
</a>
|
||||
{% endunless %}
|
||||
<a
|
||||
class="np-header-mobile-menu-content-button np-danger"
|
||||
href="{% route logout %}"
|
||||
>
|
||||
{% t .sign_out %}
|
||||
Sign Out
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
@ -167,7 +182,7 @@
|
||||
{% include "messages" %}
|
||||
{% include "course_version_outdated_alert", courses: courses.enrolled %}
|
||||
|
||||
<div class="np-homepage-hero" style="background: #34abe2; z-index: -1; margin-top: -8rem;">
|
||||
<div class="np-homepage-hero" style="background: #34abe2; z-index: -1; margin-top: -8rem; padding-top: 0.5rem;">
|
||||
<img class="np-homepage-hero-image"
|
||||
src="{{ homepage.artwork_url }}"
|
||||
alt="{{ homepage.headline }}"
|
||||
|
||||
@ -2,12 +2,12 @@
|
||||
{% include "course_version_outdated_alert", courses: courses.featured %}
|
||||
<main class="np-main np-homepage">
|
||||
{% comment %}<div class="np-homepage-hero" >{% endcomment %}
|
||||
<div class="np-homepage-hero" style="background: #34abe2; ">
|
||||
<div class="np-homepage-hero" style="background: #34abe2; top: -1.95rem; height: 14.8rem;">
|
||||
<img class="np-homepage-hero-image"
|
||||
src="{{ homepage.artwork_url }}"
|
||||
alt="{{ homepage.headline }}"
|
||||
/>
|
||||
<div class="np-homepage-hero-content">
|
||||
<div class="np-homepage-hero-content homepage-only-hero">
|
||||
<div class="np-homepage-headline np-header-font-color">
|
||||
{{ homepage.headline }}
|
||||
</div>
|
||||
@ -29,9 +29,11 @@
|
||||
{% if courses.in_catalog.any? %}
|
||||
<div class="np-homepage-featured-courses row">
|
||||
{% for course in courses.in_catalog %}
|
||||
<div class="col-xs-12 coul-sm-8 col-md-12" style="margin:auto;">
|
||||
{% include "cards_featured_course" with course %}
|
||||
</div>
|
||||
{% if course.name == 'Scenario Basics' or course.name == 'Core Concepts' %}
|
||||
<div class="col-xs-12 coul-sm-8 col-md-12" style="margin:auto;">
|
||||
{% include "cards_featured_course" with course %}
|
||||
</div>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% else %}
|
||||
@ -155,3 +157,6 @@
|
||||
<script>
|
||||
$(".np-sub-navigation-content-item-link:contains('Home')").parent().addClass("np-sub-navigation-content-item-active")
|
||||
</script>
|
||||
<script>
|
||||
console.log(window.location.href);
|
||||
</script>
|
||||
|
||||
@ -0,0 +1,54 @@
|
||||
<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 login %}" method="post" novalidate>
|
||||
{% form_authenticity_token %}
|
||||
<div class="np-form-field">
|
||||
<label class="np-input-label" for="learner_email">
|
||||
Company Email
|
||||
</label>
|
||||
<input
|
||||
class="np-input"
|
||||
autofocus="autofocus"
|
||||
type="email"
|
||||
name="learner[email]"
|
||||
id="learner_email"
|
||||
>
|
||||
<p class="enter-label">Please use the email you use for Scenario</p>
|
||||
</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-button-big np-button-large-font np-form-action">
|
||||
{% t shared.sign_in %}
|
||||
</button>
|
||||
<a class="np-form-link np-button-color" href="{% route forgot_password_new %}">
|
||||
{% t .forgot_password %}
|
||||
</a>
|
||||
{% if features.account_creation? %}
|
||||
<a class="np-form-link np-button-color" href="{% route sign_up %}">
|
||||
{% t shared.sign_up %}
|
||||
</a>
|
||||
{% endif %}
|
||||
{% if features.request_access? %}
|
||||
<a
|
||||
class="np-form-link np-button-color"
|
||||
target="_blank"
|
||||
href="{{ current_school.request_access_link }}"
|
||||
>
|
||||
{{ current_school.request_access_label }}
|
||||
</a>
|
||||
{% endif %}
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
@ -0,0 +1,73 @@
|
||||
<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>
|
||||
<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">
|
||||
Company Email
|
||||
</label>
|
||||
<input
|
||||
class="np-input"
|
||||
autofocus="autofocus"
|
||||
type="email"
|
||||
name="learner[email]"
|
||||
id="learner_email"
|
||||
>
|
||||
<p class="enter-label">Please use the email you use for Scenario</p>
|
||||
</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-button-big np-button-large-font np-form-action">
|
||||
{% t shared.sign_up %}
|
||||
</button>
|
||||
<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>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
@ -197,9 +197,15 @@ div {
|
||||
}
|
||||
|
||||
.np-homepage-hero-content {
|
||||
padding: 2.25rem 2.5rem;
|
||||
padding: 5rem 2.5rem;
|
||||
padding-bottom: 3rem;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.homepage-only-hero{
|
||||
padding-bottom: 1.5rem !important;
|
||||
}
|
||||
|
||||
.np-homepage-featured-text {
|
||||
padding: 0 2rem 2rem;
|
||||
}
|
||||
@ -433,6 +439,12 @@ div {
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.enter-label{
|
||||
margin-top: 0;
|
||||
font-size: 10px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
/*
|
||||
2.7 - LEARNING PATH COVER PAGE
|
||||
*/
|
||||
@ -466,8 +478,13 @@ div {
|
||||
|
||||
.np-header.np-header-absolute {
|
||||
position: absolute;
|
||||
background: transparent;
|
||||
background: #fafafa;
|
||||
border-bottom: none;
|
||||
height: 3.5rem;
|
||||
}
|
||||
|
||||
.np-header-search-icon{
|
||||
color: #002532;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
<header class="np-header np-header-color" style="background: transparent; border: none;">
|
||||
<header class="np-header np-header-color" style="background: #fafafa; border: none; height: 3.5rem;">
|
||||
<div class="np-header-content">
|
||||
<div class="np-hidden-desktop np-header-mobile-menu-nav">
|
||||
{% if current_person.signed_in? %}
|
||||
@ -22,6 +22,21 @@
|
||||
</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">
|
||||
@ -85,14 +100,14 @@
|
||||
class="np-header-avatar-tooltip-navigation-link"
|
||||
href="{% route account %}"
|
||||
>
|
||||
{% t .profile_settings %}
|
||||
Profile Settings
|
||||
</a>
|
||||
{% endunless %}
|
||||
<a
|
||||
class="np-header-avatar-tooltip-navigation-link np-danger"
|
||||
href="{% route logout %}"
|
||||
>
|
||||
{% t .sign_out %}
|
||||
Sign Out
|
||||
</a>
|
||||
</nav>
|
||||
</div>
|
||||
@ -151,14 +166,14 @@
|
||||
class="np-header-mobile-menu-content-button"
|
||||
href="{% route account %}"
|
||||
>
|
||||
{% t .profile_settings %}
|
||||
Profile Settings
|
||||
</a>
|
||||
{% endunless %}
|
||||
<a
|
||||
class="np-header-mobile-menu-content-button np-danger"
|
||||
href="{% route logout %}"
|
||||
>
|
||||
{% t .sign_out %}
|
||||
Sign Out
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
@ -167,7 +182,7 @@
|
||||
{% include "messages" %}
|
||||
{% include "course_version_outdated_alert", courses: courses.enrolled %}
|
||||
|
||||
<div class="np-homepage-hero" style="background: #34abe2; z-index: -1; margin-top: -8rem;">
|
||||
<div class="np-homepage-hero" style="background: #34abe2; z-index: -1; margin-top: -8rem; padding-top: 0.5rem;">
|
||||
<img class="np-homepage-hero-image"
|
||||
src="{{ homepage.artwork_url }}"
|
||||
alt="{{ homepage.headline }}"
|
||||
|
||||
@ -55,8 +55,7 @@ h1 > span {
|
||||
}
|
||||
|
||||
main {
|
||||
margin-top: 4rem;
|
||||
|
||||
margin: 4px;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
@ -64,7 +63,7 @@ main {
|
||||
|
||||
.header {
|
||||
font-weight: 400;
|
||||
|
||||
margin-top: 80px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
Reference in New Issue
Block a user