66 lines
1.8 KiB
Plaintext
66 lines
1.8 KiB
Plaintext
|
<div id="homepage-achievments-container">
|
||
|
|
<div class="global-section-title" id="achievments-header">
|
||
|
|
<span class="lang-en">Achievements</span>
|
||
|
|
<span class="lang-es">Logros</span>
|
||
|
|
</div>
|
||
|
|
{% assign achievments = current_person.properties.achievments | split: "," %}
|
||
|
|
{% assign SAWcompleted = false %}
|
||
|
|
{% for achievment in achievments %}
|
||
|
|
{% if achievment == 'saw_week' %}
|
||
|
|
{% assign SAWcompleted = true %}
|
||
|
|
{% break %}
|
||
|
|
{% endif %}
|
||
|
|
{% endfor %}
|
||
|
|
<div class="achievements-carousel-container">
|
||
|
|
{% assign displayedCount = 0 %}
|
||
|
|
|
||
|
|
<!-- SAW Achievement -->
|
||
|
|
{% if SAWcompleted %}
|
||
|
|
<div class="homepage-carrot-achievments-item">
|
||
|
|
|
||
|
|
<img
|
||
|
|
src="https://cdn.northpass.io/Instacart/badges/SAW_active.svg"
|
||
|
|
alt="SAW completed badge"
|
||
|
|
class="carrot-achievment-modal"
|
||
|
|
desc-en="Congrats on participating in the 2025 learning sweepstakes!"
|
||
|
|
desc-es="¡Felicidades por participar en el reto de aprendizaje 2025!">
|
||
|
|
{% assign displayedCount = displayedCount | plus: 1 %}
|
||
|
|
</div>
|
||
|
|
{% endif %}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
|
||
|
|
<style>
|
||
|
|
#homepage-achievments-container {
|
||
|
|
display: none;
|
||
|
|
}
|
||
|
|
.achievements-carousel-container {
|
||
|
|
display: grid;
|
||
|
|
grid-template-columns: repeat(5, 1fr);
|
||
|
|
gap: 20px;
|
||
|
|
justify-items: center;
|
||
|
|
}
|
||
|
|
|
||
|
|
@media (max-width: 1024px) {
|
||
|
|
.achievements-carousel-container {
|
||
|
|
grid-template-columns: repeat(3, 1fr);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@media (min-width: 768px) {
|
||
|
|
.achievements-carousel-container {
|
||
|
|
padding: 0 82px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
</style>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
document.addEventListener('DOMContentLoaded', function() {
|
||
|
|
const achievments = document.querySelector('.achievements-carousel-container');
|
||
|
|
if(achievments.children.length > 0) {
|
||
|
|
document.getElementById('homepage-achievments-container').style.display = 'block';
|
||
|
|
}
|
||
|
|
});
|
||
|
|
</script>
|