0.0.2 registration page update

This commit is contained in:
2023-10-24 12:47:24 +03:00
parent c4d788bc9f
commit d5ef92f91d

View File

@@ -1,28 +1,32 @@
{% 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;
z-index: 0;
background: linear-gradient(135deg, #6BFFFF -30%, rgba(18, 67, 191, 1) 122%);
padding-top: 25px;
padding-bottom: 3px;
border: 3px solid #FFF ;
border-bottom: 0;
}
.registrbtn {
padding-top: 25px;
border: 3px solid #FFF ;
}
.chspan {
position: relative;
z-index: 22;
}
.chbtn {
margin: 0 -29px 0 -29px;
margin: 0 -30px 0 -30px;
width: 370px;
height: 38px;
border-radius: 60px 60px 0px 0px;
@@ -37,7 +41,6 @@
line-height: normal;
letter-spacing: 1.8px;
text-decoration: none;
}
.loginpole {
@@ -48,7 +51,6 @@
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%);
box-shadow: 4px 4px 25px 0px #74286C;
position: relative;
}
@@ -190,7 +192,11 @@
position: relative;
}
.registration:target, .loginpole:target {
.registration:target {
display: block;
}
.loginpole:target {
display: block;
}
@@ -203,7 +209,6 @@
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%);
box-shadow: 4px 4px 25px 0px #74286C;
border-top: none;
border-radius: 0 0 60px 60px;
margin: auto;
@@ -275,12 +280,27 @@
width: 370px;
height: 67px;
position: absolute;
background: linear-gradient(135deg, #6BFFFF -80%, rgba(18, 67, 191, 1) 55%);
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>
@@ -288,8 +308,8 @@
<body>
<div class="commonmargin">
<div class="checks">
<a href="#1" class="loginbtn chbtn" >вход</a>
<a href="#2" class="registrbtn chbtn" >регистрация</a>
<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">
@@ -299,7 +319,7 @@
</br>
<input type="submit" class="login" value="войти">
</div>
<button class="registrate">зарегистрироваться</button>
<button id="1" class="registrate">зарегистрироваться</button>
<div>
<div class="langchange">
<a href="#"><div class="ru">RU</div></a>
@@ -335,4 +355,33 @@
<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>