lab6 done
This commit is contained in:
@@ -1,12 +1,18 @@
|
||||
import { useState } from 'react'
|
||||
import logo from './images/logo.svg'
|
||||
import NavBar from './components/Navbar.jsx'
|
||||
import NavBar from './components/Navbar'
|
||||
import Gallery from "./components/Gallery";
|
||||
import Content from "./components/Content";
|
||||
import CustomFooter from "./components/CustomFooter";
|
||||
|
||||
|
||||
import './styles/App.css'
|
||||
|
||||
function App() {
|
||||
return (
|
||||
<>
|
||||
<NavBar />
|
||||
<NavBar active='2'/>
|
||||
<Gallery/>
|
||||
<Content/>
|
||||
<CustomFooter/>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
53
labs/lab6/src/components/BuildCard.tsx
Normal file
53
labs/lab6/src/components/BuildCard.tsx
Normal file
@@ -0,0 +1,53 @@
|
||||
import Card from '@mui/material/Card';
|
||||
import CardActions from '@mui/material/CardActions';
|
||||
import CardContent from '@mui/material/CardContent';
|
||||
import CardMedia from '@mui/material/CardMedia';
|
||||
import Button from '@mui/material/Button';
|
||||
import Typography from '@mui/material/Typography';
|
||||
import Box from '@mui/material/Box';
|
||||
import { styled } from '@mui/material/styles';
|
||||
interface ComponentProps {
|
||||
building: {
|
||||
img: string,
|
||||
title: string,
|
||||
description: string[]
|
||||
},
|
||||
cardNum: number;
|
||||
}
|
||||
|
||||
|
||||
const StyledTypography = styled(Typography)(({ theme }) => ({
|
||||
color: theme.palette.text.secondary,
|
||||
textAlign: 'justify',
|
||||
marginBottom: '1em',
|
||||
}));
|
||||
|
||||
|
||||
function BuildCard({ building,cardNum} : ComponentProps) {
|
||||
return (
|
||||
<Card style={cardNum%2==0?{'flexDirection':'row-reverse'}:{}}sx={{ display: 'flex' }} >
|
||||
<CardMedia
|
||||
component="img"
|
||||
alt={ building.title }
|
||||
image={ building.img }
|
||||
/>
|
||||
<Box>
|
||||
<CardContent>
|
||||
<Typography gutterBottom variant="h5" >
|
||||
{ building.title }
|
||||
</Typography>
|
||||
{ building.description.map((item, ind) => (
|
||||
<StyledTypography key={ind} variant="body2">
|
||||
{ item }
|
||||
</StyledTypography>
|
||||
))}
|
||||
</CardContent>
|
||||
<CardActions sx={{ justifyContent: cardNum%2!=0?'end':"start"}} >
|
||||
<Button size="small">Подробнее</Button>
|
||||
</CardActions>
|
||||
</Box>
|
||||
</Card>
|
||||
)
|
||||
}
|
||||
|
||||
export default BuildCard;
|
||||
21
labs/lab6/src/components/Content.tsx
Normal file
21
labs/lab6/src/components/Content.tsx
Normal file
@@ -0,0 +1,21 @@
|
||||
import Container from '@mui/material/Container';
|
||||
import Grid from '@mui/material/Grid';
|
||||
import structures from "../data";
|
||||
import BuildCard from "./BuildCard"
|
||||
const cardData = [structures[3], structures[6], structures[9], structures[7]]
|
||||
|
||||
function Content() {
|
||||
return (
|
||||
<Container maxWidth="xl">
|
||||
<Grid container spacing={{ xs: 3, md: 6 }}>
|
||||
{cardData.map((item, index) => (
|
||||
<Grid key={index} size={{ xs: 12, md: 6 }} >
|
||||
<BuildCard building={ item } cardNum={index} />
|
||||
</Grid>
|
||||
))}
|
||||
</Grid>
|
||||
</Container>
|
||||
);
|
||||
}
|
||||
|
||||
export default Content;
|
||||
26
labs/lab6/src/components/CustomFooter.tsx
Normal file
26
labs/lab6/src/components/CustomFooter.tsx
Normal file
@@ -0,0 +1,26 @@
|
||||
import Container from '@mui/material/Container';
|
||||
import Grid from '@mui/material/Grid';
|
||||
import Typography from '@mui/material/Typography';
|
||||
import { styled } from '@mui/material/styles';
|
||||
|
||||
const StyledContainer = styled(Container)(({ theme }) => ({
|
||||
backgroundColor: theme.palette.action.hover,
|
||||
borderRadius: `calc(${theme.shape.borderRadius}px + 8px)`,
|
||||
marginTop: "50px",
|
||||
padding: "20px",
|
||||
color: theme.palette.text.secondary
|
||||
}));
|
||||
|
||||
function CustomFooter() {
|
||||
return (
|
||||
<StyledContainer >
|
||||
<Grid style={{ justifyContent: "space-around",}} container>
|
||||
<Typography> OkunElya</Typography>
|
||||
<Typography> 2026</Typography>
|
||||
<Typography> FEFU</Typography>
|
||||
</Grid>
|
||||
</StyledContainer>
|
||||
);
|
||||
}
|
||||
|
||||
export default CustomFooter;
|
||||
41
labs/lab6/src/components/Gallery.tsx
Normal file
41
labs/lab6/src/components/Gallery.tsx
Normal file
@@ -0,0 +1,41 @@
|
||||
import ImageList from '@mui/material/ImageList';
|
||||
import ImageListItem from '@mui/material/ImageListItem';
|
||||
import structures from "../data";
|
||||
import Box from '@mui/material/Box';
|
||||
import Container from '@mui/material/Container';
|
||||
import ImageListItemBar from '@mui/material/ImageListItemBar';
|
||||
const imgData = structures.slice(0, -1);
|
||||
|
||||
function Gallery() {
|
||||
return (
|
||||
<Container maxWidth="lg">
|
||||
<Box sx={{ width: 800, height: 585, overflowY: 'scroll', m: '20px auto' }}>
|
||||
<ImageList
|
||||
variant="masonry"
|
||||
sx={{
|
||||
columnCount: {
|
||||
xs: '1 !important',
|
||||
sm: '2 !important',
|
||||
md: '3 !important',
|
||||
lg: '4 !important',
|
||||
},
|
||||
}}
|
||||
gap={8}>
|
||||
{imgData.map((item) => (
|
||||
<ImageListItem key={item.img}>
|
||||
<img
|
||||
srcSet={item.img}
|
||||
src={item.img}
|
||||
alt={item.title}
|
||||
loading="lazy"
|
||||
/>
|
||||
<ImageListItemBar position="bottom" title={ item.title } />
|
||||
</ImageListItem>
|
||||
))}
|
||||
</ImageList>
|
||||
</Box>
|
||||
</Container>
|
||||
);
|
||||
}
|
||||
|
||||
export default Gallery;
|
||||
@@ -1,35 +0,0 @@
|
||||
import AppBar from '@mui/material/AppBar';
|
||||
import Toolbar from '@mui/material/Toolbar';
|
||||
import { styled } from '@mui/material/styles';
|
||||
import Container from '@mui/material/Container';
|
||||
|
||||
const StyledToolbar = styled(Toolbar)(({ theme }) => ({
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'space-between',
|
||||
flexShrink: 0,
|
||||
borderRadius: `calc(${theme.shape.borderRadius}px + 8px)`,
|
||||
border: '1px solid',
|
||||
borderColor: theme.palette.divider,
|
||||
padding: '8px 12px',
|
||||
}));
|
||||
|
||||
function NavBar() {
|
||||
return (
|
||||
<AppBar
|
||||
position="static"
|
||||
sx={{
|
||||
boxShadow: 0,
|
||||
bgcolor: 'transparent',
|
||||
mt: '28px',
|
||||
}}
|
||||
>
|
||||
<Container maxWidth="xl">
|
||||
<StyledToolbar>
|
||||
|
||||
</StyledToolbar>
|
||||
</Container>
|
||||
</AppBar>
|
||||
);
|
||||
}
|
||||
export default NavBar;
|
||||
105
labs/lab6/src/components/Navbar.tsx
Normal file
105
labs/lab6/src/components/Navbar.tsx
Normal file
@@ -0,0 +1,105 @@
|
||||
import AppBar from '@mui/material/AppBar';
|
||||
import Toolbar from '@mui/material/Toolbar';
|
||||
import { styled } from '@mui/material/styles';
|
||||
import Container from '@mui/material/Container';
|
||||
import Typography from '@mui/material/Typography';
|
||||
import Box from '@mui/material/Box';
|
||||
import Button from '@mui/material/Button';
|
||||
import IconButton from '@mui/material/IconButton';
|
||||
import CloseRoundedIcon from '@mui/icons-material/CloseRounded';
|
||||
import MenuItem from '@mui/material/MenuItem';
|
||||
import Drawer from '@mui/material/Drawer';
|
||||
import MenuIcon from '@mui/icons-material/Menu';
|
||||
import MenuList from '@mui/material/MenuList';
|
||||
|
||||
import { useState } from 'react';
|
||||
|
||||
|
||||
const StyledToolbar = styled(Toolbar)(({ theme }) => ({
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'space-between',
|
||||
flexShrink: 0,
|
||||
borderRadius: `calc(${theme.shape.borderRadius}px + 8px)`,
|
||||
border: '1px solid',
|
||||
borderColor: theme.palette.divider,
|
||||
padding: '8px 12px',
|
||||
}));
|
||||
|
||||
|
||||
const StyledMenuItem =styled(MenuItem)(({}) => ({
|
||||
'&.Mui-selected': {
|
||||
backgroundColor: '#1976d2',
|
||||
color: "white",
|
||||
},
|
||||
'&.Mui-selected:hover': {
|
||||
backgroundColor: '#11579c',
|
||||
color: "white",
|
||||
},
|
||||
'&:hover': {
|
||||
backgroundColor: 'rgba(69, 146, 223, 0.45)',
|
||||
},
|
||||
|
||||
}));
|
||||
interface ComponentProps {
|
||||
active: string;
|
||||
}
|
||||
|
||||
function NavBar({ active }: ComponentProps) {
|
||||
const [open, setOpen] = useState(false);
|
||||
|
||||
const toggleDrawer = (newOpen: boolean) => () => {
|
||||
setOpen(newOpen);
|
||||
};
|
||||
return (
|
||||
<AppBar
|
||||
position="static"
|
||||
sx={{
|
||||
boxShadow: 0,
|
||||
bgcolor: 'transparent',
|
||||
mt: '28px',
|
||||
}}
|
||||
>
|
||||
<Container maxWidth="xl">
|
||||
<StyledToolbar>
|
||||
<Typography variant="h6" sx={{ color: '#5d8aa8' }}>
|
||||
Самые высокие здания и сооружения
|
||||
</Typography>
|
||||
<Box sx={{ display: { xs: 'none', md: 'flex' } }}>
|
||||
<Button variant={active == '1' ? 'contained' : 'text'} color="info" size="medium">
|
||||
Главная
|
||||
</Button>
|
||||
<Button variant={active == '2' ? 'contained' : 'text'} color="info" size="medium">
|
||||
Список зданий
|
||||
</Button>
|
||||
<Button variant={active == '3' ? 'contained' : 'text'} color="info" size="medium">
|
||||
Контакты
|
||||
</Button>
|
||||
</Box>
|
||||
<Box sx={{ display: { xs: 'flex', md: 'none' } }}>
|
||||
<IconButton aria-label="Menu button" onClick={toggleDrawer(true)}>
|
||||
<MenuIcon />
|
||||
</IconButton>
|
||||
<Drawer
|
||||
anchor="top"
|
||||
open={open}
|
||||
onClose={toggleDrawer(false)}
|
||||
>
|
||||
<Box>
|
||||
<IconButton onClick={toggleDrawer(false)}>
|
||||
<CloseRoundedIcon />
|
||||
</IconButton>
|
||||
</Box>
|
||||
<MenuList>
|
||||
<StyledMenuItem selected={active == '1'}> Главная </StyledMenuItem>
|
||||
<StyledMenuItem selected={active == '2'}>Список зданий</StyledMenuItem>
|
||||
<StyledMenuItem selected={active == '3'}>Контакты</StyledMenuItem>
|
||||
</MenuList>
|
||||
</Drawer>
|
||||
</Box>
|
||||
</StyledToolbar>
|
||||
</Container>
|
||||
</AppBar>
|
||||
);
|
||||
}
|
||||
export default NavBar;
|
||||
118
labs/lab6/src/data.tsx
Normal file
118
labs/lab6/src/data.tsx
Normal file
@@ -0,0 +1,118 @@
|
||||
import Image1 from './images/image1.jpg';
|
||||
import Image2 from './images/image2.jpg';
|
||||
import Image3 from './images/image3.jpg';
|
||||
import Image4 from './images/image4.jpg';
|
||||
import Image5 from './images/image5.jpg';
|
||||
import Image6 from './images/image6.jpg';
|
||||
import Image7 from './images/image7.jpg';
|
||||
import Image8 from './images/image8.jpg';
|
||||
import Image9 from './images/image9.jpg';
|
||||
import Image10 from './images/image10.jpg';
|
||||
|
||||
const structures = [
|
||||
{
|
||||
img: Image1,
|
||||
title: "Раффлз-Сити, Китай",
|
||||
description: [
|
||||
`Раффлз-Сити — комплекс небоскрёбов, расположенный в китайском городе Чунцин, в деловом районе Юйчжун. Построен в 2019 году. Архитекторами комплекса выступили Моше Сафди и Чунцинский архитектурный институт, владельцем является сингапурская группа CapitaLand.`,
|
||||
`В состав многофункционального комплекса Раффлз-Сити входят восемь высотных башен и обширный подиум, в котором располагаются продуктовый супермаркет, магазины, автосалоны, рестораны, выставочные залы и паркинг. Общая площадь комплекса — свыше 1,1 млн м²,
|
||||
в том числе пятиэтажный торговый центр — 230 тыс. м², офисы — 160 тыс. м² и мультиплекс сети CGV — 5,6 тыс. м². В одной из 350-метровых башен Раффлз-Сити расположен пятизвёздочный отель InterContinental,
|
||||
также в комплексе насчитывается 1,4 тыс. жилых апартаментов сети Ascott и 26,4 тыс. парковочных мест.`
|
||||
],
|
||||
},
|
||||
{
|
||||
img: Image2,
|
||||
title: "Авичи-Арена, Швеция",
|
||||
description: [
|
||||
`Авичи-Арена - 85-метровая многоцелевая арена в Стокгольме. Второе по величине сферическое сооружение в мире. Место проведения концертов и спортивных мероприятий.
|
||||
Арена находится в микрорайоне Глобен-Сити, созданном специально для неё. Имеет вместимость 16 000 человек во время концертов и 13 850 во время хоккейных матчей.`,
|
||||
`Арена была построена специально к чемпионату мира по хоккею 1989 года и открыта 19 февраля 1989 года. Олицетворяет собой Солнце в Шведской Солнечной системе, крупнейшей в мире модели Солнечной системы.`
|
||||
]
|
||||
},
|
||||
{
|
||||
img: Image3,
|
||||
title: "Труба ГРЭС-2, Казахстан",
|
||||
description: [
|
||||
`Железобетонная дымовая труба, построенная в 1987 году, имея высоту 420 м, является самой высокой в мире и занесена в Книгу рекордов Гиннесса.
|
||||
Суммарная масса трубы составляет 60 тысяч тонн, её диаметр у основания составляет 44 м, диаметр устья — 14,2 м.`,
|
||||
`ГРЭС-2 вырабатывает электроэнергию из высокозольного экибастузского угля двумя энергоблоками по 500 МВт, имеет установленную мощность 1000 МВт. Два её энергоблока вырабатывают около 12 % всей электроэнергии,
|
||||
производимой в республике. Энергия ГРЭС-2 предназначена для обеспечения севера Казахстана. Потребителями являются десятки предприятий не только Казахстана, но и России.`
|
||||
]
|
||||
},
|
||||
{
|
||||
img: Image4,
|
||||
title: 'Бурдж-Халифа, Дубай, ОАЭ',
|
||||
description: [
|
||||
`Небоскрёб высотой 828 метров, самое высокое сооружение в мире. Форма здания напоминает сталагмит.`,
|
||||
`Строительство небоскрёба началось в 2004 году и шло со скоростью 1—2 этажа в неделю. Ежедневно на строительстве работало до 12 000 рабочих.
|
||||
На его создание ушло около 320 тыс. м³ бетона и более 60 тыс. тонн стальной арматуры.
|
||||
Бетонные работы были завершены после возведения 160 этажа, далее шла сборка 180-метрового шпиля из металлических конструкций.`
|
||||
]
|
||||
},
|
||||
{
|
||||
img: Image5,
|
||||
title: "Интинская радиомачта, Инта, Россия",
|
||||
description: [
|
||||
`На подъезде к железнодорожной станции Инта 1, кроме величественных вершин Урала, бросается в глаза металлическая вышка-мачта высотой 462,8 метра.
|
||||
Она больше чем знаменитая Эйфелева башня, но меньше на 77 метров, чем телевизионная Останкинская в Москве. Антенна навигационной системы «Чайка» предназначена
|
||||
для определения координат самолётов и кораблей с погрешностью 50–100 метров. Вышка-мачта находится на территории действующей военной части.`,
|
||||
`По конструкции это классическая GP антенна. Длинна волны передачи - приёма кратна высоте. Планировалось, чтотакие антенны должны были быть построены в нескольких
|
||||
точках по Полярному кругу.`
|
||||
]
|
||||
},
|
||||
{
|
||||
img: Image6,
|
||||
title: "Ворота Запада, США",
|
||||
description: [
|
||||
`Арка в Сент-Луисе, также известная под именем «Врата на запад» — мемориал, являющийся частью Джефферсоновского национального экспансиального мемориала, а также визитной карточкой Сент-Луиса, штат Миссури, США.`,
|
||||
`Арка была спроектирована финско-американским архитектором Ээро Саариненом в 1947 году. Её высота 192 метра в самой высокой точке, ширина её основания также 192 метра.
|
||||
Таким образом арка является самым высоким памятником на территории США. Её строительство началось 12 февраля 1963 года и было закончено 28 октября 1965 года. Памятник открылся для посетителей 24 июля 1967 года.`
|
||||
]
|
||||
},
|
||||
{
|
||||
img: Image7,
|
||||
title: 'CN Tower, Торонто, Канада',
|
||||
description: [
|
||||
`553.3-метровая телевизионная башня. Была самым высоким свободно стоящим сооружением в мире с 1976 по 2007 год, до сих пор остаётся
|
||||
таковым в Западном полушарии. Является символом Торонто. На высоте 447 м находится астрономическая обсерватория.`,
|
||||
`Земляные работы для сооружения железобетонной конструкции с последующим натяжением арматуры весом 130 000т начались 12 февраля 1973 г.,
|
||||
а уже 2 апреля 1975 г. возведение башни было завершено.`
|
||||
]
|
||||
},
|
||||
{
|
||||
img: Image8,
|
||||
title: 'Небесное дерево, Токио, Япония',
|
||||
description: [
|
||||
`Телевизионная башня в районе Сумида самая высокая среди телебашен мира. Высота телебашни вместе с антенной составляет 634 метра.
|
||||
Высота башни была выбрана так, чтобы цифры: 6 (на старом японском «му»), 3 («са»), 4 («си») были созвучны «Мусаси» — названию исторической области,
|
||||
где находится современный Токио.`,
|
||||
`Здание напоминает пятиярусную пагоду, что хорошо сочетается с историческим районом Асакуса на другом берегу реки.
|
||||
Основание башни напоминает штатив; с высоты примерно 350 м она имеет цилиндрическую форму, позволяющую наслаждаться панорамными видами реки и города.`
|
||||
]
|
||||
},
|
||||
{
|
||||
img: Image9,
|
||||
title: 'The Clock Towers, Мекка, Саудовская Аравия',
|
||||
description: [
|
||||
`Отель «Королевская часовая башня» имеет высоту 601 м. Его строительство которого завершилось в 2012 году. Внешне здание отдалённо напоминает Биг-Бен в Лондоне,
|
||||
при этом выше последнего в 6 раз.`,
|
||||
`На Королевской башне установлены часы диаметром 43 метра (длина часовой стрелки составляет 17 метров, минутной — 22),
|
||||
расположенные на высоте более 400 метров над землёй. Четыре их циферблата установлены по четырём сторонам света. Часы видны из любого места города,
|
||||
и являются самыми большими и самыми высотными часами в мире`
|
||||
]
|
||||
},
|
||||
{
|
||||
img: Image10,
|
||||
title: 'Merdeka 118, Куала-Лумпур, Малайзия',
|
||||
description: [
|
||||
`Общая высота здания составляет 678.9 м, причём более 160 м приходится на шпиль. Строительство Merdeka 118 началось в 2014 году.`,
|
||||
`Название «Merdeka» означает «независимость», оно отсылает к наименованию расположенного рядом с башней стадиона,
|
||||
который известен как место официального провозглашения независимости.`,
|
||||
`Здание находится в центре Куала-Лумпура. В небоскрёбе откроется первый отель Park Hyatt в Малайзии.
|
||||
Также в здании будут расположены самая высокая смотровая площадка в Юго-Восточной Азии, торговый центр, музей, мечеть, офисы и квартиры.`
|
||||
]
|
||||
},
|
||||
|
||||
];
|
||||
|
||||
export default structures;
|
||||
Reference in New Issue
Block a user