Добавлен cover для начальной страницы
This commit is contained in:
parent
1b322e1984
commit
d98a8df5c9
5 changed files with 102 additions and 4 deletions
BIN
frontend/public/images/Сharacter_01.png
Normal file
BIN
frontend/public/images/Сharacter_01.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 32 KiB |
|
|
@ -1,13 +1,18 @@
|
|||
import React from 'react';
|
||||
import logo from './logo.svg';
|
||||
import './App.css';
|
||||
import Cover from './start-page/cover';
|
||||
import TopBar from './start-page/top-bar';
|
||||
|
||||
export const AppData = {
|
||||
contact: 'https://t.me/pavelgnedov',
|
||||
bot: 'https://t.me/eltex_event_emitter_bot'
|
||||
};
|
||||
|
||||
function App() {
|
||||
return (
|
||||
<>
|
||||
<TopBar contact='https://t.me/pavelgnedov'>
|
||||
</TopBar>
|
||||
<TopBar contact={AppData.contact} />
|
||||
<Cover telegramBotUrl={AppData.bot} />
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
70
frontend/src/start-page/cover.module.css
Normal file
70
frontend/src/start-page/cover.module.css
Normal file
|
|
@ -0,0 +1,70 @@
|
|||
.cover {
|
||||
box-sizing: border-box;
|
||||
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 900px;
|
||||
left: 0px;
|
||||
top: 0px;
|
||||
|
||||
background: #001826;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
h1 {
|
||||
left: 0%;
|
||||
right: 0%;
|
||||
top: 18.22%;
|
||||
bottom: 24.7%;
|
||||
font-family: 'Source Code Pro', monospace;
|
||||
font-weight: 600;
|
||||
font-size: 94px;
|
||||
line-height: 94px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
h3 {
|
||||
color: #F5B14E;
|
||||
font-family: 'Source Code Pro';
|
||||
letter-spacing: 0.12em;
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
font-size: 22px;
|
||||
line-height: 34px;
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-style: normal;
|
||||
font-weight: 600;
|
||||
font-size: 40px;
|
||||
line-height: 60px;
|
||||
letter-spacing: -0.01em;
|
||||
text-transform: uppercase;
|
||||
font-feature-settings: 'pnum' on, 'lnum' on;
|
||||
}
|
||||
|
||||
h4:hover {
|
||||
text-decoration: underline;
|
||||
color: #F5B14E;
|
||||
}
|
||||
|
||||
.character {
|
||||
position: absolute;
|
||||
width: 375px;
|
||||
height: 672px;
|
||||
left: 130px;
|
||||
top: 181px;
|
||||
}
|
||||
|
||||
.info {
|
||||
font-family: 'Source Code Pro';
|
||||
color: #fff;
|
||||
font-weight: bold;
|
||||
text-decoration: none;
|
||||
text-transform: uppercase;
|
||||
position: absolute;
|
||||
max-width: 800px;
|
||||
max-height: 494px;
|
||||
left: 635px;
|
||||
top: 251px;
|
||||
}
|
||||
23
frontend/src/start-page/cover.tsx
Normal file
23
frontend/src/start-page/cover.tsx
Normal file
|
|
@ -0,0 +1,23 @@
|
|||
import React from 'react';
|
||||
import CoverCss from './cover.module.css';
|
||||
|
||||
export type CoverProps = {
|
||||
telegramBotUrl: string;
|
||||
};
|
||||
|
||||
export const Cover = (props: CoverProps) => {
|
||||
return (
|
||||
<div className={CoverCss.cover}>
|
||||
<img src="/images/Сharacter_01.png" alt="Сharacter" className={CoverCss.character} />
|
||||
<div className={CoverCss.info}>
|
||||
<h3>Redmine Issue Event Emitter</h3>
|
||||
<h1>ОБРАБОТКА И АНАЛИЗ ЗАДАЧ ИЗ "REDMINE"</h1>
|
||||
<h4>
|
||||
<a href={props.telegramBotUrl}> ссылка на телеграмм бота</a>
|
||||
</h4>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Cover;
|
||||
|
|
@ -4,7 +4,7 @@ import LogoImg from './event_emitter_eltex_loc-32px.png';
|
|||
|
||||
export type TopBarProps = {
|
||||
contact: string;
|
||||
children: any;
|
||||
children?: any;
|
||||
};
|
||||
|
||||
const TopBar = (props: TopBarProps): ReactElement => {
|
||||
|
|
|
|||
Loading…
Reference in a new issue