From ae01d2dd10793bb1690042eea8364e15ec9bb5a9 Mon Sep 17 00:00:00 2001 From: ErickSkrauch Date: Mon, 9 Jan 2017 01:01:04 +0300 Subject: [PATCH] =?UTF-8?q?=D0=A1=D1=82=D0=B8=D0=BB=D0=B8=D0=B7=D0=BE?= =?UTF-8?q?=D0=B2=D0=B0=D0=BD=D0=B0=20404=20=D1=81=D1=82=D1=80=D0=B0=D0=BD?= =?UTF-8?q?=D0=B8=D1=86=D0=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/i18n/be.json | 4 + src/i18n/en.json | 4 + src/i18n/pt.json | 4 + src/i18n/ru.json | 4 + src/i18n/uk.json | 4 + src/pages/404/404.scss | 202 +++++++++++++++++++++++++++ src/pages/404/PageNotFound.intl.json | 6 + src/pages/404/PageNotFound.jsx | 52 ++++++- src/pages/404/cloud.svg | 4 + 9 files changed, 283 insertions(+), 1 deletion(-) create mode 100644 src/pages/404/404.scss create mode 100644 src/pages/404/PageNotFound.intl.json create mode 100644 src/pages/404/cloud.svg diff --git a/src/i18n/be.json b/src/i18n/be.json index 75044d3..7970aad 100644 --- a/src/i18n/be.json +++ b/src/i18n/be.json @@ -135,6 +135,10 @@ "components.profile.twoFactorAuth": "Двухфактарная аўтэнтыфікацыя", "components.userbar.login": "Уваход", "components.userbar.register": "Рэгістрацыя", + "pages.404.homePage": "галоўную старонку", + "pages.404.nothingHere": "Што бы вы не шукалі, гэта не тут", + "pages.404.returnToTheHomePage": "Спрабуйце вярнуцца на {link}", + "pages.404.title": "Старонка не знойдзена", "pages.root.siteName": "Ёly.by", "pages.rules.elyAccountsAsService": "{name} як сэрвіс", "pages.rules.elyAccountsAsService1": "Мы не гарантуем які-небудзь працэнт часу бесперабойнай работы гэтага сэрвісу.", diff --git a/src/i18n/en.json b/src/i18n/en.json index 5491dbf..65d4322 100644 --- a/src/i18n/en.json +++ b/src/i18n/en.json @@ -135,6 +135,10 @@ "components.profile.twoFactorAuth": "Two factor auth", "components.userbar.login": "Sign in", "components.userbar.register": "Join", + "pages.404.homePage": "main page", + "pages.404.nothingHere": "This is not a place that you are looking for", + "pages.404.returnToTheHomePage": "Try to go back to the {link}", + "pages.404.title": "Page not found", "pages.root.siteName": "Ely.by", "pages.rules.elyAccountsAsService": "{name} as service", "pages.rules.elyAccountsAsService1": "We don't have any guarantee about fault free work time of this service.", diff --git a/src/i18n/pt.json b/src/i18n/pt.json index 3940f81..870d2e9 100644 --- a/src/i18n/pt.json +++ b/src/i18n/pt.json @@ -134,6 +134,10 @@ "pages.root.siteName": "Ely.by", "components.profile.projectRules": "regras do projeto", "components.userbar.register": "Entrar", + "pages.404.homePage": "", + "pages.404.nothingHere": "", + "pages.404.returnToTheHomePage": "", + "pages.404.title": "", "pages.rules.elyAccountsAsService": "{name} como servi\u00e7o", "pages.rules.elyAccountsAsService2": "N\u00f3s n\u00e3o somos respons\u00e1veis por atrasos e sal\u00e1rio perdido como o resultado da inatividade de nosso servi\u00e7o.", "components.userbar.login": "Logar", diff --git a/src/i18n/ru.json b/src/i18n/ru.json index 5df7875..6cd3047 100644 --- a/src/i18n/ru.json +++ b/src/i18n/ru.json @@ -135,6 +135,10 @@ "components.profile.twoFactorAuth": "Двухфакторная аутентификация", "components.userbar.login": "Вход", "components.userbar.register": "Регистрация", + "pages.404.homePage": "главную страницу", + "pages.404.nothingHere": "Что бы вы не искали, это не здесь.", + "pages.404.returnToTheHomePage": "Попробуйте вернуться на {link}", + "pages.404.title": "Страница не найдена", "pages.root.siteName": "Ely.by", "pages.rules.elyAccountsAsService": "{name} как сервис", "pages.rules.elyAccountsAsService1": "Мы не гарантируем какой-либо процент времени бесперебойной работы этого сервиса.", diff --git a/src/i18n/uk.json b/src/i18n/uk.json index 72ab4a6..eeef6bb 100644 --- a/src/i18n/uk.json +++ b/src/i18n/uk.json @@ -135,6 +135,10 @@ "components.profile.twoFactorAuth": "Двофакторна аутентифікація", "components.userbar.login": "Вхід", "components.userbar.register": "Реєстрація", + "pages.404.homePage": "", + "pages.404.nothingHere": "", + "pages.404.returnToTheHomePage": "", + "pages.404.title": "", "pages.root.siteName": "Ely.by", "pages.rules.elyAccountsAsService": "{name} як сервіс", "pages.rules.elyAccountsAsService1": "Ми не гарантуємо безперебійної роботи цього сервісу.", diff --git a/src/pages/404/404.scss b/src/pages/404/404.scss new file mode 100644 index 0000000..daca817 --- /dev/null +++ b/src/pages/404/404.scss @@ -0,0 +1,202 @@ +@import "~components/ui/fonts.scss"; + +// Original: http://codepen.io/vanderlanth/pen/rxpNMY + +.page { + margin: 80px auto 0; + + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; +} + +.loading { + width: 200px; + height: 100px; + margin-bottom: 50px; + position: relative; + display: flex; + justify-content: center; + align-items: flex-end; + animation: loadStab 1s ease-out infinite; +} + +.cube { + width: 50px; + height: 50px; + background: white; + animation: cubeRotate 1s ease-out infinite; +} + +.road { + position: absolute; + width: 100%; + height: 1px; + background: white; + left: 0; + bottom: 0; + animation: roadStab 1s ease-out infinite; +} + +@keyframes cubeRotate { + 0% {transform: rotate(0deg) translate3D(0, 0, 0);} + 65% {transform: rotate(45deg) translate3D(0, -13px, 0);} + 90% {transform: rotate(70deg) translate3D(0, -8px, 0);} + 100% {transform: rotate(90deg) translate3D(0, 0, 0);} +} + +@keyframes roadStab { + 0% {transform: translate3D(0, 0, 0);} + 60% {transform: translate3D(0, 2px, 0);} + 90% {transform: translate3D(0, 4px, 0);} + 100% {transform: translate3D(0, 0, 0);} +} + +@keyframes loadStab { + 0% {transform: translate3D(0, 0, 0);} + 60% {transform: translate3D(0, -2px, 0);} + 95% {transform: translate3D(0, -2px, 0);} + 100% {transform: translate3D(0, 0, 0);} +} + +//------------------ MOUNTAINS --------------------- + +.rocks { + width: 100%; + height: 100%; + position: absolute; + bottom: -50px; + left: 0; + overflow: hidden; + animation: roadStab 1s ease-out infinite; +} + +@mixin rock($rockName, $bottom, $delay) { + .#{$rockName} { + position: absolute; + border-left: 2px solid transparent; + border-right: 2px solid transparent; + border-bottom: 4px solid white; + bottom: $bottom; + right: -2%; + animation: rockTravelling 10s $delay ease-out infinite; + } +} + +@include rock('rockOne', 23px, 0s); +@include rock('rockTwo', 40px, 2s); +@include rock('rockThree', 30px, 6s); +@include rock('rockFour', 10px, 4s); +@include rock('rockFive', 18px, 8s); + +@keyframes rockTravelling { + 0% {right: -2%;} + 10% {right: 8%;} + 20% {right: 18%;} + 30% {right: 29%;} + 40% {right: 40%;} + 50% {right: 51%;} + 60% {right: 62%;} + 70% {right: 72%;} + 80% {right: 82%;} + 90% {right: 92%;} + 100% {right: 102%;} +} + +//------------------ CLOUDS --------------------- + +.clouds { + width: 200%; + height: 200%; + animation: roadStab 1s ease-out infinite, + cloudStab 1s ease-out infinite; + position: absolute; + bottom: -50px; + left: -50%; + overflow: hidden; +} + +.cloud { + position: absolute; + will-change: animation; + + background-image: url('./cloud.svg'); + background-size: cover; +} + +.cloudOne { + composes: cloud; + + top: 5px; + width: 100px; + height: 32px; + animation: cloudTravelling 16s linear infinite; +} + +.cloudTwo { + composes: cloud; + + top: 65px; + right: -30%; + width: 50px; + height: 16px; + animation: cloudTravelling 21s 5s linear infinite; +} + +.cloudThree { + composes: cloud; + + top: 40px; + right: -30%; + width: 70px; + height: 22px; + animation: cloudTravelling 26s 11s linear infinite; +} + +@keyframes cloudTravelling { + 0% {right: -30%;} + 100% {right: 110%;} +} + +@keyframes cloudStab { + 0% {transform: translate3D(0, 0, 0);} + 60% {transform: translate3D(0, 2px, 0);} + 85% {transform: translate3D(0, 2px, 0);} + 100% {transform: translate3D(0, 0, 0);} +} + +%text { + font-family: $font-family-title; + text-align: center; + padding: 0 10px; + line-height: 1.2; +} + +.text { + @extend %text; + + font-size: 24px; + margin-top: 25px; + color: #666; +} + +.subText { + @extend %text; + + font-size: 16px; + margin-top: 5px; + color: #9a9a9a; + + a { + color: #666; + border-bottom: 1px dotted #666; + text-decoration: none; + transition: .25s; + + &:hover { + border-bottom-color: #777; + color: #777; + } + } +} diff --git a/src/pages/404/PageNotFound.intl.json b/src/pages/404/PageNotFound.intl.json new file mode 100644 index 0000000..c7bd2d5 --- /dev/null +++ b/src/pages/404/PageNotFound.intl.json @@ -0,0 +1,6 @@ +{ + "title": "Page not found", + "nothingHere": "This is not a place that you are looking for", + "returnToTheHomePage": "Try to go back to the {link}", + "homePage": "main page" +} diff --git a/src/pages/404/PageNotFound.jsx b/src/pages/404/PageNotFound.jsx index 8756fa7..136d1fb 100644 --- a/src/pages/404/PageNotFound.jsx +++ b/src/pages/404/PageNotFound.jsx @@ -1,7 +1,57 @@ import React from 'react'; +import { FooterMenu } from 'components/footerMenu'; + +import { Link } from 'react-router'; +import { FormattedMessage as Message } from 'react-intl'; +import Helmet from 'react-helmet'; + +import styles from './404.scss'; +import messages from './PageNotFound.intl.json'; + +import profileStyles from 'pages/profile/profile.scss'; + export default function PageNotFound() { return ( -

Sorry, but the thing you are looking for is definitely not here :(

+
+ + {(pageTitle) => ( + + )} + + +
+
+
+
+ + + + + +
+
+ + + +
+
+

+ +

+

+ + + + ) + }} /> +

+ +
+ +
+
); } diff --git a/src/pages/404/cloud.svg b/src/pages/404/cloud.svg new file mode 100644 index 0000000..1c8e989 --- /dev/null +++ b/src/pages/404/cloud.svg @@ -0,0 +1,4 @@ + + + +