332 lines
18 KiB
HTML
332 lines
18 KiB
HTML
<!doctype html>
|
||
<html lang="en">
|
||
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
<title>KRBL</title>
|
||
<link rel="icon" type="image/x-icon" href="../img/favicon.png">
|
||
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
|
||
<link rel="stylesheet" href="../styles/main.css">
|
||
<script src="../scripts/jquery.min.js"></script>
|
||
<script>
|
||
const API_SERVER = "{{API_SERVER}}";
|
||
</script>
|
||
<script src="https://yastatic.net/s3/passport-sdk/autofill/v1/sdk-suggest-with-polyfills-latest.js"></script>
|
||
<meta name="google-signin-client_id" content="638774553513-tsobvdtj1g0p43obm3e9epekbjksdmoj.apps.googleusercontent.com">
|
||
<script src="https://accounts.google.com/gsi/client" async></script>
|
||
<script>
|
||
window.YaAuthSuggest.init(
|
||
{
|
||
client_id: '8976c8bc90784da89467f3abd34f0192',
|
||
response_type: 'token',
|
||
redirect_uri: '{{SITE_DOMAIN}}/yandexauth'
|
||
}
|
||
,
|
||
'{{SITE_DOMAIN}}',
|
||
{
|
||
view: "button",
|
||
parentId: "yandexButtonContainerId",
|
||
buttonSize: 's',
|
||
buttonView: 'main',
|
||
buttonTheme: 'dark',
|
||
buttonBorderRadius: "4",
|
||
buttonIcon: 'ya',
|
||
}
|
||
)
|
||
.then(({handler}) => handler())
|
||
.then(data => console.log('Сообщение с токеном', data))
|
||
.catch(error => console.log('Обработка ошибки', error))
|
||
</script>
|
||
</head>
|
||
|
||
<body>
|
||
|
||
<header>
|
||
<div class="burger-container" onclick="document.querySelector('header').classList.toggle('menu-opened');">
|
||
<div id="burger">
|
||
<div class="bar topBar"></div>
|
||
<div class="bar btmBar"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<ul class="menu">
|
||
<li class="menu-item"><a onclick="alert('Этот раздел в разработке.');" href="#about">О нас</a></li>
|
||
<li class="menu-item"><a onclick="alert('Этот раздел в разработке.');" href="#projects">Проекты</a></li>
|
||
<li class="menu-item"><a onclick="alert('Этот раздел в разработке.');" href="#possibilities">Возможности</a></li>
|
||
<li class="menu-item">
|
||
<a href="mailto:contact@krbl.ru">
|
||
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="16" fill="none" viewBox="0 0 20 16">
|
||
<path fill="#000" fill-opacity=".85" d="M10.018 9.08c.371 0 .716-.176 1.114-.584L19.012.51c-.335-.334-.96-.491-1.856-.491H2.572c-.76 0-1.295.148-1.594.454l7.926 8.023c.39.4.734.585 1.114.585ZM.226 14.508 6.63 8.023.208 1.54C.072 1.8 0 2.245 0 2.885v10.24c0 .658.072 1.122.226 1.382ZM2.844 16h14.584c.76 0 1.286-.148 1.585-.445l-6.531-6.623-.598.622c-.625.612-1.214.89-1.866.89-.661 0-1.25-.278-1.866-.89l-.607-.622-6.512 6.614c.344.306.942.454 1.811.454Zm16.939-1.503c.145-.269.217-.723.217-1.372V2.885c0-.622-.072-1.067-.2-1.317l-6.403 6.455 6.386 6.474Z"/>
|
||
</svg>
|
||
Написать нам
|
||
</a>
|
||
</li>
|
||
<li class="menu-item">
|
||
<a href="https://github.com/KRBL-Group" target="_blank">
|
||
<svg xmlns="http://www.w3.org/2000/svg" width="21" height="20" fill="none" viewBox="0 0 21 20">
|
||
<path fill="#24292F" fill-rule="evenodd" d="M10.469 0C4.679 0 0 4.583 0 10.254c0 4.532 2.998 8.369 7.158 9.727.52.102.71-.221.71-.493 0-.237-.016-1.052-.016-1.9-2.913.61-3.519-1.223-3.519-1.223-.468-1.188-1.161-1.494-1.161-1.494-.954-.628.07-.628.07-.628 1.056.068 1.611 1.052 1.611 1.052.936 1.562 2.444 1.12 3.05.85.087-.663.365-1.121.66-1.376-2.323-.238-4.767-1.12-4.767-5.059 0-1.12.416-2.037 1.074-2.75-.104-.254-.468-1.307.104-2.716 0 0 .884-.272 2.877 1.052a10.335 10.335 0 0 1 2.618-.34c.884 0 1.785.12 2.617.34 1.993-1.324 2.877-1.052 2.877-1.052.572 1.409.208 2.462.104 2.716.676.713 1.075 1.63 1.075 2.75 0 3.939-2.444 4.804-4.784 5.06.381.322.71.933.71 1.9 0 1.375-.017 2.479-.017 2.818 0 .272.191.595.71.493 4.16-1.359 7.16-5.195 7.16-9.728C20.936 4.584 16.24 0 10.468 0Z" clip-rule="evenodd"/>
|
||
</svg>
|
||
Наш Github
|
||
</a>
|
||
</li>
|
||
</ul>
|
||
</header>
|
||
|
||
<section id="content">
|
||
<section id="main-section">
|
||
<img src="../img/krbl.svg">
|
||
<h1>Мы <span>разрабатываем</span> проекты <br> которые радуют ваших клиентов <br> и развивают ваш бизнес</h1>
|
||
</section>
|
||
|
||
<div id="writeUsButton">Связаться с нами</div>
|
||
<div id="accountButton">Личный кабинет</div>
|
||
|
||
<form id="loginForm">
|
||
<div id="login-form-popup-bg" class="form-popup-bg">
|
||
<div id="login-form-container" class="form-container">
|
||
|
||
<img src="../img/xmark.svg" id="btnCloseFormLogin" class="close-button">
|
||
<img id="logo" src="../img/krbl.svg">
|
||
<h1>Авторизация для клиентов</h1>
|
||
|
||
<div class="form-cell-wrapper form-textbox">
|
||
<input name="email" type="text" id="login-email" autocorrect="off" autocapitalize="off" aria-required="true" required="required" spellcheck="false" class="force-ltr form-textbox-input" aria-invalid="false" onfocus="focusHandler(this)" onblur="blurHandler(this)">
|
||
<span aria-hidden="true" id="login-email-label" class="form-textbox-label form-label-flyout">Электронная почта</span>
|
||
</div>
|
||
<div class="form-cell-wrapper form-textbox">
|
||
<input name="password" type="password" id="login-password" autocorrect="off" autocapitalize="off" aria-required="true" required="required" spellcheck="false" class="force-ltr form-textbox-input" aria-invalid="false" onfocus="focusHandler(this)" onblur="blurHandler(this)">
|
||
<span aria-hidden="true" id="login-password-label" class="form-textbox-label form-label-flyout">Пароль</span>
|
||
</div>
|
||
|
||
<button type="submit" class="form-button" id="loginButton">Войти с почтой</button>
|
||
<!-- <div id="g_id_onload"
|
||
data-client_id="638774553513-tsobvdtj1g0p43obm3e9epekbjksdmoj.apps.googleusercontent.com"
|
||
data-login_uri="{{SITE_DOMAIN}}"
|
||
data-auto_prompt="false">
|
||
</div>
|
||
|
||
<div class="g_id_signin"
|
||
data-type="standard"
|
||
data-shape="rectangular"
|
||
data-theme="outline"
|
||
data-text="signin_with"
|
||
data-size="large"
|
||
data-width="328"
|
||
data-logo_alignment="left">
|
||
</div> -->
|
||
<div class="form-button" id="yandexButtonContainerId"></div>
|
||
|
||
<a href="mailto:contact@krbl.ru" id="forgotLink">Забыли пароль? <svg width="9" height="9" viewBox="0 0 9 9" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||
<path d="M8.2489 6.23474L8.24353 0.847534C8.24353 0.428589 7.96423 0.143921 7.53992 0.143921H2.14734C1.74988 0.143921 1.45984 0.444702 1.45984 0.804565C1.45984 1.15906 1.76599 1.4491 2.1366 1.4491H4.0863L6.16492 1.3739L5.20349 2.22791L0.245972 7.1908C0.106323 7.33044 0.0257568 7.50769 0.0257568 7.67957C0.0257568 8.02869 0.348022 8.36169 0.707886 8.36169C0.885132 8.36169 1.05164 8.2865 1.19666 8.14148L6.15955 3.18396L7.01892 2.22253L6.93298 4.22058V6.24548C6.93298 6.62146 7.22302 6.92761 7.58289 6.92761C7.94275 6.92761 8.2489 6.62683 8.2489 6.23474Z" fill="#4B80CB"/>
|
||
</svg>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</form>
|
||
|
||
<form id="feedbackForm">
|
||
<div id="feedback-form-popup-bg" class="form-popup-bg">
|
||
<div class="form-container" id="preFeedback">
|
||
<img src="../img/xmark.svg" id="btnCloseForm" class="close-button">
|
||
<img id="logo" src="../img/krbl.svg">
|
||
<h1>Запрос на обратную связь</h1>
|
||
|
||
<div class="form-cell-wrapper form-textbox">
|
||
<input type="text" id="feedback-name" autocorrect="off" autocapitalize="off" aria-required="true" required="required" spellcheck="false" class="force-ltr form-textbox-input" autocomplete="off" aria-invalid="false" onfocus="focusHandler(this)" onblur="blurHandler(this)">
|
||
<span aria-hidden="true" id="feedback-name-label" class="form-textbox-label form-label-flyout">Ваше имя</span>
|
||
</div>
|
||
<div class="form-cell-wrapper form-textbox">
|
||
<input data-inputmask-showmaskonhover="false" type="text" id="feedback-phone" autocorrect="off" autocapitalize="off" aria-required="true" required="required" spellcheck="false" class="force-ltr form-textbox-input" autocomplete="off" aria-invalid="false" onfocus="focusHandler(this)" onblur="blurHandler(this)">
|
||
<span aria-hidden="true" id="feedback-phone-label" class="form-textbox-label form-label-flyout">Номер телефона</span>
|
||
</div>
|
||
<div class="form-cell-wrapper form-textbox">
|
||
<input type="text" id="feedback-email" autocorrect="off" autocapitalize="off" aria-required="true" required="required" spellcheck="false" class="force-ltr form-textbox-input" autocomplete="off" aria-invalid="false" onfocus="focusHandler(this)" onblur="blurHandler(this)">
|
||
<span aria-hidden="true" id="feedback-email-label" class="form-textbox-label form-label-flyout">Электронная почта</span>
|
||
</div>
|
||
<div class="form-cell-wrapper form-textbox">
|
||
<textarea type="text" id="feedback-description" autocorrect="off" autocapitalize="off" spellcheck="false" class="force-ltr form-textbox-input autoExpand" autocomplete="off" aria-invalid="false" onfocus="focusHandler(this)" onblur="blurHandler(this)"></textarea>
|
||
<span aria-hidden="true" id="feedback-description-label" class="form-textbox-label form-label-flyout">Дополнительная информация</span>
|
||
</div>
|
||
|
||
<button type="submit" class="form-button" id="sendFeedback">Отправить запрос</button>
|
||
</div>
|
||
<div class="form-container" id="postFeedback" style="display: none;">
|
||
<img src="../img/xmark.svg" id="btnCloseForm" class="close-button">
|
||
<img id="logo" src="../img/krbl.svg">
|
||
<h1>Запрос успешно отправлен</h1>
|
||
|
||
<h2>В скором времени мы с вами свяжемся!</h2>
|
||
|
||
<button type="button" class="form-button" id="btnCloseForm">Закрыть</button>
|
||
</div>
|
||
</div>
|
||
</form>
|
||
|
||
<section id="main-links">
|
||
<a href="#about" onclick="alert('Этот раздел в разработке.');">/о нас</a>
|
||
<a href="#projects" onclick="alert('Этот раздел в разработке.');">/проекты</a>
|
||
<a href="#possibilities" onclick="alert('Этот раздел в разработке.');">/возможности</a>
|
||
|
||
<div id="icons">
|
||
<a href="mailto:contact@krbl.ru">
|
||
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="16" fill="none" viewBox="0 0 20 16">
|
||
<path fill="#000" fill-opacity=".85" d="M10.018 9.08c.371 0 .716-.176 1.114-.584L19.012.51c-.335-.334-.96-.491-1.856-.491H2.572c-.76 0-1.295.148-1.594.454l7.926 8.023c.39.4.734.585 1.114.585ZM.226 14.508 6.63 8.023.208 1.54C.072 1.8 0 2.245 0 2.885v10.24c0 .658.072 1.122.226 1.382ZM2.844 16h14.584c.76 0 1.286-.148 1.585-.445l-6.531-6.623-.598.622c-.625.612-1.214.89-1.866.89-.661 0-1.25-.278-1.866-.89l-.607-.622-6.512 6.614c.344.306.942.454 1.811.454Zm16.939-1.503c.145-.269.217-.723.217-1.372V2.885c0-.622-.072-1.067-.2-1.317l-6.403 6.455 6.386 6.474Z"/>
|
||
</svg>
|
||
</a>
|
||
<a href="https://github.com/KRBL-Group" target="_blank">
|
||
<svg xmlns="http://www.w3.org/2000/svg" width="21" height="20" fill="none" viewBox="0 0 21 20">
|
||
<path fill="#24292F" fill-rule="evenodd" d="M10.469 0C4.679 0 0 4.583 0 10.254c0 4.532 2.998 8.369 7.158 9.727.52.102.71-.221.71-.493 0-.237-.016-1.052-.016-1.9-2.913.61-3.519-1.223-3.519-1.223-.468-1.188-1.161-1.494-1.161-1.494-.954-.628.07-.628.07-.628 1.056.068 1.611 1.052 1.611 1.052.936 1.562 2.444 1.12 3.05.85.087-.663.365-1.121.66-1.376-2.323-.238-4.767-1.12-4.767-5.059 0-1.12.416-2.037 1.074-2.75-.104-.254-.468-1.307.104-2.716 0 0 .884-.272 2.877 1.052a10.335 10.335 0 0 1 2.618-.34c.884 0 1.785.12 2.617.34 1.993-1.324 2.877-1.052 2.877-1.052.572 1.409.208 2.462.104 2.716.676.713 1.075 1.63 1.075 2.75 0 3.939-2.444 4.804-4.784 5.06.381.322.71.933.71 1.9 0 1.375-.017 2.479-.017 2.818 0 .272.191.595.71.493 4.16-1.359 7.16-5.195 7.16-9.728C20.936 4.584 16.24 0 10.468 0Z" clip-rule="evenodd"/>
|
||
</svg>
|
||
</a>
|
||
</div>
|
||
|
||
</section>
|
||
|
||
</section>
|
||
|
||
|
||
|
||
<script src="https://rawgit.com/RobinHerbots/Inputmask/5.x/dist/jquery.inputmask.js"></script>
|
||
<script>
|
||
$(document).ready(function(){
|
||
var phoneInput = $('#feedback-phone');
|
||
|
||
phoneInput.inputmask({"mask": "+7 (999) 999-9999"});
|
||
|
||
$('textarea.autoExpand').on('input', function () {
|
||
this.style.height = 'auto';
|
||
this.style.height = (this.scrollHeight - 50) + 'px';
|
||
});
|
||
});
|
||
|
||
</script>
|
||
|
||
<script>
|
||
function closeForm() {
|
||
$('.form-popup-bg').removeClass('is-visible');
|
||
}
|
||
|
||
$(document).ready(function($) {
|
||
|
||
$('#writeUsButton').on('click', function(event) {
|
||
event.preventDefault();
|
||
|
||
$('#feedback-form-popup-bg').addClass('is-visible');
|
||
});
|
||
|
||
$('#feedback-form-popup-bg').on('click', function(event) {
|
||
if ($(event.target).is('#feedback-form-popup-bg') || $(event.target).is('#btnCloseForm')) {
|
||
event.preventDefault();
|
||
$(this).removeClass('is-visible');
|
||
}
|
||
});
|
||
|
||
$('#accountButton').on('click', function(event) {
|
||
event.preventDefault();
|
||
`{{#if isAuth}}`
|
||
location.href = "/projects";
|
||
`{{else}}`
|
||
$('#login-form-popup-bg').addClass('is-visible');
|
||
`{{/if}}`
|
||
});
|
||
|
||
$('#login-form-popup-bg').on('click', function(event) {
|
||
if ($(event.target).is('#login-form-popup-bg') || $(event.target).is('#btnCloseFormLogin')) {
|
||
event.preventDefault();
|
||
$(this).removeClass('is-visible');
|
||
}
|
||
});
|
||
|
||
});
|
||
|
||
</script>
|
||
|
||
<script>
|
||
function focusHandler(input) {
|
||
input.nextElementSibling.classList.add('form-label-focused');
|
||
}
|
||
|
||
function blurHandler(input) {
|
||
if (!input.value) {
|
||
input.nextElementSibling.classList.remove('form-label-focused');
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<script>
|
||
document.addEventListener("DOMContentLoaded", function() {
|
||
const loginForm = document.getElementById("loginForm");
|
||
const emailInput = document.getElementById("login-email");
|
||
const passwordInput = document.getElementById("login-password");
|
||
|
||
loginForm.addEventListener("submit", async function(event) {
|
||
event.preventDefault();
|
||
|
||
const email = emailInput.value;
|
||
const password = passwordInput.value;
|
||
|
||
// Отправляем запрос на сервер для авторизации
|
||
const response = await fetch("{{API_SERVER}}/login", {
|
||
method: "POST",
|
||
headers: {
|
||
"Content-Type": "application/json"
|
||
},
|
||
body: JSON.stringify({ email, password })
|
||
});
|
||
|
||
if (response.status === 200) {
|
||
const data = await response.json();
|
||
const token = data.token;
|
||
|
||
document.cookie = "token=" + token;
|
||
|
||
window.location.href = "/projects";
|
||
} else if (response.status === 401) {
|
||
alert("Неверные данные пользователя");
|
||
} else {
|
||
alert("Ошибка авторизации");
|
||
}
|
||
});
|
||
});
|
||
|
||
document.addEventListener("DOMContentLoaded", function() {
|
||
const feedbackForm = document.getElementById("feedbackForm");
|
||
const nameInput = document.getElementById("feedback-name");
|
||
const phoneInput = document.getElementById("feedback-phone");
|
||
const emailInput = document.getElementById("feedback-email");
|
||
const descriptionInput = document.getElementById("feedback-description");
|
||
|
||
feedbackForm.addEventListener("submit", async function(event) {
|
||
event.preventDefault();
|
||
|
||
const email = emailInput.value;
|
||
const name = nameInput.value;
|
||
const phone = phoneInput.value;
|
||
const description = descriptionInput.value;
|
||
|
||
// Отправляем запрос на сервер
|
||
const response = await fetch("{{API_SERVER}}/feedback", {
|
||
method: "POST",
|
||
headers: {
|
||
"Content-Type": "application/json"
|
||
},
|
||
body: JSON.stringify({ name, phone, email, description }),
|
||
});
|
||
|
||
if (response.status === 200) {
|
||
$("#preFeedback").css("display", "none");
|
||
$("#postFeedback").css("display", "inline-flex");
|
||
} else {
|
||
alert("Ошибка отправки запроса");
|
||
}
|
||
});
|
||
});
|
||
|
||
</script>
|
||
|
||
|
||
|
||
</body>
|
||
|
||
</html> |