Recast Templates for skipping overview page. Added Zenjob's templates. Some notes.
This commit is contained in:
Norm Rasmussen
BIN
Custom_Templates/customer_templates/.DS_Store
vendored
BIN
Custom_Templates/customer_templates/.DS_Store
vendored
Binary file not shown.
@ -0,0 +1,172 @@
|
||||
<div class="avatar-text">
|
||||
<h4 class="strong">
|
||||
<span class="lang-en">Profile picture</span>
|
||||
<span class="lang-de"></span>
|
||||
<span class="lang-es"></span>
|
||||
<span class="lang-fr"></span>
|
||||
<span class="lang-br"></span>
|
||||
</h4>
|
||||
<div>
|
||||
<span class="lang-en">Photo helps personalize your account</span>
|
||||
<span class="lang-de"></span>
|
||||
<span class="lang-es"></span>
|
||||
<span class="lang-fr"></span>
|
||||
<span class="lang-br"></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"></span>
|
||||
<span class="lang-es"></span>
|
||||
<span class="lang-fr"></span>
|
||||
<span class="lang-br"></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"></span>
|
||||
<span class="lang-es"></span>
|
||||
<span class="lang-fr"></span>
|
||||
<span class="lang-br"></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"></span>
|
||||
<span class="lang-es"></span>
|
||||
<span class="lang-fr"></span>
|
||||
<span class="lang-br"></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>
|
||||
@ -0,0 +1,157 @@
|
||||
<div class="account-deletion">
|
||||
<h4 class="strong">
|
||||
<span class="lang-en">Delete your account</span>
|
||||
<span class="lang-de"></span>
|
||||
<span class="lang-es"></span>
|
||||
<span class="lang-fr"></span>
|
||||
<span class="lang-br"></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"></span>
|
||||
<span class="lang-es"></span>
|
||||
<span class="lang-fr"></span>
|
||||
<span class="lang-br"></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"></span>
|
||||
<span class="lang-es"></span>
|
||||
<span class="lang-fr"></span>
|
||||
<span class="lang-br"></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"></span>
|
||||
<span class="lang-es"></span>
|
||||
<span class="lang-fr"></span>
|
||||
<span class="lang-br"></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"></span>
|
||||
<span class="lang-es"></span>
|
||||
<span class="lang-fr"></span>
|
||||
<span class="lang-br"></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"></span>
|
||||
<span class="lang-es"></span>
|
||||
<span class="lang-fr"></span>
|
||||
<span class="lang-br"></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>
|
||||
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);
|
||||
});
|
||||
}
|
||||
</script>
|
||||
@ -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"></span>
|
||||
<span class="lang-es"></span>
|
||||
<span class="lang-fr"></span>
|
||||
<span class="lang-br"></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"></span>
|
||||
<span class="lang-es"></span>
|
||||
<span class="lang-fr"></span>
|
||||
<span class="lang-br"></span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="col-xs-12 col-md-5">
|
||||
{% include "account_avatar", version: "desktop" %}
|
||||
{% include "account_deletion" %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
@ -0,0 +1,168 @@
|
||||
<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"></span>
|
||||
<span class="lang-es"></span>
|
||||
<span class="lang-fr"></span>
|
||||
<span class="lang-br"></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"></span>
|
||||
<span class="lang-es"></span>
|
||||
<span class="lang-fr"></span>
|
||||
<span class="lang-br"></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"></span>
|
||||
<span class="lang-es"></span>
|
||||
<span class="lang-fr"></span>
|
||||
<span class="lang-br"></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 %}">
|
||||
<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"></span>
|
||||
<span class="lang-es"></span>
|
||||
<span class="lang-fr"></span>
|
||||
<span class="lang-br"></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"></span>
|
||||
<span class="lang-es"></span>
|
||||
<span class="lang-fr"></span>
|
||||
<span class="lang-br"></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"></span>
|
||||
<span class="lang-es"></span>
|
||||
<span class="lang-fr"></span>
|
||||
<span class="lang-br"></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"></span>
|
||||
<span class="lang-es"></span>
|
||||
<span class="lang-fr"></span>
|
||||
<span class="lang-br"></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 ">
|
||||
{% t .terms %}
|
||||
<a
|
||||
class="np-form-link np-button-color"
|
||||
target="_blank"
|
||||
href={{ form.terms_of_service_url }}
|
||||
>
|
||||
{% t .terms_link %}
|
||||
</a>
|
||||
</span>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<input
|
||||
id="{{version}}_invite_token"
|
||||
name="learner[token]"
|
||||
value="{{ form.invite_token }}"
|
||||
type="hidden"
|
||||
/>
|
||||
{% endif %}
|
||||
@ -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" 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="Learn Pipedrive - {{ 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"></span>
|
||||
<span class="lang-es"></span>
|
||||
<span class="lang-fr"></span>
|
||||
<span class="lang-br"></span>
|
||||
{% else %}
|
||||
<span class="lang-en">lessons</span>
|
||||
<span class="lang-de"></span>
|
||||
<span class="lang-es"></span>
|
||||
<span class="lang-fr"></span>
|
||||
<span class="lang-br"></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"></span>
|
||||
<span class="lang-es"></span>
|
||||
<span class="lang-fr"></span>
|
||||
<span class="lang-br"></span>
|
||||
{% else %}
|
||||
<span class="lang-en">Take this course</span>
|
||||
<span class="lang-de"></span>
|
||||
<span class="lang-es"></span>
|
||||
<span class="lang-fr"></span>
|
||||
<span class="lang-br"></span>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
@ -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" href="{% route course, id: course.id %}">
|
||||
<div class="homepage-card">
|
||||
<img class="homepage-card-image" src="{{ course.image_url }}" alt="Learn Pipedrive - {{ 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">activity</span>
|
||||
<span class="lang-de"></span>
|
||||
<span class="lang-es"></span>
|
||||
<span class="lang-fr"></span>
|
||||
<span class="lang-br"></span>
|
||||
{% else %}
|
||||
<span class="lang-en">activities</span>
|
||||
<span class="lang-de"></span>
|
||||
<span class="lang-es"></span>
|
||||
<span class="lang-fr"></span>
|
||||
<span class="lang-br"></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"></span>
|
||||
<span class="lang-es"></span>
|
||||
<span class="lang-fr"></span>
|
||||
<span class="lang-br"></span>
|
||||
{% else %}
|
||||
<span class="lang-en">Start</span>
|
||||
<span class="lang-de"></span>
|
||||
<span class="lang-es"></span>
|
||||
<span class="lang-fr"></span>
|
||||
<span class="lang-br"></span>
|
||||
{% endif %}
|
||||
{% else %}
|
||||
<span class="lang-en">Watch</span>
|
||||
<span class="lang-de"></span>
|
||||
<span class="lang-es"></span>
|
||||
<span class="lang-fr"></span>
|
||||
<span class="lang-br"></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"></span>
|
||||
<span class="lang-es"></span>
|
||||
<span class="lang-fr"></span>
|
||||
<span class="lang-br"></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>
|
||||
@ -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" 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>
|
||||
@ -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">
|
||||
<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="Learn Pipedrive - {{ 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"></span>
|
||||
<span class="lang-es"></span>
|
||||
<span class="lang-fr"></span>
|
||||
<span class="lang-br"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
@ -0,0 +1,214 @@
|
||||
{% 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">
|
||||
{{ categories_names | slice: y }}
|
||||
</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"></span>
|
||||
<span class="lang-es"></span>
|
||||
<span class="lang-fr"></span>
|
||||
<span class="lang-br"></span>
|
||||
</span>
|
||||
<span class="courses-section-button-expand">
|
||||
<span class="lang-en">View all</span>
|
||||
<span class="lang-de"></span>
|
||||
<span class="lang-es"></span>
|
||||
<span class="lang-fr"></span>
|
||||
<span class="lang-br"></span> <i class="fas fa-arrow-right"></i>
|
||||
</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"></span>
|
||||
<span class="lang-es"></span>
|
||||
<span class="lang-fr"></span>
|
||||
<span class="lang-br"></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>
|
||||
@ -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"></span>
|
||||
<span class="lang-es"></span>
|
||||
<span class="lang-fr"></span>
|
||||
<span class="lang-br"></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"></span>
|
||||
<span class="lang-es"></span>
|
||||
<span class="lang-fr"></span>
|
||||
<span class="lang-br"></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"></span>
|
||||
<span class="lang-es"></span>
|
||||
<span class="lang-fr"></span>
|
||||
<span class="lang-br"></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"></span>
|
||||
<span class="lang-es"></span>
|
||||
<span class="lang-fr"></span>
|
||||
<span class="lang-br"></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"></span>
|
||||
<span class="lang-es"></span>
|
||||
<span class="lang-fr"></span>
|
||||
<span class="lang-br"></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"></span>
|
||||
<span class="lang-es"></span>
|
||||
<span class="lang-fr"></span>
|
||||
<span class="lang-br"></span>
|
||||
</div>
|
||||
</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"></span>
|
||||
<span class="lang-es"></span>
|
||||
<span class="lang-fr"></span>
|
||||
<span class="lang-br"></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"></span>
|
||||
<span class="lang-es"></span>
|
||||
<span class="lang-fr"></span>
|
||||
<span class="lang-br"></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"></span>
|
||||
<span class="lang-es"></span>
|
||||
<span class="lang-fr"></span>
|
||||
<span class="lang-br"></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"></span>
|
||||
<span class="lang-es"></span>
|
||||
<span class="lang-fr"></span>
|
||||
<span class="lang-br"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -0,0 +1,69 @@
|
||||
{% 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"></span>
|
||||
<span class="lang-es"></span>
|
||||
<span class="lang-fr"></span>
|
||||
<span class="lang-br"></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 }}">
|
||||
{{ names | slice: y }}
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<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>
|
||||
@ -0,0 +1,56 @@
|
||||
<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" alt="Woman researching on the Learn Pipedrive Academy">
|
||||
</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"></span>
|
||||
<span class="lang-es"></span>
|
||||
<span class="lang-fr"></span>
|
||||
<span class="lang-br"></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"></span>
|
||||
<span class="lang-es"></span>
|
||||
<span class="lang-fr"></span>
|
||||
<span class="lang-br"></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" alt="Learn Pipedrive academy sales training benefits ">
|
||||
</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"></span>
|
||||
<span class="lang-es"></span>
|
||||
<span class="lang-fr"></span>
|
||||
<span class="lang-br"></span>
|
||||
</h3>
|
||||
<div class="page-info-section-description">
|
||||
<span class="lang-en">
|
||||
The benefits of sales training programs:<br>
|
||||
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"></span>
|
||||
<span class="lang-es"></span>
|
||||
<span class="lang-fr"></span>
|
||||
<span class="lang-br"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
@ -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.id == '53f0e3ae-cdf4-494e-bf8b-e20534d6d722' %}-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? %}
|
||||
<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 %}
|
||||
@ -0,0 +1,30 @@
|
||||
{% 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 = "How to get most out of Pipedrive?" %}
|
||||
{% assign banner_text = "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." %}
|
||||
{% assign banner_button_text = "Start today" %}
|
||||
{% 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 %}
|
||||
@ -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"></span>
|
||||
<span class="lang-es"></span>
|
||||
<span class="lang-fr"></span>
|
||||
<span class="lang-br"></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"></span>
|
||||
<span class="lang-es"></span>
|
||||
<span class="lang-fr"></span>
|
||||
<span class="lang-br"></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"></span>
|
||||
<span class="lang-es"></span>
|
||||
<span class="lang-fr"></span>
|
||||
<span class="lang-br"></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"></span>
|
||||
<span class="lang-es"></span>
|
||||
<span class="lang-fr"></span>
|
||||
<span class="lang-br"></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"></span>
|
||||
<span class="lang-es"></span>
|
||||
<span class="lang-fr"></span>
|
||||
<span class="lang-br"></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>
|
||||
@ -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"></span>
|
||||
<span class="lang-es"></span>
|
||||
<span class="lang-fr"></span>
|
||||
<span class="lang-br"></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>
|
||||
File diff suppressed because one or more lines are too long
@ -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"></span>
|
||||
<span class="lang-es"></span>
|
||||
<span class="lang-fr"></span>
|
||||
<span class="lang-br"></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>
|
||||
@ -0,0 +1,349 @@
|
||||
<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">
|
||||
Terms of service
|
||||
</a>
|
||||
<p class="footer-button-link-separator">
|
||||
|
|
||||
</p>
|
||||
<a class="footer-bottom-link" href="https://www.pipedrive.com/en/privacy">
|
||||
Privacy Policy
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="footer-bottom-text">
|
||||
Pipedrive is a Web-based Sales CRM.
|
||||
</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: 0 3px 5px rgba(0, 0, 0, .08), 0 0 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>
|
||||
@ -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_alt }}" 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>
|
||||
@ -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_alt }}" 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>
|
||||
@ -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>
|
||||
@ -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" alt="Learn Pipedrive green and white background ">
|
||||
<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>
|
||||
@ -0,0 +1,131 @@
|
||||
{% 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" %}
|
||||
|
||||
{% comment %}
|
||||
Hiding language feature
|
||||
<!-- 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? %}
|
||||
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');
|
||||
{% if current_person.signed_in? and current_person.properties.user_language contains 'missing property' %}
|
||||
{% assign property_missing = true %}
|
||||
{% else %}
|
||||
{% assign property_missing = false %}
|
||||
{% endif %}
|
||||
{% if current_person.signed_in? and current_person.properties.user_language != 'NULL' and property_missing == false %}
|
||||
var selectedLanguage = "{{ current_person.properties.user_language }}";
|
||||
{% else %}
|
||||
var selectedLanguage = userStorageLanguage || "en";
|
||||
{% endif %}
|
||||
if (['en', 'de', 'es', 'fr', 'br'].includes(selectedLanguage)) {
|
||||
changeLanguage(selectedLanguage, false);
|
||||
} else {
|
||||
changeLanguage('en', false);
|
||||
console.log('wrong language initialized', selectedLanguage);
|
||||
window.current_language = 'en';
|
||||
}
|
||||
}
|
||||
|
||||
addEventListener('DOMContentLoaded', () => {
|
||||
setupInitialLanguage();
|
||||
});
|
||||
</script>
|
||||
{% endcomment %}
|
||||
|
||||
<!-- 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 %}
|
||||
@ -0,0 +1,413 @@
|
||||
<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" href="/app/catalog">
|
||||
<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>
|
||||
</a>
|
||||
<a class="header-navigation-item" href="/app/video-tutorials">
|
||||
<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>
|
||||
</a>
|
||||
<a class="header-navigation-item" href="https://www.pipedrive.com/en/webinars" target="_blank">
|
||||
<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>
|
||||
</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"></span>
|
||||
<span class="lang-es"></span>
|
||||
<span class="lang-fr"></span>
|
||||
<span class="lang-br"></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">
|
||||
<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'))">English</li>
|
||||
<li data-lang="de" onclick="changeLanguage(this.getAttribute('data-lang'))">Deutsch</li>
|
||||
<li data-lang="es" onclick="changeLanguage(this.getAttribute('data-lang'))">Español</li>
|
||||
<li data-lang="fr" onclick="changeLanguage(this.getAttribute('data-lang'))">Français</li>
|
||||
<li data-lang="br" onclick="changeLanguage(this.getAttribute('data-lang'))">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"></span>
|
||||
<span class="lang-es"></span>
|
||||
<span class="lang-fr"></span>
|
||||
<span class="lang-br"></span>
|
||||
</a>
|
||||
<a class="profile-dropdown-link body-s" href="/learners/sign_out">
|
||||
<span class="lang-en">Log out</span>
|
||||
<span class="lang-de"></span>
|
||||
<span class="lang-es"></span>
|
||||
<span class="lang-fr"></span>
|
||||
<span class="lang-br"></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"></span>
|
||||
<span class="lang-es"></span>
|
||||
<span class="lang-fr"></span>
|
||||
<span class="lang-br"></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"></span>
|
||||
<span class="lang-es"></span>
|
||||
<span class="lang-fr"></span>
|
||||
<span class="lang-br"></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: 0 3px 5px rgba(0,0,0,.08),0 0 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;
|
||||
}
|
||||
.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');
|
||||
}
|
||||
});
|
||||
|
||||
// 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');
|
||||
})
|
||||
</script>
|
||||
@ -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">Login</span>
|
||||
<span class="lang-de"></span>
|
||||
<span class="lang-es"></span>
|
||||
<span class="lang-fr"></span>
|
||||
<span class="lang-br"></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"></span>
|
||||
<span class="lang-es"></span>
|
||||
<span class="lang-fr"></span>
|
||||
<span class="lang-br"></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"></span>
|
||||
<span class="lang-es"></span>
|
||||
<span class="lang-fr"></span>
|
||||
<span class="lang-br"></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"></span>
|
||||
<span class="lang-es"></span>
|
||||
<span class="lang-fr"></span>
|
||||
<span class="lang-br"></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: 0 3px 5px rgba(0, 0, 0, .08), 0 0 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>
|
||||
@ -0,0 +1,167 @@
|
||||
<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">
|
||||
Hi {{ current_person.first_name }}!
|
||||
</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"></span>
|
||||
<span class="lang-es"></span>
|
||||
<span class="lang-fr"></span>
|
||||
<span class="lang-br"></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"></span>
|
||||
<span class="lang-es"></span>
|
||||
<span class="lang-fr"></span>
|
||||
<span class="lang-br"></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"></span>
|
||||
<span class="lang-es"></span>
|
||||
<span class="lang-fr"></span>
|
||||
<span class="lang-br"></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"></span>
|
||||
<span class="lang-es"></span>
|
||||
<span class="lang-fr"></span>
|
||||
<span class="lang-br"></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>
|
||||
@ -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   after 'Hi' to keep space between words -->
|
||||
<span class="lang-en">Hi </span>
|
||||
<span class="lang-de"></span>
|
||||
<span class="lang-es"></span>
|
||||
<span class="lang-fr"></span>
|
||||
<span class="lang-br"></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"></span>
|
||||
<span class="lang-es"></span>
|
||||
<span class="lang-fr"></span>
|
||||
<span class="lang-br"></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>
|
||||
@ -0,0 +1,76 @@
|
||||
<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"></span>
|
||||
<span class="lang-es"></span>
|
||||
<span class="lang-fr"></span>
|
||||
<span class="lang-br"></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"></span>
|
||||
<span class="lang-es"></span>
|
||||
<span class="lang-fr"></span>
|
||||
<span class="lang-br"></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"></span>
|
||||
<span class="lang-es"></span>
|
||||
<span class="lang-fr"></span>
|
||||
<span class="lang-br"></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"></span>
|
||||
<span class="lang-es"></span>
|
||||
<span class="lang-fr"></span>
|
||||
<span class="lang-br"></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"></span>
|
||||
<span class="lang-es"></span>
|
||||
<span class="lang-fr"></span>
|
||||
<span class="lang-br"></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"></span>
|
||||
<span class="lang-es"></span>
|
||||
<span class="lang-fr"></span>
|
||||
<span class="lang-br"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% include 'seo_faq' %}
|
||||
@ -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-card-academy-courses.webp" %}
|
||||
{% 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-card-video-tutorials.jpg" %}
|
||||
{% 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-card-webinars.webp" %}
|
||||
{% 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>
|
||||
@ -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"></span>
|
||||
<span class="lang-es"></span>
|
||||
<span class="lang-fr"></span>
|
||||
<span class="lang-br"></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"></span>
|
||||
<span class="lang-es"></span>
|
||||
<span class="lang-fr"></span>
|
||||
<span class="lang-br"></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"></span>
|
||||
<span class="lang-es"></span>
|
||||
<span class="lang-fr"></span>
|
||||
<span class="lang-br"></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"></span>
|
||||
<span class="lang-es"></span>
|
||||
<span class="lang-fr"></span>
|
||||
<span class="lang-br"></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"></span>
|
||||
<span class="lang-es"></span>
|
||||
<span class="lang-fr"></span>
|
||||
<span class="lang-br"></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"></span>
|
||||
<span class="lang-es"></span>
|
||||
<span class="lang-fr"></span>
|
||||
<span class="lang-br"></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"></span>
|
||||
<span class="lang-es"></span>
|
||||
<span class="lang-fr"></span>
|
||||
<span class="lang-br"></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"></span>
|
||||
<span class="lang-es"></span>
|
||||
<span class="lang-fr"></span>
|
||||
<span class="lang-br"></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"></span>
|
||||
<span class="lang-es"></span>
|
||||
<span class="lang-fr"></span>
|
||||
<span class="lang-br"></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>
|
||||
@ -0,0 +1,168 @@
|
||||
<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" alt="Man watching at a Pipedrive sales academy course on the laptop">
|
||||
</div>
|
||||
<div class="page-info-section-text">
|
||||
<h3 class="page-info-section-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>
|
||||
</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"></span>
|
||||
<span class="lang-es"></span>
|
||||
<span class="lang-fr"></span>
|
||||
<span class="lang-br"></span>
|
||||
</div>
|
||||
<a class="button-large button-2" href="/app/catalog">
|
||||
<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>
|
||||
</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" alt="Woman watching a Pipedrive crm video tutorial on the laptop">
|
||||
</div>
|
||||
<div class="page-info-section-text">
|
||||
<h3 class="page-info-section-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>
|
||||
</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"></span>
|
||||
<span class="lang-es"></span>
|
||||
<span class="lang-fr"></span>
|
||||
<span class="lang-br"></span>
|
||||
</div>
|
||||
<a class="button-large button-2" href="/app/video-tutorials">
|
||||
<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>
|
||||
</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" alt="Group of people sitting at a Pipedrive sales seminar">
|
||||
</div>
|
||||
<div class="page-info-section-text">
|
||||
<h3 class="page-info-section-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>
|
||||
</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"></span>
|
||||
<span class="lang-es"></span>
|
||||
<span class="lang-fr"></span>
|
||||
<span class="lang-br"></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"></span>
|
||||
<span class="lang-es"></span>
|
||||
<span class="lang-fr"></span>
|
||||
<span class="lang-br"></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" alt="Woman learning CRM tips with Pipedrive online courses ">
|
||||
</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"></span>
|
||||
<span class="lang-es"></span>
|
||||
<span class="lang-fr"></span>
|
||||
<span class="lang-br"></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.<br></span>
|
||||
<span class="lang-de"></span>
|
||||
<span class="lang-es"></span>
|
||||
<span class="lang-fr"></span>
|
||||
<span class="lang-br"></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" alt="Man and a woman looking at Learn Pipedrive on the tablet.">
|
||||
</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"></span>
|
||||
<span class="lang-es"></span>
|
||||
<span class="lang-fr"></span>
|
||||
<span class="lang-br"></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"></span>
|
||||
<span class="lang-es"></span>
|
||||
<span class="lang-fr"></span>
|
||||
<span class="lang-br"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
@ -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"></span>
|
||||
<span class="lang-es"></span>
|
||||
<span class="lang-fr"></span>
|
||||
<span class="lang-br"></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>
|
||||
@ -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>
|
||||
@ -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>
|
||||
@ -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"></span>
|
||||
<span class="lang-es"></span>
|
||||
<span class="lang-fr"></span>
|
||||
<span class="lang-br"></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"></span>
|
||||
<span class="lang-es"></span>
|
||||
<span class="lang-fr"></span>
|
||||
<span class="lang-br"></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" alt="Ana Rinck, Operations Manager, BAKERpedia">
|
||||
</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"></span>
|
||||
<span class="lang-es"></span>
|
||||
<span class="lang-fr"></span>
|
||||
<span class="lang-br"></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"></span>
|
||||
<span class="lang-es"></span>
|
||||
<span class="lang-fr"></span>
|
||||
<span class="lang-br"></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" alt="Christine Luken, Author and Speaker, Financial Lifeguard">
|
||||
</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"></span>
|
||||
<span class="lang-es"></span>
|
||||
<span class="lang-fr"></span>
|
||||
<span class="lang-br"></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"></span>
|
||||
<span class="lang-es"></span>
|
||||
<span class="lang-fr"></span>
|
||||
<span class="lang-br"></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" alt="Nirmal Gyanwali, Managing Director, Nirmal Web Studio">
|
||||
</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"></span>
|
||||
<span class="lang-es"></span>
|
||||
<span class="lang-fr"></span>
|
||||
<span class="lang-br"></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>
|
||||
@ -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"></span>
|
||||
<span class="lang-es"></span>
|
||||
<span class="lang-fr"></span>
|
||||
<span class="lang-br"></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"></span>
|
||||
<span class="lang-es"></span>
|
||||
<span class="lang-fr"></span>
|
||||
<span class="lang-br"></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"></span>
|
||||
<span class="lang-es"></span>
|
||||
<span class="lang-fr"></span>
|
||||
<span class="lang-br"></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"></span>
|
||||
<span class="lang-es"></span>
|
||||
<span class="lang-fr"></span>
|
||||
<span class="lang-br"></span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</main>
|
||||
@ -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"></span>
|
||||
<span class="lang-es"></span>
|
||||
<span class="lang-fr"></span>
|
||||
<span class="lang-br"></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"></span>
|
||||
<span class="lang-es"></span>
|
||||
<span class="lang-fr"></span>
|
||||
<span class="lang-br"></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"></span>
|
||||
<span class="lang-es"></span>
|
||||
<span class="lang-fr"></span>
|
||||
<span class="lang-br"></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"></span>
|
||||
<span class="lang-es"></span>
|
||||
<span class="lang-fr"></span>
|
||||
<span class="lang-br"></span>
|
||||
</button>
|
||||
{% include "account_deletion" %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</main>
|
||||
@ -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>
|
||||
@ -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>
|
||||
@ -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>
|
||||
|
||||
@ -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,0 +1,185 @@
|
||||
<main class="video-tutorial-wrapper">
|
||||
<div class="video-tutorial container width-limit">
|
||||
<div class="video-return">
|
||||
<a href="/app/video-tutorials">
|
||||
« <span class="lang-en">Back to all videos</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="row video-tutorial-body">
|
||||
<div class="video-content col-12 col-md-8">
|
||||
<div class="video-player">
|
||||
{{ course.promo_video_embed_url }}
|
||||
</div>
|
||||
<h1 class="video-title">
|
||||
{{ course.name }}
|
||||
</h1>
|
||||
<div class="video-description">
|
||||
{{ course.full_description | strip_html }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="video-suggested col-12 col-md-4">
|
||||
<div class="video-suggested-title strong">
|
||||
<span class="lang-en">Suggested</span>
|
||||
<span class="lang-de"></span>
|
||||
<span class="lang-es"></span>
|
||||
<span class="lang-fr"></span>
|
||||
<span class="lang-br"></span>
|
||||
</div>
|
||||
<div class="video-suggested-list-hidden np-hidden">
|
||||
{% assign course_cateogries = course.categories | map: 'id' | join: '|' %}
|
||||
{% for suggested_course in courses.in_catalog %}
|
||||
{% if suggested_course.ribbon == "VIDEO" and suggested_course.id != course.id %}
|
||||
{% for suggested_course_category in suggested_course.categories %}
|
||||
{% if course_cateogries contains suggested_course_category.id %}
|
||||
<a class="video-suggested-course" href="{% route course, id: suggested_course.id %}">
|
||||
<div class="video-suggested-course-image-wrapper">
|
||||
<img class="video-suggested-course-image" img-src="{{ suggested_course.image_url }}" alt="Learn Pipedrive - {{ suggested_course.name }}">
|
||||
</div>
|
||||
<div class="video-suggested-course-info">
|
||||
<div class="video-suggested-course-name strong">
|
||||
{{ suggested_course.name }}
|
||||
</div>
|
||||
<div class="video-suggested-course-time">
|
||||
{{ suggested_course.properties.course_time }}
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
{% break %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
<div class="video-suggested-list">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<style>
|
||||
.video-tutorial-wrapper {
|
||||
background: var(--green-light);
|
||||
}
|
||||
.video-tutorial {
|
||||
padding-top: 40px;
|
||||
padding-bottom: 40px;
|
||||
}
|
||||
.video-return {
|
||||
color: #005AB0;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.video-return:hover {
|
||||
color: #0070D6;
|
||||
}
|
||||
.video-tutorial-body {
|
||||
justify-content: space-between;
|
||||
}
|
||||
.video-player {
|
||||
padding-top: 56.25%; {% comment %} for 16:9 aspect ratio {% endcomment %}
|
||||
position: relative;
|
||||
}
|
||||
.video-player > * {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
.video-title {
|
||||
margin-top: 20px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.video-suggested {
|
||||
margin-top: 30px;
|
||||
}
|
||||
.video-suggested-title {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.video-suggested-course {
|
||||
display: flex;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.video-suggested-course-image-wrapper {
|
||||
width: 44%;
|
||||
align-self: center;
|
||||
min-width: 44%;
|
||||
}
|
||||
.video-suggested-course-image {
|
||||
width: 100%;
|
||||
}
|
||||
.video-suggested-course-info {
|
||||
justify-content: space-evenly;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-left: 20px;
|
||||
}
|
||||
.video-suggested-course:hover .video-suggested-course-name {
|
||||
text-decoration: underline;
|
||||
}
|
||||
.video-suggested-course-time {
|
||||
color: #656E7A;
|
||||
}
|
||||
@media only screen and (min-width: 1024px) {
|
||||
.video-content {
|
||||
padding-right: 27px;
|
||||
}
|
||||
.video-suggested {
|
||||
padding-left: 27px;
|
||||
}
|
||||
.video-suggested {
|
||||
margin-top: 0;
|
||||
}
|
||||
.video-title {
|
||||
margin-top: 40px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.video-return {
|
||||
margin-left: 15px;
|
||||
}
|
||||
}
|
||||
@media only screen and (min-width: 1024px) and (max-width: 1400px) {
|
||||
.video-suggested-course-image-wrapper {
|
||||
width: auto;
|
||||
}
|
||||
.video-suggested-course-info {
|
||||
margin-left: 0;
|
||||
}
|
||||
.video-suggested-course {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<script>
|
||||
function createSuggestedTutorials() {
|
||||
const suggestedWrapper = document.querySelector('.video-suggested-list-hidden');
|
||||
if (suggestedWrapper.childElementCount > 0) {
|
||||
const newSuggestedWrapper = document.querySelector('.video-suggested-list');
|
||||
for (let i = suggestedWrapper.children.length; i >= 0; i--) {
|
||||
suggestedWrapper.appendChild(suggestedWrapper.children[Math.random() * i | 0]);
|
||||
}
|
||||
Array.from(suggestedWrapper.children).forEach((course, index) => {
|
||||
if (index < 5) {
|
||||
course.querySelector('img').setAttribute('src', course.querySelector('img').getAttribute('img-src'));
|
||||
newSuggestedWrapper.appendChild(course);
|
||||
} else {
|
||||
course.remove();
|
||||
}
|
||||
});
|
||||
} else {
|
||||
suggestedWrapper.parentElement.remove();
|
||||
}
|
||||
}
|
||||
|
||||
addEventListener("DOMContentLoaded", () => {
|
||||
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');
|
||||
createSuggestedTutorials();
|
||||
});
|
||||
</script>
|
||||
@ -0,0 +1,209 @@
|
||||
{% assign categories_uuids = "" %}
|
||||
{% assign categories_names = "" %}
|
||||
{% for course in courses.in_catalog %}
|
||||
{% if course.categories.size > 0 and course.ribbon == "VIDEO" %}
|
||||
{% 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">
|
||||
{{ categories_names | slice: y }}
|
||||
</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"></span>
|
||||
<span class="lang-es"></span>
|
||||
<span class="lang-fr"></span>
|
||||
<span class="lang-br"></span>
|
||||
</span>
|
||||
<span class="courses-section-button-expand">
|
||||
<span class="lang-en">View all</span>
|
||||
<span class="lang-de"></span>
|
||||
<span class="lang-es"></span>
|
||||
<span class="lang-fr"></span>
|
||||
<span class="lang-br"></span> <i class="fas fa-arrow-right"></i>
|
||||
</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" %}
|
||||
{% for cat in course_categories %}
|
||||
{% if category_uuid contains cat %}
|
||||
{% assign number_of_videos = number_of_videos | plus: 1 %}
|
||||
{% include "cards_video" %}
|
||||
{% 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 "video_tutorials_filter", uuids: categories_uuids, names: categories_names %}
|
||||
</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>
|
||||
addEventListener('DOMContentLoaded', () => {
|
||||
{% if current_school.sso_active? %}
|
||||
var categoriesOrder = ['ALL',
|
||||
'251e90cf-758d-4f98-9256-9d1d40e24872',
|
||||
'b3c41203-7160-4d6f-bd77-5861bdddcfcd',
|
||||
'ca378022-dcac-444b-af34-64fdd6527faa',
|
||||
'0c4cda69-4ea9-4ad9-b279-19233daf043b',
|
||||
'389df920-414a-4657-9aa7-f6521f26bf3c',
|
||||
'c0cac114-466c-4952-85e9-aa19023999fa',
|
||||
'46f1a20a-6948-44eb-9b4a-1f924bbe46c4',
|
||||
'c082a8e4-00d3-4687-8b84-3dd1bb6c0c9e',
|
||||
'8604578e-22c9-4886-9943-43b1e2957615',
|
||||
'c53e5d73-dbd7-479b-ad7a-4e77a41cf62f',
|
||||
'49a29fce-cdd6-4af4-903a-0d1b58e1194a',
|
||||
'59e5408f-6538-4581-ac4f-5cfbcfa1c29a'
|
||||
]
|
||||
{% else %}
|
||||
var categoriesOrder = ['ALL',
|
||||
'285dcc20-d69f-4065-990f-208d12c8a430',
|
||||
'61ccb3a1-f997-4c35-80cd-731cd69b791e',
|
||||
'1cf1ed5f-add8-4313-9e84-e58c5c47477c',
|
||||
'ea26bd88-006e-4f80-9968-f795d4db885e',
|
||||
'e01b8a16-dec1-4e10-b537-f912ab17fe41',
|
||||
'9b01c3c9-f581-4c73-9983-310b5789bcf8',
|
||||
'94e8ce42-7741-457c-8bbf-8ab26c0afa0b',
|
||||
'16a99525-5fa6-4d26-a80b-ed5797c3ee6c',
|
||||
'c1d45da3-69cc-498c-b7dd-9e7ed29407c1',
|
||||
'8f6a0adb-284f-482f-ad2e-4bada7211500',
|
||||
'63cc5043-4a2a-4603-8b74-39efd9cbb8e8',
|
||||
'4035b5ad-f376-4299-bcbc-b5d89bfbfc16'
|
||||
]
|
||||
{% 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);
|
||||
});
|
||||
});
|
||||
|
||||
window.addEventListener('DOMContentLoaded', () => {
|
||||
document.querySelectorAll('.course-card-description').forEach((x) => {
|
||||
$clamp(x, {clamp: 5});
|
||||
})
|
||||
});
|
||||
</script>
|
||||
@ -0,0 +1,130 @@
|
||||
<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 CRM training?</span>
|
||||
<span class="lang-de"></span>
|
||||
<span class="lang-es"></span>
|
||||
<span class="lang-fr"></span>
|
||||
<span class="lang-br"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="faq-answer body-s">
|
||||
<span class="lang-en">CRM training is any training course or tutorial – these days, typically an online course – that helps your sales force or customer support staff get the most out of your chosen CRM. These courses help you better understand a CRM’s features to develop more efficient, effective workflows, business processes and digital marketing. The idea is to equip your sales force with the skills they need to maximize revenue.</span>
|
||||
<span class="lang-de"></span>
|
||||
<span class="lang-es"></span>
|
||||
<span class="lang-fr"></span>
|
||||
<span class="lang-br"></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 train people to use CRM?</span>
|
||||
<span class="lang-de"></span>
|
||||
<span class="lang-es"></span>
|
||||
<span class="lang-fr"></span>
|
||||
<span class="lang-br"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="faq-answer body-s">
|
||||
<span class="lang-en">The best way to train your staff to use a <a href="https://www.pipedrive.com/en/features/crm-system">CRM system</a> is by providing online courses or tutorials specifically for that CRM. Training resources have come a long way – nowadays, your staff can complete interactive, self-paced courses explaining everything from the basics to a CRM’s more complex features. Many courses even include quizzes to test participants’ knowledge or offer different tutorials for different employees (e.g., salespeople vs. non-salespeople).</span>
|
||||
<span class="lang-de"></span>
|
||||
<span class="lang-es"></span>
|
||||
<span class="lang-fr"></span>
|
||||
<span class="lang-br"></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 concepts are in CRM training?</span>
|
||||
<span class="lang-de"></span>
|
||||
<span class="lang-es"></span>
|
||||
<span class="lang-fr"></span>
|
||||
<span class="lang-br"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="faq-answer body-s">
|
||||
<span class="lang-en">
|
||||
CRM training typically covers concepts associated with the overall sales process. These can include:
|
||||
<ul>
|
||||
<li>Instructing team members on building and maintaining good customer relationships</li>
|
||||
<li>Maximizing efficiency with automation tools</li>
|
||||
<li>Organizing customer data</li>
|
||||
<li>Creating engaging email marketing</li>
|
||||
<li>Keeping deals moving through the pipeline for maximum revenue</li>
|
||||
</ul>
|
||||
</span>
|
||||
<span class="lang-de"></span>
|
||||
<span class="lang-es"></span>
|
||||
<span class="lang-fr"></span>
|
||||
<span class="lang-br"></span>
|
||||
</div>
|
||||
</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 CRM course?</span>
|
||||
<span class="lang-de"></span>
|
||||
<span class="lang-es"></span>
|
||||
<span class="lang-fr"></span>
|
||||
<span class="lang-br"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="faq-answer body-s">
|
||||
<span class="lang-en">A CRM course is a training course designed to show people how to use and get the most out of <a href="https://www.pipedrive.com/en/features/customer-relationship-management-software">customer relationship management software</a>. Typically, a course begins by introducing the fundamentals of the software before looking in more detail at particular features. CRM courses also usually offer tutorials on optimizing different parts of your company’s sales process and maximizing revenue.</span>
|
||||
<span class="lang-de"></span>
|
||||
<span class="lang-es"></span>
|
||||
<span class="lang-fr"></span>
|
||||
<span class="lang-br"></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 are the best CRM 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 class="faq-answer body-s">
|
||||
<span class="lang-en">The best CRM courses are those that best suit your company. A training course should show your staff how to master the basic features of the CRM before looking at add-ons and other tools. Therefore, the course should offer a range of lessons to suit each role – it’s no good making your customer support staff watch in-depth videos on optimizing the <a href="https://www.pipedrive.com/en/blog/sales-process">sales process</a> if they won’t ever do these tasks.</span>
|
||||
<span class="lang-de"></span>
|
||||
<span class="lang-es"></span>
|
||||
<span class="lang-fr"></span>
|
||||
<span class="lang-br"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -0,0 +1,77 @@
|
||||
{% if uuids.size > 0 %}
|
||||
<div class="courses-filter-hidden np-hidden">
|
||||
<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"></span>
|
||||
<span class="lang-es"></span>
|
||||
<span class="lang-fr"></span>
|
||||
<span class="lang-br"></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 }}">
|
||||
{{ names | slice: y }}
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
<div class="courses-filter"></div>
|
||||
{% endif %}
|
||||
|
||||
<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>
|
||||
let previousFilter = window.sessionStorage.getItem('last-selected-video-filter');
|
||||
if (previousFilter) {
|
||||
addEventListener('DOMContentLoaded', () => {
|
||||
document.querySelector(`.courses-filter-item[category-uuid="${previousFilter}"]`)?.click();
|
||||
});
|
||||
}
|
||||
|
||||
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>
|
||||
@ -0,0 +1,88 @@
|
||||
<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_video_tutorial_1.png" alt="Watch Pipedrive crm courses and sales training comfortably">
|
||||
</div>
|
||||
<div class="page-info-section-text">
|
||||
<h3 class="page-info-section-title">
|
||||
<span class="lang-en">Watch CRM courses and sales training videos</span>
|
||||
<span class="lang-de"></span>
|
||||
<span class="lang-es"></span>
|
||||
<span class="lang-fr"></span>
|
||||
<span class="lang-br"></span>
|
||||
</h3>
|
||||
<div class="page-info-section-description">
|
||||
<span class="lang-en">
|
||||
In this section, we’ve gathered insightful, in-depth video tutorials and detailed multi-part training programs for different types of learners and sales teams.<br>
|
||||
Learn the fundamentals of our CRM software, get handy tips on how to keep your sales force winning leads and closing deals and find out how to maximize revenue along the sales process.<br>
|
||||
We’ll help bring your team members up to speed with detailed product demos of our CRM platform and talk you through various software features, empowering you to improve all stages of your sales process.
|
||||
</span>
|
||||
<span class="lang-de"></span>
|
||||
<span class="lang-es"></span>
|
||||
<span class="lang-fr"></span>
|
||||
<span class="lang-br"></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_video_tutorial_2.webp" alt="Sales professionals watching a Pipedrive CRM tutorial video">
|
||||
</div>
|
||||
<div class="page-info-section-text">
|
||||
<h3 class="page-info-section-title">
|
||||
<span class="lang-en">How our CRM tutorial videos can help you with Pipedrive</span>
|
||||
<span class="lang-de"></span>
|
||||
<span class="lang-es"></span>
|
||||
<span class="lang-fr"></span>
|
||||
<span class="lang-br"></span>
|
||||
</h3>
|
||||
<div class="page-info-section-description">
|
||||
<span class="lang-en">
|
||||
Watching online training or video tutorials over other kinds of material has several advantages. Video tutorials offer flexibility – your staff can watch them anywhere – they’re more cost-effective than organizing repeated in-person training and more engaging than other types of material.<br>
|
||||
Additionally, our interactive videos break down complex information into smaller chunks, which is especially useful when showing new team members how you do things.<br>
|
||||
Video tutorials and courses are particularly helpful for users of CRM software. CRMs can be complex, with multiple tools to help sales teams increase revenue. Tutorial videos will help you explain the features of the software your sales team is using. This will in turn give them different ways to increase their productivity and efficiency.<br>
|
||||
Video tutorials will also help you onboard new team members and can save you time when introducing new staff members to a CRM. Additionally, you can make the videos interactive by watching them while going through the tool.<br>
|
||||
The overall purpose of a customer relationship management tool is to maximize revenue. A good online course should offer videos demonstrating how the CRM’s features can increase your sales team’s selling power.<br>
|
||||
Pipedrive offers users videos on many of its features. These features range from reporting tools that make sales results easier to predict – helping your sales team make educated decisions regarding your company’s revenue – to CRM integrations with third-party tools that can facilitate digital marketing or customer support.
|
||||
</span>
|
||||
<span class="lang-de"></span>
|
||||
<span class="lang-es"></span>
|
||||
<span class="lang-fr"></span>
|
||||
<span class="lang-br"></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_video_tutorial_3.png" alt="Learn Pipedrive recommended training courses ">
|
||||
</div>
|
||||
<div class="page-info-section-text">
|
||||
<h3 class="page-info-section-title">
|
||||
<span class="lang-en">Recommended Pipedrive training courses</span>
|
||||
<span class="lang-de"></span>
|
||||
<span class="lang-es"></span>
|
||||
<span class="lang-fr"></span>
|
||||
<span class="lang-br"></span>
|
||||
</h3>
|
||||
<div class="page-info-section-description">
|
||||
<span class="lang-en">
|
||||
Although Pipedrive is an easy-to-use, intuitive CRM tool, video tutorials can speed up your sales teams’ learning processes.<br>
|
||||
In-depth video tutorials help your sales force use Pipedrive’s CRM software to its fullest potential, empowering them to maximize revenue and efficiency throughout the sales process. Among other things, our video training resources will:<br>
|
||||
<ul>
|
||||
<li>Demonstrate how to use Pipedrive’s basic features and workflows. Understanding Pipedrive’s fundamentals will give your sales staff the basis to optimize their sales management skills.</li>
|
||||
<li>Walk your team through more complex software features and tools via in-depth, self-paced online video tutorials.</li>
|
||||
<li>Provide tips to help you get the most out of our CRM system, helping your sales team with data management, business processes and improving the overall customer experience.</li>
|
||||
</ul>
|
||||
</span>
|
||||
<span class="lang-de"></span>
|
||||
<span class="lang-es"></span>
|
||||
<span class="lang-fr"></span>
|
||||
<span class="lang-br"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
@ -0,0 +1,53 @@
|
||||
{% include "header" %}
|
||||
|
||||
<main class="np-main np-account">
|
||||
<div class="np-flex np-flex-center width-limit">
|
||||
{% include "account_desktop_view", form: form %}
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<style>
|
||||
.np-account {
|
||||
background: #F7F7FE;
|
||||
padding-top: 40px;
|
||||
padding-bottom: 40px;
|
||||
min-height: calc(100vh - 84px);
|
||||
}
|
||||
.np-account .np-card {
|
||||
max-width: unset;
|
||||
width: 100%;
|
||||
}
|
||||
.np-account-form {
|
||||
margin-bottom: 80px !important;
|
||||
}
|
||||
.account-form-title {
|
||||
color: var(--green);
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
.np-account .np-card-container {
|
||||
box-shadow: none;
|
||||
background: none;
|
||||
}
|
||||
.np-input {
|
||||
background: #FFF;
|
||||
border-radius: 0;
|
||||
border: 1px solid #E1E1FF;
|
||||
margin-top: 5px;
|
||||
}
|
||||
.np-form-field {
|
||||
margin-bottom: 20px !important;
|
||||
}
|
||||
.np-account .np-form-action {
|
||||
margin: 20px 0 0;
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 1024px) {
|
||||
.np-account {
|
||||
padding-top: 80px;
|
||||
padding-bottom: 80px;
|
||||
}
|
||||
.np-account-form {
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,60 @@
|
||||
{% if current_person.signed_in? == false and current_school.sso_active? == false %}
|
||||
<script> window.location.replace('/learners/sign_in')</script>
|
||||
{% else %}
|
||||
{% include "header" %}
|
||||
|
||||
<main class="catalog">
|
||||
{% assign banner_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 banner_text = '<span class="lang-en">Welcome to Pipedrive’s Academy courses! Here, you’ll find virtual training programs and online video courses, to help you and your sales team develop your CRM and sales skills. These courses include in-depth video lessons that will empower you to improve each and every stage of your sales process.</span>
|
||||
<span class="lang-de"></span>
|
||||
<span class="lang-es"></span>
|
||||
<span class="lang-fr"></span>
|
||||
<span class="lang-br"></span>' %}
|
||||
{% assign banner_button_text = '<span class="lang-en">Unlock courses</span>
|
||||
<span class="lang-de"></span>
|
||||
<span class="lang-es"></span>
|
||||
<span class="lang-fr"></span>
|
||||
<span class="lang-br"></span>' %}
|
||||
{% assign banner_button_link = "#sso-widget" %}
|
||||
{% assign banner_image_url = "https://s3.amazonaws.com/static.northpass.com/pipedrive/homepage-card-academy-courses.webp" %}
|
||||
{% assign banner_image_alt = "Man watching at a Pipedrive sales academy course on the laptop" %}
|
||||
{% include "green_banner_image" %}
|
||||
|
||||
{% include "catalog_courses" %}
|
||||
{% include "catalog_page_info" %}
|
||||
{% include "opinions" %}
|
||||
{% include 'catalog_faq' %}
|
||||
|
||||
{% assign banner_title = '<span class="lang-en">How to get most out of Pipedrive?</span>
|
||||
<span class="lang-de"></span>
|
||||
<span class="lang-es"></span>
|
||||
<span class="lang-fr"></span>
|
||||
<span class="lang-br"></span>' %}
|
||||
{% assign banner_text = '<span class="lang-en">Pipedrive CRM is overflowing with intelligent tools to improve your sales and marketing processes. Our CRM platform offers everything from <a href="https://www.pipedrive.com/en/products/email-marketing-software/marketing-automation-tool">marketing automation</a> features to in-depth sales reports.<br>Seamlessly keep track of leads and potential customers with Pipedrive’s intuitive pipeline view. Get notified when your prospects are ready to close a deal so you can follow up at precisely the right time.<br><br>Centralize all your customer information under one roof and integrate it with your digital marketing tools. Add custom fields for contacts and separate them by industries to ensure you target the hottest leads.<br>Start using Pipedrive Learn today to make the most of your powerful CRM tool and keep the deals rolling in.</span>
|
||||
<span class="lang-de"></span>
|
||||
<span class="lang-es"></span>
|
||||
<span class="lang-fr"></span>
|
||||
<span class="lang-br"></span>' %}
|
||||
{% assign banner_button_text = '<span class="lang-en">Start today</span>
|
||||
<span class="lang-de"></span>
|
||||
<span class="lang-es"></span>
|
||||
<span class="lang-fr"></span>
|
||||
<span class="lang-br"></span>' %}
|
||||
{% assign banner_button_link = "#sso-widget" %}
|
||||
{% assign banner_image_url = "https://s3.amazonaws.com/static.northpass.com/pipedrive/example_alt_banner.png" %}
|
||||
{% assign banner_image_alt = "Learn Pipedrive - CRM pipeline on the laptop" %}
|
||||
{% include "green_banner_image_alt" %}
|
||||
</main>
|
||||
|
||||
{% include "footer" %}
|
||||
{% endif %}
|
||||
{% if current_person.signed_in? == false and current_school.sso_active? %}
|
||||
<script>
|
||||
const redirectionLink = 'https://user-learn.pipedrive.com/app/catalog'
|
||||
document.querySelector('#redirect-between-academies').setAttribute('href', redirectionLink)
|
||||
</script>
|
||||
{% endif %}
|
||||
@ -0,0 +1,69 @@
|
||||
{% if current_person.signed_in? == false and current_school.sso_active? == false %}
|
||||
<script> window.location.replace('/learners/sign_in')</script>
|
||||
{% else %}
|
||||
{% include "header" %}
|
||||
|
||||
{% if course.ribbon == "VIDEO" %}
|
||||
{% include "video_tutorial_cover" %}
|
||||
{% else %}
|
||||
{% include "course_cover" %}
|
||||
{% endif %}
|
||||
|
||||
{% include "footer" %}
|
||||
|
||||
{% if current_person.signed_in? == false and current_school.sso_active? %}
|
||||
<script>
|
||||
const redirectionLink = 'https://user-learn.pipedrive.com/app/courses/{{ course.properties.second_school_course_uuid }}'
|
||||
document.querySelector('#redirect-between-academies').setAttribute('href', redirectionLink)
|
||||
</script>
|
||||
{% endif %}
|
||||
|
||||
{% if current_person.signed_in? %}
|
||||
<script>
|
||||
function setupLatestCourses() {
|
||||
let newCourse = '{{ course.id }}';
|
||||
{% if course.ribbon == "VIDEO" %}
|
||||
var latestCourses = '{{ current_person.properties.latest_tutorials }}';
|
||||
var courseType = 'latest_tutorials'
|
||||
{% else %}
|
||||
var latestCourses = '{{ current_person.properties.latest_courses }}';
|
||||
var courseType = 'latest_courses'
|
||||
{% endif %}
|
||||
let newLatest = []
|
||||
if (latestCourses === 'NULL') {
|
||||
newLatest = [newCourse]
|
||||
} else {
|
||||
let latestCoursesArray = latestCourses.split(',');
|
||||
if (latestCoursesArray.includes(newCourse)) {
|
||||
if (latestCoursesArray[0] === newCourse) {
|
||||
return 0
|
||||
} else {
|
||||
newLatest = latestCoursesArray.filter(item => item !== newCourse)
|
||||
newCourse.unshift(newCourse)
|
||||
}
|
||||
} else {
|
||||
newLatest = latestCoursesArray
|
||||
if (latestCoursesArray.length === 3) {
|
||||
newLatest.pop()
|
||||
}
|
||||
newLatest.unshift(newCourse)
|
||||
}
|
||||
}
|
||||
let xhr = new XMLHttpRequest();
|
||||
{% if current_school.sso_active? %}
|
||||
var url = "https://www.workato.com/webhooks/rest/bd1a1eb7-7e79-4208-a1db-8e9c7440bcc9/pipedrive-sso-last-courses";
|
||||
{% else %}
|
||||
var url = "https://www.workato.com/webhooks/rest/bd1a1eb7-7e79-4208-a1db-8e9c7440bcc9/pipedrive-open-last-courses";
|
||||
{% endif %}
|
||||
xhr.open("POST", url, true);
|
||||
xhr.send(JSON.stringify({
|
||||
user_id: '{{ current_person.id }}',
|
||||
school_id: '{{ current_school.id }}',
|
||||
latest_courses: newLatest.toString(),
|
||||
course_type: courseType
|
||||
}));
|
||||
}
|
||||
setupLatestCourses()
|
||||
</script>
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
@ -0,0 +1,3 @@
|
||||
<script>
|
||||
window.location.replace('/app/catalog');
|
||||
</script>
|
||||
@ -0,0 +1,3 @@
|
||||
<script>
|
||||
window.location.replace('/app');
|
||||
</script>
|
||||
@ -0,0 +1,32 @@
|
||||
{% include "header" %}
|
||||
{% include 'sso_login_widget' %}
|
||||
<main class="homepage">
|
||||
{% include 'homepage_banner_new_person' %}
|
||||
{% include 'homepage_recommended' %}
|
||||
{% include "homepage_generic_cards" %}
|
||||
{% include "homepage_page_info" %}
|
||||
{% include "opinions" %}
|
||||
{% include 'homepage_faq' %}
|
||||
|
||||
{% assign banner_title = '<span class="lang-en">How to get most out of Pipedrive?</span>
|
||||
<span class="lang-de"></span>
|
||||
<span class="lang-es"></span>
|
||||
<span class="lang-fr"></span>
|
||||
<span class="lang-br"></span>' %}
|
||||
{% assign banner_text = '<span class="lang-en">Pipedrive CRM is overflowing with intelligent tools to improve your sales and marketing processes. Our CRM platform offers everything from <a href="https://www.pipedrive.com/en/products/email-marketing-software/marketing-automation-tool">marketing automation</a> features to in-depth sales reports.<br>Seamlessly keep track of leads and potential customers with Pipedrive’s intuitive pipeline view. Get notified when your prospects are ready to close a deal so you can follow up at precisely the right time.<br><br>Centralize all your customer information under one roof and integrate it with your digital marketing tools. Add custom fields for contacts and separate them by industries to ensure you target the hottest leads.<br>Start using Pipedrive Learn today to make the most of your powerful CRM tool and keep the deals rolling in.</span>
|
||||
<span class="lang-de"></span>
|
||||
<span class="lang-es"></span>
|
||||
<span class="lang-fr"></span>
|
||||
<span class="lang-br"></span>' %}
|
||||
{% assign banner_button_text = '<span class="lang-en">Start today</span>
|
||||
<span class="lang-de"></span>
|
||||
<span class="lang-es"></span>
|
||||
<span class="lang-fr"></span>
|
||||
<span class="lang-br"></span>' %}
|
||||
{% assign banner_button_link = "#sso-widget" %}
|
||||
{% assign banner_image_url = "https://s3.amazonaws.com/static.northpass.com/pipedrive/example_alt_banner.png" %}
|
||||
{% assign banner_image_alt = "Learn Pipedrive - CRM pipeline on the laptop" %}
|
||||
{% include "green_banner_image_alt" %}
|
||||
</main>
|
||||
|
||||
{% include "footer" %}
|
||||
@ -0,0 +1,48 @@
|
||||
{% include "header" %}
|
||||
|
||||
<main class="homepage">
|
||||
{% assign banner_title = '<span class="lang-en">Pipedrive Learn</span>
|
||||
<span class="lang-de"></span>
|
||||
<span class="lang-es"></span>
|
||||
<span class="lang-fr"></span>
|
||||
<span class="lang-br"></span>' %}
|
||||
{% assign banner_text = '<span class="lang-en">Welcome to Pipedrive Learn! Here, you’ll find CRM training videos to help you learn CRM management and sales skills. Explore everything from in-depth sales, marketing and CRM courses to quick tutorials on specific CRM tools.</span>
|
||||
<span class="lang-de"></span>
|
||||
<span class="lang-es"></span>
|
||||
<span class="lang-fr"></span>
|
||||
<span class="lang-br"></span>' %}
|
||||
{% assign banner_button_text = '<span class="lang-en">Register now</span>
|
||||
<span class="lang-de"></span>
|
||||
<span class="lang-es"></span>
|
||||
<span class="lang-fr"></span>
|
||||
<span class="lang-br"></span>' %}
|
||||
{% assign banner_button_link = "#sso-widget" %}
|
||||
{% include "green_banner_text" %}
|
||||
|
||||
{% include "homepage_generic_cards" %}
|
||||
{% include "homepage_page_info" %}
|
||||
{% include "opinions" %}
|
||||
{% include 'homepage_faq' %}
|
||||
|
||||
{% assign banner_title = '<span class="lang-en">How to get most out of Pipedrive?</span>
|
||||
<span class="lang-de"></span>
|
||||
<span class="lang-es"></span>
|
||||
<span class="lang-fr"></span>
|
||||
<span class="lang-br"></span>' %}
|
||||
{% assign banner_text = '<span class="lang-en">Pipedrive CRM is overflowing with intelligent tools to improve your sales and marketing processes. Our CRM platform offers everything from <a href="https://www.pipedrive.com/en/products/email-marketing-software/marketing-automation-tool">marketing automation</a> features to in-depth sales reports.<br>Seamlessly keep track of leads and potential customers with Pipedrive’s intuitive pipeline view. Get notified when your prospects are ready to close a deal so you can follow up at precisely the right time.<br><br>Centralize all your customer information under one roof and integrate it with your digital marketing tools. Add custom fields for contacts and separate them by industries to ensure you target the hottest leads.<br>Start using Pipedrive Learn today to make the most of your powerful CRM tool and keep the deals rolling in.</span>
|
||||
<span class="lang-de"></span>
|
||||
<span class="lang-es"></span>
|
||||
<span class="lang-fr"></span>
|
||||
<span class="lang-br"></span>' %}
|
||||
{% assign banner_button_text = '<span class="lang-en">Start today</span>
|
||||
<span class="lang-de"></span>
|
||||
<span class="lang-es"></span>
|
||||
<span class="lang-fr"></span>
|
||||
<span class="lang-br"></span>' %}
|
||||
{% assign banner_button_link = "#sso-widget" %}
|
||||
{% assign banner_image_url = "https://s3.amazonaws.com/static.northpass.com/pipedrive/example_alt_banner.png" %}
|
||||
{% assign banner_image_alt = "Learn Pipedrive - CRM pipeline on the laptop" %}
|
||||
{% include "green_banner_image_alt" %}
|
||||
</main>
|
||||
|
||||
{% include "footer" %}
|
||||
@ -0,0 +1,27 @@
|
||||
{% include "header" %}
|
||||
|
||||
<main class="homepage">
|
||||
{% include 'homepage_banner' %}
|
||||
{% include 'homepage_latest_courses' %}
|
||||
|
||||
{% assign banner_title = '<span class="lang-en">How to get most out of Pipedrive?</span>
|
||||
<span class="lang-de"></span>
|
||||
<span class="lang-es"></span>
|
||||
<span class="lang-fr"></span>
|
||||
<span class="lang-br"></span>' %}
|
||||
{% assign banner_text = '<span class="lang-en">Pipedrive CRM is overflowing with intelligent tools to improve your sales and marketing processes. Our CRM platform offers everything from <a href="https://www.pipedrive.com/en/products/email-marketing-software/marketing-automation-tool">marketing automation</a> features to in-depth sales reports.<br>Seamlessly keep track of leads and potential customers with Pipedrive’s intuitive pipeline view. Get notified when your prospects are ready to close a deal so you can follow up at precisely the right time.<br><br>Centralize all your customer information under one roof and integrate it with your digital marketing tools. Add custom fields for contacts and separate them by industries to ensure you target the hottest leads.<br>Start using Pipedrive Learn today to make the most of your powerful CRM tool and keep the deals rolling in.</span>
|
||||
<span class="lang-de"></span>
|
||||
<span class="lang-es"></span>
|
||||
<span class="lang-fr"></span>
|
||||
<span class="lang-br"></span>' %}
|
||||
{% assign banner_button_text = '<span class="lang-en">Start today</span>
|
||||
<span class="lang-de"></span>
|
||||
<span class="lang-es"></span>
|
||||
<span class="lang-fr"></span>
|
||||
<span class="lang-br"></span>' %}
|
||||
{% assign banner_button_link = "#sso-widget" %}
|
||||
{% assign banner_image_url = "https://s3.amazonaws.com/static.northpass.com/pipedrive/example_alt_banner.png" %}
|
||||
{% include "green_banner_image_alt" %}
|
||||
</main>
|
||||
|
||||
{% include "footer" %}
|
||||
@ -0,0 +1,81 @@
|
||||
{% if current_person.signed_in? == false and current_school.sso_active? == false %}
|
||||
<script> window.location.replace('/learners/sign_in')</script>
|
||||
{% else %}
|
||||
{% include "header" %}
|
||||
|
||||
<main class="homepage">
|
||||
{% if current_person.signed_in? %}
|
||||
{% assign new_person = true %}
|
||||
{% for course in courses.enrolled %}
|
||||
{% if course.started? %}
|
||||
{% assign new_person = false %}
|
||||
{% break %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
{% if new_person %}
|
||||
{% include 'homepage_banner_new_person' %}
|
||||
{% include 'homepage_recommended' %}
|
||||
{% include "homepage_generic_cards" %}
|
||||
{% include "homepage_page_info" %}
|
||||
{% include "opinions" %}
|
||||
{% include 'homepage_faq' %}
|
||||
{% else %}
|
||||
{% include 'homepage_banner' %}
|
||||
{% include 'homepage_latest_courses' %}
|
||||
|
||||
{% endif %}
|
||||
{% else %}
|
||||
{% assign banner_title = '<span class="lang-en">Pipedrive Learn</span>
|
||||
<span class="lang-de"></span>
|
||||
<span class="lang-es"></span>
|
||||
<span class="lang-fr"></span>
|
||||
<span class="lang-br"></span>' %}
|
||||
{% assign banner_text = '<span class="lang-en">Welcome to Pipedrive Learn! Here, you’ll find CRM training videos to help you learn CRM management and sales skills. Explore everything from in-depth sales, marketing and CRM courses to quick tutorials on specific CRM tools.</span>
|
||||
<span class="lang-de"></span>
|
||||
<span class="lang-es"></span>
|
||||
<span class="lang-fr"></span>
|
||||
<span class="lang-br"></span>' %}
|
||||
{% assign banner_button_text = '<span class="lang-en">Register now</span>
|
||||
<span class="lang-de"></span>
|
||||
<span class="lang-es"></span>
|
||||
<span class="lang-fr"></span>
|
||||
<span class="lang-br"></span>' %}
|
||||
{% assign banner_button_link = "#sso-widget" %}
|
||||
{% include "green_banner_text" %}
|
||||
|
||||
{% include "homepage_generic_cards" %}
|
||||
{% include "homepage_page_info" %}
|
||||
{% include "opinions" %}
|
||||
{% include 'homepage_faq' %}
|
||||
{% endif %}
|
||||
|
||||
{% assign banner_title = '<span class="lang-en">How to get most out of Pipedrive?</span>
|
||||
<span class="lang-de"></span>
|
||||
<span class="lang-es"></span>
|
||||
<span class="lang-fr"></span>
|
||||
<span class="lang-br"></span>' %}
|
||||
{% assign banner_text = '<span class="lang-en">Pipedrive CRM is overflowing with intelligent tools to improve your sales and marketing processes. Our CRM platform offers everything from <a href="https://www.pipedrive.com/en/products/email-marketing-software/marketing-automation-tool">marketing automation</a> features to in-depth sales reports.<br>Seamlessly keep track of leads and potential customers with Pipedrive’s intuitive pipeline view. Get notified when your prospects are ready to close a deal so you can follow up at precisely the right time.<br><br>Centralize all your customer information under one roof and integrate it with your digital marketing tools. Add custom fields for contacts and separate them by industries to ensure you target the hottest leads.<br>Start using Pipedrive Learn today to make the most of your powerful CRM tool and keep the deals rolling in.</span>
|
||||
<span class="lang-de"></span>
|
||||
<span class="lang-es"></span>
|
||||
<span class="lang-fr"></span>
|
||||
<span class="lang-br"></span>' %}
|
||||
{% assign banner_button_text = '<span class="lang-en">Start today</span>
|
||||
<span class="lang-de"></span>
|
||||
<span class="lang-es"></span>
|
||||
<span class="lang-fr"></span>
|
||||
<span class="lang-br"></span>' %}
|
||||
{% assign banner_button_link = "#sso-widget" %}
|
||||
{% assign banner_image_url = "https://s3.amazonaws.com/static.northpass.com/pipedrive/example_alt_banner.png" %}
|
||||
{% assign banner_image_alt = "Learn Pipedrive - CRM pipeline on the laptop" %}
|
||||
{% include "green_banner_image_alt" %}
|
||||
</main>
|
||||
|
||||
{% include "footer" %}
|
||||
{% endif %}
|
||||
|
||||
<script>
|
||||
{% if current_person.signed_in? == false and current_school.sso_active? %}
|
||||
const redirectionLink = 'https://user-learn.pipedrive.com/app'
|
||||
document.querySelector('#redirect-between-academies').setAttribute('href', redirectionLink)
|
||||
{% endif %}
|
||||
</script>
|
||||
@ -0,0 +1,3 @@
|
||||
<script>
|
||||
window.location.replace('/app')
|
||||
</script>
|
||||
@ -0,0 +1,149 @@
|
||||
<main class="np-main np-box-container width-limit">
|
||||
<div class="login-wrapper">
|
||||
<h3 class="login-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;">
|
||||
<a class="button-1 button-large" style="margin-bottom: 40px" href="https://learn.pipedrive.com/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>
|
||||
<form class="np-form np-box-content" action="{% route login %}" method="post" novalidate>
|
||||
{% form_authenticity_token %}
|
||||
<div class="np-form-field">
|
||||
<svg class="login-icon" width="18" height="14" viewBox="0 0 18 14" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M2.86705 1.75L8.1471 6.67805C8.62736 7.12629 9.37264 7.12629 9.8529 6.67805L15.1329 1.75H2.86705ZM16.25 2.75925L10.8764 7.77463C9.81981 8.76076 8.1802 8.76076 7.12363 7.77463L1.75 2.75925V12C1.75 12.1381 1.86193 12.25 2 12.25H16C16.1381 12.25 16.25 12.1381 16.25 12V2.75925ZM0.25 2C0.25 1.0335 1.0335 0.25 2 0.25H16C16.9665 0.25 17.75 1.0335 17.75 2V12C17.75 12.9665 16.9665 13.75 16 13.75H2C1.0335 13.75 0.25 12.9665 0.25 12V2Z" fill="#192435"/>
|
||||
</svg>
|
||||
<input
|
||||
class="np-input"
|
||||
autofocus="autofocus"
|
||||
type="email"
|
||||
name="learner[email]"
|
||||
id="learner_email"
|
||||
placeholder="Work email"
|
||||
>
|
||||
</div>
|
||||
<div class="np-form-field">
|
||||
<svg class="login-icon" width="16" height="18" viewBox="0 0 16 18" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M8 1.75C6.20507 1.75 4.75 3.20507 4.75 5V6.25H11.25V5C11.25 3.20507 9.79493 1.75 8 1.75ZM12.75 6.25V5C12.75 2.37665 10.6234 0.25 8 0.25C5.37665 0.25 3.25 2.37665 3.25 5V6.25H2C1.0335 6.25 0.25 7.0335 0.25 8V16C0.25 16.9665 1.0335 17.75 2 17.75H14C14.9665 17.75 15.75 16.9665 15.75 16V8C15.75 7.0335 14.9665 6.25 14 6.25H12.75ZM2 7.75C1.86193 7.75 1.75 7.86193 1.75 8V16C1.75 16.1381 1.86193 16.25 2 16.25H14C14.1381 16.25 14.25 16.1381 14.25 16V8C14.25 7.86193 14.1381 7.75 14 7.75H2ZM5.75 12C5.75 10.7574 6.75736 9.75 8 9.75C9.24264 9.75 10.25 10.7574 10.25 12C10.25 13.2426 9.24264 14.25 8 14.25C6.75736 14.25 5.75 13.2426 5.75 12ZM8 11.25C7.58579 11.25 7.25 11.5858 7.25 12C7.25 12.4142 7.58579 12.75 8 12.75C8.41421 12.75 8.75 12.4142 8.75 12C8.75 11.5858 8.41421 11.25 8 11.25Z" fill="#192435"/>
|
||||
</svg>
|
||||
<input
|
||||
class="np-input"
|
||||
type="password"
|
||||
name="learner[password]"
|
||||
id="learner_password"
|
||||
placeholder="Password"
|
||||
>
|
||||
<a class="forgotten-password body-s" href="{% route forgot_password_new %}">Forgot?</a>
|
||||
</div>
|
||||
<button type="submit" class="button-2 button-large np-form-action">
|
||||
<span class="lang-en">Sign In</span>
|
||||
<span class="lang-de"></span>
|
||||
<span class="lang-es"></span>
|
||||
<span class="lang-fr"></span>
|
||||
<span class="lang-br"></span>
|
||||
</button>
|
||||
{% if features.account_creation? %}
|
||||
<a class="np-form-link np-button-color" href="{% route sign_up %}">
|
||||
<span class="lang-en">Sign Up</span>
|
||||
<span class="lang-de"></span>
|
||||
<span class="lang-es"></span>
|
||||
<span class="lang-fr"></span>
|
||||
<span class="lang-br"></span>
|
||||
</a>
|
||||
{% endif %}
|
||||
{% if features.request_access? %}
|
||||
<a
|
||||
class="np-form-link np-button-color"
|
||||
target="_blank"
|
||||
href="{{ current_school.request_access_link }}"
|
||||
>
|
||||
{{ current_school.request_access_label }}
|
||||
</a>
|
||||
{% endif %}
|
||||
</form>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
{% include 'footer' %}
|
||||
|
||||
<style>
|
||||
.login-wrapper {
|
||||
padding: 40px;
|
||||
border: 2px solid #E4E6E9;
|
||||
border-radius: 4px;
|
||||
margin-top: 80px;
|
||||
margin-bottom: 80px;
|
||||
}
|
||||
.login-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;
|
||||
}
|
||||
.np-input {
|
||||
background: none;
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
}
|
||||
.np-form-field {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border-bottom: 2px solid #E4E6E9;
|
||||
}
|
||||
.login-icon {
|
||||
margin-left: 20px;
|
||||
}
|
||||
footer.main-footer .footer-links {
|
||||
display: none;
|
||||
}
|
||||
.np-box-container {
|
||||
height: unset;
|
||||
}
|
||||
.forgotten-password {
|
||||
color: #656E7A;
|
||||
}
|
||||
.np-form-link {
|
||||
color: #0D68C5;
|
||||
}
|
||||
.np-form-link:hover {
|
||||
color: #0D68C5;
|
||||
text-decoration: underline;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,4 @@
|
||||
{% comment %} skip-auth {% endcomment %}
|
||||
<script>
|
||||
window.location.replace('https://learn.pipedrive.com/app')
|
||||
</script>
|
||||
@ -0,0 +1,10 @@
|
||||
<main class="np-main np-max-width np-subpage-container">
|
||||
<div class="np-homepage-featured-text">
|
||||
<div class="np-homepage-headline">
|
||||
{% t .header %}
|
||||
</div>
|
||||
</div>
|
||||
<div class="np-homepage-featured-empty">
|
||||
<img src="/images/404.svg" alt='not found'>
|
||||
</div>
|
||||
</main>
|
||||
@ -0,0 +1,113 @@
|
||||
{% comment %} Page for SSO school to setup first name {% endcomment %}
|
||||
|
||||
{% if current_person.signed_in? == false %}
|
||||
<script>
|
||||
window.location.replace('/app')
|
||||
</script>
|
||||
{% else %}
|
||||
{% if current_person.first_name %}
|
||||
{% include 'profile_settings_regular' %}
|
||||
{% else %}
|
||||
{% include 'profile_settings_initial' %}
|
||||
{% endif %}
|
||||
|
||||
<style>
|
||||
.np-account {
|
||||
background: #F7F7FE;
|
||||
padding-top: 40px;
|
||||
padding-bottom: 40px;
|
||||
height: 100%;
|
||||
}
|
||||
.np-account .np-card {
|
||||
max-width: unset;
|
||||
width: 100%;
|
||||
}
|
||||
.np-account-form {
|
||||
margin-bottom: 80px;
|
||||
}
|
||||
.account-form-title {
|
||||
color: var(--green);
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
.np-account .np-card-container {
|
||||
box-shadow: none;
|
||||
background: none;
|
||||
}
|
||||
.np-input {
|
||||
background: #FFF;
|
||||
border-radius: 0;
|
||||
border: 1px solid #E1E1FF;
|
||||
margin-top: 5px;
|
||||
}
|
||||
.np-form-field {
|
||||
margin-bottom: 20px !important;
|
||||
}
|
||||
.np-account .np-form-action {
|
||||
margin: 20px 0 0;
|
||||
}
|
||||
.avatar-text > h4 {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
button:disabled, button:hover:disabled {
|
||||
background: #FFE7E6;
|
||||
color: gray;
|
||||
cursor: default;
|
||||
}
|
||||
@media only screen and (min-width: 768px) {
|
||||
.np-account {
|
||||
padding-top: 80px;
|
||||
padding-bottom: 80px;
|
||||
}
|
||||
.np-account-form {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
const form = document.getElementById('name-form');
|
||||
|
||||
form.addEventListener('input', () => {
|
||||
const firstName = document.querySelector('#first-name').value;
|
||||
const lastName = document.querySelector('#last-name').value;
|
||||
const button = document.querySelector('button.np-form-action');
|
||||
button.disabled = !(firstName.length > 0 && lastName.length > 0);
|
||||
});
|
||||
|
||||
addEventListener('DOMContentLoaded', () => {
|
||||
{% if current_person.first_name %}
|
||||
document.querySelector('#first-name').setAttribute('value', '{{ current_person.first_name }}');
|
||||
document.querySelector('#last-name').setAttribute('value', '{{ current_person.last_name }}');
|
||||
{% else %}
|
||||
let defaultLastName = "{{ current_person.last_name }}";
|
||||
let splitName = defaultLastName.split(' ');
|
||||
if (splitName.length >= 2) {
|
||||
document.querySelector('#last-name').setAttribute('value', splitName.pop());
|
||||
document.querySelector('#first-name').setAttribute('value', splitName.join(' '));
|
||||
}
|
||||
else {
|
||||
document.querySelector('#first-name').setAttribute('value', splitName[0]);
|
||||
document.querySelector('button').disabled = true;
|
||||
}
|
||||
{% endif %}
|
||||
})
|
||||
|
||||
form.addEventListener('submit', (event) => {
|
||||
event.preventDefault();
|
||||
const firstName = document.getElementById('first-name').value;
|
||||
const lastName = document.getElementById('last-name').value;
|
||||
const xhr = new XMLHttpRequest();
|
||||
xhr.open('POST', 'https://www.workato.com/webhooks/rest/bd1a1eb7-7e79-4208-a1db-8e9c7440bcc9/pipedrive-sso-setup-first-and-last-name');
|
||||
xhr.setRequestHeader('Content-Type', 'application/json');
|
||||
xhr.send(JSON.stringify({
|
||||
"first-name": firstName,
|
||||
"last-name": lastName,
|
||||
"user-uuid": "{{ current_person.id }}"
|
||||
}));
|
||||
xhr.addEventListener('load', () => {
|
||||
window.sessionStorage.setItem('nameSetup', firstName);
|
||||
window.location.replace('/app');
|
||||
});
|
||||
});
|
||||
</script>
|
||||
{% endif %}
|
||||
@ -0,0 +1,142 @@
|
||||
<main class="np-main np-box-container width-limit">
|
||||
<div class="login-wrapper">
|
||||
<h3 class="login-title">
|
||||
<span class="lang-en">Create an account</span>
|
||||
<span class="lang-de"></span>
|
||||
<span class="lang-es"></span>
|
||||
<span class="lang-fr"></span>
|
||||
<span class="lang-br"></span>
|
||||
</h3>
|
||||
<form class="np-form np-box-content" action="{% route sign_up %}" method="post" novalidate>
|
||||
{% form_authenticity_token %}
|
||||
<div class="np-form-field">
|
||||
<svg class="login-icon" width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M6.50122 4C6.50122 2.61929 7.62051 1.5 9.00122 1.5C10.3819 1.5 11.5012 2.61929 11.5012 4C11.5012 5.38071 10.3819 6.5 9.00122 6.5C7.62051 6.5 6.50122 5.38071 6.50122 4ZM9.00122 0C6.79208 0 5.00122 1.79086 5.00122 4C5.00122 6.20914 6.79208 8 9.00122 8C11.2104 8 13.0012 6.20914 13.0012 4C13.0012 1.79086 11.2104 0 9.00122 0ZM2.31048 16.3512C2.74945 13.0485 5.57834 10.5 9.00125 10.5C12.4242 10.5 15.2531 13.0485 15.692 16.3512C15.6962 16.3824 15.6892 16.4085 15.6616 16.4373C15.6297 16.4705 15.5735 16.5 15.5013 16.5H2.50125C2.42899 16.5 2.37284 16.4705 2.34095 16.4373C2.31331 16.4085 2.30634 16.3824 2.31048 16.3512ZM9.00125 9C4.81636 9 1.36029 12.1153 0.82356 16.1536C0.682168 17.2174 1.56565 18 2.50125 18H15.5013C16.4369 18 17.3203 17.2174 17.1789 16.1536C16.6422 12.1153 13.1861 9 9.00125 9Z" fill="#192435"/>
|
||||
</svg>
|
||||
<input
|
||||
class="np-input"
|
||||
autofocus="autofocus"
|
||||
type="text"
|
||||
name="learner[first_name]"
|
||||
id="learner_first_name"
|
||||
placeholder="First name"
|
||||
>
|
||||
</div>
|
||||
<div class="np-form-field">
|
||||
<svg class="login-icon" width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M6.50122 4C6.50122 2.61929 7.62051 1.5 9.00122 1.5C10.3819 1.5 11.5012 2.61929 11.5012 4C11.5012 5.38071 10.3819 6.5 9.00122 6.5C7.62051 6.5 6.50122 5.38071 6.50122 4ZM9.00122 0C6.79208 0 5.00122 1.79086 5.00122 4C5.00122 6.20914 6.79208 8 9.00122 8C11.2104 8 13.0012 6.20914 13.0012 4C13.0012 1.79086 11.2104 0 9.00122 0ZM2.31048 16.3512C2.74945 13.0485 5.57834 10.5 9.00125 10.5C12.4242 10.5 15.2531 13.0485 15.692 16.3512C15.6962 16.3824 15.6892 16.4085 15.6616 16.4373C15.6297 16.4705 15.5735 16.5 15.5013 16.5H2.50125C2.42899 16.5 2.37284 16.4705 2.34095 16.4373C2.31331 16.4085 2.30634 16.3824 2.31048 16.3512ZM9.00125 9C4.81636 9 1.36029 12.1153 0.82356 16.1536C0.682168 17.2174 1.56565 18 2.50125 18H15.5013C16.4369 18 17.3203 17.2174 17.1789 16.1536C16.6422 12.1153 13.1861 9 9.00125 9Z" fill="#192435"/>
|
||||
</svg>
|
||||
<input
|
||||
class="np-input"
|
||||
type="text"
|
||||
name="learner[last_name]"
|
||||
id="learner_last_name"
|
||||
placeholder="Last name"
|
||||
>
|
||||
</div>
|
||||
<div class="np-form-field">
|
||||
<svg class="login-icon" width="18" height="14" viewBox="0 0 18 14" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M2.86705 1.75L8.1471 6.67805C8.62736 7.12629 9.37264 7.12629 9.8529 6.67805L15.1329 1.75H2.86705ZM16.25 2.75925L10.8764 7.77463C9.81981 8.76076 8.1802 8.76076 7.12363 7.77463L1.75 2.75925V12C1.75 12.1381 1.86193 12.25 2 12.25H16C16.1381 12.25 16.25 12.1381 16.25 12V2.75925ZM0.25 2C0.25 1.0335 1.0335 0.25 2 0.25H16C16.9665 0.25 17.75 1.0335 17.75 2V12C17.75 12.9665 16.9665 13.75 16 13.75H2C1.0335 13.75 0.25 12.9665 0.25 12V2Z" fill="#192435"/>
|
||||
</svg>
|
||||
<input
|
||||
class="np-input"
|
||||
autofocus="autofocus"
|
||||
type="email"
|
||||
name="learner[email]"
|
||||
id="learner_email"
|
||||
placeholder="Work email"
|
||||
>
|
||||
</div>
|
||||
<div class="np-form-field">
|
||||
<svg class="login-icon" width="16" height="18" viewBox="0 0 16 18" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M8 1.75C6.20507 1.75 4.75 3.20507 4.75 5V6.25H11.25V5C11.25 3.20507 9.79493 1.75 8 1.75ZM12.75 6.25V5C12.75 2.37665 10.6234 0.25 8 0.25C5.37665 0.25 3.25 2.37665 3.25 5V6.25H2C1.0335 6.25 0.25 7.0335 0.25 8V16C0.25 16.9665 1.0335 17.75 2 17.75H14C14.9665 17.75 15.75 16.9665 15.75 16V8C15.75 7.0335 14.9665 6.25 14 6.25H12.75ZM2 7.75C1.86193 7.75 1.75 7.86193 1.75 8V16C1.75 16.1381 1.86193 16.25 2 16.25H14C14.1381 16.25 14.25 16.1381 14.25 16V8C14.25 7.86193 14.1381 7.75 14 7.75H2ZM5.75 12C5.75 10.7574 6.75736 9.75 8 9.75C9.24264 9.75 10.25 10.7574 10.25 12C10.25 13.2426 9.24264 14.25 8 14.25C6.75736 14.25 5.75 13.2426 5.75 12ZM8 11.25C7.58579 11.25 7.25 11.5858 7.25 12C7.25 12.4142 7.58579 12.75 8 12.75C8.41421 12.75 8.75 12.4142 8.75 12C8.75 11.5858 8.41421 11.25 8 11.25Z" fill="#192435"/>
|
||||
</svg>
|
||||
<input
|
||||
class="np-input"
|
||||
type="password"
|
||||
name="learner[password]"
|
||||
id="learner_password"
|
||||
placeholder="Password"
|
||||
>
|
||||
</div>
|
||||
<button type="submit" class="button-1 button-large np-form-action">
|
||||
{% t shared.sign_up %}
|
||||
</button>
|
||||
<span class="np-form-terms">
|
||||
<span class="lang-en">By submitting this form you agree to the </span>
|
||||
<span class="lang-de"></span>
|
||||
<span class="lang-es"></span>
|
||||
<span class="lang-fr"></span>
|
||||
<span class="lang-br"></span>
|
||||
<a class="np-form-link"
|
||||
target="_blank"
|
||||
href="{{ current_school.terms_of_service_url }}"
|
||||
>
|
||||
<span class="lang-en">Terms of Use</span>
|
||||
<span class="lang-de"></span>
|
||||
<span class="lang-es"></span>
|
||||
<span class="lang-fr"></span>
|
||||
<span class="lang-br"></span>
|
||||
</a>
|
||||
</span>
|
||||
<span class="np-form-terms" style="margin-top: 30px;">
|
||||
<span class="lang-en">Already have an account? </span>
|
||||
<span class="lang-de"></span>
|
||||
<span class="lang-es"></span>
|
||||
<span class="lang-fr"></span>
|
||||
<span class="lang-br"></span>
|
||||
<a class="np-form-link"
|
||||
href="/learners/sign_in"
|
||||
>
|
||||
<span class="lang-en">Log in</span>
|
||||
<span class="lang-de"></span>
|
||||
<span class="lang-es"></span>
|
||||
<span class="lang-fr"></span>
|
||||
<span class="lang-br"></span>
|
||||
</a>
|
||||
</span>
|
||||
</form>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
{% include 'footer' %}
|
||||
|
||||
<style>
|
||||
.login-wrapper {
|
||||
padding: 40px;
|
||||
border: 2px solid #E4E6E9;
|
||||
border-radius: 4px;
|
||||
margin-top: 80px;
|
||||
margin-bottom: 80px;
|
||||
}
|
||||
.login-title {
|
||||
text-align: center;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
.np-input {
|
||||
background: none;
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
}
|
||||
.np-form-field {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border-bottom: 2px solid #E4E6E9;
|
||||
}
|
||||
.login-icon {
|
||||
margin-left: 20px;
|
||||
}
|
||||
footer.main-footer .footer-links {
|
||||
display: none;
|
||||
}
|
||||
.np-box-container {
|
||||
height: unset;
|
||||
}
|
||||
.np-form-terms a {
|
||||
color: #0D68C5;
|
||||
}
|
||||
.np-form-terms a:hover {
|
||||
color: #0D68C5;
|
||||
text-decoration: underline;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,589 @@
|
||||
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap'); /* brand colors */
|
||||
:root {
|
||||
--green: #017737;
|
||||
--green-dark: #014722;
|
||||
--green-light: #D7F9D3;
|
||||
--purple: #6861F2;
|
||||
--purple-dark: #393A97;
|
||||
--purple-light: #CFD0F9;
|
||||
--yellow: #FFDE00;
|
||||
--black-digital: #192435;
|
||||
}
|
||||
/* fonts */
|
||||
@font-face {
|
||||
font-family: "Haffer";
|
||||
src: url("https://s3.amazonaws.com/static.northpass.com/pipedrive/fonts/Haffer/Haffer-Bold.woff2");
|
||||
font-weight: bold;
|
||||
}
|
||||
@font-face {
|
||||
font-family: "Haffer";
|
||||
src: url("https://s3.amazonaws.com/static.northpass.com/pipedrive/fonts/Haffer/Haffer-SemiBold.woff2");
|
||||
font-weight: 600;
|
||||
}
|
||||
@font-face {
|
||||
font-family: "HafferSQ";
|
||||
src: url("https://s3.amazonaws.com/static.northpass.com/pipedrive/fonts/Haffer/HafferSQ-Bold.woff2");
|
||||
font-weight: bold;
|
||||
}
|
||||
@font-face {
|
||||
font-family: "HafferSQ";
|
||||
src: url("https://s3.amazonaws.com/static.northpass.com/pipedrive/fonts/Haffer/HafferSQ-SemiBold.woff2");
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* general styling */
|
||||
body {
|
||||
color: var(--black-digital);
|
||||
background: #FFF;
|
||||
font-family: Inter, sans-serif;
|
||||
font-size: 18px;
|
||||
line-height: 200%;
|
||||
}
|
||||
@media only screen and (min-width: 768px) {
|
||||
body {
|
||||
line-height: 170%;
|
||||
}
|
||||
}
|
||||
a, a:hover, a:focus, a:active {
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
}
|
||||
.container {
|
||||
width: auto
|
||||
}
|
||||
.width-limit {
|
||||
padding-left: 20px;
|
||||
padding-right: 20px;
|
||||
margin: auto;
|
||||
}
|
||||
@media only screen and (min-width: 768px) {
|
||||
.width-limit {
|
||||
padding-left: 40px;
|
||||
padding-right: 40px;
|
||||
max-width: calc(1568px - 80px);
|
||||
}
|
||||
}
|
||||
|
||||
/* text styles */
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
margin: unset;
|
||||
}
|
||||
h1 {
|
||||
font-size: 32px;
|
||||
line-height: 130%;
|
||||
font-family: Haffer, sans-serif;
|
||||
}
|
||||
h2 {
|
||||
font-size: 30px;
|
||||
line-height: 130%;
|
||||
}
|
||||
h3 {
|
||||
font-size: 28px;
|
||||
line-height: 130%;
|
||||
}
|
||||
h4 {
|
||||
font-size: 24px;
|
||||
line-height: 150%;
|
||||
}
|
||||
h5 {
|
||||
font-size: 22px;
|
||||
line-height: 150%;
|
||||
}
|
||||
h6 {
|
||||
font-size: 20px;
|
||||
line-height: 150%;
|
||||
}
|
||||
.body-s {
|
||||
font-size: 14px;
|
||||
line-height: 200%;
|
||||
}
|
||||
.body-xs {
|
||||
font-size: 12px;
|
||||
line-height: 200%;
|
||||
}
|
||||
.body-xxs {
|
||||
font-size: 10px;
|
||||
line-height: 200%;
|
||||
}
|
||||
@media only screen and (min-width: 768px) {
|
||||
h1 {
|
||||
font-size: 60px;
|
||||
}
|
||||
h2 {
|
||||
font-size: 44px;
|
||||
}
|
||||
h3 {
|
||||
font-size: 34px;
|
||||
}
|
||||
.body-s {
|
||||
line-height: 180%;
|
||||
}
|
||||
.body-xs {
|
||||
line-height: 180%;
|
||||
}
|
||||
.body-xxs {
|
||||
line-height: 180%;
|
||||
}
|
||||
}
|
||||
.strong {
|
||||
font-weight: 700;
|
||||
}
|
||||
/* buttons */
|
||||
.button-wrapper {
|
||||
display: flex;
|
||||
}
|
||||
.button-small, .button-medium, .button-large {
|
||||
font-weight: 700;
|
||||
border-radius: 4px;
|
||||
text-align: center;
|
||||
line-height: 120%;
|
||||
width: 100%;
|
||||
cursor: pointer;
|
||||
}
|
||||
.button-small {
|
||||
padding: 8px 10px;
|
||||
font-size: 14px;
|
||||
line-height: 17px;
|
||||
}
|
||||
.button-medium {
|
||||
padding: 10px 20px;
|
||||
font-size: 18px;
|
||||
line-height: 21px;
|
||||
}
|
||||
.button-large {
|
||||
padding: 15px 20px;
|
||||
font-size: 22px;
|
||||
line-height: 26px;
|
||||
}
|
||||
.button-1 {
|
||||
background: var(--purple);
|
||||
color: #FFF;
|
||||
border: none;
|
||||
}
|
||||
.button-1:hover, .button-1:focus {
|
||||
background: #413D99;
|
||||
color: white;
|
||||
}
|
||||
.button-2 {
|
||||
background: #E1E1FF;
|
||||
color: #413D99;
|
||||
border: none;
|
||||
}
|
||||
.button-2:hover, .button-2:focus {
|
||||
background: #C4C2FF;
|
||||
color: #413D99;
|
||||
}
|
||||
.np-button:hover {
|
||||
color: white;
|
||||
}
|
||||
|
||||
/* green banner */
|
||||
.green-banner-wrapper {
|
||||
background: var(--green-light);
|
||||
}
|
||||
.green-banner-wrapper-text-bg-image {
|
||||
position: relative;
|
||||
overflow-x: clip;
|
||||
}
|
||||
.green-banner {
|
||||
padding-top: 40px;
|
||||
padding-bottom: 40px;
|
||||
}
|
||||
.green-banner-image {
|
||||
width: 100%;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.green-banner-title {
|
||||
color: var(--green);
|
||||
font-weight: 700;
|
||||
}
|
||||
.green-banner-text {
|
||||
max-width: 800px;
|
||||
margin: 0 auto 20px;
|
||||
}
|
||||
.green-banner-bg-image {
|
||||
display: none;
|
||||
}
|
||||
.green-banner-wrapper-text-bg-image .green-banner-title {
|
||||
color: var(--black-digital);
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.green-banner-wrapper-text-bg-image .green-banner-button {
|
||||
width: 100%;
|
||||
}
|
||||
.green-banner-wrapper-text-bg-image .green-banner-title,
|
||||
.green-banner-wrapper-text-bg-image .green-banner-text {
|
||||
text-align: center;
|
||||
}
|
||||
.green-banner-wrapper-image-alt {
|
||||
background: #F7F7FE;
|
||||
}
|
||||
.green-banner-wrapper-image-alt .green-banner-title {
|
||||
color: var(--black-digital);
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 768px) {
|
||||
.green-banner {
|
||||
padding-top:80px;
|
||||
padding-bottom:80px;
|
||||
}
|
||||
.green-banner-image {
|
||||
margin-bottom: 0;
|
||||
flex: 1 1 0px;
|
||||
width: 0;
|
||||
object-fit: contain;
|
||||
}
|
||||
.green-banner-title {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.green-banner-button {
|
||||
width: max-content;
|
||||
}
|
||||
.green-banner-wrapper-text .green-banner-title,
|
||||
.green-banner-wrapper-text .green-banner-text {
|
||||
text-align: center;
|
||||
}
|
||||
.green-banner-wrapper-text .green-banner-button,
|
||||
.green-banner-wrapper-text-bg-image .green-banner-button {
|
||||
margin: auto;
|
||||
}
|
||||
.green-banner-wrapper-text-bg-image {
|
||||
min-height: 300px;
|
||||
margin: auto;
|
||||
display: flex;
|
||||
}
|
||||
.green-banner-wrapper-text-bg-image .green-banner {
|
||||
z-index: 1;
|
||||
position: relative;
|
||||
margin: auto;
|
||||
width: 60%;
|
||||
}
|
||||
.green-banner-wrapper-image .green-banner-content {
|
||||
flex: 1 1 0px;
|
||||
width: 0;
|
||||
align-self: center;
|
||||
}
|
||||
.green-banner-wrapper-text-bg-image .green-banner-button {
|
||||
width: auto;
|
||||
}
|
||||
.green-banner-wrapper-image .green-banner {
|
||||
display: flex;
|
||||
flex-direction: row-reverse;
|
||||
gap: 40px;
|
||||
}
|
||||
.green-banner-wrapper-image-alt .green-banner {
|
||||
gap: 80px;
|
||||
}
|
||||
.green-banner-text a {
|
||||
color: #0D68C5;
|
||||
}
|
||||
.green-banner-text a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
@media only screen and (min-width: 1500px) {
|
||||
.green-banner-bg-image {
|
||||
display: block;
|
||||
right: calc((100vw - 1500px) / 2 - 273px);
|
||||
z-index: 0;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
@media only screen and (min-width: 2046px) {
|
||||
.green-banner-bg-image {
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* course-card */
|
||||
.course-card {
|
||||
padding-bottom: 30px;
|
||||
}
|
||||
.course-card-wrapper {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
cursor: pointer;
|
||||
}
|
||||
.course-card-ribbon {
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
top: 10px;
|
||||
padding: 2px 10px;
|
||||
background: var(--yellow);
|
||||
border-radius: 30px;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.course-card-ribbon.ribbon-blue {
|
||||
color:#fff;
|
||||
background: #0070D6;
|
||||
}
|
||||
.course-card-image {
|
||||
width: 100%;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.course-card-image[src^="//cdn.northpass.com/assets/defaults"] {
|
||||
aspect-ratio: 1.8125/1;
|
||||
}
|
||||
.course-card-content {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.course-card-info {
|
||||
text-transform: uppercase;
|
||||
color: #656E7A;
|
||||
font-weight: 700;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.course-card-info-separator {
|
||||
padding: 0 10px;
|
||||
}
|
||||
.course-card-title {
|
||||
font-weight: 700;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.course-card-footer {
|
||||
margin-top: auto;
|
||||
padding-top: 20px;
|
||||
}
|
||||
.course-card-button {
|
||||
width: max-content;
|
||||
}
|
||||
.generic-cards-collection .course-card-button {
|
||||
margin-top: 20px;
|
||||
}
|
||||
.course-card-progress {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.course-card-progress-value {
|
||||
color: var(--green);
|
||||
}
|
||||
.course-card-progress-bar {
|
||||
width: 100%;
|
||||
border-radius: 20px;
|
||||
height: 2px;
|
||||
background: #DADDE1;
|
||||
}
|
||||
.course-card-progress-bar-fill {
|
||||
height: 2px;
|
||||
background: var(--green);
|
||||
}
|
||||
.course-card:hover .course-card-title {
|
||||
text-decoration: underline;
|
||||
}
|
||||
@media only screen and (min-width: 768px) {
|
||||
.course-card {
|
||||
padding-bottom: 40px;
|
||||
}
|
||||
}
|
||||
.video-card-ribbon {
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
top: 10px;
|
||||
color: #FFF;
|
||||
background: var(--black-digital);
|
||||
border-radius: 4px;
|
||||
padding: 6px 10px 6px 14px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.video-card-ribbon svg {
|
||||
margin-right: 14px;
|
||||
}
|
||||
/* page info */
|
||||
.page-info-wrapper {
|
||||
background: #F7F7FE;
|
||||
padding-top: 40px;
|
||||
}
|
||||
.page-info-section:not(:last-child) {
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
.page-info-section > * {
|
||||
padding-bottom: 40px;
|
||||
}
|
||||
.page-info-section-title {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.page-info-section-image-wrapper {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
}
|
||||
.page-info-section-image {
|
||||
width: 100%;
|
||||
align-self: center;
|
||||
}
|
||||
.page-info-section-text {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
}
|
||||
.page-info-section-description a {
|
||||
color: #0D68C5;
|
||||
}
|
||||
.page-info-section-description a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
.page-info-section .button-2 {
|
||||
margin-top: 20px;
|
||||
}
|
||||
.page-info-section ul {
|
||||
margin: 0;
|
||||
padding-left: 30px;
|
||||
}
|
||||
@media only screen and (min-width: 768px) {
|
||||
.page-info-section .button-2 {
|
||||
width: fit-content;
|
||||
}
|
||||
}
|
||||
@media only screen and (min-width: 1024px) {
|
||||
.page-info-wrapper {
|
||||
padding-top: 80px;
|
||||
padding-bottom: 80px;
|
||||
}
|
||||
.page-info-section:not(:last-child) {
|
||||
margin-bottom: 80px;
|
||||
}
|
||||
.page-info-section {
|
||||
gap: 60px;
|
||||
display: flex;
|
||||
}
|
||||
.page-info-section > * {
|
||||
padding-bottom: 0;
|
||||
flex: 1 1 0px;
|
||||
width: 0;
|
||||
}
|
||||
.page-info-section:nth-child(odd) {
|
||||
flex-direction: row-reverse;
|
||||
}
|
||||
}
|
||||
|
||||
/* FAQ */
|
||||
.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;
|
||||
}
|
||||
.faq-question {
|
||||
display: flex;
|
||||
cursor: pointer;
|
||||
}
|
||||
.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-question-icon .faq-icon-opened {
|
||||
display: none;
|
||||
}
|
||||
.faq-question:hover .faq-question-text, .faq-question.open .faq-question-text {
|
||||
font-weight: 700;
|
||||
}
|
||||
.faq-question:hover .faq-question-icon, .faq-question.open .faq-question-icon {
|
||||
background: #EDEEF0;
|
||||
}
|
||||
.faq-question-text {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.faq-answer {
|
||||
display: none;
|
||||
margin-left: 56px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
.faq-answer a {
|
||||
color: #0D68C5;
|
||||
}
|
||||
.faq-answer a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
.faq-question.open .faq-icon-opened {
|
||||
display: block;
|
||||
}
|
||||
.faq-question.open .faq-icon-closed {
|
||||
display: none;
|
||||
}
|
||||
.faq-question.open ~ .faq-answer {
|
||||
display: block;
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 768px) {
|
||||
.faq {
|
||||
padding-top: 80px;
|
||||
padding-bottom: 80px;
|
||||
}
|
||||
}
|
||||
|
||||
{% comment %}
|
||||
We are currently turning off translation, so commenting this code
|
||||
/* translations */
|
||||
body.lang-en .lang-es, body.lang-en .lang-de, body.lang-en .lang-fr, body.lang-en .lang-br {
|
||||
display: none !important;
|
||||
}
|
||||
body.lang-es .lang-en, body.lang-es .lang-de, body.lang-es .lang-fr, body.lang-es .lang-br {
|
||||
display: none !important;
|
||||
}
|
||||
body.lang-de .lang-es, body.lang-de .lang-en, body.lang-de .lang-fr, body.lang-de .lang-br {
|
||||
display: none !important;
|
||||
}
|
||||
body.lang-fr .lang-es, body.lang-fr .lang-de, body.lang-fr .lang-en, body.lang-fr .lang-br {
|
||||
display: none !important;
|
||||
}
|
||||
body.lang-br .lang-es, body.lang-br .lang-de, body.lang-br .lang-fr, body.lang-br .lang-en {
|
||||
display: none !important;
|
||||
}
|
||||
/* fallback to english for wrongly added body language class */
|
||||
body:not(.lang-en):not(.lang-br):not(.lang-de):not(.lang-es):not(.lang-fr) .lang-es,
|
||||
body:not(.lang-en):not(.lang-br):not(.lang-de):not(.lang-es):not(.lang-fr) .lang-de,
|
||||
body:not(.lang-en):not(.lang-br):not(.lang-de):not(.lang-es):not(.lang-fr) .lang-fr,
|
||||
body:not(.lang-en):not(.lang-br):not(.lang-de):not(.lang-es):not(.lang-fr) .lang-br {
|
||||
display: none !important;
|
||||
}
|
||||
{% endcomment %}
|
||||
/* this code is added to turn off translations */
|
||||
.language-dropdown-wrapper {
|
||||
display: none !important;
|
||||
}
|
||||
.lang-es:not(body), .lang-de:not(body), .lang-br:not(body), .lang-fr:not(body) {
|
||||
display: none !important;
|
||||
}
|
||||
.footer-language-wrapper {
|
||||
display: none !important;
|
||||
}
|
||||
.side-menu-language {
|
||||
display: none !important;
|
||||
}
|
||||
.footer-bottom-row:not(.body-s) {
|
||||
justify-content: end;
|
||||
}
|
||||
.header-profile-image {
|
||||
margin-left: 20px;
|
||||
}
|
||||
/* end of translations changes */
|
||||
@ -0,0 +1,3 @@
|
||||
<script>
|
||||
window.location.replace('/app')
|
||||
</script>
|
||||
@ -0,0 +1,58 @@
|
||||
{% comment %} skip-auth {% endcomment %}
|
||||
{% if current_person.signed_in? == false and current_school.sso_active? == false %}
|
||||
<script> window.location.replace('/learners/sign_in')</script>
|
||||
{% else %}
|
||||
{% include "header" %}
|
||||
|
||||
<main class="video-tutorials">
|
||||
{% assign banner_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 banner_text = '<span class="lang-en">Welcome to Pipedrive’s video tutorials section, where you’ll find video and CRM training resources to help your business grow with our CRM software.</span>
|
||||
<span class="lang-de"></span>
|
||||
<span class="lang-es"></span>
|
||||
<span class="lang-fr"></span>
|
||||
<span class="lang-br"></span>' %}
|
||||
{% assign banner_button_text = '<span class="lang-en">Sign up for courses</span>
|
||||
<span class="lang-de"></span>
|
||||
<span class="lang-es"></span>
|
||||
<span class="lang-fr"></span>
|
||||
<span class="lang-br"></span>' %}
|
||||
{% assign banner_button_link = "#sso-widget" %}
|
||||
{% assign banner_image_url = "https://s3.amazonaws.com/static.northpass.com/pipedrive/homepage-card-webinars.webp" %}
|
||||
{% assign banner_image_alt = "Group of people sitting at a Pipedrive sales seminar" %}
|
||||
{% include "green_banner_image" %}
|
||||
|
||||
{% include "video_tutorials_courses" %}
|
||||
{% include "video_tutorials_page_info" %}
|
||||
{% include 'opinions' %}
|
||||
{% include 'video_tutorials_faq' %}
|
||||
|
||||
{% unless current_person.signed_in? %}
|
||||
{% assign banner_title = '<span class="lang-en">Unlock videos for free</span>
|
||||
<span class="lang-de"></span>
|
||||
<span class="lang-es"></span>
|
||||
<span class="lang-fr"></span>
|
||||
<span class="lang-br"></span>' %}
|
||||
{% assign banner_text = "" %}
|
||||
{% assign banner_button_text = '<span class="lang-en">Sign up</span>
|
||||
<span class="lang-de"></span>
|
||||
<span class="lang-es"></span>
|
||||
<span class="lang-fr"></span>
|
||||
<span class="lang-br"></span>' %}
|
||||
{% assign banner_button_link = "#sso-widget" %}
|
||||
{% include "green_banner_text_bg_image" %}
|
||||
{% endunless %}
|
||||
</main>
|
||||
|
||||
{% include "footer" %}
|
||||
{% endif %}
|
||||
|
||||
{% if current_person.signed_in? == false and current_school.sso_active? %}
|
||||
<script>
|
||||
const redirectionLink = 'https://user-learn.pipedrive.com/app/video-tutorials'
|
||||
document.querySelector('#redirect-between-academies').setAttribute('href', redirectionLink)
|
||||
</script>
|
||||
{% endif %}
|
||||
@ -0,0 +1,19 @@
|
||||
<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="np-card-container np-card-padding">
|
||||
<div class="row">
|
||||
<div class="col-sm-7 np-account-form">
|
||||
{% render "account_form", form: form, version: "desktop", country:current_person.properties.country, company:current_person.properties.company %}
|
||||
<button type="submit" class="np-button np-button-big np-button-large-font np-form-action">
|
||||
{% t shared.account.save %}
|
||||
</button>
|
||||
</div>
|
||||
<div class="col-sm-5 np-account-avatar">
|
||||
{% include "account_avatar", version: "desktop" %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
@ -0,0 +1,148 @@
|
||||
<div class="np-resource-title">
|
||||
{% t .header %}
|
||||
</div>
|
||||
<div class="user-details">
|
||||
<div class='detail'>Country: {{country}}</div>
|
||||
<div class='detail'>Company: {{company}}</div>
|
||||
</div>
|
||||
<div class="np-form-field {% if form.errors contains 'email' %}np-account-form-field-error{% endif %}">
|
||||
<label class="np-input-label" for="{{version}}_learner_email">{% t shared.email %} *</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="np-input-label" for="{{version}}_learner_first_name">
|
||||
{% t shared.first_name %} *
|
||||
</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="np-input-label" for="{{version}}_learner_last_name">
|
||||
{% t shared.last_name %} *
|
||||
</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 %}">
|
||||
<label class="np-input-label" for="{{version}}_learner_display_name">
|
||||
{% t .display_name %}
|
||||
</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="np-input-label" for="{{version}}_learner_current_password">
|
||||
{% t .current_password %} *
|
||||
</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="np-input-label" for="{{version}}_learner_password">
|
||||
{% t .new_password %} *
|
||||
</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="np-input-label" for="{{version}}_learner_password_confirmation">
|
||||
{% t .confirm_new_password %} *
|
||||
</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="np-input-label" for="{{version}}_learner_password">
|
||||
{% t shared.password %} *
|
||||
</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">
|
||||
{% t .terms_of_service %}
|
||||
</div>
|
||||
</div>
|
||||
{% else %}
|
||||
<div class="np-margin-top">
|
||||
<span class="np-form-terms ">
|
||||
{% t .terms %}
|
||||
<a
|
||||
class="np-form-link np-button-color"
|
||||
target="_blank"
|
||||
href={{ form.terms_of_service_url }}
|
||||
>
|
||||
{% t .terms_link %}
|
||||
</a>
|
||||
</span>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<input
|
||||
id="{{version}}_invite_token"
|
||||
name="learner[token]"
|
||||
value="{{ form.invite_token }}"
|
||||
type="hidden"
|
||||
/>
|
||||
{% endif %}
|
||||
|
||||
|
||||
<style>
|
||||
.user-details {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-bottom: 1rem;
|
||||
gap: 10px;
|
||||
font-weight: 400;
|
||||
}
|
||||
</style>
|
||||
@ -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", country:current_person.properties.country, company:current_person.properties.company %}
|
||||
</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>
|
||||
@ -0,0 +1,34 @@
|
||||
<div class="np-card">
|
||||
<div class="np-card-container">
|
||||
{% if course.ribbon %}
|
||||
<div class="np-card-ribbon">
|
||||
{{ course.ribbon }}
|
||||
</div>
|
||||
{% endif %}
|
||||
<img
|
||||
class="np-card-image"
|
||||
alt="{{ course.name }}"
|
||||
src="{{ course.image_url }}"
|
||||
>
|
||||
<div class="np-card-content np-card-content-vertical np-card-padding">
|
||||
<h3 class="np-card-content-title">
|
||||
{{ course.name }}
|
||||
</h3>
|
||||
<div class="np-card-content-subtitle">
|
||||
{{ course.instructor_names }}
|
||||
</div>
|
||||
<div class="np-card-content-footer">
|
||||
<div class="np-card-content-progress np-button-color">
|
||||
{% t shared.progress, count: course.progress %}
|
||||
</div>
|
||||
{% capture course_path %}{% route course, id: course.id %}{% endcapture %}
|
||||
{% if course.has_to_restart? %}
|
||||
{% include "course_version_outdated_popup", path: course_path %}
|
||||
{% endif %}
|
||||
<a class="np-button np-button-wide" href="{{ course_path }}">
|
||||
{% t shared.view %}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -0,0 +1,37 @@
|
||||
<div class="np-card">
|
||||
<div class="np-card-container">
|
||||
{% if course.ribbon %}
|
||||
<div class="np-card-ribbon">
|
||||
{{ course.ribbon }}
|
||||
</div>
|
||||
{% endif %}
|
||||
<img
|
||||
class="np-card-image"
|
||||
alt="{{ course.name }}"
|
||||
src="{{ course.image_url }}"
|
||||
>
|
||||
<div class="np-card-content np-card-content-vertical np-card-padding">
|
||||
<h3 class="np-card-content-title">
|
||||
{{ course.name }}
|
||||
</h3>
|
||||
<div class="np-card-content-subtitle">
|
||||
{{ course.instructor_names }}
|
||||
</div>
|
||||
<div class="np-featured-short-desc">
|
||||
<span>{{ course.short_description }}</span>
|
||||
</div>
|
||||
<div class="np-card-content-footer">
|
||||
<div class="np-card-content-progress np-button-color">
|
||||
{% t shared.progress, count: course.progress %}
|
||||
</div>
|
||||
{% capture course_path %}{% route course, id: course.id %}{% endcapture %}
|
||||
{% if course.has_to_restart? %}
|
||||
{% include "course_version_outdated_popup", path: course_path %}
|
||||
{% endif %}
|
||||
<a class="np-button np-button-wide" href="{{ course_path }}">
|
||||
{% t shared.view %}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -0,0 +1,46 @@
|
||||
<div class="np-card np-event-card homepage-event-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">
|
||||
{{ training_event.event_type }}
|
||||
</div>
|
||||
<div class="np-card-training-session" style="text-align: left;">
|
||||
<span class="np-card-content-label" style='border-radius: 4px; color: #29ABE2; font-size: 1rem; background: none;'>
|
||||
Next Session
|
||||
</span>
|
||||
<div class="np-card-training-session-date">
|
||||
<div>
|
||||
<div class="np-card-training-session-date-month">
|
||||
{{ training_event.sessions.first.month }}
|
||||
</div>
|
||||
<div class="np-card-training-session-date-year np-opacity-50">
|
||||
{{ training_event.sessions.first.year }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="np-card-training-session-date-day">
|
||||
{% if training_event.sessions.first.day < 10 %}0{% endif %}{{ training_event.sessions.first.day }}
|
||||
</div>
|
||||
<div class="np-button-background-color np-card-training-session-date-bar" style='border-right: 16px solid #29ABE2;'></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="np-card-content np-card-content-vertical np-card-padding">
|
||||
<div class="np-card-training-sessions">
|
||||
<span class="np-card-training-sessions-label" style="color: #29ABE2; font-size: 20px; font-weight: 700;">
|
||||
Total Sessions: {{training_event.sessions.size}}
|
||||
</span>
|
||||
<a
|
||||
class="np-button"
|
||||
href="{% route training_session, id: training_event.sessions.first.id %}"
|
||||
style='background: #29ABE2; border-radius: 8px;'
|
||||
>
|
||||
{% t shared.view %}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -0,0 +1,22 @@
|
||||
<div class="events-carousel np-carousel np-carousel-bg-blue" id="events-carousel">
|
||||
{% if items.any? %}
|
||||
{% for training_event in items %}
|
||||
<div class="np-carousel-card"> {% include "cards_featured_training_event" with training_event %}</div>
|
||||
{% endfor %}
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<script>
|
||||
$(document).ready(function(){
|
||||
|
||||
$(".events-carousel").slick({
|
||||
slidesToShow: 1,
|
||||
prevArrow: '<i class="fal fa-chevron-left"></i>',
|
||||
nextArrow: '<i class="fal fa-chevron-right"></i>',
|
||||
infinite: true,
|
||||
dots: false,
|
||||
arrows: true
|
||||
});
|
||||
});
|
||||
|
||||
</script>
|
||||
@ -0,0 +1,26 @@
|
||||
{% styles default %}
|
||||
{% styles colors %}
|
||||
{% styles custom %}
|
||||
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Lexend:wght@100;400;500;600;700;800&display=swap" rel="stylesheet">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.css" integrity="sha512-wR4oNhLBHf7smjy0K4oqzdWumd+r5/+6QO/vDda76MW5iug4PT7v86FoEkySIJft3XA0Ae6axhIvHrqwm793Nw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
|
||||
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js" type="text/javascript"></script>
|
||||
|
||||
|
||||
{% if current_person.signed_in? and current_person.properties.company == "NULL" and current_person.properties.country == "NULL"%}
|
||||
<script>
|
||||
if ( window.location.pathname != '/app/sign-up-follow-up'
|
||||
&& window.location.pathname != '/terms_agreement/new'
|
||||
&& !window.sessionStorage.propertiesAdded ) {
|
||||
window.location.replace('/app/sign-up-follow-up');
|
||||
}
|
||||
</script>
|
||||
{% endif %}
|
||||
<script
|
||||
src="https://code.jquery.com/jquery-3.5.1.min.js"
|
||||
integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
|
||||
crossorigin="anonymous"></script>
|
||||
@ -0,0 +1,218 @@
|
||||
<header class="np-header np-header-color" >
|
||||
<!-- Added to Header for Marketo and SalesForce tracking via Marketing team Jina and Chelsea. -->
|
||||
<script type="text/javascript">
|
||||
(function() {
|
||||
var didInit = false;
|
||||
function initMunchkin() {
|
||||
if(didInit === false) {
|
||||
didInit = true;
|
||||
Munchkin.init('563-ODB-688');
|
||||
}
|
||||
}
|
||||
var s = document.createElement('script');
|
||||
s.type = 'text/javascript';
|
||||
s.async = true;
|
||||
s.src = '//munchkin.marketo.net/munchkin-beta.js';
|
||||
s.onreadystatechange = function() {
|
||||
if (this.readyState == 'complete' || this.readyState == 'loaded') {
|
||||
initMunchkin();
|
||||
}
|
||||
};
|
||||
s.onload = initMunchkin;
|
||||
document.getElementsByTagName('head')[0].appendChild(s);
|
||||
})();
|
||||
</script>
|
||||
<div class="np-header-content">
|
||||
<div class="np-hidden-desktop np-header-mobile-menu-nav">
|
||||
{% if current_person.signed_in? %}
|
||||
<button
|
||||
data-toggle-class="np-hidden"
|
||||
class="np-header-mobile-menu-nav-button fal fa-times np-hidden np-header-font-color"
|
||||
data-toggle-target=".np-header-mobile-avatar-menu,
|
||||
.np-header-mobile-menu-content, .np-main, .np-footer"
|
||||
></button>
|
||||
<button
|
||||
data-test="open-mobile-menu"
|
||||
data-toggle-class="np-hidden"
|
||||
class="np-header-mobile-menu-nav-button np-header-mobile-avatar-menu"
|
||||
data-toggle-target=".fa-times, .np-header-mobile-menu-content, .np-main, .np-footer"
|
||||
>
|
||||
<img
|
||||
alt="{{ current_person.name }}"
|
||||
class="np-header-avatar-image"
|
||||
src="{{ current_person.avatar_url }}"
|
||||
/>
|
||||
</button>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% if current_school.logo_url %}
|
||||
<h1 class="np-header-logo">
|
||||
<a href="{% route home %}">
|
||||
<img
|
||||
alt="{{ current_school.name }}"
|
||||
class="np-header-logo-image"
|
||||
src="{{ current_school.logo_url }}"
|
||||
/>
|
||||
</a>
|
||||
</h1>
|
||||
{% else %}
|
||||
<a href="{% route home %}" class="np-school-name np-header-font-color">
|
||||
{{ current_school.name }}
|
||||
</a>
|
||||
{% endif %}
|
||||
|
||||
<div class="np-hidden-mobile desktop-subnav" style="height: 100%">
|
||||
{% include "sub_navigation" %}
|
||||
</div>
|
||||
|
||||
{% comment %}<div class="np-hidden-mobile np-header-desktop-nav">
|
||||
<ul class="np-header-desktop-nav-list">
|
||||
{% for website_navigation in navigations.header_navigations_external %}
|
||||
<li class= "np-header-desktop-nav-item">
|
||||
<a
|
||||
href="{{ website_navigation.path }}"
|
||||
class="np-header-desktop-nav-link np-header-font-color"
|
||||
target="_blank"
|
||||
>
|
||||
{{ website_navigation.name }}
|
||||
</a>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</div>{% endcomment %}
|
||||
{% 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 np-header-font-background-color"
|
||||
type="text"
|
||||
name="q"
|
||||
placeholder="{% t .search %}"
|
||||
/>
|
||||
<i class="np-header-search-icon far fa-search"></i>
|
||||
</form>
|
||||
</div>
|
||||
<div class="np-hidden-mobile np-header-avatar">
|
||||
<button
|
||||
class="np-header-avatar-button"
|
||||
data-test="open-desktop-menu"
|
||||
data-toggle-class-on-target="np-hidden"
|
||||
data-toggle-target=".np-header-avatar-tooltip"
|
||||
data-toggle-outside
|
||||
>
|
||||
<img
|
||||
alt="{{ current_person.name }}"
|
||||
class="np-header-avatar-image"
|
||||
src="{{ current_person.avatar_url }}"
|
||||
>
|
||||
</button>
|
||||
<div class="np-header-avatar-tooltip np-hidden" role="tooltip">
|
||||
<span class="np-header-avatar-tooltip-arrow-up"></span>
|
||||
<div class="np-header-avatar-tooltip-learner">
|
||||
<div class="np-header-avatar-tooltip-learner-name">
|
||||
{{ current_person.name }}
|
||||
</div>
|
||||
<div class="np-header-avatar-tooltip-learner-email">
|
||||
{{ current_person.email }}
|
||||
</div>
|
||||
</div>
|
||||
<nav class="np-header-avatar-tooltip-navigation">
|
||||
<a class="np-header-avatar-tooltip-navigation-link" onclick="buildURL(window.location.pathname)" style="cursor:pointer">
|
||||
Default
|
||||
</a>
|
||||
{% unless current_school.sso_active? %}
|
||||
<a
|
||||
class="np-header-avatar-tooltip-navigation-link"
|
||||
href="{% route account %}"
|
||||
>
|
||||
{% t .profile_settings %}
|
||||
</a>
|
||||
{% endunless %}
|
||||
<a
|
||||
class="np-header-avatar-tooltip-navigation-link np-danger"
|
||||
href="{% route logout %}"
|
||||
>
|
||||
{% t .sign_out %}
|
||||
</a>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
{% else %}
|
||||
<a
|
||||
class="np-header-sign-in np-header-desktop-nav-link np-header-font-color"
|
||||
href="{% route login %}"
|
||||
>
|
||||
{% t shared.sign_in %}
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="np-hidden-desktop">
|
||||
<div class="np-header-mobile-menu-content np-hidden">
|
||||
{% if current_person.signed_in? %}
|
||||
<img
|
||||
alt="{{ current_person.name }}"
|
||||
class="np-header-mobile-menu-content-avatar"
|
||||
src="{{ current_person.avatar_url }}"
|
||||
/>
|
||||
<div class="np-header-mobile-menu-content-name">
|
||||
{{ current_person.name }}
|
||||
</div>
|
||||
{% endif %}
|
||||
<div class="np-header-mobile-menu-content-nav">
|
||||
<form
|
||||
class="np-header-search"
|
||||
data-test="mobile-search"
|
||||
method="get"
|
||||
action="{% route search %}"
|
||||
>
|
||||
<input
|
||||
aria-label="{% t .search %}"
|
||||
class="np-header-search-input"
|
||||
type="text"
|
||||
name="q"
|
||||
placeholder="{% t .search %}"
|
||||
/>
|
||||
<i class="np-header-search-icon far fa-search"></i>
|
||||
</form>
|
||||
{% for website_navigation in navigations.header_navigations %}
|
||||
<a
|
||||
href="{{ website_navigation.path }}"
|
||||
class="np-header-mobile-menu-content-button"
|
||||
{% if website_navigation.external? %} target="_blank" {% endif %}
|
||||
>
|
||||
{{ website_navigation.name }}
|
||||
</a>
|
||||
{% endfor %}
|
||||
<div class="np-header-mobile-menu-content-line"></div>
|
||||
{% unless current_school.sso_active? %}
|
||||
<a
|
||||
class="np-header-mobile-menu-content-button"
|
||||
href="{% route account %}"
|
||||
>
|
||||
{% t .profile_settings %}
|
||||
</a>
|
||||
{% endunless %}
|
||||
<a
|
||||
class="np-header-mobile-menu-content-button np-danger"
|
||||
href="{% route logout %}"
|
||||
>
|
||||
{% t .sign_out %}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% include "messages" %}
|
||||
|
||||
<script>
|
||||
if (window.location.pathname === "/app") {
|
||||
const headerTag = document.querySelector(".np-header");
|
||||
headerTag.classList.add("np-header-absolute");
|
||||
}
|
||||
|
||||
$(".np-header-desktop-nav-link[href='https://change_to_mail.com'").attr("href", "mailto:support@northpass.com")
|
||||
</script>
|
||||
|
||||
@ -0,0 +1,80 @@
|
||||
<div class="np-progress-ring-wrapper">
|
||||
<svg
|
||||
class="progress-ring"
|
||||
width="{{ size }}"
|
||||
height="{{ size }}">
|
||||
<circle
|
||||
class="progress-ring__circle circle-{{name}}"
|
||||
stroke="#29ABE2"
|
||||
stroke-width="10"
|
||||
fill="transparent"
|
||||
r="52"
|
||||
cx="60"
|
||||
cy="60"/>
|
||||
<circle
|
||||
class="progress-ring__circle circle-bg"
|
||||
stroke="{{ stroke_color_bg }}"
|
||||
stroke-width="10"
|
||||
fill="transparent"
|
||||
r="52"
|
||||
cx="60"
|
||||
cy="60"/>
|
||||
<text x="50%" y="50%" text-anchor="middle" stroke="t#fff" stroke-width="1px" fill="#323F48" dy=".3em">{{count}}</text>
|
||||
</svg>
|
||||
<h3 class="np-card-content-title np-progress-circle-label">
|
||||
{{name}}
|
||||
</h3>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
document.addEventListener("DOMContentLoaded", function() {
|
||||
var circle = document.getElementsByClassName("circle-{{name}}")[0];
|
||||
var radius = circle.r.baseVal.value;
|
||||
var circumference = radius * 2 * Math.PI;
|
||||
|
||||
circle.style.strokeDasharray = `${circumference} ${circumference}`;
|
||||
circle.style.strokeDashoffset = `${circumference}`;
|
||||
|
||||
function setProgress(percent) {
|
||||
const offset = circumference - percent * circumference;
|
||||
circle.style.strokeDashoffset = offset;
|
||||
}
|
||||
setProgress('{{ count | divided_by: total }}')
|
||||
})
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.np-progress-ring-wrapper {
|
||||
flex: 0;
|
||||
flex-direction: column;
|
||||
display: flex;
|
||||
width: 100%;
|
||||
padding: 1.5rem 1rem 1rem 1rem;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.progress-ring circle { stroke-linecap: round; }
|
||||
.progress-ring text { font-size:2rem; }
|
||||
.progress-ring__circle {
|
||||
transition: stroke-dashoffset 0.35s;
|
||||
transform: rotate(-90deg);
|
||||
transform-origin: center;
|
||||
}
|
||||
|
||||
.np-progress-circle-label {
|
||||
color:#323F48;
|
||||
text-transform: uppercase;
|
||||
opacity:0.35;
|
||||
font-size:0.875rem;
|
||||
margin-top:1rem;
|
||||
}
|
||||
|
||||
@media (min-width:768px) {
|
||||
.np-progress-ring-wrapper { padding: 1.5rem 0.4rem 1rem 0.4rem;}
|
||||
}
|
||||
|
||||
@media (min-width:1170px) {
|
||||
.progress-ring text { font-size:2.5rem; }
|
||||
.np-progress-ring-wrapper { padding: 1.5rem 1rem 1rem 1rem;}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,196 @@
|
||||
<div class="np-homepage-featured np-glossary np-max-width desktop-glossary">
|
||||
<div class="np-homepage-featured-text">
|
||||
<div class="np-homepage-headline">
|
||||
Commonly Used Terms
|
||||
</div>
|
||||
</div>
|
||||
<div class="row np-glossaries col-xs-12" style='margin:0;'>
|
||||
<div class="col-xs-6">
|
||||
<div class="np-accordion">
|
||||
<div class="accordion-btn">
|
||||
<i class="fal fa-plus"></i>
|
||||
<div class="accordion-title"><strong>AD</strong></div>
|
||||
</div>
|
||||
<div class="accordion-panel">
|
||||
<div class="accordion-panel-content">
|
||||
<p>Active Directory is Microsoft's proprietary directory service. It runs on Windows Server and enables administrators to manage permissions and access to network resources.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="np-accordion">
|
||||
<div class="accordion-btn">
|
||||
<i class="fal fa-plus"></i>
|
||||
<div class="accordion-title"><strong>EI</strong></div>
|
||||
</div>
|
||||
<div class="accordion-panel">
|
||||
<div class="accordion-panel-content">
|
||||
<p>Endpoint Insights enables you to access up-to-date information on the users assigned to devices. See all software in use in your environment, no matter how it was installed. Discover what servers and printers are in your environment and who's using them. Quickly see device warranty status and device age.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="np-accordion">
|
||||
<div class="accordion-btn">
|
||||
<i class="fal fa-plus"></i>
|
||||
<div class="accordion-title"><strong>LAPS</strong></div>
|
||||
</div>
|
||||
<div class="accordion-panel">
|
||||
<div class="accordion-panel-content">
|
||||
<p>Local Administrator Password Solution provides management of local account passwords of domain joined computers. Passwords are stored in Active Directory (AD) and protected by ACL, so only eligible users can read it or request its reset.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xs-6">
|
||||
<div class="np-accordion">
|
||||
<div class="accordion-btn">
|
||||
<i class="fal fa-plus"></i>
|
||||
<div class="accordion-title"><strong>RCT</strong></div>
|
||||
</div>
|
||||
<div class="accordion-panel">
|
||||
<div class="accordion-panel-content">
|
||||
<p>Right Click Tools are a collection of individual tools or functions that allow you to take action on a single device, many devices, or entire collections, all via a right-click in the ConfigMgr Console.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="np-accordion">
|
||||
<div class="accordion-btn">
|
||||
<i class="fal fa-plus"></i>
|
||||
<div class="accordion-title"><strong>RMS</strong></div>
|
||||
</div>
|
||||
<div class="accordion-panel">
|
||||
<div class="accordion-panel-content">
|
||||
<p>Recast Management Server is the centralized web interface for Recast Enterprise products, including Right Click Tools, and Endpoint Insights. Hosted on a server of your choice, RMS utilizes an on-premises SQL database to house settings, configurations, logs, etc.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="np-accordion">
|
||||
<div class="accordion-btn">
|
||||
<i class="fal fa-plus"></i>
|
||||
<div class="accordion-title"><strong>SCCM/MECM</strong></div>
|
||||
</div>
|
||||
<div class="accordion-panel">
|
||||
<div class="accordion-panel-content">
|
||||
<p>Microsoft Endpoint Configuration Manager, more commonly known as System Center Configuration Manager, is an integrated solution for managing all of your devices. Microsoft brings together Configuration Manager and Intune, without a complex migration, and with simplified licensing. Continue to leverage your existing Configuration Manager investments, while taking advantage of the power of the Microsoft cloud at your own pace.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="np-homepage-featured np-glossary np-max-width mobile-glossary">
|
||||
<div class="np-homepage-featured-text">
|
||||
<div class="np-homepage-headline">
|
||||
Glossary
|
||||
</div>
|
||||
</div>
|
||||
<div class="np-glossaries col-xs-12" style='margin:0;'>
|
||||
<div class="np-accordion">
|
||||
<div class="accordion-btn">
|
||||
<i class="fal fa-plus"></i>
|
||||
<div class="accordion-title"><strong>AD</strong></div>
|
||||
</div>
|
||||
<div class="accordion-panel">
|
||||
<div class="accordion-panel-content">
|
||||
<p>Active Directory is Microsoft's proprietary directory service. It runs on Windows Server and enables administrators to manage permissions and access to network resources.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="np-accordion">
|
||||
<div class="accordion-btn">
|
||||
<i class="fal fa-plus"></i>
|
||||
<div class="accordion-title"><strong>EI</strong></div>
|
||||
</div>
|
||||
<div class="accordion-panel">
|
||||
<div class="accordion-panel-content">
|
||||
<p>Endpoint Insights enables you to access up-to-date information on the users assigned to devices. See all software in use in your environment, no matter how it was installed. Discover what servers and printers are in your environment and who's using them. Quickly see device warranty status and device age.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="np-accordion">
|
||||
<div class="accordion-btn">
|
||||
<i class="fal fa-plus"></i>
|
||||
<div class="accordion-title"><strong>LAPS</strong></div>
|
||||
</div>
|
||||
<div class="accordion-panel">
|
||||
<div class="accordion-panel-content">
|
||||
<p>Local Administrator Password Solution provides management of local account passwords of domain joined computers. Passwords are stored in Active Directory (AD) and protected by ACL, so only eligible users can read it or request its reset.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="np-accordion">
|
||||
<div class="accordion-btn">
|
||||
<i class="fal fa-plus"></i>
|
||||
<div class="accordion-title"><strong>RCT</strong></div>
|
||||
</div>
|
||||
<div class="accordion-panel">
|
||||
<div class="accordion-panel-content">
|
||||
<p>Right Click Tools are a collection of individual tools or functions that allow you to take action on a single device, many devices, or entire collections, all via a right-click in the ConfigMgr Console.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="np-accordion">
|
||||
<div class="accordion-btn">
|
||||
<i class="fal fa-plus"></i>
|
||||
<div class="accordion-title"><strong>RMS</strong></div>
|
||||
</div>
|
||||
<div class="accordion-panel">
|
||||
<div class="accordion-panel-content">
|
||||
<p>Recast Management Server is the centralized web interface for Recast Enterprise products, including Right Click Tools, and Endpoint Insights. Hosted on a server of your choice, RMS utilizes an on-premises SQL database to house settings, configurations, logs, etc.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="np-accordion">
|
||||
<div class="accordion-btn">
|
||||
<i class="fal fa-plus"></i>
|
||||
<div class="accordion-title"><strong>SCCM/MECM</strong></div>
|
||||
</div>
|
||||
<div class="accordion-panel">
|
||||
<div class="accordion-panel-content">
|
||||
<p>Microsoft Endpoint Configuration Manager, more commonly known as System Center Configuration Manager, is an integrated solution for managing all of your devices. Microsoft brings together Configuration Manager and Intune, without a complex migration, and with simplified licensing. Continue to leverage your existing Configuration Manager investments, while taking advantage of the power of the Microsoft cloud at your own pace.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.clicked {
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
.accordion-panel {
|
||||
border-radius: 0 0 8px 8px;
|
||||
}
|
||||
|
||||
.mobile-glossary{
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media (max-width: 767px){
|
||||
.mobile-glossary{
|
||||
display: block;
|
||||
}
|
||||
|
||||
.desktop-glossary{
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
let accordions = document.getElementsByClassName("accordion-btn");
|
||||
|
||||
for (let i = 0; i < accordions.length; i++) {
|
||||
accordions[i].addEventListener("click", function() {
|
||||
this.querySelector('.fal').classList.toggle("fa-plus");
|
||||
this.querySelector('.fal').classList.toggle("fa-minus");
|
||||
this.classList.toggle("clicked");
|
||||
let panel = this.nextElementSibling;
|
||||
panel.classList.toggle("panel-open");
|
||||
if (panel.style.maxHeight) {
|
||||
panel.style.maxHeight = null;
|
||||
} else {
|
||||
panel.style.maxHeight = panel.scrollHeight + "px";
|
||||
}
|
||||
});
|
||||
}
|
||||
</script>
|
||||
@ -0,0 +1,13 @@
|
||||
<nav class="np-sub-navigation">
|
||||
<div class="np-sub-navigation-content">
|
||||
{% for link in navigations.sub_navigation %}
|
||||
<div class="np-sub-navigation-content-item {{ link.active_class }}">
|
||||
<a class="np-sub-navigation-content-item-link" href="{{ link.url }}">
|
||||
<i class="{{ link.icon }} np-button-color np-sub-navigation-content-item-icon"></i>
|
||||
{{ link.label }}
|
||||
</a>
|
||||
<div class="np-sub-navigation-content-item-bar np-button-background-color"></div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</nav>
|
||||
@ -0,0 +1,88 @@
|
||||
<div class="np-dashboard-resources progress-card" style="padding-bottom: 0;">
|
||||
<div class="np-card" style="display:inline-flex; margin: auto; padding: 0px !important;">
|
||||
<div class="np-card-container np-card-content" style="border-radius: 8px; display: inline-block; height: 12rem; padding-top: 1rem;">
|
||||
{% if courses.enrolled.any? %}
|
||||
{% assign countComplete = 0 %}
|
||||
{% assign countInProgress = 0 %}
|
||||
{% assign countNotStarted = 0 %}
|
||||
{% assign countTotal = 0 | times: 1.0 %}
|
||||
{% for course in courses.enrolled %}
|
||||
{% assign countTotal = countTotal | plus: 1 %}
|
||||
{% if course.progress == 100 %}
|
||||
{% assign countComplete = countComplete | plus: 1 %}
|
||||
{% endif %}
|
||||
{% if course.progress > 0 and course.progress < 100 %}
|
||||
{% assign countInProgress = countInProgress | plus: 1 %}
|
||||
{% endif %}
|
||||
{% if course.progress == 0 %}
|
||||
{% assign countNotStarted = countNotStarted | plus: 1 %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
<ul class="progress-circle-list">
|
||||
<li>
|
||||
{%
|
||||
include "progress_circle",
|
||||
name:'Completed' ,
|
||||
count: countComplete ,
|
||||
total: countTotal,
|
||||
size: "120",
|
||||
stroke_color: "rgba(43, 178, 76, 1)",
|
||||
stroke_color_bg: "rgba(255, 255, 255, 0.15)"
|
||||
%}
|
||||
</li>
|
||||
<li>
|
||||
{%
|
||||
include "progress_circle",
|
||||
name:'In Progress' ,
|
||||
count: countInProgress ,
|
||||
total: countTotal,
|
||||
size: "120",
|
||||
stroke_color: "rgba(43, 178, 76, 1)",
|
||||
stroke_color_bg: "rgba(255, 255, 255, 0.15)"
|
||||
%}
|
||||
</li>
|
||||
</ul>
|
||||
{% else %}
|
||||
{% capture message %}
|
||||
{% t shared.zero_state.courses.index,
|
||||
key: current_school.course_vocabulary
|
||||
%}
|
||||
{% endcapture %}
|
||||
{% include "courses_zero_state", message: message %}
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<style>
|
||||
.progress-circle-list {
|
||||
padding: 0;
|
||||
list-style-type: none !important;
|
||||
justify-content: space-around;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
max-width: 400px;
|
||||
margin: auto;
|
||||
}
|
||||
.progress-card {
|
||||
border-radius: 8px;
|
||||
/* background: #001E2E; */
|
||||
height: 260px;
|
||||
padding: 0;
|
||||
display: inline-flex;
|
||||
}
|
||||
.np-progress-ring-wrapper {
|
||||
padding: 0 0.5rem;
|
||||
}
|
||||
@media screen and (max-width: 1023px) {
|
||||
.progress-card {
|
||||
height: 190px;
|
||||
margin-bottom: 2.187rem;
|
||||
display: flex;
|
||||
}
|
||||
.progress-circle-list {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,23 @@
|
||||
{% include "header" %}
|
||||
{% include "course_version_outdated_alert", courses: courses.in_catalog %}
|
||||
{% comment %}{% include "sub_navigation" %}{% endcomment %}
|
||||
<main class="np-main np-catalog np-subpage-container np-max-width">
|
||||
<div class="np-catalog-header-wrapper">
|
||||
<div class="np-catalog-header">
|
||||
<div class="np-resource-title">{{ catalog.headline }}</div>
|
||||
<div class="np-resource-subtitle">{{ catalog.subheadline }}</div>
|
||||
</div>
|
||||
{% capture label %}{% t shared.filters.by_category %}{% endcapture %}
|
||||
|
||||
{% if courses.in_catalog.any? %}
|
||||
{%
|
||||
include "filter_dropdown",
|
||||
filters: courses.filters,
|
||||
key: "category_uuid",
|
||||
label: label
|
||||
%}
|
||||
{% endif %}
|
||||
</div>
|
||||
{% include "courses_catalog" %}
|
||||
</main>
|
||||
{% include "footer" %}
|
||||
@ -0,0 +1,20 @@
|
||||
{% if course.properties.skip_course_cover_page %}
|
||||
{% if course.enrolled? %}
|
||||
<script>window.location.replace('{% route course_viewer, course_id: course.id, learning_path_id: params.learning_path_id %}')</script>
|
||||
{% else %}
|
||||
<script>window.location.replace('{% route course_enrollment, code: course.enrollment_code %}')</script>
|
||||
{% endif %}
|
||||
|
||||
{% else %}
|
||||
|
||||
{% include "header" %}
|
||||
<main class="np-main np-max-width np-page-container">
|
||||
<div class="np-hidden-mobile" id="course-desktop">
|
||||
{% include "course_desktop_view" %}
|
||||
</div>
|
||||
<div class="np-hidden-desktop" id="course-mobile">
|
||||
{% include "course_mobile_view" %}
|
||||
</div>
|
||||
</main>
|
||||
{% include "footer" %}
|
||||
{% endif %}
|
||||
@ -0,0 +1,29 @@
|
||||
{% include "header" %}
|
||||
{% include "course_version_outdated_alert", courses: courses.enrolled %}
|
||||
{% comment %}{% include "sub_navigation" %}{% endcomment %}
|
||||
<main class="np-main np-dashboard np-subpage-container np-max-width">
|
||||
<div class="np-dashboard-header">
|
||||
<div class="np-resource-title">Hi {{current_person.first_name}}! 👋</div>
|
||||
<div class="np-resource-subtitle">This is what's relevant to you right now in Recast Academy.</div>
|
||||
</div>
|
||||
|
||||
<div class="row np-flex-center">
|
||||
<div class="col-xs-12 col-md-8">
|
||||
{% if features.learning_paths? %}
|
||||
<div class="np-dashboard-resources-title">
|
||||
{% t shared.learning_paths %}
|
||||
</div>
|
||||
{% include "learning_paths_index", items: learning_paths.enrolled %}
|
||||
{% endif %}
|
||||
<div class="np-dashboard-resources-title">
|
||||
{% t shared.course_vocabulary.plural, key: current_school.course_vocabulary %}
|
||||
</div>
|
||||
{% include "courses_index", class: "col-xs-12 col-sm-6 np-stretch-content" %}
|
||||
</div>
|
||||
<div class="np-grid-spacing col-xs-12 col-md-4 progress-section">
|
||||
<div class="np-dashboard-resources-title">Course Progress</div>
|
||||
{% include "widget_course_progress" %}
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
{% include "footer" %}
|
||||
@ -0,0 +1,210 @@
|
||||
{% include "header" %}
|
||||
{% if current_person.signed_in? %}
|
||||
{% include "course_version_outdated_alert", courses: courses.featured %}
|
||||
{% endif %}
|
||||
<main class="np-main np-homepage">
|
||||
<div class="np-homepage-hero">
|
||||
<img class="np-homepage-hero-image"
|
||||
src="{{ homepage.artwork_url }}"
|
||||
alt="{{ homepage.headline }}"
|
||||
/>
|
||||
<div class="np-homepage-hero-content">
|
||||
<div class="np-homepage-headline np-header-font-color">
|
||||
{{ homepage.headline }}
|
||||
</div>
|
||||
<div class="np-homepage-subheadline np-header-font-color">
|
||||
{{ homepage.subheadline }}
|
||||
</div>
|
||||
<a class="np-homepage-hero-cta np-button" href="{% route catalog %}">
|
||||
{% t .discover %}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
{% comment %}{% include "sub_navigation" %}{% endcomment %}
|
||||
<div class="np-homepage-featured np-max-width">
|
||||
<div class="np-homepage-featured-text">
|
||||
<div class="np-homepage-headline">
|
||||
{{ homepage.featured_courses_headline }}
|
||||
</div>
|
||||
<div class="np-homepage-subheadline">
|
||||
{{ homepage.featured_courses_subheadline }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% if courses.featured.any? %}
|
||||
<div class="np-homepage-featured-courses row">
|
||||
{% for course in courses.featured %}
|
||||
<div class="col-xs-12 col-md-6 col-lg-4 np-stretch-content">
|
||||
{% include "cards_featured_course" with course %}
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% else %}
|
||||
<div class="np-homepage-featured-empty">
|
||||
<div class="np-zero-state-text">
|
||||
{% t .empty, key: current_school.course_vocabulary %}
|
||||
</div>
|
||||
<img
|
||||
class="np-zero-state-courses"
|
||||
alt="{% t .empty, key: current_school.course_vocabulary %}"
|
||||
/>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<div class="col-xs-12" style="display: flex; flex-wrap: wrap; margin-top: 3rem;">
|
||||
<div class="col-xs-12 col-lg-6" style="text-align: center;">
|
||||
<div class="np-homepage-headline">
|
||||
Recast Blog Feed
|
||||
</div>
|
||||
<script src="https://apps.elfsight.com/p/platform.js" defer></script>
|
||||
<!-- <div id='recast-resource-embed-container'>
|
||||
<iframe id='recast-resource-embed' src="https://www.recastsoftware.com/resources/" scrolling="auto"></iframe>
|
||||
</div> -->
|
||||
<div class="elfsight-app-e9e07ce5-cf47-4b0b-a053-689ee3d0d54a" style="padding-top: 2.5%;"></div>
|
||||
</div>
|
||||
{% if current_person.signed_in? %}
|
||||
<div class="col-xs-12 col-lg-6" style="text-align: center;">
|
||||
<div class="np-homepage-headline">
|
||||
Upcoming Events
|
||||
</div>
|
||||
{% comment %}{% if training_events.available.any? %}
|
||||
{% assign limiter = 0 %}
|
||||
<div class="row row-with-thumbnails">
|
||||
{% for training_event in training_events.available %}
|
||||
{% if limiter < 2 %}
|
||||
<div class="col-xs-12 np-stretch-content homepage-event-cards">
|
||||
{% include "cards_training_event" with training_event %}
|
||||
</div>
|
||||
|
||||
{% assign limiter = limiter | plus: 1 %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% else %}
|
||||
{% include "training_events_zero_state" %}
|
||||
{% endif %}{% endcomment %}
|
||||
|
||||
{% if training_events.available.any? %}
|
||||
{%
|
||||
include "carousel_featured_events",
|
||||
items: training_events.available,
|
||||
%}
|
||||
{% else %}
|
||||
<div style="margin-bottom:3rem;">
|
||||
{% include "training_events_zero_state" %}
|
||||
</div>
|
||||
|
||||
{% endif %}
|
||||
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
{% include "section_glossary" %}
|
||||
</div>
|
||||
</main>
|
||||
{% include "footer" %}
|
||||
<script>
|
||||
let checkIfNodeAvailable = () => {
|
||||
let config = {
|
||||
attributes: true,
|
||||
childList: true,
|
||||
subtree: true
|
||||
};
|
||||
|
||||
function callback(mutationList, observer){
|
||||
let url = window.location.href;
|
||||
let rssWidgetMarker = document.querySelector('#eapps-rss-feed-e9e07ce5-cf47-4b0b-a053-689ee3d0d54a > div > a');
|
||||
|
||||
if(url == 'https://recastsoftware.northpass.com/app' && rssWidgetMarker != null){
|
||||
manipulateElement(rssWidgetMarker);
|
||||
}
|
||||
}
|
||||
|
||||
function manipulateElement(someNode){
|
||||
console.log('MUTATION OBSERVER ACTIVE; ELEMENT FOUND')
|
||||
someNode.style.display = 'none';
|
||||
}
|
||||
|
||||
let observer = new MutationObserver(callback)
|
||||
|
||||
observer.observe(document, config);
|
||||
}
|
||||
checkIfNodeAvailable();
|
||||
|
||||
|
||||
let iframeMutationObserver = () => {
|
||||
// console.log('EMBED MUTATION OBSERVER CALLED')
|
||||
let config = {
|
||||
attributes: true,
|
||||
childList: true,
|
||||
subtree: true
|
||||
};
|
||||
|
||||
let embedManipulation = (iFrame) => {
|
||||
console.log('embedManipulation Invoked')
|
||||
|
||||
iFrame.contentWindow.postMessage({}, '*');
|
||||
let iFrameDoc = iFrame.contentWindow.document;
|
||||
|
||||
if(iFrameDoc != null){
|
||||
console.log('iFRAME CONTENT DETECTED');
|
||||
console.log(iFrameDoc);
|
||||
|
||||
let embedHeader = iFrameDoc.querySelector('.headerwrap');
|
||||
let embedHero = iFrameDoc.querySelector('.simplehero');
|
||||
let embedContent1 = iFrameDoc.querySelector('.fullcontent');
|
||||
let embedContent2 = iFrameDoc.querySelector('.collectionsslider');
|
||||
let embedFooter = iFrameDoc.querySelector('#colophon');
|
||||
|
||||
let embedResources = iFrameDoc.querySelector('.resourcesposts');
|
||||
|
||||
let allEmbedElements = [embedResources,embedHeader, embedHero, embedContent1, embedContent2, embedFooter]
|
||||
|
||||
console.log(allEmbedElements);
|
||||
|
||||
for(let i = 0; i < allEmbedElements; i++){
|
||||
if(allEmbedElements[i] === null){
|
||||
embedHeader = iFrameDoc.querySelector('.headerwrap');
|
||||
embedHero = iFrameDoc.querySelector('.simplehero');
|
||||
embedContent1 = iFrameDoc.querySelector('.fullcontent');
|
||||
embedContent2 = iFrameDoc.querySelector('.collectionsslider');
|
||||
embedFooter = iFrameDoc.querySelector('#colophon');
|
||||
|
||||
embedResources = iFrameDoc.querySelector('.resourcesposts');
|
||||
i = 0;
|
||||
console.log(allEmbedElements);
|
||||
} else {
|
||||
i === 0 ? allEmebedElements[i].style.marginTop = '0' : allEmbedElements[i].style.display = 'none';
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
new MutationObserver(() => {
|
||||
// console.log('SEARCHING FOR IFRAME')
|
||||
let iFrame = document.querySelector('#recast-resource-embed');
|
||||
iFrame.contentWindow.postMessage({}, '*')
|
||||
|
||||
if(iFrame !== null){
|
||||
console.log('EMBED DETECTED')
|
||||
embedManipulation(iFrame);
|
||||
}
|
||||
}).observe(document, config);
|
||||
}
|
||||
iframeMutationObserver();
|
||||
|
||||
</script>
|
||||
<style>
|
||||
#recast-resource-embed-container{
|
||||
width: 100%;
|
||||
height: 22.25rem;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
#recast-resource-embed{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: asbolute;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,14 @@
|
||||
{% include "header" %}
|
||||
{% comment %}{% include "sub_navigation" %}{% endcomment %}
|
||||
<main class="np-main np-learning-paths np-subpage-container np-max-width">
|
||||
<div class="np-learning-paths-main">
|
||||
<div class="np-resource-title">
|
||||
{% t shared.learning_paths %}
|
||||
</div>
|
||||
<div class="np-resource-subtitle">
|
||||
{% t .subtitle %}
|
||||
</div>
|
||||
{% include "learning_paths_index", items: learning_paths.available %}
|
||||
</div>
|
||||
</main>
|
||||
{% include "footer" %}
|
||||
@ -0,0 +1,514 @@
|
||||
{% for group in current_person.groups %}
|
||||
{% if group.id == "29ae12e6-f740-4190-a5c2-a7e12e87926f" or group.id == "aa36069f-e354-4dbe-9972-9ce70ad146d7" or group.id == "8cd6ec9c-101e-4b1a-82c7-77dac583a1f5" %}
|
||||
<script>
|
||||
window.location.replace('/app');
|
||||
</script>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
|
||||
<body>
|
||||
{% include "header" %}
|
||||
<main class="np-main np-box-container">
|
||||
<div class="np-box">
|
||||
<div class="np-box-content-container">
|
||||
<form id="register-form" class="np-form np-box-content" novalidate>
|
||||
<div class="np-form-title"> Welcome! </div>
|
||||
<div class="np-form-subtitle"> We need a little more information to tailor the best courses to your role </div>
|
||||
{% form_authenticity_token %}
|
||||
<div class="np-form-field">
|
||||
<label class="np-input-label" for="learner_company">
|
||||
</label>
|
||||
<input
|
||||
class="np-input"
|
||||
type="text"
|
||||
name="learner[company]"
|
||||
id="learner_company"
|
||||
placeholder="Company Name"
|
||||
required
|
||||
>
|
||||
</div>
|
||||
<div class="np-form-field">
|
||||
<label class="np-input-label" for="learner_country">
|
||||
</label>
|
||||
<select
|
||||
class="np-input"
|
||||
type="text"
|
||||
name="learner[country]"
|
||||
id="learner_country"
|
||||
required
|
||||
>
|
||||
<option class="default-option" disabled selected id="default-option">Your Country</option>
|
||||
<option class="selection-option" value="Afghanistan">Afghanistan</option>
|
||||
<option class="selection-option" value="Åland Islands">Åland Islands</option>
|
||||
<option value="Albania">Albania</option>
|
||||
<option value="Algeria">Algeria</option>
|
||||
<option value="American Samoa">American Samoa</option>
|
||||
<option value="Andorra">Andorra</option>
|
||||
<option value="Angola">Angola</option>
|
||||
<option value="Anguilla">Anguilla</option>
|
||||
<option value="Antarctica">Antarctica</option>
|
||||
<option value="Antigua and Barbuda">Antigua and Barbuda</option>
|
||||
<option value="Argentina">Argentina</option>
|
||||
<option value="Armenia">Armenia</option>
|
||||
<option value="Aruba">Aruba</option>
|
||||
<option value="Australia">Australia</option>
|
||||
<option value="Austria">Austria</option>
|
||||
<option value="Azerbaijan">Azerbaijan</option>
|
||||
<option value="Bahamas">Bahamas</option>
|
||||
<option value="Bahrain">Bahrain</option>
|
||||
<option value="Bangladesh">Bangladesh</option>
|
||||
<option value="Barbados">Barbados</option>
|
||||
<option value="Belarus">Belarus</option>
|
||||
<option value="Belgium">Belgium</option>
|
||||
<option value="Belize">Belize</option>
|
||||
<option value="Benin">Benin</option>
|
||||
<option value="Bermuda">Bermuda</option>
|
||||
<option value="Bhutan">Bhutan</option>
|
||||
<option value="Bolivia">Bolivia</option>
|
||||
<option value="Bosnia and Herzegovina">Bosnia and Herzegovina</option>
|
||||
<option value="Botswana">Botswana</option>
|
||||
<option value="Bouvet Island">Bouvet Island</option>
|
||||
<option value="Brazil">Brazil</option>
|
||||
<option value="British Indian Ocean Territory">British Indian Ocean Territory</option>
|
||||
<option value="Brunei Darussalam">Brunei Darussalam</option>
|
||||
<option value="Bulgaria">Bulgaria</option>
|
||||
<option value="Burkina Faso">Burkina Faso</option>
|
||||
<option value="Burundi">Burundi</option>
|
||||
<option value="Cambodia">Cambodia</option>
|
||||
<option value="Cameroon">Cameroon</option>
|
||||
<option value="Canada">Canada</option>
|
||||
<option value="Cape Verde">Cape Verde</option>
|
||||
<option value="Cayman Islands">Cayman Islands</option>
|
||||
<option value="Central African Republic">Central African Republic</option>
|
||||
<option value="Chad">Chad</option>
|
||||
<option value="Chile">Chile</option>
|
||||
<option value="China">China</option>
|
||||
<option value="Christmas Island">Christmas Island</option>
|
||||
<option value="Cocos (Keeling) Islands">Cocos (Keeling) Islands</option>
|
||||
<option value="Colombia">Colombia</option>
|
||||
<option value="Comoros">Comoros</option>
|
||||
<option value="Congo">Congo</option>
|
||||
<option value="Congo, The Democratic Republic of The">Congo, The Democratic Republic of The</option>
|
||||
<option value="Cook Islands">Cook Islands</option>
|
||||
<option value="Costa Rica">Costa Rica</option>
|
||||
<option value="Cote D'ivoire">Cote D'ivoire</option>
|
||||
<option value="Croatia">Croatia</option>
|
||||
<option value="Cuba">Cuba</option>
|
||||
<option value="Cyprus">Cyprus</option>
|
||||
<option value="Czech Republic">Czech Republic</option>
|
||||
<option value="Denmark">Denmark</option>
|
||||
<option value="Djibouti">Djibouti</option>
|
||||
<option value="Dominica">Dominica</option>
|
||||
<option value="Dominican Republic">Dominican Republic</option>
|
||||
<option value="Ecuador">Ecuador</option>
|
||||
<option value="Egypt">Egypt</option>
|
||||
<option value="El Salvador">El Salvador</option>
|
||||
<option value="Equatorial Guinea">Equatorial Guinea</option>
|
||||
<option value="Eritrea">Eritrea</option>
|
||||
<option value="Estonia">Estonia</option>
|
||||
<option value="Ethiopia">Ethiopia</option>
|
||||
<option value="Falkland Islands (Malvinas)">Falkland Islands (Malvinas)</option>
|
||||
<option value="Faroe Islands">Faroe Islands</option>
|
||||
<option value="Fiji">Fiji</option>
|
||||
<option value="Finland">Finland</option>
|
||||
<option value="France">France</option>
|
||||
<option value="French Guiana">French Guiana</option>
|
||||
<option value="French Polynesia">French Polynesia</option>
|
||||
<option value="French Southern Territories">French Southern Territories</option>
|
||||
<option value="Gabon">Gabon</option>
|
||||
<option value="Gambia">Gambia</option>
|
||||
<option value="Georgia">Georgia</option>
|
||||
<option value="Germany">Germany</option>
|
||||
<option value="Ghana">Ghana</option>
|
||||
<option value="Gibraltar">Gibraltar</option>
|
||||
<option value="Greece">Greece</option>
|
||||
<option value="Greenland">Greenland</option>
|
||||
<option value="Grenada">Grenada</option>
|
||||
<option value="Guadeloupe">Guadeloupe</option>
|
||||
<option value="Guam">Guam</option>
|
||||
<option value="Guatemala">Guatemala</option>
|
||||
<option value="Guernsey">Guernsey</option>
|
||||
<option value="Guinea">Guinea</option>
|
||||
<option value="Guinea-bissau">Guinea-bissau</option>
|
||||
<option value="Guyana">Guyana</option>
|
||||
<option value="Haiti">Haiti</option>
|
||||
<option value="Heard Island and Mcdonald Islands">Heard Island and Mcdonald Islands</option>
|
||||
<option value="Holy See (Vatican City State)">Holy See (Vatican City State)</option>
|
||||
<option value="Honduras">Honduras</option>
|
||||
<option value="Hong Kong">Hong Kong</option>
|
||||
<option value="Hungary">Hungary</option>
|
||||
<option value="Iceland">Iceland</option>
|
||||
<option value="India">India</option>
|
||||
<option value="Indonesia">Indonesia</option>
|
||||
<option value="Iran, Islamic Republic of">Iran, Islamic Republic of</option>
|
||||
<option value="Iraq">Iraq</option>
|
||||
<option value="Ireland">Ireland</option>
|
||||
<option value="Isle of Man">Isle of Man</option>
|
||||
<option value="Israel">Israel</option>
|
||||
<option value="Italy">Italy</option>
|
||||
<option value="Jamaica">Jamaica</option>
|
||||
<option value="Japan">Japan</option>
|
||||
<option value="Jersey">Jersey</option>
|
||||
<option value="Jordan">Jordan</option>
|
||||
<option value="Kazakhstan">Kazakhstan</option>
|
||||
<option value="Kenya">Kenya</option>
|
||||
<option value="Kiribati">Kiribati</option>
|
||||
<option value="Korea, Democratic People's Republic of">Korea, Democratic People's Republic of</option>
|
||||
<option value="Korea, Republic of">Korea, Republic of</option>
|
||||
<option value="Kuwait">Kuwait</option>
|
||||
<option value="Kyrgyzstan">Kyrgyzstan</option>
|
||||
<option value="Lao People's Democratic Republic">Lao People's Democratic Republic</option>
|
||||
<option value="Latvia">Latvia</option>
|
||||
<option value="Lebanon">Lebanon</option>
|
||||
<option value="Lesotho">Lesotho</option>
|
||||
<option value="Liberia">Liberia</option>
|
||||
<option value="Libyan Arab Jamahiriya">Libyan Arab Jamahiriya</option>
|
||||
<option value="Liechtenstein">Liechtenstein</option>
|
||||
<option value="Lithuania">Lithuania</option>
|
||||
<option value="Luxembourg">Luxembourg</option>
|
||||
<option value="Macao">Macao</option>
|
||||
<option value="Macedonia, The Former Yugoslav Republic of">Macedonia, The Former Yugoslav Republic of</option>
|
||||
<option value="Madagascar">Madagascar</option>
|
||||
<option value="Malawi">Malawi</option>
|
||||
<option value="Malaysia">Malaysia</option>
|
||||
<option value="Maldives">Maldives</option>
|
||||
<option value="Mali">Mali</option>
|
||||
<option value="Malta">Malta</option>
|
||||
<option value="Marshall Islands">Marshall Islands</option>
|
||||
<option value="Martinique">Martinique</option>
|
||||
<option value="Mauritania">Mauritania</option>
|
||||
<option value="Mauritius">Mauritius</option>
|
||||
<option value="Mayotte">Mayotte</option>
|
||||
<option value="Mexico">Mexico</option>
|
||||
<option value="Micronesia, Federated States of">Micronesia, Federated States of</option>
|
||||
<option value="Moldova, Republic of">Moldova, Republic of</option>
|
||||
<option value="Monaco">Monaco</option>
|
||||
<option value="Mongolia">Mongolia</option>
|
||||
<option value="Montenegro">Montenegro</option>
|
||||
<option value="Montserrat">Montserrat</option>
|
||||
<option value="Morocco">Morocco</option>
|
||||
<option value="Mozambique">Mozambique</option>
|
||||
<option value="Myanmar">Myanmar</option>
|
||||
<option value="Namibia">Namibia</option>
|
||||
<option value="Nauru">Nauru</option>
|
||||
<option value="Nepal">Nepal</option>
|
||||
<option value="Netherlands">Netherlands</option>
|
||||
<option value="Netherlands Antilles">Netherlands Antilles</option>
|
||||
<option value="New Caledonia">New Caledonia</option>
|
||||
<option value="New Zealand">New Zealand</option>
|
||||
<option value="Nicaragua">Nicaragua</option>
|
||||
<option value="Niger">Niger</option>
|
||||
<option value="Nigeria">Nigeria</option>
|
||||
<option value="Niue">Niue</option>
|
||||
<option value="Norfolk Island">Norfolk Island</option>
|
||||
<option value="Northern Mariana Islands">Northern Mariana Islands</option>
|
||||
<option value="Norway">Norway</option>
|
||||
<option value="Oman">Oman</option>
|
||||
<option value="Pakistan">Pakistan</option>
|
||||
<option value="Palau">Palau</option>
|
||||
<option value="Palestinian Territory, Occupied">Palestinian Territory, Occupied</option>
|
||||
<option value="Panama">Panama</option>
|
||||
<option value="Papua New Guinea">Papua New Guinea</option>
|
||||
<option value="Paraguay">Paraguay</option>
|
||||
<option value="Peru">Peru</option>
|
||||
<option value="Philippines">Philippines</option>
|
||||
<option value="Pitcairn">Pitcairn</option>
|
||||
<option value="Poland">Poland</option>
|
||||
<option value="Portugal">Portugal</option>
|
||||
<option value="Puerto Rico">Puerto Rico</option>
|
||||
<option value="Qatar">Qatar</option>
|
||||
<option value="Reunion">Reunion</option>
|
||||
<option value="Romania">Romania</option>
|
||||
<option value="Russian Federation">Russian Federation</option>
|
||||
<option value="Rwanda">Rwanda</option>
|
||||
<option value="Saint Helena">Saint Helena</option>
|
||||
<option value="Saint Kitts and Nevis">Saint Kitts and Nevis</option>
|
||||
<option value="Saint Lucia">Saint Lucia</option>
|
||||
<option value="Saint Pierre and Miquelon">Saint Pierre and Miquelon</option>
|
||||
<option value="Saint Vincent and The Grenadines">Saint Vincent and The Grenadines</option>
|
||||
<option value="Samoa">Samoa</option>
|
||||
<option value="San Marino">San Marino</option>
|
||||
<option value="Sao Tome and Principe">Sao Tome and Principe</option>
|
||||
<option value="Saudi Arabia">Saudi Arabia</option>
|
||||
<option value="Senegal">Senegal</option>
|
||||
<option value="Serbia">Serbia</option>
|
||||
<option value="Seychelles">Seychelles</option>
|
||||
<option value="Sierra Leone">Sierra Leone</option>
|
||||
<option value="Singapore">Singapore</option>
|
||||
<option value="Slovakia">Slovakia</option>
|
||||
<option value="Slovenia">Slovenia</option>
|
||||
<option value="Solomon Islands">Solomon Islands</option>
|
||||
<option value="Somalia">Somalia</option>
|
||||
<option value="South Africa">South Africa</option>
|
||||
<option value="South Georgia and The South Sandwich Islands">South Georgia and The South Sandwich Islands</option>
|
||||
<option value="Spain">Spain</option>
|
||||
<option value="Sri Lanka">Sri Lanka</option>
|
||||
<option value="Sudan">Sudan</option>
|
||||
<option value="Suriname">Suriname</option>
|
||||
<option value="Svalbard and Jan Mayen">Svalbard and Jan Mayen</option>
|
||||
<option value="Swaziland">Swaziland</option>
|
||||
<option value="Sweden">Sweden</option>
|
||||
<option value="Switzerland">Switzerland</option>
|
||||
<option value="Syrian Arab Republic">Syrian Arab Republic</option>
|
||||
<option value="Taiwan">Taiwan</option>
|
||||
<option value="Tajikistan">Tajikistan</option>
|
||||
<option value="Tanzania, United Republic of">Tanzania, United Republic of</option>
|
||||
<option value="Thailand">Thailand</option>
|
||||
<option value="Timor-leste">Timor-leste</option>
|
||||
<option value="Togo">Togo</option>
|
||||
<option value="Tokelau">Tokelau</option>
|
||||
<option value="Tonga">Tonga</option>
|
||||
<option value="Trinidad and Tobago">Trinidad and Tobago</option>
|
||||
<option value="Tunisia">Tunisia</option>
|
||||
<option value="Turkey">Turkey</option>
|
||||
<option value="Turkmenistan">Turkmenistan</option>
|
||||
<option value="Turks and Caicos Islands">Turks and Caicos Islands</option>
|
||||
<option value="Tuvalu">Tuvalu</option>
|
||||
<option value="Uganda">Uganda</option>
|
||||
<option value="Ukraine">Ukraine</option>
|
||||
<option value="United Arab Emirates">United Arab Emirates</option>
|
||||
<option value="United Kingdom">United Kingdom</option>
|
||||
<option value="United States">United States</option>
|
||||
<option value="United States Minor Outlying Islands">United States Minor Outlying Islands</option>
|
||||
<option value="Uruguay">Uruguay</option>
|
||||
<option value="Uzbekistan">Uzbekistan</option>
|
||||
<option value="Vanuatu">Vanuatu</option>
|
||||
<option value="Venezuela">Venezuela</option>
|
||||
<option value="Viet Nam">Viet Nam</option>
|
||||
<option value="Virgin Islands, British">Virgin Islands, British</option>
|
||||
<option value="Virgin Islands, U.S.">Virgin Islands, U.S.</option>
|
||||
<option value="Wallis and Futuna">Wallis and Futuna</option>
|
||||
<option value="Western Sahara">Western Sahara</option>
|
||||
<option value="Yemen">Yemen</option>
|
||||
<option value="Zambia">Zambia</option>
|
||||
<option value="Zimbabwe">Zimbabwe</option>
|
||||
</select>
|
||||
</div>
|
||||
</form>
|
||||
<button id="send_button" onclick="SendInfos()" class="np-button np-button-big np-button-large-font np-form-action">
|
||||
Update Information
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
{% include "footer" %}
|
||||
</body>
|
||||
|
||||
<style>
|
||||
@media (min-width: 1440px) {
|
||||
#password-too-short-alert {
|
||||
position: absolute;
|
||||
right: 25.5%;
|
||||
bottom: 23%;
|
||||
color: salmon;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
#passwords-dont-match-alert {
|
||||
position: absolute;
|
||||
right: 23%;
|
||||
bottom: 14.5%;
|
||||
color: salmon;
|
||||
font-size: 13px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 769px) and (max-width: 1024px) {
|
||||
#password-too-short-alert {
|
||||
position: absolute;
|
||||
right: 24%;
|
||||
bottom: 23%;
|
||||
color: salmon;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
#passwords-dont-match-alert {
|
||||
position: absolute;
|
||||
right: 21.5%;
|
||||
bottom: 14.5%;
|
||||
color: salmon;
|
||||
font-size: 13px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 426px) and (max-width: 768px) {
|
||||
.np-box-content-container {
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 376px) and (max-width: 425px) {
|
||||
.np-input {
|
||||
padding: 0 0.75rem;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@media (min-width: 326px) and (max-width: 375px) {
|
||||
.np-input {
|
||||
padding: 0 0.75rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 325px) {
|
||||
.np-input {
|
||||
padding: 0 0.75rem;
|
||||
}
|
||||
}
|
||||
|
||||
.np-main {
|
||||
margin: 25px 0;
|
||||
}
|
||||
.np-box {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
width: unset !important;
|
||||
box-shadow: none;
|
||||
}
|
||||
.np-box-container {
|
||||
height: unset !important;
|
||||
background: none;
|
||||
}
|
||||
.hero-image-left-desktop {
|
||||
width: 60%;
|
||||
}
|
||||
.hero-image-left-mobile {
|
||||
width: 100%;
|
||||
display: none;
|
||||
}
|
||||
.np-box-content-container {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
padding: 2rem 0 2rem 2.25rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.np-form-subtitle {
|
||||
margin-bottom: 1.25rem;
|
||||
}
|
||||
.np-input {
|
||||
background-color: #FFF6F0;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.np-input::placeholder {
|
||||
color: #6F7277;
|
||||
font-size: 16px;
|
||||
}
|
||||
#default-option {
|
||||
color: #6F7277;
|
||||
font-size: 16px;
|
||||
}
|
||||
.selection-option {
|
||||
font-family: Inter;
|
||||
}
|
||||
.body {
|
||||
height: 100%;
|
||||
}
|
||||
#learner_role {
|
||||
color: #1B1C1D;
|
||||
text-align: left;
|
||||
}
|
||||
@media only screen and (min-width: 1190px) {
|
||||
.hero-image-left-desktop {
|
||||
min-width: 60%;
|
||||
}
|
||||
.np-box-content-container {
|
||||
margin-right: 40px;
|
||||
}
|
||||
}
|
||||
@media only screen and (max-width: 768px) {
|
||||
.np-box-content-container {
|
||||
padding: 2rem 2rem 2.25rem;
|
||||
}
|
||||
.hero-image-left-desktop {
|
||||
display: none;
|
||||
}
|
||||
.hero-image-left-mobile {
|
||||
display: block;
|
||||
}
|
||||
.np-box {
|
||||
flex-direction: column;
|
||||
margin: 0;
|
||||
}
|
||||
.np-main {
|
||||
margin: 0;
|
||||
}
|
||||
.np-box-content-container {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
#send_button {
|
||||
pointer-events: none;
|
||||
background: #6F7277;
|
||||
}
|
||||
|
||||
.loader {
|
||||
border: 16px solid #f3f3f3;
|
||||
border-radius: 50%;
|
||||
border-top: 16px solid #00bf8f;
|
||||
border-bottom: 16px solid #00bf8f;
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
-webkit-animation: spin 2s linear infinite;
|
||||
animation: spin 2s linear infinite;
|
||||
|
||||
|
||||
position: absolute;
|
||||
top:0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
@-webkit-keyframes spin {
|
||||
0% { -webkit-transform: rotate(0deg); }
|
||||
100% { -webkit-transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
0% { transform: rotate(0deg); }
|
||||
100% { transform: rotate(360deg); }
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
|
||||
function checkIfInputsExist (){
|
||||
window.setTimeout(function(){
|
||||
if ($("#learner_company")[0].value.length > 0 && $("#learner_country")[0].value != "Your Country") {
|
||||
$("#send_button").css("background-color","#005cb9");
|
||||
$("#send_button").css("pointer-events","auto");
|
||||
}
|
||||
else {
|
||||
$("#send_button").css("background-color","#6F7277");
|
||||
$("#send_button").css("pointer-events","none");
|
||||
}
|
||||
}, 500)
|
||||
}
|
||||
document.addEventListener('keydown', checkIfInputsExist);
|
||||
document.getElementById("learner_country").addEventListener('change', checkIfInputsExist);
|
||||
|
||||
|
||||
function SendInfos() {
|
||||
var xhr = new XMLHttpRequest();
|
||||
url = "https://www.workato.com/webhooks/rest/504ccf22-b03b-40b4-b8f6-8ff40a2f7d71/recast-academy-colleting-information-while-signing-in"
|
||||
xhr.addEventListener("load", e => {
|
||||
window.sessionStorage.propertiesAdded = 'true';
|
||||
window.location.replace('/app');
|
||||
});
|
||||
xhr.open("POST", url, true);
|
||||
xhr.send(JSON.stringify({
|
||||
user_id: '{{ current_person.id }}',
|
||||
company: $("#learner_company")[0].value,
|
||||
country: $("#learner_country")[0].value
|
||||
}));
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.np-box-container {
|
||||
background: none;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,253 @@
|
||||
/*
|
||||
Put your custom overlay styles in here
|
||||
You can use your northpass color palette in this file
|
||||
|
||||
{{ color_palette.button_font_color }}
|
||||
{{ color_palette.button_color }}
|
||||
{{ color_palette.button_hover_color }}
|
||||
{{ color_palette.header_font_color }}
|
||||
{{ color_palette.header_font_hover_color }}
|
||||
{{ color_palette.header_color }}
|
||||
*/
|
||||
|
||||
@font-face {
|
||||
font-family: "archia-regular";
|
||||
src: url("https://s3.amazonaws.com/static.northpass.com/recast/Archia-Regular.otf") format("opentype");
|
||||
}
|
||||
|
||||
main,
|
||||
body{
|
||||
font-family: "archia-regular", serif;
|
||||
}
|
||||
|
||||
|
||||
/* Global */
|
||||
.np-button{
|
||||
background: #29ABE2;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.np-button:hover{
|
||||
background: #FFFFFF !important;
|
||||
color: #29ABE2;
|
||||
border: 1px solid #29ABE2;
|
||||
}
|
||||
/* ----------------------------------------------------------------------------------------------------------------------- */
|
||||
/* Header */
|
||||
/* Header: Subnav */
|
||||
.np-sub-navigation{
|
||||
background: transparent;
|
||||
margin-bottom: 0;
|
||||
margin-top: 1.25rem;
|
||||
}
|
||||
|
||||
.np-sub-navigation-content-item-icon,
|
||||
.np-sub-navigation-content-item-link,
|
||||
.np-sub-navigation-content-item-active .np-sub-navigation-content-item-link,
|
||||
.np-button, .np-button-background-color,
|
||||
.sub-navigation-content-item-bar{
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
@media (min-width: 768px){
|
||||
.np-header-logo,
|
||||
.np-header-search{
|
||||
flex-grow: 0.5;
|
||||
}
|
||||
|
||||
.np-header-logo-image{
|
||||
height: 2.5rem;
|
||||
}
|
||||
|
||||
.np-header-avatar-image{
|
||||
height: 3.5rem;
|
||||
width: 3.5rem;
|
||||
}
|
||||
|
||||
.np-header-content .desktop-subnav{
|
||||
margin: 0 5%;
|
||||
}
|
||||
|
||||
.np-sub-navigation-content-item{
|
||||
margin: 0 0.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 900px){
|
||||
.np-sub-navigation-content-item{
|
||||
margin: 0 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 900px){
|
||||
.np-sub-navigation-content-item{
|
||||
margin: 0 1.75rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* ----------------------------------------------------------------------------------------------------------------------- */
|
||||
/* Homepage Sections */
|
||||
/* Section: Events */
|
||||
.np-homepage-hero-image{
|
||||
object-fit: fill;
|
||||
}
|
||||
|
||||
.homepage-event-card{
|
||||
padding: 1rem 2.3rem !important;
|
||||
}
|
||||
|
||||
.np-carousel {
|
||||
margin-bottom: 3rem;
|
||||
}
|
||||
|
||||
.np-carousel .slick-track {
|
||||
display: flex;
|
||||
}
|
||||
.np-carousel .slick-slide {
|
||||
height: auto;
|
||||
}
|
||||
.np-carousel .np-card {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.np-carousel .slick-arrow {
|
||||
color: #089fb7;
|
||||
font-size: 2.5rem;
|
||||
opacity: 1;
|
||||
transition: opacity 0.2s;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.np-carousel .slick-arrow:before {
|
||||
position: absolute;
|
||||
width: 80px;
|
||||
z-index: 500;
|
||||
display: flex;
|
||||
height: 100%;
|
||||
align-items: center;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.np-carousel .slick-arrow.fa-chevron-left {
|
||||
left: -8px;
|
||||
}
|
||||
|
||||
.np-carousel .slick-arrow.fa-chevron-right {
|
||||
right: -8px;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.np-carousel .slick-arrow.fa-chevron-left:before {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.np-carousel .slick-arrow.fa-chevron-right:before {
|
||||
justify-content: flex-end;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.np-carousel .slick-arrow.slick-disabled {
|
||||
opacity: 0;
|
||||
cursor: text;
|
||||
}
|
||||
.np-carousel-card .np-card {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.np-carousel .slick-track {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
.np-carousel .slick-arrow:before {
|
||||
width: 100px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Section: Glossary */
|
||||
.np-glossary {
|
||||
margin-bottom: 3rem;
|
||||
}
|
||||
|
||||
.np-accordion {
|
||||
margin: 0 22px 32px;
|
||||
}
|
||||
|
||||
.accordion-btn {
|
||||
color: #001e2e;
|
||||
background-color: #fff;
|
||||
cursor: pointer;
|
||||
width: 100%;
|
||||
min-height: 76px;
|
||||
padding: 0 18px 0 92px;
|
||||
text-align: left;
|
||||
border: none;
|
||||
outline: none;
|
||||
transition: 0.4s;
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.fa-plus,
|
||||
.fa-minus {
|
||||
background: #323F48;
|
||||
font-size: 2.5rem;
|
||||
color: #29ABE2;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 76px;
|
||||
height: 76px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: 0.4s;
|
||||
border-radius: 8px 0 0 8px;
|
||||
}
|
||||
|
||||
.accordion-title,
|
||||
.accordion-panel-content {
|
||||
line-height: 1.375rem;
|
||||
position: relative;
|
||||
}
|
||||
.accordion-panel-content {
|
||||
padding: 18px;
|
||||
}
|
||||
.accordion-panel-content p {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.accordion-panel-content:before {
|
||||
content: "";
|
||||
width: 75px;
|
||||
height: 1px;
|
||||
background: #B04EC4;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 18px;
|
||||
}
|
||||
|
||||
.accordion-panel {
|
||||
color: #001e2e;
|
||||
background-color: #fff;
|
||||
max-height: 0;
|
||||
overflow: hidden;
|
||||
transition: max-height 0.4s ease-out;
|
||||
margin-left: 76px;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.np-glossaries {
|
||||
margin: 0 4.0625rem;
|
||||
}
|
||||
.np-accordion {
|
||||
margin: 0 8px 32px;
|
||||
}
|
||||
}
|
||||
/* ----------------------------------------------------------------------------------------------------------------------- */
|
||||
@ -0,0 +1,19 @@
|
||||
{% include "header" %}
|
||||
{% comment %}{% include "sub_navigation" %}{% endcomment %}
|
||||
<main class="np-main np-training-events np-subpage-container np-max-width">
|
||||
<div class="row">
|
||||
<div class="col-xs-12 col-sm-10">
|
||||
<div class="np-resource-title">
|
||||
{% t .title %}
|
||||
</div>
|
||||
<div class="np-resource-subtitle">
|
||||
{% t .subtitle %}
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xs-12 col-sm-2">
|
||||
{% include "training_events_filter" %}
|
||||
</div>
|
||||
</div>
|
||||
{% include "training_events_index" %}
|
||||
</main>
|
||||
{% include "footer" %}
|
||||
@ -445,3 +445,17 @@ Dave taking over for Nichole. Dave's role is Lead Technical Writer, Senior Desig
|
||||
Knowledge Base.
|
||||
|
||||
DONE: Reach out to J about deep linking between resources.
|
||||
TODO: Ask Cam to mock up the resource bundle experiences - aka Learning Paths.
|
||||
|
||||
|
||||
## 04/26/2023
|
||||
|
||||
### Design Changes?
|
||||
|
||||
Pull in Aditi after making a list for her. The items for Aditi are:
|
||||
|
||||
* The back arrow when the course has no image. Should text change? Arrow into X?
|
||||
* Duplicate titles surround this experience too. Should the title below be `display: none;`?
|
||||
*
|
||||
|
||||
Update: Travis and MJ to meet with Aditi internally regarding this issues.
|
||||
|
||||
Reference in New Issue
Block a user