DeepL templates and tasks for the same.

2025-12-17 16:55:47 -05:00
parent 7741634b94
commit 7340726f9b
12 changed files with 181 additions and 52 deletions
--- a/Custom_Templates/customer_templates/DeepL/.DS_Store
+++ b/Custom_Templates/customer_templates/DeepL/.DS_Store
--- 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>
--- 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>
--- 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>
--- 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 %}
--- 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>
--- 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>

--- 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>
--- 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" %}
--- 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;
 }