From 7340726f9ba2303ae5dda3e78f1401871fb93068 Mon Sep 17 00:00:00 2001
From: Norm Rasmussen <norman.rasmussen@me.com>
Date: Wed, 17 Dec 2025 16:55:47 -0500
Subject: [PATCH] DeepL templates and tasks for the same.

---
 .../customer_templates/DeepL/.DS_Store        | Bin 0 -> 6148 bytes
 .../DeepL/_banner.html.liquid                 |  14 ++--
 .../DeepL/_cards_course.html.liquid           |  40 ++++++++---
 .../DeepL/_cards_resources.html.liquid        |  44 ++++++++++--
 .../_course_progress_and_cta.html.liquid      |  13 ++--
 .../DeepL/_header.html.liquid                 |  64 +++++++++++++++---
 .../DeepL/_resources-filters.html.liquid      |   9 +--
 .../DeepL/_resources_content.html.liquid      |  14 ++--
 .../DeepL/homepage.html.liquid                |   4 +-
 .../DeepL/styles.css.liquid                   |  15 ++++
 Scripts/API_Tests/get_category_ids.py         |   9 ++-
 Tasks.md                                      |   7 +-
 12 files changed, 181 insertions(+), 52 deletions(-)
 create mode 100644 Custom_Templates/customer_templates/DeepL/.DS_Store

diff --git a/Custom_Templates/customer_templates/DeepL/.DS_Store b/Custom_Templates/customer_templates/DeepL/.DS_Store
new file mode 100644
index 0000000000000000000000000000000000000000..5008ddfcf53c02e82d7eee2e57c38e5672ef89f6
GIT binary patch
literal 6148
zcmeH~Jr2S!425mzP>H1@V-^m;4Wg<&0T*E43hX&L&p$$qDprKhvt+--jT7}7np#A3
zem<@ulZcFPQ@L2!n>{z**<q8>++&mCkOWA81W14cNZ<zv;LbK1Poaz?KmsK2CSc!(
z0ynLxE!0092;Krf2c+FF_Fe*7ECH>lEfg7;MkzE(HCqgga^y>{tEnwC%0;vJ&^%eQ
zLs35+`xjp>T0<F0fCPF1$Cyrb|F7^5{eNG?83~ZUUlGt@xh*qZDeu<Z%US-OSsOPv
j)R!Z4KLME7ReXlK;d!wEw5GODWMKRea10D2@KpjYNUI8I

literal 0
HcmV?d00001

diff --git a/Custom_Templates/customer_templates/DeepL/_banner.html.liquid b/Custom_Templates/customer_templates/DeepL/_banner.html.liquid
index 708aa599..a8a9886b 100644
--- a/Custom_Templates/customer_templates/DeepL/_banner.html.liquid
+++ b/Custom_Templates/customer_templates/DeepL/_banner.html.liquid
@@ -2,18 +2,18 @@
     <div class="banner-content">
         <div class="banner-text-wrapper">
             <div class="banner-heading">
-                Become part of the DeepL community
+                Introducing DeepL AI Labs
             </div>
             <div class="desc">
-                Join our vibrant community today and connect with like-minded individuals from around the world! Share your ideas, passions, and experiences while learning from others.
+              See what the DeepL R&D teams are building next!
             </div>
         </div>
         <div class="banner-btn-container">
-            <a href="#" class="dark-btn">Join us now</a>
+            <a href="https://www.deepl.com/ai-labs" target="_blank" class="dark-btn">Learn more</a>
         </div>
     </div>
     <div class="banner-image-wrapper">
-        <img src="https://s3.amazonaws.com/static.northpass.com/DeepL/images/Group+427321804.png" alt="" class="banner-img">
+        <img src="https://8349564.fs1.hubspotusercontent-na1.net/hubfs/8349564/labs-cubes-v07.3.1-Green%20(00052).png" alt="" class="banner-img">
     </div>
 </div>
 
@@ -21,7 +21,7 @@
     .banner-container {
         display: flex;
         gap: 20px;
-        background: #F8F8F8;
+        background: #1FCF9A;
         padding: 32px;
         border-radius: 8px;
 
@@ -35,7 +35,7 @@
         justify-content: space-between;
     }
     .banner-heading {   
-        font-size: 80px;
+        font-size: 56px;
         font-weight: 300;
         line-height: 80px;
         letter-spacing: -0.015em;
@@ -59,6 +59,6 @@
     }
     .banner-btn-container {
         display: flex;
-        margin-top: 15%;
+        margin-top: 10%;
     }
 </style>
\ No newline at end of file
diff --git a/Custom_Templates/customer_templates/DeepL/_cards_course.html.liquid b/Custom_Templates/customer_templates/DeepL/_cards_course.html.liquid
index f89c8f41..94ae5df2 100644
--- a/Custom_Templates/customer_templates/DeepL/_cards_course.html.liquid
+++ b/Custom_Templates/customer_templates/DeepL/_cards_course.html.liquid
@@ -1,23 +1,45 @@
 <div class="card" categories="{% for category in course.categories %}{{category.name}},{% endfor %}" progress="{% if course.progress > 0 and course.progress < 100 %}In progress{% elsif course.progress == 100 %}Completed{% else %}Not started{% endif %}">
   <div class="card-container">
-    <img
+    {% comment %} <img
       class="card-image"
       alt="{{ course.name }}"
       src="{{ course.image_url }}"
-    >
+    > {% endcomment %}
+    <div class="image-container" style="position: relative;">
+      <img class="card-image"
+      alt="{{ course.name }}"
+      src="{{ course.image_url }}">
+      {% if course.ribbon %}
+        <div class="np-card-ribbon">
+          {{course.ribbon}}
+        </div>
+      {% endif %}
+    </div>
     <div class="card-content">
       <div class="card-details">
         <div class="card-detail course-lessons lang-en">
-					{{course.activities_count}} lessons | {{course.properties.course_time}} minutes
+          {{course.activities_count}} lessons
         </div>
         <div class="card-detail course-lessons lang-de">
           {{course.activities_count}} Lektionen
         </div>
+        <div class="card-detail course-lessons lang-jp">
+          {{course.activities_count}} レッスン
+        </div>
+        <div class="card-detail course-lessons lang-fr">
+          {{course.activities_count}} leçons
+        </div>
+        <div class="card-detail course-time lang-en">
+          {{course.properties.course_time}} minutes
+        </div>
+        <div class="card-detail course-time lang-de">
+          {{course.properties.course_time}} minuten
+        </div>
         <div class="card-detail course-time lang-fr">
-          {{course.properties.course_time}} leçons
+          {{course.properties.course_time}} minutes
         </div>
         <div class="card-detail course-time lang-jp">
-          {{course.properties.course_time}} レッスン
+          {{course.properties.course_time}} 分
         </div>
       </div>
       <div class="card-content-title">
@@ -37,28 +59,28 @@
         <a class="card-btn dark-btn lang-en" href="{{ course_path }}">
           {% if course.progress == 0 %}
             Get started
-            {% else %}
+            {% else %} 
               Continue
           {% endif %}
         </a>
         <a class="card-btn dark-btn lang-de" href="{{ course_path }}">
           {% if course.progress == 0 %}
             Starten
-            {% else %}
+            {% else %} 
             Weiter
           {% endif %}
         </a>
          <a class="card-btn dark-btn lang-fr" href="{{ course_path }}">
           {% if course.progress == 0 %}
             Commencer
-            {% else %}
+            {% else %} 
               Continue
           {% endif %}
         </a>
          <a class="card-btn dark-btn lang-jp" href="{{ course_path }}">
           {% if course.progress == 0 %}
             開始する
-            {% else %}
+            {% else %} 
               続ける
           {% endif %}
         </a>
diff --git a/Custom_Templates/customer_templates/DeepL/_cards_resources.html.liquid b/Custom_Templates/customer_templates/DeepL/_cards_resources.html.liquid
index 6334c463..59ee86f3 100644
--- a/Custom_Templates/customer_templates/DeepL/_cards_resources.html.liquid
+++ b/Custom_Templates/customer_templates/DeepL/_cards_resources.html.liquid
@@ -1,10 +1,16 @@
 <div class="card" categories="{% for category in course.categories %}{{category.name}},{% endfor %}" progress="{% if course.progress > 0 and course.progress < 100 %}In progress{% elsif course.progress == 100 %}Completed{% else %}Not started{% endif %}">
 <div class="card-container">
-  <img
-    class="card-image"
-    alt="{{ course.name }}"
-    src="{{ course.image_url }}"
-  >
+  <div class="image-container" style="position: relative;">
+      <img class="card-image"
+      alt="{{ course.name }}"
+      src="{{ course.image_url }}">
+      {% if course.ribbon %}
+        <div class="sl-card-ribbon">
+          {{course.ribbon}}
+        </div>
+      {% endif %}
+    </div>
+
   <div class="card-content">
     <div class="card-details">
       <div class="card-detail course-lessons">
@@ -58,6 +64,34 @@
           {% endif %}
       {% endfor %}
       </a>
+      <a class="card-btn dark-btn lang-fr" 
+      {% if course.enrolled? %}
+        href="{% route course_viewer, course_id: course.id, learning_path_id: params.learning_path_id %}"
+      {% else %}
+        href="{{ course_path }}"
+      {% endif %}>
+        {% for category in course.categories %}
+          {% if category.name == 'PDF' %}
+           Lire
+          {% elsif category.name == 'Video'  %} 
+           Visionner
+          {% endif %}
+      {% endfor %}
+      </a>
+      <a class="card-btn dark-btn lang-jp" 
+      {% if course.enrolled? %}
+        href="{% route course_viewer, course_id: course.id, learning_path_id: params.learning_path_id %}"
+      {% else %}
+        href="{{ course_path }}"
+      {% endif %}>
+        {% for category in course.categories %}
+          {% if category.name == 'PDF' %}
+            今すぐ読む
+          {% elsif category.name == 'Video'  %} 
+            今すぐ視聴
+          {% endif %}
+      {% endfor %}
+      </a>
     </div>
   </div>
 </div>
diff --git a/Custom_Templates/customer_templates/DeepL/_course_progress_and_cta.html.liquid b/Custom_Templates/customer_templates/DeepL/_course_progress_and_cta.html.liquid
index ffeb4557..5323e26a 100644
--- a/Custom_Templates/customer_templates/DeepL/_course_progress_and_cta.html.liquid
+++ b/Custom_Templates/customer_templates/DeepL/_course_progress_and_cta.html.liquid
@@ -43,15 +43,20 @@
     {% endif %}
     >
       {% if course.enrolled? == false %}
-        {% t shared.enroll %}
-        <span class="lang-en"> Start Course </span>
+        <span class="lang-en"> Get started </span>
         <span class="lang-fr"> Commencer </span>
-				<span class="lang-de"> Kurs starten </span>
+		<span class="lang-de"> Loslegen </span>
+		<span class="lang-jp"> 今すぐ開始 </span>
       {% elsif course.started? == false %}
         <span class="lang-en"> Start Course </span>
         <span class="lang-fr"> Commencer </span>
-				<span class="lang-de"> Kurs starten </span>
+		<span class="lang-de"> Kurs starten </span>
+		<span class="lang-jp"> 今すぐ開始 </span>
       {% elsif course.completed? %}
+     	<span class="lang-en"> Start </span>
+        <span class="lang-fr"> Commencer </span>
+		<span class="lang-de"> Starten </span>
+		<span class="lang-jp"> 今すぐ開始 </span>
         {% t shared.course.view, key: current_school.course_vocabulary %}
       {% else %}
         {% t shared.continue %}
diff --git a/Custom_Templates/customer_templates/DeepL/_header.html.liquid b/Custom_Templates/customer_templates/DeepL/_header.html.liquid
index 1811336f..c3870c2b 100644
--- a/Custom_Templates/customer_templates/DeepL/_header.html.liquid
+++ b/Custom_Templates/customer_templates/DeepL/_header.html.liquid
@@ -1,4 +1,4 @@
-{% assign userLanguage = current_person.properties.learner_language |  upcase %}
+{% assign userLanguage = current_person.properties.learner_language |  upcase%}
 
 <div id="loader-overlay">
   <div class="loader"></div>
@@ -60,7 +60,7 @@
           <a href="/app/catalog" id="courses"  class="navigation-item lang-fr">
           Formations
           </a>
-
+    
           <a href="/app/training_events" id="webinars" class="navigation-item lang-en">
           Webinars
           </a>
@@ -112,7 +112,7 @@
               data-toggle-outside
               data-toggle-escape>
               <span style="display:inline-block">Language</span>
-
+ 	      
             </button>
 
   <button
@@ -123,9 +123,31 @@
               data-toggle-outside
               data-toggle-escape>
               <span style="display:inline-block">Sprache</span>
-
+ 	      
             </button>
-
+      
+      <button
+              type="button"
+              class="navigation-item languge-dropdown-button lang-fr"
+              data-toggle-class="is-open"
+              data-toggle-target-next
+              data-toggle-outside
+              data-toggle-escape>
+              <span style="display:inline-block">Langue</span>
+ 	      
+            </button>
+            
+            <button
+              type="button"
+              class="navigation-item languge-dropdown-button lang-jp"
+              data-toggle-class="is-open"
+              data-toggle-target-next
+              data-toggle-outside
+              data-toggle-escape>
+              <span style="display:inline-block">言語</span>
+ 	      
+            </button>
+            
             <ul class="languge-dropdown-list">
               <li>
                 <button
@@ -148,6 +170,28 @@
                   <span style="display:inline-block">Deutsch</span>
                 </button>
               </li>
+              <li>
+                <button
+                  type="button"
+                  id="fr-lang"
+                  data-lang="fr"
+                  class="lang-option active"
+                  data-toggle-trigger-off
+                  >
+                  <span style="display:inline-block">Français</span>
+                </button>
+              </li>
+              <li>
+                <button
+                  type="button"
+                  id="jp-lang"
+                  data-lang="jp"
+                  class="lang-option active"
+                  data-toggle-trigger-off
+                  >
+                  <span style="display:inline-block">日本語</span>
+                </button>
+              </li>
             </ul>
           </div>
         {% endif %}
@@ -450,13 +494,13 @@
       lp.classList.add('active-nav');
       break;
     case '/app/catalog':
-      courses.classList.add('active-nav');
+      courses.classList.add('active-nav'); 
       break;
     case '/app/training_events':
-      webinars.classList.add('active-nav');
+      webinars.classList.add('active-nav'); 
       break;
     case '/app/resources':
-      resources.classList.add('active-nav');
+      resources.classList.add('active-nav'); 
       break;
     default:
       break;
@@ -478,7 +522,7 @@
   document.addEventListener("DOMContentLoaded", function() {
   let userLanguage = localStorage.getItem("userLanguage");
   let userLanguageCustomPropValue = '{{current_person.properties.learner_language}}'
-
+  
   if (userLanguage === null) {
     userLanguage = "en";
     localStorage.setItem("userLanguage", userLanguage);
@@ -538,4 +582,4 @@
     });
   });
 });
-</script>
+</script>
\ No newline at end of file
diff --git a/Custom_Templates/customer_templates/DeepL/_resources-filters.html.liquid b/Custom_Templates/customer_templates/DeepL/_resources-filters.html.liquid
index 832a186a..8538a4cc 100644
--- a/Custom_Templates/customer_templates/DeepL/_resources-filters.html.liquid
+++ b/Custom_Templates/customer_templates/DeepL/_resources-filters.html.liquid
@@ -12,10 +12,10 @@
         <div class="filter lang-de" value="Glossaries" >Glossare</div>
         <div class="filter lang-fr" value="Glossaries" >Glossaires</div>
         <div class="filter lang-jp" value="Glossaries" >用語集</div>
-        <div class="filter lang-en" value="Document translation" >Document translation</div>
-        <div class="filter lang-de" value="Document translation" >Dokumentübersetzung</div>
-        <div class="filter lang-fr" value="Document translation" >Traduction de documents</div>
-        <div class="filter lang-jp" value="Document translation" >文書ファイルの翻訳</div>
+        <div class="filter lang-en" value="File translation" >File translation</div>
+        <div class="filter lang-de" value="File translation" >Dateiübersetzung</div>
+        <div class="filter lang-fr" value="File translation" >Traduction de fichiers</div>
+        <div class="filter lang-jp" value="File translation" >ファイル翻訳</div>
         <div class="filter" value="Apps" >Apps</div>
         <div class="filter lang-en" value="Extensions and integrations" >Extensions and integrations</div>
         <div class="filter lang-de" value="Extensions and integrations" >Erweiterungen und Integrationen</div>
@@ -24,6 +24,7 @@
         <div class="filter" value="Write" >Write</div>
         <div class="filter" value="Voice">Voice</div>
         <div class="filter" value="API" >API</div>
+        <div class="filter" value="Spotlights" >Spotlights</div>
     </div>
 </div>
 
diff --git a/Custom_Templates/customer_templates/DeepL/_resources_content.html.liquid b/Custom_Templates/customer_templates/DeepL/_resources_content.html.liquid
index 111de83a..bb6f89aa 100644
--- a/Custom_Templates/customer_templates/DeepL/_resources_content.html.liquid
+++ b/Custom_Templates/customer_templates/DeepL/_resources_content.html.liquid
@@ -4,8 +4,8 @@
     </div>
     <div class="catalog-courses-wrapper">
         {% for course in courses.in_catalog %}
-            {% if course.properties.resource == true %}
-                {% if course.properties.language == userLanguage %}
+            {% if course.properties.resource == true %}   
+                {% if course.properties.language == userLanguage %} 
                 <div class="catalog-course-container">{% include "cards_resources" %}</div>
                 {% endif %}
             {% endif %}
@@ -60,12 +60,12 @@
         background: #6CF1C9;
 
     }
-    @media only screen and (max-width: 1170px) {
+    @media only screen and (max-width: 1170px) { 
         .catalog-courses-wrapper {
             grid-template-columns: repeat(2,1fr);
         }
     }
-    @media only screen and (max-width: 768px) {
+    @media only screen and (max-width: 768px) { 
         .catalog-courses-wrapper {
             grid-template-columns: repeat(1,1fr);
         }
@@ -77,7 +77,7 @@ document.addEventListener("DOMContentLoaded", function() {
     const filters = document.querySelectorAll('.filter');
     const cards = document.querySelectorAll('.catalog-course-container .card');
 
-    let activeFilter = null;
+    let activeFilter = null; 
 
     filters.forEach(filter => {
         filter.addEventListener('click', function() {
@@ -88,7 +88,7 @@ document.addEventListener("DOMContentLoaded", function() {
                 filter.classList.remove('filter-active');
             } else {
                 activeFilter = value;
-
+                
                 filters.forEach(f => f.classList.remove('filter-active'));
                 filter.classList.add('filter-active');
             }
@@ -114,4 +114,4 @@ document.addEventListener("DOMContentLoaded", function() {
         }
     }
 });
-</script>
+</script>
\ No newline at end of file
diff --git a/Custom_Templates/customer_templates/DeepL/homepage.html.liquid b/Custom_Templates/customer_templates/DeepL/homepage.html.liquid
index a1ef7e78..4e99458b 100644
--- a/Custom_Templates/customer_templates/DeepL/homepage.html.liquid
+++ b/Custom_Templates/customer_templates/DeepL/homepage.html.liquid
@@ -109,9 +109,9 @@
         {% include "webinars" %}
       </section>
     {% endif %}
-    {% comment %} <section>
+     <section>
       {% include "banner" %}
-    </section> {% endcomment %}
+    </section> 
   </div>
 </main>
 {% include "footer" %}
diff --git a/Custom_Templates/customer_templates/DeepL/styles.css.liquid b/Custom_Templates/customer_templates/DeepL/styles.css.liquid
index 7a3ceef6..f4fdaeb3 100644
--- a/Custom_Templates/customer_templates/DeepL/styles.css.liquid
+++ b/Custom_Templates/customer_templates/DeepL/styles.css.liquid
@@ -181,6 +181,7 @@ section {
   font-size: 14px;
   font-weight: 400;
   margin-bottom: 20px;
+  align-items: center;
 }
 .course-lessons {
   padding-right: 5px;
@@ -189,6 +190,20 @@ section {
 .course-time {
   padding-left: 5px;
 }
+
+.sl-card-ribbon {
+    background: #FFE769;
+    color: #0F2B46;
+    font-size: 16px;
+    font-weight: 400;
+    line-height: 14px;
+    padding: 7px 12px;
+    position: absolute;
+    right: 8px;
+    border-radius: 4px;
+    top: 8px;
+}
+
 .slick-track {
     display: flex !important;
 }
diff --git a/Scripts/API_Tests/get_category_ids.py b/Scripts/API_Tests/get_category_ids.py
index a2e6cc39..85398816 100644
--- a/Scripts/API_Tests/get_category_ids.py
+++ b/Scripts/API_Tests/get_category_ids.py
@@ -3,11 +3,11 @@ import os
 import Apikeys
 import requests
 
-apikey = Apikeys.SUPPLIERPROD
+apikey = Apikeys.DEEPL
 cmd = "touch ~/Downloads/Supplier_Categories.csv"
 
 os.system(cmd)
-url = "https://api2.northpass.com/v2/categories?limit=100"
+url = "https://api.northpass.com/v2/categories?limit=100"
 headers = {
     "accept": "application/json",
     "X-Api-Key" : apikey,
@@ -28,3 +28,8 @@ with open('/Users/normrasmussen/Downloads/Supplier_Categories.csv', 'r') as read
     for row in reader:
         print(row)
 
+
+"""
+For use in URLS, the filter syntax is ?filter[category_uuid][in][]=6bfcb970-d82f-4ed9-ad7b-d17f1b82a6a9
+Category Names don't work
+"""
diff --git a/Tasks.md b/Tasks.md
index 7d4ec5be..96397576 100644
--- a/Tasks.md
+++ b/Tasks.md
@@ -39,8 +39,8 @@
 ## Chubb
 
 ### Tasks
-- [ ] Ask in SJ Migrations channel how we deal with old CE Links. Can we do a catch all error page?
-- [ ] Explore Google Form for CISA upload and management
+- [X] Ask in SJ Migrations channel how we deal with old CE Links. Can we do a catch all error page?
+- [X] Explore Google Form for CISA upload and management
 
 ### Completed
 - [X] Book EMC time for Alisha, Jared, me, Kim, and Jenelle
@@ -60,6 +60,9 @@
 
 
 ## DeepL
+- [-] Provide clients ability to easily access Spotlights feature.
+  - [ ] Sort order of the resources (only) based on 1. date published or 2. Ribbon == new.
+  - [X] Investigate what the url category filtering is and see if it works with DeepL's custom templates.
 
 ### Completed
 - [X] Ask if product will add an export button to the new access tab or have a dashboard around enrollment source. - 04-22-2025