HM-68. Верcтка страницы Not Found (#42)

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

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;

src/components/not-found-content/index.js

@@ -0,0 +1,3 @@
+import NotFoundContent from './NotFoundContent';
+
+export default NotFoundContent;

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;
+}

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('/');
+        });
     }
 }
 

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>