<!-- Первая часть кода-->

<style>
/*Стили полей ввода*/
input {
    width: 100%;  /* Ширина полей (лучше не менять) */
    box-sizing: border-box;
    height: 40px; /* Высота */
    margin-bottom: 30px; /* Отступ снизу */
    padding: 0 20px; /* Внутренний отступ слева и справа по 20px */
    border: 1px solid white; /* Размер границы, тип и цвет */
    border-radius: 30px; /* Радиус скруглений границ */
    background-color: transparent; /* Фоновый цвет */
    color: white; /* Цвет текста */
    font-size: 18px; /* Размер шрифта */
    outline: none;
}
/*Стили подсказок внутри полей ввода*/
input::placeholder {
    color: white; /* Цвет подсказки */
    font-size: 18px; /* Размер шрифта */
}
/*Стили кнопки регистрации*/
.login-button {
    cursor: pointer; /* Тип курсора */
}
/*Стили сообщений об ошибке*/
.tlk-input-error_show, .tlk-input-error_error {
    width: 100%; /* Ширина сообщения (лучше не менять) */
    box-sizing: border-box;
    margin: 0; /* Внешние отступы */
    padding: 10px 20px; /* Внутренние отступы сверху и снизу, слева и справа */
    color: white; /* Цвет сообщения */
    font-size: 18px; /* Размер шрифта */
    background-color: red; /* Цвет фона */
    text-align: center; /* Расположение текста */
}

</style>


                
<form method="post" id="form-login" action="/">
   
    <input type="text" name="login" placeholder="Ваш Email"  required=""> <!-- Вместо "Ваш Email" можно прописать свою подсказку-->
           
    <input type="password" name="password" placeholder="Ваш пароль"  required=""> <!-- Вместо "Ваш пароль" можно прописать свою подсказку-->
           
    <div class="tlk-input-error tlk-input-error_all"></div>

    <button type="submit" class="tlk-btn tlk-btn_gray tlk-btn_reset oldbutton2">Войти<span class="tlk-loadicon"></span></button>
       
</form>


<!-- Вторая часть кода-->
 
 
<style>
    .oldbutton2 {
    visibility: hidden !important;
    display: none !important;
}
.tlk-password-toggle {
    display: none;
}

#form-login {
    width: 100%;
}
</style>
<script src="https://members2.tildacdn.com/frontend/js/tilda-members-init.min.js?t=1706628590" id="tilda-membersarea-js"></script><script src="https://members2.tildacdn.com/frontend/js/tilda-members-sign-dict.min.js"></script><script src="https://members2.tildacdn.com/frontend/js/tilda-members-sign.min.js"></script>
<div id="app"><div class="tlk-form"><div class="tlk-form__container"><div class="tlk-form__title">Авторизация</div><form method="post" id="form-login" action="/"><div class="tlk-form__wrap"><div class="tlk-form__item"><div class="tlk-input-title">Email</div><input type="text" name="login" placeholder="janedoe@mail.com" class="tlk-input" ><div class="tlk-input-error"></div></div><div class="tlk-form__item"><div class="tlk-input-title">Пароль</div><input type="password" name="password" placeholder="enter your password" class="tlk-input" ><div class="tlk-input-error"></div></div></div><div class="tlk-input-error tlk-input-error_all"></div><div class="tlk-form__submit-wrap"><div class="tlk-form__submit-btn"><button type="submit" class="tlk-btn tlk-btn_gray">Войти<span class="tlk-loadicon"></span></button></div></div></form><div class="tlk-form__wrap-links"><a href="/members/signup" class="tlk-form__link" data-route="">Зарегистрироваться</a><a href="/members/recover-password" class="tlk-form__link" data-route="">Восстановить пароль</a></div></div></div></div> 
<style> .tlk-bg-filter { display:none; } .tlk__reg-form-container { visibility: hidden !important; display: none !important; } #app, .tlk-form{ display: none!important; } .nlsending { font-size: 0!important; pointer-events: none; } .nlsending:before { content: ''; box-sizing: border-box; position: absolute; top: 50%; left: 50%; width: 14px; height: 14px; margin-top: -7px; margin-left: -7px; border-radius: 50%; border: 2px solid #333333; border-top-color: #cccccc; animation: n-submit-spinner .6s linear infinite; } @keyframes n-submit-spinner { to { transform: rotate(360deg) } } </style>
<script>
document.addEventListener('DOMContentLoaded', function() {
    var signUpButton = document.querySelector('.login-button');
    signUpButton.addEventListener('click', function() {
        var oldButton = document.querySelector('.oldbutton2');
        if (oldButton) {
            oldButton.click();
        }
    });
});
</script>
<script>
(function() { function t_ready(t) { "loading" != document.readyState ? t() : document.addEventListener ? document.addEventListener("DOMContentLoaded", t) : document.attachEvent("onreadystatechange", function() { "loading" != document.readyState && t() }) } t_ready(function() { function checkError() { let error2 = document.querySelectorAll('.tlk-input-error'); let errortext2 = ''; for (let i = 0; i < error2.length; i++) { errortext2 += error2[i].innerHTML; } if (errortext2 != '') { let error = document.querySelectorAll('.tlk-input-error'); let errortext = ''; for (let i = 0; i < error.length; i++) { if(error[i].innerHTML != '') { errortext += error[i].innerHTML + '<br>'; } } createErrorPopup(errortext); } let pass = document.querySelectorAll('[name="password"]'); for (let i = 0; i < pass.length; i++) { pass[i].setAttribute('type', 'password'); } } let mform = setInterval(function() { let pass = document.querySelectorAll('[name="password"]'); if (pass.length > 0) { for (let i = 0; i < pass.length; i++) { pass[i].setAttribute('type', 'password'); } } let ema = document.querySelectorAll('.tn-atom [name="email"]'); ema.forEach(function (e) { e.closest('.tn-atom').querySelector('.tn-form__submit').style.setProperty('pointer-events', 'none', 'important'); }); },50); function nlm_delreq(){ let a = document.querySelectorAll('#app [required]'); a.forEach(function (e) { e.removeAttribute('required'); }); } document.body.addEventListener('click', function(e) { if (e.target.getAttribute('href') == '#login') { e.preventDefault(); nlm_delreq(); e.target.classList.add('nlsending'); let email = document.querySelector('.tn-atom [name="email"]').value; let password = document.querySelector('.tn-atom [name="password"]').value; let login = document.querySelector('.tlk-input[name="login"]'); let pass = document.querySelector('.tlk-input[name="password"]'); login.value = email; pass.value = password; document.querySelector('#form-login button').click(); let into = setInterval(function() { let error2 = document.querySelectorAll('.tlk-input-error'); let errortext2 = ''; for (let i = 0; i < error2.length; i++) { errortext2 += error2[i].innerHTML; } if (errortext2 != '') { checkError(); clearInterval(into); } }, 50); } }); document.addEventListener('keyup', function(e) { if (e.keyCode == 13) { e.preventDefault(); document.querySelector('[href="#login"]').click(); } }); document.addEventListener('keypress', function(e) { if (e.keyCode == 13) { e.preventDefault(); document.querySelector('[href="#login"]').click(); } }); function createErrorPopup(text){ document.querySelector('[href="#login"]').classList.remove('nlsending'); let popup = document.querySelector('#tilda-popup-for-error'); if(popup){ popup.remove(); } var div = document.createElement('div'); div.id = 'tilda-popup-for-error'; div.className = 'js-form-popup-errorbox tn-form__errorbox-popup'; div.style.display = 'none'; div.innerHTML = '<div class="t-form__errorbox-text t-text t-text_xs"> '+text+' </div> <div class="tn-form__errorbox-close js-errorbox-close"> <div class="tn-form__errorbox-close-line tn-form__errorbox-close-line-left"></div> <div class="tn-form__errorbox-close-line tn-form__errorbox-close-line-right"></div> </div>'; document.body.appendChild(div); document.getElementById('tilda-popup-for-error').addEventListener('click', function(e){ if(e.target.classList.contains('js-errorbox-close')){ document.getElementById('tilda-popup-for-error').style.display = 'none'; } }); document.getElementById('tilda-popup-for-error').style.display = 'block'; } }); }());
</script>