0.0.2 registration page update
This commit is contained in:
@@ -1,28 +1,32 @@
|
|||||||
{% load static %}
|
{% load static %}
|
||||||
<head>
|
<head>
|
||||||
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
|
||||||
<style>
|
<style>
|
||||||
|
|
||||||
.commonmargin {
|
.commonmargin {
|
||||||
margin-top: 193px;
|
margin-top: 193px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.loginbtn {
|
.loginbtn {
|
||||||
position: relative;
|
position: relative;
|
||||||
z-index: 0;
|
|
||||||
background: linear-gradient(135deg, #6BFFFF -30%, rgba(18, 67, 191, 1) 122%);
|
|
||||||
padding-top: 25px;
|
padding-top: 25px;
|
||||||
padding-bottom: 3px;
|
|
||||||
border: 3px solid #FFF ;
|
border: 3px solid #FFF ;
|
||||||
border-bottom: 0;
|
|
||||||
|
|
||||||
}
|
}
|
||||||
.registrbtn {
|
.registrbtn {
|
||||||
padding-top: 25px;
|
padding-top: 25px;
|
||||||
border: 3px solid #FFF ;
|
border: 3px solid #FFF ;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.chspan {
|
||||||
|
position: relative;
|
||||||
|
z-index: 22;
|
||||||
}
|
}
|
||||||
|
|
||||||
.chbtn {
|
.chbtn {
|
||||||
margin: 0 -29px 0 -29px;
|
margin: 0 -30px 0 -30px;
|
||||||
width: 370px;
|
width: 370px;
|
||||||
height: 38px;
|
height: 38px;
|
||||||
border-radius: 60px 60px 0px 0px;
|
border-radius: 60px 60px 0px 0px;
|
||||||
@@ -37,7 +41,6 @@
|
|||||||
line-height: normal;
|
line-height: normal;
|
||||||
letter-spacing: 1.8px;
|
letter-spacing: 1.8px;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.loginpole {
|
.loginpole {
|
||||||
@@ -48,7 +51,6 @@
|
|||||||
border: 3px solid #FFF;
|
border: 3px solid #FFF;
|
||||||
border-top: none;
|
border-top: none;
|
||||||
background: linear-gradient(135deg, #6BFFFF -15.56%, rgba(18, 67, 191, 0.92) 40%, rgba(191, 18, 174, 0.92) 95%);
|
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;
|
position: relative;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -190,11 +192,15 @@
|
|||||||
position: relative;
|
position: relative;
|
||||||
}
|
}
|
||||||
|
|
||||||
.registration:target, .loginpole:target {
|
.registration:target {
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
|
|
||||||
.registration, .loginpole {
|
.loginpole:target {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.registration, .loginpole{
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
.registration {
|
.registration {
|
||||||
@@ -203,7 +209,6 @@
|
|||||||
border-radius: 60px;
|
border-radius: 60px;
|
||||||
border: 3px solid #FFF;
|
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%);
|
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-top: none;
|
||||||
border-radius: 0 0 60px 60px;
|
border-radius: 0 0 60px 60px;
|
||||||
margin: auto;
|
margin: auto;
|
||||||
@@ -275,12 +280,27 @@
|
|||||||
width: 370px;
|
width: 370px;
|
||||||
height: 67px;
|
height: 67px;
|
||||||
position: absolute;
|
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;
|
top: -70px;
|
||||||
right: -3px;
|
right: -3px;
|
||||||
border-radius: 60px 60px 0 0;
|
border-radius: 60px 60px 0 0;
|
||||||
border: 3px solid #fff;
|
border: 3px solid #fff;
|
||||||
border-bottom: none;
|
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>
|
</style>
|
||||||
@@ -288,8 +308,8 @@
|
|||||||
<body>
|
<body>
|
||||||
<div class="commonmargin">
|
<div class="commonmargin">
|
||||||
<div class="checks">
|
<div class="checks">
|
||||||
<a href="#1" class="loginbtn chbtn" >вход</a>
|
<a href="#1" id="defaultOpen" class="loginbtn chbtn" ><span class="chspan">вход</span></a>
|
||||||
<a href="#2" class="registrbtn chbtn" >регистрация</a>
|
<a href="#2" class="registrbtn chbtn" ><span class="chspan">регистрация</span></a>
|
||||||
</div>
|
</div>
|
||||||
<div class="loginpole" id="1">
|
<div class="loginpole" id="1">
|
||||||
<div class="lines">
|
<div class="lines">
|
||||||
@@ -299,7 +319,7 @@
|
|||||||
</br>
|
</br>
|
||||||
<input type="submit" class="login" value="войти">
|
<input type="submit" class="login" value="войти">
|
||||||
</div>
|
</div>
|
||||||
<button class="registrate">зарегистрироваться</button>
|
<button id="1" class="registrate">зарегистрироваться</button>
|
||||||
<div>
|
<div>
|
||||||
<div class="langchange">
|
<div class="langchange">
|
||||||
<a href="#"><div class="ru">RU</div></a>
|
<a href="#"><div class="ru">RU</div></a>
|
||||||
@@ -335,4 +355,33 @@
|
|||||||
<input class="registrate2" type="submit" form="reg" value="ЗАРЕГИСТРИРОВАТЬСЯ">
|
<input class="registrate2" type="submit" form="reg" value="ЗАРЕГИСТРИРОВАТЬСЯ">
|
||||||
</div>
|
</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>
|
</body>
|
||||||
Reference in New Issue
Block a user