Files
Gainsight/Custom_Templates/customer_templates/Instacart - Carrot/homepage.html.liquid

155 lines
4.7 KiB
Plaintext

{% include "back_button" %}
{% include "event_banner" %}
{% include "course_version_outdated_alert"
, courses: courses.enrolled %}
{% assign hasInProgressCourses = false %}
{% for course in courses.enrolled %}
{% if course.progress > 0 and course.progress < 100 %}
{% assign hasInProgressCourses = true %}
{% break %}
{% endif %}
{% endfor %}
<main class="np-main np-dashboard np-subpage-container np-max-width">
<div class="dashboard-greeting">
<span class="lang-en">Hi</span>
<span class="lang-es">Hola</span>
{% if current_person.first_name %}
{{ current_person.first_name }}{% endif %}!
</div>
<div
class="dashboard-quality-score"
id="dashboard-quality-score"
style="visibility: hidden;">
<span class="lang-en">Consider taking some lessons below.</span>
<span class="lang-es">Considera tomar algunas lecciones a continuación.</span>
</div>
{% if hasInProgressCourses %}
{% include "carrot_button"
, buttonUrl: "/app/dashboard"
, buttonText: "In progress"
, buttonTextEs: "En progreso" %}
{% endif %}
<div
class="global-section-title"
id="lessons-header"
style="visibility: hidden;">
<span class="lang-en">Your lessons</span>
<span class="lang-es">Tus lecciones</span>
</div>
{% include "courses_carousel"
, breakpoint: 768
, showOnlyInProgress: false
, hideOnlyCompleted: true
, sortByPriority: true
, showAllOnNoResults: false
, minified: false %}
{% if features.learning_paths? %}
<div
class="global-section-title"
id="learning-paths-header"
style="visibility: hidden;">
<span class="lang-en">Your learning paths</span>
<span class="lang-es">Tus rutas de aprendizaje</span>
</div>
{% include "learning_paths_carousel"
, breakpoint: 768
, showOnlyInProgress: false
, sortByPriority: true
, showAllOnNoResults: false
, hideOnlyCompleted: true
, minified: false %}
{% endif %}
<div id="congratulations-container" style="display: none;">
<img
src="https://s3.us-east-1.amazonaws.com/static.northpass.com/Instacart/trophy+arm.svg"
alt="Congratulations"
class="congratulations-icon">
<div class="global-section-title">
<span class="lang-en">Congratulations!</span>
<span class="lang-es">¡Felicidades!</span>
</div>
<div>
<span class="lang-en">You completed all available lessons. Consider refreshing your skills by retaking some lessons.</span>
<span class="lang-es">Has completado todas tus lecciones. Considera actualizar tus habilidades repitiendo algunas lecciones.</span>
</div>
{% include "carrot_button"
, buttonUrl: "/app/catalog"
, buttonText: "Retake lessons"
, buttonTextEs: "Repetir lecciones" %}
</div>
{% include "homepage_achievments" %}
</main>
{% include "footer" %}
<style>
.dashboard-greeting {
font-size: 2.2rem;
font-weight: 700;
color: {{ color_palette.header_color }};
/* matches your brand green */
margin-top: 32px;
margin-bottom: 8px;
letter-spacing: -1px;
line-height: 1.1;
}
@media (max-width: 768px) {
.dashboard-greeting,
.dashboard-quality-score,
#congratulations-container {
text-align: center;
}
.dashboard-greeting {
font-size: 1.5rem;
margin-top: 20px;
}
}
.dashboard-quality-score {
font-size: 1.2rem;
color: #555;
margin-bottom: 16px;
}
#congratulations-container > img {
width: 80vw;
max-width: 300px;
margin-bottom: 16px;
}
</style>
<script>
document.addEventListener('DOMContentLoaded', function() {
const carousel = document.querySelector('.course-carousel-container');
const lessonsHeader = document.getElementById('lessons-header');
let hiddenSectionsCount = 0;
if(carousel.children.length === 0) {
lessonsHeader.style.display = 'none';
hiddenSectionsCount++;
}else{
lessonsHeader.style.visibility = 'visible';
}
const pathsCarousel = document.querySelector('.paths-carousel-container');
const learningPathsHeader = document.getElementById('learning-paths-header');
if(pathsCarousel.children.length === 0) {
learningPathsHeader.style.display = 'none';
hiddenSectionsCount++;
}else{
learningPathsHeader.style.visibility = 'visible';
}
const dashboardQualityScore = document.getElementById('dashboard-quality-score');
if(hiddenSectionsCount === 2) {
dashboardQualityScore.style.display = 'none';
const congratulationsContainer = document.getElementById('congratulations-container');
congratulationsContainer.style.display = 'block';
}else{
dashboardQualityScore.style.visibility = 'visible';
}
});
</script>