devmanorg · xXchelikXx · Aug 4, 2024 · Sep 22, 2024 · Sep 22, 2024 · Sep 22, 2024
diff --git a/.gitignore b/.gitignore
@@ -135,4 +135,6 @@ dmypy.json
 .pytype/
 
 # Cython debug symbols
-cython_debug/
+cython_debug/
+
+media/
diff --git a/README.md b/README.md
@@ -27,69 +27,6 @@
 - `MEDIA_URL` — по умолчанию это `'/media/'`. [Что такое MEDIA_URL](https://docs.djangoproject.com/en/3.0/ref/settings/#std:setting-MEDIA_URL).
 - `MEDIA_ROOT` — по умолчанию это `'media'`. [Что такое MEDIA_ROOT](https://docs.djangoproject.com/en/3.0/ref/settings/#std:setting-MEDIA_ROOT). 
 
-
-## Страницы сайта
-
-### Главная
-
-Страница называется `index` и находится по адресу [http://127.0.0.1:8000](http://127.0.0.1:8000).
-
-Шаблон страницы получает 2 переменные: `most_popular_posts` и `fresh_posts`.
-Обе переменные — это списки из **постов**. Каждый пост — это словарь такого вида:
-
-```
-{
-    'title': 'Are You Preparing Your Kids for the Real World?',
-    'text': 'We baby our kids like infants; we coddle them like delicate crystal; ...',
-    'author': 'Frank Sonnenberg',
-    'comments_amount': 138,
-    'image_url': 'image_are-you-preparing-your-kids-for-the-real-world.jpg',
-    'published_at': datetime.datetime(2017, 6, 4, 2, 9, tzinfo=<UTC>),
-    'slug': 'are-you-preparing-your-kids-for-the-real-world'
-}
-```
-
-Словарь содержит следующие ключи:
-
-* `title` — заголовок поста
-* `text` — текст поста
-* `author` — строка с именем автора поста
-* `comments_amount` — число комментариев под постом
-* `image_url` — ссылка на картинку поста
-* `published_at` — когда пост опубликован, это объект datetime
-* `slug` — [слаг](https://toster.ru/q/375615)
-
-
-
-### Страница поста
-
-Страница называется `post_detail` и требует передать `slug` поста. Пример страницы можно найти по адресу [http://127.0.0.1:8000/post/5-qualities-of-great-leaders](http://127.0.0.1:8000/post/5-qualities-of-great-leaders). Это страница поста со слагом `5-qualities-of-great-leaders`.
-
-Шаблон страницы получает переменную: `post`.
-
-`post` — это словарь, похожий на посты на главной, но с отличиями:
-
-* `title` — заголовок поста
-* `text` — текст поста
-* `author` — строка с именем автора поста
-* `comments` — **список комментариев** (о них ниже)
-* `likes_amount` — число лайков под постом
-* `image_url` — ссылка на картинку поста
-* `published_at` — когда пост опубликован, это объект datetime
-* `slug` — [слаг](https://toster.ru/q/375615)
-
-Каждый **комментарий** — это словарь вида:
-
-* `text` — текст комментария
-* `published_at` — когда пост опубликован, это объект datetime
-* `author` — строка с именем автора поста
-
-### Контакты
-
-Страница называется `contact`.
-
-Её можно найти по адресу [127.0.0.1:8000/contacts](127.0.0.1:8000/contacts). К шаблонизации в неё отдаётся только переменная `html_map`. Это строка, в которой лежит HTML-код с картой.
-
 ## Цели проекта
 
 Код написан в учебных целях — это урок в курсе по Python и веб-разработке на сайте [Devman](https://dvmn.org).
diff --git a/requirements.txt b/requirements.txt
@@ -1,5 +1,5 @@
 Django==2.2.24
 environs==5.2.1
-Pillow==8.3.2
+Pillow==10.0.*
 folium==0.10.0
 django-debug-toolbar==2.2.1
diff --git a/static/.gitkeep b/static/.gitkeep
diff --git a/static/fonts/Linearicons-Free.eot b/static/fonts/Linearicons-Free.eot
diff --git a/static/fonts/Linearicons-Free.svg b/static/fonts/Linearicons-Free.svg
diff --git a/static/fonts/Linearicons-Free.ttf b/static/fonts/Linearicons-Free.ttf
diff --git a/static/fonts/Linearicons-Free.woff b/static/fonts/Linearicons-Free.woff
diff --git a/static/fonts/Linearicons-Free.woff2 b/static/fonts/Linearicons-Free.woff2
diff --git a/static/fonts/fa-brands-400.eot b/static/fonts/fa-brands-400.eot
diff --git a/static/fonts/fa-brands-400.ttf b/static/fonts/fa-brands-400.ttf
diff --git a/static/fonts/fa-brands-400.woff b/static/fonts/fa-brands-400.woff
diff --git a/static/fonts/fa-brands-400.woff2 b/static/fonts/fa-brands-400.woff2
diff --git a/static/fonts/fa-regular-400.eot b/static/fonts/fa-regular-400.eot
diff --git a/static/fonts/fa-regular-400.ttf b/static/fonts/fa-regular-400.ttf
diff --git a/static/fonts/fa-regular-400.woff b/static/fonts/fa-regular-400.woff
diff --git a/static/fonts/fa-regular-400.woff2 b/static/fonts/fa-regular-400.woff2
diff --git a/static/fonts/fa-solid-900.eot b/static/fonts/fa-solid-900.eot
diff --git a/static/fonts/fa-solid-900.ttf b/static/fonts/fa-solid-900.ttf
diff --git a/static/fonts/fa-solid-900.woff b/static/fonts/fa-solid-900.woff
diff --git a/static/fonts/fa-solid-900.woff2 b/static/fonts/fa-solid-900.woff2
diff --git a/static/fonts/themify.eot b/static/fonts/themify.eot
diff --git a/static/fonts/themify.svg b/static/fonts/themify.svg
diff --git a/static/fonts/themify.ttf b/static/fonts/themify.ttf
diff --git a/static/fonts/themify.woff b/static/fonts/themify.woff
diff --git a/static/hero-banner.png b/static/hero-banner.png
diff --git a/static/img/banner/blog.png b/static/img/banner/blog.png
diff --git a/static/img/banner/hero-banner.png b/static/img/banner/hero-banner.png
diff --git a/static/img/blog/blog-slider/blog-slide1.png b/static/img/blog/blog-slider/blog-slide1.png
diff --git a/static/img/blog/blog-slider/blog-slide2.png b/static/img/blog/blog-slider/blog-slide2.png
diff --git a/static/img/blog/blog-slider/blog-slide3.png b/static/img/blog/blog-slider/blog-slide3.png
diff --git a/static/img/blog/blog1.png b/static/img/blog/blog1.png
diff --git a/static/img/blog/blog2.png b/static/img/blog/blog2.png
diff --git a/static/img/blog/blog3.png b/static/img/blog/blog3.png
diff --git a/static/img/blog/blog4.png b/static/img/blog/blog4.png
diff --git a/static/img/favicon.png b/static/img/favicon.png
diff --git a/static/img/logo.png b/static/img/logo.png
diff --git a/static/scripts.js b/static/scripts.js
diff --git a/static/styles.min.css b/static/styles.min.css
diff --git a/templates/base.html b/templates/base.html
@@ -0,0 +1,134 @@
+<!DOCTYPE html>
+{% load static %}
+<html lang="en">
+
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <title>
+      {% block title %}
+      {% endblock %}
+    </title>
+    <link rel="icon" href="{% static 'img/favicon.png' %}" type="image/png">
+
+    <link rel="stylesheet" href="{% static 'styles.min.css' %}">
+  </head>
+
+  <body>
+    <!--================Header Menu Area =================-->
+    <header class="header_area">
+      <div class="main_menu">
+        <nav class="navbar navbar-expand-lg navbar-light">
+          <div class="container box_1620">
+            <!-- Brand and toggle get grouped for better mobile display -->
+            <a class="navbar-brand logo_h" href="{% url 'index' %}"><img src="{% static 'img/logo.png' %}" alt="лого"></a>
+            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
+              aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
+              <span class="icon-bar"></span>
+              <span class="icon-bar"></span>
+              <span class="icon-bar"></span>
+            </button>
+            <!-- Collect the nav links, forms, and other content for toggling -->
+            <div class="collapse navbar-collapse offset" id="navbarSupportedContent">
+              <ul class="nav navbar-nav menu_nav justify-content-center">
+                <li class="nav-item active"><a style="color:#3a414e" class="nav-link"
+                    href="{% url 'index' %}">Home</a></li>
+                <li class="nav-item"><a class="nav-link" href="{% url 'contact' %}">Contact</a></li>
+              </ul>
+              <ul class="nav navbar-nav navbar-right navbar-social">
+                <li><a href="#"><i class="ti-facebook"></i></a></li>
+                <li><a href="#"><i class="ti-twitter-alt"></i></a></li>
+                <li><a href="#"><i class="ti-instagram"></i></a></li>
+                <li><a href="#"><i class="ti-skype"></i></a></li>
+              </ul>
+            </div>
+          </div>
+        </nav>
+      </div>
+    </header>
+    <!--================Header Menu Area =================-->
+
+    {% block content %}
+    {% endblock %}
+    <!--================ Start Footer Area =================-->
+    <footer class="footer-area section-padding">
+      <div class="container">
+        <div class="row">
+          <div class="col-lg-3  col-md-6 col-sm-6">
+            <div class="single-footer-widget">
+              <h6>About Us</h6>
+              <p>
+                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
+                dolore
+                magna aliqua.
+              </p>
+            </div>
+          </div>
+          <div class="col-lg-4  col-md-6 col-sm-6">
+            <div class="single-footer-widget">
+              <h6>Newsletter</h6>
+              <p>Stay update with our latest</p>
+              <div class="" id="mc_embed_signup">
+
+                <form target="_blank" novalidate
+                  action="https://spondonit.us12.list-manage.com/subscribe/post?u=1462626880ade1ac87bd9c93a&amp;id=92a4423d01"
+                  method="get" class="form-inline">
+
+                  <div class="d-flex flex-row">
+
+                    <input class="form-control" name="EMAIL" placeholder="Enter Email" onfocus="this.placeholder = ''"
+                      onblur="this.placeholder = 'Enter Email '" required="" type="email">
+
+
+                    <button class="click-btn btn btn-default"><span class="lnr lnr-arrow-right"></span></button>
+                    <div style="position: absolute; left: -5000px;">
+                      <input name="b_36c4fd991d266f23781ded980_aefe40901a" tabindex="-1" value="" type="text">
+                    </div>
+
+                  </div>
+                  <div class="info"></div>
+                </form>
+              </div>
+            </div>
+          </div>
+          <div class="col-lg-3  col-md-6 col-sm-6">
+          </div>
+          <div class="col-lg-2 col-md-6 col-sm-6">
+            <div class="single-footer-widget">
+              <h6>Follow Us</h6>
+              <p>Let us be social</p>
+              <div class="footer-social d-flex align-items-center">
+                <a href="#">
+                  <i class="fab fa-facebook-f"></i>
+                </a>
+                <a href="#">
+                  <i class="fab fa-twitter"></i>
+                </a>
+                <a href="#">
+                  <i class="fab fa-dribbble"></i>
+                </a>
+                <a href="#">
+                  <i class="fab fa-behance"></i>
+                </a>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="footer-bottom d-flex justify-content-center align-items-center flex-wrap">
+          <p class="footer-text m-0">
+            <!-- Link back to Colorlib can't be removed. Template is licensed under CC BY 3.0. -->
+            Copyright &copy;
+            <script>document.write(new Date().getFullYear());</script> All rights reserved | This template is made with <i
+              class="fa fa-heart" aria-hidden="true"></i> by <a href="https://colorlib.com" target="_blank">Colorlib</a>
+            <!-- Link back to Colorlib can't be removed. Template is licensed under CC BY 3.0. -->
+          </p>
+        </div>
+      </div>
+    </footer>
+    <!--================ End Footer Area =================-->
+
+    <script src="{% static 'scripts.js' %}"></script>
+  </body>
+
+</html>
diff --git a/templates/blog-details.html b/templates/blog-details.html
@@ -1,7 +1,113 @@
-<!DOCTYPE html>
-<html>
-<head></head>
-<body>
-    <h1>Страница поста</h1>
-</body>
-</html>
+{% extends 'base.html' %}
+{% load static %}
+{% block title %}
+  {{ post.title }} - Blog Details
+{% endblock %}
+{% block content %}
+  <!--================ Hero sm Banner start =================-->
+  <section class="mb-30px">
+    <div class="container">
+      <div class="hero-banner hero-banner--sm">
+        <div class="hero-banner__content">
+          <h1>Blog details</h1>
+          <nav aria-label="breadcrumb" class="banner-breadcrumb">
+            <ol class="breadcrumb">
+              <li class="breadcrumb-item"><a href="{% url 'index' %}">Home</a></li>
+              <li class="breadcrumb-item active" aria-current="page">Blog Details</li>
+            </ol>
+          </nav>
+        </div>
+      </div>
+    </div>
+  </section>
+  <!--================ Hero sm Banner end =================-->
+
+
+  <!--================ Start Blog Post Area =================-->
+  <section class="blog-post-area section-margin">
+    <div class="container">
+      <div class="row">
+        <div class="col-lg-8">
+          <div class="main_blog_details">
+            {% if post.image_url %}
+              <img class="img-fluid" src="{{post.image_url}}" alt="изображение поста">
+            {% else %}
+              <img class="img-fluid" src="{% static 'img/banner/blog.png' %}" alt="баннер">
+            {% endif %}
+            <h4>{{post.title}}</h4>
+            <div class="user_details">
+              <div class="mt-sm-0 mt-3">
+                <div class="media">
+                  <div class="media-body">
+                    <h5>{{post.author}}</h5>
+                    <p>{{post.published_at}}</p>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <p>{{post.text}}</p>
+            <div class="news_d_footer flex-column flex-sm-row">
+              <a href="#"><span class="align-middle mr-2"><i class="ti-heart" ,
+                    style="color:red"></i></span>{{post.likes_amount}}</a>
+              <a class="justify-content-sm-center ml-sm-auto mt-sm-0 mt-2" href="#"><span class="align-middle mr-2"><i
+                    class="ti-themify-favicon"></i></span>{{post.comments|length}} Comments</a>
+              <div class="news_socail ml-sm-auto mt-sm-0 mt-2">
+                <a href="#"><i class="fab fa-facebook-f"></i></a>
+                <a href="#"><i class="fab fa-twitter"></i></a>
+                <a href="#"><i class="fab fa-dribbble"></i></a>
+                <a href="#"><i class="fab fa-behance"></i></a>
+              </div>
+            </div>
+          </div>
+
+
+          <div class="comments-area">
+            <h4>{{post.comments|length}} Comments</h4>
+            <div class="comment-list">
+              {% for comment in post.comments %}
+                <div class="single-comment justify-content-between d-flex">
+                  <div class="user justify-content-between d-flex">
+                    <div class="desc">
+                      <h5><a href="#">{{comment.author}}</a></h5>
+                      <p class="date">{{comments.published_at}}</p>
+                      <p class="comment">
+                        {{comment.text}}
+                      </p>
+                    </div>
+                  </div>
+                  <div class="reply-btn">
+                    <a href="" class="btn-reply text-uppercase">reply</a>
+                  </div>
+                </div>
+              {% endfor %}
+            </div>
+          </div>
+        </div>
+
+
+        <!-- Start Blog Post Siddebar -->
+        <div class="col-lg-4 sidebar-widgets">
+          <div class="widget-wrap">
+            <div class="single-sidebar-widget newsletter-widget">
+              <h4 class="single-sidebar-widget__title">Newsletter</h4>
+              <div class="form-group mt-30">
+                <div class="col-autos">
+                  <input type="text" class="form-control" id="inlineFormInputGroup" placeholder="Enter email"
+                    onfocus="this.placeholder = ''" onblur="this.placeholder = 'Enter email'">
+                </div>
+              </div>
+              <button class="bbtns d-block mt-20 w-100">Subcribe</button>
+            </div>
+
+
+            <div class="single-sidebar-widget post-category-widget">
+              <h4 class="single-sidebar-widget" style="height:200px;">Здесь будет реклама</h4>
+            </div>
+          </div>
+        </div>
+        <!-- End Blog Post Siddebar -->
+      </div>
+    </div>
+  </section>
+  <!--================ End Blog Post Area =================-->
+{% endblock %}