Переделана главная страница

forms/login.py

@@ -4,7 +4,7 @@ from wtforms.validators import DataRequired
 
 
 class LoginForm(FlaskForm):
-    email = EmailField('Почта', validators=[DataRequired()])
+    login = EmailField('Почта', validators=[DataRequired()])
     password = PasswordField('Пароль', validators=[DataRequired()])
     remember_me = BooleanField('Запомнить меня')
     submit = SubmitField('Войти')

main.py

@@ -35,11 +35,11 @@ def load_user(user_id):
 def login():
     if not current_user.is_authenticated:
         message = request.args.get('message') if request.args.get('message') else ''
-        email_repeat = request.args.get('email_repeat') if request.args.get('email_repeat') else False
+        danger = request.args.get('danger') if request.args.get('danger') else False
         form = LoginForm()
         if form.validate_on_submit():
             db_sess = db_session.create_session()
-            user = db_sess.query(User).filter(User.email == form.email.data).first()
+            user = db_sess.query(User).filter(User.email == form.login.data).first()
             if user and user.check_password(form.password.data):
                 if user.activated:
                     login_user(user, remember=form.remember_me.data)
@@ -47,11 +47,14 @@ def login():
                 else:
                     return render_template('login.html',
                                            message="Ваша почта не подтверждена",
+                                           danger=True,
                                            form=form)
             return render_template('login.html',
                                    message="Неправильный логин или пароль",
+                                   danger=True,
                                    form=form)
-        return render_template('login.html', title='Авторизация', form=form, message=message, email_repeat=email_repeat)
+        return render_template('login.html', title='Авторизация', form=form, message=message,
+                               danger=danger)
     else:
         return redirect('/')
 
@@ -109,7 +112,7 @@ def confirmation(token):
             data_session.close()
             return redirect('/login?message=Почта успешно подтверждена')
         else:
-            return redirect('/login?message=Пользователь не найден')
+            return redirect('/login?message=Пользователь не найден&danger=True')
     except SignatureExpired:
         data_session = db_session.create_session()
         users = data_session.query(User).filter(
@@ -118,7 +121,7 @@ def confirmation(token):
             list(map(lambda x: data_session.delete(x), users))
             data_session.commit()
         data_session.close()
-        return redirect('/login?message=Срок действия ссылки истек, данные удалены')
+        return redirect('/login?message=Срок действия ссылки истек, данные удалены&danger=True')
 
 
 def main():

static/css/base.css

@@ -8,6 +8,7 @@ body {
 .navbar {
     background-color: #dcb495;
     display: inline-flex;
+    height: 8vw;
 }
 .auth_button {
     color: #ffffff;
@@ -18,4 +19,27 @@ body {
     font-size: 1.55vw;
     color: #ffffff;
     text-shadow: 0px 0px 20px #ffffff;
+}
+
+.footer {
+    background-color: #171717;
+    height: 15vw;
+}
+.footer_block {
+    height: 100%;
+    width: 90%; 
+    margin-left: 5%;
+    display: flex;
+    align-content: center;
+    align-items: center;
+}
+.footer_logo {
+    width: 7vw;
+    height: 7vw;
+}
+.footer_rights {
+    color: #ffffff;
+    font-size: 1.5vw;
+    width: 85%;
+    text-align: center;
 }

static/css/login.css

@@ -66,4 +66,16 @@ body {
     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;
 }

static/css/main.css

@@ -1,28 +1,29 @@
+main, html {
+    background-color: #dcb495;
+}
 .header_block {
-    background-image: url(../images/back_main_one.jpg);
-    ​​​​​​​background-repeat: no-repeat;
     width: 100%;
-    height: 50%;
+    height: 75vw;
     background-position: center;
     display: flex;
     justify-content: center;
-    align-items: center;
     flex-direction: column;
+    background: linear-gradient( rgba(0, 0, 0, 0.85), rgba(0, 0, 0, 0.85) ), url(../images/back_main_one.jpg);background-repeat: repeat;  background-position: center;
 }
 .header_title {
+    margin-left: 10%;
     color: #ffffff;
-    -webkit-text-stroke: 1px rgba(0, 0, 0, 0.486);
     font: bold;
-    font-size: 3.5vw;
+    font-size: 4vw;
     transition: font-size 0.5s ease-in, text-shadow 1s ease-in;
 }
 .header_title:hover {
-    font-size: 3.55vw;
+    font-size: 4.05vw;
     text-shadow: 0px 0px 20px #ffffff;
 }
 .header_title_2 {
-    color: #ffffff;
-    -webkit-text-stroke: 1px rgba(0, 0, 0, 0.486);
+    margin-left: 10%;
+    color: #afafaf;
     font: bold;
     font-size: 2vw;
     transition: font-size 0.5s ease-in, text-shadow 1s ease-in;
@@ -30,4 +31,209 @@
 .header_title_2:hover {
     font-size: 2.05vw;
     text-shadow: 0px 0px 20px #ffffff;
+}
+.header_buttons {
+    margin-top: 5%;
+    margin-left: 10%;
+    width: 90%;
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+}
+.header_button {
+    background-color: #f5c99f;
+    width: 20vw;
+    height: 5vw;
+    color: #000000;
+    border-radius: 30px;
+    vertical-align: middle;
+}
+#link_to_about {
+    margin-left: 40px;
+    background-color: #000000;
+    color: #ffffff;
+    border: 2px solid #ffffff;
+}
+.header_button_text {
+    width: 100%;
+    height: 100%;
+    text-align: center;
+    font-size: 1.5vw;
+    margin-top: 5%;
+}
+.body_block {
+    background-color: #dcb495;
+}
+.about_block {
+    margin-top: 10%;
+    margin-left: 5%;
+    width: 90%;
+}
+.about_title {
+    color: #000000;
+    font-size: 4vw;
+}
+.about_info_block {
+    margin-top: 50px;
+    width: 100%;
+    display: inline-flex;
+    justify-content: space-between;
+}
+.about_article_block {
+    display: flex;
+    flex-direction: column;
+    align-content: space-around;
+}
+.about_article {
+    display: inline-flex;
+    justify-content: flex-start;
+    align-items: center;
+}
+.article_image {
+    width: 10vw;
+    height: 10vw;
+}
+.main_image {
+    width: 40vw;
+    height: 26vw;
+}
+.article_text {
+    max-width: 70%;
+    margin-left: 10px;
+    font-size: 1.3vw;
+}
+.how_work_block {
+    margin-top: 20%;
+    margin-left: 5%;
+    width: 90%;
+}
+.how_work_title {
+    text-align: center;
+    color: #000000;
+    font-size: 4vw;
+}
+.how_work_info_block {
+    display: inline-flex;
+    justify-content: space-evenly;
+    margin-top: 100px;
+}
+.how_work_image {
+    width: 10vw;
+    height: 10vw;
+}
+.how_work_info, .how_work_article {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+}
+.how_work_article_title {
+    text-align: center;
+    font-size: 1.5vw;
+}
+.how_work_article_text {
+    text-align: center;
+    margin-top: 1vw;
+    font-size: 1.1vw;
+}
+.reg_block {
+    margin-top: 20%;
+    margin-left: 5%;
+    width: 90%;
+    height: 50vw;
+}
+.reg_content_block {
+    margin-top: 100px;
+    width: 100%;
+    display: inline-flex;
+    justify-content: space-between;
+    flex-wrap: nowrap;
+    align-content: center;
+}
+.reg_title {
+    text-align: center;
+    color: #000000;
+    font-size: 4vw;
+}
+.reg_content {
+    display: flex;
+    flex-direction: column;
+    align-self: center;
+    align-content: space-evenly;
+}
+.reg_button_group {
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+}
+.reg_button_title {
+    margin-bottom: 10%;
+    color: #000000;
+    font-size: 2.5vw;
+    text-align: left;
+}
+.reg_button_info {
+    margin-top: 8%;
+}
+.reg_button_group {
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+.reg_button {
+    background-color: #a8886f;
+    width: 18vw;
+    height: 5vw;
+    color: #ffffff;
+    border-radius: 30px;
+    vertical-align: middle;
+}
+.reg_button_text {
+    width: 100%;
+    height: 100%;
+    text-align: center;
+    font-size: 1.5vw;
+    margin-top: 6%;
+}
+#link_to_start{
+    background-color:#f5d3b8;
+}
+#link_to_start_text {
+    color: #000000;
+}
+.feedback_block {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 75vw;
+    background: linear-gradient( rgba(0, 0, 0, 0.85), rgba(0, 0, 0, 0.85) ), url(../images/back_main_two.jpg);background-repeat: repeat;  background-position: center;
+}
+.feedback {
+    width: 50%;
+    height: 80%;
+    margin-left: 25%;
+    margin-right: 25%;
+    background-color: #dcb495;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    align-content: space-around;
+}
+.feedback_title {
+    width: 80%;
+    margin-bottom: 20%;
+    text-align: center;
+    color: #000000;
+    font-size: 3vw;
+}
+.feedback_logo {
+    margin-bottom: 20%;
+    width: 10vw;
+    height: 10vw;
+}
+.feedback_mail {
+    font-size: 1.5vw;
+    color: #000000;
 }

static/css/register.css

@@ -66,4 +66,16 @@ body {
     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;
 }

static/images/yellow_cup.svg

@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 21.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 100 100" style="enable-background:new 0 0 100 100;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:none;stroke:#FFD014;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
+</style>
+<g>
+	<path class="st0" d="M71,40.7c0,13.3-9.1,24.1-20.4,24.1c-11.2,0-20.4-10.8-20.4-24.1V8.3H71V40.7z"/>
+	<path class="st0" d="M55.4,64v1.4C55.4,74,62.4,81,71,81l0,0V89H55.4h-9.8H30.5V81l0,0c8.6,0,15.1-7,15.1-15.6V64"/>
+	<path class="st0" d="M70.7,16.4H87c0,0-0.9,24.4-16.9,31.5"/>
+	<path class="st0" d="M30.3,16.4H14c0,0,0.9,24.4,16.9,31.5"/>
+</g>
+<path class="st0" d="M50.2,19.2L46.4,27l-8.6,1.2c-0.7,0.1-1.1,1-0.5,1.6l6.2,6.1L42,44.5c-0.1,0.7,0.6,1.3,1.3,1l7.9-4l7.5,3.9
+	c0.7,0.4,1.5-0.2,1.3-1l-1.5-8.5l6.2-6.1c0.5-0.5,0.2-1.5-0.5-1.6L55.7,27l-3.8-7.8C51.5,18.6,50.5,18.6,50.2,19.2z"/>
+</svg>

static/images/yellow_like.svg

@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 21.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 100 100" style="enable-background:new 0 0 100 100;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:none;stroke:#FFD014;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
+	.st1{fill:none;stroke:#FFD014;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
+</style>
+<rect x="15.4" y="32.9" class="st0" width="16.6" height="45.3"/>
+<path class="st0" d="M32,37.5c0,0,13.9-9,13.2-17.6c-0.7-8.6,3.7-9.5,6.3-8.5c2.6,1.1,7.6,5.2,8,13.5c0.4,7.3-2.9,10.1-2.9,10.1H73
+	h5.8c3.4,0,6.1,2.5,6.1,5.5l0,0c0,3.1-2.7,5.6-6.1,5.6"/>
+<path class="st1" d="M74.8,46.3h5.7c3.6,0,6.5,2.8,6.5,6.2l0,0c0,3.4-2.9,6.2-6.5,6.2h-6.8"/>
+<path class="st1" d="M72.3,58.6h4.6c3.6,0,6.5,2.8,6.5,6.2l0,0c0,3.4-2.9,6.2-6.5,6.2h-4.6"/>
+<path class="st1" d="M67.4,71h4.9c3.6,0,6.5,2.8,6.5,6.2l0,0c0,3.4-2.9,6.2-6.5,6.2l-13.9-0.1C50.1,83,31,75.8,31,75.8"/>
+</svg>

static/images/yellow_man.svg

@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 21.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 100 100" style="enable-background:new 0 0 100 100;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:none;stroke:#FFD014;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
+</style>
+<g>
+	<path class="st0" d="M27.6,23.7c6.5-0.5,9.4-1.8,14.2-3.8c5.4-2.3,7.7-5.6,13.6-6.2c3-0.3,11.9,6.5,14.8,7.2"/>
+	<path class="st0" d="M10.1,95.8c0-22.1,17.9-40,40-40s40,17.9,40,40H10.1z"/>
+	<circle class="st0" cx="49.3" cy="25.7" r="22.3"/>
+</g>
+<polyline class="st0" points="32.6,60.2 50.6,72.5 67.4,60.2 "/>
+</svg>

templates/base.html

@@ -38,5 +38,11 @@
 </nav>
 <!-- Begin page content -->
 <main role="main">{% block content %}{% endblock %}</main>
+<footer class="footer">
+    <div class="footer_block">
+        <a href="/#header_block"><img class="footer_logo" src="../static/images/logo_w.png"></a>
+        <strong class="footer_rights">© All rights reserved</strong>
+    </div>
+</footer>
 </body>
 </html>

templates/login.html

@@ -1,45 +1,57 @@
-<link rel="stylesheet" href="../static/css/login.css" />
+<link rel="stylesheet" href="../static/css/login.css"/>
 {% extends "base.html" %} {% block content %}
 <div class="login_page">
-  <div class="login">
-    <div><h1 class="header_title">Авторизация</h1></div>
-    <div>
-      <form action="" method="post">
-        {{ form.hidden_tag() }}
-        <div class="data_block">
-          <div>
-            <label class="form-label">{{ form.email.label }}</label>
-            {{ form.email(class="form-control data", type="email") }} {% for
-            error in form.email.errors %}
-            <div class="alert alert-danger" role="alert">{{ error }}</div>
-            {% endfor %}
-          </div>
-          <div>
-            <label class="form-label">{{ form.password.label }}</label>
-            {{ form.password(class="form-control data", type="password") }} {%
-            for error in form.password.errors %}
-            <div class="alert alert-danger" role="alert">{{ error }}</div>
-            {% endfor %}
-          </div>
+    <div class="login">
+        <div><h1 class="header_title">Авторизация</h1></div>
+        <div>
+            <form action="" method="post">
+                {{ form.hidden_tag() }}
+                <div class="data_block">
+                    <div>
+                        <label class="form-label">{{ form.login.label }}</label>
+                        {{ form.login(class="form-control data", type="login") }} {% for
+                        error in form.login.errors %}
+                        <div class="alert alert-danger" role="alert">{{ error }}</div>
+                        {% endfor %}
+                    </div>
+                    <div>
+                        <label class="form-label">{{ form.password.label }}</label>
+                        {{ form.password(class="form-control data", type="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>
+                    {{ 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 %}
+                <div class="alert alert-danger message" role="alert">
+                    {{ message }}
+                </div>
+                {% else %}
+                <div class="alert alert-success message" role="alert">
+                    {{ message }}
+                </div>
+                {% endif %}
+                {% endif %}
+                </div>
+            </form>
         </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>
-          {{ form.submit(type="submit", class="button") }}
-          <a class="button" type="submit" href="/register"
-            ><div class="register"><p>Регистрация</p></div></a
-          >
-        </div>
-        {% if message != '' %}
-        <div class="alert alert-danger" role="alert">{{ message }}</div>
-        {% endif %}
-      </form>
     </div>
-  </div>
 </div>
 {% endblock %}

templates/main.html

@@ -2,8 +2,112 @@
 {% extends "base.html" %}
 
 {% block content %}
-<div class="header_block">
-    <h2 class="header_title">#1 Сайт по проектированию!</h2>
-    <strong class="header_title_2">Создавай, пользуйся, составляй!</strong>
+<div class="header_block" id="header_block">
+    <div class="header_text">
+        <h2 class="header_title">INCEPTED</h2>
+        <strong class="header_title_2">Самый удобный сайт для создания проектов</strong>
+    </div>
+    <div class="header_buttons">
+        <a class="header_button" href="/register">
+            <div class="header_button_text">
+                <p>Регистрация</p>
+            </div>
+        </a>
+        <a class="header_button" id="link_to_about" href="#about_block">
+            <div class="header_button_text">
+                <p>Больше о нас</p>
+            </div>
+        </a>
+    </div>
+</div>
+<div class="body_block">
+    <div class="about_block" id="about_block">
+        <h2 class="about_title">Почему INCEPTED?</h2>
+        <div class="about_info_block">
+            <div class="about_article_block">
+                <div class="about_article">
+                    <img class="article_image" src="../static/images/yellow_man.svg">
+                    <strong class="article_text">Проект INCEPTED позволяет создавать проекты, поддерживать их, вести
+                        учет активности участников,
+                        контролировать их материалы и получать уведомления по истечению срока дедлайна</strong>
+                </div>
+                <div class="about_article">
+                    <img class="article_image" src="../static/images/yellow_cup.svg">
+                    <strong class="article_text">Индивидуальные и расширенные возможности по созданию проектов</strong>
+                </div>
+                <div class="about_article">
+                    <img class="article_image" src="../static/images/yellow_like.svg">
+                    <strong class="article_text">Быстро, удобно, без лишних функций</strong>
+                </div>
+            </div>
+            <img src="../static/images/main_image_1.jpg" class="main_image">
+        </div>
+    </div>
+    <div class="how_work_block">
+        <h2 class="how_work_title">Как это работает ?</h2>
+        <div class="how_work_info_block">
+            <div class="how_work_info">
+                <img src="../static/images/main_image_2.png" class="how_work_image">
+                <div class="how_work_article">
+                    <strong class="how_work_article_title">Появление идеи</strong>
+                    <p class="how_work_article_text">Вы в любой момент можете создать и заполнить описание проекта, как
+                        и построить задачи для него.</p>
+                </div>
+            </div>
+            <div class="how_work_info">
+                <img src="../static/images/main_image_3.png" class="how_work_image">
+                <div class="how_work_article">
+                    <strong class="how_work_article_title">Сбор команды</strong>
+                    <p class="how_work_article_text">Вы можете добавить участников в свою команду и дать им необходимые
+                        задачи.</p>
+                </div>
+            </div>
+            <div class="how_work_info">
+                <img src="../static/images/main_image_4.png" class="how_work_image">
+                <div class="how_work_article">
+                    <strong class="how_work_article_title">Проверка выполнения</strong>
+                    <p class="how_work_article_text">В редакторе проекта вы можете отслеживать выполнение задач
+                        участников и проверять их</p>
+                </div>
+            </div>
+            <div class="how_work_info">
+                <img src="../static/images/main_image_5.png" class="how_work_image">
+                <div class="how_work_article">
+                    <strong class="how_work_article_title">Представление проекта</strong>
+                    <p class="how_work_article_text">После завершения проекта вы можете вывести в виде архива со всеми
+                        нужными файлами или заморозить его.</p>
+                </div>
+            </div>
+        </div>
+    </div>
+    <div class="reg_block">
+        <h2 class="reg_title">Зарегистрируйся и пользуйся!</h2>
+        <div class="reg_content_block">
+            <div class="reg_content">
+                <p class="reg_button_title">Проектирование ждет тебя !</p>
+                <div class="reg_button_group">
+                    <a class="reg_button" href="/register">
+                        <div class="reg_button_text">
+                            <strong>Регистрация</strong>
+                        </div>
+                    </a>
+                    <a class="reg_button" id="link_to_start" href="#header_block">
+                        <div class="reg_button_text" id="link_to_start_text">
+                            <strong>В самое начало</strong>
+                        </div>
+                    </a>
+                </div>
+                <p class="reg_button_info">Регистрируясь, вы подтверждаете политику конфиденциальности.</p>
+            </div>
+            <img src="../static/images/main_image_6.jpg" class="main_image">
+        </div>
+    </div>
+    <div class="feedback_block">
+        <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>
+        </div>
+    </div>
 </div>
 {% endblock %}

templates/register.html

@@ -39,9 +39,11 @@
                 <div class="buttons_from">
                     {{ form.submit(type="submit", class="button") }}
                 </div>
-                {% if message != '' %}
-                <div class="alert alert-danger" role="alert">{{ message }}</div>
-                {% endif %}
+                <div class="message_block">
+                    {% if message != '' %}
+                    <div class="alert alert-danger message" role="alert">{{ message }}</div>
+                    {% endif %}
+                </div>
             </form>
         </div>
     </div>