Small notes changes. Added HackerRank Internal's Templates

Custom_Templates/customer_templates/Artera_sandbox/_cards_course.html.liquid

@@ -0,0 +1,32 @@
+{% capture course_path %}{% route course, id: course.id %}{% endcapture %}
+<div class="course-card-container" onclick="location.href='{{ course_path }}'">
+  <div class="course-card">
+    <a href="{{ course_path }}" class="course-image">
+      <img
+        height="1024"
+        width="386"
+        alt="{{ course.name }}"
+        src="{{ course.image_url }}"
+      >
+    </a>
+
+    <p class="course-categories-container">
+      {% if course.categories %}
+        {% for course_category in course.categories %}
+          <a href="{{ course_path }}" class="course-category">
+            {{ course_category.name }}
+          </a>
+        {% endfor %}
+      {% endif %}
+    </p>
+
+    <h6 class="course-name">
+      <a href="{{ course_path }}">
+        {{ course.name }}
+      </a>
+    </h6>
+
+    <p>{{ course.short_description }}</p>
+  </div>
+</div>
+

Custom_Templates/customer_templates/Artera_sandbox/_catalog_filters.html.liquid

@@ -0,0 +1,117 @@
+<div class="catalog-filters">
+  <div class="catalog-filter-dropdown-container">
+    <button class="catalog-filter-dropdown np-button">All Courses</button>
+    <div class="catalog-filter-dropdown-content">
+      <span class="catalog-filter-item">All Courses</span>
+      {% for category in categories.in_catalog %}
+        <span class="catalog-filter-item">{{ category.name }}</span>
+      {% endfor %}
+    </div>
+  </div>
+</div>
+
+<script>
+  window.addEventListener('DOMContentLoaded', (event) => {
+    document.querySelectorAll(".catalog-filter-item").forEach((item) => {
+      item.addEventListener("click", (clickEvent) => {
+        filterCourses(clickEvent.target)
+      })
+    });
+  });
+
+  function filterCourses(category) {
+    if (prepareCategoryName(category) == "all courses") {
+      showAllCourses()
+      changeFilterButtonName(category)
+    } else {
+      filterByCategory(category)
+      changeFilterButtonName(category)
+    }
+  }
+
+  function showAllCourses() {
+    document.querySelectorAll(".course-card-container").forEach((item) => {
+      item.parentNode.style.removeProperty('display');
+    })
+  }
+
+  function filterByCategory(category) {
+    document.querySelectorAll(".course-card-container").forEach((item) => {
+      var categories = Array.from(item.querySelectorAll(".course-category")).map(courseCategory => prepareCategoryName(courseCategory));
+
+      if (!categories.includes(prepareCategoryName(category))) {
+        item.parentNode.style.display = "none";
+      } else {
+        item.parentNode.style.removeProperty('display');
+      }
+    })
+  }
+
+  function prepareCategoryName(category) {
+    return category.innerHTML.trim().replace(/&nbsp;/g, '').toLowerCase()
+  }
+
+  function changeFilterButtonName(newName) {
+    document.querySelector(".catalog-filter-dropdown").innerHTML = prepareButtonName(newName.innerHTML);
+  }
+
+  function prepareButtonName(buttonName) {
+    var words = buttonName.split(" ");
+
+    for (let i = 0; i < words.length; i++) {
+      words[i] = words[i][0].toUpperCase() + words[i].substr(1);
+    }
+
+    return words.join(" ");
+  }
+</script>
+
+<style>
+  .catalog-filters {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    padding: 10px 4%;
+    color: #737373;
+    font-weight: 600;
+    letter-spacing: .56px;
+    line-height: 1.71;
+    transition: .2s;
+  }
+  
+  .catalog-filter-dropdown-container {
+    position: relative;
+    display: inline-block;
+  }
+
+  .catalog-filter-dropdown-content {
+    display: none;
+    position: absolute;
+    background-color: #f9f9f9;
+    min-width: 160px;
+    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
+    z-index: 1;
+  }
+
+  .catalog-filter-item {
+    color: black;
+    padding: 12px 16px;
+    text-decoration: none;
+    display: block;
+    cursor: pointer;
+  }
+
+  .catalog-filter-item:hover {background-color: #f1f1f1}
+
+  .catalog-filter-dropdown-container:hover .catalog-filter-dropdown-content {
+    display: block;
+  }
+  
+  @media (min-width: 768px) {
+    .catalog-filters {
+      flex-direction: row;
+      justify-content: left;
+    }
+  }
+</style>

Custom_Templates/customer_templates/Artera_sandbox/_completed_courses_index.html.liquid

@@ -0,0 +1,42 @@
+{% if courses.enrolled.any? %}
+  {% assign completed_courses = courses.enrolled | map: "completed?" %}
+  {% assign any_completed = false %}
+
+  {% for completed_course in completed_courses %}
+    {% if completed_course %}
+      {% assign any_completed = true %}
+    {% endif %}
+  {% endfor %}
+
+  {% if any_completed %}
+    {% assign any_course = false %}
+    <div class="row row-with-thumbnails">
+      {% for course in courses.enrolled %}
+        {% if course.completed? %}
+          {% assign is_course_from_learning_path = false %}
+          {% for lp_courses in learning_path_courses %}
+            {% for lp_course in lp_courses %}
+              {% if lp_course.id == course.id %}
+                {% assign is_course_from_learning_path = true %}
+              {% endif %}
+            {% endfor %}
+          {% endfor %}
+
+          {% unless is_course_from_learning_path %}
+            <div class="{{ class }}">
+              {% include "cards_course" with course %}
+            </div>
+            {% assign any_course = true %}
+          {% endunless %}
+        {% endif %}
+      {% endfor %}
+      </div>
+      {% unless any_course %}
+        {% include "courses_zero_state", message: "Yikes! You don’t have any Completed Courses." %}
+      {% endunless %}
+    {% else %}
+      {% include "courses_zero_state", message: "Yikes! You don’t have any Completed Courses." %}
+  {% endif %}
+{% else %}
+  {% include "courses_zero_state", message: "Yikes! You don’t have any Completed Courses." %}
+{% endif %}

Custom_Templates/customer_templates/Artera_sandbox/_completed_learning_paths_index.html.liquid

@@ -0,0 +1,34 @@
+<div class="np-learning-paths-resources">
+  {% if items.any? %}
+    {% assign completed_learning_paths = items | map: "completed?" %}
+    {% assign any_completed = false %}
+
+    {% for completed_learning_path in completed_learning_paths %}
+      {% if completed_learning_path %}
+        {% assign any_completed = true %}
+      {% endif %}
+    {% endfor %}
+
+    {% if any_completed %}
+      {% for learning_path in items %}
+        {% if learning_path.completed? %}
+          {% include "cards_learning_path" with learning_path %}
+        {% endif %}
+      {% endfor %}
+    {% else %}
+      <div class="np-learning-paths-resources-container">
+        <div class="np-zero-state-text">
+          Bummer! You don't have any Completed Learning Paths.
+        </div>
+        <img class="np-zero-state-learning-paths" alt="{% t .empty %}" />
+      </div>    
+    {% endif %}
+  {% else %}
+    <div class="np-learning-paths-resources-container">
+      <div class="np-zero-state-text">
+        Bummer! You don't have any Completed Learning Paths.
+      </div>
+      <img class="np-zero-state-learning-paths" alt="{% t .empty %}" />
+    </div>
+  {% endif %}
+</div>

Custom_Templates/customer_templates/Artera_sandbox/_courses_catalog.html.liquid

@@ -0,0 +1,28 @@
+{% 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 np-stretch-content">
+        {% include "cards_course" with course %}
+      </div>
+    {% endfor %}
+  </div>
+{% else %}
+  {% capture message %}
+    {% t shared.zero_state.courses.catalog,
+      key: current_school.course_vocabulary
+    %}
+  {% endcapture %}
+  {% include "courses_zero_state", message: message %}
+{% endif %}
+
+<style>
+  .np-stretch-content:nth-child(n+2) {
+    margin-top: 24px;
+  }
+
+  @media (min-width: 768px) {
+    .np-stretch-content {
+      margin-top: 24px;
+    }
+  }
+</style>

Custom_Templates/customer_templates/Artera_sandbox/_enrolled_courses_index.html.liquid

@@ -0,0 +1,42 @@
+{% if courses.enrolled.any? %}
+  {% assign in_progress_courses = courses.enrolled | map: "progress" %}
+  {% assign any_not_in_progress = false %}
+
+  {% for in_progress_course in in_progress_courses %}
+    {% if in_progress_course == 0 %}
+      {% assign any_not_in_progress = true %}
+    {% endif %}
+  {% endfor %}
+
+  {% if any_not_in_progress %}
+    {% assign any_course = false %}
+    <div class="row row-with-thumbnails">
+      {% for course in courses.enrolled %}
+        {% if course.progress == 0 %}
+          {% assign is_course_from_learning_path = false %}
+          {% for lp_courses in learning_path_courses %}
+            {% for lp_course in lp_courses %}
+              {% if lp_course.id == course.id %}
+                {% assign is_course_from_learning_path = true %}
+              {% endif %}
+            {% endfor %}
+          {% endfor %}
+
+          {% unless is_course_from_learning_path %}
+            <div class="{{ class }}">
+              {% include "cards_course" with course %}
+            </div>
+            {% assign any_course = true %}
+          {% endunless %}
+        {% endif %}
+      {% endfor %}
+    </div>
+    {% unless any_course %}
+      {% include "courses_zero_state", message: "Yikes! You don’t have any Enrolled Courses." %}
+    {% endunless %}
+  {% else %}
+    {% include "courses_zero_state", message: "Yikes! You don’t have any Enrolled Courses." %}
+  {% endif %}
+{% else %}
+  {% include "courses_zero_state", message: "Yikes! You don’t have any Enrolled Courses." %}
+{% endif %}

Custom_Templates/customer_templates/Artera_sandbox/_enrolled_learning_paths_index.html.liquid

@@ -0,0 +1,35 @@
+<div class="np-learning-paths-resources">
+  {% if items.any? %}
+    {% assign in_progress_learning_paths = items | map: "progress" %}
+    {% assign any_not_in_progress = false %}
+
+    {% for in_progress_learning_path in in_progress_learning_paths %}
+      {% if in_progress_learning_path == 0 %}
+        {% assign any_not_in_progress = true %}
+      {% endif %}
+    {% endfor %}
+
+
+    {% if any_not_in_progress %}
+      {% for learning_path in items %}
+        {% if learning_path.progress == 0 %}
+          {% include "cards_learning_path" with learning_path %}
+        {% endif %}
+      {% endfor %}
+    {% else %}
+      <div class="np-learning-paths-resources-container">
+        <div class="np-zero-state-text">
+          Bummer! You're not assigned any Learning Paths.
+        </div>
+        <img class="np-zero-state-learning-paths" alt="{% t .empty %}" />
+      </div>    
+    {% endif %}
+  {% else %}
+    <div class="np-learning-paths-resources-container">
+      <div class="np-zero-state-text">
+        Bummer! You're not assigned any Learning Paths.
+      </div>
+      <img class="np-zero-state-learning-paths" alt="{% t .empty %}" />
+    </div>
+  {% endif %}
+</div>

Custom_Templates/customer_templates/Artera_sandbox/_footer.html.liquid

@@ -0,0 +1,212 @@
+<footer class="np-footer">
+  <div class="np-footer-top">
+    {% if current_school.logo_url %}
+      <h2 class="np-footer-logo">
+        <a href="{% route home %}">
+          <img
+            alt="{{ current_school.name }}"
+            class="np-footer-logo-image"
+            src="{{ current_school.logo_url }}"
+          />
+        </a>
+      </h2>
+    {% else %}
+      <div class="np-school-name np-header-font-color">
+        {{ current_school.name }}
+      </div>
+    {% endif %}
+
+    <nav class="np-footer-social-links">
+      <p class="artera-description">
+        Artera (WELL Health®) is a SaaS digital health leader in patient communications and the 2021 and 2022 Best in KLAS winner in Patient Outreach.
+      </p>  
+      <p class="artera-description">
+        WELL Health®
+      </p>  
+
+      {% if website_footer.show_social_media_links? %}
+        <ul class="np-footer-social-links-list">
+          {% for social_media_link in website_footer.social_media_links %}
+            <li class="np-footer-social-links-item">
+              <a
+                class="np-footer-social-links-link"
+                href="{{ social_media_link.link }}"
+                target="_blank" title="{{ social_media_link.name }}"
+              >
+                <i class="np-footer-social-links-icon
+                  fab fa-{{ social_media_link.name }}"
+                ></i>
+              </a>
+            </li>
+          {% endfor %}
+        </ul>
+      {% endif %}
+    </nav>
+  </div>
+
+  <div class="np-footer-bottom">
+    {% if website_footer.show_navigation_links? %}
+      <div class="np-footer-navigation">
+        <p class="links-header">Navigation</p>
+        <ul class="np-footer-navigation-list">
+          {% for website_navigation in navigations.footer_navigations %}
+            {% if website_navigation.name == "Dashboard" %}
+              <li class="np-footer-navigation-item">
+                <a
+                  class="np-footer-navigation-link"
+                  href="{{ website_navigation.path }}"
+                  {% if website_navigation.external? %} target="_blank" {% endif %}
+                >
+                  My Courses
+                </a>
+              </li>
+            {% else %}
+              <li class="np-footer-navigation-item">
+                <a
+                  class="np-footer-navigation-link"
+                  href="{{ website_navigation.path }}"
+                  {% if website_navigation.external? %} target="_blank" {% endif %}
+                >
+                  {{ website_navigation.name }}
+                </a>
+              </li>
+            {% endif %}
+          {% endfor %}
+          <li class="np-footer-navigation-item">
+            <a
+              class="np-footer-navigation-link"
+              href="/app/catalog"
+            >
+              Catalog
+            </a>
+          </li>
+        </ul>
+      </div>
+    {% endif %}
+
+    {% if website_footer.show_customer_service_email? and
+      website_footer.school_customer_service_email
+    %}
+      <div class="np-footer-support">
+        <div class="np-footer-support-item np-footer-support-help">
+          {% t .need_help %}
+        </div>
+        <a
+          class="np-footer-support-item np-footer-support-link"
+          href="mailto:{{ website_footer.school_customer_service_email }}"
+        >
+          {{ website_footer.school_customer_service_email }}
+        </a>
+      </div>
+    {% endif %}
+  </div>
+</footer>
+
+<style>
+  .np-footer {
+    border-top: 1px solid #f5f2ff;
+  }
+
+  .np-footer-social-links-link, .np-footer-social-links-link-icon {
+    color: #000;
+  }
+
+  .np-footer-logo-image {
+    filter: none;
+    opacity: 1;
+  }
+
+  .np-footer-navigation-link {
+    padding: 0;
+    margin: 0;
+    margin-bottom: 10px;
+  }
+
+  .np-footer-navigation-link, .artera-description, .np-footer-support-item {
+    color: #737373;
+  }
+
+  .artera-description {
+    font-family: Poppins,sans-serif;
+    font-weight: 400;
+    font-size: 14px;
+    line-height: 24px;
+    letter-spacing: .56px;
+    text-align: left;
+  }
+
+  .np-footer-top {
+    flex-direction: column;
+    align-items: start;
+    padding-left: 20px;
+  }
+
+  .np-footer-bottom {
+    flex-direction: row;
+    padding-left: 20px;
+    align-items: baseline;
+  }
+
+  .np-footer-social-links-item:first-of-type {
+    padding-left: 0;
+  }
+
+  .links-header, .np-footer-support-help {
+    color: #000;
+    font-family: Poppins,sans-serif;
+    font-weight: 600;
+    font-size: 14px;
+    line-height: 24px;
+    letter-spacing: .56px;
+    text-align: left;
+    margin: 0;
+    margin-bottom: 10px;
+  }
+
+  .np-footer-navigation-list {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+
+  @media (min-width: 768px) {
+    .artera-description {
+      width: 35%;
+    }
+  
+    .np-footer-navigation {
+      margin-right: 55px;
+    }
+
+    .np-footer-support-help {
+      margin-bottom: 14px;
+    }
+
+    .np-footer-support {
+      flex-direction: column;
+      align-items: start;
+      margin-right: 0;
+    }
+
+    .np-footer-navigation-item {
+      padding: 10px 10px 10px 0;
+      text-align: left;
+    }
+
+    .np-footer-social-links-list {
+      padding-left: 0;
+    }
+
+    .np-footer-bottom, .np-footer-top {
+      flex-direction: column;
+      width: 50%;
+    }
+
+    .np-footer-top, .np-footer-bottom {
+      padding-left: 0;
+    }
+
+    .np-footer-bottom {
+      align-items: flex-end;
+    }
+  }
+</style>

Custom_Templates/customer_templates/Artera_sandbox/_header.html.liquid

@@ -0,0 +1,252 @@
+<header class="np-header np-header-color">
+  <div class="np-header-content">
+    <div class="np-hidden-desktop np-header-mobile-menu-nav">
+      {% if current_person.signed_in? %}
+        <button
+          data-toggle-class="np-hidden"
+          class="np-header-mobile-menu-nav-button fal fa-times np-hidden np-header-font-color"
+          data-toggle-target=".np-header-mobile-avatar-menu,
+          .np-header-mobile-menu-content, .np-main, .np-footer"
+        ></button>
+        <button
+          data-test="open-mobile-menu"
+          data-toggle-class="np-hidden"
+          class="np-header-mobile-menu-nav-button np-header-mobile-avatar-menu"
+          data-toggle-target=".fa-times, .np-header-mobile-menu-content, .np-main, .np-footer"
+        >
+          <img
+            alt="{{ current_person.name }}"
+            class="np-header-avatar-image"
+            src="{{ current_person.avatar_url }}"
+          />
+        </button>
+      {% endif %}
+    </div>
+    {% if current_school.logo_url %}
+      <div class="np-hidden-mobile logo-and-sub-nav">
+        <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>
+
+        {% include "sub_navigation" %}
+      </div>
+
+      <h1 class="np-hidden-desktop 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">
+          {% 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"
+        aria-label="{% t shared.sign_in %}"
+        href="{% route login %}"
+      >
+        {% t shared.sign_in %}
+      </div>
+    {% endif %}
+  </div>
+  {% include 'my_courses_filter' %}
+</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 %}
+        {% if website_navigation.name == "Dashboard" %}
+          <a
+            href="{{ website_navigation.path }}"
+            class="np-header-mobile-menu-content-button"
+            {% if website_navigation.external? %} target="_blank" {% endif %}
+          >
+            My Courses
+          </a>
+        {% else %}
+          <a
+            href="{{ website_navigation.path }}"
+            class="np-header-mobile-menu-content-button"
+            {% if website_navigation.external? %} target="_blank" {% endif %}
+          >
+            {{ website_navigation.name }}
+          </a>
+        {% endif %}
+      {% endfor %}
+      <a
+        href="/app/catalog"
+        class="np-header-mobile-menu-content-button"
+      >
+        Catalog
+      </a>
+      <div class="np-header-mobile-menu-content-line"></div>
+      {% unless current_school.sso_active? %}
+        <a
+          class="np-header-mobile-menu-content-button"
+          href="{% route account %}"
+        >
+          {% t .profile_settings %}
+        </a>
+      {% endunless %}
+      <a
+        class="np-header-mobile-menu-content-button np-danger"
+        href="{% route logout %}"
+      >
+        {% t .sign_out %}
+      </a>
+    </div>
+  </div>
+</div>
+
+
+{% include "messages" %}
+
+<style>
+  .np-header {
+    flex-direction: column;
+    position: fixed;
+  }
+
+  .np-header-logo {
+    justify-content: flex-start;
+  }
+  
+  @media (min-width: 768px) {
+    .np-header-logo {
+      justify-content: center;
+    }
+
+    .np-header-content {
+      padding: 0 4%;
+    }
+
+    .np-header {
+      padding: 0;
+      align-items: normal;
+    }
+
+    .np-header-search-input {
+      background-color: transparent;
+    }
+
+    .logo-and-sub-nav {
+      display: flex;
+    }
+
+    .np-header-search-icon {
+      color: #000;
+    }
+  }
+  
+</style>

Custom_Templates/customer_templates/Artera_sandbox/_in_progress_courses_index.html.liquid

@@ -0,0 +1,51 @@
+{% if courses.enrolled.any? %}
+  {% assign started_courses = courses.enrolled | map: "started?" %}
+  {% assign in_progress_courses = courses.enrolled | map: "progress" %}
+  {% assign learning_path_courses = learning_paths.enrolled | map: 'items'%}
+  {% assign any_started = false %}
+  {% assign any_in_progress = false %}
+
+  {% for started_course in started_courses %}
+    {% if started_course == true %}
+      {% assign any_started = true %}
+    {% endif %}
+  {% endfor %}
+
+  {% for in_progress_course in in_progress_courses %}
+    {% if in_progress_course > 0 and in_progress_course < 100 %}
+      {% assign any_in_progress = true %}
+    {% endif %}
+  {% endfor %}
+
+  {% if any_started and any_in_progress %}
+    {% assign any_course = false %}
+    <div class="row row-with-thumbnails">
+      {% for course in courses.enrolled %}
+        {% if course.progress > 0 and course.progress < 100 %}
+          {% assign is_course_from_learning_path = false %}
+          {% for lp_courses in learning_path_courses %}
+            {% for lp_course in lp_courses %}
+              {% if lp_course.id == course.id %}
+                {% assign is_course_from_learning_path = true %}
+              {% endif %}
+            {% endfor %}
+          {% endfor %}
+
+          {% unless is_course_from_learning_path %}
+            <div class="{{ class }}">
+              {% include "cards_course" with course %}
+            </div>
+            {% assign any_course = true %}
+          {% endunless %}
+        {% endif %}
+      {% endfor %}
+      </div>
+      {% unless any_course %}
+        {% include "courses_zero_state", message: "Yikes! You don’t have any In Progress Courses." %}  
+      {% endunless %}
+    {% else %}
+      {% include "courses_zero_state", message: "Yikes! You don’t have any In Progress Courses." %}
+  {% endif %}
+{% else %}
+  {% include "courses_zero_state", message: "Yikes! You don’t have any In Progress Courses." %}
+{% endif %}

Custom_Templates/customer_templates/Artera_sandbox/_in_progress_learning_paths_index.html.liquid

@@ -0,0 +1,42 @@
+<div class="np-learning-paths-resources">
+  {% if items.any? %}
+    {% assign started_learning_paths = items | map: "started?" %}
+    {% assign in_progress_learning_paths = items | map: "progress" %}
+    {% assign any_started = false %}
+    {% assign any_in_progress = false %}
+
+    {% for started_learning_path in started_learning_paths %}
+      {% if started_learning_path == true %}
+        {% assign any_started = true %}
+      {% endif %}
+    {% endfor %}
+
+    {% for in_progress_learning_path in in_progress_learning_paths %}
+      {% if in_progress_learning_path > 0 and in_progress_learning_path < 100 %}
+        {% assign any_in_progress = true %}
+      {% endif %}
+    {% endfor %}
+
+    {% if any_started and any_in_progress %}
+      {% for learning_path in items %}
+        {% if learning_path.progress > 0 and learning_path.progress < 100 %}
+          {% include "cards_learning_path" with learning_path %}
+        {% endif %}
+      {% endfor %}
+    {% else %}
+      <div class="np-learning-paths-resources-container">
+        <div class="np-zero-state-text">
+          Bummer! You don't have any In Progress Learning Paths.
+        </div>
+        <img class="np-zero-state-learning-paths" alt="{% t .empty %}" />
+      </div>    
+    {% endif %}
+  {% else %}
+    <div class="np-learning-paths-resources-container">
+      <div class="np-zero-state-text">
+        Bummer! You don't have any In Progress Learning Paths.
+      </div>
+      <img class="np-zero-state-learning-paths" alt="{% t .empty %}" />
+    </div>
+  {% endif %}
+</div>

Custom_Templates/customer_templates/Artera_sandbox/_my_courses_filter.html.liquid

@@ -0,0 +1,119 @@
+<div class="my-courses-filters" style="display: none;">
+  <div class="progress-filter-dropdown-container">
+    <button class="progress-filter-dropdown np-button">All Courses</button>
+    <div class="progress-filter-dropdown-content">
+      <span class="progress-filter-item" id="all-courses" style="display: none;">All Courses</span>
+      <span class="progress-filter-item" id="not-started">Not Started</span>
+      <span class="progress-filter-item" id="in-progress">In Progress</span>
+      <span class="progress-filter-item" id="completed">Completed</span>
+    </div>
+  </div>
+</div>
+
+<script>
+  window.addEventListener('DOMContentLoaded', (event) => {
+    document.querySelectorAll('.progress-filter-item').forEach((item) => {
+      item.addEventListener('click', (clickEvent) => {
+        changeFilterButtonName(clickEvent.target);
+        showAllOptions();
+        hideChosenOption(clickEvent.target);
+        filter(clickEvent.target);
+      })
+    })
+  });
+  
+  function filter(filterOption) {
+    if (filterOption.id !== "all-courses" ) {
+      filterItems('.learning-paths-container', filterOption)
+      filterItems('.courses-container', filterOption)
+    } else {
+      showAllItems('.learning-paths-container')
+      showAllItems('.courses-container')
+    }
+  }
+
+  function filterItems(itemsClass, filterOption) {
+    document.querySelectorAll(itemsClass).forEach((item) => {
+      if (!item.id.includes(filterOption.id))
+        item.style.display = "none";
+      else
+        item.style.removeProperty('display');
+    })
+  }
+
+  function showAllItems(itemsClass) {
+    document.querySelectorAll(itemsClass).forEach((item) => {
+      item.style.removeProperty('display');
+    })
+  }
+
+  function hideChosenOption(chosenOption) {
+    chosenOption.style.display = 'none';
+  }
+
+  function showAllOptions() {
+    document.querySelectorAll('.progress-filter-item').forEach((item) => {
+      item.style.removeProperty('display');
+    });
+  }
+
+  function changeFilterButtonName(newName) {
+    document.querySelector(".progress-filter-dropdown").innerHTML = newName.innerHTML;
+  }
+</script>
+
+<style>
+  .my-courses-filters {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    padding: 10px 4%;
+    background: #f5f2ff;
+    color: #737373;
+    font-weight: 600;
+    letter-spacing: .56px;
+    line-height: 1.71;
+    transition: .2s;
+    width: 100%;
+  }
+
+  .progress-filter-dropdown-container {
+    position: relative;
+    display: inline-block;
+  }
+
+  /* Dropdown Content (Hidden by Default) */
+  .progress-filter-dropdown-content {
+    display: none;
+    position: absolute;
+    background-color: #f9f9f9;
+    min-width: 160px;
+    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
+    z-index: 1;
+  }
+
+  /* Links inside the dropdown */
+  .progress-filter-item {
+    color: black;
+    padding: 12px 16px;
+    text-decoration: none;
+    display: block;
+    cursor: pointer;
+  }
+
+  /* Change color of dropdown links on hover */
+  .progress-filter-item:hover {background-color: #f1f1f1}
+
+  /* Show the dropdown menu on hover */
+  .progress-filter-dropdown-container:hover .progress-filter-dropdown-content {
+    display: block;
+  }
+
+  @media (min-width: 768px) {
+    .my-courses-filters {
+      flex-direction: row;
+      justify-content: right;
+    }
+  }
+</style>

Custom_Templates/customer_templates/Artera_sandbox/_sub_navigation.html.liquid

@@ -0,0 +1,43 @@
+<div class="np-hidden-mobile np-sub-navigation-content" style="display: none">
+  {% for link in navigations.sub_navigation %}
+    {% if link.label == "Dashboard" %}
+      <div class="np-sub-navigation-content-item {{ link.active_class }}">
+        <a class="np-sub-navigation-content-item-link" href="{{ link.url }}">
+          My Courses
+        </a>
+      </div>
+    {% else %}
+      <div class="np-sub-navigation-content-item {{ link.active_class }}">
+        <a class="np-sub-navigation-content-item-link" href="{{ link.url }}">
+          {{ link.label }}
+        </a>
+      </div>
+    {% endif %}
+  {% endfor %}
+</div>
+
+<style>
+  .np-sub-navigation-content-item-active .np-sub-navigation-content-item-link {
+    color: #ff0036;
+  }
+
+  .np-sub-navigation-content-item-link {
+    color: #000;
+    font-weight: 600;
+  }
+
+  @media (min-width: 768px) {
+    .np-sub-navigation-content {
+      align-items: center;
+      margin-left: 40px;
+    }
+
+    .np-sub-navigation-content-item-link {
+      justify-content: center;
+    }
+  }
+</style>
+
+<script>
+  document.querySelector(".logo-and-sub-nav > .np-sub-navigation-content").style.removeProperty("display");
+</script>

Custom_Templates/customer_templates/Artera_sandbox/_training_session_cta.html.liquid

@@ -0,0 +1,11 @@
+<div class="np-training-session-cta">
+  <div class="np-training-session-cta-buttons">
+    <form
+      action="{{training_session.session_url}}"
+    >
+      <button type="submit" class="np-top-button np-button np-button-big">
+        {% t .register %}
+      </button>
+    </form>
+  </div>
+</div>

Custom_Templates/customer_templates/Artera_sandbox/catalog.html.liquid

@@ -0,0 +1,26 @@
+{% include "header" %}
+{% include "course_version_outdated_alert", courses: courses.in_catalog %}
+<main class="np-main np-catalog np-subpage-container np-max-width">
+  <div class="np-catalog-header-wrapper">
+    <div class="np-catalog-header">
+      <div>
+        <div class="np-resource-title">{{ catalog.headline }}</div>
+        <div class="np-resource-subtitle">{{ catalog.subheadline }}</div>
+      </div>
+      {% include 'catalog_filters' %}
+    </div>
+    {% capture label %}{% t shared.filters.by_category %}{% endcapture %}
+  </div>
+  {% include "courses_catalog" %}
+</main>
+{% include "footer" %}
+
+<style>
+  @media (min-width: 768px) {
+    .np-catalog-header {
+      flex-direction: row;
+      justify-content: space-between;
+      width: 100%;
+    }
+  }
+</style>

Custom_Templates/customer_templates/Artera_sandbox/course.html.liquid

@@ -0,0 +1,18 @@
+{% include "header" %}
+<main class="np-main np-max-width np-page-container">
+  <div class="np-hidden-mobile" id="course-desktop">
+    {% include "course_desktop_view" %}
+  </div>
+  <div class="np-hidden-desktop" id="course-mobile">
+    {% include "course_mobile_view" %}
+  </div>
+</main>
+{% include "footer" %}
+
+<style>
+  @media (min-width: 768px) {
+    .np-page-container {
+      margin: 0 auto 6.25rem;
+    }
+  }
+</style>

Custom_Templates/customer_templates/Artera_sandbox/dashboard.html.liquid

@@ -0,0 +1,90 @@
+{% include "header" %}
+{% include "course_version_outdated_alert", courses: courses.enrolled %}
+{% include "sub_navigation" %}
+
+  {% assign courses_classes = "col-xs-12 col-sm-6 np-stretch-content" %}
+{% else %}
+  {% assign courses_classes = "col-xs-12 col-sm-4 np-stretch-content" %}
+{% endif %}
+
+<main class="np-main np-dashboard np-subpage-container np-max-width">
+  <div class="row np-flex-center">
+    <div class="col-xs-12 {% if features.training_events? %} col-sm-8 {% endif %}">
+      {% if features.learning_paths? %}
+        <div class="learning-paths-container" id="in-progress-learning-paths">
+          <div class="np-dashboard-resources-title">
+            In Progress Learning Paths
+          </div>
+          {% include "in_progress_learning_paths_index", items: learning_paths.enrolled %}
+        </div>
+
+        <div class="learning-paths-container" id="not-started-learning-paths">
+          <div class="np-dashboard-resources-title">
+            Enrolled Learning Paths
+          </div>
+          {% include "enrolled_learning_paths_index", items: learning_paths.enrolled %}
+        </div>
+
+        <div class="learning-paths-container" id="completed-learning-paths">
+          <div class="np-dashboard-resources-title">
+            Completed Learning Paths
+          </div>
+          {% include "completed_learning_paths_index", items: learning_paths.enrolled %}
+        </div>
+      {% endif %}
+
+      <div class="courses-container" id="in-progress-courses">
+        <div class="np-dashboard-resources-title">
+          In progress courses
+        </div>
+        {% include "in_progress_courses_index", class: courses_classes %}
+      </div>
+
+      <div class="courses-container" id="not-started-courses">
+        <div class="np-dashboard-resources-title">
+          Enrolled Courses
+        </div>
+        {% include "enrolled_courses_index", class: courses_classes %}
+      </div>
+
+      <div class="courses-container" id="completed-courses">
+        <div class="np-dashboard-resources-title">
+          Completed Courses
+        </div>
+        {% include "completed_courses_index", class: courses_classes %}
+      </div>
+    </div>
+
+    {% if features.training_events? %}
+      <div class="np-grid-spacing col-xs-12 col-sm-4">
+        <div class="np-dashboard-resources-title">
+          {% t .upcoming_events %}
+        </div>
+          {% include "training_events_dashboard" %}
+      </div>
+    {% endif %}
+  </div>
+</main>
+{% include "footer" %}
+
+<script>
+  window.addEventListener('DOMContentLoaded', (event) => {
+    document.querySelector('.my-courses-filters').style.removeProperty('display');
+  })
+</script>
+
+<style>
+  .np-stretch-content:nth-child(n+2) {
+    margin-top: 24px;
+  }
+
+  @media (min-width: 768px) {
+    .np-stretch-content {
+      margin-top: 24px;
+    }
+
+    .np-dashboard-resources-title {
+        margin: 20px 0 20px;
+    }
+  }
+</style>

Custom_Templates/customer_templates/Artera_sandbox/homepage.html.liquid

@@ -0,0 +1,171 @@
+{% include "header" %}
+{% include "course_version_outdated_alert", courses: courses.featured %}
+<main class="np-main np-homepage">
+  <div class="np-homepage-hero">
+    <img class="np-homepage-hero-image"
+      src="{{ homepage.artwork_url }}"
+      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>
+      <a class="np-homepage-hero-cta np-button" href="{% route catalog %}">
+        {% t .discover %}
+      </a>
+    </div>
+  </div>
+  {% include "sub_navigation" %}
+  <div class="np-homepage-featured np-max-width">
+    <div class="np-homepage-featured-text">
+      <div class="np-homepage-headline">
+        {{ homepage.featured_courses_headline }}
+      </div>
+      <div class="np-homepage-subheadline">
+        {{ homepage.featured_courses_subheadline }}
+      </div>
+    </div>
+    {% if courses.featured.any? %}
+      <div class="np-homepage-featured-courses">
+        {% for course in courses.featured %}
+          <div class="np-stretch-content">
+            {% include "cards_course" with course %}
+          </div>
+        {% endfor %}
+      </div>
+    {% else %}
+      <div class="np-homepage-featured-empty">
+        <div class="np-zero-state-text">
+          {% t .empty, key: current_school.course_vocabulary %}
+        </div>
+        <img
+          class="np-zero-state-courses"
+          alt="{% t .empty, key: current_school.course_vocabulary %}"
+        />
+      </div>
+    {% endif %}
+  </div>
+</main>
+{% include "footer" %}
+
+<style>
+  .np-homepage-hero-content {
+    position: static;
+    text-align: left;
+  }
+
+  .np-homepage-hero {
+    flex-direction: row-reverse;
+  }
+
+  .np-homepage-hero-cta.np-button {
+    border-radius: 30px;
+    padding: 18px;
+  }
+
+  .np-homepage-hero-image {
+    max-width: 50%;
+    height: auto;
+    max-height: max-content;
+  }
+
+  .np-stretch-content:nth-child(n+2) {
+    margin-top: 24px;
+  }
+
+  .np-homepage-featured-courses {
+    margin: 0;
+  }
+
+.tns-outer {
+    position: relative;
+  }
+
+  .tns-controls {
+    position: absolute;
+    z-index: 100;
+    top: 50%;
+    transform: translate(0,-50%);
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+  }
+  .tns-controls > * {
+    border: none;
+    letter-spacing: 0.01em !important;
+    line-height: 0;
+    touch-action: manipulation;
+    user-select: none;
+    -webkit-tap-highlight-color: transparent;
+    -webkit-font-smoothing: antialiased;
+    text-size-adjust: 100%;
+    --polaris-version-number: "4.27.0";
+    --polaris-animation-skeleton-shimmer: polaris-SkeletonShimmerAnimation;
+    --toast-translate-y-out: 15rem;
+    --toast-translate-y-in: 0;
+    --global-ribbon-height: 0px;
+    --p-text-subdued: #6d7175;
+    --p-card-shadow: 0 0.2rem 0.4rem #dfe3e8;
+    --top-bar-background: #00848e;
+    --top-bar-background-lighter: #1d9ba4;
+    --top-bar-color: #f9fafb;
+    --p-frame-offset: 0px;
+    font-family: -apple-system, BlinkMacSystemFont, San Francisco, Segoe UI,
+      Roboto, Helvetica Neue, sans-serif;
+    cursor: pointer;
+    box-sizing: border-box;
+    fill: #292824;
+    vertical-align: middle;
+    width: 30px;
+    height: 30px;
+    border-radius: 50%;
+    background: #fff;
+    box-shadow: 0 0 1px rgba(66, 71, 76, 0.45), 0 2px 1px rgba(0, 0, 0, 0.05);
+  }
+
+  @media (min-width: 768px) {
+    .np-homepage-hero-cta.np-button {
+      border-radius: 30px;
+      padding: 32px;
+    }
+
+    .np-homepage-hero .np-homepage-headline {
+      font-size: 5rem;
+    }
+
+    .np-homepage-hero .np-homepage-subheadline {
+      font-weight: 400;
+      font-size: 18px;
+      line-height: 2em;
+      letter-spacing: .72px;
+      text-align: left;
+    }
+
+    .np-stretch-content {
+      margin-top: 24px;
+    }
+  }
+</style>
+
+<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tiny-slider/2.9.4/tiny-slider.css">
+<script src="https://cdnjs.cloudflare.com/ajax/libs/tiny-slider/2.9.2/min/tiny-slider.js"></script>
+
+<script type="module">
+  var slider = tns({
+    container: '.np-homepage-featured-courses',
+    items: 1,
+    nav: false,
+    controlsText: ['<i class="fas fa-chevron-left"></i>', '<i class="fas fa-chevron-right"></i>'],
+    responsive: {
+      768: {
+        items: 2
+      },
+      1200: {
+        items: 3
+      }
+    }
+  });
+</script>

Custom_Templates/customer_templates/Artera_sandbox/styles.css.liquid

@@ -0,0 +1,127 @@
+ /*
+ Put your custom overlay styles in here
+ You can use your northpass color palette in this file
+
+{{ color_palette.button_font_color }}
+{{ color_palette.button_color }}
+{{ color_palette.button_hover_color }}
+{{ color_palette.header_font_color }}
+{{ color_palette.header_font_hover_color }}
+{{ color_palette.header_color }}
+*/
+
+@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
+
+html *:not(i) {
+  font-family: 'Poppins', sans-serif !important;
+}
+
+body, .np-main {
+  background: #fff;
+}
+
+.np-main {
+  padding: 220px 20px 32px;
+}
+
+@media screen and (min-width: 768px) {
+  .np-main {
+    padding: 200px 5% 184px;
+  }
+}
+
+/* Course Cards */
+
+.course-card {
+  cursor: pointer;
+  background-color: #f5f2ff;
+  border-radius: 30px;
+  box-shadow: none;
+  padding: 24px 24px 44px;
+  transition: .2s;
+  width: 100%;
+}
+
+.course-card:hover, .course-card:focus {
+  box-shadow: 10px 10px 20px 0 rgb(62 51 102 / 20%);
+}
+
+.course-card-container {
+  display: flex;
+  width: 100%;
+}
+
+.course-card-container > * {
+  transition: .2s;
+}
+
+.course-image {
+  border-radius: 15px;
+  display: block;
+  margin-bottom: 16px;
+  overflow: hidden;
+  padding-top: 72%;
+  position: relative;
+  width: 100%;
+}
+
+.course-image img {
+  bottom: 0;
+  height: 100%;
+  left: 0;
+  object-fit: cover;
+  position: absolute;
+  right: 0;
+  top: 0;
+  width: 100%;
+  max-width: 100%;
+}
+
+.course-categories-container {
+  font-size: 10px;
+  font-weight: 500;
+  margin: 0;
+}
+
+.course-name {
+  font-weight: 500;
+  letter-spacing: 1px;
+  line-height: normal;
+  margin: 20px 0 0;
+  font-size: 18px;
+}
+
+.course-name a {
+  text-decoration: none;
+  color: #000;
+}
+
+.course-category {
+  background-color: #ffe7e1;
+  color: #ff7676;
+  border-radius: 4px;
+  font-weight: 500;
+  margin-right: 8px;
+  padding: 4px 8px;
+  text-transform: uppercase;
+  transition: .2s;
+  text-decoration: none;
+}
+
+@media (min-width: 768px) {
+  .course-card {
+    padding: 24px 24px 35px;
+  }
+
+  .course-card-container {
+    padding: 0 12px;
+  }
+
+  .course-image {
+    padding-top: 66%;
+  }
+
+  .course-name {
+    font-size: 20px;
+  }
+}

Custom_Templates/customer_templates/HackerRank Internal/_cards_learning_path.html.liquid

@@ -0,0 +1,102 @@
+{% comment %}This section of code will iterate over all courses in a learning path and average out the completion per course compared to the total of the LP {% endcomment %}
+{% assign total_progress = 0 %}
+{% assign completed_progress = 0 %}
+
+{% for item in learning_path.items %}
+  {% if item.course? %}
+    {% assign total_progress = total_progress | plus: 100 %}
+
+    {% assign completed_progress = completed_progress | plus: item.progress %}
+  {% endif %}
+{% endfor %}
+
+{% assign total_progress = total_progress | times: 0.01 %}
+{% assign calculated_progress = completed_progress | divided_by: total_progress %}
+
+<div class="np-card np-no-horizontal-padding">
+  <div class="np-card-container">
+    <div class="np-learning-path">
+      <img
+        alt="{{ learning_path.name }}"
+        class="np-card-image np-learning-path-image"
+        src="{{ learning_path.image_url }}"
+      />
+      <div class="np-card-text-wrapper">
+        <div class="np-hidden-desktop np-card-header">
+          <i class="np-card-header-icon far fa-road"></i>
+          <div class="np-card-header-type">{% t shared.learning_path.title %}</div>
+          <div class="np-hidden-desktop  np-card-header-items-count">
+            {{ learning_path.items.count }} {% t .items %}
+          </div>
+        </div>
+        <div class="np-hidden-mobile np-card-header">
+          <div class="np-card-header-type">{% t shared.learning_path.title %}</div>
+          <i class="np-card-header-icon far fa-road"></i>
+        </div>
+
+        <div class="np-card-content np-card-padding np-card-content-vertical">
+          <h3 class="np-card-content-title">
+            {{ learning_path.name }}
+          </h3>
+
+          <div class="np-card-content-subtitle">
+            {{ learning_path.instructor_names }}
+          </div>
+
+          <div class="np-hidden-mobile np-card-content-description">
+            {{ learning_path.description }}
+          </div>
+
+          <div class="np-hidden-mobile np-card-content-progress
+          np-button-color">
+            {% comment %}{% t shared.progress, count: learning_path.progress %}{% endcomment %}
+            {% if calculated_progress < 1 %}
+              Not Started
+            {% else %}
+              {{calculated_progress | ceil }}% Completed
+            {% endif %}
+          </div>
+
+          <div class="np-hidden-mobile np-card-progress-bar-container">
+            <div
+              style="width: {{ calculated_progress }}%"
+              class="np-button-background-color np-card-progress-bar">
+            </div>
+          </div>
+
+          <div class="np-card-content-footer">
+            <div class="np-hidden-desktop np-card-content-progress
+            np-button-color">
+              {% t shared.progress, count: learning_path.progress %}
+            </div>
+            <a class="np-button" href="{% route learning_path, id: learning_path.id %}">
+              {% t shared.view %}
+            </a>
+            <span class="np-hidden-mobile np-learning-path-items">
+              <i class="np-button-color np-learning-path-items-icon far fa-graduation-cap"></i>
+              <span class="np-learning-path-items-count">
+                {{ learning_path.items.count }} {% t .items %}
+              </span>
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="np-card-stack">
+    <div class="np-card-stack-level-1"></div>
+    <div class="np-card-stack-level-2"></div>
+  </div>
+</div>
+
+<style>
+  @media screen and (min-width: 768px) {
+.np-learning-paths .np-learning-path-image {
+  min-height: unset;
+  margin: auto;
+}
+.np-learning-path-image {
+  min-width: 33%;
+}
+}
+</style>

Custom_Templates/customer_templates/HackerRank Internal/_learning_path_outline.html.liquid

@@ -0,0 +1,15 @@
+<div class="np-learning-path-outline">
+  {% for item in learning_path.items %}
+    {% if item.course? %}
+      {% include "learning_path_course", course: item %}
+    {% elsif item.training_event? %}
+      {% include "learning_path_training_session", training_session: item %}
+    {% endif %}
+  {% endfor %}
+</div>
+
+<style>
+  .np-learning-path-outline-item.np-card-container .np-optional-ribbon {
+    display: none;
+  }
+</style>

Custom_Templates/customer_templates/HackerRank Internal/_sub_navigation.html.liquid

@@ -0,0 +1,28 @@
+<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 }}">
+        <a class="np-sub-navigation-content-item-link" href="{{ link.url }}">
+          <i class="{{ link.icon }} np-button-color np-sub-navigation-content-item-icon"></i>
+          {% if link.label == 'Dashboard' %}
+            My Dashboard
+          {% elsif link.label == 'Catalog' %}
+            Courses Library
+          {% elsif link.label == 'Events' %}
+            Live Training Webinars
+          {% else %}
+            {{ link.label }}
+          {% endif %}
+        </a>
+        <div class="np-sub-navigation-content-item-bar np-button-background-color"></div>
+      </div>
+    {% endfor %}
+      <div class="np-sub-navigation-content-item">
+        <a class="np-sub-navigation-content-item-link" href="https://support.hackerrank.com">
+          <i style="color: #bac4ca;" class="far fa-book-reader np-sub-navigation-content-item-icon"></i>
+          Knowledge Base
+        </a>
+        <div class="np-sub-navigation-content-item-bar np-button-background-color"></div>
+      </div>
+  </div>
+</nav>

Custom_Templates/customer_templates/HackerRank Internal/catalog.html.liquid

@@ -0,0 +1,63 @@
+{% 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 %}
+
+    {% if courses.in_catalog.any? %}
+      {%
+        include "filter_dropdown",
+        filters: courses.filters,
+        key: "category_uuid",
+        label: label
+      %}
+    {% endif %}
+  </div>
+  {% include "courses_catalog" %}
+</main>
+{% include "footer" %}
+
+<script>
+  function clickDropdownMenu() {
+    const dropdownMenu = document.getElementsByClassName('dropdown-menu')[0]
+
+    const event = new MouseEvent('click', {
+      view: window,
+      bubbles: true,
+      cancelable: true
+    });
+
+    dropdownMenu.dispatchEvent(event);
+    console.log('clicked')
+  }
+
+
+
+
+  window.addEventListener('DOMContentLoaded', () => {
+    const choices = document.querySelectorAll('.choices__item.choices__item--choice.choices__item--selectable')
+
+    const targetNode = document.getElementsByClassName('choices__list')[2];
+    const config = { attributes: true, childList: true, subtree: true };
+    const callback = (mutationList, observer) => {
+      var updated_choices = document.querySelectorAll('.choices__item.choices__item--choice.choices__item--selectable')
+      for (const mutation of mutationList) {
+        Array.from(updated_choices).forEach((choice) => {
+          choice.addEventListener("mousedown", clickDropdownMenu);
+        })
+      }
+    };
+    const observer = new MutationObserver(callback);
+
+    Array.from(choices).forEach((choice) => {
+      choice.addEventListener("mousedown", clickDropdownMenu);
+    })
+    observer.observe(targetNode, config);
+  });
+
+</script>

Custom_Templates/customer_templates/HackerRank Internal/course.html.liquid

@@ -0,0 +1,24 @@
+
+ {% if course.enrolled? %}
+    <script>
+      window.location.replace('{% route course_viewer, course_id: course.id, learning_path_id: params.learning_path_id %}')
+    </script>
+      
+  {% else %}
+    <script>
+
+      window.location.replace('{% route course_enrollment, code: course.enrollment_code %}')
+    </script>
+
+  {% endif %}
+
+{% comment %} {% include "header" %}
+<main class="np-main np-max-width np-page-container">
+  <div class="np-hidden-mobile" id="course-desktop">
+    {% include "course_desktop_view" %}
+  </div>
+  <div class="np-hidden-desktop" id="course-mobile">
+    {% include "course_mobile_view" %}
+  </div>
+</main>
+{% include "footer" %} {% endcomment %}

Custom_Templates/customer_templates/HackerRank Internal/homepage.html.liquid

@@ -0,0 +1,47 @@
+{% include "header" %}
+{% include "course_version_outdated_alert", courses: courses.featured %}
+<main class="np-main np-homepage">
+  <div class="np-homepage-hero">
+    <img class="np-homepage-hero-image"
+      src="{{ homepage.artwork_url }}"
+      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>
+      <a class="np-homepage-hero-cta np-button" href="{% route catalog %}">
+        {% t .discover %}
+      </a>
+    </div>
+  </div>
+  {% include "sub_navigation" %}
+  <div class="np-homepage-featured np-max-width">
+    <div class="np-homepage-featured-text">
+      <div class="np-homepage-headline">
+        {{ homepage.featured_courses_headline }}
+      </div>
+      <div class="np-homepage-subheadline">
+        {{ homepage.featured_courses_subheadline }}
+      </div>
+    </div>
+    
+    {% if learning_paths.available.any? %}
+    <div class="np-learning-paths-resources">
+        {% for learning_path in learning_paths.available %}
+          {% if learning_path.name == 'HackerRank Screen (Self-Guided Learning Path)' or learning_path.name == 'HackerRank Interview (Self-Guided Learning Path)' %}
+            {% include "cards_learning_path" with learning_path %}
+          {% endif %}
+          {% if learning_path.name == 'HackerRank Company Admin' %}
+            {% include "cards_learning_path" with learning_path %}
+          {% endif %}
+        {% endfor %}
+      </div>
+    {% endif %}
+
+  </div>
+</main>
+{% include "footer" %}

CustomerNotes/Artsy.md

@@ -1,17 +1,21 @@
 ## 10/19/2022
+
 * Ellen, Marketplace Support lead
 * Wants to use for onboarding training
-* New to artsy, 3 months, bad onboarding experience 
-* Has a new person started in November and wants to use training on Northpass. 
-* Specifcally creating her own training for her team. 
+* New to artsy, 3 months, bad onboarding experience
+* Has a new person started in November and wants to use training on Northpass.
+* Specifcally creating her own training for her team.
 
 ## 11/10/2022
+
 ### Contract & Training/Gating Discussion
+
 *Training and Gating Topics*
-* BambooHR > Northpass 
+
+* BambooHR > Northpass
 * They are not using milestones to block SCORM content
 * They are understanding the difference between gated content with a SCORM file and Northpass
-* Taught them how to setup milestones. 
+* Taught them how to setup milestones.
 * "Where does OpenSesame end and Northpass begin?"
-* They may want to test and replace courses with ones that you cannot scrub or skip through videos. 
-* 
+* They may want to test and replace courses with ones that you cannot scrub or skip through videos.
+*

Scripts/API_Tests/assignCoursetoGroups.py

@@ -2,64 +2,62 @@ import requests
 
 apiKey = "Bknf8kidbluRfcKu3m3lKoxS8"
 groups = [
-        "Armonk", 
-        "Babylon",
-        "Bayside",
-        "Bedford",
-        "Cutchogue",
-        "East Hampton",
-        "East Setauket",
-        "Executive",
-        "Farmingville",
-        "Franklin Square",
-        "Garden City",
-        "Great Neck",
-        "Greenport",
-        "Hampton Bays",
-        "Hamptons",
-        "Huntington",
-        "Huntington Station",
-        "Katonah",
-        "Locust Valley",
-        "Long Beach",
-        "Long Island",
-        "Long Island City",
-        "Manhasset",
-        "Manhattan",
-        "Massapequa Park",
-        "Mattituck",
-        "Merrick",
-        "Montauk",
-        "New Hyde Park",
-        "New York",
-        "North Fork",
-        "Ocean Beach",
-        "Plainview",
-        "Port Washington",
-        "Queens",
-        "Quogue",
-        "Rockville Centre",
-        "Roslyn",
-        "Sag Harbor",
-        "Sayville",
-        "Scarsdale",
-        "Sea Cliff",
-        "Smithtown",
-        "Southampton",
-        "Syosset",
-        "Westchester",
-        "Westhampton Beach"
-    ]
+    "Armonk",
+    "Babylon",
+    "Bayside",
+    "Bedford",
+    "Cutchogue",
+    "East Hampton",
+    "East Setauket",
+    "Executive",
+    "Farmingville",
+    "Franklin Square",
+    "Garden City",
+    "Great Neck",
+    "Greenport",
+    "Hampton Bays",
+    "Hamptons",
+    "Huntington",
+    "Huntington Station",
+    "Katonah",
+    "Locust Valley",
+    "Long Beach",
+    "Long Island",
+    "Long Island City",
+    "Manhasset",
+    "Manhattan",
+    "Massapequa Park",
+    "Mattituck",
+    "Merrick",
+    "Montauk",
+    "New Hyde Park",
+    "New York",
+    "North Fork",
+    "Ocean Beach",
+    "Plainview",
+    "Port Washington",
+    "Queens",
+    "Quogue",
+    "Rockville Centre",
+    "Roslyn",
+    "Sag Harbor",
+    "Sayville",
+    "Scarsdale",
+    "Sea Cliff",
+    "Smithtown",
+    "Southampton",
+    "Syosset",
+    "Westchester",
+    "Westhampton Beach",
+]
+
 
 def findgroupIDs(apiKey, groups):
     groupuuids = []
     badGroups = []
     for group in groups:
         url = "https://api.northpass.com/v2/groups?filter[name][eq]="
-        headers = {
-                "accept": "application/json",
-                "X-Api-Key": apiKey
-                }
+        headers = {"accept": "application/json", "X-Api-Key": apiKey}
         response = requests.get(url + group, headers=headers)
         response = response.json()
         try:
@@ -69,26 +67,22 @@ def findgroupIDs(apiKey, groups):
             badGroups.append(group)
         finally:
             pass
-    #print(badGroups)
-    #print(groupuuids)
-    assignCourse(apiKey,url, groupuuids)
+    # print(badGroups)
+    # print(groupuuids)
+    assignCourse(apiKey, url, groupuuids)
+
 
 def assignCourse(apiKey, url, groupuuids):
     for group in groupuuids:
-        try: 
+        try:
             url = f"https://api.northpass.com/v2/groups/{group}/relationships/courses"
             courseuuid = "10e9b174-cbad-4caa-b0ff-1a7338f2345a"
             headers = {
                 "accept": "application/json",
                 "content-type": "application/json",
-                "X-Api-Key": apiKey
+                "X-Api-Key": apiKey,
             }
-            payload = {"data": [
-            {
-                "type": "courses",
-                "id": courseuuid
-            }
-        ]}
+            payload = {"data": [{"type": "courses", "id": courseuuid}]}
             print(f"Group {group} successfully accepted the course")
             response = requests.post(url, json=payload, headers=headers)
         except:
@@ -96,5 +90,6 @@ def assignCourse(apiKey, url, groupuuids):
         finally:
             pass
 
+
 if __name__ == "__main__":
     findgroupIDs(apiKey, groups)