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 %} {% 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>