Переделаны страницы авторизации и регистрации

This commit is contained in:
Andrei 2022-12-11 20:31:03 +05:00
parent 5302a8f0f7
commit 2f4add434a
8 changed files with 178 additions and 170 deletions

View File

@ -39,9 +39,9 @@ body {
align-content: center;
align-items: center;
}
.footer_logo {
.footer_logo, .nav_logo {
width: 7vw;
height: 7vw;
height: 6vw;
}
.footer_rights {
color: #ffffff;

View File

@ -1,81 +1,95 @@
body {
background-image: url(../images/back_main_one.jpg);
#navbar {
display: none;
}
.login_page {
background-color: #dbc3af;
width: 90%;
height: 55%;
margin-left: 5%;
margin-right: 5%;
margin-top: 5%;
border-radius: 22px;
display: flex;
align-items: center;
justify-content: center;
align-items: center;
height: 75vw;
background: linear-gradient( rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.55) ), url(../images/back_main_one.jpg);background-repeat: repeat; background-position: center;
}
.login {
width: 80%;
height: 50%;
margin-left: 10%;
margin-right: 10%;
background-color: #dbc3af;
display: flex;
flex-direction: column;
justify-content: space-evenly;
}
.login_form {
margin-bottom: 10%;
}
.header_title {
text-align: center;
color: #000000;
font-size: 3.5vw;
width: 100%;
height: auto;
transition: font-size 0.5s ease-in, text-shadow 1s ease-in;
}
.header_title:hover {
font-size: 53;
text-shadow: 0px 0px 20px #ffffff;
}
.login {
width: 60%;
align-self: center;
justify-content: center;
}
.buttons_from {
width: 100%;
display: inline-flex;
align-items: center;
justify-content: space-evenly;
}
.button {
width: 150px;
height: 35px;
border-radius: 5px;
text-align: center;
background-color: #000000;
color: #ffffff;
font: bold;
margin-left: 5px;
margin-top: 5px;
transition: background-color 0.5s ease-in, border-radius 1s ease-in, box-shadow 1s ease-in;
}
.button:hover {
background-color: #61350f;
border-color: #61350f;
color: #ffffff;
border-radius: 7px;
box-shadow: 0px 0px 50px #fff;
}
.data_block {
width: 100%;
display: inline-flex;
justify-content: space-evenly;
justify-content: center;
}
.box {
display: inline-flex;
align-content: center;
.form_data, .form_data_button {
display: flex;
flex-direction: column;
margin-left: 2%;
margin-left: 2%;
}
.form_data_button {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.input_data {
color: #000000;
border: 0.1vw solid #595008;
height: 4.7vw;
width: 20vw;
background-color: #dbc3af;
border-radius: 5vw;
font-size: 1.3vw;
}
.input_button {
width: 20vw;
height: 5vw;
border-radius: 5vw;
vertical-align: middle;
}
.form-label {
font-size: 1.3vw;
}
.login_button {
background-color: #000000;
color: #ffffff;
font-size: 1.5vw;
margin-bottom: 5px;
}
.register_button {
margin-top: 5px;
background-color: #f5c99f;
width: 20vw;
height: 5vw;
color: #000000;
border-radius: 5vw;
vertical-align: middle;
font-size: 1.5vw;
}
.register_button:hover {
text-decoration: none;
color: #000000;
}
.register {
width: 100%;
height: 100%;
text-align: center;
}
.message_block {
width: 100%;
display: inline-flex;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.message {
margin-top: 7px;
height: 50px !important;
border-radius: 22px !important;
width: 50%;
text-align: center;
.box {
margin-left: 9vw;
}

View File

@ -246,12 +246,12 @@ main, html {
width: 10vw;
height: 10vw;
}
.feedback_mail {
.feedback_mail, .feedback_mail_link {
font-size: 1.5vw;
color: #000000;
transition: color 0.5s ease-in, border-bottom 0.5s ease-in;
}
.feedback_mail:hover {
.feedback_mail_link:hover {
color: #694a2d;
border-bottom: 3px solid #f3c79e;
text-decoration: none;

View File

@ -1,81 +1,80 @@
body {
background-image: url(../images/back_main_one.jpg);
#navbar {
display: none;
}
.register_page {
background-color: #dbc3af;
width: 90%;
height: 55%;
margin-left: 5%;
margin-right: 5%;
margin-top: 5%;
border-radius: 22px;
display: flex;
align-items: center;
justify-content: center;
align-items: center;
height: 75vw;
background: linear-gradient( rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.55) ), url(../images/back_main_one.jpg);background-repeat: repeat; background-position: center;
}
.register {
width: 70%;
height: 70%;
margin-left: 15%;
margin-right: 15%;
background-color: #dbc3af;
display: flex;
flex-direction: column;
justify-content: space-evenly;
}
.register_form {
margin-bottom: 10%;
}
.header_title {
text-align: center;
color: #000000;
font-size: 3.5vw;
width: 100%;
height: auto;
transition: font-size 0.5s ease-in, text-shadow 1s ease-in;
}
.header_title:hover {
font-size: 53;
text-shadow: 0px 0px 20px #ffffff;
}
.register {
width: 60%;
align-self: center;
justify-content: center;
}
.buttons_from {
width: 100%;
display: inline-flex;
align-items: center;
justify-content: space-evenly;
}
.button {
width: 150px;
height: 35px;
border-radius: 5px;
text-align: center;
background-color: #000000;
color: #ffffff;
font: bold;
margin-left: 5px;
margin-top: 5px;
transition: background-color 0.5s ease-in, border-radius 1s ease-in, box-shadow 1s ease-in;
}
.button:hover {
background-color: #61350f;
border-color: #61350f;
color: #ffffff;
border-radius: 7px;
box-shadow: 0px 0px 50px #fff;
}
.data_block {
width: 100%;
display: inline-flex;
justify-content: space-evenly;
display: flex;
flex-direction: column;
flex-direction: column;
justify-content: center;
align-items: center;
}
.form_data, .form_data_button {
display: flex;
flex-direction: column;
margin-left: 2%;
margin-left: 2%;
}
.form_data_button {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.input_data {
color: #000000;
border: 0.1vw solid #595008;
height: 4.5vw;
width: 25vw;
background-color: #dbc3af;
border-radius: 5vw;
font-size: 1.3vw;
}
.input_button {
width: 20vw;
height: 5vw;
border-radius: 5vw;
vertical-align: middle;
}
.form-label {
font-size: 1.3vw;
}
.register_button {
margin-top: 15px;
width: 20vw;
height: 5vw;
background-color: #000000;
color: #ffffff;
border-radius: 5vw;
vertical-align: middle;
font-size: 1.5vw;
}
.box {
display: inline-flex;
align-content: center;
}
.register {
width: 100%;
height: 100%;
text-align: center;
}
.message_block {
width: 100%;
display: inline-flex;
justify-content: center;
}
.message {
margin-top: 7px;
height: 50px !important;
border-radius: 22px !important;
width: 50%;
text-align: center;
margin-left: 9vw;
}

View File

@ -23,10 +23,7 @@
<a class="navbar-brand" href="/">
<img
src="../static/images/logo_b.png"
alt="Logo"
width="80"
height="65"
class="d-inline-block align-text-top"
class="nav_logo"
/>
</a>
{% if current_user.is_authenticated %}

View File

@ -2,40 +2,38 @@
{% extends "base.html" %} {% block content %}
<div class="login_page">
<div class="login">
<div><h1 class="header_title">Авторизация</h1></div>
<h1 class="header_title">Авторизация</h1>
<div>
<form action="" method="post">
<form action="" method="post" class="login_form">
{{ form.hidden_tag() }}
<div class="data_block">
<div>
<div class="form_data">
<label class="form-label">{{ form.login.label }}</label>
{{ form.login(class="form-control data", type="login") }} {% for
{{ form.login(class="input_data", type="login", placeholder='example@mail.ex') }} {% for
error in form.login.errors %}
<div class="alert alert-danger" role="alert">{{ error }}</div>
{% endfor %}
</div>
<div>
<div class="form_data">
<label class="form-label">{{ form.password.label }}</label>
{{ form.password(class="form-control data", type="password") }} {%
{{ form.password(class="input_data", type="password", placeholder='good_password') }} {%
for error in form.password.errors %}
<div class="alert alert-danger" role="alert">{{ error }}</div>
{% endfor %}
</div>
</div>
<div class="buttons_from">
<div class="box">
{{ form.remember_me(class="form-check-input data")}} {{
form.remember_me.label }}<br/>
{% for error in form.remember_me.errors %}
<div class="alert alert-danger" role="alert">{{ error }}</div>
{% endfor %}
<div class="form_data_button">
{{ form.submit(type="submit", class="input_button login_button") }}
<a class="input_button register_button" type="submit" href="/register">
<div class="register"><strong>Регистрация</strong></div>
</a>
</div>
{{ form.submit(type="submit", class="button") }}
<a class="button" type="submit" href="/register"
>
<div class="register"><p>Регистрация</p></div>
</a
>
</div>
<div class="box">
{{ form.remember_me(class="remember")}} {{
form.remember_me.label }}<br/>
{% for error in form.remember_me.errors %}
<div class="alert alert-danger" role="alert">{{ error }}</div>
{% endfor %}
</div>
<div class="message_block">
{% if message != '' %}

View File

@ -108,7 +108,7 @@
<div class="feedback">
<h2 class="feedback_title">Вы можете связаться с нами:</h2>
<img class="feedback_logo" src="../static/images/logo_b.png">
<p><strong class="feedback_mail">Почта:</strong> <a href="mailto:incepted@yandex.ru" class="feedback_mail">incepted@yandex.ru</a></p>
<p><strong class="feedback_mail">Почта:</strong> <a class="feedback_mail_link" href="mailto:incepted@yandex.ru" class="feedback_mail">incepted@yandex.ru</a></p>
</div>
</div>
</div>

View File

@ -2,42 +2,42 @@
{% extends "base.html" %} {% block content %}
<div class="register_page">
<div class="register">
<div><h1 class="header_title">Регистрация</h1></div>
<h1 class="header_title">Регистрация</h1>
<div>
<form action="" method="post">
<form action="" method="post" class="register_form">
{{ form.hidden_tag() }}
<div class="data_block">
<div>
<div class="form_data">
<label class="form-label">{{ form.email.label }}</label>
{{ form.email(class="form-control data", type="email") }} {% for
{{ form.email(class="input_data", type="email", placeholder='example@mail.ex') }} {% for
error in form.email.errors %}
<div class="alert alert-danger" role="alert">{{ error }}</div>
{% endfor %}
</div>
<div>
<div class="form_data">
<label class="form-label">{{ form.name.label }}</label>
{{ form.name(class="form-control data", type="name") }} {%
{{ form.name(class="input_data", type="name", placeholder='name') }} {%
for error in form.name.errors %}
<div class="alert alert-danger" role="alert">{{ error }}</div>
{% endfor %}
</div>
<div>
<div class="form_data">
<label class="form-label">{{ form.login.label }}</label>
{{ form.login(class="form-control data", type="login") }} {%
{{ form.login(class="input_data", type="login", placeholder='login') }} {%
for error in form.login.errors %}
<div class="alert alert-danger" role="alert">{{ error }}</div>
{% endfor %}
</div>
<div>
<div class="form_data">
<label class="form-label">{{ form.password.label }}</label>
{{ form.password(class="form-control data", type="password") }} {%
{{ form.password(class="input_data", type="password", placeholder='good_password') }} {%
for error in form.password.errors %}
<div class="alert alert-danger" role="alert">{{ error }}</div>
{% endfor %}
</div>
</div>
<div class="buttons_from">
{{ form.submit(type="submit", class="button") }}
<div class="form_data_button">
{{ form.submit(type="submit", class="register_button") }}
</div>
</div>
<div class="message_block">
{% if message != '' %}