0.0.1 create registration page
This commit is contained in:
@@ -16,7 +16,7 @@ def login_View(request):
|
||||
|
||||
Dict = {}
|
||||
|
||||
t = loader.get_template('p_authorization.html')
|
||||
t = loader.get_template('pages/p_authorization.html')
|
||||
|
||||
res = HttpResponse(t.render(Dict, request))
|
||||
return res
|
||||
|
||||
7
templates/pages/p_authorization.html
Normal file
7
templates/pages/p_authorization.html
Normal file
@@ -0,0 +1,7 @@
|
||||
{% extends "tb_base.html" %}
|
||||
{% load static %}
|
||||
|
||||
{% block CONTENT %}
|
||||
|
||||
{% include "widgets/w_authorization.html" %}
|
||||
{% endblock %}
|
||||
338
templates/widgets/w_authorization.html
Normal file
338
templates/widgets/w_authorization.html
Normal file
@@ -0,0 +1,338 @@
|
||||
{% load static %}
|
||||
<head>
|
||||
<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 ;
|
||||
}
|
||||
|
||||
.chbtn {
|
||||
margin: 0 -29px 0 -29px;
|
||||
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%);
|
||||
box-shadow: 4px 4px 25px 0px #74286C;
|
||||
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, .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%);
|
||||
box-shadow: 4px 4px 25px 0px #74286C;
|
||||
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 -80%, rgba(18, 67, 191, 1) 55%);
|
||||
top: -70px;
|
||||
right: -3px;
|
||||
border-radius: 60px 60px 0 0;
|
||||
border: 3px solid #fff;
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="commonmargin">
|
||||
<div class="checks">
|
||||
<a href="#1" class="loginbtn chbtn" >вход</a>
|
||||
<a href="#2" class="registrbtn chbtn" >регистрация</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 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>
|
||||
|
||||
</body>
|
||||
Reference in New Issue
Block a user