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

static/css/base.css

@@ -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;

static/css/login.css

@@ -1,81 +1,95 @@
-body {
+#navbar {
-    background-image: url(../images/back_main_one.jpg);
+    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 {
+.form_data, .form_data_button {
-    display: inline-flex;
+    display: flex;
-    align-content: center;
+    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;
-}
+    height: 100%;
-.message_block {
+    display: flex;
-    width: 100%;
+    align-items: center;
-    display: inline-flex;
     justify-content: center;
 }
-.message {
+.box {
-    margin-top: 7px;
+    margin-left: 9vw;
-    height: 50px !important;
-    border-radius: 22px !important;
-    width: 50%;
-    text-align: center;
 }

static/css/main.css

@@ -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;

static/css/register.css

@@ -1,81 +1,80 @@
-body {
+#navbar {
-    background-image: url(../images/back_main_one.jpg);
+    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;
+    display: flex;
-    justify-content: space-evenly;
+    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;
+    margin-left: 9vw;
-    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;
 }

templates/base.html

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

templates/login.html

@@ -2,41 +2,39 @@
 {% 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 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>
                 </div>
-                <div class="buttons_from">
                 <div class="box">
-                        {{ form.remember_me(class="form-check-input data")}} {{
+                    {{ 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>
-                    {{ form.submit(type="submit", class="button") }}
-                    <a class="button" type="submit" href="/register"
-                    >
-                        <div class="register"><p>Регистрация</p></div>
-                    </a
-                    >
-                </div>
                 <div class="message_block">
                 {% if message != '' %}
                 {% if danger %}

templates/main.html

@@ -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>

templates/register.html

@@ -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 class="form_data_button">
+                        {{ form.submit(type="submit", class="register_button") }}
                     </div>
-                <div class="buttons_from">
-                    {{ form.submit(type="submit", class="button") }}
                 </div>
                 <div class="message_block">
                     {% if message != '' %}