Doordash 2 templates.

Custom_Templates/customer_templates/DoorDash 2/course.html.liquid

@@ -0,0 +1,91 @@
+{% if course.properties.is_single_activity_course %}
+
+  <script>
+    window.location.replace("/courses/{{course.id}}");
+  </script>
+
+{% else %}
+
+  {% include "header" %}
+  <main class="np-main np-max-width np-page-container">
+    <div class="np-hidden-mobile" id="course-desktop"> 
+      {% include "course_desktop_view" %}
+    </div>
+    <div class="np-hidden-desktop" id="course-mobile">
+      {% include "course_mobile_view" %}
+    </div>
+  </main>
+  {% include "footer" %}
+  <style>
+    .np-page-container {
+        margin-bottom: 0px;
+    }
+
+    /* button countdown animation and styles associated with it */
+    #course-mobile .np-top-button.animate,
+    #course-desktop .np-top-button.animate {
+      position:relative;
+      background:#000000;
+      z-index:1;
+    }
+
+    #course-mobile .np-top-button:after,
+    #course-desktop .np-top-button:after {
+      content: '';
+      position: absolute;
+      left:0;
+      top:0;
+      height:100%;
+      width:100%;
+      z-index:-1;
+      border-radius:4px;
+      transition:border-radius 0.2s;
+    }
+
+    #course-mobile .np-top-button.animate:after,
+    #course-desktop .np-top-button.animate:after {
+      background-color:#ff2c00;
+      animation-name: bgColorLeftToRight;
+      animation-duration: 10s;
+      animation-timing-function: linear;
+      z-index:-1;
+      border-top-right-radius:0;
+      border-bottom-right-radius:0;
+    }
+
+    @keyframes bgColorLeftToRight {
+      0% { width:0 }
+      100% { width:100% }
+    }
+    /* end button animaation */
+
+  </style>
+
+  <script>
+    var progress = {{ course.progress }}
+    progress < 100 ? initCourseCountdown() : "";
+  console.log("script")
+    // Init 10 second countdown to auto start learner in course
+    function initCourseCountdown() {
+      console.log("init countdown")
+      let btn
+
+      window.innerWidth < 768 ? 
+      btn = document.getElementById("course-mobile").querySelector('.np-top-button') : 
+      btn = document.getElementById("course-desktop").querySelector('.np-top-button')
+
+      btn.classList.add('animate')
+
+      btn.addEventListener("animationend", () => {
+        console.log("ended")
+        btn.classList.remove('animate')
+
+        // redirect learner to next activity
+        {% if course.enrolled? %}
+          window.location.href = `{% route course_viewer, course_id: course.id, learning_path_id: params.learning_path_id %}`
+        {% endif %}
+      }, false);
+
+    }
+  </script>
+{% endif %}