Walmart script in production! And more notes.
This commit is contained in:
Norm Rasmussen
BIN
Custom_Templates/customer_templates/.DS_Store
vendored
BIN
Custom_Templates/customer_templates/.DS_Store
vendored
Binary file not shown.
@ -0,0 +1,46 @@
|
||||
<form class="np-form" action="{{ form.options.action }}" method="post" id="desktop_edit_learner" novalidate>
|
||||
<input type="hidden" name="_method" value="{{ form.options.http_method }}">
|
||||
{% form_authenticity_token %}
|
||||
<div class="np-card">
|
||||
<div class="np-card-container np-card-padding">
|
||||
<div class="row">
|
||||
<div class="col-sm-7 np-account-form">
|
||||
{% render "account_form", form: form, version: "desktop" %}
|
||||
<button type="submit" class="green-gradient-button np-button-large-font np-form-action">
|
||||
{% t shared.account.save %}
|
||||
</button>
|
||||
</div>
|
||||
<div class="col-sm-5 np-account-avatar">
|
||||
{% include "account_avatar", version: "desktop" %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
|
||||
<style>
|
||||
.np-card-container {
|
||||
background: none;
|
||||
}
|
||||
.np-input-label {
|
||||
color: #fff;
|
||||
font-size: 1rem;
|
||||
}
|
||||
.np-resource-title {
|
||||
color: #fff;
|
||||
}
|
||||
@media screen and (min-width: 768px) {
|
||||
.np-account-avatar p {
|
||||
color: #fff;
|
||||
font-size: 1rem;
|
||||
}
|
||||
}
|
||||
.np-card-container, .np-card-container-training-session {
|
||||
box-shadow: none;
|
||||
}
|
||||
.np-account-avatar-choice .np-form-field .np-input-label {
|
||||
font-size:1rem;
|
||||
}
|
||||
|
||||
</style>
|
||||
@ -0,0 +1,17 @@
|
||||
<form class="np-form" action="{{ form.options.action }}" method="post" id="mobile_edit_learner" novalidate>
|
||||
<input type="hidden" name="_method" value="{{ form.options.http_method }}">
|
||||
{% form_authenticity_token %}
|
||||
<div class="np-card np-account-form">
|
||||
<div class="np-card-container np-card-padding">
|
||||
{% render "account_form", form: form, version: "mobile" %}
|
||||
</div>
|
||||
</div>
|
||||
<div class="np-card np-account-avatar">
|
||||
<div class="np-card-container np-card-padding">
|
||||
{% include "account_avatar", version: "mobile" %}
|
||||
</div>
|
||||
</div>
|
||||
<button type="submit" class="green-gradient-button np-button-large-font np-form-action">
|
||||
{% t shared.account.save %}
|
||||
</button>
|
||||
</form>
|
||||
@ -0,0 +1,51 @@
|
||||
<div class="np-card-container">
|
||||
<div class="np-resource-header np-course-header np-card-padding-large">
|
||||
{% include "course_header" %}
|
||||
</div>
|
||||
<div class="np-divider"></div>
|
||||
<div class="row np-course-content np-card-padding-dynamic">
|
||||
<div class="col-xs-12 col-sm-6">
|
||||
<img
|
||||
src="{{ course.image_url }}"
|
||||
class="np-top-image np-top-image-spacing"
|
||||
alt="{{ course.name }}"
|
||||
/>
|
||||
{% include "course_description" %}
|
||||
|
||||
{% if course.categories.any? %}
|
||||
<div class="np-card-content-divider">
|
||||
{% include "course_categories" %}
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{% if course.instructors.any? %}
|
||||
<div class="np-card-content-divider">
|
||||
{% include "course_instructors" %}
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{% if course.events.any? %}
|
||||
<div class="np-card-content-divider">
|
||||
{% include "course_events" %}
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
<div class="np-grid-spacing col-xs-12 col-sm-6">
|
||||
<div class="np-top-cta">
|
||||
{% include "course_progress_and_cta" %}
|
||||
</div>
|
||||
{% include "course_outline" %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.np-card-container {
|
||||
background: none;
|
||||
box-shadow: none;
|
||||
border: none;
|
||||
}
|
||||
.np-top-cta {
|
||||
background: none;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,25 @@
|
||||
<div class="np-top-vocabulary np-text-title np-text-muted">
|
||||
{{ current_school.course_vocabulary }}
|
||||
<i class="far fa-graduation-cap np-button-color np-learning-path-icon np-hidden-mobile">
|
||||
</i>
|
||||
</div>
|
||||
<div class="np-top-title">
|
||||
<a href="{% route home %}" class="np-back-button" aria-label="{% t shared.go_back %}">
|
||||
<i class="far fa-arrow-left np-hidden-mobile np-icon-back"></i>
|
||||
</a>
|
||||
{{ course.name }}
|
||||
</div>
|
||||
<img
|
||||
src="{{ course.image_url }}"
|
||||
class="np-top-image np-hidden-desktop"
|
||||
alt="{{ course.name }}"
|
||||
/>
|
||||
<style>
|
||||
.np-top-title {
|
||||
color: #fff;
|
||||
}
|
||||
.np-text-title {
|
||||
color: #fff;
|
||||
opacity: 1;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,50 @@
|
||||
<div class="np-course-outline">
|
||||
<div class="np-text-title np-course-outline-title">
|
||||
{% t .header, key: current_school.course_vocabulary %}
|
||||
</div>
|
||||
<div class="np-course-outline-content">
|
||||
<ol class="np-course-outline-content-section">
|
||||
{% for section in course.sections %}
|
||||
<li class="np-course-outline-content-section-list">
|
||||
<div class="np-course-outline-content-section-name np-text-title-bold np-text-title-bold">
|
||||
{{ section.name }}
|
||||
</div>
|
||||
<ol class="np-course-outline-content-activity">
|
||||
{% for activity in section.activities %}
|
||||
|
||||
<li class="np-course-outline-content-activity-list">
|
||||
{% if activity.completed? %}
|
||||
<i class="fas fa-circle np-course-outline-content-activity-icon np-button-color"></i>
|
||||
{% if activity.locked? %}
|
||||
{% include "course_activity_locked" %}
|
||||
{% else %}
|
||||
{% include "course_activity_unlocked", class: "np-course-outline-content-activity-link-completed" %}
|
||||
{% endif %}
|
||||
<div class="np-button-background-color np-course-outline-content-activity-list-bar"></div>
|
||||
{% else %}
|
||||
<i class="far fa-circle np-course-outline-content-activity-icon"></i>
|
||||
{% if activity.locked? %}
|
||||
{% include "course_activity_locked" %}
|
||||
{% else %}
|
||||
{% include "course_activity_unlocked", class: "np-course-outline-content-activity-link" %}
|
||||
{% endif %}
|
||||
<div class="np-course-outline-content-activity-list-bar"></div>
|
||||
{% endif %}
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ol>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ol>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.np-course-outline-content-activity-link-completed {
|
||||
color: #fff;
|
||||
}
|
||||
.np-course-outline-content-activity-link {
|
||||
color: #fff;
|
||||
opacity: 0.7;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,57 @@
|
||||
<div class="np-top-cta-progress-content">
|
||||
<div class="np-top-cta-progress-title np-text-title">
|
||||
{% t .header %}
|
||||
</div>
|
||||
<div class="np-progress-bar-container">
|
||||
<div
|
||||
style="width: {{ course.progress }}%"
|
||||
class="np-button-background-color np-card-progress-bar">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="np-top-cta-progress-text
|
||||
{% if course.completed? %} np-color-success {% else %} np-button-color {% endif %}
|
||||
">
|
||||
{% t shared.progress, count: course.progress %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% if course.learner_can_retake? %}
|
||||
<form action="{% route course_retake, id: course.id %}" method="POST">
|
||||
{% form_authenticity_token %}
|
||||
<button type="submit" class="np-top-button np-button-font-color np-button np-button-big">
|
||||
{% t .retake, key: current_school.course_vocabulary %}
|
||||
</button>
|
||||
</form>
|
||||
{% else %}
|
||||
<a
|
||||
class="green-gradient-button" style="min-width: 130px;"
|
||||
{% if course.enrolled? %}
|
||||
href="{% route course_viewer, course_id: course.id, learning_path_id: params.learning_path_id %}"
|
||||
{% else %}
|
||||
href="{% route course_enrollment, code: course.enrollment_code %}"
|
||||
{% endif %}
|
||||
>
|
||||
{% if course.enrolled? == false %}
|
||||
{% t shared.enroll %}
|
||||
{% elsif course.started? == false %}
|
||||
{% t shared.course.start, key: current_school.course_vocabulary %}
|
||||
{% elsif course.completed? %}
|
||||
{% t shared.course.view, key: current_school.course_vocabulary %}
|
||||
{% else %}
|
||||
{% t shared.continue %}
|
||||
{% endif %}
|
||||
</a>
|
||||
{% endif %}
|
||||
|
||||
<style>
|
||||
.np-top-cta-progress-content {
|
||||
background: none;
|
||||
}
|
||||
@media only screen and (max-width: 770px) {
|
||||
.np-top-cta-progress-content {
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
@ -0,0 +1,110 @@
|
||||
<footer class="np-footer">
|
||||
<div class="footer">
|
||||
<div class="footer-column">
|
||||
<img class="footer-column1-logo" src="{{current_school.logo_url}}">
|
||||
<div class="footer-column1-text">
|
||||
© 2021 Isoplexis | All Rights Reserved For Research Use Only. Not for Use in Diagnostic Procedures.
|
||||
</div>
|
||||
<div class="footer-column1-link">
|
||||
<a href="https://isoplexis.com/privacy-policy/">Privacy Policy</a> | <a href="https://isoplexis.com/terms-and-conditions/">Terms and Conditions</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="footer-column" id="hide">
|
||||
<div class="footer-column2-upper">
|
||||
Research Areas
|
||||
</div>
|
||||
<a href="https://isoplexis.com/research-areas/checkpoint-combination-immunotherapies/" class="footer-column2-main">Cancer Immunology</a>
|
||||
<a href="https://isoplexis.com/research-areas/vaccines-and-immunology-research/" class="footer-column2-main">Infectious Disease & Vaccines</a>
|
||||
<a href="https://isoplexis.com/research-areas/cell-therapy/" class="footer-column2-main">Cellular & Regenerative Medicine</a>
|
||||
<a href="https://isoplexis.com/research-areas/inflammatory-auto-immune-disease/" class="footer-column2-main">Inflammation & Neurology</a>
|
||||
<a href="https://isoplexis.com/research-areas/solid-tumor-oncology/" class="footer-column2-main">Oncology</a>
|
||||
</div>
|
||||
<div class="footer-column" id="hide">
|
||||
<div class="footer-column2-upper">
|
||||
Company
|
||||
</div>
|
||||
<a href="https://isoplexis.com/company/about-us/" class="footer-column2-main">About Us</a>
|
||||
<a href="https://isoplexis.com/office-locations/" class="footer-column2-main">Locations</a>
|
||||
<a href="https://isoplexis.com/company/locations-distributors/distributors/" class="footer-column2-main">Distributors</a>
|
||||
<a href="https://isoplexis.com/company/isoplexis-news/" class="footer-column2-main">News</a>
|
||||
<a href="https://isoplexis.com/company/isoplexis-events/" class="footer-column2-main">Events</a>
|
||||
<a href="https://isoplexis.com/company/careers/" class="footer-column2-main">Careers</a>
|
||||
</div>
|
||||
<div class="footer-column" id="hide2">
|
||||
<div class="footer-column2-upper">
|
||||
Contact
|
||||
</div>
|
||||
<span class="footer-column1-text">IsoPlexis Office 35 NE Industrial Rd, Branford, CT 06405</span>
|
||||
<a href="https://isoplexis.com/contact/" class="footer-column1-link">Contact IsoPlexis</a>
|
||||
<a href="https://isoplexis.com/speak-to-an-expert/" class="footer-column1-link">Speak to an Expert</a>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<style>
|
||||
.np-footer{
|
||||
background: none;
|
||||
margin: 60px auto 0;
|
||||
padding: unset;
|
||||
}
|
||||
.footer {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
max-width: 1300px;
|
||||
}
|
||||
.footer-column {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
max-width: 20%;
|
||||
padding: 0 20px
|
||||
}
|
||||
.footer-column1-logo {
|
||||
margin-bottom: 20px;
|
||||
width: 220px;
|
||||
}
|
||||
.footer-column1-text {
|
||||
color: #9baebf;
|
||||
line-height: 1.3;
|
||||
}
|
||||
.footer-column1-link{
|
||||
color: #fff;
|
||||
line-height: 1.3;
|
||||
}
|
||||
.footer-column2-upper {
|
||||
margin-bottom: 20px;
|
||||
font-size: 1.6rem;
|
||||
position: relative;
|
||||
top: 15px;
|
||||
min-height: 56px;
|
||||
display: flex;
|
||||
}
|
||||
.footer-column2-main {
|
||||
color: #9baebf;
|
||||
padding-bottom: 8px;
|
||||
white-space: nowrap
|
||||
}
|
||||
@media only screen and (max-width: 1200px) {
|
||||
.footer {
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 900px) {
|
||||
#hide {
|
||||
display: none;
|
||||
}
|
||||
.footer-column {
|
||||
max-width: 30%;
|
||||
}
|
||||
}
|
||||
@media only screen and (max-width: 500px) {
|
||||
#hide2 {
|
||||
display: none;
|
||||
}
|
||||
.footer-column {
|
||||
max-width: 80%;
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,224 @@
|
||||
<header class="np-header">
|
||||
<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"
|
||||
/>
|
||||
<i class="np-header-search-icon far fa-search"></i>
|
||||
</form>
|
||||
</div>
|
||||
<div class="np-hidden-mobile np-header-avatar">
|
||||
<button
|
||||
class="np-header-avatar-button"
|
||||
data-test="open-desktop-menu"
|
||||
data-toggle-class-on-target="np-hidden"
|
||||
data-toggle-target=".np-header-avatar-tooltip"
|
||||
data-toggle-outside
|
||||
>
|
||||
<img
|
||||
alt="{{ current_person.name }}"
|
||||
class="np-header-avatar-image"
|
||||
src="{{ current_person.avatar_url }}"
|
||||
>
|
||||
</button>
|
||||
<div class="np-header-avatar-tooltip np-hidden" role="tooltip">
|
||||
<span class="np-header-avatar-tooltip-arrow-up"></span>
|
||||
<div class="np-header-avatar-tooltip-learner">
|
||||
<div class="np-header-avatar-tooltip-learner-name">
|
||||
{{ current_person.name }}
|
||||
</div>
|
||||
<div class="np-header-avatar-tooltip-learner-email">
|
||||
{{ current_person.email }}
|
||||
</div>
|
||||
</div>
|
||||
<nav class="np-header-avatar-tooltip-navigation">
|
||||
{% unless current_school.sso_active? %}
|
||||
<a
|
||||
class="np-header-avatar-tooltip-navigation-link"
|
||||
href="{% route account %}"
|
||||
>
|
||||
{% t .profile_settings %}
|
||||
</a>
|
||||
{% endunless %}
|
||||
<a
|
||||
class="np-header-avatar-tooltip-navigation-link np-danger"
|
||||
href="{% route logout %}"
|
||||
>
|
||||
{% t .sign_out %}
|
||||
</a>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
{% else %}
|
||||
<a
|
||||
class="np-header-sign-in np-header-desktop-nav-link np-header-font-color"
|
||||
href="{% route login %}"
|
||||
>
|
||||
{% t shared.sign_in %}
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="np-hidden-desktop">
|
||||
<div class="np-header-mobile-menu-content np-hidden">
|
||||
{% if current_person.signed_in? %}
|
||||
<img
|
||||
alt="{{ current_person.name }}"
|
||||
class="np-header-mobile-menu-content-avatar"
|
||||
src="{{ current_person.avatar_url }}"
|
||||
/>
|
||||
<div class="np-header-mobile-menu-content-name">
|
||||
{{ current_person.name }}
|
||||
</div>
|
||||
{% endif %}
|
||||
<div class="np-header-mobile-menu-content-nav">
|
||||
<form
|
||||
class="np-header-search"
|
||||
data-test="mobile-search"
|
||||
method="get"
|
||||
action="{% route search %}"
|
||||
>
|
||||
<input
|
||||
aria-label="{% t .search %}"
|
||||
class="np-header-search-input"
|
||||
type="text"
|
||||
name="q"
|
||||
placeholder="{% t .search %}"
|
||||
/>
|
||||
<i class="np-header-search-icon far fa-search"></i>
|
||||
</form>
|
||||
{% for website_navigation in navigations.header_navigations %}
|
||||
<a
|
||||
href="{{ website_navigation.path }}"
|
||||
class="np-header-mobile-menu-content-button"
|
||||
{% if website_navigation.external? %} target="_blank" {% endif %}
|
||||
>
|
||||
{{ website_navigation.name }}
|
||||
</a>
|
||||
{% endfor %}
|
||||
{% unless current_school.sso_active? %}
|
||||
<a
|
||||
class="np-header-mobile-menu-content-button"
|
||||
href="{% route account %}"
|
||||
>
|
||||
{% t .profile_settings %}
|
||||
</a>
|
||||
{% endunless %}
|
||||
<a
|
||||
class="np-header-mobile-menu-content-button np-danger"
|
||||
href="{% route logout %}"
|
||||
>
|
||||
{% t .sign_out %}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% include "messages" %}
|
||||
|
||||
<style>
|
||||
.np-header {
|
||||
background: none;
|
||||
max-width: 1300px;
|
||||
margin: auto;
|
||||
}
|
||||
.np-header-mobile-menu-content {
|
||||
background: linear-gradient(0deg, #080b20 0%, #0f152c 100%);
|
||||
}
|
||||
.np-header-mobile-menu-content-button {
|
||||
background: #000;
|
||||
color: #fff;
|
||||
font-size: 1rem;
|
||||
}
|
||||
.np-header-search-input {
|
||||
border: none;
|
||||
background: none;
|
||||
color: #fff;
|
||||
}
|
||||
.np-header-mobile-menu-content-name {
|
||||
color: #fff;
|
||||
font-size: 24px;
|
||||
}
|
||||
.np-header-search-icon {
|
||||
color: #fff;
|
||||
}
|
||||
.np-header-mobile-menu-content-button.np-danger {
|
||||
color:crimson;
|
||||
margin:2.25rem 0;
|
||||
font-weight: 800;
|
||||
font-size: 1.1rem;
|
||||
border: none;
|
||||
}
|
||||
::placeholder {
|
||||
opacity: 0.8 !important;
|
||||
color: #fff !important;
|
||||
font-style: italic;
|
||||
font-size: 1.1rem !important;
|
||||
}
|
||||
@media only screen and (max-width: 767px) {
|
||||
.np-header-search-input {
|
||||
background: #000;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
@ -0,0 +1,37 @@
|
||||
<div class="np-card np-search-result">
|
||||
<div class="np-card-container">
|
||||
<div class="np-card-content">
|
||||
<img
|
||||
class="np-search-result-image"
|
||||
alt="{{ result.name }}"
|
||||
src="{{ result.image_url }}"
|
||||
/>
|
||||
<div class="np-search-result-content">
|
||||
<div>
|
||||
<a class="np-search-result-title" href="{{ result.path }}">
|
||||
{{ result.name }}
|
||||
</a>
|
||||
</div>
|
||||
<div class="np-search-result-snippet">{{ result.sanitized_description }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<style>
|
||||
.np-resource-title {
|
||||
color: #fff;
|
||||
}
|
||||
.np-resource-subtitle {
|
||||
color: rgba(255, 2555, 255, 0.7);
|
||||
}
|
||||
.np-search .np-resource-subtitle-number {
|
||||
color: #fff;
|
||||
}
|
||||
.np-card-container, .np-card-container-training-session {
|
||||
background: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
.np-search-result-title {
|
||||
color: #fff;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,40 @@
|
||||
<div class="np-card np-search-zero-state">
|
||||
<div class="np-card-container">
|
||||
<div class="np-card-content np-card-content-vertical np-search-zero-state-card">
|
||||
<h3 class="np-search-zero-state-title">
|
||||
{% t .nothing_found %}
|
||||
</h3>
|
||||
<div class="np-search-zero-state-subtitle">
|
||||
{% t .empty %}
|
||||
</div>
|
||||
<div class="np-search-zero-state-image"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.np-card-container {
|
||||
background: none !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
.np-search-zero-state-title {
|
||||
/* color: #35404e; */
|
||||
color: #fff;
|
||||
}
|
||||
.np-search .np-resource-subtitle-number {
|
||||
/* color: #35404e; */
|
||||
color: #fff;
|
||||
}
|
||||
.np-search-zero-state-subtitle {
|
||||
/* color: #59697b; */
|
||||
color: rgba(255, 2555, 255, 0.7);
|
||||
}
|
||||
.np-resource-title {
|
||||
/* color: #35404e; */
|
||||
color: #fff;
|
||||
}
|
||||
.np-resource-subtitle {
|
||||
/* color: #59697b; */
|
||||
color: rgba(255, 2555, 255, 0.7);
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,487 @@
|
||||
{% include "header" %}
|
||||
{% include "course_version_outdated_alert", courses: courses.featured %}
|
||||
<main class="np-main np-homepage">
|
||||
<div class="homepage-title" >
|
||||
<div class="homepage-title-text">
|
||||
<div class="homepage-title-text-headline">
|
||||
<span class="isogreen" style="font-size: 1.4rem; white-space: nowrap;">EDUCATION & TRAINING CENTER</span>
|
||||
IsoPlexis <span class="isogreen">UNIVERSITY</span>
|
||||
</div>
|
||||
<div class="homepage-title-text-subline">
|
||||
Transform your immunotherapy programs with the latest data & insights from our <span class="isogreen">cutting edge work </span>in single-cell proteomics.
|
||||
</div>
|
||||
</div>
|
||||
<img class="homepage-title-image" src="https://s3.amazonaws.com/static.northpass.com/Isoplex/isou-home-hero-logo%402x.png">
|
||||
</div>
|
||||
<img class="homepage-main-image" src="https://s3.amazonaws.com/static.northpass.com/Isoplex/isou-hero-home-wide%402x(1).jpg"></img>
|
||||
|
||||
<div class="homepage-advantage">
|
||||
<div class="homepage-advantage-slide">
|
||||
<img class="homepage-advantage-slide-left" src="https://s3.amazonaws.com/static.northpass.com/Isoplex/index1.png">
|
||||
<div class=homepage-advantage-slide-right>
|
||||
<div class="homepage-advantage-slide-right-top">HD Video Protocols</div>
|
||||
<div class="homepage-advantage-slide-right-bottom">Watch short step-by-step protocol videos to simplify your workflow</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="homepage-advantage-slide" style="padding: 15px 30px;">
|
||||
<img class="homepage-advantage-slide-left" src="https://s3.amazonaws.com/static.northpass.com/Isoplex/index.png">
|
||||
<div class=homepage-advantage-slide-right>
|
||||
<div class="homepage-advantage-slide-right-top">Support Resources</div>
|
||||
<div class="homepage-advantage-slide-right-bottom">Download detailed guides, tech notes & reference new publications</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="homepage-advantage-slide">
|
||||
<img class="homepage-advantage-slide-left" src="https://s3.amazonaws.com/static.northpass.com/Isoplex/index2.png">
|
||||
<div class=homepage-advantage-slide-right>
|
||||
<div class="homepage-advantage-slide-right-top">Expert Webinars</div>
|
||||
<div class="homepage-advantage-slide-right-bottom">Hear from thought leaders in single-cell biology & functional proteomics</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% assign LP = learning_paths.available | where: "name", "Experiment Run" %} {% assign LP = LP.first %}
|
||||
<div class="homepage-content" style="padding-top: 70px;">
|
||||
<div class="homepage-training">
|
||||
<div class="homepage-training-headline">
|
||||
<div class="homepage-training-headline-textes">
|
||||
<span class="isogreen" style="font-weight: 800; font-size: 1.3rem;">GET STARTED</span>
|
||||
<span style="font-size: 2.4rem;">{{LP.name}}</span>
|
||||
<span style="font-size: 20px; color: #a7aed1">{{LP.description}}</span>
|
||||
</div>
|
||||
<div class="homepage-training-headline-right">
|
||||
<span class="isogreen" style="font-weight: 800; font-size: 1.3rem; padding-bottom: 10px;">MASTER THE ISOU</span>
|
||||
<button class="homepage-training-headline-right-button green-gradient-button"> <img src="https://s3.amazonaws.com/static.northpass.com/Isoplex/isou-icon-certification-badge-lg-flat-dark%402x.png" height="30px">
|
||||
<span style="align-self: center;padding-left: 10px;">Get Certified</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% assign descriptions = ". Accelerate yours sample prep with how-to videos&protocols. Learn how to run your samples on the automated IsoLight system. Generate meaningful data in seconds, not days. Accelerate your sample prep with how-to videos & protocols" | split: ". " %}
|
||||
<div class="homepage-content-modules">
|
||||
{% for LPC in LP.items %}
|
||||
<div style="display: none;">{% increment my_counter1 %}</div>
|
||||
{% if my_counter1 == 1 or my_counter1 == 3 %} <div class="homepage-content-modules-group"> {%endif%}
|
||||
<a class="homepage-content-modules-module module-1" href="/../../app/courses/{{LPC.id}}">
|
||||
<div class="homepage-content-modules-module-number">
|
||||
MODULE {{my_counter1}}
|
||||
</div>
|
||||
<div class=homepage-content-modules-module-circle>
|
||||
<img class="homepage-content-modules-module-circle-image" src="https://s3.amazonaws.com/static.northpass.com/Isoplex/isoplex-modules1-{{my_counter1}}.png">
|
||||
</div>
|
||||
<div class="homepage-content-modules-module-title">
|
||||
{{LPC.name}}
|
||||
</div>
|
||||
<div class="homepage-content-modules-module-description">
|
||||
{{descriptions[my_counter1]}}
|
||||
</div>
|
||||
</a>
|
||||
{% if my_counter1 == 2 or my_counter1 == 4 %} </div> {%endif %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
{% assign LP = learning_paths.available | where: "name", "How the IsoLight Works" %} {% assign LP = LP.first %}
|
||||
<div class="homepage-content" style="padding-top: 70px;">
|
||||
<div class="homepage-training">
|
||||
<div class="homepage-training-headline">
|
||||
<div class="homepage-training-headline-textes">
|
||||
<span style="font-size: 2.4rem;">{{LP.name}}</span>
|
||||
<span style="font-size: 20px; color: #a7aed1">{{LP.description}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% assign descriptions = ". Learn how CO2 supports incubation and fluidics on the IsoLight System. Fluidics are at the core of the IsoLight platform. Disposal of used reagents is critical. How IsoPlexis' unique single-cell and CodePlex chips works" | split: ". " %}
|
||||
<div class="homepage-content-modules">
|
||||
{% for LPC in LP.items %}
|
||||
<div style="display: none;">{% increment my_counter2 %}</div>
|
||||
{% if my_counter2 == 1 or my_counter2 == 3 %} <div class="homepage-content-modules-group"> {%endif%}
|
||||
<a class="homepage-content-modules-module module-2" href="/../../app/courses/{{LPC.id}}">
|
||||
<div class="homepage-content-modules-module-number">
|
||||
MODULE {{my_counter2}}
|
||||
</div>
|
||||
<div class=homepage-content-modules-module-circle>
|
||||
<img class="homepage-content-modules-module-circle-image" src="https://s3.amazonaws.com/static.northpass.com/Isoplex/isoplex-modules2-{{my_counter2}}.png">
|
||||
</div>
|
||||
<div class="homepage-content-modules-module-title">
|
||||
{{LPC.name}}
|
||||
</div>
|
||||
<div class="homepage-content-modules-module-description">
|
||||
{{descriptions[my_counter2]}}
|
||||
</div>
|
||||
</a>
|
||||
{% if my_counter2 == 2 or my_counter2 == 4 %} </div> {%endif %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% assign LP = learning_paths.available | where: "name", "System Troubleshooting" %} {% assign LP = LP.first %}
|
||||
<div class="homepage-content" style="padding-top: 70px;">
|
||||
<div class="homepage-training">
|
||||
<div class="homepage-training-headline">
|
||||
<div class="homepage-training-headline-textes">
|
||||
<span style="font-size: 2.4rem;">{{LP.name}}</span>
|
||||
<span style="font-size: 20px; color: #a7aed1">{{LP.description}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% assign descriptions = ". The barcode scanner reads QR labels on each individual chip. Fluidics maintenance and upkeep. Proper lase function is essential for imaging. Airflow and appropriate waste disposal procedures" | split: ". " %}
|
||||
<div class="homepage-content-modules">
|
||||
{% for LPC in LP.items %}
|
||||
<div style="display: none;">{% increment my_counter3 %}</div>
|
||||
{% if my_counter3 == 1 or my_counter3 == 3 %} <div class="homepage-content-modules-group"> {%endif%}
|
||||
<a class="homepage-content-modules-module module-3" href="/../../app/courses/{{LPC.id}}">
|
||||
<div class="homepage-content-modules-module-number">
|
||||
MODULE {{my_counter3}}
|
||||
</div>
|
||||
<div class=homepage-content-modules-module-circle>
|
||||
<img class="homepage-content-modules-module-circle-image" src="https://s3.amazonaws.com/static.northpass.com/Isoplex/isoplex-modules3-{{my_counter3}}.png">
|
||||
</div>
|
||||
<div class="homepage-content-modules-module-title">
|
||||
{{LPC.name}}
|
||||
</div>
|
||||
<div class="homepage-content-modules-module-description">
|
||||
{{descriptions[my_counter3]}}
|
||||
</div>
|
||||
</a>
|
||||
{% if my_counter3 == 2 or my_counter3 == 4 %} </div> {%endif %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% assign LP = learning_paths.available | where: "name", "Network Troubleshooting" %} {% assign LP = LP.first %}
|
||||
<div class="homepage-content" style="padding-top: 70px;">
|
||||
<div class="homepage-training">
|
||||
<div class="homepage-training-headline">
|
||||
<div class="homepage-training-headline-textes">
|
||||
<span style="font-size: 2.4rem;">{{LP.name}}</span>
|
||||
<span style="font-size: 20px; color: #a7aed1">{{LP.description}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% assign descriptions = ". What a correctly configured home screen should look like. Networking FAQs and answers to common questions. Steps to take when encountering network issues. Data managment is a critical component of instrument maintenance" | split: ". " %}
|
||||
<div class="homepage-content-modules">
|
||||
{% for LPC in LP.items %}
|
||||
<div style="display: none;">{% increment my_counter4 %}</div>
|
||||
{% if my_counter4 == 1 or my_counter4 == 3 %} <div class="homepage-content-modules-group"> {%endif%}
|
||||
<a class="homepage-content-modules-module module-4" href="/../../app/courses/{{LPC.id}}">
|
||||
<div class="homepage-content-modules-module-number">
|
||||
MODULE {{my_counter4}}
|
||||
</div>
|
||||
<div class=homepage-content-modules-module-circle>
|
||||
<img class="homepage-content-modules-module-circle-image" src="https://s3.amazonaws.com/static.northpass.com/Isoplex/isoplex-modules4-{{my_counter4}}.png">
|
||||
</div>
|
||||
<div class="homepage-content-modules-module-title">
|
||||
{{LPC.name}}
|
||||
</div>
|
||||
<div class="homepage-content-modules-module-description">
|
||||
{{descriptions[my_counter4]}}
|
||||
</div>
|
||||
</a>
|
||||
{% if my_counter4 == 2 or my_counter4 == 4 %} </div> {%endif %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
{% include "footer" %}
|
||||
|
||||
<style>
|
||||
.np-homepage {
|
||||
background: none;
|
||||
max-width: 1300px;
|
||||
margin: auto;
|
||||
}
|
||||
.homepage-title {
|
||||
height: auto;
|
||||
height: auto;
|
||||
padding-bottom: 70px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.homepage-main-image {
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
width: 1490px;
|
||||
top: 0;
|
||||
background-repeat: no-repeat;
|
||||
opacity: 0.7;
|
||||
top: 100px;
|
||||
height: 570px;
|
||||
mix-blend-mode: lighten;
|
||||
right: calc(calc(100vw - 1300px)/2);
|
||||
}
|
||||
.homepage-title-text {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding-left: 4%;
|
||||
}
|
||||
.homepage-title-text-headline{
|
||||
font-size: calc(6vw + 30px);
|
||||
max-width: 200px;
|
||||
line-height: 1;
|
||||
}
|
||||
.homepage-title-text-subline {
|
||||
padding-top: 20px;
|
||||
max-width: 730px;
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
.homepage-title-image {
|
||||
height: 400px;
|
||||
margin-top: 20px;
|
||||
margin-right: 5%;
|
||||
}
|
||||
.homepage-advantage{
|
||||
margin: auto;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
padding: 20px 10px;
|
||||
}
|
||||
.homepage-advantage-slide{
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
padding: 15px 0;
|
||||
}
|
||||
.homepage-advantage-slide-left {
|
||||
height: 72px;
|
||||
width: 72px;
|
||||
margin-right: 10px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.homepage-advantage-slide-right {
|
||||
align-self: center;
|
||||
max-width: 300px;
|
||||
}
|
||||
.homepage-advantage-slide-right-top {
|
||||
font-weight: 600;
|
||||
color: #fff;
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
.homepage-advantage-slide-right-bottom {
|
||||
color: #a7aed1;
|
||||
line-height: 1.3;
|
||||
}
|
||||
.homepage-training-headline {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
padding: 0 20px;
|
||||
}
|
||||
.homepage-training-headline-textes {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
max-width: 50%;
|
||||
}
|
||||
.homepage-training-headline-right {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-self: center;
|
||||
}
|
||||
.homepage-training-headline-right-button {
|
||||
display: flex;
|
||||
align-content: center;
|
||||
}
|
||||
.homepage-content-modules {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
margin-top: 50px;
|
||||
align-items: center;
|
||||
}
|
||||
.homepage-content-modules-group {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
.homepage-content-modules-module-number {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding-top: 10px;
|
||||
padding-bottom: 15px;
|
||||
font-size: 25px;
|
||||
font-weight: 900;
|
||||
margin-top: 10px;
|
||||
}
|
||||
.homepage-content-modules-module {
|
||||
background-position-x: 0%;
|
||||
background-position-y: 0%;
|
||||
background-size: auto;
|
||||
background-size: auto 200% !important;
|
||||
background-position: center top !important;
|
||||
transition: all .6s ease !important;
|
||||
transition-duration: .2s;
|
||||
transition-timing-function: linear;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin: 0 15px;
|
||||
flex-direction: column;
|
||||
width: 300px;
|
||||
}
|
||||
.module-1 {
|
||||
background: linear-gradient(180deg,#0DD1DB 0%,#2AAFDD 10%,#528DE2 20%,#264CAC 45%,#25359E 65%,#6533A4 90%);
|
||||
}
|
||||
.module-2 {
|
||||
background: linear-gradient(180deg,#4053EE 0%, #5942CA 50%, #762EA3 100%);
|
||||
}
|
||||
.module-3 {
|
||||
background: linear-gradient(180deg,#1AF1A1 0%, #08D5AC 50%, #228193 100%);
|
||||
}
|
||||
.module-4 {
|
||||
background: linear-gradient(180deg,#FCBC02 0%, #FDA14C 50%, #FF4B01 100%);
|
||||
}
|
||||
.homepage-content-modules-module-circle-image{
|
||||
height: 100px;
|
||||
width: auto;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin: auto;
|
||||
}
|
||||
.homepage-content-modules-module-circle {
|
||||
background-color: #000;
|
||||
border-radius: 50%;
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.homepage-content-modules-module-title {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
padding-top: 15px;
|
||||
padding-bottom: 15px;
|
||||
font-size: 28px;
|
||||
font-weight: 500;
|
||||
min-height: 95px;
|
||||
width: 90%;
|
||||
margin: auto;
|
||||
}
|
||||
.homepage-content-modules-module-description {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
padding-bottom: 20px;
|
||||
width: 75%;
|
||||
margin: auto;
|
||||
font-size: 20px;
|
||||
min-height: 89px;
|
||||
}
|
||||
.homepage-content-modules-module:hover {
|
||||
background-position: 100% 50% !important;
|
||||
}
|
||||
@media only screen and (min-width: 1400px) {
|
||||
.homepage-title-text-headline {
|
||||
font-size: 114px;
|
||||
}
|
||||
}
|
||||
@media only screen and (max-width: 1320px) {
|
||||
.homepage-content-modules-module {
|
||||
width: 250px;
|
||||
}
|
||||
.homepage-content-modules-module-title {
|
||||
font-size: 20px;
|
||||
min-height: 76px;
|
||||
}
|
||||
.homepage-content-modules-module-description {
|
||||
font-size: 16px;
|
||||
min-height: 76px;
|
||||
}
|
||||
}
|
||||
@media only screen and (max-width: 1300px) {
|
||||
.homepage-main-image {
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
@media only screen and (max-width: 1100px) {
|
||||
.homepage-content-modules {
|
||||
flex-direction: column;
|
||||
}
|
||||
.homepage-content-modules-group {
|
||||
padding-top: 30px;
|
||||
}
|
||||
.homepage-content-modules-module {
|
||||
width: 300px;
|
||||
}
|
||||
.homepage-content-modules-module-title {
|
||||
font-size: 28px;
|
||||
min-height: 95px;
|
||||
}
|
||||
.homepage-content-modules-module-description {
|
||||
font-size: 20px;
|
||||
min-height: 89px;
|
||||
}
|
||||
}
|
||||
@media only screen and (max-width: 850px) {
|
||||
.homepage-title-image {
|
||||
display: none;
|
||||
}
|
||||
.homepage-main-image {
|
||||
display: none;
|
||||
}
|
||||
.homepage-title-text-subline {
|
||||
max-width: 60%;
|
||||
}
|
||||
}
|
||||
@media only screen and (max-width: 700px) {
|
||||
.homepage-content-modules-module {
|
||||
width: 250px;
|
||||
}
|
||||
.homepage-content-modules-module-title {
|
||||
font-size: 20px;
|
||||
min-height: 76px;
|
||||
}
|
||||
.homepage-content-modules-module-description {
|
||||
font-size: 16px;
|
||||
min-height: 76px;
|
||||
}
|
||||
}
|
||||
@media only screen and (max-width: 650px) {
|
||||
.homepage-advantage-slide {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
@media only screen and (max-width: 550px) {
|
||||
.homepage-title-text-subline {
|
||||
max-width: 80%;
|
||||
}
|
||||
.homepage-content-modules-module {
|
||||
margin: 5px;
|
||||
width: 50%;
|
||||
}
|
||||
.homepage-content-modules-module-description {
|
||||
display: none;
|
||||
}
|
||||
.homepage-training-headline {
|
||||
flex-direction: column;
|
||||
}
|
||||
.homepage-training-headline-textes {
|
||||
max-width: 100%;
|
||||
}
|
||||
.homepage-training-headline-right {
|
||||
margin-top: 15px;
|
||||
}
|
||||
|
||||
.homepage-content-modules-group {
|
||||
width: 95%;
|
||||
justify-content: center;
|
||||
padding-top: 0;
|
||||
}
|
||||
}
|
||||
.homepage-title-image {
|
||||
animation-duration: 3s;
|
||||
animation-name: levitation;
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
@keyframes levitation {
|
||||
from {
|
||||
margin-top: 20px;
|
||||
}
|
||||
50% {
|
||||
margin-top: 0;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
to {
|
||||
margin-top: 20;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,69 @@
|
||||
<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">
|
||||
{% 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="green-gradient-button 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>
|
||||
|
||||
<style>
|
||||
|
||||
.np-box {
|
||||
background: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
.np-input-label {
|
||||
color: #fff;
|
||||
font-size: 1rem;
|
||||
}
|
||||
.np-header-color {
|
||||
background: none;
|
||||
}
|
||||
|
||||
</style>
|
||||
@ -0,0 +1,42 @@
|
||||
@import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:ital,wght@0,300;0,400;0,600;1,300;1,400&display=swap');
|
||||
|
||||
.isogreen {
|
||||
color: #12cd9a;
|
||||
}
|
||||
|
||||
.green-gradient-button {
|
||||
background-image: linear-gradient(45deg, rgb(17, 201, 162) 0%, rgb(4, 170, 205) 40%, rgb(16, 69, 218) 65%, rgb(94, 59, 157) 100%);
|
||||
color: #fff;
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
padding: 15px;
|
||||
font-size: 1.2rem;
|
||||
font-weight: 600;
|
||||
text-transform: none;
|
||||
transition-delay: 0s;
|
||||
transition-duration: 0.8s;
|
||||
transition-property: all;
|
||||
transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1) !important;
|
||||
background-size: 300% auto !important;
|
||||
background-position: 0 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.green-gradient-button:hover {
|
||||
background-position: 100% 50%;
|
||||
}
|
||||
|
||||
body {
|
||||
background: linear-gradient(0deg, #080b20 0%, #0f152c 100%);
|
||||
font-family: 'Source Sans Pro', sans-serif;
|
||||
font-weight: 400;
|
||||
color: #fff;
|
||||
margin: 0;
|
||||
background-repeat: no-repeat;
|
||||
background-attachment: fixed;
|
||||
}
|
||||
a {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
@ -0,0 +1,46 @@
|
||||
<form class="np-form" action="{{ form.options.action }}" method="post" id="desktop_edit_learner" novalidate>
|
||||
<input type="hidden" name="_method" value="{{ form.options.http_method }}">
|
||||
{% form_authenticity_token %}
|
||||
<div class="np-card">
|
||||
<div class="np-card-container np-card-padding">
|
||||
<div class="row">
|
||||
<div class="col-sm-7 np-account-form">
|
||||
{% render "account_form", form: form, version: "desktop" %}
|
||||
<button type="submit" class="green-gradient-button np-button-large-font np-form-action">
|
||||
{% t shared.account.save %}
|
||||
</button>
|
||||
</div>
|
||||
<div class="col-sm-5 np-account-avatar">
|
||||
{% include "account_avatar", version: "desktop" %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
|
||||
<style>
|
||||
.np-card-container {
|
||||
background: none;
|
||||
}
|
||||
.np-input-label {
|
||||
color: #fff;
|
||||
font-size: 1rem;
|
||||
}
|
||||
.np-resource-title {
|
||||
color: #fff;
|
||||
}
|
||||
@media screen and (min-width: 768px) {
|
||||
.np-account-avatar p {
|
||||
color: #fff;
|
||||
font-size: 1rem;
|
||||
}
|
||||
}
|
||||
.np-card-container, .np-card-container-training-session {
|
||||
box-shadow: none;
|
||||
}
|
||||
.np-account-avatar-choice .np-form-field .np-input-label {
|
||||
font-size:1rem;
|
||||
}
|
||||
|
||||
</style>
|
||||
@ -0,0 +1,17 @@
|
||||
<form class="np-form" action="{{ form.options.action }}" method="post" id="mobile_edit_learner" novalidate>
|
||||
<input type="hidden" name="_method" value="{{ form.options.http_method }}">
|
||||
{% form_authenticity_token %}
|
||||
<div class="np-card np-account-form">
|
||||
<div class="np-card-container np-card-padding">
|
||||
{% render "account_form", form: form, version: "mobile" %}
|
||||
</div>
|
||||
</div>
|
||||
<div class="np-card np-account-avatar">
|
||||
<div class="np-card-container np-card-padding">
|
||||
{% include "account_avatar", version: "mobile" %}
|
||||
</div>
|
||||
</div>
|
||||
<button type="submit" class="green-gradient-button np-button-large-font np-form-action">
|
||||
{% t shared.account.save %}
|
||||
</button>
|
||||
</form>
|
||||
@ -0,0 +1,51 @@
|
||||
<div class="np-card-container">
|
||||
<div class="np-resource-header np-course-header np-card-padding-large">
|
||||
{% include "course_header" %}
|
||||
</div>
|
||||
<div class="np-divider"></div>
|
||||
<div class="row np-course-content np-card-padding-dynamic">
|
||||
<div class="col-xs-12 col-sm-6">
|
||||
<img
|
||||
src="{{ course.image_url }}"
|
||||
class="np-top-image np-top-image-spacing"
|
||||
alt="{{ course.name }}"
|
||||
/>
|
||||
{% include "course_description" %}
|
||||
|
||||
{% if course.categories.any? %}
|
||||
<div class="np-card-content-divider">
|
||||
{% include "course_categories" %}
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{% if course.instructors.any? %}
|
||||
<div class="np-card-content-divider">
|
||||
{% include "course_instructors" %}
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{% if course.events.any? %}
|
||||
<div class="np-card-content-divider">
|
||||
{% include "course_events" %}
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
<div class="np-grid-spacing col-xs-12 col-sm-6">
|
||||
<div class="np-top-cta">
|
||||
{% include "course_progress_and_cta" %}
|
||||
</div>
|
||||
{% include "course_outline" %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.np-card-container {
|
||||
background: none;
|
||||
box-shadow: none;
|
||||
border: none;
|
||||
}
|
||||
.np-top-cta {
|
||||
background: none;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,25 @@
|
||||
<div class="np-top-vocabulary np-text-title np-text-muted">
|
||||
{{ current_school.course_vocabulary }}
|
||||
<i class="far fa-graduation-cap np-button-color np-learning-path-icon np-hidden-mobile">
|
||||
</i>
|
||||
</div>
|
||||
<div class="np-top-title">
|
||||
<a href="{% route home %}" class="np-back-button" aria-label="{% t shared.go_back %}">
|
||||
<i class="far fa-arrow-left np-hidden-mobile np-icon-back"></i>
|
||||
</a>
|
||||
{{ course.name }}
|
||||
</div>
|
||||
<img
|
||||
src="{{ course.image_url }}"
|
||||
class="np-top-image np-hidden-desktop"
|
||||
alt="{{ course.name }}"
|
||||
/>
|
||||
<style>
|
||||
.np-top-title {
|
||||
color: #fff;
|
||||
}
|
||||
.np-text-title {
|
||||
color: #fff;
|
||||
opacity: 1;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,50 @@
|
||||
<div class="np-course-outline">
|
||||
<div class="np-text-title np-course-outline-title">
|
||||
{% t .header, key: current_school.course_vocabulary %}
|
||||
</div>
|
||||
<div class="np-course-outline-content">
|
||||
<ol class="np-course-outline-content-section">
|
||||
{% for section in course.sections %}
|
||||
<li class="np-course-outline-content-section-list">
|
||||
<div class="np-course-outline-content-section-name np-text-title-bold np-text-title-bold">
|
||||
{{ section.name }}
|
||||
</div>
|
||||
<ol class="np-course-outline-content-activity">
|
||||
{% for activity in section.activities %}
|
||||
|
||||
<li class="np-course-outline-content-activity-list">
|
||||
{% if activity.completed? %}
|
||||
<i class="fas fa-circle np-course-outline-content-activity-icon np-button-color"></i>
|
||||
{% if activity.locked? %}
|
||||
{% include "course_activity_locked" %}
|
||||
{% else %}
|
||||
{% include "course_activity_unlocked", class: "np-course-outline-content-activity-link-completed" %}
|
||||
{% endif %}
|
||||
<div class="np-button-background-color np-course-outline-content-activity-list-bar"></div>
|
||||
{% else %}
|
||||
<i class="far fa-circle np-course-outline-content-activity-icon"></i>
|
||||
{% if activity.locked? %}
|
||||
{% include "course_activity_locked" %}
|
||||
{% else %}
|
||||
{% include "course_activity_unlocked", class: "np-course-outline-content-activity-link" %}
|
||||
{% endif %}
|
||||
<div class="np-course-outline-content-activity-list-bar"></div>
|
||||
{% endif %}
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ol>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ol>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.np-course-outline-content-activity-link-completed {
|
||||
color: #fff;
|
||||
}
|
||||
.np-course-outline-content-activity-link {
|
||||
color: #fff;
|
||||
opacity: 0.7;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,57 @@
|
||||
<div class="np-top-cta-progress-content">
|
||||
<div class="np-top-cta-progress-title np-text-title">
|
||||
{% t .header %}
|
||||
</div>
|
||||
<div class="np-progress-bar-container">
|
||||
<div
|
||||
style="width: {{ course.progress }}%"
|
||||
class="np-button-background-color np-card-progress-bar">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="np-top-cta-progress-text
|
||||
{% if course.completed? %} np-color-success {% else %} np-button-color {% endif %}
|
||||
">
|
||||
{% t shared.progress, count: course.progress %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% if course.learner_can_retake? %}
|
||||
<form action="{% route course_retake, id: course.id %}" method="POST">
|
||||
{% form_authenticity_token %}
|
||||
<button type="submit" class="np-top-button np-button-font-color np-button np-button-big">
|
||||
{% t .retake, key: current_school.course_vocabulary %}
|
||||
</button>
|
||||
</form>
|
||||
{% else %}
|
||||
<a
|
||||
class="green-gradient-button" style="min-width: 130px;"
|
||||
{% if course.enrolled? %}
|
||||
href="{% route course_viewer, course_id: course.id, learning_path_id: params.learning_path_id %}"
|
||||
{% else %}
|
||||
href="{% route course_enrollment, code: course.enrollment_code %}"
|
||||
{% endif %}
|
||||
>
|
||||
{% if course.enrolled? == false %}
|
||||
{% t shared.enroll %}
|
||||
{% elsif course.started? == false %}
|
||||
{% t shared.course.start, key: current_school.course_vocabulary %}
|
||||
{% elsif course.completed? %}
|
||||
{% t shared.course.view, key: current_school.course_vocabulary %}
|
||||
{% else %}
|
||||
{% t shared.continue %}
|
||||
{% endif %}
|
||||
</a>
|
||||
{% endif %}
|
||||
|
||||
<style>
|
||||
.np-top-cta-progress-content {
|
||||
background: none;
|
||||
}
|
||||
@media only screen and (max-width: 770px) {
|
||||
.np-top-cta-progress-content {
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
@ -0,0 +1,110 @@
|
||||
<footer class="np-footer">
|
||||
<div class="footer">
|
||||
<div class="footer-column">
|
||||
<img class="footer-column1-logo" src="{{current_school.logo_url}}">
|
||||
<div class="footer-column1-text">
|
||||
© 2021 Isoplexis | All Rights Reserved For Research Use Only. Not for Use in Diagnostic Procedures.
|
||||
</div>
|
||||
<div class="footer-column1-link">
|
||||
<a href="https://isoplexis.com/privacy-policy/">Privacy Policy</a> | <a href="https://isoplexis.com/terms-and-conditions/">Terms and Conditions</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="footer-column" id="hide">
|
||||
<div class="footer-column2-upper">
|
||||
Research Areas
|
||||
</div>
|
||||
<a href="https://isoplexis.com/research-areas/checkpoint-combination-immunotherapies/" class="footer-column2-main">Cancer Immunology</a>
|
||||
<a href="https://isoplexis.com/research-areas/vaccines-and-immunology-research/" class="footer-column2-main">Infectious Disease & Vaccines</a>
|
||||
<a href="https://isoplexis.com/research-areas/cell-therapy/" class="footer-column2-main">Cellular & Regenerative Medicine</a>
|
||||
<a href="https://isoplexis.com/research-areas/inflammatory-auto-immune-disease/" class="footer-column2-main">Inflammation & Neurology</a>
|
||||
<a href="https://isoplexis.com/research-areas/solid-tumor-oncology/" class="footer-column2-main">Oncology</a>
|
||||
</div>
|
||||
<div class="footer-column" id="hide">
|
||||
<div class="footer-column2-upper">
|
||||
Company
|
||||
</div>
|
||||
<a href="https://isoplexis.com/company/about-us/" class="footer-column2-main">About Us</a>
|
||||
<a href="https://isoplexis.com/office-locations/" class="footer-column2-main">Locations</a>
|
||||
<a href="https://isoplexis.com/company/locations-distributors/distributors/" class="footer-column2-main">Distributors</a>
|
||||
<a href="https://isoplexis.com/company/isoplexis-news/" class="footer-column2-main">News</a>
|
||||
<a href="https://isoplexis.com/company/isoplexis-events/" class="footer-column2-main">Events</a>
|
||||
<a href="https://isoplexis.com/company/careers/" class="footer-column2-main">Careers</a>
|
||||
</div>
|
||||
<div class="footer-column" id="hide2">
|
||||
<div class="footer-column2-upper">
|
||||
Contact
|
||||
</div>
|
||||
<span class="footer-column1-text">IsoPlexis Office 35 NE Industrial Rd, Branford, CT 06405</span>
|
||||
<a href="https://isoplexis.com/contact/" class="footer-column1-link">Contact IsoPlexis</a>
|
||||
<a href="https://isoplexis.com/speak-to-an-expert/" class="footer-column1-link">Speak to an Expert</a>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<style>
|
||||
.np-footer{
|
||||
background: none;
|
||||
margin: 60px auto 0;
|
||||
padding: unset;
|
||||
}
|
||||
.footer {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
max-width: 1300px;
|
||||
}
|
||||
.footer-column {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
max-width: 20%;
|
||||
padding: 0 20px
|
||||
}
|
||||
.footer-column1-logo {
|
||||
margin-bottom: 20px;
|
||||
width: 220px;
|
||||
}
|
||||
.footer-column1-text {
|
||||
color: #9baebf;
|
||||
line-height: 1.3;
|
||||
}
|
||||
.footer-column1-link{
|
||||
color: #fff;
|
||||
line-height: 1.3;
|
||||
}
|
||||
.footer-column2-upper {
|
||||
margin-bottom: 20px;
|
||||
font-size: 1.6rem;
|
||||
position: relative;
|
||||
top: 15px;
|
||||
min-height: 56px;
|
||||
display: flex;
|
||||
}
|
||||
.footer-column2-main {
|
||||
color: #9baebf;
|
||||
padding-bottom: 8px;
|
||||
white-space: nowrap
|
||||
}
|
||||
@media only screen and (max-width: 1200px) {
|
||||
.footer {
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 900px) {
|
||||
#hide {
|
||||
display: none;
|
||||
}
|
||||
.footer-column {
|
||||
max-width: 30%;
|
||||
}
|
||||
}
|
||||
@media only screen and (max-width: 500px) {
|
||||
#hide2 {
|
||||
display: none;
|
||||
}
|
||||
.footer-column {
|
||||
max-width: 80%;
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,224 @@
|
||||
<header class="np-header">
|
||||
<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"
|
||||
/>
|
||||
<i class="np-header-search-icon far fa-search"></i>
|
||||
</form>
|
||||
</div>
|
||||
<div class="np-hidden-mobile np-header-avatar">
|
||||
<button
|
||||
class="np-header-avatar-button"
|
||||
data-test="open-desktop-menu"
|
||||
data-toggle-class-on-target="np-hidden"
|
||||
data-toggle-target=".np-header-avatar-tooltip"
|
||||
data-toggle-outside
|
||||
>
|
||||
<img
|
||||
alt="{{ current_person.name }}"
|
||||
class="np-header-avatar-image"
|
||||
src="{{ current_person.avatar_url }}"
|
||||
>
|
||||
</button>
|
||||
<div class="np-header-avatar-tooltip np-hidden" role="tooltip">
|
||||
<span class="np-header-avatar-tooltip-arrow-up"></span>
|
||||
<div class="np-header-avatar-tooltip-learner">
|
||||
<div class="np-header-avatar-tooltip-learner-name">
|
||||
{{ current_person.name }}
|
||||
</div>
|
||||
<div class="np-header-avatar-tooltip-learner-email">
|
||||
{{ current_person.email }}
|
||||
</div>
|
||||
</div>
|
||||
<nav class="np-header-avatar-tooltip-navigation">
|
||||
{% unless current_school.sso_active? %}
|
||||
<a
|
||||
class="np-header-avatar-tooltip-navigation-link"
|
||||
href="{% route account %}"
|
||||
>
|
||||
{% t .profile_settings %}
|
||||
</a>
|
||||
{% endunless %}
|
||||
<a
|
||||
class="np-header-avatar-tooltip-navigation-link np-danger"
|
||||
href="{% route logout %}"
|
||||
>
|
||||
{% t .sign_out %}
|
||||
</a>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
{% else %}
|
||||
<a
|
||||
class="np-header-sign-in np-header-desktop-nav-link np-header-font-color"
|
||||
href="{% route login %}"
|
||||
>
|
||||
{% t shared.sign_in %}
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="np-hidden-desktop">
|
||||
<div class="np-header-mobile-menu-content np-hidden">
|
||||
{% if current_person.signed_in? %}
|
||||
<img
|
||||
alt="{{ current_person.name }}"
|
||||
class="np-header-mobile-menu-content-avatar"
|
||||
src="{{ current_person.avatar_url }}"
|
||||
/>
|
||||
<div class="np-header-mobile-menu-content-name">
|
||||
{{ current_person.name }}
|
||||
</div>
|
||||
{% endif %}
|
||||
<div class="np-header-mobile-menu-content-nav">
|
||||
<form
|
||||
class="np-header-search"
|
||||
data-test="mobile-search"
|
||||
method="get"
|
||||
action="{% route search %}"
|
||||
>
|
||||
<input
|
||||
aria-label="{% t .search %}"
|
||||
class="np-header-search-input"
|
||||
type="text"
|
||||
name="q"
|
||||
placeholder="{% t .search %}"
|
||||
/>
|
||||
<i class="np-header-search-icon far fa-search"></i>
|
||||
</form>
|
||||
{% for website_navigation in navigations.header_navigations %}
|
||||
<a
|
||||
href="{{ website_navigation.path }}"
|
||||
class="np-header-mobile-menu-content-button"
|
||||
{% if website_navigation.external? %} target="_blank" {% endif %}
|
||||
>
|
||||
{{ website_navigation.name }}
|
||||
</a>
|
||||
{% endfor %}
|
||||
{% unless current_school.sso_active? %}
|
||||
<a
|
||||
class="np-header-mobile-menu-content-button"
|
||||
href="{% route account %}"
|
||||
>
|
||||
{% t .profile_settings %}
|
||||
</a>
|
||||
{% endunless %}
|
||||
<a
|
||||
class="np-header-mobile-menu-content-button np-danger"
|
||||
href="{% route logout %}"
|
||||
>
|
||||
{% t .sign_out %}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% include "messages" %}
|
||||
|
||||
<style>
|
||||
.np-header {
|
||||
background: none;
|
||||
max-width: 1300px;
|
||||
margin: auto;
|
||||
}
|
||||
.np-header-mobile-menu-content {
|
||||
background: linear-gradient(0deg, #080b20 0%, #0f152c 100%);
|
||||
}
|
||||
.np-header-mobile-menu-content-button {
|
||||
background: #000;
|
||||
color: #fff;
|
||||
font-size: 1rem;
|
||||
}
|
||||
.np-header-search-input {
|
||||
border: none;
|
||||
background: none;
|
||||
color: #fff;
|
||||
}
|
||||
.np-header-mobile-menu-content-name {
|
||||
color: #fff;
|
||||
font-size: 24px;
|
||||
}
|
||||
.np-header-search-icon {
|
||||
color: #fff;
|
||||
}
|
||||
.np-header-mobile-menu-content-button.np-danger {
|
||||
color:crimson;
|
||||
margin:2.25rem 0;
|
||||
font-weight: 800;
|
||||
font-size: 1.1rem;
|
||||
border: none;
|
||||
}
|
||||
::placeholder {
|
||||
opacity: 0.8 !important;
|
||||
color: #fff !important;
|
||||
font-style: italic;
|
||||
font-size: 1.1rem !important;
|
||||
}
|
||||
@media only screen and (max-width: 767px) {
|
||||
.np-header-search-input {
|
||||
background: #000;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
@ -0,0 +1,37 @@
|
||||
<div class="np-card np-search-result">
|
||||
<div class="np-card-container">
|
||||
<div class="np-card-content">
|
||||
<img
|
||||
class="np-search-result-image"
|
||||
alt="{{ result.name }}"
|
||||
src="{{ result.image_url }}"
|
||||
/>
|
||||
<div class="np-search-result-content">
|
||||
<div>
|
||||
<a class="np-search-result-title" href="{{ result.path }}">
|
||||
{{ result.name }}
|
||||
</a>
|
||||
</div>
|
||||
<div class="np-search-result-snippet">{{ result.sanitized_description }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<style>
|
||||
.np-resource-title {
|
||||
color: #fff;
|
||||
}
|
||||
.np-resource-subtitle {
|
||||
color: rgba(255, 2555, 255, 0.7);
|
||||
}
|
||||
.np-search .np-resource-subtitle-number {
|
||||
color: #fff;
|
||||
}
|
||||
.np-card-container, .np-card-container-training-session {
|
||||
background: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
.np-search-result-title {
|
||||
color: #fff;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,40 @@
|
||||
<div class="np-card np-search-zero-state">
|
||||
<div class="np-card-container">
|
||||
<div class="np-card-content np-card-content-vertical np-search-zero-state-card">
|
||||
<h3 class="np-search-zero-state-title">
|
||||
{% t .nothing_found %}
|
||||
</h3>
|
||||
<div class="np-search-zero-state-subtitle">
|
||||
{% t .empty %}
|
||||
</div>
|
||||
<div class="np-search-zero-state-image"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.np-card-container {
|
||||
background: none !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
.np-search-zero-state-title {
|
||||
/* color: #35404e; */
|
||||
color: #fff;
|
||||
}
|
||||
.np-search .np-resource-subtitle-number {
|
||||
/* color: #35404e; */
|
||||
color: #fff;
|
||||
}
|
||||
.np-search-zero-state-subtitle {
|
||||
/* color: #59697b; */
|
||||
color: rgba(255, 2555, 255, 0.7);
|
||||
}
|
||||
.np-resource-title {
|
||||
/* color: #35404e; */
|
||||
color: #fff;
|
||||
}
|
||||
.np-resource-subtitle {
|
||||
/* color: #59697b; */
|
||||
color: rgba(255, 2555, 255, 0.7);
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,487 @@
|
||||
{% include "header" %}
|
||||
{% include "course_version_outdated_alert", courses: courses.featured %}
|
||||
<main class="np-main np-homepage">
|
||||
<div class="homepage-title" >
|
||||
<div class="homepage-title-text">
|
||||
<div class="homepage-title-text-headline">
|
||||
<span class="isogreen" style="font-size: 1.4rem; white-space: nowrap;">EDUCATION & TRAINING CENTER</span>
|
||||
IsoPlexis <span class="isogreen">UNIVERSITY</span>
|
||||
</div>
|
||||
<div class="homepage-title-text-subline">
|
||||
Transform your immunotherapy programs with the latest data & insights from our <span class="isogreen">cutting edge work </span>in single-cell proteomics.
|
||||
</div>
|
||||
</div>
|
||||
<img class="homepage-title-image" src="https://s3.amazonaws.com/static.northpass.com/Isoplex/isou-home-hero-logo%402x.png">
|
||||
</div>
|
||||
<img class="homepage-main-image" src="https://s3.amazonaws.com/static.northpass.com/Isoplex/isou-hero-home-wide%402x(1).jpg"></img>
|
||||
|
||||
<div class="homepage-advantage">
|
||||
<div class="homepage-advantage-slide">
|
||||
<img class="homepage-advantage-slide-left" src="https://s3.amazonaws.com/static.northpass.com/Isoplex/index1.png">
|
||||
<div class=homepage-advantage-slide-right>
|
||||
<div class="homepage-advantage-slide-right-top">HD Video Protocols</div>
|
||||
<div class="homepage-advantage-slide-right-bottom">Watch short step-by-step protocol videos to simplify your workflow</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="homepage-advantage-slide" style="padding: 15px 30px;">
|
||||
<img class="homepage-advantage-slide-left" src="https://s3.amazonaws.com/static.northpass.com/Isoplex/index.png">
|
||||
<div class=homepage-advantage-slide-right>
|
||||
<div class="homepage-advantage-slide-right-top">Support Resources</div>
|
||||
<div class="homepage-advantage-slide-right-bottom">Download detailed guides, tech notes & reference new publications</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="homepage-advantage-slide">
|
||||
<img class="homepage-advantage-slide-left" src="https://s3.amazonaws.com/static.northpass.com/Isoplex/index2.png">
|
||||
<div class=homepage-advantage-slide-right>
|
||||
<div class="homepage-advantage-slide-right-top">Expert Webinars</div>
|
||||
<div class="homepage-advantage-slide-right-bottom">Hear from thought leaders in single-cell biology & functional proteomics</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% assign LP = learning_paths.available | where: "name", "How the IsoLight Works" %} {% assign LP = LP.first %}
|
||||
<div class="homepage-content" style="padding-top: 70px;">
|
||||
<div class="homepage-training">
|
||||
<div class="homepage-training-headline">
|
||||
<div class="homepage-training-headline-textes">
|
||||
<span class="isogreen" style="font-weight: 800; font-size: 1.3rem;">GET STARTED</span>
|
||||
<span style="font-size: 2.4rem;">{{LP.name}}</span>
|
||||
<span style="font-size: 20px; color: #a7aed1">{{LP.description}}</span>
|
||||
</div>
|
||||
<div class="homepage-training-headline-right">
|
||||
<span class="isogreen" style="font-weight: 800; font-size: 1.3rem; padding-bottom: 10px;">MASTER THE ISOU</span>
|
||||
<button class="homepage-training-headline-right-button green-gradient-button"> <img src="https://s3.amazonaws.com/static.northpass.com/Isoplex/isou-icon-certification-badge-lg-flat-dark%402x.png" height="30px">
|
||||
<span style="align-self: center;padding-left: 10px;">Get Certified</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% assign descriptions = ". Accelerate yours sample prep with how-to videos&protocols. Learn how to run your samples on the automated IsoLight system. Generate meaningful data in seconds, not days. Accelerate your sample prep with how-to videos & protocols" | split: ". " %}
|
||||
<div class="homepage-content-modules">
|
||||
{% for LPC in LP.items %}
|
||||
<div style="display: none;">{% increment my_counter1 %}</div>
|
||||
{% if my_counter1 == 1 or my_counter1 == 3 %} <div class="homepage-content-modules-group"> {%endif%}
|
||||
<a class="homepage-content-modules-module module-1" href="/../../app/courses/{{LPC.id}}">
|
||||
<div class="homepage-content-modules-module-number">
|
||||
MODULE {{my_counter1}}
|
||||
</div>
|
||||
<div class=homepage-content-modules-module-circle>
|
||||
<img class="homepage-content-modules-module-circle-image" src="https://s3.amazonaws.com/static.northpass.com/Isoplex/isoplex-modules1-{{my_counter1}}.png">
|
||||
</div>
|
||||
<div class="homepage-content-modules-module-title">
|
||||
{{LPC.name}}
|
||||
</div>
|
||||
<div class="homepage-content-modules-module-description">
|
||||
{{descriptions[my_counter1]}}
|
||||
</div>
|
||||
</a>
|
||||
{% if my_counter1 == 2 or my_counter1 == 4 %} </div> {%endif %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
{% assign LP = learning_paths.available | where: "name", "How the IsoLight Works" %} {% assign LP = LP.first %}
|
||||
<div class="homepage-content" style="padding-top: 70px;">
|
||||
<div class="homepage-training">
|
||||
<div class="homepage-training-headline">
|
||||
<div class="homepage-training-headline-textes">
|
||||
<span style="font-size: 2.4rem;">{{LP.name}}</span>
|
||||
<span style="font-size: 20px; color: #a7aed1">{{LP.description}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% assign descriptions = ". Learn how CO2 supports incubation and fluidics on the IsoLight System. Fluidics are at the core of the IsoLight platform. Disposal of used reagents is critical. How IsoPlexis' unique single-cell and CodePlex chips works" | split: ". " %}
|
||||
<div class="homepage-content-modules">
|
||||
{% for LPC in LP.items %}
|
||||
<div style="display: none;">{% increment my_counter2 %}</div>
|
||||
{% if my_counter2 == 1 or my_counter2 == 3 %} <div class="homepage-content-modules-group"> {%endif%}
|
||||
<a class="homepage-content-modules-module module-2" href="/../../app/courses/{{LPC.id}}">
|
||||
<div class="homepage-content-modules-module-number">
|
||||
MODULE {{my_counter2}}
|
||||
</div>
|
||||
<div class=homepage-content-modules-module-circle>
|
||||
<img class="homepage-content-modules-module-circle-image" src="https://s3.amazonaws.com/static.northpass.com/Isoplex/isoplex-modules2-{{my_counter2}}.png">
|
||||
</div>
|
||||
<div class="homepage-content-modules-module-title">
|
||||
{{LPC.name}}
|
||||
</div>
|
||||
<div class="homepage-content-modules-module-description">
|
||||
{{descriptions[my_counter2]}}
|
||||
</div>
|
||||
</a>
|
||||
{% if my_counter2 == 2 or my_counter2 == 4 %} </div> {%endif %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% assign LP = learning_paths.available | where: "name", "System Troubleshooting" %} {% assign LP = LP.first %}
|
||||
<div class="homepage-content" style="padding-top: 70px;">
|
||||
<div class="homepage-training">
|
||||
<div class="homepage-training-headline">
|
||||
<div class="homepage-training-headline-textes">
|
||||
<span style="font-size: 2.4rem;">{{LP.name}}</span>
|
||||
<span style="font-size: 20px; color: #a7aed1">{{LP.description}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% assign descriptions = ". The barcode scanner reads QR labels on each individual chip. Fluidics maintenance and upkeep. Proper lase function is essential for imaging. Airflow and appropriate waste disposal procedures" | split: ". " %}
|
||||
<div class="homepage-content-modules">
|
||||
{% for LPC in LP.items %}
|
||||
<div style="display: none;">{% increment my_counter3 %}</div>
|
||||
{% if my_counter3 == 1 or my_counter3 == 3 %} <div class="homepage-content-modules-group"> {%endif%}
|
||||
<a class="homepage-content-modules-module module-3" href="/../../app/courses/{{LPC.id}}">
|
||||
<div class="homepage-content-modules-module-number">
|
||||
MODULE {{my_counter3}}
|
||||
</div>
|
||||
<div class=homepage-content-modules-module-circle>
|
||||
<img class="homepage-content-modules-module-circle-image" src="https://s3.amazonaws.com/static.northpass.com/Isoplex/isoplex-modules3-{{my_counter3}}.png">
|
||||
</div>
|
||||
<div class="homepage-content-modules-module-title">
|
||||
{{LPC.name}}
|
||||
</div>
|
||||
<div class="homepage-content-modules-module-description">
|
||||
{{descriptions[my_counter3]}}
|
||||
</div>
|
||||
</a>
|
||||
{% if my_counter3 == 2 or my_counter3 == 4 %} </div> {%endif %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% assign LP = learning_paths.available | where: "name", "Network Troubleshooting" %} {% assign LP = LP.first %}
|
||||
<div class="homepage-content" style="padding-top: 70px;">
|
||||
<div class="homepage-training">
|
||||
<div class="homepage-training-headline">
|
||||
<div class="homepage-training-headline-textes">
|
||||
<span style="font-size: 2.4rem;">{{LP.name}}</span>
|
||||
<span style="font-size: 20px; color: #a7aed1">{{LP.description}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% assign descriptions = ". What a correctly configured home screen should look like. Networking FAQs and answers to common questions. Steps to take when encountering network issues. Data managment is a critical component of instrument maintenance" | split: ". " %}
|
||||
<div class="homepage-content-modules">
|
||||
{% for LPC in LP.items %}
|
||||
<div style="display: none;">{% increment my_counter4 %}</div>
|
||||
{% if my_counter4 == 1 or my_counter4 == 3 %} <div class="homepage-content-modules-group"> {%endif%}
|
||||
<a class="homepage-content-modules-module module-4" href="/../../app/courses/{{LPC.id}}">
|
||||
<div class="homepage-content-modules-module-number">
|
||||
MODULE {{my_counter4}}
|
||||
</div>
|
||||
<div class=homepage-content-modules-module-circle>
|
||||
<img class="homepage-content-modules-module-circle-image" src="https://s3.amazonaws.com/static.northpass.com/Isoplex/isoplex-modules4-{{my_counter4}}.png">
|
||||
</div>
|
||||
<div class="homepage-content-modules-module-title">
|
||||
{{LPC.name}}
|
||||
</div>
|
||||
<div class="homepage-content-modules-module-description">
|
||||
{{descriptions[my_counter4]}}
|
||||
</div>
|
||||
</a>
|
||||
{% if my_counter4 == 2 or my_counter4 == 4 %} </div> {%endif %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
{% include "footer" %}
|
||||
|
||||
<style>
|
||||
.np-homepage {
|
||||
background: none;
|
||||
max-width: 1300px;
|
||||
margin: auto;
|
||||
}
|
||||
.homepage-title {
|
||||
height: auto;
|
||||
height: auto;
|
||||
padding-bottom: 70px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.homepage-main-image {
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
width: 1490px;
|
||||
top: 0;
|
||||
background-repeat: no-repeat;
|
||||
opacity: 0.7;
|
||||
top: 100px;
|
||||
height: 570px;
|
||||
mix-blend-mode: lighten;
|
||||
right: calc(calc(100vw - 1300px)/2);
|
||||
}
|
||||
.homepage-title-text {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding-left: 4%;
|
||||
}
|
||||
.homepage-title-text-headline{
|
||||
font-size: calc(6vw + 30px);
|
||||
max-width: 200px;
|
||||
line-height: 1;
|
||||
}
|
||||
.homepage-title-text-subline {
|
||||
padding-top: 20px;
|
||||
max-width: 730px;
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
.homepage-title-image {
|
||||
height: 400px;
|
||||
margin-top: 20px;
|
||||
margin-right: 5%;
|
||||
}
|
||||
.homepage-advantage{
|
||||
margin: auto;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
padding: 20px 10px;
|
||||
}
|
||||
.homepage-advantage-slide{
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
padding: 15px 0;
|
||||
}
|
||||
.homepage-advantage-slide-left {
|
||||
height: 72px;
|
||||
width: 72px;
|
||||
margin-right: 10px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.homepage-advantage-slide-right {
|
||||
align-self: center;
|
||||
max-width: 300px;
|
||||
}
|
||||
.homepage-advantage-slide-right-top {
|
||||
font-weight: 600;
|
||||
color: #fff;
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
.homepage-advantage-slide-right-bottom {
|
||||
color: #a7aed1;
|
||||
line-height: 1.3;
|
||||
}
|
||||
.homepage-training-headline {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
padding: 0 20px;
|
||||
}
|
||||
.homepage-training-headline-textes {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
max-width: 50%;
|
||||
}
|
||||
.homepage-training-headline-right {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-self: center;
|
||||
}
|
||||
.homepage-training-headline-right-button {
|
||||
display: flex;
|
||||
align-content: center;
|
||||
}
|
||||
.homepage-content-modules {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
margin-top: 50px;
|
||||
align-items: center;
|
||||
}
|
||||
.homepage-content-modules-group {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
.homepage-content-modules-module-number {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding-top: 10px;
|
||||
padding-bottom: 15px;
|
||||
font-size: 25px;
|
||||
font-weight: 900;
|
||||
margin-top: 10px;
|
||||
}
|
||||
.homepage-content-modules-module {
|
||||
background-position-x: 0%;
|
||||
background-position-y: 0%;
|
||||
background-size: auto;
|
||||
background-size: auto 200% !important;
|
||||
background-position: center top !important;
|
||||
transition: all .6s ease !important;
|
||||
transition-duration: .2s;
|
||||
transition-timing-function: linear;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin: 0 15px;
|
||||
flex-direction: column;
|
||||
width: 300px;
|
||||
}
|
||||
.module-1 {
|
||||
background: linear-gradient(180deg,#0DD1DB 0%,#2AAFDD 10%,#528DE2 20%,#264CAC 45%,#25359E 65%,#6533A4 90%);
|
||||
}
|
||||
.module-2 {
|
||||
background: linear-gradient(180deg,#4053EE 0%, #5942CA 50%, #762EA3 100%);
|
||||
}
|
||||
.module-3 {
|
||||
background: linear-gradient(180deg,#1AF1A1 0%, #08D5AC 50%, #228193 100%);
|
||||
}
|
||||
.module-4 {
|
||||
background: linear-gradient(180deg,#FCBC02 0%, #FDA14C 50%, #FF4B01 100%);
|
||||
}
|
||||
.homepage-content-modules-module-circle-image{
|
||||
height: 100px;
|
||||
width: auto;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin: auto;
|
||||
}
|
||||
.homepage-content-modules-module-circle {
|
||||
background-color: #000;
|
||||
border-radius: 50%;
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.homepage-content-modules-module-title {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
padding-top: 15px;
|
||||
padding-bottom: 15px;
|
||||
font-size: 28px;
|
||||
font-weight: 500;
|
||||
min-height: 95px;
|
||||
width: 90%;
|
||||
margin: auto;
|
||||
}
|
||||
.homepage-content-modules-module-description {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
padding-bottom: 20px;
|
||||
width: 75%;
|
||||
margin: auto;
|
||||
font-size: 20px;
|
||||
min-height: 89px;
|
||||
}
|
||||
.homepage-content-modules-module:hover {
|
||||
background-position: 100% 50% !important;
|
||||
}
|
||||
@media only screen and (min-width: 1400px) {
|
||||
.homepage-title-text-headline {
|
||||
font-size: 114px;
|
||||
}
|
||||
}
|
||||
@media only screen and (max-width: 1320px) {
|
||||
.homepage-content-modules-module {
|
||||
width: 250px;
|
||||
}
|
||||
.homepage-content-modules-module-title {
|
||||
font-size: 20px;
|
||||
min-height: 76px;
|
||||
}
|
||||
.homepage-content-modules-module-description {
|
||||
font-size: 16px;
|
||||
min-height: 76px;
|
||||
}
|
||||
}
|
||||
@media only screen and (max-width: 1300px) {
|
||||
.homepage-main-image {
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
@media only screen and (max-width: 1100px) {
|
||||
.homepage-content-modules {
|
||||
flex-direction: column;
|
||||
}
|
||||
.homepage-content-modules-group {
|
||||
padding-top: 30px;
|
||||
}
|
||||
.homepage-content-modules-module {
|
||||
width: 300px;
|
||||
}
|
||||
.homepage-content-modules-module-title {
|
||||
font-size: 28px;
|
||||
min-height: 95px;
|
||||
}
|
||||
.homepage-content-modules-module-description {
|
||||
font-size: 20px;
|
||||
min-height: 89px;
|
||||
}
|
||||
}
|
||||
@media only screen and (max-width: 850px) {
|
||||
.homepage-title-image {
|
||||
display: none;
|
||||
}
|
||||
.homepage-main-image {
|
||||
display: none;
|
||||
}
|
||||
.homepage-title-text-subline {
|
||||
max-width: 60%;
|
||||
}
|
||||
}
|
||||
@media only screen and (max-width: 700px) {
|
||||
.homepage-content-modules-module {
|
||||
width: 250px;
|
||||
}
|
||||
.homepage-content-modules-module-title {
|
||||
font-size: 20px;
|
||||
min-height: 76px;
|
||||
}
|
||||
.homepage-content-modules-module-description {
|
||||
font-size: 16px;
|
||||
min-height: 76px;
|
||||
}
|
||||
}
|
||||
@media only screen and (max-width: 650px) {
|
||||
.homepage-advantage-slide {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
@media only screen and (max-width: 550px) {
|
||||
.homepage-title-text-subline {
|
||||
max-width: 80%;
|
||||
}
|
||||
.homepage-content-modules-module {
|
||||
margin: 5px;
|
||||
width: 50%;
|
||||
}
|
||||
.homepage-content-modules-module-description {
|
||||
display: none;
|
||||
}
|
||||
.homepage-training-headline {
|
||||
flex-direction: column;
|
||||
}
|
||||
.homepage-training-headline-textes {
|
||||
max-width: 100%;
|
||||
}
|
||||
.homepage-training-headline-right {
|
||||
margin-top: 15px;
|
||||
}
|
||||
|
||||
.homepage-content-modules-group {
|
||||
width: 95%;
|
||||
justify-content: center;
|
||||
padding-top: 0;
|
||||
}
|
||||
}
|
||||
.homepage-title-image {
|
||||
animation-duration: 3s;
|
||||
animation-name: levitation;
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
@keyframes levitation {
|
||||
from {
|
||||
margin-top: 20px;
|
||||
}
|
||||
50% {
|
||||
margin-top: 0;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
to {
|
||||
margin-top: 20;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,69 @@
|
||||
<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">
|
||||
{% 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="green-gradient-button 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>
|
||||
|
||||
<style>
|
||||
|
||||
.np-box {
|
||||
background: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
.np-input-label {
|
||||
color: #fff;
|
||||
font-size: 1rem;
|
||||
}
|
||||
.np-header-color {
|
||||
background: none;
|
||||
}
|
||||
|
||||
</style>
|
||||
@ -0,0 +1,42 @@
|
||||
@import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:ital,wght@0,300;0,400;0,600;1,300;1,400&display=swap');
|
||||
|
||||
.isogreen {
|
||||
color: #12cd9a;
|
||||
}
|
||||
|
||||
.green-gradient-button {
|
||||
background-image: linear-gradient(45deg, rgb(17, 201, 162) 0%, rgb(4, 170, 205) 40%, rgb(16, 69, 218) 65%, rgb(94, 59, 157) 100%);
|
||||
color: #fff;
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
padding: 15px;
|
||||
font-size: 1.2rem;
|
||||
font-weight: 600;
|
||||
text-transform: none;
|
||||
transition-delay: 0s;
|
||||
transition-duration: 0.8s;
|
||||
transition-property: all;
|
||||
transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1) !important;
|
||||
background-size: 300% auto !important;
|
||||
background-position: 0 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.green-gradient-button:hover {
|
||||
background-position: 100% 50%;
|
||||
}
|
||||
|
||||
body {
|
||||
background: linear-gradient(0deg, #080b20 0%, #0f152c 100%);
|
||||
font-family: 'Source Sans Pro', sans-serif;
|
||||
font-weight: 400;
|
||||
color: #fff;
|
||||
margin: 0;
|
||||
background-repeat: no-repeat;
|
||||
background-attachment: fixed;
|
||||
}
|
||||
a {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user