From 30545ab9600a5e7f72a424d7fb25255da4443f9f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=D0=9C=D0=B8=D1=85=D0=B0=D0=B8=D0=BB?=
 <63847832+Gaigerov@users.noreply.github.com>
Date: Sat, 1 Aug 2020 23:09:32 +0300
Subject: [PATCH] =?UTF-8?q?HM-68.=20=D0=92=D0=B5=D1=80c=D1=82=D0=BA=D0=B0?=
 =?UTF-8?q?=20=D1=81=D1=82=D1=80=D0=B0=D0=BD=D0=B8=D1=86=D1=8B=20Not=20Fou?=
 =?UTF-8?q?nd=20(#42)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app.html                                        | 11 +++++++++++
 src/components/not-found-content/NotFoundContent.js |  9 +++++++++
 src/components/not-found-content/index.js           |  3 +++
 src/components/not-found-page/NotFoundPage.css      | 11 +++++++++++
 src/components/not-found-page/NotFoundPage.js       | 12 ++++++++++--
 src/img/error-404.svg                               |  1 +
 6 files changed, 45 insertions(+), 2 deletions(-)
 create mode 100644 src/components/not-found-content/NotFoundContent.js
 create mode 100644 src/components/not-found-content/index.js
 create mode 100644 src/components/not-found-page/NotFoundPage.css
 create mode 100644 src/img/error-404.svg

diff --git a/src/app.html b/src/app.html
index ed56907..9841be2 100644
--- a/src/app.html
+++ b/src/app.html
@@ -88,6 +88,17 @@
             </div>
         </div>
     </template>
+    <!-- Шаблон содержимого страницы 404-->
+    <template id="not-found-content">
+        <div class="d-flex row justify-content-center">
+            <img src="/src/img/error-404.svg" class="NotFound__image" alt="404">
+            <div class="h5 m-3">
+                <div class="m-0 text-center">404. Страница не найдена</div>
+                <div class="NotFound__text"></div>
+            </div>
+            <button type="button" class="btn btn-primary NotFound__redirectButton w-auto">На главную</button>
+        </div>
+    </template>
 
     <!-- Шаблон контейнера страниц-->
     <template id="page-container">
diff --git a/src/components/not-found-content/NotFoundContent.js b/src/components/not-found-content/NotFoundContent.js
new file mode 100644
index 0000000..2d9fe9b
--- /dev/null
+++ b/src/components/not-found-content/NotFoundContent.js
@@ -0,0 +1,9 @@
+import Component from '../component/Component';
+
+class NotFoundContent extends Component {
+    constructor (parentNode) {
+        super('#not-found-content', parentNode);
+    }
+}
+
+export default NotFoundContent;
diff --git a/src/components/not-found-content/index.js b/src/components/not-found-content/index.js
new file mode 100644
index 0000000..5d71828
--- /dev/null
+++ b/src/components/not-found-content/index.js
@@ -0,0 +1,3 @@
+import NotFoundContent from './NotFoundContent';
+
+export default NotFoundContent;
diff --git a/src/components/not-found-page/NotFoundPage.css b/src/components/not-found-page/NotFoundPage.css
new file mode 100644
index 0000000..e4f45d1
--- /dev/null
+++ b/src/components/not-found-page/NotFoundPage.css
@@ -0,0 +1,11 @@
+.NotFound__text {
+    display: flex;
+    justify-content: center;
+}
+
+.NotFound__image {
+    display: flex;
+    justify-content: center;
+    margin-right: 0;
+    width: 150px;
+}
diff --git a/src/components/not-found-page/NotFoundPage.js b/src/components/not-found-page/NotFoundPage.js
index c0e8673..2d98853 100644
--- a/src/components/not-found-page/NotFoundPage.js
+++ b/src/components/not-found-page/NotFoundPage.js
@@ -1,10 +1,18 @@
 import Component from '../component/index';
+import routeService from '../../services/RouteService';
+import NotFoundContent from '../not-found-content';
+import './NotFoundPage.css';
 
 class NotFoundPage extends Component {
     constructor (mainNodeSelector, parentNode) {
         super(mainNodeSelector, parentNode);
-
-        this.mainNode.textContent = `Not found page ${location.pathname}`;
+        this.notFoundContent = new NotFoundContent(this.mainNode);
+        this.mainNodeSelector = this.mainNode.querySelector('.NotFound__text');
+        this.mainNodeSelector.textContent = `Запрашиваемая Вами страница ${location.pathname} не найдена`;
+        this.redirectButton = this.mainNode.querySelector('.NotFound__redirectButton');
+        this.addEventListener(this.redirectButton, 'click', () => {
+            routeService.goTo('/');
+        });
     }
 }
 
diff --git a/src/img/error-404.svg b/src/img/error-404.svg
new file mode 100644
index 0000000..9e6c424
--- /dev/null
+++ b/src/img/error-404.svg
@@ -0,0 +1 @@
+<svg id="Flat" height="512" viewBox="0 0 512 512" width="512" xmlns="http://www.w3.org/2000/svg"><path d="m370.92993 397.10114-74.92993-109.89997h-136l74.93 109.9a41.71076 41.71076 0 0 1 7.35 26.1 42.642 42.642 0 0 1 -4.16 16 41.858 41.858 0 0 1 -38.12 24h136c33.97 0 54.07007-38.03003 34.92993-66.10003zm-72.73 2.1a26.62527 26.62527 0 0 1 -22.15991-11.86l-12.04-20.14h40l5.65991 10.57a13.60792 13.60792 0 0 1 2.34009 7.61 13.8005 13.8005 0 0 1 -13.80002 13.82003z" fill="#ccc"/><g fill="#b3b3b3"><path d="m280 423.20117v16h-41.88a42.642 42.642 0 0 0 4.16-16z"/><path d="m296 423.201h16v16h-16z"/><path d="m328 423.201h16v16h-16z"/><rect height="16" rx="8" width="160" x="192" y="447.201"/></g><path d="m440 95.20117h32a16 16 0 0 1 16 16v240a16 16 0 0 1 -16 16h-32z" fill="#ccc"/><rect fill="#e6e6e6" height="272" rx="16" width="432" x="24" y="95.201"/><rect fill="#65dcff" height="208" rx="16" width="368" x="56" y="127.201"/><path d="m115.27 303.20117h249.46a16 16 0 0 0 13.9671-23.80514l-124.73-223.20111a16 16 0 0 0 -27.9342 0l-124.73003 223.20108a16 16 0 0 0 13.96713 23.80517z" fill="#ff6f35"/><circle cx="240" cy="255.201" fill="#e6e6e6" r="16"/><path d="m264 135.201h-48l16 72h16z" fill="#e6e6e6"/></svg>