Добавлен 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 React from 'react';
|
||||||
import logo from './logo.svg';
|
|
||||||
import './App.css';
|
import './App.css';
|
||||||
|
import Cover from './start-page/cover';
|
||||||
import TopBar from './start-page/top-bar';
|
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() {
|
function App() {
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<TopBar contact='https://t.me/pavelgnedov'>
|
<TopBar contact={AppData.contact} />
|
||||||
</TopBar>
|
<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 = {
|
export type TopBarProps = {
|
||||||
contact: string;
|
contact: string;
|
||||||
children: any;
|
children?: any;
|
||||||
};
|
};
|
||||||
|
|
||||||
const TopBar = (props: TopBarProps): ReactElement => {
|
const TopBar = (props: TopBarProps): ReactElement => {
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue