<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<body>
<div id="" style="display: block;">
<div class="register-page">
<main class="content">
<div class="container">
<h2 class="register-title">
Добро пожаловать <br> в Servey </h2>
<p class="project-description">
Получите информацию о потребностях других компаний<br>с помощью удобных инструментов: </p>
<ul class="description-items-container">
<li class="description-item">Реестр потребностей</li>
<li class="description-item">Реестр ресурсов</li>
<li class="description-item">Мркетплейсы ваших услуг</li>
<li class="description-item">База знаний</li>
<li class="description-item">Тестирование сотрудников</li>
<li class="description-item">Проектное планирование</li>
<li class="description-item">Финансовый учет</li>
<li class="description-item">Контроль качества</li>
<li class="description-item">Справочник продуктов и видов услуг</li>
<li class="description-item">Управление задачами в проектах</li>
</ul>
</div>
</main>
<aside class="sidebar">
<h1 class="sidebar-logo">
Servey </h1>
<div class="form-container">
<form method="post" id="user-form" class="js-reg-form">
<h3 class="sidebar-title">Регистрация</h3>
<input type="hidden" id="module" value="orgschema,wiki,finplan,user,fintransaction,notification,quality,store,billing,password,onboarding,company,tasks,workdesk,browser-push,permission">
<input type="hidden" id="referral-code" value="">
<input type="hidden" id="roistat" value="131736">
<input type="hidden" id="public-project" value="">
<input type="hidden" id="visit-source-300-field" value="a3d427c2ca7d7ceeb50d3f9bdc22a0b6">
<div class="sidebar-input-wrap">
<label class="sidebar-label" for="user-email">Email (обязательное)</label>
<input id="user-email" class="js-auth-login-input sidebar-input" name="email" placeholder="Введите email" value="">
</div>
<div class="sidebar-input-wrap" id="password-container" style="display: none;">
<label class="sidebar-label" for="user-password">Пароль</label>
<input id="user-password" class="js-auth-pass-input sidebar-input" type="password" name="email" autocomplete="new-password" placeholder="Введите пароль" value="">
</div>
<div class="sidebar-input-wrap" id="phone-container">
<label class="sidebar-label" for="user-phone">Телефон (обязательное)</label>
<input id="user-phone" class="sidebar-input" type="text" name="phone" placeholder="Введите номер телефона">
</div>
<div class="sidebar-input-wrap" id="name-container">
<label class="sidebar-label" for="user-name">Имя</label>
<input id="user-name" class="sidebar-input" type="text" name="name" placeholder="Введите имя">
</div>
<div class="sidebar-agreement-wrap" id="checkbox-container">
<input id="user-agreement" class="sidebar-input" type="checkbox" name="agreement">
<label class="sidebar-label" for="user-agreement">
<span>
Отправляя сведения через электронную форму, вы соглашаетесь с условиями </span>
<a href="https://platrum.ru/license" target="_blank">Лицензионного договора</a>,
<span>
даете согласие на обработку персональных данных, их сбор, хранение и передачу третьим лицам предоставленной вами информации на условиях </span>
<a href="https://platrum.ru/privacy" target="_blank">Политики обработки персональных данных</a>.
</label>
</div>
<div class="reg-btn-container">
<button id="submit-btn" class="js-submit-button reg-btn" type="submit" disabled="">
Зарегистрировать новый аккаунт </button>
<div style="display: none">
<span class="coupon-text" onclick="toggleVisibility(document.getElementById('coupon'))">
У меня есть купон </span>
<input id="coupon" class="coupon-input" placeholder="Код купона">
</div>
</div>
</form>
<div class="sidebar-alert sidebar-alert-danger" id="error-message"></div>
<div class="sidebar-alert sidebar-alert-danger" id="password-required-message" style="display: none;">
Уже есть проект с этим емейлом, введите пароль, чтобы создать еще один проект. </div>
</div>
<div class="login-link-wrap">
<a class="login-link" href="/login">Войти в систему</a>
</div>
</aside>
</div>
</div>
<body>
.register-page {
height: 100vh;
display: flex;
font-size: 16px;
line-height: 19px;
color: #676B8E;
font-family: Roboto, Arial, sans-serif;
overflow: hidden;
}
.content {
flex-grow: 1;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background-color: #F7F8FF;
overflow-y: auto;
}
.register-title {
margin-bottom: 24px;
font-size: 40px;
line-height: 47px;
font-weight: 700;
color: #3C3E53;
}
.project-description {
margin-bottom: 20px;
}
.description-items-container {
padding: 0;
margin: 0;
list-style-type: none;
}
.description-item {
position: relative;
padding-left: 20px;
}
.description-item:not(:last-child) {
margin-bottom: 22px;
}
.description-item::before {
position: absolute;
content: "\2713";
top: 50%;
left: 0;
transform: translateY(-50%);
color: #345BE0;
font-size: 14px;
}
.sidebar {
display: flex;
flex-direction: column;
width: 410px;
padding: 50px 65px;
background-color: white;
overflow-y: scroll;
}
.sidebar-logo {
font-family: "PT Sans", sans-serif;
color: #3C3E53;
font-size: 32px;
line-height: 44px;
font-weight: 700;
}
.form-container {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
margin: 15px 0;
}
.sidebar-title {
margin-bottom: 20px;
font-size: 20px;
line-height: 23px;
font-weight: 700;
color: #2B2C3B;
}
.sidebar-label {
display: block;
margin-bottom: 4px;
font-size: 12px;
line-height: 14px;
font-weight: 500;
color: #2B2C3B;
cursor: pointer;
}
.sidebar-agreement-wrap,
.sidebar-input-wrap {
margin-bottom: 20px;
}
.sidebar-agreement-wrap {
display: flex;
justify-content: space-between;
align-items: flex-start;
}
.sidebar-agreement-wrap > .sidebar-label {
margin-left: 8px;
}
.sidebar-agreement-wrap > .sidebar-input {
flex-shrink: 0;
width: auto;
height: auto;
margin-top: 4px;
}
.sidebar-input {
font-family: Roboto, Arial, sans-serif;
padding: 0 8px;
width: 100%;
height: 32px;
font-size: 14px;
line-height: 1.5;
border: 1px solid #C4C5D4;
border-radius: 2px;
background: white;
outline: none;
}
.sidebar-input:focus {
background-color: #FEFEE7;
}
.reg-btn-container {
margin-bottom: 20px;
}
.reg-btn {
border: none;
margin-top: 5px;
padding: 8px;
width: 100%;
background-color: #345BE0;
border-radius: 4px;
font-size: 14px;
line-height: 16px;
font-weight: 500;
color: white;
cursor: pointer;
outline: none !important;
}
.reg-btn:hover {
background-color: #3051BF;
}
.reg-btn:active {
color: #F22F63;
background-color: #F0F3FF;
}
.reg-btn:disabled {
background-color: #dddddd;
}
.login-link-wrap {
display: flex;
align-items: center;
justify-content: center;
padding: 15px 0;
border-top: 1px solid #E7E8EE;
}
.login-link {
text-align: center;
text-decoration: underline;
cursor: pointer;
font-size: 14px;
line-height: 16px;
color: #9597B2;
}
.login-link:hover {
color: #676B8E;
}
.sidebar-alert {
font-size: 14px;
line-height: 18px;
font-weight: 500;
margin-bottom: 10px;
border-radius: 5px;
}
.sidebar-alert-danger {
color: #a94442;
}
.preloader-wrap {
display: flex;
flex-direction: column;
align-items: center;
}
.preloader-title {
width: 100%;
margin: 24px 0;
text-align: center;
font-size: 20px;
color: #4a4a4a;
}
.preloader-info {
text-align: center;
font-size: 16px;
color: #4a4a4a;
margin-top: 24px;
}
.coupon-text {
font-size: 10px;
border-bottom: 1px dashed #b1b1b1;
padding-bottom: 2px;
margin-left: 5px;
margin-bottom: 5px;
cursor: pointer;
}
.coupon-input {
display: none;
font-size: 12px;
border-radius: 4px;
margin-top: 5px;
margin-left: 3px;
padding: 2px 5px;
border: 1px solid rgb(196, 197, 212);
}
