Removed a bunch of old/churned client files and updated some older clients that I haven't touched in a while. Lots of summer cleaning!
This commit is contained in:
Norm Rasmussen
@ -5,6 +5,12 @@
|
||||
<div class="heading lang-de">
|
||||
Alle Kurse durchsuchen
|
||||
</div>
|
||||
<div class="heading lang-fr">
|
||||
Parcourir toutes les formations
|
||||
</div>
|
||||
<div class="heading lang-jp">
|
||||
すべてのコース
|
||||
</div>
|
||||
<div class="carousel-filters-wrapper">
|
||||
{% include 'catalog-filters' %}
|
||||
</div>
|
||||
|
||||
@ -0,0 +1,87 @@
|
||||
<div class="recommended-wrapper">
|
||||
<div class="heading lang-en">
|
||||
Browse all learning paths
|
||||
</div>
|
||||
<div class="heading lang-de">
|
||||
Alle Lernpfade durchsuchen
|
||||
</div>
|
||||
<div class="heading lang-fr">
|
||||
Parcourir tous les parcours d’apprentissage
|
||||
</div>
|
||||
<div class="heading lang-jp">
|
||||
すべての学習プログラム
|
||||
</div>
|
||||
|
||||
<div class="all-lp-wrapper">
|
||||
{% for learning_path in learning_paths.enrolled %}
|
||||
{% for category in learning_path.categories %}
|
||||
{% if category.name == userLanguage %}
|
||||
<div class="carousel-card">
|
||||
{% include "cards_learning_path" %}
|
||||
</div>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.all-lp-wrapper {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4,1fr);
|
||||
gap: 20px;
|
||||
margin-top: 30px;
|
||||
}
|
||||
.all-lp-carousel {
|
||||
position: relative;
|
||||
}
|
||||
.slick-arrow {
|
||||
position: absolute;
|
||||
top: -30px;
|
||||
z-index: 111;
|
||||
cursor: pointer;
|
||||
}
|
||||
.right-arrow {
|
||||
margin-left: 30px;
|
||||
}
|
||||
.slick-dots button {
|
||||
display: block;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
padding: 0;
|
||||
border: none;
|
||||
border-radius: 1px;
|
||||
background: #8878FF;
|
||||
text-indent: -9999px;
|
||||
}
|
||||
.slick-dots {
|
||||
list-style-type: none;
|
||||
}
|
||||
.slick-dots {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin: 0;
|
||||
padding-top: 3rem;
|
||||
list-style-type: none;
|
||||
gap: 10px;
|
||||
}
|
||||
.slick-dots li {
|
||||
margin: 0 0.25rem;
|
||||
}
|
||||
.slick-dots li.slick-active button {
|
||||
background: #6CF1C9;
|
||||
|
||||
}
|
||||
@media only screen and (max-width: 1170px) {
|
||||
.all-lp-wrapper {
|
||||
grid-template-columns: repeat(2,1fr);
|
||||
}
|
||||
}
|
||||
@media only screen and (max-width: 768px) {
|
||||
.all-lp-wrapper {
|
||||
grid-template-columns: repeat(1,1fr);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -5,6 +5,12 @@
|
||||
<div class="heading lang-de">
|
||||
Alle Lernpfade durchsuchen
|
||||
</div>
|
||||
<div class="heading lang-fr">
|
||||
Parcourir tous les parcours d’apprentissage
|
||||
</div>
|
||||
<div class="heading lang-jp">
|
||||
すべての学習プログラム
|
||||
</div>
|
||||
|
||||
<div class="all-lp-wrapper">
|
||||
{% for learning_path in learning_paths.enrolled %}
|
||||
|
||||
@ -0,0 +1,68 @@
|
||||
<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="card-content">
|
||||
<div class="card-details">
|
||||
<div class="card-detail course-lessons lang-en">
|
||||
{{course.activities_count}} lessons
|
||||
</div>
|
||||
<div class="card-detail course-lessons lang-de">
|
||||
{{course.activities_count}} Lektionen
|
||||
</div>
|
||||
<div class="card-detail course-time lang-fr">
|
||||
{{course.properties.course_time}} Leçons
|
||||
</div>
|
||||
<div class="card-detail course-time lang-jp">
|
||||
{{course.properties.course_time}} レッスン
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-content-title">
|
||||
{{ course.name }}
|
||||
</div>
|
||||
<div class="course-content-desc">
|
||||
{{ course.short_description }}
|
||||
</div>
|
||||
<div class="course-progress-container">
|
||||
<div class="progress-number">{{course.progress}}%</div>
|
||||
<div class="course-progress">
|
||||
<span class="course-progress-bar" style="width: {{course.progress}}%;"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-content-footer">
|
||||
{% capture course_path %}{% route course, id: course.id %}{% endcapture %}
|
||||
<a class="card-btn dark-btn lang-en" href="{{ course_path }}">
|
||||
{% if course.progress == 0 %}
|
||||
Get started
|
||||
{% else %}
|
||||
Continue
|
||||
{% endif %}
|
||||
</a>
|
||||
<a class="card-btn dark-btn lang-de" href="{{ course_path }}">
|
||||
{% if course.progress == 0 %}
|
||||
Starten
|
||||
{% else %}
|
||||
Weiter
|
||||
{% endif %}
|
||||
</a>
|
||||
<a class="card-btn dark-btn lang-fr" href="{{ course_path }}">
|
||||
{% if course.progress == 0 %}
|
||||
Commencer
|
||||
{% else %}
|
||||
Continue
|
||||
{% endif %}
|
||||
</a>
|
||||
<a class="card-btn dark-btn lang-jp" href="{{ course_path }}">
|
||||
{% if course.progress == 0 %}
|
||||
開始する
|
||||
{% else %}
|
||||
Continue
|
||||
{% endif %}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -13,12 +13,22 @@
|
||||
<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-jp">
|
||||
{{course.properties.course_time}} 分
|
||||
</div><div class="card-detail course-time lang-fr">
|
||||
{{course.properties.course_time}} minutes
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-content-title">
|
||||
{{ course.name }}
|
||||
@ -43,11 +53,25 @@
|
||||
</a>
|
||||
<a class="card-btn dark-btn lang-de" href="{{ course_path }}">
|
||||
{% if course.progress == 0 %}
|
||||
Loslegen
|
||||
Starten
|
||||
{% else %}
|
||||
Weiter
|
||||
{% endif %}
|
||||
</a>
|
||||
<a class="card-btn dark-btn lang-jp" href="{{ course_path }}">
|
||||
{% if course.progress == 0 %}
|
||||
開始する
|
||||
{% else %}
|
||||
次へ
|
||||
{% endif %}
|
||||
</a>
|
||||
<a class="card-btn dark-btn lang-fr" href="{{ course_path }}">
|
||||
{% if course.progress == 0 %}
|
||||
Commencer
|
||||
{% else %}
|
||||
Continuer
|
||||
{% endif %}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -23,6 +23,22 @@
|
||||
{{lessons}}
|
||||
Lektionen
|
||||
</div>
|
||||
<div class="card-detail lang-jp">
|
||||
{% assign lessons = 0 %}
|
||||
{% for item in learning_path.items %}
|
||||
{% assign lessons = lessons | plus: 1 %}
|
||||
{% endfor %}
|
||||
{{lessons}}
|
||||
レッスン
|
||||
</div>
|
||||
<div class="card-detail lang-fr">
|
||||
{% assign lessons = 0 %}
|
||||
{% for item in learning_path.items %}
|
||||
{% assign lessons = lessons | plus: 1 %}
|
||||
{% endfor %}
|
||||
{{lessons}}
|
||||
Leçons
|
||||
</div>
|
||||
{% if learning_path.has_certificate? %}
|
||||
<div class="cert-tag lang-en">
|
||||
Certification
|
||||
@ -30,6 +46,12 @@
|
||||
<div class="cert-tag lang-de">
|
||||
Zertifizierung
|
||||
</div>
|
||||
<div class="cert-tag lang-jp">
|
||||
修了証明
|
||||
</div>
|
||||
<div class="cert-tag lang-fr">
|
||||
Certification
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
<div class="card-content-title">
|
||||
@ -51,11 +73,25 @@
|
||||
</a>
|
||||
<a class="card-btn dark-btn lang-de" href="{% route learning_path, id: learning_path.id %}">
|
||||
{% if learning_path.progress == 0 %}
|
||||
Loslegen
|
||||
Starten
|
||||
{% else %}
|
||||
Weiter
|
||||
{% endif %}
|
||||
</a>
|
||||
<a class="card-btn dark-btn lang-jp" href="{% route learning_path, id: learning_path.id %}">
|
||||
{% if learning_path.progress == 0 %}
|
||||
開始する
|
||||
{% else %}
|
||||
次へ
|
||||
{% endif %}
|
||||
</a>
|
||||
<a class="card-btn dark-btn lang-fr" href="{% route learning_path, id: learning_path.id %}">
|
||||
{% if learning_path.progress == 0 %}
|
||||
Commencer
|
||||
{% else %}
|
||||
Continuer
|
||||
{% endif %}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -0,0 +1,64 @@
|
||||
<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="card-content">
|
||||
<div class="card-details">
|
||||
<div class="card-detail course-lessons">
|
||||
{% for category in course.categories %}
|
||||
{% if category.name == 'PDF' %}
|
||||
PDF
|
||||
{% elsif category.name == 'Video' %}
|
||||
Video
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
<div class="card-detail course-time">
|
||||
<div class="text lang-en">{{course.properties.course_time}} minutes</div>
|
||||
<div class="text lang-de">{{course.properties.course_time}} Minuten</div>
|
||||
<div class="text lang-fr">{{course.properties.course_time}} minutes</div>
|
||||
<div class="text lang-jp">{{course.properties.course_time}} 分</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-content-title">
|
||||
{{ course.name }}
|
||||
</div>
|
||||
|
||||
<div class="card-content-footer">
|
||||
{% capture course_path %}{% route course, id: course.id %}{% endcapture %}
|
||||
<a class="card-btn dark-btn lang-en"
|
||||
{% 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' %}
|
||||
Read now
|
||||
{% elsif category.name == 'Video' %}
|
||||
Watch now
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</a>
|
||||
<a class="card-btn dark-btn lang-de"
|
||||
{% 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' %}
|
||||
Jetzt lesen
|
||||
{% elsif category.name == 'Video' %}
|
||||
Jetzt anschauen
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -17,7 +17,11 @@
|
||||
{% endfor %}
|
||||
</div>
|
||||
<div class="card-detail course-time">
|
||||
{{course.properties.course_time}} minutes
|
||||
<div class="text lang-en">{{course.properties.course_time}} minutes</div>
|
||||
<div class="text lang-de">{{course.properties.course_time}} Minuten</div>
|
||||
<div class="text lang-fr">{{course.properties.course_time}} minutes</div>
|
||||
<div class="text lang-jp">{{course.properties.course_time}} 分</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-content-title">
|
||||
@ -54,6 +58,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>
|
||||
|
||||
@ -2,18 +2,32 @@
|
||||
<div class="filters-container">
|
||||
<div class="filter lang-en" value="Popular">Popular</div>
|
||||
<div class="filter lang-de" value="Popular">Beliebt</div>
|
||||
<div class="filter lang-fr" value="Popular">Populaire</div>
|
||||
<div class="filter lang-jp" value="Popular">人気のコース</div>
|
||||
<div class="filter lang-en" value="Administration">Administration</div>
|
||||
<div class="filter lang-de" value="Administration">Verwaltung</div>
|
||||
<div class="filter lang-fr" value="Administration">Administration</div>
|
||||
<div class="filter lang-jp" value="Administration">管理者</div>
|
||||
<div class="filter lang-en" value="Products" >Products</div>
|
||||
<div class="filter lang-de" value="Products" >Produkte</div>
|
||||
<div class="filter lang-fr" value="Products" >Produits</div>
|
||||
<div class="filter lang-jp" value="Products" >プロダクト</div>
|
||||
<div class="filter lang-en" value="Features" >Features</div>
|
||||
<div class="filter lang-de" value="Features" >Funktionen</div>
|
||||
<div class="filter lang-fr" value="Features" >Fonctionnalités</div>
|
||||
<div class="filter lang-jp" value="Features" >機能</div>
|
||||
</div>
|
||||
<div class="filter-dropdown-container">
|
||||
<div class="text lang-en">Filter by progress:</div>
|
||||
<div class="text lang-de">Nach Fortschritt filtern:</div>
|
||||
<div class="text lang-fr">Filtrer par progression :</div>
|
||||
<div class="text lang-jp">進捗状況で絞り込み：</div>
|
||||
<div class="filter-dropdown-block">
|
||||
Not selected
|
||||
<div class="text lang-en">Not selected</div>
|
||||
<div class="text lang-de">Nicht ausgewählt</div>
|
||||
<div class="text lang-fr">Non sélectionné</div>
|
||||
<div class="text lang-jp">未選択</div>
|
||||
|
||||
<svg width="12" height="9" viewBox="0 0 12 9" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M11.8142 0.52832H10.6423C10.5626 0.52832 10.4876 0.567383 10.4407 0.631445L6.00166 6.7502L1.5626 0.631445C1.51573 0.567383 1.44073 0.52832 1.36104 0.52832H0.189163C0.0876002 0.52832 0.0282252 0.643946 0.0876002 0.726758L5.59698 8.32207C5.79698 8.59707 6.20635 8.59707 6.40479 8.32207L11.9142 0.726758C11.9751 0.643946 11.9157 0.52832 11.8142 0.52832Z" fill="black" fill-opacity="0.25"/>
|
||||
</svg>
|
||||
@ -22,12 +36,20 @@
|
||||
<div class="filter-by-progress-dropdown hidden">
|
||||
<div class="filter-by-progress-option lang-en" value="All courses">All courses</div>
|
||||
<div class="filter-by-progress-option lang-de" value="All courses">Alle Kurse</div>
|
||||
<div class="filter-by-progress-option lang-fr" value="All courses">Tous les cours</div>
|
||||
<div class="filter-by-progress-option lang-jp" value="All courses">すべてのコース</div>
|
||||
<div class="filter-by-progress-option lang-en" value="Not started">Not started</div>
|
||||
<div class="filter-by-progress-option lang-de" value="Not started">Nicht gestartet</div>
|
||||
<div class="filter-by-progress-option lang-fr" value="Not started">Pas commencé</div>
|
||||
<div class="filter-by-progress-option lang-jp" value="Not started">未開始</div>
|
||||
<div class="filter-by-progress-option lang-en" value="In progress">In progress</div>
|
||||
<div class="filter-by-progress-option lang-de" value="In progress">In Arbeit</div>
|
||||
<div class="filter-by-progress-option lang-fr" value="In progress">En cours</div>
|
||||
<div class="filter-by-progress-option lang-jp" value="In progress">学習中</div>
|
||||
<div class="filter-by-progress-option lang-en" value="Completed">Completed</div>
|
||||
<div class="filter-by-progress-option lang-de" value="Completed">Abgeschlossen</div>
|
||||
<div class="filter-by-progress-option lang-fr" value="Completed">Terminé</div>
|
||||
<div class="filter-by-progress-option lang-jp" value="Completed">修了済み</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -0,0 +1,96 @@
|
||||
<div class="carousel-filters">
|
||||
<div class="filters-container">
|
||||
<div class="filter lang-en" value="Popular">Popular</div>
|
||||
<div class="filter lang-de" value="Popular">Beliebt</div>
|
||||
<div class="filter lang-fr" value="Popular">Populaire</div>
|
||||
<div class="filter lang-jp" value="Popular">人気のコース</div>
|
||||
<div class="filter lang-en" value="Administration">Administration</div>
|
||||
<div class="filter lang-de" value="Administration">Verwaltung</div>
|
||||
<div class="filter lang-fr" value="Administration">Administration</div>
|
||||
<div class="filter lang-jp" value="Administration">管理者</div>
|
||||
<div class="filter lang-en" value="Products" >Products</div>
|
||||
<div class="filter lang-de" value="Products" >Produkte</div>
|
||||
<div class="filter lang-fr" value="Products" >Produits</div>
|
||||
<div class="filter lang-jp" value="Products" >プロダクト</div>
|
||||
<div class="filter lang-en" value="Features" >Features</div>
|
||||
<div class="filter lang-de" value="Features" >Funktionen</div>
|
||||
<div class="filter lang-fr" value="Features" >Fonctionnalités</div>
|
||||
<div class="filter lang-jp" value="Features" >機能</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.carousel-filters {
|
||||
background: #EDEDED;
|
||||
border-radius: 8px;
|
||||
padding: 24px 32px;
|
||||
margin-top: 30px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.filters-container {
|
||||
display: flex;
|
||||
gap: 44px;
|
||||
width: 100%;
|
||||
align-items: center;
|
||||
}
|
||||
.filter {
|
||||
font-size: 18px;
|
||||
font-weight: 400;
|
||||
line-height: 27px;
|
||||
color: #0F2B46;
|
||||
text-decoration: underline;
|
||||
cursor: pointer;
|
||||
padding: 5px 10px;
|
||||
}
|
||||
.filter-dropdown-container {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
justify-content: end;
|
||||
width: 100%;
|
||||
max-width: 290px;
|
||||
}
|
||||
|
||||
.filter-dropdown-block {
|
||||
background-color: white;
|
||||
border: 1px solid #ccc;
|
||||
padding: 10px;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
max-width: 150px;
|
||||
width: 100%;
|
||||
border-radius: 12px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.filter-by-progress-dropdown {
|
||||
background-color: white;
|
||||
border: 1px solid #ccc;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
z-index: 1;
|
||||
top: 40px;
|
||||
}
|
||||
|
||||
.filter-by-progress-option {
|
||||
padding: 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.filter-by-progress-option:hover {
|
||||
background-color: #f0f0f0;
|
||||
}
|
||||
|
||||
.hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.filter-active {
|
||||
color: #42A2FF;
|
||||
}
|
||||
</style>
|
||||
@ -2,12 +2,20 @@
|
||||
<div class="filters-container">
|
||||
<div class="filter lang-en" value="Popular">Popular</div>
|
||||
<div class="filter lang-de" value="Popular">Beliebt</div>
|
||||
<div class="filter lang-fr" value="Popular">Populaire</div>
|
||||
<div class="filter lang-jp" value="Popular">人気のコース</div>
|
||||
<div class="filter lang-en" value="Administration">Administration</div>
|
||||
<div class="filter lang-de" value="Administration">Verwaltung</div>
|
||||
<div class="filter lang-fr" value="Administration">Administration</div>
|
||||
<div class="filter lang-jp" value="Administration">管理者</div>
|
||||
<div class="filter lang-en" value="Products" >Products</div>
|
||||
<div class="filter lang-de" value="Products" >Produkte</div>
|
||||
<div class="filter lang-fr" value="Products" >Produits</div>
|
||||
<div class="filter lang-jp" value="Products" >プロダクト</div>
|
||||
<div class="filter lang-en" value="Features" >Features</div>
|
||||
<div class="filter lang-de" value="Features" >Funktionen</div>
|
||||
<div class="filter lang-fr" value="Features" >Fonctionnalités</div>
|
||||
<div class="filter lang-jp" value="Features" >機能</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
@ -0,0 +1,171 @@
|
||||
<div class="overview-container">
|
||||
<div class="overview-header-container">
|
||||
<div class="overview-btn-container">
|
||||
<svg width="16" height="9" viewBox="0 0 16 9" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M16 4.49991L1 4.49991M1 4.49991L4.33417 1.09082M1 4.49991L4.33417 7.909" stroke="#0F2B46" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
<a href="/app/catalog" class="overview-back-btn lang-en">Back to all courses</a>
|
||||
<a href="/app/catalog" class="overview-back-btn lang-de">Zurück zu allen Kursen</a>
|
||||
<a href="/app/catalog" class="overview-back-btn lang-fr">Retour à toutes les formations</a>
|
||||
<a href="/app/catalog" class="overview-back-btn lang-jp">すべてのコースに戻る</a>
|
||||
</div>
|
||||
<div class="overview-heading">
|
||||
{{ course.name }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="overview-content-container">
|
||||
<div class="content-details">
|
||||
<img
|
||||
src="{{ course.image_url }}"
|
||||
class="np-top-image np-top-image-spacing"
|
||||
alt="{{ course.name }}"
|
||||
/>
|
||||
|
||||
{% include "course_description" %}
|
||||
|
||||
<div class="overview-details-container">
|
||||
<div class="overview-detail">
|
||||
<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M40 44.0001L8.00001 44L8.00001 42L40 42.0001L40 44.0001Z" fill="#0F2B46"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M24 36C31.732 36 38 29.732 38 22C38 14.268 31.732 8 24 8C16.268 8 10 14.268 10 22C10 29.732 16.268 36 24 36ZM24 38C32.8366 38 40 30.8366 40 22C40 13.1634 32.8366 6 24 6C15.1634 6 8 13.1634 8 22C8 30.8366 15.1634 38 24 38Z" fill="#0F2B46"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M23 21L23 11L25 11L25 21L23 21Z" fill="#0F2B46"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M26.3397 22.2679L35 27.2679L34 29L25.3397 24L26.3397 22.2679Z" fill="#0F2B46"/>
|
||||
</svg>
|
||||
<div class="detail-content lang-en">
|
||||
{{course.properties.course_time}} minutes
|
||||
</div>
|
||||
<div class="detail-content lang-de">
|
||||
{{course.properties.course_time}} Minuten
|
||||
</div>
|
||||
<div class="detail-content lang-fr">
|
||||
{{course.properties.course_time}} minutes
|
||||
</div>
|
||||
<div class="detail-content lang-jp">
|
||||
{{course.properties.course_time}} 分
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="overview-detail">
|
||||
<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M40 44.0033H8V42.0033H40V44.0033Z" fill="#0F2B46"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M34 23H24V21H34V23Z" fill="#0F2B46"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M19 18H14V16H19V18Z" fill="#0F2B46"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M34 30L24 30V28L34 28V30Z" fill="#0F2B46"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M19 25H14V23H19V25Z" fill="#0F2B46"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M13.2368 4.35388C13.4268 4.12943 13.7059 4 14 4H29C29.5523 4 30 4.44772 30 5V10H28V6H14.4637L10 11.2727V31H19V33H9C8.44772 33 8 32.5523 8 32V10.9062C8 10.6696 8.08389 10.4407 8.23677 10.2601L13.2368 4.35388Z" fill="#0F2B46"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M23.2368 9.35388C23.4268 9.12943 23.7059 9 24 9H39C39.5523 9 40 9.44772 40 10V37C40 37.5523 39.5523 38 39 38H19C18.4477 38 18 37.5523 18 37V15.9062C18 15.6696 18.0839 15.4407 18.2368 15.2601L23.2368 9.35388ZM24.4637 11L20 16.2727V36H38V11H24.4637Z" fill="#0F2B46"/>
|
||||
</svg>
|
||||
<div class="detail-content lang-en">
|
||||
{{course.activities_count}} lessons
|
||||
</div>
|
||||
<div class="detail-content lang-de">
|
||||
{{course.activities_count}} Lektionen
|
||||
</div>
|
||||
<div class="detail-content lang-fr">
|
||||
{{course.activities_count}} Leçons
|
||||
</div>
|
||||
<div class="detail-content lang-jp">
|
||||
{{course.activities_count}} レッスン
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% if course.categories.any? %}
|
||||
{% include "course_categories" %}
|
||||
{% endif %}
|
||||
|
||||
{% if course.instructors.any? %}
|
||||
<div class="np-card-content-divider">
|
||||
{% include "course_instructors" %}
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{% if course.events.any? %}
|
||||
<div class="np-card-content-divider">
|
||||
{% include "course_events" %}
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
<div class="content-activities">
|
||||
<div class="np-top-cta">
|
||||
{% include "course_progress_and_cta" %}
|
||||
</div>
|
||||
{% include "course_outline" %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.overview-back-btn {
|
||||
font-size: 18px;
|
||||
font-weight: 400;
|
||||
line-height: 25.2px;
|
||||
letter-spacing: -0.01em;
|
||||
text-align: center;
|
||||
color: #0F2B46;
|
||||
text-decoration: none;
|
||||
}
|
||||
.overview-btn-container {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
align-items: center;
|
||||
}
|
||||
.overview-heading {
|
||||
font-size: 48px;
|
||||
font-weight: 320;
|
||||
line-height: 50.4px;
|
||||
letter-spacing: -0.015em;
|
||||
color: #0F2B46;
|
||||
}
|
||||
.overview-header-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 30px;
|
||||
}
|
||||
.overview-content-container {
|
||||
display: grid;
|
||||
margin-top: 30px;
|
||||
grid-template-columns: repeat(2,1fr);
|
||||
gap: 70px;
|
||||
}
|
||||
.overview-details-container {
|
||||
display: flex;
|
||||
gap: 30px;
|
||||
}
|
||||
.overview-detail {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 13px;
|
||||
align-items: start;
|
||||
}
|
||||
.detail-content {
|
||||
font-size: 18px;
|
||||
font-weight: 400;
|
||||
line-height: 25.2px;
|
||||
letter-spacing: -0.01em;
|
||||
color: #0F2B46;
|
||||
}
|
||||
.category-item {
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
line-height: 19.6px;
|
||||
letter-spacing: -0.01em;
|
||||
color: #0F2B46;
|
||||
padding: 11px 12px;
|
||||
background: #EDEDED;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.overview-categories-wrapper {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 17px;
|
||||
margin-top: 40px;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 900px) {
|
||||
.overview-content-container {
|
||||
grid-template-columns: repeat(1,1fr);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -4,7 +4,8 @@
|
||||
<svg width="16" height="9" viewBox="0 0 16 9" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M16 4.49991L1 4.49991M1 4.49991L4.33417 1.09082M1 4.49991L4.33417 7.909" stroke="#0F2B46" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
<a href="/app/catalog" class="overview-back-btn">Back to all courses</a>
|
||||
<a href="/app/catalog" class="overview-back-btn lang-en">Back to all courses</a>
|
||||
<a href="/app/catalog" class="overview-back-btn lang-de">Zurück zu allen Kursen</a>
|
||||
</div>
|
||||
<div class="overview-heading">
|
||||
{{ course.name }}
|
||||
@ -29,9 +30,12 @@
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M23 21L23 11L25 11L25 21L23 21Z" fill="#0F2B46"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M26.3397 22.2679L35 27.2679L34 29L25.3397 24L26.3397 22.2679Z" fill="#0F2B46"/>
|
||||
</svg>
|
||||
<div class="detail-content">
|
||||
<div class="detail-content lang-en">
|
||||
{{course.properties.course_time}} minutes
|
||||
</div>
|
||||
<div class="detail-content lang-de">
|
||||
{{course.properties.course_time}} Minuten
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="overview-detail">
|
||||
@ -44,9 +48,12 @@
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M13.2368 4.35388C13.4268 4.12943 13.7059 4 14 4H29C29.5523 4 30 4.44772 30 5V10H28V6H14.4637L10 11.2727V31H19V33H9C8.44772 33 8 32.5523 8 32V10.9062C8 10.6696 8.08389 10.4407 8.23677 10.2601L13.2368 4.35388Z" fill="#0F2B46"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M23.2368 9.35388C23.4268 9.12943 23.7059 9 24 9H39C39.5523 9 40 9.44772 40 10V37C40 37.5523 39.5523 38 39 38H19C18.4477 38 18 37.5523 18 37V15.9062C18 15.6696 18.0839 15.4407 18.2368 15.2601L23.2368 9.35388ZM24.4637 11L20 16.2727V36H38V11H24.4637Z" fill="#0F2B46"/>
|
||||
</svg>
|
||||
<div class="detail-content">
|
||||
<div class="detail-content lang-en">
|
||||
{{course.activities_count}} lessons
|
||||
</div>
|
||||
<div class="detail-content lang-de">
|
||||
{{course.activities_count}} Lektionen
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
@ -0,0 +1,87 @@
|
||||
<div class="np-course-outline">
|
||||
<div class="small-heading lang-en">
|
||||
Course outline
|
||||
</div>
|
||||
<div class="small-heading lang-de">
|
||||
Kursübersicht
|
||||
</div>
|
||||
<div class="small-heading lang-fr">
|
||||
Plan de la formation
|
||||
</div>
|
||||
<div class="small-heading lang-jp">
|
||||
コースの概要
|
||||
</div>
|
||||
</div>
|
||||
<div class="course-outline-content">
|
||||
<ol class="np-course-outline-content-section">
|
||||
{% for section in course.sections %}
|
||||
<li class="np-course-outline-content-section-list">
|
||||
<div class="outline-section-name">
|
||||
{{ section.name }}
|
||||
</div>
|
||||
<ol class="course-outline-content-activity">
|
||||
{% for activity in section.activities %}
|
||||
|
||||
<li class="np-course-outline-content-activity-list">
|
||||
{% if activity.completed? %}
|
||||
<i class="fas fa-circle np-course-outline-content-activity-icon np-button-color"></i>
|
||||
{% if activity.locked? %}
|
||||
{% include "course_activity_locked" %}
|
||||
{% else %}
|
||||
{% include "course_activity_unlocked", class: "course-outline-content-activity-link-completed" %}
|
||||
{% endif %}
|
||||
<div class="np-button-background-color np-course-outline-content-activity-list-bar"></div>
|
||||
{% else %}
|
||||
{% unless activity.locked? %}
|
||||
<i class="far fa-circle np-course-outline-content-activity-icon"></i>
|
||||
{% endunless %}
|
||||
{% if activity.locked? %}
|
||||
{% include "course_activity_locked" %}
|
||||
{% else %}
|
||||
{% include "course_activity_unlocked", class: "course-outline-content-activity-link" %}
|
||||
{% endif %}
|
||||
<div class="np-course-outline-content-activity-list-bar"></div>
|
||||
{% endif %}
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ol>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ol>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.course-outline-content {
|
||||
margin-top: 50px;
|
||||
}
|
||||
.outline-section-name {
|
||||
font-size: 24px;
|
||||
font-weight: 400;
|
||||
line-height: 30px;
|
||||
letter-spacing: -0.015em;
|
||||
color: #0F2B46;
|
||||
}
|
||||
.course-outline-content-activity {
|
||||
padding: 0;
|
||||
}
|
||||
.np-course-outline-content-activity-list {
|
||||
border-bottom: none;
|
||||
|
||||
}
|
||||
.course-outline-content-activity-link {
|
||||
font-size: 18px;
|
||||
font-weight: 400;
|
||||
line-height: 25.2px;
|
||||
letter-spacing: -0.01em;
|
||||
text-align: left;
|
||||
color: #42A2FF;
|
||||
text-decoration: none;
|
||||
margin-left: 20px;
|
||||
}
|
||||
.np-course-outline-content-activity-icon {
|
||||
width: 23px;
|
||||
height: 23px;
|
||||
color: #0F2B46
|
||||
}
|
||||
</style>
|
||||
@ -1,7 +1,11 @@
|
||||
<div class="np-course-outline">
|
||||
<div class="small-heading">
|
||||
<div class="small-heading lang-en">
|
||||
Course outline
|
||||
</div>
|
||||
<div class="small-heading lang-de">
|
||||
Kursübersicht
|
||||
</div>
|
||||
</div>
|
||||
<div class="course-outline-content">
|
||||
<ol class="np-course-outline-content-section">
|
||||
{% for section in course.sections %}
|
||||
|
||||
@ -0,0 +1,86 @@
|
||||
<div class="np-top-cta-progress-content">
|
||||
<div class="small-heading lang-en">
|
||||
Course progress
|
||||
</div>
|
||||
<div class="small-heading lang-de">
|
||||
Kursfortschritt
|
||||
</div>
|
||||
<div class="small-heading lang-en">
|
||||
Progression de la formation
|
||||
</div>
|
||||
<div class="small-heading lang-en">
|
||||
コースの進捗
|
||||
</div>
|
||||
<div class="progress-overview">
|
||||
<div class="np-progress-bar-container">
|
||||
<div
|
||||
style="width: {{ course.progress }}%"
|
||||
class="np-button-background-color np-card-progress-bar">
|
||||
</div>
|
||||
</div>
|
||||
<div class="progress-text">
|
||||
{{ course.progress }}%
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
{% if course.learner_can_retake? %}
|
||||
<form action="{% route course_retake, id: course.id %}" method="POST">
|
||||
{% form_authenticity_token %}
|
||||
<button type="submit" class="np-top-button np-button-font-color np-button np-button-big">
|
||||
{% t .retake, key: current_school.course_vocabulary %}
|
||||
</button>
|
||||
</form>
|
||||
{% else %}
|
||||
<div class="overview-cta-btn-container">
|
||||
<a
|
||||
class="overview-cta-btn"
|
||||
{% if course.enrolled? %}
|
||||
href="{% route course_viewer, course_id: course.id, learning_path_id: params.learning_path_id %}"
|
||||
{% else %}
|
||||
href="{% route course_enrollment, code: course.enrollment_code %}"
|
||||
{% endif %}
|
||||
>
|
||||
{% if course.enrolled? == false %}
|
||||
{% t shared.enroll %}
|
||||
{% elsif course.started? == false %}
|
||||
{% t shared.course.start, key: current_school.course_vocabulary %}
|
||||
{% elsif course.completed? %}
|
||||
{% t shared.course.view, key: current_school.course_vocabulary %}
|
||||
{% else %}
|
||||
{% t shared.continue %}
|
||||
{% endif %}
|
||||
</a>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<style>
|
||||
.progress-text {
|
||||
color: #42A2FF;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
line-height: 19.6px;
|
||||
letter-spacing: -0.01em;
|
||||
}
|
||||
.progress-overview {
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
}
|
||||
.overview-cta-btn {
|
||||
font-size: 18px;
|
||||
font-weight: 400;
|
||||
line-height: 25.2px;
|
||||
letter-spacing: -0.01em;
|
||||
color: #FFFFFF;
|
||||
padding: 7px 18px;
|
||||
background: #0F2B46;
|
||||
border-radius: 40px;
|
||||
text-decoration: none;
|
||||
}
|
||||
.overview-cta-btn-container {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
max-width: 150px;
|
||||
}
|
||||
</style>
|
||||
@ -1,7 +1,10 @@
|
||||
<div class="np-top-cta-progress-content">
|
||||
<div class="small-heading">
|
||||
<div class="small-heading lang-en">
|
||||
Course progress
|
||||
</div>
|
||||
<div class="small-heading lang-de">
|
||||
Kursfortschritt
|
||||
</div>
|
||||
<div class="progress-overview">
|
||||
<div class="np-progress-bar-container">
|
||||
<div
|
||||
@ -74,4 +77,4 @@
|
||||
width: 100%;
|
||||
max-width: 150px;
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
@ -12,92 +12,162 @@
|
||||
<div class="footer-items-wrapper">
|
||||
<div class="footer-item-title lang-en">Resources</div>
|
||||
<div class="footer-item-title lang-de">Ressourcen</div>
|
||||
<div class="footer-item-title lang-jp">資料</div>
|
||||
<div class="footer-item-title lang-fr">Ressources</div>
|
||||
<div class="footer-links-container">
|
||||
<a href="https://support.deepl.com/hc/en-us" target="_blank" class="footer-link lang-en">Help Center</a>
|
||||
<a href="https://support.deepl.com/hc/de" target="_blank" class="footer-link lang-de">Hilfecenter</a>
|
||||
<a href="https://support.deepl.com/hc/jp" target="_blank" class="footer-link lang-jp">ヘルプセンター</a>
|
||||
<a href="https://support.deepl.com/hc/fr" target="_blank" class="footer-link lang-fr">Centre d’assistance</a>
|
||||
<a href="https://www.deepl.com/en/blog" target="_blank" class="footer-link lang-en">Blog</a>
|
||||
<a href="https://www.deepl.com/de/blog" target="_blank" class="footer-link lang-de">Blog</a>
|
||||
<a href="https://www.deepl.com/jp/blog" target="_blank" class="footer-link lang-jp">ブログ</a>
|
||||
<a href="https://www.deepl.com/fr/blog" target="_blank" class="footer-link lang-fr">Blog</a>
|
||||
<a href="https://developers.deepl.com/docs" target="_blank" class="footer-link lang-en">API documentation</a>
|
||||
<a href="https://developers.deepl.com/docs" target="_blank" class="footer-link lang-de">API-Dokumentation</a>
|
||||
<a href="https://developers.deepl.com/docs" target="_blank" class="footer-link lang-jp">API技術資料</a>
|
||||
<a href="https://developers.deepl.com/docs" target="_blank" class="footer-link lang-fr">Documentation API</a>
|
||||
<a href="https://www.deepl.com/en/pro-data-security" target="_blank" class="footer-link lang-en">Data security</a>
|
||||
<a href="https://www.deepl.com/de/pro-data-security" target="_blank" class="footer-link lang-de">Datensicherheit</a>
|
||||
<a href="https://www.deepl.com/jp/pro-data-security" target="_blank" class="footer-link lang-jp">データセキュリティ</a>
|
||||
<a href="https://www.deepl.com/fr/pro-data-security" target="_blank" class="footer-link lang-fr">Protection des données</a>
|
||||
<a href="https://www.deepl.com/en/privacy" target="_blank" class="footer-link lang-en">Privacy policy</a>
|
||||
<a href="https://www.deepl.com/de/privacy" target="_blank" class="footer-link lang-de">Datenschutzerklärung</a>
|
||||
<a href="https://www.deepl.com/jp/privacy" target="_blank" class="footer-link lang-jp">個人情報保護方針</a>
|
||||
<a href="https://www.deepl.com/fr/privacy" target="_blank" class="footer-link lang-fr">Politique de confidentialité</a>
|
||||
<a href="https://www.deepl.com/en/pro-license" target="_blank" class="footer-link lang-en">Terms and conditions</a>
|
||||
<a href="https://www.deepl.com/de/pro-license" target="_blank" class="footer-link lang-de">AGB</a>
|
||||
<a href="https://support.deepl.com/hc/en-us/requests/new?ticket_form_id=13384459519132" target="_blank" class="footer-link lang-en">Cancel subscriptions</a>
|
||||
<a href="https://support.deepl.com/hc/de/requests/new?ticket_form_id=13384459519132" target="_blank" class="footer-link lang-de">Abonnements kündigen</a>
|
||||
<a href="https://www.deepl.com/jp/pro-license" target="_blank" class="footer-link lang-jp">利用規約/a>
|
||||
<a href="https://www.deepl.com/fr/pro-license" target="_blank" class="footer-link lang-fr">Conditions générales</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="footer-items-wrapper">
|
||||
<div class="footer-item-title lang-en">Product</div>
|
||||
<div class="footer-item-title lang-de">Produkte</div>
|
||||
<div class="footer-item-title lang-jp">プロダクト</div>
|
||||
<div class="footer-item-title lang-fr">Produit</div>
|
||||
<div class="footer-links-container">
|
||||
<a href="https://www.deepl.com/en/translator" target="_blank" class="footer-link lang-en">Free translator</a>
|
||||
<a href="https://www.deepl.com/de/translator" target="_blank" class="footer-link lang-de">Kostenloser Übersetzer</a>
|
||||
<a href="https://www.deepl.com/jp/translator" target="_blank" class="footer-link lang-jp">無料版の翻訳ツール</a>
|
||||
<a href="https://www.deepl.com/fr/translator" target="_blank" class="footer-link lang-fr">Traducteur gratuit</a>
|
||||
<a href="https://www.deepl.com/en/features" target="_blank" class="footer-link lang-en">Features</a>
|
||||
<a href="https://www.deepl.com/de/features" target="_blank" class="footer-link lang-de">Features</a>
|
||||
<a href="https://www.deepl.com/jp/features" target="_blank" class="footer-link lang-jp">機能</a>
|
||||
<a href="https://www.deepl.com/fr/features" target="_blank" class="footer-link lang-fr">Fonctionnalités</a>
|
||||
<a href="https://www.deepl.com/en/pro?cta=footer-pro" target="_blank" class="footer-link">DeepL Pro</a>
|
||||
<a href="https://www.deepl.com/en/pro-api" target="_blank" class="footer-link lang-en">Translation API</a>
|
||||
<a href="https://www.deepl.com/de/pro-api" target="_blank" class="footer-link lang-de">API</a>
|
||||
<a href="https://www.deepl.com/jp/pro-api" target="_blank" class="footer-link lang-jp">翻訳用API</a>
|
||||
<a href="https://www.deepl.com/fr/pro-api" target="_blank" class="footer-link lang-fr">API de traduction</a>
|
||||
<a href="https://www.deepl.com/en/write" target="_blank" class="footer-link lang-en">DeepL Write</a>
|
||||
<a href="https://www.deepl.com/de/write" target="_blank" class="footer-link lang-de">DeepL Write</a>
|
||||
<a href="https://www.deepl.com/jp/write" target="_blank" class="footer-link lang-jp">DeepL Write</a>
|
||||
<a href="https://www.deepl.com/fr/write" target="_blank" class="footer-link lang-fr">DeepL Write</a>
|
||||
<a href="https://www.deepl.com/en/write" target="_blank" class="footer-link lang-en">DeepL Voice</a>
|
||||
<a href="https://www.deepl.com/de/write" target="_blank" class="footer-link lang-de">DeepL Voice</a>
|
||||
<a href="https://www.deepl.com/jp/write" target="_blank" class="footer-link lang-de">DeepL Voice</a>
|
||||
<a href="https://www.deepl.com/fr/write" target="_blank" class="footer-link lang-jp">DeepL Voice</a>
|
||||
<a href="https://www.deepl.com/de/write" target="_blank" class="footer-link lang-fr">DeepL Voice</a>
|
||||
<a href="https://www.deepl.com/en/app" target="_blank" class="footer-link lang-en">Apps</a>
|
||||
<a href="https://www.deepl.com/de/app" target="_blank" class="footer-link lang-de">Apps</a>
|
||||
<a href="https://www.deepl.com/jp/app" target="_blank" class="footer-link lang-jp">アプリ</a>
|
||||
<a href="https://www.deepl.com/fr/app" target="_blank" class="footer-link lang-fr">Applications</a>
|
||||
<a href="https://www.deepl.com/en/integrations" target="_blank" class="footer-link lang-en">Integrations</a>
|
||||
<a href="https://www.deepl.com/de/integrations" target="_blank" class="footer-link lang-de">Integrationen</a>
|
||||
<a href="https://www.deepl.com/jp/integrations" target="_blank" class="footer-link lang-jp">連携機能</a>
|
||||
<a href="https://www.deepl.com/fr/integrations" target="_blank" class="footer-link lang-fr">Intégrations</a>
|
||||
<a href="https://www.deepl.com/en/features/document-translation" target="_blank" class="footer-link lang-en">Document translation</a>
|
||||
<a href="https://www.deepl.com/de/features/document-translation" target="_blank" class="footer-link lang-de">Dokumentübersetzung</a>
|
||||
<a href="https://www.deepl.com/jp/features/document-translation" target="_blank" class="footer-link lang-jp">文書翻訳</a>
|
||||
<a href="https://www.deepl.com/fr/features/document-translation" target="_blank" class="footer-link lang-fr">Traduction de documents</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="footer-items-wrapper">
|
||||
<div class="footer-item-title lang-en">Download</div>
|
||||
<div class="footer-item-title lang-de">Downloads</div>
|
||||
<div class="footer-item-title lang-jp">ダウンロード</div>
|
||||
<div class="footer-item-title lang-fr">Télécharger</div>
|
||||
<div class="footer-links-container">
|
||||
<a href="https://www.deepl.com/en/android-app" target="_blank" class="footer-link lang-en">DeepL for Android</a>
|
||||
<a href="https://www.deepl.com/de/android-app" target="_blank" class="footer-link lang-de">DeepL für Android</a>
|
||||
<a href="https://www.deepl.com/jp/android-app" target="_blank" class="footer-link lang-jp">Android版DeepL</a>
|
||||
<a href="https://www.deepl.com/fr/android-app" target="_blank" class="footer-link lang-fr">DeepL pour Android</a>
|
||||
<a href="https://www.deepl.com/en/android-app" target="_blank" class="footer-link lang-en">DeepL for ChromeOS</a>
|
||||
<a href="https://www.deepl.com/de/android-app" target="_blank" class="footer-link lang-de">DeepL für ChromeOS</a>
|
||||
<a href="https://www.deepl.com/jp/android-app" target="_blank" class="footer-link lang-jp">ChromeOS版DeepL</a>
|
||||
<a href="https://www.deepl.com/fr/android-app" target="_blank" class="footer-link lang-fr">DeepL pour ChromeOS</a>
|
||||
<a href="https://www.deepl.com/en/ios-app" target="_blank" class="footer-link lang-en">DeepL for iPhone</a>
|
||||
<a href="https://www.deepl.com/de/ios-app" target="_blank" class="footer-link lang-de">DeepL für iPhone</a>
|
||||
<a href="https://www.deepl.com/jp/ios-app" target="_blank" class="footer-link lang-jp">iPhone版DeepL</a>
|
||||
<a href="https://www.deepl.com/fr/ios-app" target="_blank" class="footer-link lang-fr">DeepL pour iPhone</a>
|
||||
<a href="https://www.deepl.com/en/ios-app" target="_blank" class="footer-link lang-en">DeepL for iPad</a>
|
||||
<a href="https://www.deepl.com/de/ios-app" target="_blank" class="footer-link lang-de">DeepL für iPad</a>
|
||||
<a href="https://www.deepl.com/jp/ios-app" target="_blank" class="footer-link lang-jp">iPad版DeepL</a>
|
||||
<a href="https://www.deepl.com/fr/ios-app" target="_blank" class="footer-link lang-fr">DeepL pour iPad</a>
|
||||
<a href="https://www.deepl.com/en/macos-app" target="_blank" class="footer-link lang-en">DeepL for Mac</a>
|
||||
<a href="https://www.deepl.com/de/macos-app" target="_blank" class="footer-link lang-de">DeepL für Mac</a>
|
||||
<a href="https://www.deepl.com/jp/macos-app" target="_blank" class="footer-link lang-jp">Mac版DeepL</a>
|
||||
<a href="https://www.deepl.com/fr/macos-app" target="_blank" class="footer-link lang-fr">DeepL pour Mac</a>
|
||||
<a href="https://www.deepl.com/en/windows-app" target="_blank" class="footer-link lang-en">DeepL for Windows</a>
|
||||
<a href="https://www.deepl.com/de/windows-app" target="_blank" class="footer-link lang-de">DeepL für Windows</a>
|
||||
<a href="https://www.deepl.com/jp/windows-app" target="_blank" class="footer-link lang-jp">Windows向けのDeepLアプリ</a>
|
||||
<a href="https://www.deepl.com/fr/windows-app" target="_blank" class="footer-link lang-fr">DeepL pour Windows</a>
|
||||
<a href="https://www.deepl.com/en/chrome-extension" target="_blank" class="footer-link lang-en">DeepL Chrome extension</a>
|
||||
<a href="https://www.deepl.com/de/chrome-extension" target="_blank" class="footer-link lang-de">DeepL-Erweiterung für Chrome</a>
|
||||
<a href="https://www.deepl.com/jp/chrome-extension" target="_blank" class="footer-link lang-jp">DeepLのChrome拡張機能</a>
|
||||
<a href="https://www.deepl.com/fr/chrome-extension" target="_blank" class="footer-link lang-fr">Extension DeepL pour Chrome</a>
|
||||
<a href="https://www.deepl.com/en/edge-extension" target="_blank" class="footer-link lang-en">DeepL Edge extension</a>
|
||||
<a href="https://www.deepl.com/de/edge-extension" target="_blank" class="footer-link lang-de">DeepL-Erweiterung für Edge</a>
|
||||
<a href="https://www.deepl.com/jp/edge-extension" target="_blank" class="footer-link lang-jp">DeepLのEdge拡張機能</a>
|
||||
<a href="https://www.deepl.com/fr/edge-extension" target="_blank" class="footer-link lang-fr">Extension DeepL pour Edge</a>
|
||||
<a href="https://www.deepl.com/en/firefox-extension" target="_blank" class="footer-link lang-en">DeepL Firefox extension</a>
|
||||
<a href="https://www.deepl.com/de/firefox-extension" target="_blank" class="footer-link lang-de">DeepL-Erweiterung für Firefox</a>
|
||||
<a href="https://www.deepl.com/jp/firefox-extension" target="_blank" class="footer-link lang-jp">DeepLのFirefox拡張機能n</a>
|
||||
<a href="https://www.deepl.com/fr/firefox-extension" target="_blank" class="footer-link lang-fr">Extension DeepL pour Firefox</a>
|
||||
<a href="https://www.deepl.com/en/word-addin" target="_blank" class="footer-link lang-en">DeepL in Microsoft Word</a>
|
||||
<a href="https://www.deepl.com/de/word-addin" target="_blank" class="footer-link lang-de">DeepL für Microsoft Word</a>
|
||||
<a href="https://www.deepl.com/jp/word-addin" target="_blank" class="footer-link lang-jp">Microsoft Word版DeepL</a>
|
||||
<a href="https://www.deepl.com/fr/word-addin" target="_blank" class="footer-link lang-fr">DeepL dans Microsoft Word</a>
|
||||
<a href="https://www.deepl.com/en/integrations/outlook-addin" target="_blank" class="footer-link lang-en">DeepL for Microsoft Outlook</a>
|
||||
<a href="https://www.deepl.com/de/integrations/outlook-addin" target="_blank" class="footer-link lang-de">DeepL für Microsoft Outlook</a>
|
||||
<a href="https://www.deepl.com/jp/integrations/outlook-addin" target="_blank" class="footer-link lang-jp">Microsoft Outlook版DeepL</a>
|
||||
<a href="https://www.deepl.com/fr/integrations/outlook-addin" target="_blank" class="footer-link lang-fr">DeepL pour Microsoft Outlook</a>
|
||||
<a href="https://www.deepl.com/en/integrations/powerpoint-addin" target="_blank" class="footer-link lang-en">DeepL for Microsoft Powerpoint</a>
|
||||
<a href="https://www.deepl.com/de/integrations/powerpoint-addin" target="_blank" class="footer-link lang-de">DeepL für Microsoft PowerPoint</a>
|
||||
<a href="https://www.deepl.com/jp/integrations/powerpoint-addin" target="_blank" class="footer-link lang-jp">Microsoft PowerPoint版DeepL</a>
|
||||
<a href="https://www.deepl.com/fr/integrations/powerpoint-addin" target="_blank" class="footer-link lang-fr">DeepL pour Microsoft PowerPoint</a>
|
||||
<a href="https://www.deepl.com/en/google-workspace" target="_blank" class="footer-link lang-en">DeepL for Google Workspace</a>
|
||||
<a href="https://www.deepl.com/de/google-workspace" target="_blank" class="footer-link lang-de">DeepL für Google Workspace</a>
|
||||
<a href="https://www.deepl.com/jp/google-workspace" target="_blank" class="footer-link lang-jp">Google Workspace版DeepL</a>
|
||||
<a href="https://www.deepl.com/fr/google-workspace" target="_blank" class="footer-link lang-fr">DeepL pour Google Workspace</a>
|
||||
<a href="https://www.deepl.com/en/microsoft-365" target="_blank" class="footer-link lang-en">DeepL for Microsoft 365</a>
|
||||
<a href="https://www.deepl.com/de/microsoft-365" target="_blank" class="footer-link lang-en">DeepL für Microsoft 365</a>
|
||||
<a href="https://www.deepl.com/jp/microsoft-365" target="_blank" class="footer-link lang-jp">Microsoft 365版DeepL</a>
|
||||
<a href="https://www.deepl.com/fr/microsoft-365" target="_blank" class="footer-link lang-fr">DeepL pour Microsoft 365</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="footer-items-wrapper">
|
||||
<div class="footer-item-title lang-en">Company</div>
|
||||
<div class="footer-item-title lang-de">Unternehmen</div>
|
||||
<div class="footer-item-title lang-jp">DeepLについて</div>
|
||||
<div class="footer-item-title lang-fr">Entreprise</div>
|
||||
<div class="footer-links-container">
|
||||
<a href="https://www.deepl.com/en/contact-us" target="_blank" class="footer-link lang-en">Contact Sales</a>
|
||||
<a href="https://www.deepl.com/de/contact-us" target="_blank" class="footer-link lang-de">Sales-Team kontaktieren</a>
|
||||
<a href="https://www.deepl.com/jp/contact-us" target="_blank" class="footer-link lang-jp">今すぐお問合せ（法人利用）</a>
|
||||
<a href="https://www.deepl.com/fr/contact-us" target="_blank" class="footer-link lang-fr">Contacter notre équipe de vente</a>
|
||||
<a href="https://www.deepl.com/en/press" target="_blank" class="footer-link lang-en">Press</a>
|
||||
<a href="https://www.deepl.com/de/press" target="_blank" class="footer-link lang-de">Presse</a>
|
||||
<a href="https://www.deepl.com/jp/press" target="_blank" class="footer-link lang-jp">ニュースリリース</a>
|
||||
<a href="https://www.deepl.com/fr/press" target="_blank" class="footer-link lang-fr">Presse</a>
|
||||
<a href="https://www.deepl.com/en/careers" target="_blank" class="footer-link lang-en">Careers</a>
|
||||
<a href="https://www.deepl.com/de/careers" target="_blank" class="footer-link lang-de">Karriere</a>
|
||||
<a href="https://www.deepl.com/jp/careers" target="_blank" class="footer-link lang-jp">採用情報</a>
|
||||
<a href="https://www.deepl.com/fr/careers" target="_blank" class="footer-link lang-fr">Emplois</a>
|
||||
<a href="https://www.deepl.com/en/publisher" target="_blank" class="footer-link lang-en">Publisher</a>
|
||||
<a href="https://www.deepl.com/de/publisher" target="_blank" class="footer-link lang-de">Impressum</a>
|
||||
<a href="https://www.deepl.com/jp/publisher" target="_blank" class="footer-link lang-jp">会社概要</a>
|
||||
<a href="https://www.deepl.com/fr/publisher" target="_blank" class="footer-link lang-fr">Mentions légales</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -0,0 +1,31 @@
|
||||
{% styles default %}
|
||||
{% styles colors %}
|
||||
{% styles custom %}
|
||||
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.css" integrity="sha512-wR4oNhLBHf7smjy0K4oqzdWumd+r5/+6QO/vDda76MW5iug4PT7v86FoEkySIJft3XA0Ae6axhIvHrqwm793Nw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
|
||||
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js" type="text/javascript"></script>
|
||||
|
||||
<script>
|
||||
function changeLangText() {
|
||||
const searchInput = document.querySelector('.search-input');
|
||||
const selectedLang = localStorage.getItem("userLanguage");
|
||||
|
||||
console.log(selectedLang);
|
||||
|
||||
if (selectedLang === 'de') {
|
||||
searchInput.placeholder = "Suche";
|
||||
|
||||
if (selectedLang === 'fr') {
|
||||
searchInput.placeholder = "Rechercher";
|
||||
|
||||
if (selectedLang === 'jp') {
|
||||
searchInput.placeholder = "検索";
|
||||
}
|
||||
}
|
||||
addEventListener("DOMContentLoaded", (event) => {
|
||||
changeLangText()
|
||||
});
|
||||
|
||||
</script>
|
||||
@ -42,24 +42,49 @@
|
||||
<a href="/app/learning_paths" id="lp" class="navigation-item lang-de">
|
||||
Lernpfade
|
||||
</a>
|
||||
<a href="/app/learning_paths" id="lp" class="navigation-item lang-jp">
|
||||
学習プログラム
|
||||
</a>
|
||||
<a href="/app/learning_paths" id="lp" class="navigation-item lang-fr">
|
||||
Parcours d’apprentissage
|
||||
</a>
|
||||
<a href="/app/catalog" id="courses" class="navigation-item lang-en">
|
||||
Courses
|
||||
</a>
|
||||
<a href="/app/catalog" id="courses" class="navigation-item lang-de">
|
||||
Kurse
|
||||
</a>
|
||||
<a href="/app/catalog" id="courses" class="navigation-item lang-jp">
|
||||
レース
|
||||
</a>
|
||||
<a href="/app/catalog" id="courses" class="navigation-item lang-fr">
|
||||
Races
|
||||
</a>
|
||||
|
||||
<a href="/app/training_events" id="webinars" class="navigation-item lang-en">
|
||||
Webinars
|
||||
</a>
|
||||
<a href="/app/training_events" id="webinars" class="navigation-item lang-de">
|
||||
Webinare
|
||||
</a>
|
||||
<a href="/app/training_events" id="webinars" class="navigation-item lang-jp">
|
||||
ウェビナー
|
||||
</a>
|
||||
<a href="/app/training_events" id="webinars" class="navigation-item lang-fr">
|
||||
Webinaires
|
||||
</a>
|
||||
<a href="/app/resources" id="resources" class="navigation-item lang-en">
|
||||
Resources
|
||||
</a>
|
||||
<a href="/app/resources" id="resources" class="navigation-item lang-de">
|
||||
Ressourcen
|
||||
</a>
|
||||
<a href="/app/resources" id="resources" class="navigation-item lang-jp">
|
||||
資料
|
||||
</a>
|
||||
<a href="/app/resources" id="resources" class="navigation-item lang-fr">
|
||||
Ressources
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
@ -4,7 +4,10 @@
|
||||
<svg width="16" height="9" viewBox="0 0 16 9" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M16 4.49991L1 4.49991M1 4.49991L4.33417 1.09082M1 4.49991L4.33417 7.909" stroke="#0F2B46" stroke-linejoin="round"></path>
|
||||
</svg>
|
||||
<a href="/app/learning_paths" class="overview-back-btn">Back to all learning paths</a>
|
||||
<a href="/app/learning_paths" class="overview-back-btn lang-en">Back to all learning paths</a>
|
||||
<a href="/app/learning_paths" class="overview-back-btn lang-de">Zurück zu allen Lernpfaden</a>
|
||||
<a href="/app/learning_paths" class="overview-back-btn lang-jp">Bすべての学習プログラムに戻る</a>
|
||||
<a href="/app/learning_paths" class="overview-back-btn lang-fr">Retour à tous les parcours d’apprentissage</a>
|
||||
</div>
|
||||
<div class="overview-heading">
|
||||
{{ learning_path.name }}
|
||||
|
||||
@ -1,7 +1,16 @@
|
||||
{% if learning_path.enrolled? %}
|
||||
<div class="np-top-cta-progress-content">
|
||||
<div class="small-heading">
|
||||
{% t .progress %}
|
||||
<div class="small-heading lang-en">
|
||||
Learning path progress
|
||||
</div>
|
||||
<div class="small-heading lang-de">
|
||||
Lernpfadfortschritt
|
||||
</div>
|
||||
<div class="small-heading lang-jp">
|
||||
学習プログラムの進捗
|
||||
</div>
|
||||
<div class="small-heading lang-fr">
|
||||
Progression du parcours d’apprentissage
|
||||
</div>
|
||||
<div class="progress-overview">
|
||||
<div class="np-progress-bar-container">
|
||||
|
||||
@ -5,6 +5,12 @@
|
||||
<div class="heading lang-de">
|
||||
Entdecken Sie unsere beliebtesten Kurse
|
||||
</div>
|
||||
<div class="heading lang-jp">
|
||||
人気のコースを見る
|
||||
</div>
|
||||
<div class="heading lang-fr">
|
||||
Découvrez nos formations les plus populaires
|
||||
</div>
|
||||
|
||||
<div class="carousel-filters-wrapper">
|
||||
{% include 'carousel-filters' %}
|
||||
|
||||
@ -2,10 +2,16 @@
|
||||
|
||||
<div class="recommended-wrapper" id="recommended-section">
|
||||
<div class="heading lang-en">
|
||||
Recommended for you
|
||||
Get your DeepL certificate
|
||||
</div>
|
||||
<div class="heading lang-de">
|
||||
Für Sie empfohlen
|
||||
Erwerben Sie Ihr DeepL-Zertifikat
|
||||
</div>
|
||||
<div class="heading lang-jp">
|
||||
DeepLの修了証発行コース
|
||||
</div>
|
||||
<div class="heading lang-fr">
|
||||
Obtenez votre certificat DeepL
|
||||
</div>
|
||||
|
||||
<div class="recommended-wrapper-content">
|
||||
|
||||
@ -0,0 +1,104 @@
|
||||
<div class="carousel-filters">
|
||||
<div class="filters-container">
|
||||
<div class="filter lang-en" value="Administration">Administration</div>
|
||||
<div class="filter lang-de" value="Administration">Verwaltung</div>
|
||||
<div class="filter lang-fr" value="Administration">Administration</div>
|
||||
<div class="filter lang-jp" value="Administration">管理者</div>
|
||||
<div class="filter lang-en" value="Translator">Translator</div>
|
||||
<div class="filter lang-de" value="Translator">Übersetzer</div>
|
||||
<div class="filter lang-fr" value="Translator">Translator</div>
|
||||
<div class="filter lang-jp" value="Translator">Translator</div>
|
||||
<div class="filter lang-en" value="Glossaries" >Glossaries</div>
|
||||
<div class="filter lang-de" value="Glossaries" >Glossare</div>
|
||||
<div class="filter lang-fr" value="Glossaries" >Glossare</div>
|
||||
<div class="filter lang-jp" value="Glossaries" >Glossare</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" >Dokumentübersetzung</div>
|
||||
<div class="filter lang-jp" value="Document translation" >Dokumentübersetzung</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>
|
||||
<div class="filter lang-fr" value="Extensions and integrations" >Extensions and integrations</div>
|
||||
<div class="filter lang-jp" value="Extensions and integrations" >Extensions and integrations</div>
|
||||
<div class="filter" value="Write" >Write</div>
|
||||
<div class="filter" value="Voice">Voice</div>
|
||||
<div class="filter" value="API" >API</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.carousel-filters {
|
||||
background: #EDEDED;
|
||||
border-radius: 8px;
|
||||
padding: 24px 32px;
|
||||
margin-top: 30px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.filters-container {
|
||||
display: flex;
|
||||
gap: 44px;
|
||||
width: 100%;
|
||||
align-items: center;
|
||||
}
|
||||
.filter {
|
||||
font-size: 18px;
|
||||
font-weight: 400;
|
||||
line-height: 27px;
|
||||
color: #0F2B46;
|
||||
text-decoration: underline;
|
||||
cursor: pointer;
|
||||
padding: 5px 10px;
|
||||
}
|
||||
.filter-dropdown-container {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
justify-content: end;
|
||||
width: 100%;
|
||||
max-width: 290px;
|
||||
}
|
||||
|
||||
.filter-dropdown-block {
|
||||
background-color: white;
|
||||
border: 1px solid #ccc;
|
||||
padding: 10px;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
max-width: 150px;
|
||||
width: 100%;
|
||||
border-radius: 12px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.filter-by-progress-dropdown {
|
||||
background-color: white;
|
||||
border: 1px solid #ccc;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
z-index: 1;
|
||||
top: 40px;
|
||||
}
|
||||
|
||||
.filter-by-progress-option {
|
||||
padding: 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.filter-by-progress-option:hover {
|
||||
background-color: #f0f0f0;
|
||||
}
|
||||
|
||||
.hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.filter-active {
|
||||
color: #42A2FF;
|
||||
}
|
||||
</style>
|
||||
@ -2,15 +2,25 @@
|
||||
<div class="filters-container">
|
||||
<div class="filter lang-en" value="Administration">Administration</div>
|
||||
<div class="filter lang-de" value="Administration">Verwaltung</div>
|
||||
<div class="filter lang-fr" value="Administration">Administration</div>
|
||||
<div class="filter lang-jp" value="Administration">管理者</div>
|
||||
<div class="filter lang-en" value="Translator">Translator</div>
|
||||
<div class="filter lang-de" value="Translator">Übersetzer</div>
|
||||
<div class="filter lang-fr" value="Translator">Traducteur</div>
|
||||
<div class="filter lang-jp" value="Translator">DeepL翻訳</div>
|
||||
<div class="filter lang-en" value="Glossaries" >Glossaries</div>
|
||||
<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" 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>
|
||||
<div class="filter lang-fr" value="Extensions and integrations" >Extensions et intégrations</div>
|
||||
<div class="filter lang-jp" value="Extensions and integrations" >機能拡張と連携</div>
|
||||
<div class="filter" value="Write" >Write</div>
|
||||
<div class="filter" value="Voice">Voice</div>
|
||||
<div class="filter" value="API" >API</div>
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
<div class="np-card np-search-result">
|
||||
{% if result.type == 'course' %}
|
||||
<div class="np-card np-search-result" language="{% if result.name contains '[DE]' %}de{% elsif result.name contains '[EN]' %}en{% endif %}">
|
||||
<div class="np-card-container">
|
||||
<div class="np-card-content">
|
||||
<img
|
||||
@ -8,7 +9,7 @@
|
||||
/>
|
||||
<div class="np-search-result-content">
|
||||
<div>
|
||||
<a class="np-search-result-title" href="{{ result.path }}">
|
||||
<a class="np-search-result-title result-name" href="{{ result.path }}">
|
||||
{{ result.name }}
|
||||
</a>
|
||||
</div>
|
||||
@ -17,3 +18,4 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
@ -0,0 +1,149 @@
|
||||
<div class="recommended-wrapper">
|
||||
<div class="heading lang-en">
|
||||
Your courses
|
||||
</div>
|
||||
<div class="heading lang-de">
|
||||
Ihre Kurse
|
||||
</div>
|
||||
<div class="heading lang-fr">
|
||||
Vos formations
|
||||
</div>
|
||||
<div class="heading lang-jp">
|
||||
あなたのコース
|
||||
</div>
|
||||
|
||||
<div class="carousel-wrapper your-course-carousel">
|
||||
{% for course in courses.enrolled %}
|
||||
{% if course.progress > 0 %}
|
||||
{% unless course.properties.resource == true %}
|
||||
{% if course.properties.language == userLanguage %}
|
||||
<div class="carousel-card">
|
||||
{% include "cards_course" %}
|
||||
</div>
|
||||
{% endif %}
|
||||
{% endunless %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.your-course-carousel {
|
||||
position: relative;
|
||||
}
|
||||
.slick-arrow {
|
||||
position: absolute;
|
||||
top: -30px;
|
||||
z-index: 111;
|
||||
cursor: pointer;
|
||||
}
|
||||
.right-arrow {
|
||||
margin-left: 30px;
|
||||
}
|
||||
.slick-dots button {
|
||||
display: block;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
padding: 0;
|
||||
border: none;
|
||||
border-radius: 1px;
|
||||
background: #8878FF;
|
||||
text-indent: -9999px;
|
||||
}
|
||||
.slick-dots {
|
||||
list-style-type: none;
|
||||
}
|
||||
.slick-dots {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin: 0;
|
||||
padding-top: 3rem;
|
||||
list-style-type: none;
|
||||
gap: 10px;
|
||||
}
|
||||
.slick-dots li {
|
||||
margin: 0 0.25rem;
|
||||
}
|
||||
.slick-dots li.slick-active button {
|
||||
background: #6CF1C9;
|
||||
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
$(document).ready(function(){
|
||||
|
||||
$(".your-course-carousel").slick({
|
||||
slidesToShow: 4,
|
||||
slidesToScroll: 4,
|
||||
prevArrow: '<i class="fal fa-chevron-left left-arrow"></i>',
|
||||
nextArrow: '<i class="fal fa-chevron-right right-arrow"></i>',
|
||||
infinite: false,
|
||||
dots: true,
|
||||
responsive: [
|
||||
{
|
||||
breakpoint: 1170,
|
||||
settings: {
|
||||
slidesToShow: 2,
|
||||
slidesToScroll: 2,
|
||||
}
|
||||
},
|
||||
{
|
||||
breakpoint: 768,
|
||||
settings: {
|
||||
slidesToShow: 1,
|
||||
slidesToScroll: 1,
|
||||
}
|
||||
}
|
||||
]
|
||||
});
|
||||
|
||||
let selectedCategory = null;
|
||||
let selectedProgress = null;
|
||||
|
||||
function filterCards() {
|
||||
$(".popular-carousel").slick('slickUnfilter');
|
||||
|
||||
let filterFunction = function() {
|
||||
const card = $(this).find('.card');
|
||||
const cardCategories = card.attr('categories').split(',').map(c => c.trim());
|
||||
const cardProgress = card.attr('progress');
|
||||
|
||||
let showByCategory = !selectedCategory || cardCategories.includes(selectedCategory);
|
||||
let showByProgress = !selectedProgress || selectedProgress === 'All courses' || cardProgress === selectedProgress;
|
||||
|
||||
return showByCategory && showByProgress;
|
||||
};
|
||||
|
||||
$(".popular-carousel").slick('slickFilter', filterFunction);
|
||||
}
|
||||
|
||||
$('.filter').on('click', function() {
|
||||
let clickedCategory = $(this).attr('value');
|
||||
|
||||
if (selectedCategory === clickedCategory) {
|
||||
selectedCategory = null;
|
||||
$(this).removeClass('filter-active');
|
||||
} else {
|
||||
selectedCategory = clickedCategory;
|
||||
$('.filter').removeClass('filter-active');
|
||||
$(this).addClass('filter-active');
|
||||
}
|
||||
|
||||
filterCards();
|
||||
});
|
||||
|
||||
$('.filter-by-progress-option').on('click', function() {
|
||||
let clickedProgress = $(this).attr('value');
|
||||
|
||||
if (selectedProgress === clickedProgress) {
|
||||
selectedProgress = null;
|
||||
} else {
|
||||
selectedProgress = clickedProgress;
|
||||
}
|
||||
|
||||
filterCards();
|
||||
});
|
||||
});
|
||||
</script>
|
||||
@ -5,6 +5,12 @@
|
||||
<div class="heading lang-de">
|
||||
Ihre Kurse
|
||||
</div>
|
||||
<div class="heading lang-fr">
|
||||
Vos formations
|
||||
</div>
|
||||
<div class="heading lang-jp">
|
||||
あなたのコース
|
||||
</div>
|
||||
|
||||
<div class="carousel-wrapper your-course-carousel">
|
||||
{% for course in courses.enrolled %}
|
||||
|
||||
@ -0,0 +1,149 @@
|
||||
<div class="recommended-wrapper">
|
||||
<div class="heading lang-en">
|
||||
Your learning paths
|
||||
</div>
|
||||
<div class="heading lang-de">
|
||||
Ihre Lernpfade
|
||||
</div>
|
||||
<div class="heading lang-fr">
|
||||
Vos parcours d’apprentissage
|
||||
</div>
|
||||
<div class="heading lang-jp">
|
||||
あなたの学習プログラム
|
||||
</div>
|
||||
|
||||
<div class="carousel-wrapper your-lp-carousel">
|
||||
{% for learning_path in learning_paths.enrolled %}
|
||||
{% if learning_path.progress > 0 %}
|
||||
{% for category in learning_path.categories %}
|
||||
{% if category.name == userLanguage %}
|
||||
<div class="carousel-card">
|
||||
{% include "cards_learning_path" %}
|
||||
</div>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.your-lp-carousel {
|
||||
position: relative;
|
||||
}
|
||||
.slick-arrow {
|
||||
position: absolute;
|
||||
top: -30px;
|
||||
z-index: 111;
|
||||
cursor: pointer;
|
||||
}
|
||||
.right-arrow {
|
||||
margin-left: 30px;
|
||||
}
|
||||
.slick-dots button {
|
||||
display: block;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
padding: 0;
|
||||
border: none;
|
||||
border-radius: 1px;
|
||||
background: #8878FF;
|
||||
text-indent: -9999px;
|
||||
}
|
||||
.slick-dots {
|
||||
list-style-type: none;
|
||||
}
|
||||
.slick-dots {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin: 0;
|
||||
padding-top: 3rem;
|
||||
list-style-type: none;
|
||||
gap: 10px;
|
||||
}
|
||||
.slick-dots li {
|
||||
margin: 0 0.25rem;
|
||||
}
|
||||
.slick-dots li.slick-active button {
|
||||
background: #6CF1C9;
|
||||
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
$(document).ready(function(){
|
||||
|
||||
$(".your-lp-carousel").slick({
|
||||
slidesToShow: 4,
|
||||
slidesToScroll: 4,
|
||||
prevArrow: '<i class="fal fa-chevron-left left-arrow"></i>',
|
||||
nextArrow: '<i class="fal fa-chevron-right right-arrow"></i>',
|
||||
infinite: false,
|
||||
dots: true,
|
||||
responsive: [
|
||||
{
|
||||
breakpoint: 1170,
|
||||
settings: {
|
||||
slidesToShow: 2,
|
||||
slidesToScroll: 2,
|
||||
}
|
||||
},
|
||||
{
|
||||
breakpoint: 768,
|
||||
settings: {
|
||||
slidesToShow: 1,
|
||||
slidesToScroll: 1,
|
||||
}
|
||||
}
|
||||
]
|
||||
});
|
||||
|
||||
let selectedCategory = null;
|
||||
let selectedProgress = null;
|
||||
|
||||
function filterCards() {
|
||||
$(".popular-carousel").slick('slickUnfilter');
|
||||
|
||||
let filterFunction = function() {
|
||||
const card = $(this).find('.card');
|
||||
const cardCategories = card.attr('categories').split(',').map(c => c.trim());
|
||||
const cardProgress = card.attr('progress');
|
||||
|
||||
let showByCategory = !selectedCategory || cardCategories.includes(selectedCategory);
|
||||
let showByProgress = !selectedProgress || selectedProgress === 'All courses' || cardProgress === selectedProgress;
|
||||
|
||||
return showByCategory && showByProgress;
|
||||
};
|
||||
|
||||
$(".popular-carousel").slick('slickFilter', filterFunction);
|
||||
}
|
||||
|
||||
$('.filter').on('click', function() {
|
||||
let clickedCategory = $(this).attr('value');
|
||||
|
||||
if (selectedCategory === clickedCategory) {
|
||||
selectedCategory = null;
|
||||
$(this).removeClass('filter-active');
|
||||
} else {
|
||||
selectedCategory = clickedCategory;
|
||||
$('.filter').removeClass('filter-active');
|
||||
$(this).addClass('filter-active');
|
||||
}
|
||||
|
||||
filterCards();
|
||||
});
|
||||
|
||||
$('.filter-by-progress-option').on('click', function() {
|
||||
let clickedProgress = $(this).attr('value');
|
||||
|
||||
if (selectedProgress === clickedProgress) {
|
||||
selectedProgress = null;
|
||||
} else {
|
||||
selectedProgress = clickedProgress;
|
||||
}
|
||||
|
||||
filterCards();
|
||||
});
|
||||
});
|
||||
</script>
|
||||
@ -5,6 +5,12 @@
|
||||
<div class="heading lang-de">
|
||||
Ihre Lernpfade
|
||||
</div>
|
||||
<div class="heading lang-fr">
|
||||
Vos parcours d’apprentissage
|
||||
</div>
|
||||
<div class="heading lang-jp">
|
||||
あなたの学習プログラム
|
||||
</div>
|
||||
|
||||
<div class="carousel-wrapper your-lp-carousel">
|
||||
{% for learning_path in learning_paths.enrolled %}
|
||||
|
||||
@ -0,0 +1,29 @@
|
||||
{% assign enrolled_courses = 0 %}
|
||||
{% for course in courses.enrolled %}
|
||||
{% if course.progress > 0 %}
|
||||
{% assign enrolled_courses = enrolled_courses | plus: 1 %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
{% include "header" %}
|
||||
<div class="page-hero-container">
|
||||
<div class="hero-text-wrapper">
|
||||
<div class="hero-heading lang-en">Courses</div>
|
||||
<div class="hero-heading lang-de">Kurse</div>
|
||||
<div class="hero-heading lang-fr">Formations</div>
|
||||
<div class="hero-heading lang-jp">コース</div>
|
||||
<div class="hero-desc lang-en">The full collection of our courses, organized by theme and popularity.<br>Pick a topic and become a true DeepL expert.</div>
|
||||
<div class="hero-desc lang-de">Die komplette Sammlung unserer Kurse, geordnet nach Themen und Beliebtheit.<br>Wählen Sie ein Thema und werden Sie ein echter DeepL-Experte.</div>
|
||||
<div class="hero-desc lang-fr">Découvrez toutes nos formations, classées en fonction de leur thème et de leur popularité. <br>Choisissez un sujet et maîtrisez peu à peu DeepL à la perfection.</div>
|
||||
<div class="hero-desc lang-jp">全コースをここで確認できます。人気のコースやテーマ別にまとめられています。<br>テーマを選んでDeepLの活用方法をマスターしましょう。</div>
|
||||
</div>
|
||||
<div class="np-homepage-featured np-max-width page-spacing">
|
||||
{% if enrolled_courses > 0 %}
|
||||
<section>
|
||||
{% include "your_courses" %}
|
||||
</section>
|
||||
{% endif %}
|
||||
<section>
|
||||
{% include "all_courses" %}
|
||||
</section>
|
||||
</div>
|
||||
{% include "footer" %}
|
||||
@ -10,7 +10,7 @@
|
||||
<div class="hero-heading lang-en">Courses</div>
|
||||
<div class="hero-heading lang-de">Kurse</div>
|
||||
<div class="hero-desc lang-en">The full collection of our courses, organized by theme and popularity.<br>Pick a topic and become a true DeepL expert.</div>
|
||||
<div class="hero-desc lang-de">Die komplette Sammlung unserer Kurse, geordnet nach Themen und Beliebtheit.<br>Wählen Sie ein Thema und werden Sie ein echter DeepL Experte.</div>
|
||||
<div class="hero-desc lang-de">Die komplette Sammlung unserer Kurse, geordnet nach Themen und Beliebtheit.<br>Wählen Sie ein Thema und werden Sie ein echter DeepL-Experte.</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="np-homepage-featured np-max-width page-spacing">
|
||||
|
||||
@ -37,19 +37,33 @@
|
||||
<div class="hero-heading lang-de">
|
||||
Hallo {% if current_person.first_name %}
|
||||
{{ current_person.first_name }}!
|
||||
{% else %}
|
||||
there!
|
||||
{% endif %}
|
||||
</div>
|
||||
<div class="hero-heading lang-jp">
|
||||
こんにちは!
|
||||
</div>
|
||||
<div class="hero-heading lang-fr">
|
||||
Bonjour {% if current_person.first_name %}
|
||||
{{ current_person.first_name }}!
|
||||
{% endif %}
|
||||
</div>
|
||||
<div class="hero-subheading lang-en">
|
||||
Welcome to the DeepL Academy, your one-stop hub to master</br>all products and features on our Language AI platform.
|
||||
Welcome to the DeepL Academy, your one-stop hub to master<br>all products and features on our Language AI platform.</br>
|
||||
</div>
|
||||
<div class="hero-subheading lang-de">
|
||||
Willkommen bei der DeepL Academy. Dies ist Ihre zentrale Anlaufstelle<br> für alle Produkte und Funktionen unserer Sprach-KI-Plattform.</br>
|
||||
Willkommen bei der DeepL Academy. Dies ist Ihre zentrale Anlaufstelle<br> für alle Produkte und Funktionen unserer KI‑Sprachtechnologie.</br>
|
||||
</div>
|
||||
<div class="hero-subheading lang-jp">
|
||||
DeepLアカデミーへようこそ。DeepLの言語AI<br>プラットフォームについて、すべてここから学べます。</br>
|
||||
</div>
|
||||
<div class="hero-subheading lang-fr">
|
||||
Bienvenue dans la DeepL Academy, votre espace de référence pour maîtriser<br> tous les produits et fonctionnalités de notre plateforme d’IA linguistique.</br>
|
||||
</div>
|
||||
<div class="hero-buttons-wrapper">
|
||||
<a href="#recommended-section" class="dark-btn lang-en">Start learning</a>
|
||||
<a href="#recommended-section" class="dark-btn lang-de">Mit dem Lernen beginnen</a>
|
||||
<a href="#recommended-section" class="dark-btn lang-jp">今すぐ開始</a>
|
||||
<a href="#recommended-section" class="dark-btn lang-fr">Commencer</a>
|
||||
</div>
|
||||
|
||||
<div class="progress-wrapper">
|
||||
@ -58,18 +72,24 @@
|
||||
<span>{{courses_in_progress}}</span>
|
||||
<span class="lang-en">in progress</span>
|
||||
<span class="lang-de">In Arbeit</span>
|
||||
<span class="lang-jp">学習中</span>
|
||||
<span class="lang-fr">En cours</span>
|
||||
</div>
|
||||
<div class="progress border-right">
|
||||
<i class="fas fa-circle completed-circle"></i>
|
||||
<span>{{courses_completed}}</span>
|
||||
<span class="lang-en">completed</span>
|
||||
<span class="lang-de">Abgeschlossen</span>
|
||||
<span class="lang-jp">修了済み</span>
|
||||
<span class="lang-fr">Terminé</span>
|
||||
</div>
|
||||
<div class="progress">
|
||||
<i class="fas fa-circle cert-circle"></i>
|
||||
<span>{{certificates}}</span>
|
||||
<span class="lang-en">certificates</span>
|
||||
<span class="lang-de">Zertifikate</span>
|
||||
<span class="lang-jp">修了証</span>
|
||||
<span class="lang-fr">Certificats</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -10,8 +10,12 @@
|
||||
<div class="hero-text-wrapper">
|
||||
<div class="hero-heading lang-en">Learning paths</div>
|
||||
<div class="hero-heading lang-de">Lernpfade</div>
|
||||
<div class="hero-heading lang-jp">学習プログラム</div>
|
||||
<div class="hero-heading lang-fr">Parcours d’apprentissage</div>
|
||||
<div class="hero-desc lang-en">The guides most relevant to you, all in one place.<br> Pick a use case and start exploring DeepL.</div>
|
||||
<div class="hero-desc lang-de">Die für Sie wichtigsten Leitfäden an einem Ort. <br>Wählen Sie einen Anwendungsfall und entdecken Sie DeepL.</div>
|
||||
<div class="hero-desc lang-jp">必要な動画や説明をテーマごとにまとめました。自分に合ったユースケースを選びDeepLの使い方を学びましょう。</div>
|
||||
<div class="hero-desc lang-fr">Les guides les plus pertinents pour vous, dans un seul et même endroit. Choisissez un cas d’utilisation et commencez à explorer DeepL.</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="np-homepage-featured np-max-width page-spacing">
|
||||
|
||||
@ -0,0 +1,19 @@
|
||||
{% include "header" %}
|
||||
<div class="page-hero-container">
|
||||
<div class="hero-text-wrapper">
|
||||
<div class="hero-heading lang-en">Resources</div>
|
||||
<div class="hero-heading lang-de">Ressourcen</div>
|
||||
<div class="hero-heading lang-fr">Ressources</div>
|
||||
<div class="hero-heading lang-jp">資料</div>
|
||||
<div class="hero-desc lang-en">Videos, PDFs, best practices, and bite-sized guides—find them all here.<br>Learn at your own pace, in your own style.</div>
|
||||
<div class="hero-desc lang-de">Videos, PDFs, Best Practices und Leitfäden in kompakter Form - hier finden Sie alles.<br>Lernen Sie in Ihrem eigenen Tempo und auf Ihre eigene Weise.</div>
|
||||
<div class="hero-desc lang-fr">Accédez à des vidéos, PDF, bonnes pratiques et guides concis pour apprendre à votre rythme.</div>
|
||||
<div class="hero-desc lang-jp">動画、PDF、ベストプラクティス、クイックガイドなどの必要な資料をお探しください。<br>自分に合ったペース、スタイルで学べます。</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="np-homepage-featured np-max-width page-spacing">
|
||||
<section>
|
||||
{% include "resources_content" %}
|
||||
</section>
|
||||
</div>
|
||||
{% include "footer" %}
|
||||
@ -3,8 +3,12 @@
|
||||
<div class="hero-text-wrapper">
|
||||
<div class="hero-heading lang-en">Resources</div>
|
||||
<div class="hero-heading lang-de">Ressourcen</div>
|
||||
<div class="hero-heading lang-fr">Ressources</div>
|
||||
<div class="hero-heading lang-jp">資料</div>
|
||||
<div class="hero-desc lang-en">Videos, PDFs, best practices, and bite-sized guides—find them all here.<br>Learn at your own pace, in your own style.</div>
|
||||
<div class="hero-desc lang-de">Videos, PDFs, Best Practices und Leitfäden in kompakter Form - hier finden Sie alles.<br>Lernen Sie in Ihrem eigenen Tempo und auf Ihre eigene Weise.</div>
|
||||
<div class="hero-desc lang-fr">Accédez à des vidéos, PDF, bonnes pratiques et guides concis pour apprendre à votre rythme.</div>
|
||||
<div class="hero-desc lang-jp">動画、PDF、ベストプラクティス、クイックガイドなどの必要な資料をお探しください。<br>自分に合ったペース、スタイルで学べます。</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="np-homepage-featured np-max-width page-spacing">
|
||||
|
||||
@ -1,4 +1,12 @@
|
||||
{% include "header" %}
|
||||
{% assign available_courses = "" %}
|
||||
{% for course in courses.enrolled %}
|
||||
{% assign available_courses = available_courses | append: course.name | append: '[lang]' | append: course.properties.language | append: ',' %}
|
||||
{% endfor %}
|
||||
{% for course in courses.in_catalog %}
|
||||
{% assign available_courses = available_courses | append: course.name | append: '[lang]' | append: course.properties.language | append: ',' %}
|
||||
{% endfor %}
|
||||
|
||||
<main class="np-main np-search np-subpage-container np-max-width">
|
||||
<div class="np-resource-title lang-en">
|
||||
{% t .title %}
|
||||
@ -9,23 +17,15 @@
|
||||
<div class="np-search-header">
|
||||
<div class="np-resource-subtitle lang-en">
|
||||
{% t .showing %}
|
||||
<span class="np-resource-subtitle-number">{{ results.count }}</span>
|
||||
{% t .results_for %}
|
||||
<span class="np-button-color">"{{ results.term }}"</span>
|
||||
</div>
|
||||
<div class="np-resource-subtitle lang-de">
|
||||
Unter
|
||||
<span class="np-resource-subtitle-number">{{ results.count }}</span>
|
||||
Unte
|
||||
resultate für
|
||||
<span class="np-button-color">"{{ results.term }}"</span>
|
||||
</div>
|
||||
{% capture label %}{% t shared.filters.by_type %}{% endcapture %}
|
||||
{%
|
||||
include "filter_dropdown",
|
||||
filters: results.filters,
|
||||
key: "type",
|
||||
label: label
|
||||
%}
|
||||
|
||||
</div>
|
||||
{% if results.items.any? %}
|
||||
{% render "search_result" for results.items as result %}
|
||||
@ -34,3 +34,28 @@
|
||||
{% endif %}
|
||||
</main>
|
||||
{% include "footer" %}
|
||||
|
||||
<script>
|
||||
function filterSearchResults() {
|
||||
const userSelectedLanguage = localStorage.getItem("userLanguage");
|
||||
const search_result = document.querySelectorAll(".np-search-result");
|
||||
let available_courses = "{{ available_courses }}".toLowerCase().split(",");
|
||||
let uniq_available_courses = [...new Set(available_courses)];
|
||||
|
||||
let courses = uniq_available_courses.map(item => {
|
||||
const parts = item.split("[lang]");
|
||||
return { name: parts[0].trim(), lang: parts[1] };
|
||||
})
|
||||
|
||||
search_result.forEach((result) => {
|
||||
const result_name = result.querySelector(".result-name").innerText.toLowerCase();
|
||||
|
||||
let is_visible = courses.some(course => course.name === result_name && course.lang === userSelectedLanguage);
|
||||
result.style.display = is_visible ? "block" : "none";
|
||||
});
|
||||
}
|
||||
|
||||
addEventListener("DOMContentLoaded", (event) => {
|
||||
filterSearchResults();
|
||||
});
|
||||
</script>
|
||||
@ -12,7 +12,7 @@
|
||||
<div class="hero-heading lang-en">Webinars</div>
|
||||
<div class="hero-heading lang-de">Webinare</div>
|
||||
<div class="hero-desc lang-en">Live and recorded webinars, hosted by in-house experts at DeepL.<br>Get invaluable insights from the people who created our products.</div>
|
||||
<div class="hero-desc lang-de">Live- und aufgezeichnete Webinare, die von internen Experten auf DeepL veranstaltet werden.<br>Lassen Sie sich von den Leuten schulen, die unsere Produkte entwickelt haben.</div>
|
||||
<div class="hero-desc lang-de">Live- und aufgezeichnete Webinare, die von internen DeepL-Experten veranstaltet werden.<br>Lassen Sie sich von den Leuten schulen, die unsere Produkte entwickelt haben.</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="np-homepage-featured np-max-width page-spacing">
|
||||
|
||||
Reference in New Issue
Block a user