387 lines
11 KiB
HTML
387 lines
11 KiB
HTML
{% load static %}
|
||
<head>
|
||
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
|
||
<style>
|
||
|
||
.commonmargin {
|
||
margin-top: 193px;
|
||
text-align: center;
|
||
}
|
||
|
||
.loginbtn {
|
||
position: relative;
|
||
padding-top: 25px;
|
||
border: 3px solid #FFF ;
|
||
|
||
}
|
||
.registrbtn {
|
||
padding-top: 25px;
|
||
border: 3px solid #FFF ;
|
||
|
||
}
|
||
|
||
.chspan {
|
||
position: relative;
|
||
z-index: 22;
|
||
}
|
||
|
||
.chbtn {
|
||
margin: 0 -30px 0 -30px;
|
||
width: 370px;
|
||
height: 38px;
|
||
border-radius: 60px 60px 0px 0px;
|
||
display: inline-block;
|
||
line-height: normal;
|
||
font-family: Montserrat, sans-serif, Inter;
|
||
color: #FFF;
|
||
text-align: center;
|
||
font-size: 18px;
|
||
font-style: normal;
|
||
font-weight: 700;
|
||
line-height: normal;
|
||
letter-spacing: 1.8px;
|
||
text-decoration: none;
|
||
}
|
||
|
||
.loginpole {
|
||
margin: auto;
|
||
width: 691px;
|
||
height: 530px;
|
||
border-radius: 0 0 60px 60px;
|
||
border: 3px solid #FFF;
|
||
border-top: none;
|
||
background: linear-gradient(135deg, #6BFFFF -15.56%, rgba(18, 67, 191, 0.92) 40%, rgba(191, 18, 174, 0.92) 95%);
|
||
position: relative;
|
||
}
|
||
|
||
.lines {
|
||
padding-top: 50px;
|
||
}
|
||
|
||
.inputdata {
|
||
display: block;
|
||
width: 489px;
|
||
height: 45px;
|
||
border-radius: 40px;
|
||
border: 3px solid #FFF;
|
||
background: transparent;
|
||
margin: 0 67px 21px 66px;
|
||
padding-left: 68px;
|
||
color: #fff;
|
||
color: #FFF;
|
||
font-family: Montserrat, sans-serif, Inter;
|
||
font-size: 16px;
|
||
font-weight: 500;
|
||
}
|
||
.inputdata:focus {
|
||
outline: none;
|
||
}
|
||
|
||
.inputdata::placeholder {
|
||
color: #FFF;
|
||
font-family: Montserrat, sans-serif, Inter;
|
||
font-size: 16px;
|
||
font-style: normal;
|
||
font-weight: 500;
|
||
line-height: normal;
|
||
}
|
||
|
||
.forpassword {
|
||
float: right;
|
||
color: #FFF;
|
||
text-align: center;
|
||
font-family: Montserrat, sans-serif, Inter;
|
||
font-size: 16px;
|
||
font-weight: 400;
|
||
line-height: normal;
|
||
text-decoration-line: underline;
|
||
margin: 5px 66px 46px 0;
|
||
}
|
||
|
||
.login {
|
||
border-radius: 40px;
|
||
border: 1.5px solid #FBC1C8;
|
||
background: linear-gradient(92deg, #EE3145 0%, #630762 100%);
|
||
box-shadow: -4px -4px 25px 0px #F8576C, 4px 4px 25px 0px #74286C;
|
||
color: #FFF;
|
||
text-align: center;
|
||
font-family: Montserrat, sans-serif, Inter;
|
||
font-size: 27px;
|
||
font-style: normal;
|
||
font-weight: 700;
|
||
line-height: normal;
|
||
margin: 0 226px 25px 236px;
|
||
width: 228.712px;
|
||
height: 48.301px;
|
||
}
|
||
|
||
.registrate {
|
||
width: 423px;
|
||
height: 48px;
|
||
border-radius: 40px;
|
||
border: 1.5px solid #FFF;
|
||
color: #FFF;
|
||
text-align: center;
|
||
font-family: Montserrat, sans-serif, Inter;
|
||
font-size: 27px;
|
||
font-style: normal;
|
||
font-weight: 700;
|
||
line-height: normal;
|
||
background: transparent;
|
||
filter: drop-shadow(5px 5px 30px #030303) drop-shadow(-5px -5px 30px #33333A);
|
||
margin: 0 129px 32px 139px;
|
||
}
|
||
|
||
.logwith {
|
||
width: 293.602px;
|
||
height: 27.465px;
|
||
color: #FFF;
|
||
font-family: Montserrat, sans-serif, Inter;
|
||
font-size: 24px;
|
||
font-style: normal;
|
||
font-weight: 400;
|
||
margin: 0 194px 20px 203px;
|
||
|
||
}
|
||
.social {
|
||
width: 33px;
|
||
height: 34px;
|
||
margin: 0 12px 35px 12px;
|
||
}
|
||
.socialimg {
|
||
margin-right: 95px;
|
||
}
|
||
.chbtn:hover {
|
||
cursor: pointer;
|
||
}
|
||
|
||
.langchange {
|
||
float: left;
|
||
margin: -28px 0 0 19px;
|
||
}
|
||
.ru {
|
||
height: 50px;
|
||
background-image: url("{% static "images/icons/rus.svg" %}");
|
||
background-repeat: no-repeat;
|
||
padding-top: 10px;
|
||
color: #FFF;
|
||
font-family: Montserrat, sans-serif, Inter;
|
||
font-size: 24px;
|
||
font-style: normal;
|
||
font-weight: 400;
|
||
line-height: normal;
|
||
padding-left: 53px;
|
||
}
|
||
.en {
|
||
height: 50px;
|
||
background-image: url("{% static "images/icons/usa.svg" %}");
|
||
background-repeat: no-repeat;
|
||
padding-top: 10px;
|
||
font-family: Montserrat, sans-serif, Inter;
|
||
font-size: 24px;
|
||
font-style: normal;
|
||
font-weight: 400;
|
||
line-height: normal;
|
||
padding-left: 53px;
|
||
|
||
}
|
||
.langchange a {
|
||
text-decoration: none;
|
||
color: #FFF;
|
||
display: block;
|
||
position: relative;
|
||
}
|
||
|
||
.registration:target {
|
||
display: block;
|
||
}
|
||
|
||
.loginpole:target {
|
||
display: block;
|
||
}
|
||
|
||
.registration, .loginpole{
|
||
display: none;
|
||
}
|
||
.registration {
|
||
width: 691px;
|
||
height: 543px;
|
||
border-radius: 60px;
|
||
border: 3px solid #FFF;
|
||
background: linear-gradient(135deg, #6BFFFF -15.56%, rgba(18, 67, 191, 0.92) 40%, rgba(191, 18, 174, 0.92) 95%);
|
||
border-top: none;
|
||
border-radius: 0 0 60px 60px;
|
||
margin: auto;
|
||
position: relative;
|
||
}
|
||
|
||
.regtg {
|
||
display: inline;
|
||
margin: 19px 0 10px 327px;
|
||
width: 38px;
|
||
height: 38px;
|
||
|
||
}
|
||
|
||
.addtg {
|
||
color: #FFF;
|
||
text-align: center;
|
||
font-family: Montserrat, sans-serif, Inter;
|
||
font-size: 16px;
|
||
font-style: normal;
|
||
font-weight: 500;
|
||
line-height: normal;
|
||
text-decoration-line: underline;
|
||
margin-bottom: 46px;
|
||
}
|
||
|
||
.registrate2 {
|
||
border-radius: 40px;
|
||
border: 1.5px solid #FBC1C8;
|
||
background: linear-gradient(92deg, #EE3145 0%, #630762 100%);
|
||
box-shadow: -4px -4px 25px 0px #F8576C, 4px 4px 25px 0px #74286C;
|
||
width: 451px;
|
||
height: 60px;
|
||
color: #FFF;
|
||
text-align: center;
|
||
font-family: Montserrat, sans-serif, Inter;
|
||
font-size: 27px;
|
||
font-weight: 700;
|
||
margin: -20px 0 0 126px;
|
||
}
|
||
input[type=text] {
|
||
background-image: url("{% static "images/icons/log.svg" %}");
|
||
background-repeat: no-repeat;
|
||
background-position-y: 12px;
|
||
background-position-x: 31px;
|
||
}
|
||
input[type=email] {
|
||
background-image: url("{% static "images/icons/email.svg" %}");
|
||
background-repeat: no-repeat;
|
||
background-position-y: 15px;
|
||
background-position-x: 30px;
|
||
}
|
||
|
||
input[type=tel] {
|
||
background-image: url("{% static "images/icons/tel.svg" %}");
|
||
background-repeat: no-repeat;
|
||
background-position-y: 12px;
|
||
background-position-x: 34px;
|
||
}
|
||
input[type=password] {
|
||
background-image: url("{% static "images/icons/pass.svg" %}");
|
||
background-repeat: no-repeat;
|
||
background-position-y: 14px;
|
||
background-position-x: 33px;
|
||
}
|
||
|
||
.registration:before {
|
||
content: "";
|
||
width: 370px;
|
||
height: 67px;
|
||
position: absolute;
|
||
background: linear-gradient(135deg, #6BFFFF -95%, rgba(18, 67, 191, 1) 50%, rgba(191, 18, 174, 1) 220%);
|
||
top: -70px;
|
||
right: -3px;
|
||
border-radius: 60px 60px 0 0;
|
||
border: 3px solid #fff;
|
||
border-bottom: none;
|
||
z-index: 1;
|
||
}
|
||
|
||
.loginpole:before {
|
||
content: "";
|
||
width: 370px;
|
||
height: 66px;
|
||
position: absolute;
|
||
background: linear-gradient(135deg, #6BFFFF -25%, rgba(18, 67, 191, 1) 122%);
|
||
top: -69px;
|
||
right: 318px;
|
||
border-radius: 60px 60px 0 0;
|
||
border: 3px solid #fff;
|
||
border-bottom: none;
|
||
z-index: 1;
|
||
}
|
||
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="commonmargin">
|
||
<div class="checks">
|
||
<a href="#1" id="defaultOpen" class="loginbtn chbtn" ><span class="chspan">вход</span></a>
|
||
<a href="#2" class="registrbtn chbtn" ><span class="chspan">регистрация</span></a>
|
||
</div>
|
||
<div class="loginpole" id="1">
|
||
<div class="lines">
|
||
<input autocomplete="off" class="inputdata" type="text" name="login" placeholder="ЛОГИН" >
|
||
<input autocomplete="off" class="inputdata" type="password" name="password" placeholder="ПАРОЛЬ" >
|
||
<a href="#" class="forpassword">забыли пароль?</a>
|
||
</br>
|
||
<input type="submit" class="login" value="войти">
|
||
</div>
|
||
<button id="1" class="registrate">зарегистрироваться</button>
|
||
<div>
|
||
<div class="langchange">
|
||
<a href="#"><div class="ru">RU</div></a>
|
||
|
||
<a href="#"><div class="en">EN</div></a>
|
||
</div>
|
||
|
||
<div class="logwith">войти с помощью</div>
|
||
<div class="socialimg">
|
||
<img class="social" src="{% static "images/icons/inst.svg" %}">
|
||
<img class="social" src="{% static "images/icons/tg.svg" %}">
|
||
<img class="social" src="{% static "images/icons/vk.svg" %}">
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<div class="registration" id="2">
|
||
<div class="lines">
|
||
<form id="reg">
|
||
<input type="text" name="login" placeholder="ЛОГИН" class="inputdata">
|
||
<input type="email" name="email" placeholder="EMAIL" class="inputdata">
|
||
<input type="tel" name="tel" placeholder="ТЕЛЕФОН" class="inputdata">
|
||
<input type="password" name="password" placeholder="ПАРОЛЬ" class="inputdata">
|
||
</form>
|
||
</div>
|
||
<div>
|
||
<img class="regtg" src="{% static "images/icons/tg.svg" %}">
|
||
<div class="addtg"><a>добавить телеграмм</a></div>
|
||
</div>
|
||
<input class="registrate2" type="submit" form="reg" value="ЗАРЕГИСТРИРОВАТЬСЯ">
|
||
</div>
|
||
|
||
<script>
|
||
document.getElementById("defaultOpen").click();
|
||
</script>
|
||
|
||
<script>
|
||
// Обнаружение ссылки якоря для таба
|
||
let url = location.href.split('#')[1], el = $('#'+url);
|
||
if(el.length > 0 && el.closest('.tabs-block').length > 0) {
|
||
let parent = el.closest('.tabs-block');
|
||
//
|
||
parent.find('.item.--active').removeClass('--active');
|
||
parent.find('.tabs .item[href="'+url+'"]').addClass('--active');
|
||
parent.find('.content #'+url).addClass('--active');
|
||
}
|
||
|
||
// Переключение табов
|
||
$('.tabs-block .tabs').on('click', '.item', function(e){
|
||
e.preventDefault()
|
||
if(!$(this).hasClass('--active')) {
|
||
let parent = $(this).closest('.tabs-block'),
|
||
id = $(this).attr('href').split('#')[1];
|
||
//
|
||
parent.find('.item.--active').removeClass('--active');
|
||
parent.find('.content #'+id).addClass('--active');
|
||
$(this).addClass('--active');
|
||
}
|
||
});
|
||
</script>
|
||
|
||
</body> |