271 lines
8.1 KiB
Plaintext
271 lines
8.1 KiB
Plaintext
<div class="green-banner-wrapper green-banner-wrapper-image">
|
|
<div class="green-banner width-limit">
|
|
<img class="green-banner-image" src="https://s3.us-east-1.amazonaws.com/static.northpass.com/pipedrive/images/1.webp" alt="banner">
|
|
<div class="green-banner-content">
|
|
<h1 class="green-banner-title">
|
|
<span class="lang-en">Hi {{ current_person.first_name }}!</span>
|
|
<span class="lang-de">Hallo {{ current_person.first_name }}!</span>
|
|
<span class="lang-es">¡Hola {{ current_person.first_name }}!</span>
|
|
<span class="lang-fr">Bonjour {{ current_person.first_name }}!</span>
|
|
<span class="lang-br">Oi {{ current_person.first_name }}!</span>
|
|
</h1>
|
|
<div class="green-banner-text">
|
|
<span class="lang-en">Find the best training courses, video tutorials and webinars to master your CRM and sales skills.</span>
|
|
<span class="lang-de">Finden Sie die besten Schulungskurse, Video-Tutorials und Webinare, um Ihre CRM- und Vertriebsfähigkeiten zu meistern.</span>
|
|
<span class="lang-es">Encuentre los mejores cursos de formación, tutoriales en vídeo y seminarios web para dominar sus habilidades de CRM y ventas.</span>
|
|
<span class="lang-fr">Trouvez les meilleures formations, tutoriels vidéo et webinaires pour maîtriser vos compétences en CRM et en vente.</span>
|
|
<span class="lang-br">Encontre os melhores cursos de treinamento, tutoriais em vídeo e webinars para dominar suas habilidades de CRM e vendas.</span>
|
|
</div>
|
|
{% if current_person.signed_in? %}
|
|
<div class="green-banner-search">
|
|
<form action="{% route search %}" method="get" data-test="desktop-search" class="banner-search-form">
|
|
<input aria-label="{% t .search %}" class="banner-search-input" type="text" name="q" placeholder="Search Pipedrive Academy">
|
|
<i class="banner-search-icon fal fa-search" aria-hidden="true"></i>
|
|
<button type="button" class="clear-btn" aria-label="Clear input">
|
|
<img class="close-icon" src="https://s3.us-east-1.amazonaws.com/static.northpass.com/pipedrive/close.svg" alt="">
|
|
</button>
|
|
</form>
|
|
</div>
|
|
{% endif %}
|
|
{% if current_person.signed_in? %}
|
|
{% if current_person.properties.group_selected == false %}
|
|
<script>
|
|
<!-- Script to redirect to the custom page --!>
|
|
</script>
|
|
{% endif %}
|
|
{% endif %}
|
|
{% comment %} <div class="homepage-banner-stats">
|
|
{% assign in_progress = 0 %}
|
|
{% assign not_started = 0 %}
|
|
{% assign completed = 0 %}
|
|
|
|
{% for course in courses.in_catalog %}
|
|
{% if course.ribbon != 'VIDEO' %}
|
|
{% if course.completed? %}
|
|
{% assign completed = completed | plus: 1 %}
|
|
{% elsif course.started? == false %}
|
|
{% assign not_started = not_started | plus: 1 %}
|
|
{% else %}
|
|
{% assign in_progress = in_progress | plus: 1 %}
|
|
{% endif %}
|
|
{% endif %}
|
|
{% endfor %}
|
|
<div class="homepage-banner-stat">
|
|
<div class="stat-dot" style="color: #FFCC00;">
|
|
<i class="fas fa-circle"></i>
|
|
</div>
|
|
<div class="stat-number strong">
|
|
{{ in_progress }}
|
|
</div>
|
|
<div class="stat-text body-s">
|
|
<span class="lang-en">In progress</span>
|
|
<span class="lang-de">In Arbeit</span>
|
|
<span class="lang-es">En curso</span>
|
|
<span class="lang-fr">En cours</span>
|
|
<span class="lang-br">Em andamento</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="homepage-banner-stat">
|
|
<div class="stat-dot" style="color: var(--purple);">
|
|
<i class="fas fa-circle"></i>
|
|
</div>
|
|
<div class="stat-number strong">
|
|
{{ not_started }}
|
|
</div>
|
|
<div class="stat-text body-s">
|
|
<span class="lang-en">Not started</span>
|
|
<span class="lang-de">Nicht gestartet</span>
|
|
<span class="lang-es">No iniciado</span>
|
|
<span class="lang-fr">Pas encore commencé</span>
|
|
<span class="lang-br">Não iniciado</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="homepage-banner-stat">
|
|
<div class="stat-dot" style="color: var(--green);">
|
|
<i class="fas fa-circle"></i>
|
|
</div>
|
|
<div class="stat-number strong">
|
|
{{ completed }}
|
|
</div>
|
|
<div class="stat-text body-s">
|
|
<span class="lang-en">Completed</span>
|
|
<span class="lang-de">Abgeschlossen</span>
|
|
<span class="lang-es">Completado</span>
|
|
<span class="lang-fr">Complété</span>
|
|
<span class="lang-br">Concluído</span>
|
|
</div>
|
|
</div>
|
|
</div> {% endcomment %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<style>
|
|
.banner-search-input:focus-visible {
|
|
outline: 2px solid #017737;
|
|
border-radius: 100px;
|
|
}
|
|
.banner-search-form {
|
|
max-width: 530px;
|
|
position: relative;
|
|
}
|
|
.banner-search-icon {
|
|
position: absolute;
|
|
right: 0;
|
|
top: 50%;
|
|
}
|
|
.banner-search-icon {
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
height: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
padding-left: 17.5px;
|
|
pointer-events: none;
|
|
transition: opacity 0.2s ease;
|
|
}
|
|
.banner-search-input {
|
|
max-width: 530px;
|
|
width: 100%;
|
|
border-radius: 100px;
|
|
border: none;
|
|
height: 50px;
|
|
padding: 0 22px 0 44px;
|
|
}
|
|
|
|
.clear-btn {
|
|
position: absolute;
|
|
right: 20px;
|
|
top: 0;
|
|
height: 100%;
|
|
padding-left: 17.5px;
|
|
background: none;
|
|
border: none;
|
|
cursor: pointer;
|
|
display: none;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: #999;
|
|
}
|
|
.close-icon {
|
|
width: 100%;
|
|
}
|
|
.homepage-banner-image {
|
|
width: 100%;
|
|
}
|
|
.homepage-banner-stat {
|
|
background: #FFF;
|
|
margin-bottom: 10px;
|
|
padding: 12px 20px;
|
|
display: flex;
|
|
align-items: center;
|
|
border-radius: 4px;
|
|
width:100%;
|
|
}
|
|
.homepage-banner-stat > div {
|
|
text-align: center;
|
|
margin-right: 8px;
|
|
}
|
|
.stat-dot {
|
|
font-size: 8px;
|
|
}
|
|
|
|
.homepage-banner-stat .stat-number {
|
|
font-size: 18px;
|
|
line-height: 30px;
|
|
}
|
|
|
|
.homepage-banner-stat .stat-text {
|
|
font-size: 14px;
|
|
line-height: 25px;
|
|
}
|
|
@media only screen and (max-width: 768px) {
|
|
.banner-search-input, .banner-search-form {
|
|
max-width: 100%;
|
|
}
|
|
}
|
|
@media only screen and (min-width: 768px) {
|
|
.homepage-banner .green-banner {
|
|
padding-bottom: 0;
|
|
overflow: clip;
|
|
}
|
|
.homepage-banner .green-banner-title {
|
|
word-break: break-word;
|
|
}
|
|
.homepage-banner .green-banner {
|
|
display: flex;
|
|
flex-direction: row-reverse;
|
|
justify-content: space-between;
|
|
}
|
|
.homepage-banner .green-banner-content {
|
|
padding-bottom: 40px;
|
|
align-self: center;
|
|
}
|
|
.homepage-banner-image {
|
|
height: 250px;
|
|
align-self: end;
|
|
object-fit: contain;
|
|
width: auto;
|
|
margin-right: -10%;
|
|
}
|
|
}
|
|
@media only screen and (min-width: 880px) {
|
|
.homepage-banner-image {
|
|
height: 300px;
|
|
}
|
|
}
|
|
@media only screen and (min-width: 1200px) {
|
|
.homepage-banner-image {
|
|
margin-right: -5%;
|
|
height: 350px;
|
|
}
|
|
.homepage-banner .green-banner-content {
|
|
flex: 1 1 0px;
|
|
width: 0;
|
|
}
|
|
.homepage-banner-stats {
|
|
display: flex;
|
|
gap: 20px;
|
|
}
|
|
.homepage-banner-stat {
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
@media only screen and (min-width: 1400px) {
|
|
.homepage-banner-image {
|
|
margin-right: 0;
|
|
height: 100%;
|
|
}
|
|
}
|
|
</style>
|
|
|
|
<script>
|
|
const input = document.querySelector('.banner-search-input');
|
|
const icon = document.querySelector('.banner-search-icon');
|
|
const clearBtn = document.querySelector('.clear-btn');
|
|
|
|
function updateState() {
|
|
const hasValue = input.value.trim().length > 0;
|
|
|
|
icon.style.display = hasValue ? 'none' : 'flex';
|
|
clearBtn.style.display = hasValue ? 'flex' : 'none';
|
|
|
|
if (hasValue) {
|
|
input.focus();
|
|
}
|
|
}
|
|
|
|
input.addEventListener('input', updateState);
|
|
|
|
clearBtn.addEventListener('click', () => {
|
|
input.value = '';
|
|
input.focus();
|
|
updateState();
|
|
});
|
|
|
|
|
|
updateState();
|
|
</script> |