norm/Gainsight
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Updated Pipedrive's templates, mostly.

Browse Source
This commit is contained in:
Norm Rasmussen
2024-09-12 18:25:34 -04:00
parent 70b5d04b26
commit e78efae8aa
353 changed files with 5405 additions and 1769 deletions
Download Patch File Download Diff File Expand all files Collapse all files

172
Custom_Templates/customer_templates/Pipedrive - UserLearn/_account_avatar.html.liquid Normal file
View File

@ -0,0 +1,172 @@
<div class="avatar-text">
<h4 class="strong">
<span class="lang-en">Profile picture</span>
<span class="lang-de">Profilbild</span>
<span class="lang-es">Foto de perfil</span>
<span class="lang-fr">Photo de profil</span>
<span class="lang-br">Foto do perfil</span>
</h4>
<div>
<span class="lang-en">Photo helps personalize your account</span>
<span class="lang-de">Personalisieren Sie Ihr Konto mit einem Foto</span>
<span class="lang-es">La foto ayuda a personalizar su cuenta</span>
<span class="lang-fr">La photo permet de personnaliser votre compte</span>
<span class="lang-br">A foto ajuda a personalizar sua conta</span>
</div>
</div>
<img
alt="default avatar"
class="np-account-avatar-image"
src="https://s3.amazonaws.com/static.northpass.com/pipedrive/Avatar.png"
id="{{version}}_gravatar_img"
{% unless form.use_gravatar? %}style="display: none"{% endunless %}
/>
<img
alt="avatar"
class="np-account-avatar-image"
src="{% if form.secure_custom_avatar_url contains "https://secure.gravatar.com/avatar" %}https://s3.amazonaws.com/static.northpass.com/pipedrive/Avatar.png{% else %}{{ form.secure_custom_avatar_url }}{% endif %}"
id="{{version}}_custom_avatar_img"
{% if form.use_gravatar? %}style="display: none"{% endif %}
/>
<div class="np-account-avatar-choice">
<div class="np-form-field np-hidden">
<label class="radio radio-before np-input-label" for="{{version}}_learner_use_gravatar_true">
<span class="radio__input">
<input
id="{{version}}_learner_use_gravatar_true"
name="learner[use_gravatar]"
type="radio"
value="true"
{% if form.use_gravatar? %}checked{% endif %}
/>
<span class="np-button-color radio__control"></span>
</span>
<span class="radio__label"></span>
</label>
</div>
<div class="np-form-field np-hidden">
<label class="radio radio-before np-input-label" for="{{version}}_learner_use_gravatar_false">
<span class="radio__input">
<input
id="{{version}}_learner_use_gravatar_false"
name="learner[use_gravatar]"
type="radio"
value="false"
{% unless form.use_gravatar? %}checked{% endunless %}
/>
<span class="np-button-color radio__control"></span>
</span>
<span class="radio__label">
<span class="lang-en">Upload custom photo</span>
<span class="lang-de">Foto hochladen</span>
<span class="lang-es">Subir foto personalizada</span>
<span class="lang-fr">Téléverser une photo personnalisée</span>
<span class="lang-br">Carregar foto personalizada</span>
</span>
</label>
</div>
<button
id="{{version}}_upload_avatar"
type="button"
class="upload-avatar-button{% if form.use_gravatar? %} np-hidden{% endif %}"
>
<i class="far fa-paperclip"></i>
<span class="lang-en">Upload custom photo</span>
<span class="lang-de">Foto hochladen</span>
<span class="lang-es">Subir foto personalizada</span>
<span class="lang-fr">Téléverser une photo personnalisée</span>
<span class="lang-br">Carregar foto personalizada</span>
</button>
<div class="avatar-checkbox-wrapper" onclick="toggleGravatar()">
<div class="avatar-checkbox {% if form.use_gravatar? %} avatar-checkbox-selected {% endif %}" id="gravatar-checkbox">
<svg class="avatar-checkbox-mark" width="13" height="11" viewBox="0 0 13 11" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M10.7856 0.703847C11.2758 0.349665 11.9541 0.468775 12.3006 0.969886C12.6471 1.471 12.5305 2.16435 12.0403 2.51853C9.89294 4.07001 7.5045 6.58636 4.89298 10.0653C4.50422 10.5832 3.76456 10.6485 3.29465 10.2065L0.350947 7.43754C-0.0907947 7.02203 -0.119375 6.31912 0.287111 5.86757C0.693596 5.41601 1.38122 5.3868 1.82296 5.80231L3.89947 7.75555C6.35518 4.59965 8.64604 2.24967 10.7856 0.703847Z" fill="white"/>
</svg>
</div>
<span>
<span class="lang-en">Use default avatar</span>
<span class="lang-de">Standard-Avatar verwenden</span>
<span class="lang-es">Usar avatar predeterminado</span>
<span class="lang-fr">Utiliser l'avatar par défaut</span>
<span class="lang-br">Use o avatar padrão</span>
</span>
</div>
</div>
<style>
#desktop_custom_avatar_img {
border-radius: 50%;
border: 2px solid #E4E6E9;
}
.avatar-text > h4 {
margin-bottom: 20px;
}
.np-account-avatar-choice {
margin-left: 0;
}
.avatar-checkbox {
width: 20px;
height: 20px;
border: 1px solid var(--black-digital);
border-radius: 2px;
}
.avatar-checkbox-wrapper {
display: flex;
gap: 10px;
align-items: center;
cursor: pointer;
}
.avatar-checkbox.avatar-checkbox-selected {
border: none;
background: var(--green);
display: flex;
}
.avatar-checkbox-mark {
display: none;
margin: auto;
}
.avatar-checkbox.avatar-checkbox-selected .avatar-checkbox-mark {
display: block;
}
.upload-avatar-button {
border: none;
background: none;
color: #0070D6;
margin-bottom: 20px;
padding: 0;
}
.upload-avatar-button:hover {
color: #0055a3;
}
.upload-avatar-button > i {
rotate: -45deg;
}
#desktop_gravatar_img {
border: 2px solid #E4E6E9;
border-radius: 50%;
}
</style>
<script>
function toggleGravatar() {
let checkbox = document.querySelector('#gravatar-checkbox');
checkbox.classList.toggle('avatar-checkbox-selected');
document.querySelector('.upload-avatar-button').classList.toggle('np-hidden')
if (checkbox.classList.contains('avatar-checkbox-selected')) {
document.querySelector(('#desktop_learner_use_gravatar_true')).click()
} else {
document.querySelector(('#desktop_learner_use_gravatar_false')).click()
}
}
{% if current_person.avatar_url contains "https://secure.gravatar.com/avatar" and form.use_gravatar? == false %}
window.addEventListener("DOMContentLoaded", () => {
let a = document.querySelector('#gravatar-checkbox');
if (!a.classList.contains('avatar-checkbox-selected')) {
a.click()
}
})
{% endif %}
</script>

160
Custom_Templates/customer_templates/Pipedrive - UserLearn/_account_deletion.html.liquid Normal file
View File

@ -0,0 +1,160 @@
<div class="account-deletion">
<h4 class="strong">
<span class="lang-en">Delete your account</span>
<span class="lang-de">Ihr Konto löschen</span>
<span class="lang-es">Eliminar tu cuenta</span>
<span class="lang-fr">Supprimer votre compte</span>
<span class="lang-br">Exclua sua conta</span>
</h4>
<div class="account-deletion-description">
<span class="lang-en">Your account will be permanently deleted and you will no longer be able to access any data or information associated with this account. This action cannot be undone.</span>
<span class="lang-de">Ihr Account wird dauerhaft gelöscht und Sie haben keinen Zugriff mehr auf die mit diesem Konto verbundenen Daten und Informationen. Diese Aktion kann nicht rückgängig gemacht werden.</span>
<span class="lang-es">Tu cuenta será eliminada permanentemente y ya no podrás acceder a ningún dato o información asociada a esta cuenta. Esta acción no se puede deshacer.</span>
<span class="lang-fr">Votre compte sera définitivement supprimé et vous ne pourrez plus accéder aux données ou informations associées à ce compte. Cette action ne peut être annulée.</span>
<span class="lang-br">Sua conta será excluída permanentemente e você não poderá mais acessar quaisquer dados ou informações associados a ela. Esta ação não pode ser desfeita.</span>
</div>
<div class="button-1 button-large button-deletion" onclick="
document.querySelector('.account-deletion-popup-wrapper').classList.remove('np-hidden');
document.querySelector('.account-deletion-popup').classList.remove('np-hidden');"
>
<span class="lang-en">Delete my account</span>
<span class="lang-de">Meinen Account löschen</span>
<span class="lang-es">Eliminar mi cuenta</span>
<span class="lang-fr">Supprimer mon compte</span>
<span class="lang-br">Excluir minha conta</span>
</div>
</div>
<div class="account-deletion-popup-wrapper np-hidden" onclick="
document.querySelector('.account-deletion-popup-wrapper').classList.add('np-hidden');
document.querySelector('.account-deletion-popup').classList.add('np-hidden');"
>
</div>
<div class="account-deletion-popup np-hidden">
<div class="account-deletion-popup-confirmation">
<label class="account-deletion-confirmation-label" for="account-deletion-confirmation-input">
<span class="lang-en">To confirm account deletion, type <em>delete</em> in the field below.</span>
<span class="lang-de">Um die Löschung des Accounts zu bestätigen, geben Sie <em>löschen</em> in das Feld unten ein.</span>
<span class="lang-es">Para confirmar la eliminación de la cuenta, escribe <em>eliminar</em> en el siguiente campo.</span>
<span class="lang-fr">Pour confirmer la suppression de votre compte, tapez <em>supprimer</em> dans le champ ci-dessous.</span>
<span class="lang-br">Para confirmar a exclusão da conta, digite <em>excluir</em> no campo abaixo.</span>
</label>
<input id="account-deletion-confirmation-input" class="np-input" placeholder="delete" autocomplete="off">
<div id="confirm-deletion" class="button-1 button-medium button-deletion button-deletion-disabled" onclick="sendDeleteRequest();">
<span class="lang-en">Delete</span>
<span class="lang-de">löschen</span>
<span class="lang-es">Eliminar</span>
<span class="lang-fr">Supprimer</span>
<span class="lang-br">Excluir</span>
</div>
</div>
<h5 class="account-deletion-popup-goodbye np-hidden">
<span class="lang-en">Your account will be deleted shortly</span>
<span class="lang-de">Ihr Account wird in Kürze gelöscht</span>
<span class="lang-es">Tu cuenta será eliminada en breve</span>
<span class="lang-fr">Votre compte sera supprimé dans les plus brefs délais</span>
<span class="lang-br">Sua conta será excluída em breve</span>
</h5>
</div>
<style>
.account-deletion h4 {
margin-top: 80px;
margin-bottom: 20px;
}
.button-deletion {
width: fit-content;
background: #FFE7E6;
color: #C7201B;
margin-top: 20px;
}
.button-deletion:hover {
background: #FF5550;
color: #FFF;
}
.button-deletion-disabled, .button-deletion-disabled:hover {
background: #FFE7E6;
color: gray;
cursor: default;
}
.account-deletion-popup-wrapper {
width: 100%;
height: 100%;
position: fixed;
background: rgba(60, 60, 60, 0.5);
top: 0;
left: 0;
}
.account-deletion-popup {
position: absolute;
top: 50%;
left: 50%;
background: #FFF;
border-radius: 4px;
transform: translate(-50%, -50%);
}
.account-deletion-popup-confirmation {
display: flex;
flex-direction: column;
padding: 40px;
gap: 20px;
}
.account-deletion-popup-goodbye {
padding: 60px;
}
#account-deletion-confirmation-input::placeholder {
font-style: italic;
color: #999FA7;
opacity: 1;
}
@media only screen and (min-width: 500px) {
.account-deletion-popup-confirmation {
min-width: 450px;
}
}
@media only screen and (min-width: 1024px) {
.account-deletion h4 {
margin-top: 40px;
}
}
</style>
<script>
{% if current_school.properties.sandbox == false %}
const deletionInput = document.getElementById('account-deletion-confirmation-input');
deletionInput.addEventListener('input', () => {
const button = document.querySelector('#confirm-deletion');
if (deletionInput.value.toLowerCase() !== 'delete') {
button.classList.add('button-deletion-disabled');
} else {
button.classList.remove('button-deletion-disabled');
}
});
function sendDeleteRequest() {
document.querySelector('.account-deletion-popup-confirmation').classList.add('np-hidden');
document.querySelector('.account-deletion-popup-goodbye').classList.remove('np-hidden');
const personUUID = '{{ current_person.id }}';
const personEmail = '{{ current_person.email }}'
const personTime = '{{ current_person.created_at | replace_first: " ", "T" | replace_first: " +0000", ".000000+00:00" }}';
const xhr = new XMLHttpRequest();
{% if current_school.sso_active? %}
var url = 'https://www.workato.com/webhooks/rest/bd1a1eb7-7e79-4208-a1db-8e9c7440bcc9/pipedrive-sso-delete-myself'
{% else %}
var url = 'https://www.workato.com/webhooks/rest/bd1a1eb7-7e79-4208-a1db-8e9c7440bcc9/pipedrive-open-delete-myself'
{% endif %}
xhr.open('POST', url);
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.send(JSON.stringify({
"personUUID": personUUID,
"personEmail": personEmail,
"personTime": personTime
}));
xhr.addEventListener('load', () => {
setTimeout(() => {
window.location.replace('/learners/sign_out');
}, 3000);
});
}
{% endif %}
</script>

31
Custom_Templates/customer_templates/Pipedrive - UserLearn/_account_desktop_view.html.liquid Normal file
View File

@ -0,0 +1,31 @@
<form class="np-form" action="{{ form.options.action }}" method="post" id="desktop_edit_learner" novalidate>
<input type="hidden" name="_method" value="{{ form.options.http_method }}">
{% form_authenticity_token %}
<div class="np-card">
<div class="container">
<h1 class="account-form-title">
<span class="lang-en">My profile</span>
<span class="lang-de">Mein Profil</span>
<span class="lang-es">Mi perfil</span>
<span class="lang-fr">Mon profil</span>
<span class="lang-br">Meu perfil</span>
</h1>
<div class="row">
<div class="col-xs-12 col-md-7 np-account-form">
{% render "account_form", form: form, version: "desktop" %}
<button type="submit" class="np-button np-button-big np-button-large-font np-form-action">
<span class="lang-en">Save profile</span>
<span class="lang-de">Profil speichern</span>
<span class="lang-es">Guardar perfil</span>
<span class="lang-fr">Sauvegarder le profil</span>
<span class="lang-br">Salvar perfil</span>
</button>
</div>
<div class="col-xs-12 col-md-5">
{% include "account_avatar", version: "desktop" %}
{% include "account_deletion" %}
</div>
</div>
</div>
</div>
</form>

176
Custom_Templates/customer_templates/Pipedrive - UserLearn/_account_form.html.liquid Normal file
View File

@ -0,0 +1,176 @@
<div class="np-form-field {% if form.errors contains 'email' %}np-account-form-field-error{% endif %}">
<label class="account-label" for="{{version}}_learner_email">
<span class="lang-en">Email</span>
<span class="lang-de">E-Mail</span>
<span class="lang-es">Correo electrónico</span>
<span class="lang-fr">E-mail</span>
<span class="lang-br">Email</span> *
</label>
<input
{% if form.options.invite? %} disabled {% endif %}
autofocus="autofocus"
class="np-input"
id="{{version}}_learner_email"
name="learner[email]"
type="email"
value="{{ form.email }}"
/>
</div>
<div class="np-form-field {% if form.errors contains 'first_name' %}np-account-form-field-error{% endif %}">
<label class="account-label" for="{{version}}_learner_first_name">
<span class="lang-en">First name</span>
<span class="lang-de">Vorname</span>
<span class="lang-es">Nombre de pila</span>
<span class="lang-fr">Prénom</span>
<span class="lang-br">Nome</span> *
</label>
<input
class="np-input"
id="{{version}}_learner_first_name"
name="learner[first_name]"
value="{{ form.first_name }}"
/>
</div>
<div class="np-form-field {% if form.errors contains 'last_name' %}np-account-form-field-error{% endif %}">
<label class="account-label" for="{{version}}_learner_last_name">
<span class="lang-en">Last name</span>
<span class="lang-de">Nachname</span>
<span class="lang-es">Apellidos</span>
<span class="lang-fr">Nom de famille</span>
<span class="lang-br">Sobrenome</span> *
</label>
<input
class="np-input"
id="{{version}}_learner_last_name"
name="learner[last_name]"
value="{{ form.last_name }}"
/>
</div>
<div class="np-form-field {% if form.errors contains 'display_name' %}np-account-form-field-error{% endif %}" style="display: none">
<label class="account-label" for="{{version}}_learner_display_name">
<span class="lang-en">Display name</span>
<span class="lang-de"></span>
<span class="lang-es"></span>
<span class="lang-fr"></span>
<span class="lang-br"></span>
</label>
<input
class="np-input"
id="{{version}}_learner_display_name"
name="learner[display_name]"
value="{{ form.display_name }}"
/>
</div>
{% unless form.options.invite? %}
<div class="np-form-field {% if form.errors contains 'current_password' %}np-account-form-field-error{% endif %}">
<label class="account-label" for="{{version}}_learner_current_password">
<span class="lang-en">Current password</span>
<span class="lang-de">Aktuelles Passwort</span>
<span class="lang-es">Contraseña actual</span>
<span class="lang-fr">Mot de passe actuel</span>
<span class="lang-br">Senha atual</span>
</label>
<input
class="np-input"
id="{{version}}_learner_current_password"
name="learner[current_password]"
type="password"
/>
</div>
<div class="np-form-field {% if form.errors contains 'password' %}np-account-form-field-error{% endif %}">
<label class="account-label" for="{{version}}_learner_password">
<span class="lang-en">New password</span>
<span class="lang-de">Neues Passwort</span>
<span class="lang-es">Nueva contraseña</span>
<span class="lang-fr">Nouveau mot de passe</span>
<span class="lang-br">Nova senha</span>
</label>
<input
class="np-input"
id="{{version}}_learner_password"
name="learner[password]"
type="password"
/>
</div>
<div class="np-form-field {% if form.errors contains 'password_confirmation' %}np-account-form-field-error{% endif %}">
<label class="account-label" for="{{version}}_learner_password_confirmation">
<span class="lang-en">Confirm new password</span>
<span class="lang-de">Passwort bestätigen</span>
<span class="lang-es">Confirmar nueva contraseña</span>
<span class="lang-fr">Confirmer le mot de passe</span>
<span class="lang-br">Confirmar nova senha</span>
</label>
<input
class="np-input"
id="{{version}}_learner_password_confirmation"
name="learner[password_confirmation]"
type="password"
/>
</div>
{% endunless %}
{% if form.options.invite? %}
<div class="np-form-field {% if form.errors contains 'password' %}np-account-form-field-error{% endif %}">
<label class="account-label" for="{{version}}_learner_password">
<span class="lang-en">Password</span>
<span class="lang-de">Passwort</span>
<span class="lang-es">Contraseña</span>
<span class="lang-fr">Mot de passe</span>
<span class="lang-br">Senha</span> *
</label>
<input
class="np-input"
id="{{version}}_learner_password"
name="learner[password]"
type="password"
/>
</div>
{% if form.terms_of_service_required? %}
<div class="np-form-field terms-of-service {% if form.errors contains 'terms_of_service_accepted' %}np-account-form-field-error{% endif %}">
<input
id="{{version}}_learner_terms_of_service"
name="learner[terms_of_service_accepted]"
type="checkbox"
/>
<div class="label">
<span class="lang-en">{% t .terms_of_service %}</span>
<span class="lang-de"></span>
<span class="lang-es"></span>
<span class="lang-fr"></span>
<span class="lang-br"></span>
</div>
</div>
{% else %}
<div class="np-margin-top">
<span class="np-form-terms">
<span class="lang-en">By submitting this form you agree to the </span>
<span class="lang-de">Mit dem Absenden dieses Formulars erklären Sie sich mit den </span>
<span class="lang-es">Al enviar este formulario acepta las </span>
<span class="lang-fr">En soumettant ce formulaire, vous acceptez les </span>
<span class="lang-br">Ao enviar este formulário, você concorda com os </span>
<a
class="np-form-link np-button-color"
target="_blank"
href={{ form.terms_of_service_url }}
>
<span class="lang-en">Terms of Use</span>
<span class="lang-de">Nutzungsbedingungen einverstanden</span>
<span class="lang-es">Condiciones de uso</span>
<span class="lang-fr">conditions d'utilisation.</span>
<span class="lang-br">Termos de Uso</span>
</a>
</span>
</div>
{% endif %}
<input
id="{{version}}_invite_token"
name="learner[token]"
value="{{ form.invite_token }}"
type="hidden"
/>
{% endif %}

17
Custom_Templates/customer_templates/Pipedrive - UserLearn/_account_mobile_view.html.liquid Normal file
View File

@ -0,0 +1,17 @@
<form class="np-form" action="{{ form.options.action }}" method="post" id="mobile_edit_learner" novalidate>
<input type="hidden" name="_method" value="{{ form.options.http_method }}">
{% form_authenticity_token %}
<div class="np-card np-account-form">
<div class="np-card-container np-card-padding">
{% render "account_form", form: form, version: "mobile" %}
</div>
</div>
<div class="np-card np-account-avatar">
<div class="np-card-container np-card-padding">
{% include "account_avatar", version: "mobile" %}
</div>
</div>
<button type="submit" class="np-button np-button-big np-button-large-font np-form-action">
{% t shared.account.save %}
</button>
</form>

75
Custom_Templates/customer_templates/Pipedrive - UserLearn/_cards_course.html.liquid Normal file
View File

@ -0,0 +1,75 @@
{% assign activities_count = 0 %}
{% for section in course.sections %}
{% assign activities_count = activities_count | plus: section.activities.size %}
{% endfor %}
{% capture course_path %}{% route course, id: course.id %}{% endcapture %}
{% assign scaled_image_url = "" | append: course.image_url | replace: "resize=width:819,height:503", "resize=width:912,height:503" %}
<div class="course-card col-xs-12 col-sm-6 col-lg-4" language="{{course.properties.course_language}}" item-categories="{{ course.categories | map: 'id' | join: " " }}">
<a class="course-card-wrapper" href="{{ course_path }}">
{% if course.ribbon and course.ribbon.size > 0 %}
{% assign course_ribbon_uppercase = course.ribbon | upcase %}
<div class="course-card-ribbon body-xs {% if course_ribbon_uppercase == 'NEW' %}ribbon-blue{% endif %}">
{{ course.ribbon }}
</div>
{% endif %}
<img class="course-card-image" src="{{ scaled_image_url }}" alt="{{ course.name }}">
<div class="course-card-content">
<div class="course-card-info body-xs">
{{ activities_count }}
{% if activities_count == 1 %}
<span class="lang-en">lesson</span>
<span class="lang-de">Lektion</span>
<span class="lang-es">lección</span>
<span class="lang-fr">leçon</span>
<span class="lang-br">lição</span>
{% else %}
<span class="lang-en">lessons</span>
<span class="lang-de">Lektionen</span>
<span class="lang-es">lecciones</span>
<span class="lang-fr">leçons</span>
<span class="lang-br">lições</span>
{% endif %}
<span class="course-card-info-separator">|</span>
{% if course.properties.course_time != 'NULL' %}
{{ course.properties.course_time }}
{% endif %}
</div>
<h5 class="course-card-title">
{{ course.name }}
</h5>
<div class="course-card-description">
{{ course.short_description }}
</div>
<div class="course-card-footer">
{% if course.started? %}
<div class="course-card-progress">
<div class="course-card-progress-value body-s strong">
{{ course.progress }}%
</div>
<div class="course-card-progress-bar">
<div class="course-card-progress-bar-fill" style="width: {{ course.progress }}%"></div>
</div>
</div>
{% endif %}
<div class="course-card-button button-wrapper">
<div class="button-2 button-medium">
{% if course.started? %}
<span class="lang-en">Continue</span>
<span class="lang-de">Weiter</span>
<span class="lang-es">Continuar</span>
<span class="lang-fr">Continuer</span>
<span class="lang-br">Continuar</span>
{% else %}
<span class="lang-en">Take this course</span>
<span class="lang-de">Diesen Kurs belegen</span>
<span class="lang-es">Tomar este curso</span>
<span class="lang-fr">Suivre ce cours</span>
<span class="lang-br">Faça este curso</span>
{% endif %}
</div>
</div>
</div>
</div>
</a>
</div>

81
Custom_Templates/customer_templates/Pipedrive - UserLearn/_cards_course_homepage.html.liquid Normal file
View File

@ -0,0 +1,81 @@
{% assign activities_count = 0 %}
{% for section in course.sections %}
{% assign activities_count = activities_count | plus: section.activities.size %}
{% endfor %}
<a class="homepage-card-wrapper" language="{{course.properties.course_language}}" href="{% route course, id: course.id %}">
<div class="homepage-card">
<img class="homepage-card-image" src="{{ course.image_url }}" alt="{{ course.name }}">
<div class="homepage-card-body-wrapper">
{% unless course.ribbon == "VIDEO" %}
<div class="homepage-card-activities body-s">
{{ activities_count }}
{% if activities_count == 1 %}
<span class="lang-en">lesson</span>
<span class="lang-de">Lektion</span>
<span class="lang-es">lección</span>
<span class="lang-fr">leçon</span>
<span class="lang-br">lição</span>
{% else %}
<span class="lang-en">lessons</span>
<span class="lang-de">Lektionen</span>
<span class="lang-es">lecciones</span>
<span class="lang-fr">leçons</span>
<span class="lang-br">lições</span>
{% endif %}
</div>
{% endunless %}
<div class="homepage-card-body">
<div class="homepage-card-body-left">
<div class="homepage-card-title strong">
{{ course.name }}
</div>
</div>
<div class="homepage-card-button button-2 button-medium">
{% if course.ribbon != "VIDEO" %}
{% if course.started? %}
<span class="lang-en">Continue</span>
<span class="lang-de">Weiter</span>
<span class="lang-es">Continúe en</span>
<span class="lang-fr">Continuer</span>
<span class="lang-br">Continuar</span>
{% else %}
<span class="lang-en">Start</span>
<span class="lang-de">Start</span>
<span class="lang-es">Inicio</span>
<span class="lang-fr">Commencer</span>
<span class="lang-br">Início</span>
{% endif %}
{% else %}
<span class="lang-en">Watch video</span>
<span class="lang-de">Video ansehen</span>
<span class="lang-es">Ver el vídeo</span>
<span class="lang-fr">Regarder la vidéo</span>
<span class="lang-br">Assista ao vídeo</span>
{% endif %}
</div>
</div>
<div class="homepage-card-footer">
<div class="homepage-card-info">
{% unless course.ribbon == "VIDEO" %}
<div class="homepage-card-progress-value body-s strong">
{{ course.progress }}%
</div>
{% endunless %}
<div class="homepage-card-time body-s">
<span class="lang-en">Total length</span>
<span class="lang-de">Gesamtlänge</span>
<span class="lang-es">Longitud total</span>
<span class="lang-fr">Durée totale</span>
<span class="lang-br">Duração total</span>: {{ course.properties.course_time }}
</div>
</div>
{% unless course.ribbon == "VIDEO" %}
<div class="homepage-card-progress-bar">
<div class="homepage-card-progress-bar-fill" style="width: {{ course.progress }}%;"></div>
</div>
{% endunless %}
</div>
</div>
</div>
</a>

18
Custom_Templates/customer_templates/Pipedrive - UserLearn/_cards_generic.html.liquid Normal file
View File

@ -0,0 +1,18 @@
<div class="course-card col-xs-12 col-sm-6 col-lg-4">
<a class="course-card-wrapper" href="{{ card_button_link }}">
<img class="course-card-image" style="width: 100px; height: 100px;" src="{{ card_image }}" alt="{{ card_alt_text }}">
<div class="course-card-content">
<h5 class="course-card-title">
{{ card_title }}
</h5>
<div class="course-card-description">
{{ card_description }}
</div>
<div class="course-card-button button-wrapper">
<div class="button-2 button-medium">
{{ card_button_text }}
</div>
</div>
</div>
</a>
</div>

70
Custom_Templates/customer_templates/Pipedrive - UserLearn/_cards_learning_path.html.liquid Normal file
View File

@ -0,0 +1,70 @@
<div class="np-card np-no-horizontal-padding">
<div class="np-card-container">
<div class="np-learning-path">
<img
alt="{{ learning_path.name }}"
class="np-card-image np-learning-path-image"
src="{{ learning_path.image_url }}"
/>
<div class="np-card-text-wrapper">
<div class="np-hidden-desktop np-card-header">
<i class="np-card-header-icon far fa-road"></i>
<div class="np-card-header-type">{% t shared.learning_path.title %}</div>
<div class="np-hidden-desktop np-card-header-items-count">
{{ learning_path.items.count }} {% t .items %}
</div>
</div>
<div class="np-hidden-mobile np-card-header">
<div class="np-card-header-type">{% t shared.learning_path.title %}</div>
<i class="np-card-header-icon far fa-road"></i>
</div>
<div class="np-card-content np-card-padding np-card-content-vertical">
<h3 class="np-card-content-title">
{{ learning_path.name }}
</h3>
<div class="np-card-content-subtitle">
{{ learning_path.instructor_names }}
</div>
<div class="np-hidden-mobile np-card-content-description">
{{ learning_path.description }}
</div>
<div class="np-hidden-mobile np-card-content-progress
np-button-color">
{% t shared.progress, count: learning_path.progress %}
</div>
<div class="np-hidden-mobile np-card-progress-bar-container">
<div
style="width: {{ learning_path.progress }}%"
class="np-button-background-color np-card-progress-bar">
</div>
</div>
<div class="np-card-content-footer">
<div class="np-hidden-desktop np-card-content-progress
np-button-color">
{% t shared.progress, count: learning_path.progress %}
</div>
<a class="np-button" href="{% route learning_path, id: learning_path.id %}">
{% t shared.view %}
</a>
<span class="np-hidden-mobile np-learning-path-items">
<i class="np-button-color np-learning-path-items-icon far fa-graduation-cap"></i>
<span class="np-learning-path-items-count">
{{ learning_path.items.count }} {% t .items %}
</span>
</span>
</div>
</div>
</div>
</div>
</div>
<div class="np-card-stack">
<div class="np-card-stack-level-1"></div>
<div class="np-card-stack-level-2"></div>
</div>
</div>

45
Custom_Templates/customer_templates/Pipedrive - UserLearn/_cards_training_event.html.liquid Normal file
View File

@ -0,0 +1,45 @@
<div class="np-card">
<div class="np-card-container">
<div class="np-card-content-training-event">
<h3 class="np-card-content-title">
{{ training_event.title }}
</h3>
<div class="np-card-content-subtitle">
{% t shared.event_types, key: training_event.event_type %}
</div>
<div class="np-card-training-session">
<span class="np-card-content-label">
{% t .next_session %}
</span>
<div class="np-card-training-session-date">
<div class="np-button-background-color np-card-training-session-date-bar"></div>
<div class="np-card-training-session-date-day">
{{ training_event.sessions.first.day }}
</div>
<div>
<div class="np-card-training-session-date-month">
{{ training_event.sessions.first.month }}
</div>
<div class="np-card-training-session-date-year">
{{ training_event.sessions.first.year }}
</div>
</div>
</div>
</div>
</div>
<div class="np-card-content np-card-content-vertical np-card-padding">
<div class="np-card-training-sessions">
<i class="np-card-training-sessions-icon far fa-calendar-star"></i>
<span class="np-card-training-sessions-label">
{% t .sessions, count: training_event.sessions.size %}
</span>
<a
class="np-button np-button-wide"
href="{% route training_session, id: training_event.sessions.first.id %}"
>
{% t shared.view %}
</a>
</div>
</div>
</div>
</div>

42
Custom_Templates/customer_templates/Pipedrive - UserLearn/_cards_video.html.liquid Normal file
View File

@ -0,0 +1,42 @@
{% assign activities_count = 0 %}
{% for section in course.sections %}
{% assign activities_count = activities_count | plus: section.activities.size %}
{% endfor %}
{% capture course_path %}{% route course, id: course.id %}{% endcapture %}
{% assign scaled_image_url = "" | append: course.image_url | replace: "resize=width:819,height:503", "resize=width:912,height:503" %}
<div class="course-card video-card col-xs-12 col-sm-6 col-lg-4" language="{{course.properties.course_language}}">
<a class="course-card-wrapper" href="{{ course_path }}">
{% if course.properties.course_time != 'NULL' %}
<div class="video-card-ribbon">
<svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M8 15.5C11.866 15.5 15 12.366 15 8.5C15 4.63401 11.866 1.5 8 1.5C4.13401 1.5 1 4.63401 1 8.5C1 12.366 4.13401 15.5 8 15.5ZM16 8.5C16 12.9183 12.4183 16.5 8 16.5C3.58172 16.5 0 12.9183 0 8.5C0 4.08172 3.58172 0.5 8 0.5C12.4183 0.5 16 4.08172 16 8.5ZM6 4C6.27614 4 6.5 4.22386 6.5 4.5V11.6L11.0982 8.73891L7.5 6C7.27496 5.83997 7.22225 5.5278 7.38228 5.30276C7.54232 5.07772 7.85448 5.02501 8.07952 5.18504L12.2898 8.35919C12.4261 8.45614 12.5049 8.61484 12.4998 8.78205C12.4946 8.94926 12.4062 9.10282 12.2642 9.19119L6.26415 12.9245C6.10998 13.0205 5.91591 13.0253 5.75718 12.9371C5.59845 12.8489 5.5 12.6816 5.5 12.5V4.5C5.5 4.22386 5.72386 4 6 4Z" fill="white"/>
</svg>
<div class="video-card-ribbon-text body-s">
{{ course.properties.course_time }}
</div>
</div>
{% endif %}
<img class="course-card-image" src="{{ scaled_image_url }}" alt="{{ course.name }}">
<div class="course-card-content">
<h5 class="course-card-title">
{{ course.name }}
</h5>
<div class="course-card-description">
{{ course.short_description }}
</div>
<div class="course-card-footer">
<div class="course-card-button button-wrapper">
<div class="button-2 button-medium">
<span class="lang-en">Watch video</span>
<span class="lang-de">Video ansehen</span>
<span class="lang-es">Ver el vídeo</span>
<span class="lang-fr">Regarder la vidéo</span>
<span class="lang-br">Assista ao vídeo</span>
</div>
</div>
</div>
</div>
</a>
</div>

344
Custom_Templates/customer_templates/Pipedrive - UserLearn/_catalog_courses.html.liquid Normal file
View File

@ -0,0 +1,344 @@
{% assign categories_uuids = "" %}
{% assign categories_names = "" %}
{% for course in courses.in_catalog %}
{% if course.categories.size > 0 and course.ribbon != "VIDEO" and course.properties.featured == false %}
{% assign course_categories_ids = course.categories | map: 'id' | join: "|||" %}
{% assign course_categories_names = course.categories | map: 'name' | join: "|||" %}
{% assign categories_uuids = categories_uuids | append: course_categories_ids | append: "|||" %}
{% assign categories_names = categories_names | append: course_categories_names | append: "|||" %}
{% endif %}
{% endfor %}
{% assign categories_uuids = categories_uuids | split: "|||" | uniq %}
{% assign categories_names = categories_names | split: "|||" | uniq %}
<div class="courses-hidden np-hidden">
{% for x in (1..categories_uuids.size) %}
{% assign number_of_videos = 0 %}
{% assign y = x | minus: 1 %}
{% assign category_uuid = categories_uuids | slice: y %}
<section class="courses-section" item-categories="{{ category_uuid }}">
<div class="courses-section-header">
<h3 class="courses-title strong">
{% assign category_name = categories_names | slice: y %}
{% if category_name contains 'Pipedrive courses' %}
<span class="lang-en">Pipedrive courses</span>
<span class="lang-de">Pipedrive Kurse</span>
<span class="lang-es">Cursos de Pipedrive</span>
<span class="lang-fr">Cours de Pipedrive</span>
<span class="lang-br">Cursos de Pipedrive</span>
{% elsif category_name contains 'Sales courses' %}
<span class="lang-en">Sales courses</span>
<span class="lang-de">Vertriebskurse</span>
<span class="lang-es">Cursos de Ventas</span>
<span class="lang-fr">Cours de Vente</span>
<span class="lang-br">Cursos de Vendas</span>
{% elsif category_name contains 'Marketing courses' %}
<span class="lang-en">Marketing courses</span>
<span class="lang-de">Marketingkurse</span>
<span class="lang-es">Cursos de Marketing</span>
<span class="lang-fr">Cours de Marketing</span>
<span class="lang-br">Cursos de Marketing</span>
{% elsif category_name contains 'Automations' %}
<span class="lang-en">Automations</span>
<span class="lang-de">Automatisierungen</span>
<span class="lang-es">Automatizaciones</span>
<span class="lang-fr">Automatisations</span>
<span class="lang-br">Automações</span>
{% elsif category_name contains 'Campaigns' %}
<span class="lang-en">Campaigns</span>
<span class="lang-de">Kampagnen</span>
<span class="lang-es">Campañas</span>
<span class="lang-fr">Campagnes</span>
<span class="lang-br">Campanhas</span>
{% elsif category_name contains 'Data import' %}
<span class="lang-en">Data import</span>
<span class="lang-de">Datenimport</span>
<span class="lang-es">Importación de datos</span>
<span class="lang-fr">Importation de données</span>
<span class="lang-br">importação de dados</span>
{% elsif category_name contains 'Deals and Sales Pipelines' %}
<span class="lang-en">Deals and Sales Pipelines</span>
<span class="lang-de">Deals und Vertriebspipelines</span>
<span class="lang-es">Tratos y canalizaciones de ventas</span>
<span class="lang-fr">Offres et pipelines de ventes</span>
<span class="lang-br">Negociações e Pipelines de Vendas</span>
{% elsif category_name contains 'Documents and Invoicing' %}
<span class="lang-en">Documents and Invoicing</span>
<span class="lang-de">Dokumente und Rechnungen</span>
<span class="lang-es">Documentos y Facturación</span>
<span class="lang-fr">Documents et facturation</span>
<span class="lang-br">Documentos e Faturamento</span>
{% elsif category_name contains 'Email and communications' %}
<span class="lang-en">Email and communications</span>
<span class="lang-de">E-Mail und Kommunikation</span>
<span class="lang-es">Correo electrónico y comunicaciones</span>
<span class="lang-fr">Courriel et communications</span>
<span class="lang-br">E-mail e comunicações</span>
{% elsif category_name contains 'Insights and reporting' %}
<span class="lang-en">Insights and reporting</span>
<span class="lang-de">Erkenntnisse und Berichterstattung</span>
<span class="lang-es">Resultados e informes</span>
<span class="lang-fr">Résultats et rapports</span>
<span class="lang-br">Informações e relatórios</span>
{% elsif category_name contains 'Integrations' %}
<span class="lang-en">Integrations</span>
<span class="lang-de">Integrationen</span>
<span class="lang-es">La integración</span>
<span class="lang-fr">L'intégration</span>
<span class="lang-br">Integrações</span>
{% elsif category_name contains 'Lead generation' %}
<span class="lang-en">Lead Generation</span>
<span class="lang-de">Lead Generierung</span>
<span class="lang-es">Generación líder</span>
<span class="lang-fr">Génération de leads</span>
<span class="lang-br">Geração de leads</span>
{% elsif category_name contains 'Pipedrive basics' %}
<span class="lang-en">Pipedrive basics</span>
<span class="lang-de">Pipedrive Grundlagen</span>
<span class="lang-es">Pipedrive Gouplagène</span>
<span class="lang-fr">Pipedrive gouplagène</span>
<span class="lang-br">Noções básicas do Pipedrive</span>
{% elsif category_name contains 'Pipedrive settings' %}
<span class="lang-en">Pipedrive settings</span>
<span class="lang-de">Pipedrive-Einstellungen</span>
<span class="lang-es">Configuración de Pipedrive</span>
<span class="lang-fr">Paramètres Pipedrive</span>
<span class="lang-br">Configurações do Pipedrive</span>
{% elsif category_name contains 'Privacy and security' %}
<span class="lang-en">Privacy and security</span>
<span class="lang-de">Privatsphäre und Sicherheit</span>
<span class="lang-es">Privacidad y seguridad</span>
<span class="lang-fr">Confidentialité et sécurité</span>
<span class="lang-br">Privacidade e segurança</span>
{% elsif category_name contains 'Projects' %}
<span class="lang-en">Projects</span>
<span class="lang-de">Projekte</span>
<span class="lang-es">Proyectos</span>
<span class="lang-fr">Projets</span>
<span class="lang-br">Projetos</span>
{% elsif category_name contains 'User management' %}
<span class="lang-en">User management</span>
<span class="lang-de">Benutzerverwaltung</span>
<span class="lang-es">Gestión de usuarios</span>
<span class="lang-fr">Gestion des utilisateurs</span>
<span class="lang-br">gerenciamento de usuários</span>
{% elsif category_name contains 'Spanish' %}
<span class="lang-en" style="display:none;">Spanish</span>
<span class="lang-de" style="display:none;">Spanisch</span>
<span class="lang-es" style="display:none;">Español</span>
<span class="lang-fr" style="display:none;">Espagnol</span>
<span class="lang-br" style="display:none;">Espanhol</span>
{% elsif category_name contains 'German' %}
<span class="lang-en" style="display:none;"></span>
<span class="lang-de" style="display:none;"></span>
<span class="lang-es" style="display:none;"></span>
<span class="lang-fr" style="display:none;"></span>
<span class="lang-br" style="display:none;"></span>
{% elsif category_name contains 'French' %}
<span class="lang-en" style="display:none;"></span>
<span class="lang-de" style="display:none;"></span>
<span class="lang-es" style="display:none;"></span>
<span class="lang-fr" style="display:none;"></span>
<span class="lang-br" style="display:none;"></span>
{% elsif category_name contains 'Portuguese' %}
<span class="lang-en" style="display:none;"></span>
<span class="lang-de" style="display:none;"></span>
<span class="lang-es" style="display:none;"></span>
<span class="lang-fr" style="display:none;"></span>
<span class="lang-br" style="display:none;"></span>
{% else %}
{{ category_name }}
{% endif %}
</h3>
<div class="courses-section-button" onclick="this.parentNode.parentNode.classList.toggle('courses-section-expanded')">
<span class="courses-section-button-hide">
<span class="lang-en">Show less</span>
<span class="lang-de">Weniger anzeigen</span>
<span class="lang-es">Mostrar menos</span>
<span class="lang-fr">Montrer moins</span>
<span class="lang-br">Mostrar menos</span>
</span>
<span class="courses-section-button-expand">
<span class="lang-en">View all</span>
<span class="lang-de">Alle anzeigen</span>
<span class="lang-es">Ver todos</span>
<span class="lang-fr">Tout afficher</span>
<span class="lang-br">Ver tudo</span>
</span>
</div>
</div>
<div class="courses-list row">
{% for course in courses.in_catalog %}
{% assign course_categories = course.categories | map: 'id' %}
{% if course.ribbon != "VIDEO" and course.properties.featured == false %}
{% for cat in course_categories %}
{% if category_uuid contains cat %}
{% assign number_of_videos = number_of_videos | plus: 1 %}
{% include "cards_course" %}
{% endif %}
{% endfor %}
{% endif %}
{% endfor %}
</div>
</section>
{% if number_of_videos <= 3 %}
<style>
{% if number_of_videos == 1 %}
.courses-section[item-categories="{{ category_uuid }}"] .courses-section-button {
display: none;
}
{% elsif number_of_videos == 2 %}
@media only screen and (min-width: 768px) {
.courses-section[item-categories="{{ category_uuid }}"] .courses-section-button {
display: none;
}
}
{% else %}
@media only screen and (min-width: 1200px) {
.courses-section[item-categories="{{ category_uuid }}"] .courses-section-button {
display: none;
}
}
{% endif %}
</style>
{% endif %}
{% endfor %}
</div>
<div class="courses container width-limit">
{% include "catalog_filter", uuids: categories_uuids, names: categories_names %}
<section class="courses-section courses-section-featured" item-categories="">
<h3 class="courses-title strong">
<span class="lang-en">Featured courses</span>
<span class="lang-de">Ausgewählte Kurse</span>
<span class="lang-es">Cursos destacados</span>
<span class="lang-fr">Cours à l'affiche</span>
<span class="lang-br">Cursos em destaque</span>
</h3>
{% assign any_course = false %}
<div class="courses-list row">
{% for course in courses.in_catalog %}
{% if course.ribbon != "VIDEO" and course.properties.featured %}
{% include "cards_course" %}
{% assign any_course = true %}
{% endif %}
{% endfor %}
</div>
</section>
{% unless any_course %}
<style>
.courses-section-featured {
display: none;
}
</style>
{% endunless %}
</div>
<style>
.courses-title {
padding-bottom: 40px;
padding-top: 40px;
}
.courses-section:not(:last-of-type) .courses-list {
border-bottom: 1px solid #E1E1FF;
}
.courses-section-filtered .courses-list {
border-bottom: none !important;
}
.courses-list {
padding-bottom: 20px;
}
.courses-section-filtered {
margin-top: 40px;
}
.courses-section-header {
display: flex;
justify-content: space-between;
align-items: center;
}
.courses-section-filtered .courses-section-header {
display: none;
}
.courses-section-button {
color: #0070D6;
cursor: pointer;
}
.courses-section-button-hide {
display: none;
}
.courses-section.courses-section-expanded .courses-section-button-hide {
display: block;
}
.courses-section.courses-section-expanded .courses-section-button-expand {
display: none;
}
@media only screen and (max-width: 767px) {
.courses-section:not(.courses-section-expanded) .course-card:not(:first-child) {
display: none;
}
}
@media only screen and (min-width: 768px) {
.courses-list > div {
padding-left: 15px;
padding-right: 15px;
}
.courses-list {
padding-bottom: 40px;
}
}
@media only screen and (min-width: 768px) and (max-width: 1199px) {
.courses-section:not(.courses-section-expanded) .course-card:nth-child(n+3) {
display: none;
}
}
@media only screen and (min-width: 1200px) {
.courses-section:not(.courses-section-expanded) .course-card:nth-child(n+4) {
display: none;
}
}
</style>
<script>
window.addEventListener('DOMContentLoaded', () => {
document.querySelectorAll('.course-card-description').forEach((x) => {
$clamp(x, {clamp: 5});
})
{% if current_school.sso_active? %}
var categoriesOrder = ['ALL',
'e2af61ed-3fbc-448d-9d88-3a66b44735b3',
'8fff4f04-75a5-43df-ae71-1fb4efb052a6',
'5e2da7ac-8c87-49a2-b385-c5be91c0217f'
]
{% else %}
var categoriesOrder = ['ALL',
'b62b5946-6a39-4fac-90e2-87b921620aa4',
'db1bb7fd-bb8f-4939-a731-e9f8e5005370',
'41abb409-d6f4-4ee9-b07e-0320dc3cc719'
]
{% endif %}
let filtersWrapper = document.querySelector('.courses-filter');
let coursesWrapper = document.querySelector('.courses');
categoriesOrder.forEach(category => {
let filter = document.querySelector(`.courses-filter-item[category-uuid="${category}"]`)
if (filter)
filtersWrapper.appendChild(filter);
if (category !== 'ALL') {
let courseSection = document.querySelector(`.courses-section[item-categories="${category}"]`);
if (courseSection) {
coursesWrapper.appendChild(courseSection);
}
}
});
document.querySelectorAll('.courses-filter-hidden .courses-filter-item').forEach(filter => {
filtersWrapper.appendChild(filter);
});
document.querySelectorAll('.courses-hidden .courses-section').forEach(courseSection => {
coursesWrapper.appendChild(courseSection);
});
})
</script>

121
Custom_Templates/customer_templates/Pipedrive - UserLearn/_catalog_faq.html.liquid Normal file
View File

@ -0,0 +1,121 @@
<div class="faq width-limit">
<h2 class="faq-title">
FAQ
</h2>
<div class="faq-list">
<div class="faq-element">
<div class="faq-question" onclick="this.classList.toggle('open')">
<div class="faq-question-icon">
<i class="far fa-angle-down faq-icon-closed"></i>
<i class="far fa-angle-up faq-icon-opened"></i>
</div>
<div class="faq-question-text">
<span class="lang-en">What is a sales training program?</span>
<span class="lang-de">Was ist ein Vertriebstraining?</span>
<span class="lang-es">¿Qué es un programa de capacitación en ventas?</span>
<span class="lang-fr">Qu’est-ce qu’un programme de formation commerciale ?</span>
<span class="lang-br">O que é um programa de formação em vendas?</span>
</div>
</div>
<div class="faq-answer body-s">
<span class="lang-en">A sales training program is a course – be it virtual, on-site or on-demand – designed to equip your salespeople with the skills to maximize revenue. Online sales training is convenient and has several advantages over in-person training. For example, it allows sales professionals to complete an e-learning program at their own pace.</span>
<span class="lang-de">Ein Vertriebstraining ist ein Lehrgang, der als E-Learning-Kurs oder vor Ort stattfinden kann und darauf ausgelegt ist, dass Ihre Vertriebsmitarbeiter die Fähigkeiten erlangen, mit denen sie Umsatz maximieren können. Virtuelles Online-Training ist dabei nicht nur praktisch, sondern hat auch weitere Vorteile gegenüber Kursen vor Ort, so ermöglicht es den Kursteilnehmern z. B. ein E-Learning-Programm im eigenen Tempo zu durchlaufen.</span>
<span class="lang-es">Un programa de capacitación en ventas es un curso – ya sea virtual, en el sitio u on-demand – diseñado para equipar a tus vendedores con las habilidades para maximizar los ingresos. La capacitación en ventas en línea es conveniente y tiene varias ventajas sobre la capacitación en persona. Por ejemplo, permite a los profesionales de ventas completar un programa de aprendizaje electrónico a su propio ritmo.</span>
<span class="lang-fr">Un programme de formation commerciale est un ensemble de cours - en virtuel, en présentiel ou à la demande - permettant aux commerciaux d’optimiser leurs pratiques et de gagner en efficacité . Les formations commerciales en ligne offrent de nombreux avantages par rapport aux cours en présentiel. Par exemple, elles permettent à vos vendeurs de suivre des cours à leur rythme.</span>
<span class="lang-br">Um programa de formação em vendas é um curso - seja ele virtual, no local ou a pedido - concebido para equipar os seus vendedores com as competências necessárias para maximizar as receitas. A formação em vendas on-line é conveniente e tem várias vantagens em relação à formação presencial. Por exemplo, permite que os profissionais de vendas completem um programa de formação em linha ao seu próprio ritmo.</span>
</div>
</div>
<div class="faq-element">
<div class="faq-question" onclick="this.classList.toggle('open')">
<div class="faq-question-icon">
<i class="far fa-angle-down faq-icon-closed"></i>
<i class="far fa-angle-up faq-icon-opened"></i>
</div>
<div class="faq-question-text">
<span class="lang-en">What is a sales academy?</span>
<span class="lang-de">Was ist eine Sales Academy?</span>
<span class="lang-es">¿Qué es una academia de ventas?</span>
<span class="lang-fr">Qu’est-ce qu’une académie de vente ?</span>
<span class="lang-br">O que é uma academia de vendas?</span>
</div>
</div>
<div class="faq-answer body-s">
<span class="lang-en">A sales academy is a space featuring a range of courses and videos for training salespeople. These usually include tutorials to help foster stronger customer relationships, increase revenue and strengthen sales skills. The courses can be multi-part instructor-led training, self-study or more concise lessons that focus on particular aspects of the sales process.</span>
<span class="lang-de">In einer Sales Academy finden Sie eine weite Bandbreite von Kursen und Videos für die Fortbildung Ihres Vertriebsteams und Ihrer Vertriebsmanager. Hierzu gehören in der Regel Tutorials, die erklären, wie man stärkere Kundenbeziehungen fördert, den Umsatz erhöht und Vertriebsfähigkeiten stärkt. Dies können mehrteilige Kurse oder komprimierte Einzeleinheiten zu einem bestimmten Thema des Vertriebsprozesses sein, die von einer Fachkraft geleitet werden oder im Selbststudium stattfinden.</span>
<span class="lang-es">Una academia de ventas es un espacio que ofrece una variedad de cursos y videos para capacitar a los vendedores. Por lo general, incluyen tutoriales para ayudar a fomentar relaciones más sólidas con los clientes, aumentar los ingresos y fortalecer las habilidades de ventas. Los cursos pueden ser de capacitación en varias partes con instructor, de autoaprendizaje o lecciones más concisas que se enfocan en aspectos particulares del proceso de ventas.</span>
<span class="lang-fr">Une académie de vente est un espace rassemblant des cours et des vidéos d’apprentissage destinés aux forces de vente. Cela inclut des tutoriels pour apprendre à renforcer la relation client, développer le chiffre d’affaires et parfaire vos compétences commerciales. Vous trouverez aussi bien des cours en plusieurs parties dispensés par des spécialistes, que des modules à compléter soi-même, en passant par des leçons rapides portant sur des aspects particuliers du processus de vente.</span>
<span class="lang-br">Uma academia de vendas é um espaço com uma variedade de cursos e vídeos para a formação de vendedores. Estes incluem geralmente tutoriais para ajudar a fomentar relações mais fortes com os clientes, aumentar as receitas e reforçar as capacidades de vendas. Os cursos podem ser de formação de instrutores em várias partes, auto-aprendizagem ou aulas mais concisas que se concentram em aspectos particulares do processo de vendas.</span>
</div>
</div>
<div class="faq-element">
<div class="faq-question" onclick="this.classList.toggle('open')">
<div class="faq-question-icon">
<i class="far fa-angle-down faq-icon-closed"></i>
<i class="far fa-angle-up faq-icon-opened"></i>
</div>
<div class="faq-question-text">
<span class="lang-en">What is the Pipedrive Academy?</span>
<span class="lang-de">Was ist die Pipedrive Academy?</span>
<span class="lang-es">¿Qué es la Academia Pipedrive?</span>
<span class="lang-fr">À quoi sert l’Académie de Pipedrive ?</span>
<span class="lang-br">O que é a Academia Pipedrive?</span>
</div>
</div>
<div class="faq-answer body-s">
<span class="lang-en">The Pipedrive Academy is where you’ll find courses, videos and tutorials to help sales professionals level up their sales skills. It features guides that’ll teach you how to get started with Pipedrive’s CRM, how to become an email marketing pro, how to build a successful sales pipeline and much more.</span>
<span class="lang-de">In der Pipedrive Academy finden Sie Kurse, Videos und Tutorials, die Vertriebsmitarbeitern dabei helfen, ihre Vertriebsfähigkeiten zu verbessern. Dazu gehören Leitfäden für den Start mit Pipedrives CRM, E-Mail-Marketing, wie man eine erfolgreiche Sales-Pipeline aufbaut und vieles mehr.</span>
<span class="lang-es">La Academia Pipedrive es donde encontrarás cursos, videos y tutoriales para ayudar a los profesionales de ventas a mejorar sus habilidades de ventas. Cuenta con guías que te enseñarán cómo comenzar con el CRM de Pipedrive, cómo convertirte en un profesional del marketing por correo electrónico, cómo crear un embudo de ventas exitoso y mucho más.</span>
<span class="lang-fr">L'Académie Pipedrive vous donne accès à des cours, des vidéos et des tutoriels conçus pour aider les professionnels de la vente à améliorer leurs compétences commerciales. Vous y trouverez des guides pour faire vos premiers pas avec le CRM Pipedrive, maîtriser le marketing par e-mail, construire un pipeline de ventes à toute épreuve, et bien plus encore.</span>
<span class="lang-br">A Academia Pipedrive é onde se encontram cursos, vídeos e tutoriais para ajudar os profissionais de vendas a nivelar as suas capacidades de vendas. Inclui guias que lhe ensinarão como começar com o CRM da Pipedrive, como tornar-se um profissional de marketing por e-mail, como construir um canal de vendas bem sucedido e muito mais.</span>
</div>
</div>
<div class="faq-element">
<div class="faq-question" onclick="this.classList.toggle('open')">
<div class="faq-question-icon">
<i class="far fa-angle-down faq-icon-closed"></i>
<i class="far fa-angle-up faq-icon-opened"></i>
</div>
<div class="faq-question-text">
<span class="lang-en">What company has the best sales training programs?</span>
<span class="lang-de">Welches Unternehmen hat das beste Vertriebstraining?</span>
<span class="lang-es">¿Qué empresa tiene los mejores programas de capacitación en ventas?</span>
<span class="lang-fr">Quelle entreprise fournit les meilleurs programmes de formation commerciale ?</span>
<span class="lang-br">Que empresa tem os melhores programas de formação em vendas?</span>
</div>
</div>
<div class="faq-answer body-s">
<span class="lang-en">The best sales training programs are those that suit your sales team the most. There are many things that contribute to a successful sales strategy. These include building strong customer relationships, making sure to follow up on time, running smart email marketing campaigns and maintaining a healthy sales pipeline. Pipedrive’s Academy doesn’t only guide users on its software – it helps salespeople acquire sales skills that can be applied to whichever tool they use.</span>
<span class="lang-de">Die besten Fortbildungsprogramme sind die, die ideal zu Ihrem Vertriebsteam passen. Es gibt viele Dinge, die zu einer erfolgreichen Vertriebsstrategie beitragen. Dazu gehören der Aufbau starker Kundenbeziehungen, das Nachfassen im richtigen Moment, durchdachte E-Mail-Marketing-Kampagnen sowie eine gesunde Sales-Pipeline. Die Pipedrive Academy unterstützt Nutzer nicht allein bei der Verwendung der Software, es hilft Vertrieblern auch dabei, Vertriebsfähigkeiten zu erwerben, die für jedes andere Tool Anwendung finden können.</span>
<span class="lang-es">Los mejores programas de capacitación en ventas son los que mejor se adaptan a tu equipo de ventas. Hay muchas cosas que contribuyen a una estrategia de ventas exitosa. Estos incluyen construir relaciones sólidas con los clientes, asegurarse de dar seguimiento a tiempo, ejecutar campañas de marketing por correo electrónico inteligentes y mantener un embudo de ventas saludable. La Academia Pipedrive no solo guía a los usuarios a navegar por su software, sino que también ayuda a los vendedores a adquirir habilidades de ventas que se pueden aplicar a cualquier herramienta que utilicen.</span>
<span class="lang-fr">Les meilleurs programmes de formation commerciale sont avant tout ceux qui correspondent aux besoins de votre équipe de vente. Les éléments concourant au succès de votre stratégie commerciale sont multiples : qualité de votre relation client, timing des relances, pertinence de vos campagnes emailing, santé du pipeline commercial. L’Académie de Pipedrive ne se contente pas de guider les utilisateurs à travers le logiciel : elle permet aux commerciaux d’acquérir de nouvelles compétences qu’ils pourront mettre à profit, quels que soient les outils qu’ils utilisent.</span>
<span class="lang-br">Os melhores programas de formação de vendas são os que mais se adequam à sua equipa de vendas. Há muitas coisas que contribuem para uma estratégia de vendas bem sucedida. Estes incluem a construção de relações fortes com os clientes, assegurar o acompanhamento a tempo, executar campanhas inteligentes de marketing por e-mail e manter um canal de vendas saudável. A Pipedrive's Academy não orienta apenas os utilizadores no seu software - ajuda os vendedores a adquirirem competências de vendas que podem ser aplicadas a qualquer ferramenta que utilizem.</span>
</div>
</div>
<div class="faq-element">
<div class="faq-question" onclick="this.classList.toggle('open')">
<div class="faq-question-icon">
<i class="far fa-angle-down faq-icon-closed"></i>
<i class="far fa-angle-up faq-icon-opened"></i>
</div>
<div class="faq-question-text">
<span class="lang-en">How do I build a sales training program?</span>
<span class="lang-de">Wie baue ich Weiterbildungen im Vertrieb auf?</span>
<span class="lang-es">¿Cómo construyo un programa de capacitación en ventas?</span>
<span class="lang-fr">Comment construire un programme d’apprentissage CRM ?</span>
<span class="lang-br">Como é que construo um programa de formação de vendas?</span>
</div>
</div>
<div class="faq-answer body-s">
<span class="lang-en">There are endless resources available when it comes to training your sales team. Sure, you could trawl the internet looking for the right materials, or you could use one of the guides in the Pipedrive Academy. These courses are tailor-made to help you to achieve sales success, understand email marketing and build a successful sales pipeline.</span>
<span class="lang-de">Die Zahl der Weiterbildungsangebote für Vertriebsteams ist schier endlos verfügbar. Natürlich können Sie das Internet auf der Suche nach den richtigen Ressourcen durchstöbern oder Sie nutzen einen der Leitfäden in der Pipedrive Academy. Diese Kurse sind darauf zugeschnitten, Ihnen zu größtmöglichem Vertriebserfolg zu verhelfen, E-Mail-Markting zu verstehen und eine gesunde Sales-Pipeline aufzubauen.</span>
<span class="lang-es">Hay innumerables recursos disponibles cuando se trata de capacitar a tu equipo de ventas. Claro, podrías buscar en Internet los materiales correctos o podrías usar una de las guías de la Academia Pipedrive. Estos cursos están hechos a la medida para ayudarte a lograr el éxito en las ventas, comprender el marketing por correo electrónico y crear un embudo de ventas exitoso.</span>
<span class="lang-fr">Ce ne sont pas les ressources qui manquent pour entraîner votre équipe de vente. Vous pouvez faire vos propres recherches sur Internet ou consulter les guides de l’Académie de Pipedrive. Spécialement conçus pour vous aider à enclencher votre réussite commerciale, nos cours vous apprendront à maîtriser le marketing par e-mail et à configurer efficacement votre pipeline de vente. </span>
<span class="lang-br">Há inúmeros recursos disponíveis quando se trata de treinar a sua equipa de vendas. Claro, pode navegar na Internet à procura dos materiais certos, ou pode utilizar um dos guias da Academia Pipedrive. Estes cursos são feitos à medida para o ajudar a alcançar o sucesso de vendas, compreender o marketing por correio electrónico e construir um canal de vendas bem sucedido.</span>
</div>
</div>
</div>
</div>

126
Custom_Templates/customer_templates/Pipedrive - UserLearn/_catalog_filter.html.liquid Normal file
View File

@ -0,0 +1,126 @@
{% if uuids.size > 0 %}
<div class="courses-filter">
<div class="courses-filter-item courses-filter-item-active body-s strong" onclick="filterItems(this)" category-uuid="ALL">
<span class="lang-en">All topics</span>
<span class="lang-de">Alle Themen</span>
<span class="lang-es">Todos los temas</span>
<span class="lang-fr">Tous les thèmes</span>
<span class="lang-br">Todos os tópicos</span>
</div>
{% for x in (1..uuids.size) %}
{% assign y = x | minus: 1 %}
<div class="courses-filter-item body-s strong" onclick="filterItems(this)" category-uuid="{{ uuids | slice: y }}">
{% assign category_name = names | slice: y %}
{% if category_name contains 'Pipedrive courses' %}
<span class="lang-en">Pipedrive courses</span>
<span class="lang-de">Pipedrive Kurse</span>
<span class="lang-es">Cursos de Pipedrive</span>
<span class="lang-fr">Cours de Pipedrive</span>
<span class="lang-br">Cursos de Pipedrive</span>
{% elsif category_name contains 'Sales courses' %}
<span class="lang-en">Sales courses</span>
<span class="lang-de">Vertriebskurse</span>
<span class="lang-es">Cursos de Ventas</span>
<span class="lang-fr">Cours de Vente</span>
<span class="lang-br">Cursos de Vendas</span>
{% elsif category_name contains 'Marketing courses' %}
<span class="lang-en">Marketing courses</span>
<span class="lang-de">Marketingkurse</span>
<span class="lang-es">Cursos de Marketing</span>
<span class="lang-fr">Cours de Marketing</span>
<span class="lang-br">Cursos de Marketing</span>
{% elsif category_name contains 'Spanish' %}
<span class="lang-en">Spanish</span>
<span class="lang-de">Spanisch</span>
<span class="lang-es">Español</span>
<span class="lang-fr">Espagnol</span>
<span class="lang-br">Espanhol</span>
{% else %}
{{ category_name }}
{% endif %}
</div>
{% endfor %}
</div>
{% endif %}
<script>
let frenchFilter = document.querySelector('[category-uuid = "757bff69-a942-40ba-9013-c111c35c0dff"]');
let germanDeutchFilter = document.querySelector('[category-uuid = "923e6454-8e23-4e03-8c69-98d8b5c39fdd"]');
let portugeseBRFilter = document.querySelector('[category-uuid = "93e4f5b0-c34e-4d9b-837b-ce36fd34d19e"]');
let spanishFilter = document.querySelector('[category-uuid = "2f2aab71-9b6c-45fd-8b46-ef61cadb9927"]');
frenchFilter.style.display = 'none';
germanDeutchFilter.style.display = 'none';
portugeseBRFilter.style.display = 'none';
spanishFilter.style.display = 'none';
// if(window.location.href.includes('de-')){
// frenchFilter.style.display = 'none';
// portugeseBRFilter.style.display = 'none';
// spanishFilter.style.display = 'none';
//} else if(window.location.href.includes('es-')){
// frenchFilter.style.display = 'none';
// germanDeutchFilter.style.display = 'none';
// portugeseBRFilter.style.display = 'none';
//} else if(window.location.href.includes('fr-')){
// germanDeutchFilter.style.display = 'none';
// portugeseBRFilter.style.display = 'none';
// spanishFilter.style.display = 'none';
//} else if(window.location.href.includes('br-')){
// frenchFilter.style.display = 'none';
// germanDeutchFilter.style.display = 'none';
// spanishFilter.style.display = 'none';
//}
</script>
<style>
.courses-filter {
display: flex;
gap: 10px;
margin-top: 40px;
flex-wrap: wrap;
}
.courses-filter-item {
padding: 10px 20px;
border: 2px solid #E4E6E9;
border-radius: 300px;
color: #656E7A;
white-space: nowrap;
cursor: pointer;
}
.courses-filter-item:not(.courses-filter-item-active):hover {
color: var(--black-digital);
}
.courses-filter-item-active {
color: var(--green);
border: 2px solid var(--green);
cursor: default;
}
.category-hidden {
display: none !important;
}
</style>
<script>
function filterItems(element) {
if (!element.classList.contains(('courses-filter-item-active'))) {
document.querySelector('.courses-filter-item-active').classList.remove('courses-filter-item-active');
element.classList.add('courses-filter-item-active');
let selectedCategoryUUID = element.getAttribute('category-uuid');
document.querySelectorAll('.courses-section-expanded').forEach(x => {x.classList.remove('courses-section-expanded')});
document.querySelectorAll('.courses-section-filtered').forEach(x => {x.classList.remove('courses-section-filtered')});
document.querySelectorAll('[item-categories]').forEach(x => {x.classList.remove('category-hidden')});
if (selectedCategoryUUID !== 'ALL') {
document.querySelectorAll(".courses-section").forEach(x => {
if (x.getAttribute('item-categories') === selectedCategoryUUID) {
x.classList.add('courses-section-expanded');
x.classList.add('courses-section-filtered');
} else {
x.classList.add('category-hidden');
}
});
}
window.sessionStorage.setItem('last-selected-video-filter', selectedCategoryUUID);
}
}
</script>

87
Custom_Templates/customer_templates/Pipedrive - UserLearn/_catalog_page_info.html.liquid Normal file
View File

@ -0,0 +1,87 @@
<section class="page-info-wrapper">
<div class="page-info width-limit">
<div class="page-info-section">
<div class="page-info-section-image-wrapper">
<img class="page-info-section-image" src="https://s3.amazonaws.com/static.northpass.com/pipedrive/page_info_catalog_1.png">
</div>
<div class="page-info-section-text">
<h3 class="page-info-section-title">
<span class="lang-en">What you can find in the Pipedrive Academy:</span>
<span class="lang-de">Was Sie in der Pipedrive Academy erwartet:</span>
<span class="lang-es">Qué puedes encontrar en la Academia de Pipedrive:</span>
<span class="lang-fr">Que trouverez-vous dans l’Académie de Pipedrive ?</span>
<span class="lang-br">O que você encontra na Academia do Pipedrive:</span>
</h3>
<div class="page-info-section-description">
<span class="lang-en">Pipedrive’s Academy is where you’ll find self-paced courses – including online training videos – to help sales professionals and marketers on your team learn and improve their marketing and sales skills. Courses in the academy range from quick, practical lessons that address specific issues your salespeople might encounter along the sales process to longer, multi-part e-learning tutorials that break down much larger topics – such as an introduction to email marketing – into smaller, bite-sized chunks – like <a href="https://www.pipedrive.com/en/academy/courses/organize-your-sales-data">how to organize sales data</a>.</span>
<span class="lang-de">In Pipedrives Academy finden Sie unsere Kurse, die sich ganz auf das individuelle Lerntempo anpassen lassen, damit Mitarbeiter in Vertrieb und Marketing Fähigkeiten in den Bereichen Vertrieb und Marketing erlangen und verbessern. Die Kurse in der Academy reichen dabei von kurzen, praktischen Einheiten, die spezifische Themen angehen bis hin zu mehrteiligen E-Learning-Tutorials, die umfassendere Themen, wie z. B. eine Einführung in das E-Mail-Marketing, in kleinere Teile herunterbrechen, wie etwa für die <a href="https://www.pipedrive.com/en/academy/courses/organize-your-sales-data">Organisation von Vertriebsdaten</a>.</span>
<span class="lang-es">En la Academia Pipedrive encontrarás cursos a tu propio ritmo – incluidos videos de capacitación en línea – para ayudar a los profesionales de ventas y especialistas en marketing de tu equipo a aprender y mejorar sus habilidades de marketing y ventas. Los cursos de la academia van desde lecciones rápidas y prácticas que abordan problemas específicos que tus vendedores pueden encontrar a lo largo del proceso de ventas, hasta tutoriales de aprendizaje electrónico más largos y de varias partes que dividen temas mucho más amplios, como una introducción al marketing por correo electrónico, en temas más pequeños, fragmentos reducidos, como, por ejemplo, <a href="https://www.pipedrive.com/en/academy/courses/organize-your-sales-data">cómo organizar los datos de ventas</a>.</span>
<span class="lang-fr">L’Académie de Pipedrive est un espace où les membres de votre équipe pourront suivre à leur rythme des modules d’apprentissage - y compris des vidéos de formation en ligne - pour acquérir de nouvelles compétences en vente et en marketing. Les cours de l'Académie comportent aussi bien des leçons rapides et pratiques abordant les problèmes spécifiques que vos commerciaux peuvent rencontrer au cours du processus de vente, que des tutoriels d'apprentissage en ligne approfondis et en plusieurs parties, décomposant des sujets beaucoup plus vastes - « Introduction au marketing par e-mail » par exemple - en petites unités - par exemple : <a href="https://www.pipedrive.com/en/academy/courses/organize-your-sales-data">« Comment organiser vos données commerciales »</a></span>
<span class="lang-br">A Academia do Pipedrive é onde você vai encontrar cursos – incluindo vídeos de treinamento – para ajudar profissionais de vendas e de marketing em sua equipe a melhorar suas habilidades. Os cursos da academia variam entre lições rápidas e práticas que tratam de questões específicas que podem ser encontradas em processos de vendas e tutoriais longos, divididos em partes sobre tópicos mais abrangentes – como a introdução ao e-mail marketing – e em tópicos mais específicos – por exemplo, <a href="https://www.pipedrive.com/en/academy/courses/organize-your-sales-data">como organizar seus dados de vendas</a> como organizar seus dados de vendas.</span>
</div>
</div>
</div>
<div class="page-info-section">
<div class="page-info-section-image-wrapper">
<img class="page-info-section-image" src="https://s3.amazonaws.com/static.northpass.com/pipedrive/page_info_catalog_2.png">
</div>
<div class="page-info-section-text">
<h3 class="page-info-section-title">
<span class="lang-en">The benefits of sales training programs:</span>
<span class="lang-de">Die Vorteile von Weiterbildungen im Vertrieb:</span>
<span class="lang-es">Las ventajas de los programas de capacitación en ventas:</span>
<span class="lang-fr">Les avantages d’un programme de formation commerciale</span>
<span class="lang-br">Os benefícios de programas de treinamento em vendas:</span>
</h3>
<div class="page-info-section-description">
<span class="lang-en">
Without proper training, a sales team can struggle to close deals and miss potential revenue. The wrong sales strategy makes it difficult to yield results and sales professionals might pursue bad leads or waste time on unproductive tasks.<br>
Sales training programs help sales teams hone in on their targets in various ways. Among other things, they:<br>
<ul>
<li>Empower sales reps to acquire top sales techniques they can use to engage with new target groups and close deals.</li>
<li>Allow businesses to improve and personalize their communication with prospects. Conducting warmer, less transactional sales conversations and customer relationships is likely to result in repeat business and improved customer retention rates.</li>
<li>Motivate your company’s sales force through consistent nurturing, leading to greater employee retention, morale and productivity.</li>
</ul>
</span>
<span class="lang-de">
Ohne vernünftiges Vertriebstraining wird ein Vertriebsteam Schwierigkeiten haben, Deals abzuschließen und potenzielle Umsätze werden verloren gehen. Die falsche Vertriebsstrategie erschwert das Erreichen von Ergebnissen und Ihre Mitarbeiter verfolgen möglicherweise schlechte Leads oder verschwenden Zeit mit unproduktiven Aufgaben.<br>
Mit Sales-Training-Programmen versteht Ihr Vertriebsteam, wie es sich auf verschiedene Weisen seinen Zielen nähern kann. In den Vertriebsweiterbildungen lernen sie u. a.:<br>
<ul>
<li>Vertriebstechniken, mit denen das Team neue Zielgruppen erreicht und Deals abschließt</li>
<li>Wie Unternehmen die Kommunikation mit Interessenten verbessern und personalisieren können. Persönlichere, weniger transaktionale Vertriebsgespräche und solide Kundenbeziehungen erhöhen die Wahrscheinlichkeit erneuter Einkäufe und verbessern die Kundenbindung.</li>
<li>Motivation des Vertriebsteams, was zu stärkere Mitarbeiterbindung, besserer Moral und gesteigerter Produktivität führt.</li>
</ul>
</span>
<span class="lang-es">
Sin la capacitación adecuada, un equipo de ventas puede tener dificultades para cerrar tratos y perder ingresos potenciales. La estrategia de ventas incorrecta dificulta la obtención de resultados y los profesionales de ventas pueden buscar malos prospectos o perder el tiempo en tareas improductivas.<br>
Los programas de capacitación en ventas ayudan a los equipos de ventas a perfeccionar sus objetivos de varias maneras. Entre otras cosas, los programas:<br>
<ul>
<li>Empoderan a los representantes de ventas para que adquieran las mejores técnicas de ventas que pueden usar para interactuar con nuevos grupos objetivo y cerrar tratos.</li>
<li>Permiten que las empresas mejoren y personalicen su comunicación con los clientes potenciales. Es probable que llevar a cabo conversaciones de ventas y relaciones con los clientes más cálidas y menos transaccionales resulte en negocios repetidos y mejores índices de retención de clientes.</li>
<li>Motivan al equipo de ventas de tu empresa a través de una nutrición constante, lo que lleva a una mayor retención, moral y productividad de los empleados.</li>
</ul>
</span>
<span class="lang-fr">
Sans formation adéquate, votre équipe commerciale aura des difficultés à conclure des ventes et à générer du chiffre d’affaires. Une stratégie de vente adaptée est indispensable pour obtenir des résultats et éviter que votre force de vente ne démarche les mauvais prospects ou perde son temps en activités improductives.<br>
Nos programmes de formation à la vente sont conçus pour aider les équipes commerciales à affiner leurs objectifs de multiples façons. Ils vous permettront notamment de :<br>
<ul>
<li>Fournir à vos commerciaux les meilleures techniques de vente pour démarcher de nouveaux groupes cibles et conclure davantage d’affaires</li>
<li>Permettre aux entreprises d’améliorer et de personnaliser la manière dont elles communiquent avec les prospects : en apportant un supplément d’âme et de chaleur à vos échanges commerciaux, vous avez plus de chances de générer des ventes répétées et de booster vos taux de rétention client.</li>
<li>Motiver votre force de vente en l’aidant continuellement à développer ses capacités, pour favoriser le moral, la productivité et la rétention des employés.</li>
</ul>
</span>
<span class="lang-br">
Sem treinamento adequado, uma equipe de vendas pode ter dificuldades para fechar negócios e acabar perdendo receita. A estratégia de vendas errada dificulta a geração de resultados e profissionais de vendas acabam focando em leads ruins ou perdendo tempo em tarefas que não são produtivas.<br>
Os programas de treinamento de vendas ajudam as equipes a atingir suas metas de várias maneiras. Entre outras coisas, esses programas ajudam a:<br>
<ul>
<li>Capacitar representantes de vendas para melhorar técnicas de vendas que podem ser usadas para criar engajamento com novos grupos e fechar negócios.</li>
<li>Permitir que as empresas melhorem e personalizem sua comunicação com clientes em potencial. Ao conduzir conversas e relacionamentos com clientes mais interessados provavelmente resultará em negócios contínuos e melhores taxas de retenção de clientes.</li>
<li>Motivar as equipes de vendas da sua empresa por meio de nutrição consistente, levando a uma maior retenção, moral e produtividade dos funcionários.</li>
</ul>
</span>
</div>
</div>
</div>
</div>
</section>

4
Custom_Templates/customer_templates/Pipedrive - UserLearn/_certificates_info_column.html.liquid Normal file
View File

@ -0,0 +1,4 @@
<div class="col-xs-12 col-md-4 spacing-clear">
{% include "certificates_verification" %}
{% include "certificates_metadata" %}
</div>

59
Custom_Templates/customer_templates/Pipedrive - UserLearn/_certificates_metadata.html.liquid Normal file
View File

@ -0,0 +1,59 @@
<div class="np-card spacing-clear">
<div class="np-card-container padding-spacing-8">
<div class="row np-certificate-metadata-row">
<div class="col-xs-6 col-md-6">
<p class="np-certificate-metadata-title" >
{% t .learner %}
</p>
</div>
<div class="col-xs-6 col-md-6">
<p class="np-certificate-metadata-value">
{{certificate.learner_name}}
</p>
</div>
</div>
<div class="line"></div>
{% if certificate.issuer_name_enabled? %}
<div class="row np-certificate-metadata-row">
<div class="col-xs-6 col-md-6">
<p class="np-certificate-metadata-title">
{% t .issued_by %}
</p>
</div>
<div class="col-xs-6 col-md-6">
<p class="np-certificate-metadata-value">
{{ certificate.issuer_name }}
</p>
</div>
</div>
<div class="line"></div>
{% endif %}
<div class="row np-certificate-metadata-row">
<div class="col-xs-6 col-md-6">
<p class="np-certificate-metadata-title" >
{% t .issued_on %}
</p>
</div>
<div class="col-xs-6 col-md-6">
<p class="np-certificate-metadata-value">
{{ certificate.issue_date }}
</p>
</div>
</div>
<div class="line"></div>
<div class="row np-certificate-metadata-row">
<div class="col-xs-6 col-md-6">
<p class="np-certificate-metadata-title" >
{% t .expires_on %}
</p>
</div>
<div class="col-xs-6 col-md-6">
<p class="np-certificate-metadata-value">
{{ certificate.expiration_date_translation }}
</p>
</div>
</div>
</div>
</div>

35
Custom_Templates/customer_templates/Pipedrive - UserLearn/_certificates_preview.html.liquid Normal file
View File

@ -0,0 +1,35 @@
<script type="text/javascript">
const resizeIframe = () => {
const combinedPadding = 16;
const previewIframe = document.getElementById("previewIframe");
const previewIFrameCard = document.getElementById("previewIFrameCard");
const templateInPreviewContainer = previewIframe.contentWindow.document.querySelector('.np-certificate-container');
const previewIframeContentHeight = templateInPreviewContainer.offsetHeight;
const previewIframeContentWidth = templateInPreviewContainer.offsetWidth;
const certificateRatio = previewIframeContentHeight / previewIframeContentWidth;
templateInPreviewContainer.style.margin = 0;
previewIFrameCard.style.height = `${previewIFrameCard.offsetWidth * certificateRatio}px`;
const scaledIframeWidth = previewIFrameCard.offsetWidth - combinedPadding;
const scaledIframeHeight = scaledIframeWidth * certificateRatio;
const scale = scaledIframeHeight / previewIframeContentHeight;
previewIframe.style.transform = `scale(${scale})`;
}
window.onresize = resizeIframe;
</script>
<div class="col-xs-12 col-md-8 np-certificate-iframe-container">
<div class="np-card spacing-clear">
<div id="previewIFrameCard" class="np-card-container np-certificate-card">
<iframe
id="previewIframe"
onload="resizeIframe()"
class="np-certificate-iframe-preview"
srcdoc="{{ certificate.certificate_template_html }}"
></iframe>
</div>
</div>
</div>

44
Custom_Templates/customer_templates/Pipedrive - UserLearn/_certificates_top_bar.html.liquid Normal file
View File

@ -0,0 +1,44 @@
<div class="top-bar np-certificate-top-bar-spacing">
<div class="top-bar__container uk-container uk-container-center uk-padding-horizontal np-max-width">
<div class="top-bar__col">
<h2 class="np-certificate-title" >
{{certificate.certificate_name}}
</h2>
</div>
<div class="button-container np-certificate-button-container">
{% if certificate.linkedin_sharing_enabled and current_person.signed_in? and certificate.learner_uuid == current_person.id %}
<a
class="np-button np-certificate-button np-certificate-button-secondary"
href="{{certificate.linkedin_share_url}}"
target="_blank"
>
<i class="fab fa-linkedin np-certificate-share-icon"></i>
{% t .share %}
</a>
{% endif %}
<button
id="print"
type="button"
class="np-button np-certificate-button np-certificate-button-secondary np-certificate-button-print"
>
{% t .print %}
</button>
{% if certificate.generating_pdf %}
<div class="np-button np-certificate-button np-certificate-button-primary np-certificate-spinner-container">
<i class="loader fad fa-spinner-third fa-spin np-certificate-spinner-icon np-button-font-color"></i>
</div>
{% else %}
<a
href="{{ certificate.download_url }}"
aria-label="{% t .download %}"
target="_blank"
rel="noopener noreferrer"
download
class="np-button np-certificate-button np-certificate-button-primary np-button-font-color"
>
{% t .download %}
</a>
{% endif %}
</div>
</div>
</div>

15
Custom_Templates/customer_templates/Pipedrive - UserLearn/_certificates_verification.html.liquid Normal file
View File

@ -0,0 +1,15 @@
<div class="np-card spacing-clear np-certificate-verification-card">
<div class="np-card-container np-certificate-verification-container">
<div class="np-certificate-verification-icon-container np-certificate-verification-icon-container-{{certificate.verification_status}}">
<i class="far fa-{{certificate.verification_icon}} np-certificate-verification-icon"></i>
</div>
<div class="np-certificate-verification-info-container">
<h2 class="np-certificate-verification-info-status spacing-clear">
{{certificate.verification_title}}
</h2>
<p class="np-certificate-verification-info-description spacing-clear">
{{certificate.verification_description}}
</p>
</div>
</div>
</div>

383
Custom_Templates/customer_templates/Pipedrive - UserLearn/_cookie_banner.html.liquid Normal file
View File

@ -0,0 +1,383 @@
<script
src="https://cdn.cookielaw.org/scripttemplates/otSDKStub.js"
data-document-language="true"
type="text/javascript"
charset="UTF-8"
data-domain-script="c938af5b-8612-421f-8d15-740c329a09bc{% if current_school.properties.sandbox %}-test{% endif %}"></script>
<script type="text/javascript">
!(function () {
var analytics = (window.analytics = window.analytics || []);
if (!analytics.initialize)
if (analytics.invoked)
window.console &&
console.error &&
console.error("Segment snippet included twice.");
else {
analytics.invoked = !0;
analytics.methods = [
"trackSubmit",
"trackClick",
"trackLink",
"trackForm",
"pageview",
"identify",
"reset",
"group",
"track",
"ready",
"alias",
"debug",
"page",
"once",
"off",
"on",
"addSourceMiddleware",
"addIntegrationMiddleware",
"setAnonymousId",
"addDestinationMiddleware",
];
analytics.factory = function (e) {
return function () {
var t = Array.prototype.slice.call(arguments);
t.unshift(e);
analytics.push(t);
return analytics;
};
};
for (var e = 0; e < analytics.methods.length; e++) {
var key = analytics.methods[e];
analytics[key] = analytics.factory(key);
}
analytics.load = function (key, e) {
var t = document.createElement("script");
t.type = "text/javascript";
t.async = !0;
t.src =
"https://cdn.segment.com/analytics.js/v1/" +
key +
"/analytics.min.js";
var n = document.getElementsByTagName("script")[0];
n.parentNode.insertBefore(t, n);
analytics._loadOptions = e;
};
analytics._writeKey = "Toe2jCBJvPgwWBT0GvOylUgge4ZHeEyc"; //this will change between PROD and PPR versions. Not final key.
analytics.SNIPPET_VERSION = "4.15.3";
}
})();
var gtm_middleware = function({payload, next, integration}) {
if (payload.obj.messageId) {
payload.obj.properties.messageId = payload.obj.messageId;
}
next(payload);
};
window.analytics.addDestinationMiddleware('Google Tag Manager',[gtm_middleware]);
</script>
<script>
// Read Google Analytics cookie values and format them
function getCookie(name) {
const match = document.cookie.match(new RegExp(`(^| )${name}=([^;]+)`));
return Array.isArray(match) && match.length > 1 ? match[2] : "";
}
("use strict");
function _slicedToArray(t, e) {
return (
_arrayWithHoles(t) || _iterableToArrayLimit(t, e) || _nonIterableRest()
);
}
function _nonIterableRest() {
throw new TypeError("Invalid attempt to destructure non-iterable instance");
}
function _iterableToArrayLimit(t, e) {
var r = [],
n = !0,
i = !1,
o = void 0;
try {
for (
var a, l = t[Symbol.iterator]();
!(n = (a = l.next()).done) && (r.push(a.value), !e || r.length !== e);
n = !0
);
} catch (t) {
(i = !0), (o = t);
} finally {
try {
n || null == l.return || l.return();
} finally {
if (i) throw o;
}
}
return r;
}
function _arrayWithHoles(t) {
if (Array.isArray(t)) return t;
}
function getGoogleAnalyticsClients() {
try {
return ga && "function" == typeof ga.getAll ? ga.getAll() : [];
} catch (t) {
return [];
}
}
function formatGACookieValue(t) {
if (!t) return "";
var e = _slicedToArray("".concat(t).split("."), 4),
r = e[2],
n = e[3];
return r && n ? "".concat(r, ".").concat(n) : "";
}
function getAnalyticsValues() {
var t = getGoogleAnalyticsClients(),
e = "",
r = "";
return (
(r = t.length
? ((e = t[0].get("clientId")), t[0].get("_gid"))
: ((e = formatGACookieValue(getCookie("_ga"))),
formatGACookieValue(getCookie("_gid")))),
{ ga_client_id: e, gid: r }
);
}
</script>
<script type="text/javascript">
function OptanonWrapper() {
(function loadSegmentTemplate() {
if (typeof window.analytics.load !== "function") {
return;
}
var groups = window.OnetrustActiveGroups || "C0001";
if (!groups.includes("C0002")) {
return;
}
//write key within load call also would need updated.
window.analytics.load("Toe2jCBJvPgwWBT0GvOylUgge4ZHeEyc", {
integrations: {
// Performance
"Google Tag Manager": groups.includes("C0002")
},
});
{% if current_person.signed_in? %}
{% if current_school.sso_active? %}
var email = '{{ current_person.email }}' || null
var user_id = '{{ current_person.id }}' || null
var sso_uid = '{{ current_person.sso_uid }}' || null
{% else %}
var email = '{{ current_person.email }}' || null
var user_id = '{{ current_person.id }}' || null
var sso_uid = null
{% endif %}
{% else %}
var email = null
var user_id = null
var sso_uid = null
{% endif %}
analytics.identify({
"traits":{
"northpass_email": email ,
"northpass_identifier": user_id,
"pd_sso" : sso_uid
},
});
analytics.page(document.title, getAnalyticsValues());
})();
}
</script>
{% comment %}
<style>
#onetrust-consent-sdk *:focus {
outline: none !important;
}
#onetrust-banner-sdk .banner_logo {
background-image: url("https://s3.amazonaws.com/static.northpass.com/pipedrive/cookie.svg");
height: 158px;
background-repeat: no-repeat;
background-position: center;
display: block !important;
}
#onetrust-policy-text {
margin-top: 40px !important;
color: var(--black-digital) !important;
font-size: 18px !important;
line-height: 30px !important;
}
#onetrust-button-group-parent {
margin-top: 15px !important;
}
/* button-2 */
#onetrust-pc-btn-handler, .save-preference-btn-handler {
background: #E1E1FF !important;
color: #413D99 !important;
border: none !important;
padding: 10px 20px !important;
font-size: 18px !important;
line-height: 21px !important;
font-weight: 700 !important;
border-radius: 4px !important;
text-align: center !important;
cursor: pointer !important;
text-decoration: none !important;
width: fit-content !important;
}
#onetrust-pc-btn-handler:hover, .save-preference-btn-handler:hover {
background: #C4C2FF !important;
color: #413D99 !important;
opacity: 1 !important;
}
/* button-1 */
#onetrust-accept-btn-handler, #accept-recommended-btn-handler {
background: var(--purple) !important;
color: #FFF !important;
border: none !important;
padding: 10px 20px !important;
font-size: 18px !important;
line-height: 21px !important;
font-weight: 700 !important;
border-radius: 4px !important;
text-align: center !important;
width: fit-content !important;
cursor: pointer !important;
text-decoration: none !important;
}
#onetrust-accept-btn-handler:hover, #accept-recommended-btn-handler:hover{
background: #413D99 !important;
color: white !important;
opacity: 1 !important;
}
.banner-actions-container {
width: fit-content !important;
}
#onetrust-button-group {
display: flex !important;
justify-content: space-evenly;
flex-direction: row-reverse;
}
#ot-pc-title {
font-weight: 700 !important;
font-size: 18px !important;
line-height: 30px !important;
color: var(--black-digital) !important;
margin-top: 40px !important;
margin-bottom: 18px !important;
}
#ot-pc-desc {
font-size: 14px !important;
line-height: 25px !important;
color: var(--black-digital) !important;
}
.privacy-notice-link {
color: #0070D6 !important;
text-decoration: none !important;
}
#ot-category-title {
font-weight: 700 !important;
font-size: 18px !important;
line-height: 30px !important;
color: var(--black-digital) !important;
}
.ot-cat-header {
line-height: 25px !important;
color: var(--black-digital) !important;
margin-top: -8px !important;
margin-left: 10px !important;
font-size: 16px !important;
font-weight: 700 !important;
}
.ot-switch-nob {
background: #DADDE1 !important;
height: 23px !important;
border: none !important;
}
#onetrust-pc-sdk .ot-switch-nob::before {
bottom: 3px !important;
background-color: #FFF !important;
height: 17px !important;
width: 17px !important;
left: 3px !important;
}
.category-switch-handler:checked ~ .ot-switch .ot-switch-nob {
background: var(--green) !important;
}
.ot-always-active {
color: var(--black-digital) !important;
font-weight: 400 !important;
font-size: 14px !important;
}
.ot-pc-header {
height: 0 !important;
position: relative !important;
padding: 0 !important;
}
#ot-pc-content {
top: 0 !important;
}
#onetrust-consent-sdk #onetrust-pc-sdk .ot-tgl input:focus + .ot-switch {
outline: none !important;
}
.ot-pc-logo {
display: none !important;
}
.ot-acc-grpcntr.ot-acc-txt {
background: none !important;
font-size: 16px !important;
}
.ot-acc-grpdesc.ot-category-desc {
color: var(--black-digital) !important;
font-size: 16px !important;
}
.ot-plus-minus {
background: #f4f5f6 !important;
border-radius: 50% !important;
height: 24px !important;
width: 24px !important;
}
.ot-plus-minus > span {
display: none !important;
}
.ot-plus-minus::after {
display: block;
position: relative;
content: '';
height: 24px;
width: 24px;
top: 1px;
background: url(https://s3.amazonaws.com/static.northpass.com/pipedrive/cookie-caret.svg) no-repeat center;
transition: rotate 0.7s;
}
button[aria-expanded="true"] ~ .ot-acc-hdr .ot-plus-minus::after {
rotate: -180deg;
}
</style>
{% endcomment %}
{% if current_person.signed_in? and current_school.properties.sandbox == false %}
<script>
let permissionCookie = ''
function validateCookieProperty() {
getCookie('OptanonConsent').split('&').forEach(x => {
if (x.startsWith('groups='))
permissionCookie = decodeURIComponent(x.split('=')[1])
})
if (permissionCookie !== '{{ current_person.properties.cookie_permissions }}') {
const xhr = new XMLHttpRequest();
{% if current_school.sso_active? %}
var url = 'https://www.workato.com/webhooks/rest/997192d2-6726-4f22-afbc-8cf021019896/pipedrive-sso-change-cookie-value'
{% else %}
var url = 'https://www.workato.com/webhooks/rest/4a75076f-e7be-472b-b661-319f34ee9d24/pipedrive-open-change-cookie-value'
{% endif %}
xhr.open('POST', url);
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.send(JSON.stringify({
"personUUID": '{{ current_person.id }}',
"newCookie": permissionCookie
}));
}
}
validateCookieProperty();
</script>
{% endif %}

4
Custom_Templates/customer_templates/Pipedrive - UserLearn/_course_activity_locked.html.liquid Normal file
View File

@ -0,0 +1,4 @@
<i class="far fa-lock-alt np-course-outline-content-activity-icon-locked"></i>
<span class="np-course-outline-content-activity-title">
{{ activity.title }}
</span>

15
Custom_Templates/customer_templates/Pipedrive - UserLearn/_course_activity_unlocked.html.liquid Normal file
View File

@ -0,0 +1,15 @@
{% if course.enrolled? %}
<a
href="{% route activity_viewer,
id: activity.id,
course_id: params.course_id,
learning_path_id: params.learning_path_id
%}" class="{{ class }}"
>
{{ activity.title }}
</a>
{% else%}
<span class="{{ class }}">
{{ activity.title }}
</span>
{% endif %}

10
Custom_Templates/customer_templates/Pipedrive - UserLearn/_course_categories.html.liquid Normal file
View File

@ -0,0 +1,10 @@
<h3 class="np-card-heading">
{% t .header %}
</h3>
<div class="np-flex">
{% for category in course.categories %}
<div class="np-content-categories-content-item">
{{ category.name }}
</div>
{% endfor %}
</div>

45
Custom_Templates/customer_templates/Pipedrive - UserLearn/_course_cover.html.liquid Normal file
View File

@ -0,0 +1,45 @@
{% if current_person.signed_in? and course.enrolled? %}
<script>
window.location.replace('{% route course_viewer, course_id: course.id, learning_path_id: params.learning_path_id %}')
</script>
{% else %}
<main>
{% include "course_green_card" %}
{% if course.instructors and course.instructors.size > 0 %}
{% include "course_instructor_card" %}
{% endif %}
{% include "course_outline" %}
{% include "catalog_faq" %}
{% include "course_recommended_courses" %}
{% unless current_person.signed_in? %}
{% assign banner_title = "<span class='lang-en'>How to get most out of Pipedrive?</span>
<span class='lang-de'>Wie mache ich das meiste aus Pipedrive?</span>
<span class='lang-es'>¿Cómo sacar el máximo provecho de Pipedrive?</span>
<span class='lang-fr'>Comment tirer le maximum de Pipedrive ?</span>
<span class='lang-br'>Como aproveitar o Pipedrive ao máximo?</span>"
%}
{% assign banner_text = "<span class='lang-en'>Welcome to Pipedrive Academy! Pipedrive Academy features CRM training videos and tutorials to help you level up your CRM and sales skills, from quick CRM courses to in-depth tutorials on specific features.</span>
<span class='lang-de'>Willkommen bei der Pipedrive Academy! In der Pipedrive Academy finden Sie CRM-Schulungsvideos und -Lernprogramme, die Ihnen helfen, Ihre CRM- und Vertriebskenntnisse zu verbessern, von schnellen CRM-Kursen bis hin zu ausführlichen Lernprogrammen zu bestimmten Funktionen.</span>
<span class='lang-es'>¡Bienvenido a la Academia Pipedrive! La Academia Pipedrive cuenta con videos y tutoriales de capacitación en CRM para ayudarte a subir de nivel en tus habilidades de CRM y ventas, desde cursos rápidos hasta tutoriales avanzados sobre funciones específicas.</span>
<span class='lang-fr'>Bienvenue dans l'Académie de Pipedrive ! L'Académie de Pipedrive propose des vidéos de formation au CRM et des tutoriels pour améliorer vos compétences en vente et en relation client. Vous y trouverez aussi bien des leçons sur la GRC que des tutos approfondis sur des outils spécifiques. </span>
<span class='lang-br'>Bem-vindo(a) à Academia do Pipedrive! A Academia do Pipedrive conta com vídeos de treinamento de CRM e tutoriais para ajudar você a melhorar suas habilidades de CRM e vendas. De cursos rápidos de CRM até tutoriais detalhados sobre recursos específicos, temos tudo aqui.</span>"
%}
{% assign banner_button_text = '<span class="lang-en">Start today</span>
<span class="lang-de">Heute starten</span>
<span class="lang-es">Empezar hoy mismo</span>
<span class="lang-fr">Commencez dès aujourd&#39;hui</span>
<span class="lang-br">Comece hoje mesmo</span>'
%}
{% assign banner_button_link = "#sso-widget" %}
{% include "green_banner_text_bg_image" %}
{% endunless %}
</main>
<script>
addEventListener("DOMContentLoaded", () => {
document.querySelector('#side-menu-courses')?.classList.add('side-menu-link-active');
document.querySelector('.header-navigation-item[href="/app/catalog"]')?.classList.add('header-navigation-item-active');
})
</script>
{% endif %}

6
Custom_Templates/customer_templates/Pipedrive - UserLearn/_course_description.html.liquid Normal file
View File

@ -0,0 +1,6 @@
<h3 class="np-card-heading">
{% t .header, key: current_school.course_vocabulary %}
</h3>
<div class="np-card-text">
{{ course.full_description }}
</div>

40
Custom_Templates/customer_templates/Pipedrive - UserLearn/_course_desktop_view.html.liquid Normal file
View File

@ -0,0 +1,40 @@
<div class="np-card-container">
<div class="np-resource-header np-course-header np-card-padding-large">
{% include "course_header" %}
</div>
<div class="np-divider"></div>
<div class="row np-course-content np-card-padding-dynamic">
<div class="col-xs-12 col-sm-6">
<img
src="{{ course.image_url }}"
class="np-top-image np-top-image-spacing"
alt="{{ course.name }}"
/>
{% include "course_description" %}
{% if course.categories.any? %}
<div class="np-card-content-divider">
{% include "course_categories" %}
</div>
{% 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="np-grid-spacing col-xs-12 col-sm-6">
<div class="np-top-cta">
{% include "course_progress_and_cta" %}
</div>
{% include "course_outline" %}
</div>
</div>
</div>

28
Custom_Templates/customer_templates/Pipedrive - UserLearn/_course_events.html.liquid Normal file
View File

@ -0,0 +1,28 @@
<h3 class="np-card-heading">
{% t .header %}
</h3>
<div class="np-flex-column">
{% for event in course.events %}
<div class="np-course-events-content-item">
<div class="np-course-events-content-date np-button-background-color">
<div class="np-course-events-content-month">
{{ event.sessions.first.abbreviated_month }}
</div>
<div class="np-course-events-content-day">
{{ event.sessions.first.day }}
</div>
</div>
<div class="np-course-events-content-details">
<div class="np-course-events-content-name">
{{ event.title }}
</div>
<div class="np-course-events-content-type np-text-light">
{% t shared.event_types, key: event.event_type %}
</div>
<div class="np-course-events-content-time np-button-color">
{{ event.sessions.first.time_period }} {{ event.sessions.first.time_zone }}
</div>
</div>
</div>
{% endfor %}
</div>

196
Custom_Templates/customer_templates/Pipedrive - UserLearn/_course_green_card.html.liquid Normal file
View File

@ -0,0 +1,196 @@
<div class="course-banner-wrapper course-banner-wrapper-image course-green-card">
<div class="course-banner width-limit">
{% if course.promo_video_embed_url.size > 0 %}
<div class="course-video">
{{ course.promo_video_embed_url }}
</div>
{% else %}
<img class="course-banner-image" alt="banner image" src="{{ course.image_url }}">
{% endif %}
<div class="course-banner-content">
<div class="course-return">
<a href="/app/courses">
<span class="lang-en">« Back to all courses</span>
<span class="lang-de">« Zurück zu allen Kursen</span>
<span class="lang-es">« Volver a todos los cursos</span>
<span class="lang-fr">« Retour à l'ensemble des cours</span>
<span class="lang-br">« Voltar a todos os cursos</span>
</a>
</div>
<h1 class="course-banner-title">
{{ course.name }}
</h1>
<div class="course-banner-text">
{{ course.full_description }}
</div>
{% comment %}
Hiding it for now, when reimplementing we need to link it to open academy courses via custom property with enrollemnt link
<div class="course-share">
<a class="course-share-item" onclick="window.open(`https://www.facebook.com/sharer/sharer.php?u=${window.location.host}{% route course_enrollment, code: course.enrollment_code %}`,'_blank').focus()" style="color: #1877F2;">
<i class="fab fa-facebook"></i>
</a>
<a class="course-share-item" onclick="window.open(`https://www.linkedin.com/shareArticle?mini=true&url=${window.location.host}{% route course_enrollment, code: course.enrollment_code %}`,'_blank').focus()" style="color: #0A66C2;">
<i class="fab fa-linkedin"></i>
</a>
<a class="course-share-item" onclick="window.open(`https://twitter.com/intent/tweet?url=${window.location.host}{% route course_enrollment, code: course.enrollment_code %}`,'_blank').focus()" style="color: #1DA1F2;">
<i class="fab fa-twitter"></i>
</a>
<a class="course-share-item" onclick="copyToClipboard()" style="color: #26292C;">
<i class="far fa-link"></i>
</a>
<div class="course-copied">
<span class="lang-en">Link was copied!</span>
<span class="lang-de">Link wurde kopiert!</span>
<span class="lang-es">Enlace copiado.</span>
<span class="lang-fr">Le lien a été copié !</span>
<span class="lang-br">O link foi copiado!</span>
</div>
</div>
{% endcomment %}
<div class="button-wrapper">
{% if current_person.signed_in? %}
{% if course.enrolled? %}
<a class="course-banner-button button-large button-1" href="{% route course_viewer, course_id: course.id, learning_path_id: params.learning_path_id %}">
<span class="lang-en">Continue</span>
<span class="lang-de">Weiter</span>
<span class="lang-es">Continúe en</span>
<span class="lang-fr">Continuer</span>
<span class="lang-br">Continuar</span>
</a>
{% else %}
<a class="course-banner-button button-large button-1" href="{% route course_enrollment, code: course.enrollment_code %}">
<span class="lang-en">Start your course</span>
<span class="lang-de">Starten Sie Ihren Kurs</span>
<span class="lang-es">Comienza tu curso</span>
<span class="lang-fr">Commencez votre cours</span>
<span class="lang-br">Comece seu curso</span>
</a>
{% endif %}
{% else %}
<a class="course-banner-button button-large button-1"
{% if current_school.sso_active? %}
href="#sso-widget"
{% else %}
href="{% route course_enrollment, code: course.enrollment_code %}"
{% endif %}
>
<span class="lang-en">Register for free courses</span>
<span class="lang-de">Anmeldung für kostenlose Kurse</span>
<span class="lang-es">Inscribirse en cursos gratuitos</span>
<span class="lang-fr">S'inscrire à des cours gratuits</span>
<span class="lang-br">Cadastre-se para cursos gratuitos</span>
</a>
{% endif %}
</div>
</div>
</div>
</div>
<style>
.course-return {
color: #005AB0;
margin-bottom: 10px;
}
.course-return:hover {
color: #0070D6;
}
.course-share {
display: flex;
gap: 7px;
position: relative;
width: fit-content;
margin-bottom: 40px;
}
.course-share-item {
padding: 4px;
font-size: 24px;
cursor: pointer;
}
.course-copied {
position: absolute;
opacity: 0;
top: 0;
right: 0;
transition: visibility 0.7s;
z-index: 10;
transform: translate(100%);
white-space: nowrap;
background: white;
padding: 8px;
border-radius: 4px;
}
.course-copied-show {
opacity: 1;
}
.course-video {
height: fit-content;
flex: 1 1 0px;
align-self: center;
margin-bottom: 80px;
}
.course-banner-wrapper {
background: var(--green-light);
}
.course-banner {
padding-top: 40px;
padding-bottom: 40px;
}
.course-banner-image {
width: 100%;
margin-bottom: 20px;
}
.course-banner-title {
color: var(--green);
font-weight: 700;
}
.course-banner-text {
max-width: 800px;
margin: 0 auto 20px;
}
.course-banner-text * {
background: none !important;
}
@media only screen and (min-width: 1024px) {
.course-video {
margin-bottom: 0;
}
.course-banner {
padding-top: 80px;
padding-bottom: 80px;
}
.course-banner-image {
margin-bottom: 0;
flex: 1 1 0px;
width: 0;
object-fit: contain;
}
.course-banner-title {
margin-bottom: 20px;
}
.course-banner-button {
width: max-content;
}
.course-banner-wrapper-image .course-banner-content {
flex: 1 1 0px;
width: 0;
align-self: center;
}
.course-banner-wrapper-image .course-banner {
display: flex;
flex-direction: row-reverse;
gap: 40px;
}
}
</style>
<script>
function copyToClipboard() {
navigator.clipboard.writeText(window.location.host + "{% route course_enrollment, code: course.enrollment_code %}");
let copiedInfo = document.querySelector('.course-copied');
copiedInfo.classList.add('course-copied-show');
setTimeout(() => {
copiedInfo.classList.remove('course-copied-show');
}, 1500);
}
</script>

16
Custom_Templates/customer_templates/Pipedrive - UserLearn/_course_header.html.liquid Normal file
View File

@ -0,0 +1,16 @@
<div class="np-top-vocabulary np-text-title np-text-muted">
{{ current_school.course_vocabulary }}
<i class="far fa-graduation-cap np-button-color np-learning-path-icon np-hidden-mobile">
</i>
</div>
<div class="np-top-title">
<a href="{% route home %}" class="np-back-button" aria-label="{% t shared.go_back %}">
<i class="far fa-arrow-left np-hidden-mobile np-icon-back"></i>
</a>
{{ course.name }}
</div>
<img
src="{{ course.image_url }}"
class="np-top-image np-hidden-desktop"
alt="{{ course.name }}"
/>

79
Custom_Templates/customer_templates/Pipedrive - UserLearn/_course_instructor_card.html.liquid Normal file
View File

@ -0,0 +1,79 @@
{% assign instructor = course.instructors | first %}
<div class="width-limit instructor-card">
<h3 class="instructor-card-title">
<span class="lang-en">Your host for the course</span>
<span class="lang-de">Ihr Kursleiter</span>
<span class="lang-es">Su anfitrión para el curso</span>
<span class="lang-fr">Votre formateur/formatrice</span>
<span class="lang-br">Apresentador do curso</span>
</h3>
<div class="instructor-card-body">
<div class="instructor-image-container">
<img class="instructor-image" src="{{ instructor.avatar_url }}" alt="{{ instructor.name }}">
</div>
<div class="instructor-text-container">
<h4 class="instructor-bio">
<svg class="opinion-quotes" width="26" height="23" viewBox="0 0 26 23" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M24 10C23.6818 11.3796 23.346 12.8476 22.9924 14.4041C22.6742 15.9605 22.3737 17.4816 22.0909 18.9673C21.8081 20.4177 21.5783 21.7619 21.4015 23L14.1364 23L13.7652 22.4163C14.0833 21.1429 14.4899 19.7986 14.9848 18.3837C15.4798 16.9687 16.0101 15.5361 16.5758 14.0857C17.1768 12.6354 17.7601 11.2735 18.3258 10L24 10ZM12.2348 10C11.9167 11.3796 11.5808 12.8476 11.2273 14.4041C10.9091 15.9605 10.6086 17.4816 10.3258 18.9673C10.0429 20.4177 9.81313 21.7619 9.63636 23L2.37121 23L2 22.4163C2.31818 21.1429 2.72475 19.7986 3.2197 18.3837C3.71465 16.9687 4.24495 15.5361 4.81061 14.0857C5.41162 12.6354 5.99495 11.2735 6.56061 10L12.2348 10Z" fill="var(--green)"/>
</svg>
{{ instructor.bio | strip_html }}
</h4>
<div class="instructor-name body-s strong">
{{ instructor.name }},
</div>
<div class="instructor-title body-s">
{{ instructor.title }}
</div>
</div>
</div>
</div>
<style>
.instructor-card {
margin-top: 40px;
margin-bottom: 40px;
}
.instructor-card-title {
margin-bottom: 20px;
}
.instructor-image-container {
margin-bottom: 20px;
width: 100%;
}
.instructor-image {
border-radius: 4px;
width: 100%;
margin: auto;
}
.instructor-bio {
font-weight: 400;
margin-bottom: 20px;
}
.opinion-quotes {
top: -7px;
position: relative;
}
@media only screen and (min-width: 768px) {
.instructor-card {
margin-top: 80px;
margin-bottom: 80px;
}
.instructor-card-title {
margin-bottom: 40px;
}
.instructor-card-body {
display: flex;
}
.instructor-image-container {
margin-bottom: unset;
flex-basis: 22%;
min-width: 300px;
margin-right: 50px;
display: flex;
}
.instructor-text-container {
flex-basis: 48%;
}
}
</style>

22
Custom_Templates/customer_templates/Pipedrive - UserLearn/_course_instructors.html.liquid Normal file
View File

@ -0,0 +1,22 @@
<h3 class="np-card-heading">
{% t .header %}
</h3>
<div class="np-flex">
{% for instructor in course.instructors %}
<div class="np-content-instructors-content-item">
<img
src="{{ instructor.avatar_url }}"
class="np-content-instructors-content-image"
alt="{{ instructor.name }}"
/>
<div class="np-content-instructors-content-description">
<div class="np-content-instructors-content-name">
{{ instructor.name }}
</div>
<div class="np-content-instructors-content-info np-text-light">
{{ instructor.title }}
</div>
</div>
</div>
{% endfor %}
</div>

40
Custom_Templates/customer_templates/Pipedrive - UserLearn/_course_mobile_view.html.liquid Normal file
View File

@ -0,0 +1,40 @@
<div class="np-card-container np-card-padding-large">
{% include "course_header" %}
<div class="np-top-cta">
{% include "course_progress_and_cta" %}
</div>
</div>
{% if course.progress == 0 %}
<div class="np-card-container np-card-padding np-card-spacing">
{% include "course_description" %}
</div>
<div class="np-card-container np-card-padding np-card-spacing">
{% include "course_outline" %}
</div>
{% else %}
<div class="np-card-container np-card-padding np-card-spacing">
{% include "course_outline" %}
</div>
<div class="np-card-container np-card-padding np-card-spacing">
{% include "course_description" %}
</div>
{% endif %}
{% if course.categories.any? %}
<div class="np-card-container np-card-padding np-card-spacing">
{% include "course_categories" %}
</div>
{% endif %}
{% if course.instructors.any? %}
<div class="np-card-container np-card-padding np-card-spacing">
{% include "course_instructors" %}
</div>
{% endif %}
{% if course.events.any? %}
<div class="np-card-container np-card-padding np-card-spacing">
{% include "course_events" %}
</div>
{% endif %}

179
Custom_Templates/customer_templates/Pipedrive - UserLearn/_course_outline.html.liquid Normal file
View File

File diff suppressed because one or more lines are too long

46
Custom_Templates/customer_templates/Pipedrive - UserLearn/_course_progress_and_cta.html.liquid Normal file
View File

@ -0,0 +1,46 @@
<div class="np-top-cta-progress-content">
<div class="np-top-cta-progress-title np-text-title">
{% t .header %}
</div>
<div class="np-progress-bar-container">
<div
style="width: {{ course.progress }}%"
class="np-button-background-color np-card-progress-bar">
</div>
</div>
<div class="np-top-cta-progress-text
{% if course.completed? %} np-color-success {% else %} np-button-color {% endif %}
">
{% t shared.progress, count: course.progress %}
</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 %}
<a
class="np-top-button np-button-font-color np-button np-button-big"
{% 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>
{% endif %}

47
Custom_Templates/customer_templates/Pipedrive - UserLearn/_course_recommended_courses.html.liquid Normal file
View File

@ -0,0 +1,47 @@
<div class="recommended-courses container width-limit">
<h2 class="recommended-courses-title">
<span class="lang-en">Courses you may find helpful</span>
<span class="lang-de">Kurse, die Sie hilfreich finden könnten</span>
<span class="lang-es">Cursos que pueden resultarle útiles</span>
<span class="lang-fr">Cours qui pourraient vous être utiles</span>
<span class="lang-br">Cursos que você pode achar útil</span>
</h2>
{% assign similar_count = 0 | plus: 0 %}
{% assign categories_ids = course.categories | map: "id" %}
<div class="recommended-courses-list row">
{% for checked_course in courses.enrolled %}
{% if checked_course.id != course.id and checked_course.ribbon != "VIDEO" %}
{% for category in checked_course.categories %}
{% if categories_ids contains category.id %}
{% include 'cards_course' with checked_course as course %}
{% assign similar_count = similar_count | plus: 1 %}
{% break %}
{% endif %}
{% endfor %}
{% endif %}
{% if similar_count == 3 %} {% break %} {% endif %}
{% endfor %}
</div>
</div>
{% if similar_count == 0 %}
<style>
.recommended-courses {
display: none;
}
</style>
{% endif %}
<style>
.recommended-courses-title {
padding-bottom: 40px;
padding-top: 40px;
}
.recommended-courses-list {
border-bottom: 1px solid #E1E1FF;
}
@media only screen and (min-width: 768px) {
.recommended-courses-list > div {
padding-left: 15px;
padding-right: 15px;
}
}
</style>

7
Custom_Templates/customer_templates/Pipedrive - UserLearn/_course_version_outdated_alert.html.liquid Normal file
View File

@ -0,0 +1,7 @@
{% if courses.include_courses_to_restart? %}
<div role="alert" class="np-alert np-alert-global np-alert-info">
<div class="np-alert-container uk-container uk-container-center">
{% t .content %}
</div>
</div>
{% endif %}

33
Custom_Templates/customer_templates/Pipedrive - UserLearn/_course_version_outdated_popup.html.liquid Normal file
View File

@ -0,0 +1,33 @@
<div class="np-course-version-outdated-popup np-popup">
<div class="np-popup-positioner">
<i
class="np-course-version-outdated-popup-trigger fas fa-exclamation-circle"
data-toggle-class-on-target="np-popup-tooltip--visible"
data-toggle-target-parent=".np-popup-tooltip"
data-toggle-outside
></i>
<div
class="np-popup-tooltip"
role="tooltip"
aria-hidden="true"
>
<header class="np-popup-header">
<i class="np-popup-header-icon fas fa-exclamation-circle"></i>
<h3 class="np-popup-header-title">
{% t .title %}
</h3>
</header>
<div class="np-popup-body">
<h4>{% t .body.header %}</h4>
<p>{% t .body.content %}</p>
<a
class="np-popup-body-button"
href="{{ path }}"
>
{% t .body.button %}
</a>
</div>
<div class="np-popup-tail"></div>
</div>
</div>
</div>

16
Custom_Templates/customer_templates/Pipedrive - UserLearn/_courses_catalog.html.liquid Normal file
View File

@ -0,0 +1,16 @@
{% if courses.in_catalog.any? %}
<div class="np-catalog-courses row row-with-thumbnails">
{% for course in courses.in_catalog %}
<div class="col-xs-12 col-md-6 col-lg-4 np-stretch-content">
{% include "cards_course" with course %}
</div>
{% endfor %}
</div>
{% else %}
{% capture message %}
{% t shared.zero_state.courses.catalog,
key: current_school.course_vocabulary
%}
{% endcapture %}
{% include "courses_zero_state", message: message %}
{% endif %}

16
Custom_Templates/customer_templates/Pipedrive - UserLearn/_courses_index.html.liquid Normal file
View File

@ -0,0 +1,16 @@
{% if courses.enrolled.any? %}
<div class="row row-with-thumbnails">
{% for course in courses.enrolled %}
<div class="{{ class }}">
{% include "cards_course" with course %}
</div>
{% endfor %}
</div>
{% else %}
{% capture message %}
{% t shared.zero_state.courses.index,
key: current_school.course_vocabulary
%}
{% endcapture %}
{% include "courses_zero_state", message: message %}
{% endif %}

6
Custom_Templates/customer_templates/Pipedrive - UserLearn/_courses_zero_state.html.liquid Normal file
View File

@ -0,0 +1,6 @@
<div class="np-dashboard-resources-container">
<div class="np-zero-state-text">
{{ message }}
</div>
<img class="np-zero-state-courses" alt="{{ message }}" />
</div>

120
Custom_Templates/customer_templates/Pipedrive - UserLearn/_faq.html.liquid Normal file
View File

@ -0,0 +1,120 @@
<div class="faq width-limit">
<h2 class="faq-title">
FAQ
</h2>
<div class="faq-list">
<div class="faq-element" onclick="this.classList.toggle('open')">
<div class="faq-question">
<div class="faq-question-icon">
<i class="far fa-angle-down faq-icon-closed"></i>
<i class="far fa-angle-up faq-icon-opened"></i>
</div>
<div class="faq-question-text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
</div>
</div>
<div class="faq-answer body-s">
At lectus urna duis convallis. Lacus sed viverra tellus in hac habitasse platea dictumst. Enim ut tellus elementum sagittis vitae et leo duis ut. Sed enim ut sem viverra aliquet eget. Urna cursus eget nunc scelerisque.
</div>
</div>
<div class="faq-element" onclick="this.classList.toggle('open')">
<div class="faq-question">
<div class="faq-question-icon">
<i class="far fa-angle-down faq-icon-closed"></i>
<i class="far fa-angle-up faq-icon-opened"></i>
</div>
<div class="faq-question-text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit
</div>
</div>
<div class="faq-answer body-s">
Nunc pulvinar sapien et ligula ullamcorper malesuada proin. Odio ut enim blandit volutpat maecenas volutpat blandit aliquam etiam. Odio euismod lacinia at quis. Eget mauris pharetra et ultrices. Justo nec ultrices dui sapien eget mi proin sed libero. Erat velit scelerisque in dictum non consectetur a. Varius vel pharetra vel turpis nunc. Id aliquet risus feugiat in ante metus dictum at. Tincidunt augue interdum velit euismod in pellentesque massa. Habitant morbi tristique senectus et. Commodo viverra maecenas accumsan lacus vel facilisis volutpat est velit. Iaculis urna id volutpat lacus. Nisl nisi scelerisque eu ultrices vitae. A lacus vestibulum sed arcu. Diam sit amet nisl suscipit. Varius quam quisque id diam vel.
</div>
</div>
<div class="faq-element" onclick="this.classList.toggle('open')">
<div class="faq-question">
<div class="faq-question-icon">
<i class="far fa-angle-down faq-icon-closed"></i>
<i class="far fa-angle-up faq-icon-opened"></i>
</div>
<div class="faq-question-text">
Libero id faucibus nisl tincidunt eget. Porttitor eget
</div>
</div>
<div class="faq-answer body-s">
In ante metus dictum at tempor commodo ullamcorper. Aliquet nec ullamcorper sit amet risus nullam eget. Faucibus vitae aliquet nec ullamcorper
</div>
</div>
</div>
</div>
<style>
.faq {
padding-top: 60px;
padding-bottom: 60px;
}
.faq-title {
padding-bottom: 40px;
border-bottom: 1px solid #E4E6E9;
}
.faq-element {
border-bottom: 1px solid #E4E6E9;
padding: 20px 0;
cursor: pointer;
}
.faq-question {
display: flex;
}
.faq-question-icon {
cursor: pointer;
background: #F4F5F6;
border-radius: 50%;
margin-right: 20px;
position: relative;
display: flex;
height: fit-content;
align-self: center;
}
.faq-question-icon > i {
height: 36px;
width: 36px;
}
.faq-question-icon > i::before {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.faq-icon-opened {
display: none;
}
.faq-answer {
display: none;
margin-left: 56px;
margin-top: 10px;
}
.faq-element.open .faq-icon-opened {
display: block;
}
.faq-element.open .faq-icon-closed {
display: none;
}
.faq-element.open .faq-answer {
display: block;
}
@media only screen and (min-width: 768px) {
.faq {
padding-top: 80px;
padding-bottom: 80px;
}
}
</style>
<script>
function toggleFAQ(element) {
element.classList.toggle('open')
}
</script>

10
Custom_Templates/customer_templates/Pipedrive - UserLearn/_filter_checkbox.html.liquid Normal file
View File

@ -0,0 +1,10 @@
<input
id={{value}}
name={{ name }}
value={{ value }}
type="checkbox"
{% if selected %} checked="checked" {% endif %}
/>
<label for={{value}}>
{{label}}
</label>

33
Custom_Templates/customer_templates/Pipedrive - UserLearn/_filter_dropdown.html.liquid Normal file
View File

@ -0,0 +1,33 @@
<div class="np-filter">
<div class="dropdown">
<button
class="np-button dropdown-button"
data-toggle-class="is-open"
data-toggle-escape
data-toggle-outside
data-toggle-target-next
type="button"
>
{% t shared.filters.filter %}
</button>
<div class="dropdown-menu" data-test="modal">
<form method="get">
{%
include "filter_select",
filters: filters,
key: key,
label: label
%}
<button
class="np-button dropdown-button-apply"
data-toggle-trigger-off
type="submit"
>
{% t shared.filters.apply %}
</button>
</form>
</div>
</div>
</div>

22
Custom_Templates/customer_templates/Pipedrive - UserLearn/_filter_select.html.liquid Normal file
View File

@ -0,0 +1,22 @@
{% if params.q %}
<input type="hidden" name="q" value="{{ params.q }}">
{% endif %}
<label class="dropdown-label" for="filter[category_uuid][in][]">
{{ label }}
</label>
<select
class="np-filter-select"
multiple
name="filter[{{ key }}][in][]"
>
{% for filter in filters %}
<option
value="{{ filter.value }}"
{% if filter.selected? %} selected="selected" {% endif %}
>
{{ filter.name }}
</option>
{% endfor %}
</select>

361
Custom_Templates/customer_templates/Pipedrive - UserLearn/_footer.html.liquid Normal file
View File

@ -0,0 +1,361 @@
<footer class="main-footer width-limit">
<section class="footer-links">
<div class="footer-links-section">
<p class="footer-links-section-title">
Pipedrive
</p>
<a class="footer-links-section-item lang-en" href="https://www.pipedrive.com/en/about">About</a>
<a class="footer-links-section-item lang-de" href="https://www.pipedrive.com/de/about">Über</a>
<a class="footer-links-section-item lang-es" href="https://www.pipedrive.com/es/about">Acerca de</a>
<a class="footer-links-section-item lang-fr" href="https://www.pipedrive.com/fr/about">À propos</a>
<a class="footer-links-section-item lang-br" href="https://www.pipedrive.com/pt/about">Sobre</a>
<a class="footer-links-section-item lang-en" href="https://www.pipedrive.com/en/pricing">Pricing</a>
<a class="footer-links-section-item lang-de" href="https://www.pipedrive.com/de/pricing">Preise</a>
<a class="footer-links-section-item lang-es" href="https://www.pipedrive.com/es/pricing">Precios </a>
<a class="footer-links-section-item lang-fr" href="https://www.pipedrive.com/fr/pricing">Tarifs</a>
<a class="footer-links-section-item lang-br" href="https://www.pipedrive.com/pt/pricing">Preço</a>
<a class="footer-links-section-item lang-en" href="https://www.pipedrive.com/en/jobs">Jobs</a>
<a class="footer-links-section-item lang-de" href="https://www.pipedrive.com/en/jobs">Karriere</a>
<a class="footer-links-section-item lang-es" href="https://www.pipedrive.com/en/jobs">Trabajos</a>
<a class="footer-links-section-item lang-fr" href="https://www.pipedrive.com/en/jobs">Carrières</a>
<a class="footer-links-section-item lang-br" href="https://www.pipedrive.com/en/jobs">Carreiras</a>
<a class="footer-links-section-item lang-en" href="https://www.pipedrive.com/en/blog">Blog</a>
<a class="footer-links-section-item lang-de" href="https://www.pipedrive.com/de/blog">Blog</a>
<a class="footer-links-section-item lang-es" href="https://www.pipedrive.com/es/blog">Blog</a>
<a class="footer-links-section-item lang-fr" href="https://www.pipedrive.com/fr/blog">Blog</a>
<a class="footer-links-section-item lang-br" href="https://www.pipedrive.com/pt/blog">Blog</a>
<a class="footer-links-section-item lang-en" href="https://www.pipedrive.com/en/newsroom">Newsroom</a>
<a class="footer-links-section-item lang-de" href="https://www.pipedrive.com/de/newsroom">Newsroom</a>
<a class="footer-links-section-item lang-es" href="https://www.pipedrive.com/en/newsroom">Sala de noticias </a>
<a class="footer-links-section-item lang-fr" href="https://www.pipedrive.com/fr/newsroom">Newsroom</a>
<a class="footer-links-section-item lang-br" href="https://www.pipedrive.com/en/newsroom">Newsroom</a>
</div>
<div class="footer-links-section">
<p class="footer-links-section-title">
<span class="lang-en">Product</span>
<span class="lang-de">Produkt</span>
<span class="lang-es">Producto</span>
<span class="lang-fr">Produit</span>
<span class="lang-br">Produto</span>
</p>
<a class="footer-links-section-item lang-en" href="https://www.pipedrive.com/en/products/sales">Sales software</a>
<a class="footer-links-section-item lang-de" href="https://www.pipedrive.com/de/products/sales">Produkte</a>
<a class="footer-links-section-item lang-es" href="https://www.pipedrive.com/es/products/sales">Productos</a>
<a class="footer-links-section-item lang-fr" href="https://www.pipedrive.com/fr/products/sales">Produits</a>
<a class="footer-links-section-item lang-br" href="https://www.pipedrive.com/pt/products/sales">Produtos</a>
<a class="footer-links-section-item lang-en" href="https://www.pipedrive.com/en/products">Features</a>
<a class="footer-links-section-item lang-de" href="https://www.pipedrive.com/de/products">Funktionen</a>
<a class="footer-links-section-item lang-es" href="https://www.pipedrive.com/es/products">Funciones</a>
<a class="footer-links-section-item lang-fr" href="https://www.pipedrive.com/fr/products">Fonctionnalités</a>
<a class="footer-links-section-item lang-br" href="https://www.pipedrive.com/pt/products">Recursos</a>
<a class="footer-links-section-item lang-en" href="https://www.pipedrive.com/en/features/privacy-security">Privacy and security</a>
<a class="footer-links-section-item lang-de" href="https://www.pipedrive.com/de/features/privacy-security">Datenschutz und Sicherheit</a>
<a class="footer-links-section-item lang-es" href="https://www.pipedrive.com/es/features/privacy-security">Privacidad y seguridad</a>
<a class="footer-links-section-item lang-fr" href="https://www.pipedrive.com/fr/features/privacy-security">Confidentialité et sécurité</a>
<a class="footer-links-section-item lang-br" href="https://www.pipedrive.com/pt/features/privacy-security">Privacidade e segurança</a>
<a class="footer-links-section-item lang-en" href="https://www.pipedrive.com/en/marketplace">Marketplace</a>
<a class="footer-links-section-item lang-de" href="https://www.pipedrive.com/en/marketplace">Integrationen</a>
<a class="footer-links-section-item lang-es" href="https://www.pipedrive.com/en/marketplace">Integraciones</a>
<a class="footer-links-section-item lang-fr" href="https://www.pipedrive.com/en/marketplace">Intégrations</a>
<a class="footer-links-section-item lang-br" href="https://www.pipedrive.com/en/marketplace">Integrações</a>
<a class="footer-links-section-item lang-en" href="https://status.pipedrive.com/">Status</a>
<a class="footer-links-section-item lang-de" href="https://status.pipedrive.com/">Status</a>
<a class="footer-links-section-item lang-es" href="https://status.pipedrive.com/">Estado</a>
<a class="footer-links-section-item lang-fr" href="https://status.pipedrive.com/">État du système</a>
<a class="footer-links-section-item lang-br" href="https://status.pipedrive.com/">Status</a>
<a class="footer-links-section-item lang-en" href="https://developers.pipedrive.com/">API</a>
<a class="footer-links-section-item lang-de" href="https://developers.pipedrive.com/">API</a>
<a class="footer-links-section-item lang-es" href="https://developers.pipedrive.com/">API</a>
<a class="footer-links-section-item lang-fr" href="https://developers.pipedrive.com/">API</a>
<a class="footer-links-section-item lang-br" href="https://developers.pipedrive.com/">API</a>
</div>
<div class="footer-links-section">
<p class="footer-links-section-title">
<span class="lang-en">Discover</span>
<span class="lang-de">Entdecken</span>
<span class="lang-es">Descubre</span>
<span class="lang-fr">Découvrez</span>
<span class="lang-br">Descubra</span>
</p>
<a class="footer-links-section-item lang-en" href="https://www.pipedrive.com/en/partner">Partner Program</a>
<a class="footer-links-section-item lang-de" href="https://www.pipedrive.com/de/partner">Partnerprogramm</a>
<a class="footer-links-section-item lang-es" href="https://www.pipedrive.com/es/partner">Programa para socios</a>
<a class="footer-links-section-item lang-fr" href="https://www.pipedrive.com/fr/partner">Partenaires</a>
<a class="footer-links-section-item lang-br" href="https://www.pipedrive.com/pt/partner">Programa de parceria</a>
<a class="footer-links-section-item lang-en" href="https://www.pipedrive.com/en/blog/what-is-crm">What is CRM?</a>
<a class="footer-links-section-item lang-de" href="https://www.pipedrive.com/de/blog/was-ist-crm">Was bedeutet CRM?</a>
<a class="footer-links-section-item lang-es" href="https://www.pipedrive.com/es/blog/que-es-crm">¿Qué es CRM? </a>
<a class="footer-links-section-item lang-fr" href="https://www.pipedrive.com/fr/resources/what-is-crm">Qu'est-ce qu'un CRM ?</a>
<a class="footer-links-section-item lang-br" href="https://www.pipedrive.com/pt/blog/o-que-e-crm">O que é um CRM?</a>
<a class="footer-links-section-item lang-en" href="https://www.pipedrive.com/en/crm-comparison">CRM comparison</a>
<a class="footer-links-section-item lang-de" href="https://www.pipedrive.com/de/crm-comparison">CRM-Vergleich</a>
<a class="footer-links-section-item lang-es" href="https://www.pipedrive.com/es/crm-comparison">Comparación de CRM</a>
<a class="footer-links-section-item lang-fr" href="https://www.pipedrive.com/fr/crm-comparison">Comparatif des CRM</a>
<a class="footer-links-section-item lang-br" href="https://www.pipedrive.com/pt/crm-comparison">Comparação de CRM</a>
<a class="footer-links-section-item lang-en" href="https://www.pipedrive.com/en/resources">Resources</a>
<a class="footer-links-section-item lang-de" href="https://www.pipedrive.com/de/resources">Ressourcen</a>
<a class="footer-links-section-item lang-es" href="https://www.pipedrive.com/es/resources">Recursos</a>
<a class="footer-links-section-item lang-fr" href="https://www.pipedrive.com/fr/resources">Ressources</a>
<a class="footer-links-section-item lang-br" href="https://www.pipedrive.com/pt/resources">Ferramentas</a>
</div>
<div class="footer-links-section">
<p class="footer-links-section-title">
<span class="lang-en">Help Center</span>
<span class="lang-de">Support Center</span>
<span class="lang-es">Centro de ayuda</span>
<span class="lang-fr">Centre d'assistance</span>
<span class="lang-br">Central de Ajuda</span>
</p>
<a class="footer-links-section-item lang-en" href="https://community.pipedrive.com/">Community</a>
<a class="footer-links-section-item lang-de" href="https://community.pipedrive.com/">Community</a>
<a class="footer-links-section-item lang-es" href="https://community.pipedrive.com/">Comunidad</a>
<a class="footer-links-section-item lang-fr" href="https://community.pipedrive.com/">Communauté</a>
<a class="footer-links-section-item lang-br" href="https://community.pipedrive.com/">Comunidade</a>
<a class="footer-links-section-item lang-en" href="https://support.pipedrive.com/en">Knowledge Base</a>
<a class="footer-links-section-item lang-de" href="https://support.pipedrive.com/de">Knowledge Base</a>
<a class="footer-links-section-item lang-es" href="https://support.pipedrive.com/es">Base de conocimiento</a>
<a class="footer-links-section-item lang-fr" href="https://support.pipedrive.com/fr">Base de connaissance</a>
<a class="footer-links-section-item lang-br" href="https://support.pipedrive.com/pt">Base de Conhecimento</a>
<a class="footer-links-section-item lang-en" href="https://www.pipedrive.com/en/academy">Academy</a>
<a class="footer-links-section-item lang-de" href="https://www.pipedrive.com/de/academy">Academy</a>
<a class="footer-links-section-item lang-es" href="https://www.pipedrive.com/es/academy">Academia</a>
<a class="footer-links-section-item lang-fr" href="https://www.pipedrive.com/fr/academy">Académie</a>
<a class="footer-links-section-item lang-br" href="https://www.pipedrive.com/pt/academy">Academia</a>
<a class="footer-links-section-item lang-en" href="https://support.pipedrive.com/en/contact-us">Support</a>
<a class="footer-links-section-item lang-de" href="https://support.pipedrive.com/de/contact-us">Support</a>
<a class="footer-links-section-item lang-es" href="https://support.pipedrive.com/es/contact-us">Asistencia</a>
<a class="footer-links-section-item lang-fr" href="https://support.pipedrive.com/fr/contact-us">Assistance</a>
<a class="footer-links-section-item lang-br" href="https://support.pipedrive.com/pt/contact-us">Suporte</a>
</div>
</section>
<section class="footer-bottom">
<div class="footer-bottom-row">
<div class="footer-language-wrapper np-hidden-mobile">
<div class="footer-language">
<div class="footer-language-button">
<i class="fal fa-globe"></i>
<span class="lang-en">English</span>
<span class="lang-de">Deutsch</span>
<span class="lang-es">Español</span>
<span class="lang-fr">Français</span>
<span class="lang-br">Português (BR)</span>
</div>
</div>
<div class="footer-language-dropdown">
<div data-lang="en" class="current-lang" onclick="changeLanguage(this.getAttribute('data-lang'))">English</div>
<div data-lang="de" onclick="changeLanguage(this.getAttribute('data-lang'))">Deutsch</div>
<div data-lang="es" onclick="changeLanguage(this.getAttribute('data-lang'))">Español</div>
<div data-lang="fr" onclick="changeLanguage(this.getAttribute('data-lang'))">Français</div>
<div data-lang="br" onclick="changeLanguage(this.getAttribute('data-lang'))">Português (BR)</div>
</div>
</div>
<div class="footer-bottom-social">
{% if website_footer.show_social_media_links? %}
<div class="footer-bottom-social-list">
{% for social_media_link in website_footer.social_media_links %}
<a
class="footer-bottom-social-item"
href="{{ social_media_link.link }}"
target="_blank" title="{{ social_media_link.name }}"
>
<i class="fab fa-{{ social_media_link.name }}"></i>
</a>
{% endfor %}
</div>
{% endif %}
</div>
</div>
<div class="footer-bottom-row body-s">
<div class="footer-bottom-links">
<p class="footer-bottom-link-text">
© {{ "now" | date: "%Y" }} Pipedrive
</p>
<p class="footer-button-link-separator">
|
</p>
<a class="footer-bottom-link" href="https://www.pipedrive.com/en/terms-of-service">
<span class="lang-en">Terms of service</span>
<span class="lang-de">Allgemeine Geschäftsbedingungen</span>
<span class="lang-es">Términos del servicio</span>
<span class="lang-fr">Conditions d'utilisation</span>
<span class="lang-br">Termos de serviço</span>
</a>
<p class="footer-button-link-separator">
|
</p>
<a class="footer-bottom-link" href="https://www.pipedrive.com/en/privacy">
<span class="lang-en">Privacy Policy</span>
<span class="lang-de">Datenschutzrichtlinie</span>
<span class="lang-es">Política de privacidad</span>
<span class="lang-fr">Politique de confidentialité</span>
<span class="lang-br">Política de privacidade</span>
</a>
</div>
<div class="footer-bottom-text">
<span class="lang-en">Pipedrive is a Web-based Sales CRM.</span>
<span class="lang-de">Pipedrive ist ein webbasiertes Vertriebs-CRM.</span>
<span class="lang-es">Pipedrive es un CRM de ventas basado en la web.</span>
<span class="lang-fr">Pipedrive est un CRM commercial basé sur le Web.</span>
<span class="lang-br">O Pipedrive é um CRM de vendas baseado na Web.</span>
</div>
</div>
</section>
</footer>
<style>
.main-footer {
padding-top: 40px;
padding-bottom: 40px;
}
.footer-links {
display: flex;
justify-content: flex-start;
flex-wrap: wrap;
}
.footer-links-section {
margin-bottom: 40px;
width:100%;
}
.footer-links-section-title {
font-weight: 700;
}
.footer-links-section-item {
margin-bottom: 10px;
display: block;
position: relative;
width: fit-content;
}
.footer-links-section-item:after {
content: "";
position: absolute;
right: 0;
width: 0;
bottom: 1px;
background: #017737;
height: 2px;
opacity:0;
transition:width 0.3s ease-out, opacity 0.3s ease-out;
}
.footer-links-section-item:hover:after,
.footer-links-section-item:focus:after,
.footer-links-section-item:active:after {
left: 0;
right: auto;
width: 100%;
opacity:1;
}
.footer-language-wrapper {
position: relative;
cursor: pointer;
}
.footer-language-dropdown {
position: absolute;
display: none;
box-shadow: 0px 3px 5px rgba(0, 0, 0, .08), 0px 0px 4px rgba(0,0,0,.12);
bottom: 35px;
left: 10%;
background: #FFF;
padding: 10px 0;
}
.footer-language-dropdown.show {
display: block;
}
.footer-language-dropdown > div {
padding: 5px 10px;
white-space: nowrap;
}
.footer-language-dropdown > div:hover {
text-decoration: underline;
background-color: #e4e6e9;
}
.footer-language-dropdown .current-lang {
background-color: #edeef0;
}
.footer-bottom-links {
display: flex;
flex-wrap: wrap;
align-items: center;
margin-bottom: 20px;
}
.footer-bottom-social-list {
gap: 20px;
display: flex;
justify-content: start;
margin-bottom: 20px;
}
.footer-bottom-links > * {
white-space: nowrap;
margin: 0;
line-height: 25px;
}
.footer-button-link-separator {
padding: 0 6px;
}
.footer-links-section-title {
margin-bottom: 10px;
}
.footer-bottom-link, .footer-bottom-social-item, .footer-bottom-text, .footer-button-link-separator {
color: #656E7A;
}
.footer-bottom-social-item {
font-size: 24px;
}
@media only screen and (min-width: 768px) {
.main-footer {
padding-top: 80px;
}
.footer-links {
display: flex;
justify-content: space-between;
}
.footer-links-section {
width:50%;
}
.footer-bottom-row {
display: flex;
justify-content: space-between;
align-items: center;
}
.footer-bottom-row:first-child {
margin-bottom: 15px;
}
.footer-bottom-links, .footer-bottom-social-list {
margin-bottom: 0;
}
}
@media (min-width:1200px) {
.footer-links-section {
width: calc(25% - 40px);
margin-right: 40px;
}
}
</style>
<script>
document.querySelector(".footer-language-wrapper").addEventListener('click', () => {
document.querySelector('.footer-language-dropdown').classList.toggle('show');
});
</script>

20
Custom_Templates/customer_templates/Pipedrive - UserLearn/_green_banner_image.html.liquid Normal file
View File

@ -0,0 +1,20 @@
<div class="green-banner-wrapper green-banner-wrapper-image">
<div class="green-banner width-limit">
<img class="green-banner-image" alt="banner image" src="{{ banner_image_url }}">
<div class="green-banner-content">
<h1 class="green-banner-title">
{{ banner_title }}
</h1>
<div class="green-banner-text">
{{ banner_text }}
</div>
{% unless current_person.signed_in? %}
<div class="button-wrapper">
<a class="green-banner-button button-large button-1" href="{{ banner_button_link }}">
{{ banner_button_text }}
</a>
</div>
{% endunless %}
</div>
</div>
</div>

20
Custom_Templates/customer_templates/Pipedrive - UserLearn/_green_banner_image_alt.html.liquid Normal file
View File

@ -0,0 +1,20 @@
<div class="green-banner-wrapper green-banner-wrapper-image green-banner-wrapper-image-alt">
<div class="green-banner width-limit">
<img class="green-banner-image" alt="banner image" src="{{ banner_image_url }}">
<div class="green-banner-content">
<h3 class="green-banner-title">
{{ banner_title }}
</h3>
<div class="green-banner-text">
{{ banner_text }}
</div>
{% unless current_person.signed_in? %}
<div class="button-wrapper">
<a class="green-banner-button button-large button-1" href="{{ banner_button_link }}">
{{ banner_button_text }}
</a>
</div>
{% endunless %}
</div>
</div>
</div>

15
Custom_Templates/customer_templates/Pipedrive - UserLearn/_green_banner_text.html.liquid Normal file
View File

@ -0,0 +1,15 @@
<div class="green-banner-wrapper green-banner-wrapper-text">
<div class="green-banner width-limit">
<h1 class="green-banner-title">
{{ banner_title }}
</h1>
<div class="green-banner-text">
{{ banner_text }}
</div>
<div class="button-wrapper">
<a class="green-banner-button button-large button-1" href="{{ banner_button_link }}">
{{ banner_button_text }}
</a>
</div>
</div>
</div>

16
Custom_Templates/customer_templates/Pipedrive - UserLearn/_green_banner_text_bg_image.html.liquid Normal file
View File

@ -0,0 +1,16 @@
<div class="green-banner-wrapper green-banner-wrapper-text-bg-image">
<img class="green-banner-bg-image" src="https://s3.amazonaws.com/static.northpass.com/pipedrive/banner_background_image.png">
<div class="green-banner width-limit">
<h3 class="green-banner-title">
{{ banner_title }}
</h3>
<div class="green-banner-text">
{{ banner_text }}
</div>
<div class="button-wrapper">
<a class="green-banner-button button-large button-1" href="{{ banner_button_link }}">
{{ banner_button_text }}
</a>
</div>
</div>
</div>

228
Custom_Templates/customer_templates/Pipedrive - UserLearn/_head.html.liquid Normal file
View File

@ -0,0 +1,228 @@
{% styles default %}
{% styles colors %}
{% styles custom %}
<script type="text/javascript" async src="https://play.vidyard.com/embed/v4.js"></script>
<!-- fontawesome inclusion -->
<script src="https://kit.fontawesome.com/41a3aee3ad.js" crossorigin="anonymous"></script>
<!-- clamping text to given number of lines -->
<script src="https://s3.amazonaws.com/static.northpass.com/JS+scripts/clamp.js" type="module"></script>
<!-- JavaScript Bundle with Popper -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.14.7/dist/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
{% include "cookie_banner" %}
<!-- language scripts -->
<script>
// changing language
function changeLanguage(newLanguage, sendRequest=true) {
document.querySelector(".languages-dropdown").classList.remove('show');
if (!window.current_language || window.current_language !== newLanguage) {
window.current_language = newLanguage
} else {
console.log('language already selected')
return null
}
document.querySelectorAll('.current-lang').forEach(activeElement => {
activeElement.classList.remove('current-lang');
});
document.querySelectorAll(`[data-lang="${newLanguage}"]`).forEach(newLanguageElement => {
newLanguageElement.classList.add('current-lang');
});
{% if current_person.signed_in? and current_school.properties.sandbox == false %}
if (sendRequest) {
let xhr = new XMLHttpRequest();
{% if current_school.sso_active? %}
var url = "https://www.workato.com/webhooks/rest/bd1a1eb7-7e79-4208-a1db-8e9c7440bcc9/pipedrive-sso-change-user-language";
{% else %}
var url = "https://www.workato.com/webhooks/rest/bd1a1eb7-7e79-4208-a1db-8e9c7440bcc9/pipedrive-open-change-user-language";;
{% endif %}
xhr.open("POST", url, true);
xhr.send(JSON.stringify({
user_id: '{{ current_person.id }}',
language: newLanguage
}));
}
{% endif %}
window.localStorage.setItem('academy-language', newLanguage);
document.querySelector('body').className = `lang-${newLanguage}`;
}
// setup body class based on property or cookies
function setupInitialLanguage() {
let userStorageLanguage = window.localStorage.getItem('academy-language');
var selectedLanguage = userStorageLanguage || "en";
if (['en', 'de', 'es', 'fr', 'br'].includes(selectedLanguage)) {
changeLanguage(selectedLanguage, false);
} else {
if (
window.location.pathname.includes('/de-homepage') ||
window.location.pathname.includes('/de-video-tutorials') ||
window.location.pathname.includes('/de-catalog')
) {
selectedLanguage = 'de';
} else if (
window.location.pathname.includes('/es-homepage') ||
window.location.pathname.includes('/es-video-tutorials') ||
window.location.pathname.includes('/es-catalog')
) {
selectedLanguage = 'es';
} else if (
window.location.pathname.includes('/fr-homepage') ||
window.location.pathname.includes('/fr-video-tutorials') ||
window.location.pathname.includes('/fr-catalog')
) {
selectedLanguage = 'fr';
} else if (
window.location.pathname.includes('/br-homepage') ||
window.location.pathname.includes('/br-video-tutorials') ||
window.location.pathname.includes('/br-catalog')
) {
selectedLanguage = 'br';
} else {
selectedLanguage = 'en';
}
changeLanguage(selectedLanguage, false);
}
}
addEventListener('DOMContentLoaded', () => {
setupInitialLanguage();
});
function redirectToLanguageHomepage(language) {
const languageMappings = {
de: {
homepage: '/app/de-homepage',
catalog: '/app/de-catalog',
videoTutorials: '/app/de-video-tutorials'
},
es: {
homepage: '/app/es-homepage',
catalog: '/app/es-catalog',
videoTutorials: '/app/es-video-tutorials'
},
fr: {
homepage: '/app/fr-homepage',
catalog: '/app/fr-catalog',
videoTutorials: '/app/fr-video-tutorials'
},
br: {
homepage: '/app/br-homepage',
catalog: '/app/br-catalog',
videoTutorials: '/app/br-video-tutorials'
},
en: {
homepage: '/app',
catalog: '/app/catalog',
videoTutorials: '/app/video-tutorials'
}
};
const currentUrl = window.location.pathname;
const currentLang = window.current_language || 'en';
let category = 'homepage';
if (currentUrl.includes('catalog')) {
category = 'catalog';
} else if (currentUrl.includes('video-tutorials')) {
category = 'videoTutorials';
}
const newUrl = languageMappings[currentLang][category] || '/app';
window.location.href = newUrl;
}
const academyLanguage = window.localStorage.getItem('academy-language');
console.log(academyLanguage);
</script>
<!--Function to display proper courses based on language value-->
<script>
function filterCoursesByLanguage() {
var selectedLanguage = localStorage.getItem('academy-language');
var courses = document.querySelectorAll('.homepage-card-wrapper, .course-card');
if (!courses.length) {
return; // Nie ma żadnych kursów na stronie
}
for (var i = 0; i < courses.length; i++) {
var course = courses[i];
var courseLanguage = course.getAttribute('language');
if (selectedLanguage && courseLanguage !== selectedLanguage) {
course.style.display = 'none'; // Ukryj kursy o nieodpowiednim języku
} else {
course.style.display = 'block'; // Pokaż kursy o wybranym języku
}
}
}
// Wywołanie funkcji po załadowaniu strony
window.addEventListener('DOMContentLoaded', filterCoursesByLanguage);
// Wywołanie funkcji po zmianie wartości w local storage
window.addEventListener('storage', filterCoursesByLanguage);
</script>
<!-- on SSO school redirect new users to setup their name -->
{% if current_person.signed_in? and current_school.sso_active? %}
{% unless current_person.first_name %}
<script>
if ("{{ current_person.email }}".includes('+preview-') === false &&
window.location.pathname !== "/app/profile-settings" &&
!window.sessionStorage.getItem('nameSetup'))
{
window.location.replace('/app/profile-settings')
}
</script>
{% endunless %}
{% endif %}
<!-- clear last video filter when leaving video tutorials pages -->
<script>
if (window.location.pathname !== '/app/video-tutorials' &&
!window.location.pathname.includes('/app/courses/'))
{
window.sessionStorage.removeItem('last-selected-video-filter')
}
</script>
{% include 'seo_logo' %}
{% if current_school.sso_active? and current_person.signed_in? == false %}
{% include 'sso_login_widget' %}
{% endif %}
{% if current_school.sso_active? %}
{% if current_person.signed_in? %}
<script>
if (window.location.pathname === '/app' && window.sessionStorage.sso_last_page) {
let new_url = window.sessionStorage.sso_last_page;
window.sessionStorage.sso_last_page = ''
window.location.replace(new_url);
}
</script>
{% else %}
<script>
window.sessionStorage.sso_last_page = window.location.pathname;
</script>
{% endif %}
{% endif %}

450
Custom_Templates/customer_templates/Pipedrive - UserLearn/_header.html.liquid Normal file
View File

@ -0,0 +1,450 @@
{% if current_school.id == '3eed8278-7beb-4918-bca6-73db73e2ec3a' %}
<script>
const splitDefaultPageTitle = document.title.split(" | ")
if (window.location.pathname == "/app/catalog") {
document.title = `Academy Courses | ${splitDefaultPageTitle[1]}`
} else if (window.location.pathname == "/app/video-tutorials") {
document.title = `CRM Video Tutorials | ${splitDefaultPageTitle[1]}`
} else if (window.location.pathname == "/app/webinars") {
document.title = `CRM Webinars | ${splitDefaultPageTitle[1]}`
}
</script>
{% else %}
<script>
const defaultPageTitle = document.title
if (window.location.pathname == "/app/catalog") {
document.title = `Academy Courses | ${defaultPageTitle}`
} else if (window.location.pathname == "/app/video-tutorials") {
document.title = `CRM Video Tutorials | ${defaultPageTitle}`
} else if (window.location.pathname == "/app/webinars") {
document.title = `CRM Webinars | ${defaultPageTitle}`
}
</script>
{% endif %}
<header class="main-header width-limit">
<section class="header-left header-flex">
<img
class="header-mobile-menu-button header-mobile"
src="https://s3.amazonaws.com/static.northpass.com/pipedrive/hamburger.png"
alt="menu"
onclick="toggleSideMenu()"
>
<a class="header-logo" href="/app">
<img class="header-logo-image"
alt="{{ current_school.name }}"
src="https://s3.amazonaws.com/static.northpass.com/pipedrive/learn_logo.png"
>
</a>
<div class="header-desktop-navigation header-desktop header-flex body-s">
<a class="header-navigation-item lang-en" href="/app/catalog">Academy Courses</a>
<a class="header-navigation-item lang-en" href="/app/video-tutorials">Video Tutorials</a>
<a class="header-navigation-item lang-en" href="https://www.pipedrive.com/en/webinars" target="_blank">Webinars</a>
<a class="header-navigation-item lang-es catalog-link" href="/app/es-catalog">Cursos de la Academia</a>
<a class="header-navigation-item lang-es video-tutorials-link" href="/app/es-video-tutorials">Tutoriales en vídeo</a>
<a class="header-navigation-item lang-es" href="https://www.pipedrive.com/en/webinars" target="_blank">Seminarios en línea</a>
<a class="header-navigation-item lang-de catalog-link" href="/app/de-catalog">Akademie-Kurse</a>
<a class="header-navigation-item lang-de video-tutorials-link" href="/app/de-video-tutorials">Video-Tutorials</a>
<a class="header-navigation-item lang-de" href="https://www.pipedrive.com/en/webinars" target="_blank">Webinare</a>
<a class="header-navigation-item lang-fr catalog-link" href="/app/fr-catalog">Cours de l'Académie</a>
<a class="header-navigation-item lang-fr video-tutorials-link" href="/app/fr-video-tutorials">Tutoriels vidéo</a>
<a class="header-navigation-item lang-fr" href="https://www.pipedrive.com/en/webinars" target="_blank">Webinaires</a>
<a class="header-navigation-item lang-br catalog-link" href="/app/br-catalog">Cursos da Academia</a>
<a class="header-navigation-item lang-br video-tutorials-link" href="/app/br-video-tutorials">Tutoriais em vídeo</a>
<a class="header-navigation-item lang-br" href="https://www.pipedrive.com/en/webinars" target="_blank">Webinars</a>
</div>
</section>
<section class="header-right header-flex">
<div class="header-desktop header-flex">
<a class="header-navigation-item body-s" href="https://www.pipedrive.com">
<span class="lang-en">go to</span>
<span class="lang-de">Gehen Sie zu</span>
<span class="lang-es">ir a</span>
<span class="lang-fr">aller à</span>
<span class="lang-br">ir para</span> pipedrive.com
</a>
{% if current_person.signed_in? %}
<div class="np-hidden-mobile np-header-search np-header-search-expanded">
<form action="{% route search %}" method="get" data-test="desktop-search">
<input
aria-label="{% t .search %}"
class="np-header-search-input"
type="text"
name="q"
placeholder="Search Pipedrive"
/>
<i class="np-header-search-icon fal fa-search"></i>
</form>
</div>
{% endif %}
<div class="language-dropdown-wrapper" style="margin-left:20px;">
<div class="header-language-selection">
<i class="fal fa-globe"></i>
<i class="fal fa-angle-down"></i>
</div>
<ul class="languages-dropdown">
<li data-lang="en" class="current-lang" onclick="changeLanguage(this.getAttribute('data-lang')), redirectToLanguageHomepage(this.value)">English</li>
<li data-lang="de" onclick="changeLanguage(this.getAttribute('data-lang')), redirectToLanguageHomepage(this.value)">Deutsch</li>
<li data-lang="es" onclick="changeLanguage(this.getAttribute('data-lang')), redirectToLanguageHomepage(this.value)">Español</li>
<li data-lang="fr" onclick="changeLanguage(this.getAttribute('data-lang')), redirectToLanguageHomepage(this.value)">Français</li>
<li data-lang="br" onclick="changeLanguage(this.getAttribute('data-lang')), redirectToLanguageHomepage(this.value)">Português (BR)</li>
</ul>
</div>
{% if current_person.signed_in? %}
{% if current_person.avatar_url contains "https://secure.gravatar.com/avatar" %}
<img class="header-profile-image" src="https://s3.amazonaws.com/static.northpass.com/pipedrive/Avatar.png" alt="profile image">
{% else %}
<img class="header-profile-image" src="{{ current_person.avatar_url }}" alt="profile image">
{% endif %}
<div class="header-profile-menu">
<div class="header-profile-menu-name body-s strong">
{{ current_person.name }}
</div>
<i class="far fa-chevron-down profile-arrow-down"></i>
<i class="far fa-chevron-up profile-arrow-up"></i>
<div class="profile-dropdown">
<div class="profile-dropdown-name body-s strong">
{{ current_person.name }}
</div>
<div class="profile-dropdown-email body-s">
{{ current_person.email }}
</div>
<a class="profile-dropdown-link body-s"
{% if current_school.sso_active? %}
href="/app/profile-settings"
{% else %}
href="/app/account"
{% endif %}
style="margin-top: 15px;">
<span class="lang-en">Settings</span>
<span class="lang-de">Einstellungen</span>
<span class="lang-es">Ajustes</span>
<span class="lang-fr">Paramètres</span>
<span class="lang-br">Configurações</span>
</a>
<a class="profile-dropdown-link body-s" href="/learners/sign_out">
<span class="lang-en">Log out</span>
<span class="lang-de">Abmelden</span>
<span class="lang-es">Cerrar sesión</span>
<span class="lang-fr">Déconnexion</span>
<span class="lang-br">Sair</span>
</a>
</div>
</div>
{% else %}
<a class="header-navigation-item body-s" href="#sso-widget">
<span class="lang-en">Log in</span>
<span class="lang-de">Einloggen</span>
<span class="lang-es">Conectarse</span>
<span class="lang-fr">Connexion</span>
<span class="lang-br">Entrar</span>
</a>
{% endif %}
</div>
<div class="header-mobile header-flex">
{% unless current_person.signed_in? %}
<a class="header-register-button button-1 button-small" href="#sso-widget">
<span class="lang-en">Register</span>
<span class="lang-de">Anmelden</span>
<span class="lang-es">Regístrese en</span>
<span class="lang-fr">Inscription</span>
<span class="lang-br">Cadastrar-se</span>
</a>
{% endunless %}
</div>
</section>
</header>
{% include "header_mobile_menu" %}
{% include "messages" %}
{% include 'new_academy_popup' %}
<style>
.header-flex {
display: flex;
align-items: center;
}
.header-right {
flex: 1;
}
.header-right .header-desktop {
width:100%;
justify-content: flex-end;
}
.header-mobile.header-flex {
width:100%;
justify-content:flex-end;
}
.header-right .header-register-button {
width:auto;
}
.main-header {
display: flex;
justify-content: space-between;
height: 72px;
padding-top: 20px;
padding-bottom: 20px;
background: #FFF;
position: relative;
}
.header-mobile-menu-button {
height: 100%;
margin-right: 20px;
}
.header-logo {
height: 100%;
display: flex;
}
.header-logo-image {
height: 32px;
align-self: center;
}
.header-navigation-item {
padding: 5px 0;
margin: auto 20px;
position:relative;
}
.header-navigation-item:after {
content: "";
position: absolute;
right: 0;
width: 0;
bottom: 4px;
background: #017737;
height: 2px;
opacity:0;
transition:width 0.3s ease-out, opacity 0.3s ease-out;
}
.header-navigation-item:hover:after,
.header-navigation-item:focus:after,
.header-navigation-item:active:after,
.header-navigation-item-active:after {
left: 0;
right: auto;
width: 100%;
opacity:1;
}
/* SEARCH */
.np-header-search-input {
border-radius: 50%;
background-color: #F4F5F6;
opacity: 1;
border: 2px solid #F4F5F6;
color:#192435;
transition:width 0.2s ease-out;
}
.np-header-search-icon {
color:#192435;
}
.np-header-search-input:focus {
border-radius: 30px;
border: 2px solid #0e5235;
padding: 0 40px 0 20px;
}
/* END SEARCH */
/* LANGUAGE DROPDOWN */
.language-dropdown-wrapper {
position:relative;
}
.header-language-selection {
display: flex;
gap: 8px;
padding:20px;
font-size:20px;
cursor:pointer;
}
.header-language-selection .fa-angle-down {
font-size: 25px;
position: relative;
bottom: 3px;
transition: transform 0.2s;
}
.header-language-selection:hover .fa-angle-down,
.language-dropdown-wrapper:hover .fa-angle-down {
transform:rotate(180deg)
}
.languages-dropdown {
position:absolute;
top: 66px;
left:50%;
transform: translateX(-50%);
background-color:#fff;
margin:0;
border-radius:4px;
height:0;
opacity:0;
min-width:200px;
list-style:none;
transition: opacity 0.2s;
box-shadow: 0px 3px 5px rgba(0,0,0,.08),0px 0px 4px rgba(0,0,0,.12);
z-index: 1;
}
.languages-dropdown:after {
content: "";
position:absolute;
top:-10px;
left:50%;
transform: translate(-50%);
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 10px solid #fff;
}
.languages-dropdown:not(.show) {
visibility: hidden;
}
.languages-dropdown.show {
height:auto;
opacity:1;
padding:20px 0;
}
.languages-dropdown li {
cursor: pointer;
width:100%;
padding:4px 12px;
font-size:16px;
}
.languages-dropdown li:hover {
text-decoration:underline;
background-color:#e4e6e9;
}
.languages-dropdown li.current-lang {
background-color:#edeef0;
}
/* END LANGUAGE DROPDOWN */
.header-profile-image {
width: 60px;
aspect-ratio: 1/1;
object-fit: cover;
border-radius: 50%;
margin-right: 10px;
margin-left: 10px;
}
.header-profile-menu {
display: flex;
align-items: center;
gap: 15px;
cursor: pointer;
}
.profile-arrow-up {
display: none;
}
.header-profile-menu-open .profile-arrow-up {
display: block;
}
.header-profile-menu-open .profile-arrow-down {
display: none;
}
.profile-dropdown {
display: none;
position: absolute;
bottom: 0;
transform: translate(-50%, 100%);
flex-direction: column;
background: #FFF;
padding: 25px 20px;
border-radius: 4px;
filter: drop-shadow(0px 3px 5px rgba(0, 0, 0, 0.08)) drop-shadow(0px 0px 4px rgba(0, 0, 0, 0.12));
width: fit-content;
z-index: 1;
}
.header-profile-menu-open .profile-dropdown {
display: flex;
}
.profile-dropdown-name {
padding-top: 5px;
padding-bottom: 10px;
}
.profile-dropdown-email {
color: #656E7A;
padding-bottom: 15px;
border-bottom: 1px solid #E4E6E9;
}
.profile-dropdown-link {
margin: 5px 0;
}
@media only screen and (min-width: 1151px) {
.header-mobile {
display: none !important;
}
.main-header {
height: 84px;
}
}
@media only screen and (max-width: 1150px) {
.header-desktop {
display: none !important;
}
}
</style>
<script>
// profile settings dropdown
{% if current_person.signed_in? %}
document.querySelector('body').addEventListener('click', listenerDropdown);
function toggleDropdown() {
let element = document.querySelector('.header-profile-menu');
element.classList.toggle('header-profile-menu-open');
}
function listenerDropdown(event) {
let isDropdownOpen = !!document.querySelector('.header-profile-menu-open');
if (isDropdownOpen) {
let dropdownElement = document.querySelector('.profile-dropdown');
if (!dropdownElement.contains(event.target)) {
toggleDropdown();
}
} else {
let dropdownButton = document.querySelector('.header-profile-menu');
if (dropdownButton.contains(event.target)) {
toggleDropdown();
}
}
}
{% endif %}
// setup active subpage indicator on navigations
addEventListener("DOMContentLoaded", () => {
if (window.location.pathname === '/app/catalog') {
document.querySelector('#side-menu-courses')?.classList.add('side-menu-link-active');
document.querySelector('.header-navigation-item[href="/app/catalog"]')?.classList.add('header-navigation-item-active');
} else if (window.location.pathname === '/app/video-tutorials') {
document.querySelector('#side-menu-tutorials')?.classList.add('side-menu-link-active');
document.querySelector('.header-navigation-item[href="/app/video-tutorials"]')?.classList.add('header-navigation-item-active');
}
changeHeaderImageLink();
});
// Languages dropdown hover effect
document.querySelector(".header-language-selection").addEventListener('mouseover', () => {
document.querySelector(".languages-dropdown").classList.add('show');
})
document.querySelector(".language-dropdown-wrapper").addEventListener('mouseleave', () => {
document.querySelector(".languages-dropdown").classList.remove('show');
})
function changeHeaderImageLink() {
let userStorageLanguage = window.localStorage.getItem('academy-language');
if (userStorageLanguage != 'en') {
document.querySelector(".header-logo").href = `/app/${userStorageLanguage}-homepage`
} else {
document.querySelector(".header-logo").href = `/app`
}
}
</script>

17
Custom_Templates/customer_templates/Pipedrive - UserLearn/_header_minimal.html.liquid Normal file
View File

@ -0,0 +1,17 @@
<header class="np-box-header np-header-color">
<a class="np-box-header-link" href="{% route home %}">
{% if current_school.logo_url %}
<img
alt="{{ current_school.name }}"
src="{{ current_school.logo_url }}"
class="np-box-header-logo"
/>
{% else %}
<span class="np-school-name np-header-font-color">
{{ current_school.name }}
</span>
{% endif %}
</a>
</header>
{% include "messages" %}

184
Custom_Templates/customer_templates/Pipedrive - UserLearn/_header_mobile_menu.html.liquid Normal file
View File

@ -0,0 +1,184 @@
<div class="side-menu" id="side-menu">
<div class="side-menu-header">
<div class="side-menu-header-left">
<div class="side-menu-close" onclick="toggleSideMenu()">
<i class="fal fa-times"></i>
</div>
<div class="side-menu-logo">
<img class="side-menu-logo-image" src="https://s3.amazonaws.com/static.northpass.com/pipedrive/emblem.png" alt="logo">
</div>
</div>
{% if current_person.signed_in? %}
{% if current_school.sso_active? %}
<div class="side-menu-login">
{{ current_person.name }}
</div>
{% else %}
<a class="side-menu-login" href="/app/account">
{{ current_person.name }}
</a>
{% endif %}
{% else %}
<a class="side-menu-login" href="/learners/sign_in">
<span class="lang-en">Log in</span>
<span class="lang-de">Einloggen</span>
<span class="lang-es">Conectarse</span>
<span class="lang-fr">Connexion</span>
<span class="lang-br">Entrar</span>
</a>
{% endif %}
</div>
<div class="side-menu-body">
<div class="side-menu-language">
<i class="fal fa-globe"></i>
<span class="lang-en">English</span>
<span class="lang-de">Deutsch</span>
<span class="lang-es">Español</span>
<span class="lang-fr">Français</span>
<span class="lang-br">Português (BR)</span>
<div class="side-menu-language-dropdown">
<div data-lang="en" class="current-lang" onclick="changeLanguage(this.getAttribute('data-lang'))">English</div>
<div data-lang="de" onclick="changeLanguage(this.getAttribute('data-lang'))">Deutsch</div>
<div data-lang="es" onclick="changeLanguage(this.getAttribute('data-lang'))">Español</div>
<div data-lang="fr" onclick="changeLanguage(this.getAttribute('data-lang'))">Français</div>
<div data-lang="br" onclick="changeLanguage(this.getAttribute('data-lang'))">Português (BR)</div>
</div>
</div>
<div class="side-menu-link">
<a href="/app/catalog" id="side-menu-courses">
<span class="lang-en">Academy Courses</span>
<span class="lang-de">Academy-Kurse</span>
<span class="lang-es">Cursos de la Academia</span>
<span class="lang-fr">Cours de l'Académie</span>
<span class="lang-br">Cursos da Academia</span>
</a>
</div>
<div class="side-menu-link">
<a href="/app/video-tutorials" id="side-menu-tutorials">
<span class="lang-en">Video Tutorials</span>
<span class="lang-de">Video-Tutorials</span>
<span class="lang-es">Tutoriales en vídeo</span>
<span class="lang-fr">Tutoriels vidéo</span>
<span class="lang-br">Tutoriais</span>
</a>
</div>
<div class="side-menu-link">
<a href="https://www.pipedrive.com/en/webinars" target="_blank" id="side-menu-webinars">
<span class="lang-en">Webinars</span>
<span class="lang-de">Webinare</span>
<span class="lang-es">Seminarios en línea</span>
<span class="lang-fr">Webinaires</span>
<span class="lang-br">Webinars</span>
</a>
</div>
</div>
</div>
<style>
.side-menu {
width: 100%;
height: 100%;
position: absolute;
top: 0;
background: #fff;
z-index: 100;
left: -100vw;
transition: left 0.1s;
visibility: hidden;
padding: 20px;
}
.side-menu-open {
visibility: visible;
left: 0;
transition: left 0.1s;
}
.side-menu-header {
display: flex;
padding-bottom: 20px;
justify-content: space-between;
}
.side-menu-header-left {
display: flex;
}
.side-menu-close {
font-size:28px;
cursor: pointer;
}
.side-menu-logo {
margin-left: 20px;
display: flex;
}
.side-menu-logo-image {
margin-top: auto;
}
.side-menu-language {
padding: 4px 22px;
border: 2px solid #E4E6E9;
border-radius: 4px;
margin-bottom: 20px;
position: relative;
cursor: pointer;
}
.side-menu-language-dropdown {
position: absolute;
background-color: #fff;
width: calc(100% + 40px);
top: 46px;
left: -20px;
height: 0;
overflow: hidden;
opacity: 0;
transition: opacity 0.2s;
box-shadow: 0px 3px 5px rgba(0, 0, 0, .08), 0px 0px 4px rgba(0,0,0,.12);
}
.side-menu-language > span {
cursor: pointer;
}
.side-menu-language-dropdown.show {
padding: 10px 0;
height: auto;
opacity: 1;
}
.side-menu-language-dropdown div[data-lang] {
padding: 4px 20px;
font-size:16px;
}
.side-menu-language-dropdown div[data-lang].current-lang {
background-color: #f4f5f6;
}
.side-menu-link {
margin-bottom: 20px;
background: #F7F7FE;
border-radius: 4px;
}
.side-menu-link > a {
padding: 20px;
display: block;
}
.side-menu-link > a:hover span,
.side-menu-link > a:focus span {
border-bottom: 2px solid #08A742;
}
.side-menu-link-active span {
border-bottom: 2px solid #08A742;
}
</style>
<script>
function toggleSideMenu() {
let sideMenu = document.querySelector('#side-menu');
if (sideMenu.classList.contains('side-menu-open')) {
window.onscroll = function() {};
} else {
window.onscroll = function () { window.scrollTo(0, 0); };
}
sideMenu.classList.toggle('side-menu-open');
}
document.querySelector(".side-menu-language").addEventListener('click', () => {
document.querySelector('.side-menu-language-dropdown').classList.toggle('show');
});
</script>

171
Custom_Templates/customer_templates/Pipedrive - UserLearn/_homepage_banner.html.liquid Normal file
View File

@ -0,0 +1,171 @@
<div class="green-banner-wrapper homepage-banner">
<div class="green-banner width-limit">
<img class="homepage-banner-image" src="https://s3.amazonaws.com/static.northpass.com/pipedrive/homepage_banner.svg" 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">Welcome! We have saved your progress about <strong>courses</strong></span>
<span class="lang-de">Willkommen! Wir haben Ihren Fortschritt bei den <strong>Kursen</strong> gespeichert</span>
<span class="lang-es">Bienvenido Hemos guardado su progreso sobre los <strong>cursos</strong></span>
<span class="lang-fr">Bienvenue ! Nous avons enregistré votre progression dans les <strong>cours</strong>.</span>
<span class="lang-br">Seja bem-vindo(a)! Salvamos o seu progresso nos cursos</span>
</div>
<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>
</div>
</div>
</div>
<style>
.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 (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>

89
Custom_Templates/customer_templates/Pipedrive - UserLearn/_homepage_banner_new_person.html.liquid Normal file
View File

@ -0,0 +1,89 @@
<div class="green-banner-wrapper homepage-banner">
<div class="green-banner width-limit">
<img class="homepage-banner-image" src="https://s3.amazonaws.com/static.northpass.com/pipedrive/homepage_banner.svg" alt="banner">
<div class="green-banner-content">
<h1 class="green-banner-title">
<!-- add &nbsp after 'Hi' to keep space between words -->
<span class="lang-en">Hi&nbsp</span>
<span class="lang-de">Hallo&nbsp</span>
<span class="lang-es">Hola&nbsp</span>
<span class="lang-fr">Bonjour&nbsp</span>
<span class="lang-br">Oi&nbsp</span>
<span class="first-name-field">
{% if current_person.first_name %}
{{ current_person.first_name }}
{% else %}
<script>
document.querySelector('.first-name-field').innerText = window.sessionStorage.getItem('nameSetup');
</script>
{% endif %}
</span>!
</h1>
<div class="green-banner-text">
<span class="lang-en">Welcome to your Pipedrive training hub! Learn the basics of sales CRM software and browse dozens of video guides to expand your knowledge</span>
<span class="lang-de">Willkommen in Ihrem Pipedrive-Trainingszentrum! Verstehen Sie die Grundlagen von Vertriebs-CRM-Software und erweitern Sie Ihr Wissen mit Dutzenden von Videoanleitungen</span>
<span class="lang-es">¡Bienvenido a tu centro de capacitación de Pipedrive! Aprende los conceptos básicos del software de CRM de ventas y navega por docenas de guías en video para ampliar tus conocimientos</span>
<span class="lang-fr">Bienvenue dans votre centre de formation Pipedrive ! Découvrez les bases pour bien utiliser votre logiciel CRM commercial et parcourez des dizaines de guides vidéo pour approfondir vos connaissances.</span>
<span class="lang-br">Bem-vindo(a) ao seu centro de treinamento do Pipedrive! Aprenda o básico sobre nosso software de CRM de vendas e navegue por dezenas de guias em vídeo para expandir seu conhecimento.</span>
</div>
</div>
</div>
</div>
<style>
.homepage-banner-image {
width: 100%;
}
.homepage-banner-stat > div {
text-align: center;
margin-right: 8px;
}
@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;
display: flex;
}
.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;
}
}
@media only screen and (min-width: 1400px) {
.homepage-banner-image {
margin-right: 0;
height: 100%;
}
}
</style>

73
Custom_Templates/customer_templates/Pipedrive - UserLearn/_homepage_faq.html.liquid Normal file
View File

@ -0,0 +1,73 @@
<div class="faq width-limit">
<h2 class="faq-title">
FAQ
</h2>
<div class="faq-list">
<div class="faq-element">
<div class="faq-question" onclick="this.classList.toggle('open')" onclick="this.classList.toggle('open')">
<div class="faq-question-icon">
<i class="far fa-angle-down faq-icon-closed"></i>
<i class="far fa-angle-up faq-icon-opened"></i>
</div>
<div class="faq-question-text">
<span class="lang-en">How to learn CRM</span>
<span class="lang-de">Wie lernt man CRM? </span>
<span class="lang-es">Cómo aprender a usar un CRM</span>
<span class="lang-fr">Comment se former au CRM ?</span>
<span class="lang-br">Como aprender a usar um CRM</span>
</div>
</div>
<div class="faq-answer body-s">
<span class="lang-en">CRM tools(customer relationship management tools) can help you improve customer experiences with your brand. For the most effective CRM, you need to master various hard and soft skills, including technical, analytical and communication skills. Learning CRM skills doesn’t have to be complicated: There are many ways to grow your skill sets, such as with video tutorials, online guides and quizzes</span>
<span class="lang-de">Mit CRM-Tools (Customer Relationship Management Tools) verbessern Sie die Customer Experience für Ihre Brand. Um ein CRM effektiv zu nutzen, müssen Sie verschiedene Hard- und Softskills beherrschen, dazu gehören technische, analytische und kommunikative Fähigkeiten. CRM-Fähigkeiten lassen sich leicht erlernen: Es gibt zahlreiche Möglichkeiten, Ihre Fähigkeiten zu erweitern, wie etwa Video-Tutorials, Online-Guides und das ein oder andere Quiz.</span>
<span class="lang-es">Las herramientas de CRM (herramientas de administración de relaciones con los clientes) pueden ayudarte a mejorar las experiencias de los clientes con tu marca. Para que el CRM sea efectivo, debes dominar varias habilidades duras y blandas, incluidas las técnicas, analíticas y de comunicación. Aprender a usar un CRM no tiene por qué ser complicado: hay muchas maneras de hacer crecer tus conjuntos de habilidades, como tutoriales en video, guías en línea y cuestionarios.</span>
<span class="lang-fr">Les outils CRM (customer relationship management) vous aident à améliorer l’expérience client et à attirer de nouveaux prospects vers votre marque. Un projet CRM fait appel à de nombreux pré-requis, qu’il s’agisse de compétences techniques ou encore de « soft skills » tels que des capacités analytiques ou relationnelles. Les manières de se former à la Gestion de la Relation Client sont multiples : à vous de choisir entre les tutoriels vidéo, guides pratiques et questionnaires !</span>
<span class="lang-br">As ferramentas CRM (customer relationship management tools em inglês) ajudam você a melhorar a experiência de clientes com a sua marca. Para que um CRM seja eficiente, você precisa dominar habilidades mais pragmáticas e interpessoais, incluindo habilidades técnicas, analíticas e de comunicação. Mas isso não precisa ser complicado! Há muitas maneiras de exercitar e expandir estas habilidades com tutoriais e guias online e testes, por exemplo.</span> </div>
</div>
<div class="faq-element">
<div class="faq-question" onclick="this.classList.toggle('open')">
<div class="faq-question-icon">
<i class="far fa-angle-down faq-icon-closed"></i>
<i class="far fa-angle-up faq-icon-opened"></i>
</div>
<div class="faq-question-text">
<span class="lang-en">How to learn CRM online</span>
<span class="lang-de">Wie kann man CRM online lernen?</span>
<span class="lang-es">Cómo aprender a usar un CRM en línea</span>
<span class="lang-fr">Existe-t-il des formations professionnelles en ligne sur les outils CRM ?</span>
<span class="lang-br">Como aprender a usar um CRM online</span>
</div>
</div>
<div class="faq-answer body-s">
<span class="lang-en">The benefits of CRM tools are endless, but finding the best <a href="https://www.pipedrive.com/en/features/crm-system">CRM system</a> for your business can be a struggle. Pipedrive Learn is a centralized platform full of online courses, video tutorials and webinars written and directed by our experts. Learn how to rally your sales force and close more deals in less time with Pipedrive CRM. You’ll find the solution in our comprehensive video library if you get stuck or have queries. For more advice on sharpening your sales and marketing toolsets, visit the <a href="https://www.pipedrive.com/en/blog">Pipedrive blog</a>.</span>
<span class="lang-de">Die Vorteile von CRM-Tools sind endlos, aber es kann schwierig sein, das beste <a href="https://www.pipedrive.com/de/features/crm-system">CRM-System</a> für Ihr Unternehmen zu finden.Pipedrive Learn ist eine zentralisierte Plattform voller Online-Kurse, Video-Tutorials und Webinare, die von unseren Experten erstellt wurden. Wie Sie mit Pipedrives CRM Ihr Vertriebsteam unterstützen und mehr Deals in weniger Zeit abschließen können?Die Antworten darauf finden Sie in unserer umfassenden Video-Datenbank. Für Ratschläge, um Ihr Toolset in Vertrieb und Marketing besser aufzustellen, besuchen Sie den <a href="https://www.pipedrive.com/de/blog">Pipedrive Blog</a>.</span>
<span class="lang-es">Las ventajas de las herramientas de CRM son infinitas, pero encontrar el mejor <a href="https://www.pipedrive.com/es-es/features/crm-system">sistema de CRM</a> para tu negocio puede ser una batalla. Aprender con Pipedrive es una plataforma centralizada llena de cursos en línea, tutoriales en video y seminarios web escritos y dirigidos por nuestros expertos. Descubre cómo reunir a tu fuerza de ventas y cerrar más tratos en menos tiempo con el CRM de Pipedrive. Encontrarás la solución en nuestra completa biblioteca de videos si te estancas o tiene dudas. Para obtener más consejos sobre cómo mejorar tus conjuntos de herramientas de ventas y marketing, visita el <a href="https://www.pipedrive.com/es/blog">blog de Pipedrive</a>.</span>
<span class="lang-fr">Les avantages d’un logiciel CRM n’ont de limite que l’imagination. Pour autant, il n’est pas toujours évident de dénicher le <a href="https://www.pipedrive.com/fr/features/crm-system">meilleur CRM</a>, autrement dit, celui que vous pourrez personnaliser pour l’adapter aux besoins de votre entreprise. Pipedrive Learn est un centre de formation en ligne qui vous propose des didacticiels, des tutoriels vidéos et des webinaires écrits et dirigés par nos spécialistes. Apprenez à canaliser votre force de vente et à booster vos résultats commerciaux grâce au CRM sur mesure de Pipedrive. Pensez à consulter notre vidéothèque ou à visiter le <a href="https://www.pipedrive.com/fr/blog">blog de Pipedrive</a> pour obtenir davantage de conseils et d’astuces pour affûter vos outils de vente et de marketing. </span>
<span class="lang-br">Os benefícios das ferramentas CRM são infinitos, mas encontrar o sistema de CRM para a sua empresa pode ser difícil. O Aprenda com o Pipedrive é uma plataforma centralizada com cursos, tutoriais em vídeo e webinars escritos e dirigidos por nossos especialistas. Saiba como usar sua força de vendas e fechar ainda mais negócios em menos tempo com o CRM Pipedrive. Neste espaço você encontrará a nossa biblioteca de vídeos caso tenha dúvidas. Para mais conselhos sobre como melhorar suas ferramentas de vendas e marketing, visite o blog do Pipedrive .</span> </div>
</div>
<div class="faq-element">
<div class="faq-question" onclick="this.classList.toggle('open')">
<div class="faq-question-icon">
<i class="far fa-angle-down faq-icon-closed"></i>
<i class="far fa-angle-up faq-icon-opened"></i>
</div>
<div class="faq-question-text">
<span class="lang-en">How to learn CRM software</span>
<span class="lang-de">Wie kann man den Umgang mit CRM-Software lernen?</span>
<span class="lang-es">Cómo aprender a usar un software de CRM</span>
<span class="lang-fr">Par où commencer votre formation à la GRC ?</span>
<span class="lang-br">Como aprender a usar um software CRM</span>
</div>
</div>
<div class="faq-answer body-s">
<span class="lang-en">Various types of CRM can help you succeed in business, from cloud-based CRM systems to pen-and-paper solutions. You can access in-depth guides online, including on social media sites like LinkedIn, to learn more about your CRM software. While tutorials may be helpful, high pricing might block you from getting the information you need. Pipedrive Learn is free to access and offers tutorials for all of Pipedrive's features under one roof. Get more tips and tricks to maximize your CRM tool by visiting our <a href="https://support.pipedrive.com/en">Help Center</a>.</span>
<span class="lang-de">Verschiedene Arten von CRM können den Erfolg Ihres Unternehmens unterstützen, angefangen bei Stift-und-Papier-Lösungen bis hin zu cloud-basierten CRM-Systemen. Sie können online, etwa auf Social Media Seiten wie LinkedIn, detaillierte Leitfäden finden, um mehr über CRM Software zu lernen. Online-Kurse können hilfreich sein, aber die hohen Preise könnten Sie daran hintern, die Informationen zu erhalten, die sie wirklich brauchen. Pipedrive Learn ist kostenlos zugänglich und bietet Tutorials zu allen Pipedrive Funktionen an einem Ort. In unserem <a href="https://support.pipedrive.com/en">Help Centre</a> erhalten Sie mehr Tipps und Tricks, um Ihr CRM Tool zu optimieren.</span>
<span class="lang-es">Varios tipos de CRM pueden ayudarte a tener éxito en los negocios, desde sistemas de CRM basados en la nube hasta soluciones de lápiz y papel. Puedes acceder a guías detalladas en línea, incluso en sitios de redes sociales como LinkedIn, para obtener más información sobre tu software de CRM. Si bien los tutoriales pueden ser útiles, los precios altos pueden impedirte obtener la información que necesitas. Aprender con Pipedrive es de acceso gratuito y ofrece tutoriales para todas las funciones de Pipedrive bajo un mismo techo. Obtén más consejos y trucos para maximizar tu herramienta de CRM al visitar nuestro <a href="https://support.pipedrive.com/en">Centro de ayuda</a>.</span>
<span class="lang-fr">Toutes les entreprises ne recourent pas aux mêmes outils pour gérer leur relation client. Si certaines s’accommodent du bon vieux système papier et crayon, la plupart tendent à privilégier des systèmes CRM SaaS basés dans le cloud. Pipedrive Learn vous propose gratuitement quantités de tutoriels et de vidéos sur les moindres fonctionnalités de votre logiciel. Visitez notre <a href="https://support.pipedrive.com/en">centre d’assistance</a> pour obtenir davantage de conseils et astuces.</span>
<span class="lang-br">Vários tipos de CRMs podem ajudar você a ter sucesso, dos sistemas baseados em nuvem ao papel e caneta. Você pode acessar guias aprofundados online, incluindo sites de redes sociais como o LinkedIn, para aprender mais sobre o seu software CRM. Embora tutoriais possam ser úteis, preços altos podem ser um empecilho para obter as informações que você precisa. O Aprenda com o Pipedrive oferece acesso gratuito e tutoriais sobre todos os recursos do Pipedrive em um só lugar. Receba mais dicas e conheça truques para maximizar o uso da sua ferramenta CRM em nossa Central de ajuda.</span> </div>
</div>
</div>
</div>
{% include 'seo_faq' %}

75
Custom_Templates/customer_templates/Pipedrive - UserLearn/_homepage_generic_cards.html.liquid Normal file
View File

@ -0,0 +1,75 @@
<div class="generic-cards-collection-wrapper container width-limit">
<div class="generic-cards-collection row">
{% assign card_button_text = '<span class="lang-en">See more</span>
<span class="lang-de"></span>
<span class="lang-es"></span>
<span class="lang-fr"></span>
<span class="lang-br"></span>' %}
{% assign card_image = "https://s3.amazonaws.com/static.northpass.com/pipedrive/homepage-generic-cards-academy.png" %}
{% assign card_alt_text = "Man watching at a Pipedrive sales academy course on the laptop" %}
{% assign card_title = '<span class="lang-en">Academy courses</span>
<span class="lang-de"></span>
<span class="lang-es"></span>
<span class="lang-fr"></span>
<span class="lang-br"></span>' %}
{% assign card_description = "<span class='lang-en'>We've crafted the perfect online courses to hone your sales strategies. Whether you're starting to use your Pipedrive CRM system or brushing up on your skills, we've got the course for you!</span>
<span class='lang-de'></span>
<span class='lang-es'></span>
<span class='lang-fr'></span>
<span class='lang-br'></span>"
%}
{% assign card_button_link = "/app/catalog" %}
{% include "cards_generic" %}
{% assign card_image = "https://s3.amazonaws.com/static.northpass.com/pipedrive/homepage-generic-cards-video-tutorial.png" %}
{% assign card_alt_text = "Woman watching a Pipedrive crm video tutorial on the laptop" %}
{% assign card_title = '<span class="lang-en">Video tutorials</span>
<span class="lang-de"></span>
<span class="lang-es"></span>
<span class="lang-fr"></span>
<span class="lang-br"></span>' %}
{% assign card_description = "<span class='lang-en'>Watch insightful Pipedrive product tutorials made for all types of learners. Learn CRM tips to keep you winning and get team members up to speed with detailed product demos.</span>
<span class='lang-de'></span>
<span class='lang-es'></span>
<span class='lang-fr'></span>
<span class='lang-br'></span>"
%}
{% assign card_button_link = "/app/video-tutorials" %}
{% include "cards_generic" %}
{% assign card_image = "https://s3.amazonaws.com/static.northpass.com/pipedrive/homepage-generic-cards-webinars.png" %}
{% assign card_alt_text = "Group of people sitting at a Pipedrive sales seminar" %}
{% assign card_title = '<span class="lang-en">Webinars</span>
<span class="lang-de"></span>
<span class="lang-es"></span>
<span class="lang-fr"></span>
<span class="lang-br"></span>' %}
{% assign card_description = "<span class='lang-en'>This section gives you access to all our helpful webinars. Sign up for future live streams and browse our entire catalog of on-demand discussions.</span>
<span class='lang-de'></span>
<span class='lang-es'></span>
<span class='lang-fr'></span>
<span class='lang-br'></span>"
%}
{% assign card_button_link = 'https://www.pipedrive.com/en/webinars" target="_blank"' %}
{% include "cards_generic" %}
</div>
</div>
<style>
.generic-cards-collection-wrapper {
margin-top: 40px;
margin-bottom: 10px;
}
@media only screen and (min-width: 768px) {
.generic-cards-collection-wrapper {
margin-top: 80px;
margin-bottom: 40px;
}
.generic-cards-collection .course-card {
padding-left:18px;
padding-right:18px;
}
}
</style>

310
Custom_Templates/customer_templates/Pipedrive - UserLearn/_homepage_latest_courses.html.liquid Normal file
View File

@ -0,0 +1,310 @@
<section class="homepage-courses-wrapper width-limit">
<div class="homepage-filter">
<div class="filter-item body-s strong filter-item-active" filter-items="latest" onclick='filterHomepage(this)'>
<span class="lang-en">Latest activity</span>
<span class="lang-de">Letzte Aktivität</span>
<span class="lang-es">Última actividad</span>
<span class="lang-fr">Dernière activité</span>
<span class="lang-br">Actividade mais recente</span>
</div>
<div class="filter-item body-s strong" filter-items="in-progress" onclick='filterHomepage(this)'>
<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 class="filter-item body-s strong" filter-items="completed" onclick='filterHomepage(this)'>
<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 class="filter-item body-s strong" filter-items="my-list" onclick='filterHomepage(this)'>
<span class="lang-en">My list</span>
<span class="lang-de">Meine Liste</span>
<span class="lang-es">Mi lista</span>
<span class="lang-fr">Ma liste</span>
<span class="lang-br">Minha lista</span>
</div>
</div>
<div class="homepage-courses-sections-wrapper">
<div class="homepage-courses-section" filter-name="latest">
<div class="homepage-courses-subsection homepage-courses-subsection-courses">
<h3 class="homepage-courses-section-title">
<span class="lang-en">Your latest courses</span>
<span class="lang-de">Ihre letzten Kurse</span>
<span class="lang-es">Sus últimos cursos</span>
<span class="lang-fr">Vos derniers cours</span>
<span class="lang-br">Seus últimos cursos</span>
</h3>
<div class="homepage-courses-list">
{% assign any_course = false %}
{% for course in courses.enrolled %}
{% if course.ribbon != "VIDEO" %}
{% if current_person.properties.latest_courses contains course.id %}
{% assign any_course = true %}
{% include 'cards_course_homepage' %}
{% endif %}
{% endif %}
{% endfor %}
</div>
</div>
{% unless any_course %}
<style>
.homepage-courses-subsection-courses {
display: none;
}
</style>
{% endunless %}
<div class="homepage-courses-subsection homepage-courses-subsection-tutorials">
<h3 class="homepage-courses-section-title">
<span class="lang-en">Your latest tutorials</span>
<span class="lang-de">Ihre neuesten Tutorials</span>
<span class="lang-es">Tus últimos tutoriales</span>
<span class="lang-fr">Vos derniers tutoriels</span>
<span class="lang-br">Seus últimos tutoriais</span>
</h3>
<div class="homepage-courses-list">
{% assign any_course = false %}
{% for course in courses.in_catalog %}
{% if course.ribbon == "VIDEO" %}
{% if current_person.properties.latest_tutorials contains course.id %}
{% assign any_course = true %}
{% include 'cards_course_homepage' %}
{% endif %}
{% endif %}
{% endfor %}
</div>
</div>
</div>
{% if any_course %}
<style>
.homepage-courses-subsection-courses {
padding-bottom: 60px;
border-bottom: 1px solid #E1E1FF;
margin-bottom: 60px;
}
@media only screen and (min-width: 768px) {
.homepage-courses-subsection-courses {
padding-bottom: 80px;
margin-bottom: 80px;
}
}
</style>
{% else %}
<style>
.homepage-courses-subsection-tutorials {
display: none;
}
</style>
{% endif %}
<div class="homepage-courses-section filter-hidden" filter-name="in-progress">
<h3 class="homepage-courses-section-title">
<span class="lang-en">Courses waiting for you to finish</span>
<span class="lang-de">Kurse, die Sie noch beenden müssen</span>
<span class="lang-es">Cursos a la espera de que termine</span>
<span class="lang-fr">Cours en attente d'être complétés</span>
<span class="lang-br">Cursos esperando por você para terminar</span>
</h3>
<div class="homepage-courses-list">
{% for course in courses.enrolled %}
{% if course.completed? == false and course.started? %}
{% include 'cards_course_homepage' %}
{% endif %}
{% endfor %}
</div>
</div>
<div class="homepage-courses-section filter-hidden" filter-name="completed">
<h3 class="homepage-courses-section-title">
<span class="lang-en">Courses you completed</span>
<span class="lang-de">Abgeschlossene Kurse</span>
<span class="lang-es">Cursos realizados</span>
<span class="lang-fr">Les cours que vous avez suivis</span>
<span class="lang-br">Cursos que você completou</span>
</h3>
<div class="homepage-courses-list">
{% for course in courses.enrolled %}
{% if course.completed? %}
{% include 'cards_course_homepage' %}
{% endif %}
{% endfor %}
</div>
</div>
<div class="homepage-courses-section filter-hidden" filter-name="my-list">
<h3 class="homepage-courses-section-title">
<span class="lang-en">All your courses</span>
<span class="lang-de">Alle Ihre Kurse</span>
<span class="lang-es">Todos sus cursos</span>
<span class="lang-fr">Tous vos cours</span>
<span class="lang-br">Todos os seus cursos</span>
</h3>
<div class="homepage-courses-list">
{% for course in courses.enrolled %}
{% if course.ribbon != 'VIDEO' %}
{% include 'cards_course_homepage' %}
{% endif %}
{% endfor %}
</div>
</div>
</div>
</section>
<style>
.homepage-courses-wrapper {
padding-top: 20px;
padding-bottom: 40px;
}
.homepage-filter {
display: flex;
gap: 10px;
flex-wrap: wrap;
padding-bottom: 20px;
}
.filter-item {
border: 2px solid #E4E6E9;
border-radius: 300px;
padding: 10px 20px;
white-space: nowrap;
color: #656E7A;
cursor: pointer;
}
.filter-item-active {
color: var(--green);
border: 2px solid var(--green);
pointer-events: none;
}
.filter-hidden {
display: none;
}
.homepage-courses-section-title {
padding-bottom: 20px;
}
@media only screen and (min-width: 768px) {
.homepage-courses-wrapper {
padding-top: 40px;
padding-bottom: 80px;
}
.homepage-filter {
padding-bottom: 40px;
}
.homepage-courses-section-title {
padding-bottom: 40px;
}
}
/* homepage cards */
.homepage-card {
width: 100%;
margin-bottom: 40px;
}
.homepage-card-wrapper:last-child .homepage-card {
margin-bottom: 0;
}
.homepage-card:hover .homepage-card-title {
text-decoration: underline;
}
.homepage-card-image {
width: 100%;
object-fit: contain;
border-radius:4px;
}
.homepage-card-body {
margin-bottom:10px;
}
.homepage-card-body-wrapper {
width: 100%;
display: flex;
flex-direction: column;
justify-content: space-evenly;
}
.homepage-card-info {
display: flex;
justify-content: space-between;
}
.homepage-card-progress-bar {
background: #DADDE1;
height: 2px;
width: 100%;
border-radius: 4px;
}
.homepage-card-progress-bar-fill {
background: var(--green);
height: 2px;
border-radius: 4px;
min-width: 4px;
}
.homepage-card-activities {
color: #656E7A;
}
.homepage-card-title {
line-height:26px;
margin-bottom:10px;
}
.homepage-card-progress-value {
color: var(--green);
}
.homepage-card-time {
color: #656E7A;
}
.homepage-card-button {
height: 42px;
width: auto;
}
@media only screen and (min-width: 768px) {
.homepage-card {
display: flex;
gap: 40px;
}
.homepage-card-image {
width: 30%;
max-width: 207px;
}
.homepage-card-body {
display: flex;
justify-content: space-between;
align-items:flex-end;
}
.homepage-card-title {
margin-bottom:0;
}
}
</style>
<script>
function filterHomepage(element) {
document.querySelector('.filter-item-active').classList.remove('filter-item-active');
element.classList.add('filter-item-active');
document.querySelectorAll('.homepage-courses-section').forEach(section => {
if (section.getAttribute('filter-name') === element.getAttribute('filter-items')) {
section.classList.remove('filter-hidden');
} else {
section.classList.add('filter-hidden');
}
});
}
addEventListener('DOMContentLoaded', () => {
document.querySelectorAll('.homepage-courses-section').forEach(courseSection => {
let courseList = courseSection.querySelector('.homepage-courses-list');
let filterButton = document.querySelector(`[filter-items=${courseSection.getAttribute('filter-name')}]`);
if (courseList.childElementCount === 0) {
filterButton.classList.add('np-hidden');
filterButton.classList.remove('filter-item-active');
if (!courseSection.classList.contains('filter-hidden')) {
courseSection.classList.add('filter-hidden');
}
} else {
if (!document.querySelector('.filter-item-active')) {
filterButton.classList.add('filter-item-active');
courseSection.classList.remove('filter-hidden');
}
}
});
});
</script>

306
Custom_Templates/customer_templates/Pipedrive - UserLearn/_homepage_page_info.html.liquid Normal file
View File

@ -0,0 +1,306 @@
<section class="page-info-wrapper">
<div class="page-info width-limit">
<div class="page-info-section">
<div class="page-info-section-image-wrapper">
<img class="page-info-section-image" src="https://s3.amazonaws.com/static.northpass.com/pipedrive/homepage-card-academy-courses.webp">
</div>
<div class="page-info-section-text">
<h3 class="page-info-section-title">
<span class="lang-en">Academy courses</span>
<span class="lang-de">Academy-Kurse</span>
<span class="lang-es">Cursos de la Academia</span>
<span class="lang-fr">Cours de l’Académie</span>
<span class="lang-br">Cursos da Academia</span>
</h3>
<div class="page-info-section-description">
<span class="lang-en">
<ul>
<li>Learn the Pipedrive fundamentals to streamline your customer data.</li>
<li>Get expert tips to refine your workflow and improve your <a href="https://www.pipedrive.com/en/blog/sales-process">sales process</a>.</li>
<li>Discover sales courses that help you leverage your CRM solution to win more deals.</li>
<li>Unlock in-depth marketing training courses covering sales pipelines, email marketing and more.</li>
</ul>
</span>
<span class="lang-de">
<ul>
<li>Lernen Sie die Grundlagen von Pipedrive, um Kundendaten zu optimieren Expertentipps, mit denen Sie Arbeitsabläufe verfeinern und den <a href="https://www.pipedrive.com/de/blog/vertriebsprozess">Vertriebsprozess</a> verbessern können.</li>
<li>Entdecken Sie Vertriebskurse, mit denen Sie Ihre CRM-Lösung nutzen können, um mehr Deals zu gewinnen Zugang zu fundierten Marketing-Kursen, die Sales-Pipelines, E-Mail-Marketing und mehr abdecken</li>
</ul>
</span>
<span class="lang-es">
<ul>
<li>Aprende los fundamentos de Pipedrive para agilizar los datos de tus clientes.</li>
<li>Obtén el consejo de los expertos para refinar tu flujo de trabajo y mejorar tu <a href="https://www.pipedrive.com/es/blog/guia-basica-crear-proceso-ventas">proceso de ventas</a>.</li>
<li>Descubre cursos de ventas que te ayuden a aprovechar tu solución de CRM para ganar más tratos.</li>
<li>Desbloquea cursos detallados de capacitación de marketing que abarcan embudos de venta, marketing por correo electrónico y más.</li>
</ul>
</span>
<span class="lang-fr">
<ul>
<li>Découvrez les fondamentaux de Pipedrive pour rationaliser vos données clients.</li>
<li>Profitez de conseils d'experts pour optimiser votre flux de travail et améliorer votre <a href="https://www.pipedrive.com/fr/blog/processus-commercial">processus de vente</a> Suivez des cours sur la vente qui vous aideront à mieux exploiter votre CRM pour gagner davantage d’affaires.</li>
<li>Débloquez des formations exclusives sur des thèmes comme le pipeline commercial, la fidélisation, le marketing automation ou encore le marketing relationnel.</li>
</ul>
</span>
<span class="lang-br">
<ul>
<li>Aprenda o básico sobre o Pipedrive para simplificar dados de clientes.</li>
<li>Receba dicas de especialistas sobre como refinar seu fluxo de trabalho e melhore seu <a href="https://www.pipedrive.com/pt/blog/processo-de-vendas">processo de vendas</a>.</li>
<li>Descubra cursos de vendas que vão ajudar você a aproveitar seu CRM ao máximo e fechar mais negócios.</li>
<li>Curta cursos de treinamento em marketing sobre assuntos como pipeline de vendas, e-mail marketing e mais.</li>
</ul>
</span>
</div>
<a class="button-large button-2" href="/app/catalog">
<span class="lang-en">See more</span>
<span class="lang-de">Mehr</span>
<span class="lang-es">Ver más cursos</span>
<span class="lang-fr">Voir plus</span>
<span class="lang-br">Veja mais</span>
</a>
</div>
</div>
<div class="page-info-section">
<div class="page-info-section-image-wrapper">
<img class="page-info-section-image" src="https://s3.amazonaws.com/static.northpass.com/pipedrive/homepage-card-video-tutorials.jpg">
</div>
<div class="page-info-section-text">
<h3 class="page-info-section-title">
<span class="lang-en">Video tutorials</span>
<span class="lang-de">Video-Tutorials</span>
<span class="lang-es">Tutoriales en vídeo</span>
<span class="lang-fr">Tutoriels vidéo</span>
<span class="lang-br">Tutoriais em vídeo</span>
</h3>
<div class="page-info-section-description">
<span class="lang-en">
<ul>
<li>Learn how to use the latest Pipedrive features with quick product tutorials.</li>
<li>Share playlists with new team members to speed up the onboarding process.</li>
<li>Upskill yourself with videos on products and features that you aren’t using to their full potential.</li>
</ul>
</span>
<span class="lang-de">
<ul>
<li>Kurze Produkt-Tutorials zu Updates und den neuesten Pipedrive-Funktionen.</li>
<li>Teilen Sie Playlists mit neuen Teammitgliedern, um den Onboarding-Prozess zu beschleunigen.</li>
<li>Erlernen Sie neue Fähigkeiten mit Videos zu Produkten und Funktionen, deren Möglichkeiten Sie bisher nicht voll ausschöpfen.</li>
</ul>
</span>
<span class="lang-es">
<ul>
<li>Aprende a usar las funciones más recientes de Pipedrive con tutoriales rápidos de productos.</li>
<li>Comparte listas de reproducción con nuevos miembros del equipo para acelerar el proceso de incorporación.</li>
<li>Mejora tus habilidades con videos sobre productos y funciones sobre las que no estás utilizando su potencial al máximo.</li>
</ul>
</span>
<span class="lang-fr">
<ul>
<li>Initiez-vous aux derniers outils de Pipedrive avec des tutoriels clairs et concis.</li>
<li>Partagez vos listes de lecture avec vos nouvelles recrues pour accélérer leur intégration.</li>
<li>Développez vos compétences en regardant des vidéos sur les produits et les fonctionnalités que vous n’utilisez pas à leur plein potentiel.</li>
</ul>
</span>
<span class="lang-br">
<ul>
<li>Aprenda como usar os recursos mais recentes do Pipedrive em tutoriais rápidos sobre o produto.</li>
<li>Compartilhe playlists com novos membros da equipe para acelerar o processo de integração.</li>
<li>Melhores suas habilidades com vídeos sobre produtos e recursos que você ainda não está aproveitando ao máximo.</li>
</ul>
</span>
</div>
<a class="button-large button-2" href="/app/video-tutorials">
<span class="lang-en">See more</span>
<span class="lang-de">Mehr</span>
<span class="lang-es">Ver más cursos</span>
<span class="lang-fr">Voir plus</span>
<span class="lang-br">Veja mais</span>
</a>
</div>
</div>
<div class="page-info-section">
<div class="page-info-section-image-wrapper">
<img class="page-info-section-image" src="https://s3.amazonaws.com/static.northpass.com/pipedrive/homepage-card-webinars.webp">
</div>
<div class="page-info-section-text">
<h3 class="page-info-section-title">
<span class="lang-en">Webinars</span>
<span class="lang-de">Webinare</span>
<span class="lang-es">Seminarios web</span>
<span class="lang-fr">Webinaires</span>
<span class="lang-br">Webinars</span>
</h3>
<div class="page-info-section-description">
<span class="lang-en">
<ul>
<li>Learn about CRM tools and features straight from our product engineers and managers.</li>
<li>Ask us anything you need to know to optimize your sales game.</li>
<li>Master your pipeline setup and make sure you tailor it to your needs with professional advice.</li>
</ul>
</span>
<span class="lang-de">
<ul>
<li>Lernen Sie direkt von unseren Produkt-Entwicklern und Managern alles zu CRM-Tools und -Funktionen.</li>
<li>Fragen Sie uns alles, was Sie wissen wollen, um Ihre Vertriebsfähigkeiten zu verbessern.</li>
<li>Nutzen Sie professionelle Tipps, um Ihre Pipeline optimal einzurichten und an Ihre Bedürfnisse anzupassen.</li>
</ul>
</span>
<span class="lang-es">
<ul>
<li>Conoce las herramientas y características de CRM directamente de nuestros ingenieros y gerentes de productos.</li>
<li>Pregúntanos todo lo que necesitas saber para optimizar tu juego de ventas.</li>
<li>Domina la configuración de tu embudo y asegúrate de adaptarla a tus necesidades con asesoramiento profesional.</li>
</ul>
</span>
<span class="lang-fr">
<ul>
<li>Informez-vous sur nos fonctionnalités et nos outils CRM auprès de nos ingénieurs et chefs de produit.</li>
<li>Trouvez réponse à toutes vos questions pour faire décoller vos ventes.</li>
<li>Découvrez des conseils et astuces pour configurer votre pipeline à la perfection et l’adapter à vos besoins spécifiques.</li>
</ul>
</span>
<span class="lang-br">
<ul>
<li>Saiba tudo sobre ferramentas e recursos do CRM direto de nossos engenheiros de produto e gerentes.</li>
<li>Tire dúvidas sobre o que você precisa para otimizar suas vendas.</li>
<li>Domine a configuração do seu pipeline e adapte-o de acordo com as suas necessidades com conselhos profissionais.</li>
</ul>
</span>
</div>
<a class="button-large button-2" href="https://www.pipedrive.com/en/webinars" target="_blank">
<span class="lang-en">See more</span>
<span class="lang-de">Mehr</span>
<span class="lang-es">Ver más cursos</span>
<span class="lang-fr">Voir plus</span>
<span class="lang-br">Veja mais</span>
</a>
</div>
</div>
<div class="page-info-section">
<div class="page-info-section-image-wrapper">
<img class="page-info-section-image" src="https://s3.amazonaws.com/static.northpass.com/pipedrive/page_info_homepage_4.webp">
</div>
<div class="page-info-section-text">
<h3 class="page-info-section-title">
<span class="lang-en">How to learn CRM tips with online courses</span>
<span class="lang-de">Online-Kurse mit CRM-Tipps</span>
<span class="lang-es">Cómo aprender consejos de CRM con cursos en línea</span>
<span class="lang-fr">Des cours en vidéo pour se former au CRM</span>
<span class="lang-br">Como aprender sobre CRMs com cursos online</span>
</h3>
<div class="page-info-section-description">
<span class="lang-en">
Pipedrive’s Academy courses are packed with quick, clear videos to help you make the most of our CRM tool.<br>
Access detailed video tutorials for Pipedrive features and add-ons such as Campaigns and Automations, or find more general videos to polish your sales management.<br>
Watch webinars with sales and marketing thought leaders about how to take your talents to the next level.<br>
We’ve designed our videos to help everyone, from Pipedrive CRM platform beginners to seasoned sales pros. So, whether you’re just starting on your sales, marketing or CRM journey or want to refine your knowledge, you'll be able to find the right course for you.
</span>
<span class="lang-de">
Die Academy-Kurse von Pipedrive sind kurze, verständliche Videos, mit denen Sie alles aus Ihrem CRM-Tool herausholen.<br>
Zugang zu detaillierten Video-Tutorials zu Pipedrive-Funktion und Add-ons wie Campaigns und Automations sowie allgemeinere Videos, mit denen Sie Ihr Vertriebsmanagement verbessern können.<br>
Führende Stimmen aus Vertrieb und Marketing führen durch Webinare und erklären Ihnen, wie Sie Ihre Teammitglieder auf ein neues Level bringen.<br>
Unsere Videos sind so konzipiert, dass Sie vom CRM-Anfänger bis hin zu erfahrenen Vertriebsprofis alle unterstützen. Ganz gleich, ob Sie am Anfang Ihrer Vertriebs-, Marketing- oder auch CRM-Reise stehen oder Ihr Wissen vertiefen wollen, es wird der richtige Kurs für Sie dabei sein.
</span>
<span class="lang-es">
Los cursos de la Academia Pipedrive están repletos de videos rápidos y claros para ayudarte a aprovechar al máximo nuestra herramienta de CRM.<br>
Accede a detallados tutoriales en video para funciones y complementos de Pipedrive, como Campaigns y Automatizaciones, o encuentra videos más generales para pulir tu administración de ventas.<br>
Mira seminarios web con líderes de opinión de ventas y marketing sobre cómo llevar tus talentos al siguiente nivel.<br>
Diseñamos nuestros videos para ayudar a todos, desde los principiantes de la plataforma de CRM de Pipedrive hasta los experimentados profesionales de ventas. Entonces, ya sea que recién comiences tu recorrido de ventas, marketing o CRM o desees perfeccionar tus conocimientos, podrás encontrar el curso adecuado para ti.
</span>
<span class="lang-fr">
L’Académie de Pipedrive vous propose une multitude de cours en vidéo vous expliquant de façon claire et concise comment utiliser votre CRM à son plein potentiel.<br>
Consultez nos tutoriels vidéos approfondis sur les outils et les extensions de Pipedrive comme Campaigns et Automations, ou regardez des vidéos plus générales pour apprendre à optimiser votre gestion commerciale.<br>
Visionnez des webinaires et apprenez à démultiplier l’efficacité de vos équipes auprès de leaders inspirants de la vente et du marketing.<br>
Ces vidéos se destinent aux pros de la vente et aux responsables marketing, quel que soit leur niveau d’expérience ou leur secteur d’activité. Que cela soit pour acquérir les bases de la vente, du marketing digital et des logiciels CRM, ou pour approfondir votre expertise, nous avons le cours qu’il vous faut.
</span>
<span class="lang-br">
Os cursos da Academia do Pipedrive são repletos de vídeos curtos e diretos para ajudar você a aproveitar ao máximo nossa ferramenta de CRM.<br>
Acesse tutoriais em vídeo detalhados sobre recursos e extensões do Pipedrive, como o Campaigns e as Automatizações ou encontre vídeos mais gerais para aprimorar sua gestão de vendas.<br>
Assista a webinars com líderes de vendas e marketing sobre como explorar ainda mais os seus talentos.<br>
Criamos nossos vídeos para ajudar a todos, desde iniciantes no CRM Pipedrive até profissionais de vendas experientes. Se você está apenas começando sua jornada de vendas, marketing ou CRM ou se deseja refinar seus conhecimentos, aqui você encontra o curso que está procurando.
</span>
</div>
</div>
</div>
<div class="page-info-section">
<div class="page-info-section-image-wrapper">
<img class="page-info-section-image" src="https://s3.amazonaws.com/static.northpass.com/pipedrive/page_info_homepage_5.webp">
</div>
<div class="page-info-section-text">
<h3 class="page-info-section-title">
<span class="lang-en">What can I find in Pipedrive Learn?</span>
<span class="lang-de">Was bietet Pipedrive Learn?</span>
<span class="lang-es">¿Qué puedo encontrar en Aprender con Pipedrive?</span>
<span class="lang-fr">Que trouverez-vous dans Pipedrive Learn ?</span>
<span class="lang-br">O que eu encontro no Aprenda com o Pipedrive?</span>
</h3>
<div class="page-info-section-description">
<span class="lang-en">
Our experts have compiled all our online courses and product guides in one place, so you don’t have to spend valuable time searching across platforms.<br>
With our in-depth tutorials, you can learn the following:<br>
<ul>
<li>How to make the most of every customer interaction with Pipedrive CRM</li>
<li>All about leveraging crucial insights to create easy-to-read dashboards inside Pipedrive</li>
<li>Tips to cultivate your business processes and up profitability as a small business</li>
<li>Advice on refining your CRM to offer top-class customer support</li>
<li>How to create stunning marketing campaigns with our Campaigns templates</li>
</ul>
As well as much more!
</span>
<span class="lang-de">
Hier finden Sie alle unsere Online-Kurse und Produktleitfäden an einem Ort, sodass Sie keine wertvolle Zeit bei der Suche auf verschiedenen Plattformen verschwenden müssen.<br>
Mit unseren detaillierten Tutorials lernen Sie:<br>
<ul>
<li>Wie Sie mit dem CRM von Pipedrive aus jedem Gespräch mit Kunden das Beste herausholen</li>
<li>Wie Sie mit Einblicken in Pipedrive leicht lesbare Dashboards erstellen</li>
<li>Tipps zur Pflege Ihrer Unternehmensprozesse und zur Erhöhung der Profitabilität</li>
<li>Ratschläge zur Nutzung Ihres CRMs für erstklassigen Kundenservice</li>
<li>Wie Sie mit unseren Campaigns Vorlagen attraktive Kampagnen erstellen</li>
</ul>
Und noch viel mehr!
</span>
<span class="lang-es">
Nuestros expertos han compilado todos nuestros cursos en línea y guías de productos en un solo lugar, por lo que no tienes que perder tu valioso tiempo buscando entre plataformas.<br>
Con nuestros tutoriales detallados, puedes aprender lo siguiente:<br>
<ul>
<li>Cómo aprovechar al máximo cada interacción con el cliente con el CRM de Pipedrive</li>
<li>Todo sobre cómo aprovechar los avances informativos cruciales para crear tableros fáciles de leer dentro de Pipedrive</li>
<li>Consejos para cultivar tus procesos comerciales y aumentar la rentabilidad como pequeña empresa</li>
<li>Consejos para perfeccionar tu CRM para ofrecer una atención al cliente de primera clase</li>
<li>Cómo crear impresionantes campañas de marketing con nuestras plantillas de Campaigns</li>
</ul>
¡Y muchas cosas más!
</span>
<span class="lang-fr">
Nos spécialistes ont compilé l’intégralité de nos démos, cours et formations en ligne dans cet espace unique afin de vous faire gagner un temps précieux au moment de rechercher des renseignements.<br>
Dans ces tutoriels détaillés, vous découvrirez :<br>
<ul>
<li>comment faire fructifier chaque interaction client avec le CRM Pipedrive</li>
<li>comment exploiter vos données clients à l’aide de rapports analytiques et de tableaux de bord</li>
<li>des astuces pour renforcer vos processus commerciaux et dégager davantage de recettes pour votre PME ou TPE</li>
<li>des conseils pour affiner votre GRC et perfectionner votre service client</li>
<li>des outils pour créer de superbes campagnes emailing grâce aux modèles de notre extension Campaigns.</li>
</ul>
... Et bien plus encore !
</span>
<span class="lang-br">
Nossos especialistas compilaram todos os nossos cursos e guias de produto online em um só lugar para que você não precise gastar tempo fazendo buscas em diferentes plataformas.<br>
Com nossos tutoriais aprofundados, você vai aprender a:<br>
<ul>
<li>Aproveitar ao máximo cada interação de clientes com o CRM Pipedrive</li>
<li>Usar todos os insights cruciais para criar painéis dentro do Pipedrive</li>
<li>Dicas para cultivar os processos da sua equipe e a rentabilidade sendo uma empresa pequena</li>
<li>Conselhos sobre como refinar seu CRM para oferecer um suporte ao cliente de qualidade</li>
<li>Criar campanhas de marketing incríveis com os modelos do Campaigns</li>
</ul>
E muito mais!
</span>
</div>
</div>
</div>
</div>
</section>

63
Custom_Templates/customer_templates/Pipedrive - UserLearn/_homepage_recommended.html.liquid Normal file
View File

@ -0,0 +1,63 @@
<div class="courses container width-limit">
<section class="courses-section">
<h3 class="courses-title strong">
<span class="lang-en">Don’t know where to start? We recommend these</span>
<span class="lang-de">Sie wissen nicht, wo Sie anfangen sollen? Wir empfehlen</span>
<span class="lang-es">¿No sabe por dónde empezar? Le recomendamos</span>
<span class="lang-fr">Vous ne savez pas par où commencer ? Voici nos recommandations.</span>
<span class="lang-br">Não sabe por onde começar? Recomendamos estes</span>
</h3>
{% assign any_course = false %}
<div class="courses-list row">
{% for course in courses.in_catalog %}
{% if course.properties.recommended_for_new_learner %}
{% assign any_course = true %}
{% if course.ribbon == 'VIDEO' %}
{% include 'cards_video' %}
{% else %}
{% include 'cards_course' %}
{% endif %}
{% endif %}
{% endfor %}
</div>
</section>
</div>
{% unless any_course %}
<style>
.courses {
display: none;
}
</style>
{% endunless %}
<style>
.courses-title {
padding-bottom: 40px;
padding-top: 40px;
}
@media only screen and (min-width: 768px) {
.courses {
padding-top: 40px;
}
.courses-list > div {
padding-left: 15px;
padding-right: 15px;
}
.courses-list .video-card .course-card-content {
margin-top: 31.6px;
}
.courses .course-card {
padding-bottom: 0;
}
}
</style>
<script>
window.addEventListener('DOMContentLoaded', () => {
document.querySelectorAll('.course-card-description').forEach((x) => {
$clamp(x, {clamp: 5});
})
})
</script>

5
Custom_Templates/customer_templates/Pipedrive - UserLearn/_learning_path_banners.html.liquid Normal file
View File

@ -0,0 +1,5 @@
{% if learning_path.new_content_available? %}
{% include "learning_path_new_content_banner" %}
{% else %}
{% include "learning_path_completed_banner" %}
{% endif %}

17
Custom_Templates/customer_templates/Pipedrive - UserLearn/_learning_path_certificate.html.liquid Normal file
View File

@ -0,0 +1,17 @@
{% if learning_path.has_certificate? %}
{% if learning_path.certificate_completed? %}
<div class="np-learning-path-outline-bar np-hidden-mobile"></div>
<a
class="np-learning-path-certificate-link"
href="{{ learning_path.certificate_link }}"
>
<div class="np-learning-path-certificate">
{% include "learning_path_certificate_content" %}
</div>
</a>
{% else %}
<div class="np-learning-path-certificate np-learning-path-certificate--inactive">
{% include "learning_path_certificate_content" %}
</div>
{% endif %}
{% endif %}

19
Custom_Templates/customer_templates/Pipedrive - UserLearn/_learning_path_certificate_content.html.liquid Normal file
View File

@ -0,0 +1,19 @@
<div class="np-learning-path-certificate-content">
<div class="np-learning-path-certificate-avatar" role="img">
<i class="np-learning-path-certificate-avatar-icon fal fa-award"></i>
<h5 class="np-learning-path-certificate-avatar-title">
{% t .avatar_title %}
</h5>
</div>
<h4 class="np-learning-path-certificate-name">
{{ learning_path.certificate_name }}
</h4>
{% if learning_path.certificate_completed? %}
<time
class="np-learning-path-certificate-issue-date"
datetime="{{ learning_path.certificate_issue_date }}"
>
{{ learning_path.certificate_issue_date | date: "%B %d, %Y" }}
</time>
{% endif %}
</div>

13
Custom_Templates/customer_templates/Pipedrive - UserLearn/_learning_path_completed_banner.html.liquid Normal file
View File

@ -0,0 +1,13 @@
<div class="np-learning-path-completed-banner np-learning-path-banner">
<img class="np-learning-path-banner-image" src="https://s3.amazonaws.com/static.northpass.com/images/stars-completed.svg"/>
<div class="np-learning-path-banner-content">
<h3 class="np-learning-path-banner-headline">{% t .headline %}</h3>
<p class="np-learning-path-banner-description">{% t .description %}</p>
<div class="np-learning-path-banner-actions">
{% if learning_path.certificate_link %}
<a href="{{ learning_path.certificate_link }}" class="np-learning-path-banner-action np-learning-path-banner-action--primary">{% t .actions.certificate %}</a>
{% endif %}
<a href="/app/courses" class="np-learning-path-banner-action np-learning-path-banner-action--secondary">{% t .actions.more_courses %}</a>
</div>
</div>
</div>

56
Custom_Templates/customer_templates/Pipedrive - UserLearn/_learning_path_course.html.liquid Normal file
View File

@ -0,0 +1,56 @@
{% if learning_path.enrolled? and course.unlocked? %}
<div class="np-learning-path-outline-bar np-hidden-mobile"></div>
<a
class="np-learning-path-outline-item np-card-container"
href="{% route learning_path_course, learning_path_id: learning_path.id, id: course.id %}"
>
<div class="np-card-content np-card-padding">
<img
src="{{ item.image }}"
alt="{{ course.name }}"
class="np-learning-path-outline-course-image"
>
<div class="np-learning-path-outline-content">
<div class="np-learning-path-outline-name np-top-title">
{{ course.name }}
</div>
{% if course.instructors %}
<div class="np-learning-path-outline-caption">
{{ course.instructors }}
</div>
{% endif %}
<div class="np-learning-path-outline-progress
{% if course.completed? %} np-color-success {% else %} np-button-color {% endif %}
">
{% t shared.progress, count: course.progress %}
</div>
</div>
<i class="fas fa-chevron-right np-learning-path-outline-icon"></i>
{% if course.optional? %}
<div class="np-optional-ribbon">
{% t shared.optional %}
</div>
{% endif %}
</div>
</a>
{% else %}
<div class="np-learning-path-outline-item np-learning-path-outline-inactive-item np-card-container">
<div class="np-card-content np-card-padding">
<img
src="{{ item.image }}"
alt="{{ course.name }}"
class="np-learning-path-outline-course-image"
>
<div class="np-learning-path-outline-content">
<div class="np-learning-path-outline-name np-top-title">
{{ course.name }}
</div>
</div>
{% if course.optional? %}
<div class="np-optional-ribbon">
{% t shared.optional %}
</div>
{% endif %}
</div>
</div>
{% endif %}

6
Custom_Templates/customer_templates/Pipedrive - UserLearn/_learning_path_description.html.liquid Normal file
View File

@ -0,0 +1,6 @@
<h3 class="np-card-heading">
{% t .about %}
</h3>
<div class="np-card-text">
{{ learning_path.description }}
</div>

21
Custom_Templates/customer_templates/Pipedrive - UserLearn/_learning_path_desktop_content.html.liquid Normal file
View File

@ -0,0 +1,21 @@
<div class="row">
<div class="col-xs-12 col-sm-6">
<div class="np-card-container">
<img
src="{{ learning_path.image_url }}"
class="np-top-image"
alt="{{ learning_path.name }}"
/>
<div class="np-card-padding-dynamic">
{% include "learning_path_description" %}
{% include "learning_path_instructors" %}
</div>
</div>
</div>
<div class="col-xs-12 col-sm-6 np-grid-spacing">
<div class="np-top-cta">
{% include "learning_path_progress_and_cta" %}
</div>
{% include "learning_path_outline" %}
</div>
</div>

12
Custom_Templates/customer_templates/Pipedrive - UserLearn/_learning_path_desktop_header.html.liquid Normal file
View File

@ -0,0 +1,12 @@
<div class="np-resource-header np-resource-header-card np-card-padding-large">
<div class="np-top-vocabulary np-text-title">
{% t shared.learning_path.title %}
<i class="far fa-road np-button-color np-learning-path-icon"></i>
</div>
<div class="np-top-title">
<a href="{% route home %}" class="np-back-button" aria-label="{% t shared.go_back %}">
<i class="far fa-arrow-left np-icon-back"></i>
</a>
{{ learning_path.name }}
</div>
</div>

2
Custom_Templates/customer_templates/Pipedrive - UserLearn/_learning_path_desktop_view.html.liquid Normal file
View File

@ -0,0 +1,2 @@
{% include "learning_path_desktop_header" %}
{% include "learning_path_desktop_content" %}

26
Custom_Templates/customer_templates/Pipedrive - UserLearn/_learning_path_instructors.html.liquid Normal file
View File

@ -0,0 +1,26 @@
{% if learning_path.instructors.any? %}
<div class="np-card-content-divider">
<h3 class="np-card-heading">
{% t shared.instructors %}
</h3>
<div class="np-content-instructors-content row">
{% for instructor in learning_path.instructors %}
<div class="np-content-instructors-content-item col-xs-12 col-lg">
<img
src="{{ instructor.avatar_url }}"
class="np-content-instructors-content-image"
alt="{{ instructor.name }}"
>
<div class="np-content-instructors-content-description">
<div class="np-content-instructors-content-name">
{{ instructor.name }}
</div>
<div class="np-content-instructors-content-info np-text-light">
{{ instructor.title }}
</div>
</div>
</div>
{% endfor %}
</div>
</div>
{% endif %}

19
Custom_Templates/customer_templates/Pipedrive - UserLearn/_learning_path_mobile_content.html.liquid Normal file
View File

@ -0,0 +1,19 @@
{% if learning_path.in_progress? %}
{% include "learning_path_outline" %}
<div class="np-card-container np-card-padding np-card-spacing">
{% include "learning_path_description" %}
</div>
{% else %}
<div class="np-card-container np-card-padding np-card-spacing">
{% include "learning_path_description" %}
</div>
<div class="np-card-spacing">
{% include "learning_path_outline" %}
</div>
{% endif %}
{% if learning_path.instructors.any? %}
<div class="np-card-container np-card-padding np-card-spacing">
{% include "learning_path_instructors" %}
</div>
{% endif %}

17
Custom_Templates/customer_templates/Pipedrive - UserLearn/_learning_path_mobile_header.html.liquid Normal file
View File

@ -0,0 +1,17 @@
<div class="np-resource-header np-card-padding-vertical">
<div class="np-top-vocabulary np-text-title">
{% t shared.learning_path.title %}
<i class="far fa-road np-button-color np-learning-path-icon"></i>
</div>
<div class="np-top-title">
{{ learning_path.name }}
</div>
<img
src="{{ learning_path.image_url }}"
class="np-top-image"
alt="{{ learning_path.name }}"
/>
<div class="np-top-cta">
{% include "learning_path_progress_and_cta" %}
</div>
</div>

2
Custom_Templates/customer_templates/Pipedrive - UserLearn/_learning_path_mobile_view.html.liquid Normal file
View File

@ -0,0 +1,2 @@
{% include "learning_path_mobile_header" %}
{% include "learning_path_mobile_content" %}

12
Custom_Templates/customer_templates/Pipedrive - UserLearn/_learning_path_new_content_banner.html.liquid Normal file
View File

@ -0,0 +1,12 @@
<div class="np-learning-path-new-content-banner np-learning-path-banner">
<div class="np-learning-path-banner-content">
<h3 class="np-learning-path-banner-headline">{% t .headline %}</h3>
<p class="np-learning-path-banner-description">{% t .description %}</p>
<div class="np-learning-path-banner-actions">
{% learning_path_next_step_button learning_path, class: "np-learning-path-banner-action np-learning-path-banner-action--primary" %}
{% if learning_path.certificate_link %}
<a href="{{ learning_path.certificate_link }}" class="np-learning-path-banner-action np-learning-path-banner-action--secondary">{% t .actions.view_certificate %}</a>
{% endif %}
</div>
</div>
</div>

10
Custom_Templates/customer_templates/Pipedrive - UserLearn/_learning_path_outline.html.liquid Normal file
View File

@ -0,0 +1,10 @@
<div class="np-learning-path-outline">
{% for item in learning_path.items %}
{% if item.course? %}
{% include "learning_path_course", course: item %}
{% elsif item.training_event? %}
{% include "learning_path_training_session", training_session: item %}
{% endif %}
{% endfor %}
{% include "learning_path_certificate" %}
</div>

20
Custom_Templates/customer_templates/Pipedrive - UserLearn/_learning_path_progress_and_cta.html.liquid Normal file
View File

@ -0,0 +1,20 @@
{% if learning_path.enrolled? %}
<div class="np-top-cta-progress-content">
<div class="np-top-cta-progress-title np-text-title">
{% t .progress %}
</div>
<div class="np-progress-bar-container">
<div
style="width: {{ learning_path.progress }}%"
class="np-button-background-color np-card-progress-bar">
</div>
</div>
<div class="np-top-cta-progress-text
{% if learning_path.completed? %} np-color-success {% else %} np-button-color {% endif %}
">
{% t shared.progress, count: learning_path.progress %}
</div>
</div>
{% endif %}
{% learning_path_next_step_button learning_path, class: "np-top-button np-button-font-color np-button np-button-big" %}

3
Custom_Templates/customer_templates/Pipedrive - UserLearn/_learning_path_summary_desktop_view.html.liquid Normal file
View File

@ -0,0 +1,3 @@
{% include "learning_path_desktop_header" %}
{% include "learning_path_banners" %}
{% include "learning_path_desktop_content" %}

5
Custom_Templates/customer_templates/Pipedrive - UserLearn/_learning_path_summary_mobile_view.html.liquid Normal file
View File

@ -0,0 +1,5 @@
<div class="np-card-padding">
{% include "learning_path_banners" %}
</div>
{% include "learning_path_mobile_header" %}
{% include "learning_path_mobile_content" %}

53
Custom_Templates/customer_templates/Pipedrive - UserLearn/_learning_path_training_session.html.liquid Normal file
View File

@ -0,0 +1,53 @@
{% if learning_path.enrolled? and training_session.unlocked? %}
<div class="np-learning-path-outline-bar np-hidden-mobile"></div>
<a
class="np-learning-path-outline-item np-card-container"
href="{% route training_session, id: training_session.id %}"
>
<div class="np-card-content np-card-padding">
<div class="np-events-content-date np-button-background-color">
<div class="np-events-content-month">
{{ training_session.month }}
</div>
<div class="np-events-content-day">
{{ training_session.day }}
</div>
</div>
<div class="np-learning-path-outline-content">
<div class="np-learning-path-outline-name np-top-title">{{ training_session.name }}</div>
<div class="np-learning-path-outline-caption">{{ training_session.instructors }}</div>
<div class="np-events-content-time np-learning-path-outline-time np-button-color">
{{ training_session.time }} {{ training_session.time_zone }}
</div>
</div>
<i class="fas fa-chevron-right np-learning-path-outline-icon"></i>
{% if training_session.optional? %}
<div class="np-optional-ribbon">
{% t shared.optional %}
</div>
{% endif %}
</div>
</a>
{% else %}
<div class="np-learning-path-outline-item np-card-container np-learning-path-outline-inactive-item">
<div class="np-card-content np-card-padding">
<div class="np-events-content-date np-button-background-color">
<div class="np-events-content-month">
{{ training_session.month }}
</div>
<div class="np-events-content-day">
{{ training_session.day }}
</div>
</div>
<div class="np-learning-path-outline-content">
<div class="np-learning-path-outline-name np-top-title">{{ training_session.name }}</div>
<div class="np-learning-path-outline-caption">{{ training_session.caption }}</div>
</div>
{% if training_session.optional? %}
<div class="np-optional-ribbon">
{% t shared.optional %}
</div>
{% endif %}
</div>
</div>
{% endif %}

14
Custom_Templates/customer_templates/Pipedrive - UserLearn/_learning_paths_index.html.liquid Normal file
View File

@ -0,0 +1,14 @@
<div class="np-learning-paths-resources">
{% if items.any? %}
{% for learning_path in items %}
{% include "cards_learning_path" with learning_path %}
{% endfor %}
{% else %}
<div class="np-learning-paths-resources-container">
<div class="np-zero-state-text">
{% t .empty %}
</div>
<img class="np-zero-state-learning-paths" alt="{% t .empty %}" />
</div>
{% endif %}
</div>

40
Custom_Templates/customer_templates/Pipedrive - UserLearn/_messages.html.liquid Normal file
View File

@ -0,0 +1,40 @@
{% if messages.alert.size > 0 %}
<div class="np-alert np-alert-error">
<div class="np-alert-wrapper">
{% for message in messages.alert %}
<svg width="33" height="32" viewBox="0 0 33 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M13.8996 4.08464C15.0527 2.0766 17.9495 2.07661 19.1026 4.08464L29.6813 22.5059C30.8299 24.5059 29.3861 26.9999 27.0798 26.9999H5.92242C3.61611 26.9999 2.17235 24.5059 3.32088 22.5059L13.8996 4.08464ZM16.5015 6.87498C17.33 6.87498 18.0015 7.54656 18.0015 8.37498V16.625C18.0015 17.4534 17.33 18.125 16.5015 18.125C15.6731 18.125 15.0015 17.4534 15.0015 16.625V8.37498C15.0015 7.54656 15.6731 6.87498 16.5015 6.87498ZM18.0015 21.5C18.0015 20.6716 17.33 20 16.5015 20C15.6731 20 15.0015 20.6716 15.0015 21.5V22.5C15.0015 23.3284 15.6731 24 16.5015 24C17.33 24 18.0015 23.3284 18.0015 22.5V21.5Z" fill="#FF5550"/>
</svg>
<div>{{ message }}</div>
{% endfor %}
</div>
</div>
{% endif %}
{% if messages.notice.size > 0 %}
<div class="np-alert np-alert-success">
<div class="np-alert-wrapper">
{% for message in messages.notice %}
<div>{{ message }}</div>
{% endfor %}
</div>
</div>
{% endif %}
<style>
.np-alert-wrapper {
display: flex;
align-items: center;
gap: 12px;
}
.np-alert-error {
background: #FFE7E6;
color: var(--black-digital);
}
.np-alert {
min-height: unset;
padding: 20px 0;
font-size: unset;
}
</style>

135
Custom_Templates/customer_templates/Pipedrive - UserLearn/_new_academy_popup.html.liquid Normal file
View File

@ -0,0 +1,135 @@
<div class="modal-popup-wrapper modal-popup-expanded np-hidden-mobile">
<div class="modal-popup">
<div class="modal-popup-header">
<div class="modal-popup-icon-wrapper">
<div class="modal-popup-icon">
<svg width="31" height="31" viewBox="0 0 31 31" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M14.1193 24.8906L16.4583 27.2297C16.8675 27.639 17.5037 27.6663 17.8792 27.2907L18.0793 27.0906C20.1886 24.9812 21.0322 21.8761 20.3355 18.7868M6.0897 16.8604L3.77117 14.5417C3.3629 14.1334 3.33441 13.4999 3.70754 13.1268L3.8361 12.9982C5.97567 10.8585 9.12999 10.0074 12.2716 10.7223M7.03593 21.5022L4.73261 19.1987C4.47382 18.9399 4.48036 18.5138 4.74722 18.2469L12.3703 10.6233C16.2888 6.70453 21.3717 4.17812 26.8013 3.45059C27.242 3.39154 27.6092 3.7588 27.5502 4.19951C26.8227 9.62947 24.2965 14.7128 20.378 18.6316L12.7549 26.2552C12.4881 26.522 12.0619 26.5286 11.8031 26.2698L9.49983 23.9663M19.3554 8.5658C18.505 9.41635 18.505 10.7954 19.3554 11.6459C20.2059 12.4965 21.5848 12.4964 22.4353 11.6459C23.2858 10.7954 23.2858 9.41635 22.4353 8.5658C21.5848 7.71526 20.2059 7.71526 19.3554 8.5658ZM6.41965 24.5826C7.10004 25.2631 8.20317 25.2631 8.88355 24.5826L11.3475 22.1185C12.0278 21.4381 12.0278 20.3349 11.3475 19.6545C10.6671 18.974 9.56394 18.974 8.88355 19.6545L6.41965 22.1185C5.73926 22.799 5.73926 23.9022 6.41965 24.5826Z" stroke="#017737" stroke-width="1.3"/>
</svg>
</div>
</div>
<div class="modal-popup-title-expanded strong">
We’ve upgraded your Pipedrive Learning experience!
</div>
</div>
<div class="modal-popup-description body-s">
It’s now easy to keep track of what you learn, access guides, and earn badges for completed courses.
</div>
<button class="button-2 button-medium" data-tf-popup="pMDH88ux" data-tf-opacity="100" data-tf-size="100" data-tf-iframe-props="title=PD Learn welcome banner feedback" data-tf-transitive-search-params data-tf-medium="snippet">
Let us know what you think
</button>
<div class="modal-popup-close" onclick="toggleModal(true)">
<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M1.70723 0.292893C1.31671 -0.097631 0.683542 -0.097631 0.293018 0.292893C-0.0975066 0.683417 -0.0975066 1.31658 0.293018 1.70711L5.58585 6.99994L0.292893 12.2929C-0.097631 12.6834 -0.097631 13.3166 0.292893 13.7071C0.683417 14.0976 1.31658 14.0976 1.70711 13.7071L7.00006 8.41415L12.293 13.7071C12.6835 14.0976 13.3167 14.0976 13.7072 13.7071C14.0977 13.3166 14.0977 12.6834 13.7072 12.2929L8.41428 6.99994L13.7071 1.70712C14.0976 1.3166 14.0976 0.683433 13.7071 0.292908C13.3166 -0.0976163 12.6834 -0.0976163 12.2929 0.292908L7.00006 5.58572L1.70723 0.292893Z" fill="#656E7A"/>
</svg>
</div>
</div>
</div>
<div class="modal-popup-wrapper modal-popup-hidden np-hidden-mobile np-hidden" onclick="toggleModal(false)">
<div class="modal-popup">
<div class="modal-popup-header">
<div class="modal-popup-icon-wrapper">
<div class="modal-popup-icon">
<svg width="31" height="31" viewBox="0 0 31 31" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M14.1193 24.8906L16.4583 27.2297C16.8675 27.639 17.5037 27.6663 17.8792 27.2907L18.0793 27.0906C20.1886 24.9812 21.0322 21.8761 20.3355 18.7868M6.0897 16.8604L3.77117 14.5417C3.3629 14.1334 3.33441 13.4999 3.70754 13.1268L3.8361 12.9982C5.97567 10.8585 9.12999 10.0074 12.2716 10.7223M7.03593 21.5022L4.73261 19.1987C4.47382 18.9399 4.48036 18.5138 4.74722 18.2469L12.3703 10.6233C16.2888 6.70453 21.3717 4.17812 26.8013 3.45059C27.242 3.39154 27.6092 3.7588 27.5502 4.19951C26.8227 9.62947 24.2965 14.7128 20.378 18.6316L12.7549 26.2552C12.4881 26.522 12.0619 26.5286 11.8031 26.2698L9.49983 23.9663M19.3554 8.5658C18.505 9.41635 18.505 10.7954 19.3554 11.6459C20.2059 12.4965 21.5848 12.4964 22.4353 11.6459C23.2858 10.7954 23.2858 9.41635 22.4353 8.5658C21.5848 7.71526 20.2059 7.71526 19.3554 8.5658ZM6.41965 24.5826C7.10004 25.2631 8.20317 25.2631 8.88355 24.5826L11.3475 22.1185C12.0278 21.4381 12.0278 20.3349 11.3475 19.6545C10.6671 18.974 9.56394 18.974 8.88355 19.6545L6.41965 22.1185C5.73926 22.799 5.73926 23.9022 6.41965 24.5826Z" stroke="#017737" stroke-width="1.3"/>
</svg>
</div>
</div>
<div class="modal-popup-title-hidden">
Give us feedback
</div>
</div>
<div class="modal-popup-expand">
<svg width="14" height="8" viewBox="0 0 14 8" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M7 2.52036L12.2066 7.69423C12.6168 8.10192 13.282 8.10192 13.6923 7.69423C14.1026 7.28654 14.1026 6.62553 13.6923 6.21784L7.74286 0.305771C7.33259 -0.101924 6.66741 -0.101924 6.25714 0.305771L0.307703 6.21784C-0.102568 6.62553 -0.102568 7.28654 0.307703 7.69423C0.717974 8.10192 1.38315 8.10192 1.79342 7.69423L7 2.52036Z" fill="#192435"/>
</svg>
</div>
</div>
</div>
<script src="//embed.typeform.com/next/embed.js"></script>
<style>
.modal-popup-wrapper {
position: fixed;
padding: 20px;
border: 1px solid #E1E1FF;
border-radius: 4px;
background: #F7F7FE;
bottom: 40px;
right: 40px;
width: 335px;
z-index: 100;
}
.modal-popup {
position: relative;
}
.modal-popup-close {
position: absolute;
right: -5px;
top: -5px;
line-height: 0;
cursor: pointer;
}
.modal-popup-header {
display: flex;
gap: 10px;
align-items: center;
}
.modal-popup-icon {
height: 40px;
width: 40px;
border-radius: 50%;
background: var(--green-light);
display: flex;
justify-content: center;
align-items: center;
}
.modal-popup-description {
margin-bottom: 20px;
}
.modal-popup-expand {
display: flex;
align-items: center;
padding: 1px;
cursor: pointer;
}
.modal-popup-hidden {
cursor: pointer;
}
.modal-popup-hidden .modal-popup {
display: flex;
justify-content: space-between;
}
.modal-popup-expanded .modal-popup-header {
margin-bottom: 10px;
}
.modal-hidden {
display: none !important;
}
</style>
<script>
if (window.sessionStorage.pipedrive_popup_hide) {
toggleModal(true);
}
document.onscroll = function() {
if ((window.innerHeight + window.scrollY) >= document.body.scrollHeight - 100) {
document.querySelectorAll('.modal-popup-wrapper').forEach(x => {x.classList.add('modal-hidden')});
}else{
document.querySelectorAll('.modal-popup-wrapper').forEach(x => {x.classList.remove('modal-hidden')});
}
}
function toggleModal(want_to_hide) {
document.querySelector('.modal-popup-hidden').classList.toggle('np-hidden');
document.querySelector('.modal-popup-expanded').classList.toggle('np-hidden');
if (want_to_hide) {
window.sessionStorage.pipedrive_popup_hide = 'true'
} else {
window.sessionStorage.pipedrive_popup_hide = ''
}
}
</script>

156
Custom_Templates/customer_templates/Pipedrive - UserLearn/_opinions.html.liquid Normal file
View File

@ -0,0 +1,156 @@
{% capture quotes_svg %}
<svg class="opinion-quotes" width="26" height="23" viewBox="0 0 26 23" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M24 10C23.6818 11.3796 23.346 12.8476 22.9924 14.4041C22.6742 15.9605 22.3737 17.4816 22.0909 18.9673C21.8081 20.4177 21.5783 21.7619 21.4015 23L14.1364 23L13.7652 22.4163C14.0833 21.1429 14.4899 19.7986 14.9848 18.3837C15.4798 16.9687 16.0101 15.5361 16.5758 14.0857C17.1768 12.6354 17.7601 11.2735 18.3258 10L24 10ZM12.2348 10C11.9167 11.3796 11.5808 12.8476 11.2273 14.4041C10.9091 15.9605 10.6086 17.4816 10.3258 18.9673C10.0429 20.4177 9.81313 21.7619 9.63636 23L2.37121 23L2 22.4163C2.31818 21.1429 2.72475 19.7986 3.2197 18.3837C3.71465 16.9687 4.24495 15.5361 4.81061 14.0857C5.41162 12.6354 5.99495 11.2735 6.56061 10L12.2348 10Z" fill="var(--green)"/>
</svg>
{% endcapture %}
<div class="opinions-wrapper">
<div class="opinions container width-limit">
<h2 class="opinions-title strong">
<span class="lang-en">Trusted by over 100,000 sales teams around the world</span>
<span class="lang-de">Mehr als 100.000 Vertriebsteams weltweit vertrauen Pipedrive!</span>
<span class="lang-es">Tenemos la confianza de más de 100,000 equipos de ventas en todo el mundo</span>
<span class="lang-fr">Le CRM de référence pour plus de 100 000 équipes dans le monde</span>
<span class="lang-br">Mais de 100 000 equipes de vendas em todo o mundo confiam em nós</span>
</h2>
<div class="opinions-list row">
<div class="opinion-card col-12 col-md-4">
<div class="opinion-text">
{{ quotes_svg }}
<span class="lang-en">It has made our sales department more effective and efficient. It’s easy to use and it’s constantly updated. It’s easy to use and it’s constantly updated.</span>
<span class="lang-de">Unsere Vertriebsabteilung ist nun effektiver und effizienter. Pipedrive ist benutzerfreundlich und wird regelmäßig aktualisiert.</span>
<span class="lang-es">Ha hecho que nuestro departamento de ventas sea más eficaz y eficiente. Es fácil de usar y se actualiza constantemente. Es fácil de usar y se actualiza constantemente</span>
<span class="lang-fr">Avec Pipedrive, nos équipes commerciales ont gagné en efficacité et en productivité. L’outil est facile à utiliser et constamment mis à jour.</span>
<span class="lang-br">Nosso departamento de vendas se tornou muito mais eficiente. O Pipedrive é muito fácil de usar e é atualizado constantemente.</span>
</div>
<div class="opinion-person">
<div class="opinion-person-image-wrapper">
<img class="opinion-person-image" src="https://s3.amazonaws.com/static.northpass.com/pipedrive/opinions-1.webp">
</div>
<div class="body-s opinion-person-info">
<div class="opinion-person-info-name">
Ana Rinck
</div>
<div class="opinion-person-info-title">
<span class="lang-en">Operations Manager</span>
<span class="lang-de">Betriebsleiter</span>
<span class="lang-es">Director de operaciones</span>
<span class="lang-fr">Responsable des opérations</span>
<span class="lang-br">Gerente de operações</span>
<span>, BAKERpedia</span>
</div>
</div>
</div>
</div>
<div class="opinion-card col-12 col-md-4">
<div class="opinion-text">
{{ quotes_svg }}
<span class="lang-en">Easy to use, reasonably priced, and ensures I don’t drop the ball on following up with my leads!</span>
<span class="lang-de">Benutzerfreundlichkeit, angemessener Preis und es sorgt dafür, dass ich bei meinen Leads am Ball bleibe.</span>
<span class="lang-es">¡Fácil de usar, a un precio razonable y me asegura que no perderé la oportunidad de darle seguimiento a mis prospectos!</span>
<span class="lang-fr">Facile à prendre en main, bon marché, avec ce logiciel CRM, je suis sûre de ne jamais oublier une seule relance avec mes prospects !</span>
<span class="lang-br">Fácil de usar, preço justo e garante que eu nunca me esqueça de fazer o follow up com os leads!</span>
</div>
<div class="opinion-person">
<div class="opinion-person-image-wrapper">
<img class="opinion-person-image" src="https://s3.amazonaws.com/static.northpass.com/pipedrive/opinions-2.webp">
</div>
<div class="body-s opinion-person-info">
<div class="opinion-person-info-name">
Christine Luken
</div>
<div class="opinion-person-info-title">
<span class="lang-en">Author and Speaker</span>
<span class="lang-de">Autor und Redner</span>
<span class="lang-es">Autor y conferenciante</span>
<span class="lang-fr">Auteur(e) et conférencier(e)</span>
<span class="lang-br">Autor(a) e palestrante</span>
<span>, Financial Lifeguard</span>
</div>
</div>
</div>
</div>
<div class="opinion-card col-12 col-md-4">
<div class="opinion-text">
{{ quotes_svg }}
<span class="lang-en">The best thing we love about Pipedrive is it does two-way sync with Google Apps. It has helped us to better organise and keep everything on track.</span>
<span class="lang-de">Was wir an Pipedrive am meisten lieben, ist die 2-Wege-Synchronisation mit Google Apps. Dadurch können wir uns besser organisieren und den Überblick behalten.</span>
<span class="lang-es">Lo que más nos encanta de Pipedrive es que se sincroniza bidireccionalmente con Google Apps. Nos ha ayudado a organizarnos mejor y a mantener todo en orden.</span>
<span class="lang-fr">Ce que Pipedrive fait de mieux à notre avis, c’est la synchronisation bidirectionnelle avec les applis Google. Cela nous a permis de mieux nous organiser et de tenir notre feuille de route.</span>
<span class="lang-br">A coisa que mais gostamos no Pipedrive é a sincronização bilateral com os aplicativos do Google. Isso nos ajudou na organização e no ritmo de trabalho.</span>
</div>
<div class="opinion-person">
<div class="opinion-person-image-wrapper">
<div class="opinion-person-image-wrapper">
<img class="opinion-person-image" src="https://s3.amazonaws.com/static.northpass.com/pipedrive/opinions-3.webp">
</div>
</div>
<div class="body-s opinion-person-info">
<div class="opinion-person-info-name">
Nirmal Gyanwali
</div>
<div class="opinion-person-info-title">
<span class="lang-en">Managing Director</span>
<span class="lang-de">Managing Director</span>
<span class="lang-es">Director general</span>
<span class="lang-fr">Directeu(rice) général(e)</span>
<span class="lang-br">Diretor(a) administrativo(a)</span>
<span>, Nirmal Web Studio</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<style>
.opinions-wrapper {
padding: 60px 0 20px;
}
.opinions-title {
margin-bottom: 30px;
}
.opinions-list {
margin: auto;
}
.opinion-card {
padding-bottom: 40px;
}
.opinion-text {
padding-bottom: 10px;
}
.opinion-person {
display: flex;
}
.opinion-person-info {
align-self: center;
margin-left: 20px;
}
.opinion-person-image {
border-radius: 50%;
height: 60px;
width: 60px;
}
.opinion-person-info-name {
font-weight: 700;
}
.opinion-person-info-title {
display: flex;
}
.opinion-person-info-title > span {
white-space: nowrap;
}
@media only screen and (min-width: 768px) {
.opinions-wrapper {
padding: 80px 0;
}
.opinions-title {
margin-bottom: 40px;
}
.opinion-card {
padding-bottom: 0;
}
}
</style>

48
Custom_Templates/customer_templates/Pipedrive - UserLearn/_profile_settings_initial.html.liquid Normal file
View File

@ -0,0 +1,48 @@
<main class="np-main np-account">
<div class="np-flex np-flex-center width-limit">
<form class="np-form" method="post" id="name-form" novalidate>
<div class="np-card">
<div class="container">
<h2 class="account-form-title">
<span class="lang-en">Please fill out your name</span>
<span class="lang-de">Bitte geben Sie Ihren Namen an</span>
<span class="lang-es">Por favor escribe tu nombre</span>
<span class="lang-fr">Veuillez indiquer votre nom</span>
<span class="lang-br">Seu nome</span>
</h2>
<div class="row">
<div class="col-xs-12 np-account-form">
<div class="np-form-field">
<label class="account-label" for="first-name">
<span class="lang-en">First name</span>
<span class="lang-de">Vorname</span>
<span class="lang-es">Nombre de pila</span>
<span class="lang-fr">Prénom</span>
<span class="lang-br">Nome</span> *
</label>
<input class="np-input" id="first-name" autocomplete="off">
</div>
<div class="np-form-field">
<label class="account-label" for="last-name">
<span class="lang-en">Last name</span>
<span class="lang-de">Nachname</span>
<span class="lang-es">Apellidos</span>
<span class="lang-fr">Nom de famille</span>
<span class="lang-br">Sobrenome</span> *
</label>
<input class="np-input" id="last-name" autocomplete="off">
</div>
<button type="submit" class="np-button np-button-big np-button-large-font np-form-action">
<span class="lang-en">Save</span>
<span class="lang-de">Speichern</span>
<span class="lang-es">Guardar</span>
<span class="lang-fr">Sauvegarder</span>
<span class="lang-br">Salvar</span>
</button>
</div>
</div>
</div>
</div>
</form>
</div>
</main>

51
Custom_Templates/customer_templates/Pipedrive - UserLearn/_profile_settings_regular.html.liquid Normal file
View File

@ -0,0 +1,51 @@
{% include "header" %}
<main class="np-main np-account">
<div class="np-flex np-flex-center width-limit">
<form class="np-form" method="post" id="name-form" novalidate>
<div class="np-card">
<div class="container">
<h1 class="account-form-title">
<span class="lang-en">My profile</span>
<span class="lang-de">Mein Profil</span>
<span class="lang-es">Mi perfil</span>
<span class="lang-fr">Mon profil</span>
<span class="lang-br">Meu perfil</span>
</h1>
<div class="row">
<div class="col-xs-12 np-account-form">
<div class="np-form-field">
<label class="account-label" for="first-name">
<span class="lang-en">First name</span>
<span class="lang-de">Vorname</span>
<span class="lang-es">Nombre de pila</span>
<span class="lang-fr">Prénom</span>
<span class="lang-br">Nome</span> *
</label>
<input class="np-input" id="first-name" autocomplete="off">
</div>
<div class="np-form-field">
<label class="account-label" for="last-name">
<span class="lang-en">Last name</span>
<span class="lang-de">Nachname</span>
<span class="lang-es">Apellidos</span>
<span class="lang-fr">Nom de famille</span>
<span class="lang-br">Sobrenome</span> *
</label>
<input class="np-input" id="last-name" autocomplete="off">
</div>
<button type="submit" class="np-button np-button-big np-button-large-font np-form-action">
<span class="lang-en">Save profile</span>
<span class="lang-de">Profil speichern</span>
<span class="lang-es">Guardar perfil</span>
<span class="lang-fr">Sauvegarder le profil</span>
<span class="lang-br">Salvar perfil</span>
</button>
{% include "account_deletion" %}
</div>
</div>
</div>
</div>
</form>
</div>
</main>

34
Custom_Templates/customer_templates/Pipedrive - UserLearn/_search_result.html.liquid Normal file
View File

@ -0,0 +1,34 @@
<div class="np-card np-search-result">
<div class="np-card-container">
<div class="np-card-content">
<img
class="np-search-result-image"
alt="{{ result.name }}"
src="{{ result.image_url }}"
/>
<div class="np-search-result-content">
<div>
<a class="np-search-result-title" href="{{ result.path }}">
{{ result.name }}
<span class="link"></span>
</a>
</div>
<div class="np-search-result-snippet">{{ result.sanitized_description }}</div>
</div>
</div>
</div>
</div>
{% comment %}
The styling below and the additional span is to make the entire div clickable as requested by the client.
{% endcomment %}
<style>
.link {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 1;
}
</style>

13
Custom_Templates/customer_templates/Pipedrive - UserLearn/_search_zero_state.html.liquid Normal file
View File

@ -0,0 +1,13 @@
<div class="np-card np-search-zero-state">
<div class="np-card-container">
<div class="np-card-content np-card-content-vertical np-search-zero-state-card">
<h3 class="np-search-zero-state-title">
{% t .nothing_found %}
</h3>
<div class="np-search-zero-state-subtitle">
{% t .empty %}
</div>
<div class="np-search-zero-state-image"></div>
</div>
</div>
</div>

32
Custom_Templates/customer_templates/Pipedrive - UserLearn/_seo_course.html.liquid Normal file
View File

@ -0,0 +1,32 @@
<script>
window.onVidyardAPI = (vidyardEmbed) => {
vidyardEmbed.api.addReadyListener((_, player) => {
const ldTag = setupLdTag();
document.head.insertAdjacentHTML('beforeend', ldTag)
},)
}
function setupLdTag() {
var player = VidyardV4.players[0];
var time = player.metadata.length_in_seconds
var time_minutes = Math.floor(time / 60)
var time_seconds = time % 60
var videoUrl = 'https://play.vidyard.com/' + player.uuid
return `
<script type="application/ld+json">
{
"@context": "https://schema.org/",
"@type": "VideoObject",
"name": "{{ course.name }}",
"description": "{{ course.short_description }}",
"thumbnailUrl": "{{ course.image_url }}",
"uploadDate": "{{ course.created_at }}",
"duration": "T${time_minutes}M${time_seconds}S",
"embedUrl": "${videoUrl}"
}
<\/script>`
}
</script>

30
Custom_Templates/customer_templates/Pipedrive - UserLearn/_seo_faq.html.liquid Normal file
View File

@ -0,0 +1,30 @@
{% comment %} This is generic code that will make ld+json tag from any FAQ on page {% endcomment %}
<script>
addEventListener('DOMContentLoaded', () => {
let ldTag = `
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "FAQPage",
"mainEntity": [`;
document.querySelectorAll('.faq-element').forEach(faq_element => {
let question = faq_element.querySelector('.faq-question-text').querySelector('.lang-en').innerHTML.replaceAll('"', '\"');
let answer = faq_element.querySelector('.faq-answer').querySelector('.lang-en').innerHTML.replaceAll('"', '\"');
let faq_part = `
{
"@type": "Question",
"name": "${question.replaceAll('"', '\\"')}",
"acceptedAnswer": {
"@type": "Answer",
"text": "${answer.replaceAll('"', '\\"')}"
}
},`;
ldTag = ldTag.concat(faq_part);
})
ldTag = ldTag.slice(0, -1) + `
]
}
<\/script>`
document.head.insertAdjacentHTML('beforeend', ldTag)
})
</script>

23
Custom_Templates/customer_templates/Pipedrive - UserLearn/_seo_logo.html.liquid Normal file
View File

@ -0,0 +1,23 @@
<script>
const ldTag = `
<script type="application/ld+json">
{
"@context": "https://schema.org/",
"@type": "EducationalOrganization",
"name": "Pipedrive Learn",
"url": "${window.location.origin}",
"logo": {
"@type": "ImageObject",
"contentUrl": "https://s3.amazonaws.com/static.northpass.com/pipedrive/learn_logo.png"
},
"parentOrganization": {
"@type": "Organization",
"name": "Pipedrive",
"logo": "https://s3.amazonaws.com/static.northpass.com/pipedrive/Pipedrive_Logo_Green.png",
"url": "https://www.pipedrive.com"
}
}
<\/script>`
document.head.insertAdjacentHTML('beforeend', ldTag)
</script>

126
Custom_Templates/customer_templates/Pipedrive - UserLearn/_sso_login_widget.html.liquid Normal file
View File

@ -0,0 +1,126 @@
<div class="login-widget-wrapper np-hidden">
<div class="login-widget-background"></div>
<div class="login-widget-window">
<div class="login-widget">
<h3 class="login-widget-title">
<span class="lang-en">Learn for free</span>
<span class="lang-de"></span>
<span class="lang-es"></span>
<span class="lang-fr"></span>
<span class="lang-br"></span>
</h3>
<div style="display: flex; margin-bottom: 40px;">
<a class="button-1 button-large" href="/learners/sign_in">
<span class="lang-en">Log in with Pipedrive</span>
<span class="lang-de"></span>
<span class="lang-es"></span>
<span class="lang-fr"></span>
<span class="lang-br"></span>
</a>
</div>
<div class="login-text-wrapper">
<div class="login-text-strike"></div>
<div class="login-text body-s">
<span class="lang-en">Not a Pipedrive user?<br>Create a free account to access courses</span>
<span class="lang-de"></span>
<span class="lang-es"></span>
<span class="lang-fr"></span>
<span class="lang-br"></span>
</div>
</div>
<div style="display: flex">
<a class="button-2 button-large" id="redirect-between-academies" href="https://user-learn.pipedrive.com/learners/sign_in">
<span class="lang-en">Log in or register</span>
<span class="lang-de"></span>
<span class="lang-es"></span>
<span class="lang-fr"></span>
<span class="lang-br"></span>
</a>
</div>
</div>
</div>
</div>
<style>
.login-widget-wrapper {
position: fixed;
height: 100%;
width: 100%;
top: 0;
left: 0;
z-index: 100;
}
.login-widget-background {
background: rgba(25, 36, 53, 0.4);
height: 100%;
width: 100%;
position: relative;
top: 0;
left: 0;
z-index: 100;
}
.login-widget-window {
background: #FFFFFF;
border: 2px solid #E4E6E9;
border-radius: 4px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 90%;
max-width: 600px;
z-index: 101;
}
.login-widget {
padding: 40px;
}
.login-widget-title {
text-align: center;
margin-bottom: 40px;
}
.login-text-wrapper {
position: relative;
margin-bottom: 40px;
}
.login-text {
background: white;
width: fit-content;
margin: auto;
padding: 0 10px;
max-width: 80%;
text-align: center;
}
.login-text-strike {
border-bottom: 1px solid #E4E6E9;
position: absolute;
top: 50%;
width: 100%;
height: 1px;
z-index: -1;
}
</style>
<script>
function toggleSsoWidget() {
let widget = document.querySelector('.login-widget-wrapper');
widget.classList.toggle('np-hidden');
if (widget.classList.contains('np-hidden')) {
window.onscroll = function () {};
} else {
window.onscroll = function () { window.scrollTo(0, 0); };
}
}
addEventListener('DOMContentLoaded', () => {
document.querySelector('.login-widget-background').addEventListener('click', () => {
toggleSsoWidget();
});
});
window.addEventListener('hashchange', () => {
if (window.location.hash === '#sso-widget') {
toggleSsoWidget();
history.replaceState(null, null, ' ');
}
});
</script>

0
Custom_Templates/customer_templates/Pipedrive - UserLearn/_sub_navigation.html.liquid Normal file
View File

9
Custom_Templates/customer_templates/Pipedrive - UserLearn/_training_events_dashboard.html.liquid Normal file
View File

@ -0,0 +1,9 @@
<div class="np-dashboard-resources">
{% if training_events.enrolled.any? %}
{% for training_event in training_events.enrolled %}
{% include "cards_training_event" with training_event %}
{% endfor %}
{% else %}
{% include "training_events_zero_state" %}
{% endif %}
</div>

53
Custom_Templates/customer_templates/Pipedrive - UserLearn/_training_events_filter.html.liquid Normal file
View File

@ -0,0 +1,53 @@
<div class="np-filter">
<div class="dropdown">
<button
class="np-button dropdown-button"
data-toggle-class="is-open"
data-toggle-escape
data-toggle-outside
data-toggle-target-next
type="button"
>
{% t shared.filters.filter %}
</button>
<div class="dropdown-menu" data-test="modal">
<form method="get">
<span class="dropdown-label">
{% t shared.filters.by_event_type %}
</span>
<ul class="dropdown-checkboxes">
{% for event_type in training_events.filters.event_types %}
{% capture label %}
{% t shared.event_types, key: event_type.value %}
{% endcapture %}
<li>
{% include "filter_checkbox",
label: label,
name: event_type.name,
value: event_type.value
selected: event_type.selected?
%}
</li>
{% endfor %}
</ul>
{% capture label %}{% t shared.filters.by_course %}{% endcapture %}
{%
include "filter_select",
filters: training_events.filters.courses,
key: "courses_uuid",
label: label
%}
<button
class="np-button dropdown-button-apply"
data-toggle-trigger-off
type="submit"
>
{% t shared.filters.apply %}
</button>
</form>
</div>
</div>
</div>

13
Custom_Templates/customer_templates/Pipedrive - UserLearn/_training_events_index.html.liquid Normal file
View File

@ -0,0 +1,13 @@
<div class="np-dashboard-resources">
{% if training_events.available.any? %}
<div class="row row-with-thumbnails">
{% for training_event in training_events.available %}
<div class="col-xs-12 col-sm-6 col-lg-4 np-stretch-content">
{% include "cards_training_event" with training_event %}
</div>
{% endfor %}
</div>
{% else %}
{% include "training_events_zero_state" %}
{% endif %}
</div>

9
Custom_Templates/customer_templates/Pipedrive - UserLearn/_training_events_zero_state.html.liquid Normal file
View File

@ -0,0 +1,9 @@
<div class="np-dashboard-resources-container">
<div class="np-zero-state-text">
{% t .empty %}
</div>
<img
class="np-zero-state-training-events"
alt="{% t .empty %}"
/>
</div>

52
Custom_Templates/customer_templates/Pipedrive - UserLearn/_training_session_calendars.html.liquid Normal file
View File

@ -0,0 +1,52 @@
<div class="dropdown dropdown-calendar">
<button
class="np-top-button np-button-font-color np-button np-button-big dropdown-calendar-button"
data-toggle-class="is-open"
data-toggle-escape
data-toggle-outside
data-toggle-target-next
type="button"
>
{% t .add_to_calendar %}
<i class="fas fa-chevron-down dropdown-calendar-button-chevron"></i>
</button>
<ul class="dropdown-calendar-menu">
<li class="dropdown-calendar-item">
<a
class="dropdown-calendar-item-element np-button-background-color-on-hover np-button-font-color-on-hover"
href="{{ training_session.google_calendar_url }}"
target="_blank"
>
{% t .google_calendar %}
</a>
</li>
<li class="dropdown-calendar-item">
<a
class="dropdown-calendar-item-element np-button-background-color-on-hover np-button-font-color-on-hover"
href="{{ training_session.outlook_calendar_url }}"
target="_blank"
>
{% t .outlook_calendar %}
</a>
</li>
<li class="dropdown-calendar-item">
<a
class="dropdown-calendar-item-element np-button-background-color-on-hover np-button-font-color-on-hover"
href="{{ training_session.outlook_office_calendar_url }}"
target="_blank"
>
{% t .office_calendar %}
</a>
</li>
<li class="dropdown-calendar-item">
<a
class="dropdown-calendar-item-element np-button-background-color-on-hover np-button-font-color-on-hover"
href="{{ training_session.ical_calendar_url }}"
target="_blank"
>
{% t .ical_calendar %}
</a>
</li>
</ul>
</div>

53
Custom_Templates/customer_templates/Pipedrive - UserLearn/_training_session_cta.html.liquid Normal file
View File

@ -0,0 +1,53 @@
{% if training_session.approved? %}
<div class="np-training-session-cta-note">
<i class="far fa-check np-training-session-icon"></i>
{% t .registered %}
</div>
{% elsif training_session.pending? %}
<div class="np-training-session-cta-note np-training-session-cta-note-error">
{% t .pending %}
</div>
{% elsif training_session.denied? %}
<div class="np-training-session-cta-note np-training-session-cta-note-error">
{% t .denied %}
</div>
{% elsif training_session.too_late? %}
<div class="np-training-session-cta-note np-training-session-cta-note-error">
{% t .too_late %}
</div>
{% elsif training_session.no_seats? %}
<div class="np-training-session-cta-note np-training-session-cta-note-error">
{% t .no_seats %}
</div>
{% endif %}
<div class="np-training-session-cta">
<div class="np-training-session-cta-buttons">
<form
action="{% route training_session_registration, id: training_session.id %}"
method="post"
>
{% form_authenticity_token %}
{% if training_session.internal? and training_session.approved? %}
{% if features.training_events_google_calendar? %}
{% include "training_session_calendars" %}
<button type="submit" class="np-top-button np-button np-button-big np-button-secondary">
{% t .unregister %}
</button>
{% else %}
<button type="submit" class="np-top-button np-button-font-color np-button np-button-big">
{% t .unregister %}
</button>
{% endif %}
<input type="hidden" name="_method" value="delete" />
{% endif %}
{% if training_session.not_registered? %}
<button type="submit" class="np-top-button np-button np-button-big">
{% t .register %}
</button>
{% endif %}
</form>
</div>
</div>

14
Custom_Templates/customer_templates/Pipedrive - UserLearn/_training_session_date.html.liquid Normal file
View File

@ -0,0 +1,14 @@
<div class="np-card-training-session-date">
<div class="np-button-background-color np-card-training-session-date-bar"></div>
<div class="np-card-training-session-date-day">
{{ training_session.day }}
</div>
<div>
<div class="np-card-training-session-date-month">
{{ training_session.month }}
</div>
<div class="np-card-training-session-date-year">
{{ training_session.year }}
</div>
</div>
</div>

Some files were not shown because too many files have changed in this diff Show More