From 81fba4a1be1fddc46e40b1e02d65a599ac56c700 Mon Sep 17 00:00:00 2001 From: Fedor Katurov Date: Sun, 5 Nov 2023 18:07:17 +0600 Subject: [PATCH] add "welcome" page --- src/components/welcome/HistorySlide/index.tsx | 95 +++++++++++++++++++ .../welcome/HistorySlide/styles.module.scss | 15 +++ src/components/welcome/PersonsSlide/index.tsx | 56 +++++++++++ .../welcome/PersonsSlide/styles.module.scss | 21 ++++ src/components/welcome/WelcomeSlide/index.tsx | 55 +++++++++++ .../welcome/WelcomeSlide/styles.module.scss | 28 ++++++ .../welcome/WelcomeSlideWrapper/index.tsx | 31 ++++++ .../WelcomeSlideWrapper/styles.module.scss | 9 ++ .../boris/BorisSuperpowers/index.tsx | 26 +++-- .../main/BottomContainer/styles.module.scss | 2 +- src/layouts/BorisLayout/styles.module.scss | 1 + src/layouts/MainLayout/styles.module.scss | 3 +- src/layouts/NodeLayout/styles.module.scss | 1 + src/layouts/WelcomeLayout/index.tsx | 17 ++++ src/layouts/WelcomeLayout/styles.module.scss | 5 + src/pages/welcome/index.tsx | 5 + 16 files changed, 360 insertions(+), 10 deletions(-) create mode 100644 src/components/welcome/HistorySlide/index.tsx create mode 100644 src/components/welcome/HistorySlide/styles.module.scss create mode 100644 src/components/welcome/PersonsSlide/index.tsx create mode 100644 src/components/welcome/PersonsSlide/styles.module.scss create mode 100644 src/components/welcome/WelcomeSlide/index.tsx create mode 100644 src/components/welcome/WelcomeSlide/styles.module.scss create mode 100644 src/components/welcome/WelcomeSlideWrapper/index.tsx create mode 100644 src/components/welcome/WelcomeSlideWrapper/styles.module.scss create mode 100644 src/layouts/WelcomeLayout/index.tsx create mode 100644 src/layouts/WelcomeLayout/styles.module.scss create mode 100644 src/pages/welcome/index.tsx diff --git a/src/components/welcome/HistorySlide/index.tsx b/src/components/welcome/HistorySlide/index.tsx new file mode 100644 index 00000000..59ba0374 --- /dev/null +++ b/src/components/welcome/HistorySlide/index.tsx @@ -0,0 +1,95 @@ +import { Swiper, SwiperSlide } from 'swiper/react'; + +import { WelcomeSlideWrapper } from '../WelcomeSlideWrapper'; + +import styles from './styles.module.scss'; + +const HistorySlide = () => { + return ( + +
+ + +

Сегодня

+ Убежище поддерживается и регулярно обновляется. Часто, при очередном + Хроническом Обострении Хандры Роботов внезапно появляются новые + штуки и контент. + + + +

2009

+ Появилась концепция сайта как он есть сейчас. Он был написан на + примитивных инструментах, популярных в двухтысячные и был + значительно более населённым. + + +

2008

+

+ Убежище появилось из идеи создать сайт, посвященный тяжёлой + музыке. Он должен был называться «Metal Vault». +

+

+ Эта идея не закончилась ничем серьёзным, но именно на него + переехали блоги и аудитория с предыдущих версий сайта, начавшая + создавать своё уникальное сообщество. +

+ + +

2006

+

+ Во времена развития локальных сетей сайт назывался сначала + Blashyrkh и содержал только текстовые записи. +

+ +

+ Затем он поменял дизайн на более простой и начал называться + Gotham, сменив тематику на посвященную готической музыке. Именно в + этот момент он впервые появился в интернете. +

+ + +

2005

+ +

+ Появилась первая веб-версия сайта. Чтобы попасть на неё, нужно + было позвонить на один из двух серверов модемом. +

+ +

+ На сайте хранились файлы, была возможность добавлять тексты и + сидеть в чате с оператором станции. +

+ + +

2003

+ +

+ Существовала текстовая версия, которая называлась Private BBS. +

+ +

+ В те времена инернет был очень дорогим и люди соединяли + компьютеры, звоня друг другу с помощью модема. +

+ +

+ Станции, работавшие постоянно, публиковались в еженедельном + списке, но так же были закрытые станции, номер телефона на которых + был помечен как «Private» +

+ + +
+ + ); +}; + +export { HistorySlide }; diff --git a/src/components/welcome/HistorySlide/styles.module.scss b/src/components/welcome/HistorySlide/styles.module.scss new file mode 100644 index 00000000..9b4fb2f6 --- /dev/null +++ b/src/components/welcome/HistorySlide/styles.module.scss @@ -0,0 +1,15 @@ +@import 'src/styles/variables'; + +.card { + @include blur(); + + flex: 1; + padding: $gap; + border-radius: $radius; + font-size: 0.9em; + flex: 0 0 360px; +} + +.wrapper { + overflow: hidden; +} diff --git a/src/components/welcome/PersonsSlide/index.tsx b/src/components/welcome/PersonsSlide/index.tsx new file mode 100644 index 00000000..c953b479 --- /dev/null +++ b/src/components/welcome/PersonsSlide/index.tsx @@ -0,0 +1,56 @@ +import classNames from 'classnames'; + +import { Container } from '~/containers/main/Container'; +import markdown from '~/styles/common/markdown.module.scss'; + +import { WelcomeSlideWrapper } from '../WelcomeSlideWrapper'; + +import styles from './styles.module.scss'; + +const PersonsSlide = () => ( + + +
+
+

Boris

+

+ Единственный оставшийся ремонтный робот. Круглый, немногословный и + добродушно-железный. +

+

+ Благодаря своим небольшим размерам и меланхоличному настроению, + часто бывает замечен в заброшенных секторах Убежища собирающим + записи, созданные до Катаклизма. +

+
+ +
+

Юниты

+

+ Обитатели и персонал Убежища, состоящий из людей, притворяющихся + роботами и роботов, притворяющихся людьми. +

+

+ Юниты носят одинаковые защитные костюмы и маски, в которых + выбираются из Убежища для исследования окружающих территорий, поиска + продовальствия и артефактов. +

+
+ +
+

Muro

+

+ Доподлинно неизвестно, является ли Muro одним из юнитов, или группой + существ, поддерживающих работу Убежища. +

+

+ Бывает замечен в отдалённых коридорах меняющим лампочку или паяющим + какие-то детальки в очередном щитке. +

+
+
+ + +); + +export { PersonsSlide }; diff --git a/src/components/welcome/PersonsSlide/styles.module.scss b/src/components/welcome/PersonsSlide/styles.module.scss new file mode 100644 index 00000000..e8fbdc87 --- /dev/null +++ b/src/components/welcome/PersonsSlide/styles.module.scss @@ -0,0 +1,21 @@ +@import 'src/styles/variables'; + +.container { + min-height: 100vh; + display: flex; + align-items: center; +} + +.cards { + display: grid; + grid-auto-columns: 1fr; + grid-auto-flow: column; + gap: $gap; +} + +.card { + @include blur; + + border-radius: $radius; + padding: $gap $gap * 2 $gap * 2; +} diff --git a/src/components/welcome/WelcomeSlide/index.tsx b/src/components/welcome/WelcomeSlide/index.tsx new file mode 100644 index 00000000..c33bf4ce --- /dev/null +++ b/src/components/welcome/WelcomeSlide/index.tsx @@ -0,0 +1,55 @@ +import { FC } from 'react'; + +import classNames from 'classnames'; + +import { Filler } from '~/components/containers/Filler'; +import { Container } from '~/containers/main/Container'; +import { useAuth } from '~/hooks/auth/useAuth'; +import markdown from '~/styles/common/markdown.module.scss'; + +import { WelcomeSlideWrapper } from '../WelcomeSlideWrapper'; + +import styles from './styles.module.scss'; + +interface WelcomeSlideProps {} + +const WelcomeSlide: FC = () => { + const { isUser } = useAuth(); + return ( + + +
+ +
+

Добро пожаловать!

+ +

+ Убежище - небольшой коллективный блог из глубин + интернета. Нашу тематику можно описать как{' '} + + меланхоличное исследование мира вокруг и внутри себя + + . +

+ +

+ Мы существуем уже 13 лет, поэтому здесь можно увидеть и посты с + подростковой хандрой, и со старческим брюзжанием, доносящимся со + стороны кресла у камина. +

+ + {!isUser && ( +

+ Регистрация открыта, поэтому не стесняйся, заходи, устраивайся + поудобнее. +

+ )} +
+ +
+ + + ); +}; + +export { WelcomeSlide }; diff --git a/src/components/welcome/WelcomeSlide/styles.module.scss b/src/components/welcome/WelcomeSlide/styles.module.scss new file mode 100644 index 00000000..2d1a309f --- /dev/null +++ b/src/components/welcome/WelcomeSlide/styles.module.scss @@ -0,0 +1,28 @@ +@import 'src/styles/variables'; + +.content { + box-sizing: border-box; + height: 100%; + display: flex; + align-items: center; +} + +.wrap { + display: flex; + flex-direction: row; + height: 100vh; + margin: auto; +} + +.left { + @include blur(); + + flex: 0 1 440px; + padding: $gap $gap * 2 $gap * 2; + border-radius: $radius; + line-height: 1.25em; + + h1 { + text-transform: uppercase; + } +} diff --git a/src/components/welcome/WelcomeSlideWrapper/index.tsx b/src/components/welcome/WelcomeSlideWrapper/index.tsx new file mode 100644 index 00000000..de2cc8cb --- /dev/null +++ b/src/components/welcome/WelcomeSlideWrapper/index.tsx @@ -0,0 +1,31 @@ +import { FC, PropsWithChildren, useMemo } from 'react'; + +import styles from './styles.module.scss'; + +interface Props { + background?: string; + color?: string; +} + +const WelcomeSlideWrapper: FC> = ({ + children, + color, + background = '', +}) => { + const style = useMemo( + () => + background || color + ? { + backgroundImage: background && `url(${background})`, + backgroundColor: color, + } + : undefined, + [background, color], + ); + return ( +
+ {children} +
+ ); +}; +export { WelcomeSlideWrapper }; diff --git a/src/components/welcome/WelcomeSlideWrapper/styles.module.scss b/src/components/welcome/WelcomeSlideWrapper/styles.module.scss new file mode 100644 index 00000000..11922c0d --- /dev/null +++ b/src/components/welcome/WelcomeSlideWrapper/styles.module.scss @@ -0,0 +1,9 @@ +@import 'src/styles/variables'; + +.layout { + min-height: 100vh; + width: 100vw; + background-size: cover; + background-position: 50% 50%; + padding: $header_height 0; +} diff --git a/src/containers/boris/BorisSuperpowers/index.tsx b/src/containers/boris/BorisSuperpowers/index.tsx index 3608f7d6..9d4718e6 100644 --- a/src/containers/boris/BorisSuperpowers/index.tsx +++ b/src/containers/boris/BorisSuperpowers/index.tsx @@ -1,8 +1,9 @@ import { FC } from 'react'; +import { Anchor } from '~/components/common/Anchor'; import { Card } from '~/components/containers/Card'; import { Group } from '~/components/containers/Group'; -import { Markdown } from '~/components/containers/Markdown'; +import markdown from '~/styles/common/markdown.module.scss'; export interface BorisSuperpowersProps {} @@ -12,12 +13,23 @@ const BorisSuperpowers: FC = () => {

Сейчас в разработке

- - - Раздел [рум](/room) в начальной стадии, смотрю как будет работать - концепт. Суть идеи можно посмотреть на - [гитхабе](https://github.com/muerwre/vault-frontend/issues/158). - Предложения можно оставлять здесь. - +
+
    +
  • + Раздел рум в начальной стадии, + смотрю как будет работать концепт. Суть идеи можно посмотреть на{' '} + + гитхабе + + . Предложения можно оставлять здесь. +
    • +
  • + Раздел «где я?», + немного рассказывающий историю и мифологию Убежища. Ждёт текстов и + иллюстраций. +
    • +
+
); diff --git a/src/containers/main/BottomContainer/styles.module.scss b/src/containers/main/BottomContainer/styles.module.scss index 55ff8f4a..f6b6c50f 100644 --- a/src/containers/main/BottomContainer/styles.module.scss +++ b/src/containers/main/BottomContainer/styles.module.scss @@ -1,7 +1,7 @@ @import 'src/styles/variables'; .wrap { - position: sticky; + position: fixed; bottom: 0; pointer-events: none; touch-action: none; diff --git a/src/layouts/BorisLayout/styles.module.scss b/src/layouts/BorisLayout/styles.module.scss index a1c1a6e3..c7f24764 100644 --- a/src/layouts/BorisLayout/styles.module.scss +++ b/src/layouts/BorisLayout/styles.module.scss @@ -5,6 +5,7 @@ align-items: flex-start; justify-content: center; flex-direction: column; + padding-bottom: $bar_height + $gap; } .grid { diff --git a/src/layouts/MainLayout/styles.module.scss b/src/layouts/MainLayout/styles.module.scss index ed965b97..b535dd66 100644 --- a/src/layouts/MainLayout/styles.module.scss +++ b/src/layouts/MainLayout/styles.module.scss @@ -1,4 +1,4 @@ -@import "src/styles/variables"; +@import 'src/styles/variables'; .wrapper { width: 100%; @@ -15,7 +15,6 @@ position: relative; width: 100%; display: flex; - padding-bottom: 29px; flex-direction: column; align-items: center; } diff --git a/src/layouts/NodeLayout/styles.module.scss b/src/layouts/NodeLayout/styles.module.scss index 0faf0230..b0d6caeb 100644 --- a/src/layouts/NodeLayout/styles.module.scss +++ b/src/layouts/NodeLayout/styles.module.scss @@ -6,6 +6,7 @@ justify-content: flex-start; align-items: center; flex-direction: column; + margin-bottom: $bar_height + $gap; } .content { diff --git a/src/layouts/WelcomeLayout/index.tsx b/src/layouts/WelcomeLayout/index.tsx new file mode 100644 index 00000000..3c96fbc6 --- /dev/null +++ b/src/layouts/WelcomeLayout/index.tsx @@ -0,0 +1,17 @@ +import React from 'react'; + +import { HistorySlide } from '~/components/welcome/HistorySlide'; +import { PersonsSlide } from '~/components/welcome/PersonsSlide'; +import { WelcomeSlide } from '~/components/welcome/WelcomeSlide'; + +import styles from './styles.module.scss'; + +const WelcomeLayout = () => ( +
+ + + +
+); + +export { WelcomeLayout }; diff --git a/src/layouts/WelcomeLayout/styles.module.scss b/src/layouts/WelcomeLayout/styles.module.scss new file mode 100644 index 00000000..81899210 --- /dev/null +++ b/src/layouts/WelcomeLayout/styles.module.scss @@ -0,0 +1,5 @@ +@import 'src/styles/variables'; + +.layout { + margin-top: -$header_height; +} diff --git a/src/pages/welcome/index.tsx b/src/pages/welcome/index.tsx new file mode 100644 index 00000000..9eecf600 --- /dev/null +++ b/src/pages/welcome/index.tsx @@ -0,0 +1,5 @@ +import { WelcomeLayout } from '~/layouts/WelcomeLayout'; + +const WelcomePage = () => ; + +export default WelcomePage;