Files
Gainsight/Custom_Templates/customer_templates/Pipedrive Learn - CRM/login.html.liquid

181 lines
7.3 KiB
Plaintext

<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">Kostenlos Lernen</span>
<span class="lang-es">Aprender gratis</span>
<span class="lang-fr">Apprendre gratuitement</span>
<span class="lang-br">Aprenda de graça</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">Anmelden mit Pipedrive</span>
<span class="lang-es">Iniciar sesión con Pipedrive</span>
<span class="lang-fr">Se connecter avec Pipedrive</span>
<span class="lang-br">Entrar com Pipedrive</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">Sie sind kein Pipedrive-Nutzer?<br>Erstellen Sie einen kostenlosen Account für den Zugriff auf unsere Kurse</span>
<span class="lang-es">¿No eres usuario de Pipedrive?<br>Crea una cuenta gratuita para acceder a los cursos</span>
<span class="lang-fr">Vous n'utilisez pas encore Pipedrive ?<br>Créez un compte gratuit pour accéder aux cours</span>
<span class="lang-br">Não é usuário(a) do Pipedrive?<br>Crie uma conta gratuita para acessar os cursos</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 %}">
<span class="lang-en">Forgot?</span>
<span class="lang-de">Vergessen?</span>
<span class="lang-es">¿Lo has olvidado?</span>
<span class="lang-fr">Vous avez oublié ?</span>
<span class="lang-br">Esqueceu?</span>
</a>
</div>
<button type="submit" class="button-2 button-large np-form-action">
<span class="lang-en">Sign In</span>
<span class="lang-de">Anmelden</span>
<span class="lang-es">Iniciar sesión</span>
<span class="lang-fr">Se connecter</span>
<span class="lang-br">Entrar</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">Registrieren</span>
<span class="lang-es">Inscribirse</span>
<span class="lang-fr">S'inscrire</span>
<span class="lang-br">Cadastre-se</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>
<script>
addEventListener('DOMContentLoaded', () => {
switch (window.localStorage.getItem('academy-language')) {
case 'en':
break;
case 'de':
document.querySelector('#learner_email').setAttribute('placeholder', 'Berufliche E-Mail-Adresse');
document.querySelector('#learner_password').setAttribute('placeholder', 'Passwort');
break;
case 'es':
document.querySelector('#learner_email').setAttribute('placeholder', 'Correo electrónico del trabajo');
document.querySelector('#learner_password').setAttribute('placeholder', 'Contraseña');
break;
case 'fr':
document.querySelector('#learner_email').setAttribute('placeholder', 'Adresse e-mail pro');
document.querySelector('#learner_password').setAttribute('placeholder', 'Mot de passe');
break;
case 'br':
document.querySelector('#learner_email').setAttribute('placeholder', 'E-mail de trabalho');
document.querySelector('#learner_password').setAttribute('placeholder', 'Senha');
break;
}
})
</script>