0.0.2 registration page update
This commit is contained in:
@@ -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>
|
||||
Reference in New Issue
Block a user