CyberBloom/OgeetoCaseCyberGarden
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

base: CyberBloom:sevka
Branches Tags
CyberBloom:main CyberBloom:react CyberBloom:sevka CyberBloom:dd
..
compare: CyberBloom:0d76b054f1a2ca1c794c3668303b894a1f70fd1a
Branches Tags
CyberBloom:main CyberBloom:react CyberBloom:sevka CyberBloom:dd

6 Commits
sevka ... 0d76b054f1

Author SHA1 Message Date
Sevka
0d76b054f1 search 2023-12-22 21:02:35 +03:00
Sevka
51e740fba6 input 2023-12-22 20:55:30 +03:00
Sevka
e0afab1420 styles 2023-12-22 19:35:58 +03:00
Sevka
80d594d789 g 2023-12-22 19:12:40 +03:00
Sevka
bb3f49c4ed d 2023-12-22 19:08:22 +03:00
Sevka
80d7f405db header 2023-12-22 19:04:06 +03:00
12 changed files with 251 additions and 78 deletions
Expand all files Collapse all files

44
src/App.jsx
View File

@@ -1,43 +1,25 @@
import { useState } from 'react'
import reactLogo from './assets/react.svg'
import viteLogo from '/vite.svg'
import './App.css'
import FetchUtils from './components/fetchUtils/FetchUtils'
import TableMeets from './components/TableMeets'
const events = [
{
id: 1,
date: '10.10.2022',
time: '14:00',
title: 'Мероприятие 1',
speaker: 'Спикер 1',
avatar: 'speaker1.jpg',
description: 'Описание мероприятия 1',
isExpanded: true,
},
{
id: 2,
date: '11.10.2022',
time: '15:30',
title: 'Мероприятие 2',
speaker: 'Спикер 2',
avatar: 'speaker2.jpg',
description: 'Описание мероприятия 2',
isExpanded: true,
},
// Добавьте другие мероприятия сюда
];
import './App.css'
import { BrowserRouter, Routes, Route } from "react-router-dom";
import BeingPage from "./Components/BeingPage/index.jsx";
import HomePage from "./Components/HomePage/index.jsx";
function App() {
const [count, setCount] = useState(0)
return (
<>
{/* <FetchUtils /> */}
<TableMeets events={ events } />
<BrowserRouter>
<Routes>
<Route path="/being" element={<BeingPage />}/>
<Route path="/" element={<HomePage />}/>
</Routes>
</BrowserRouter>
</>
)
}

10
src/Components/BeingPage/index.jsx Normal file
View File

@@ -0,0 +1,10 @@
import React from "react"
import styles from "./style.module.scss";
const BeingPage = () => {
return (
<div>Hello world</div>
)
}
export default BeingPage

0
src/Components/BeingPage/style.module.scss Normal file
View File

22
src/Components/Header/index.jsx Normal file
View File

@@ -0,0 +1,22 @@
import styles from './style.module.scss';
import logo from '../../img/headerImg/OgettoLogo.png';
import { useNavigate } from "react-router-dom";
const Header = () => {
const navigate = useNavigate();
const handleHome = () => {
navigate('/');
}
return (
<div className={styles.header__container}>
<header className={styles.header}>
<div className={styles.header__logo} onClick={handleHome} ><img onClick={handleHome} src={logo} alt="logo"></img></div>
<button className={styles.header__button}>Вход</button>
</header>
</div>
)
}
export default Header;

37
src/Components/Header/style.module.scss Normal file
View File

@@ -0,0 +1,37 @@
.header {
height: 75px;
width: 80%;
display: flex;
align-items: center;
justify-content: space-between;
&__container {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 150px;
position: absolute;
top: 0px;
left: 0px;
}
&__logo {
cursor: pointer;
}
&__button {
display: flex;
align-items: center;
justify-content: center;
border-radius: 100px;
background: #FFED00;
width: 200px;
height: 42px;
color: #000;
font-family: Montserrat;
font-size: 25px;
font-style: normal;
font-weight: 400;
line-height: normal;
}
}

64
src/Components/HomePage/index.jsx
View File

@@ -1,29 +1,67 @@
import Header from "../Header";
import styles from "./style.module.scss";
import arrow from '../../img/homePage/downArrow.png';
import TableMeets from '../TableMeets/TableMeets'
import { style } from "@mui/system";
const events = [
{
id: 1,
date: '10.10.2022',
time: '14:00',
title: 'Мероприятие 1',
speaker: 'Спикер 1',
avatar: 'speaker1.jpg',
description: 'Описание мероприятия 1',
isExpanded: true,
},
{
id: 2,
date: '11.10.2022',
time: '15:30',
title: 'Мероприятие 2',
speaker: 'Спикер 2',
avatar: 'speaker2.jpg',
description: 'Описание мероприятия 2',
isExpanded: true,
},
// Добавьте другие мероприятия сюда
];
const HomePage = () => {
return (
<>
<Header></Header>
<section className={styles.muza__container}>
<div className={styles.muza__title}>МУЗА</div>
<div className={styles.muza__descr_container}>
<div className={styles.muza__descr}>Платформа для проведения well-being мероприятий</div>
</div>
</section>
<section className={styles.meeting__container}>
<div className={styles.meeting__cards}>
<div className={styles.meeting__card}>
<div className={styles.data__container}>
<div className={styles.data__time}>01.01.1990</div>
<div className={styles.data}>00:00</div>
<input className={styles.meeting__inputs} placeholder="Найти мероприятие"></input>
<div className={styles.container}>
<div className={styles.select__container}>
<select className={styles.select} name="time__meeting">
<option value="">Время мироприятия</option>
</select>
<select className={styles.select} name="type__meeting">
<option value="">Тип мероприятия</option>
</select>
</div>
<div className={styles.meeting__name}>
Название мероприятия
</div>
<div className={styles.meeting__downArrow}><img src={arrow} alt="arrow"></img></div>
<div className={styles.blackLine}></div>
<div className={styles.NewContainer}>
<div className={styles.search_container}>
<div className={styles.search__descr}>100 мероприятий</div>
<select className={styles.select} name="type__meeting">
<option value="">Тип мероприятия</option>
</select>
</div>
</div>
<div className={styles.cards__container}>
<div className={styles.card}></div>
</div>
</section>
</>

87
src/Components/HomePage/style.module.scss Normal file
View File

@@ -0,0 +1,87 @@
.muza {
&__container {
height: 700px;
display: flex;
align-items: center;
flex-direction: column;
width: 100%;
}
&__title {
margin-top: 150px;
color: #000;
font-family: Montserrat;
font-size: 143.016px;
font-style: normal;
font-weight: 700;
line-height: normal;
text-align: left;
display: flex;
width: 90%;
}
&__descr {
&_container {
display: flex;
justify-content: flex-end;
}
margin-top: 50px;
margin-left: 70px;
color: #000;
font-family: Montserrat;
font-size: 46px;
font-style: normal;
font-weight: 400;
line-height: normal;
text-align: left;
display: flex;
width: 60%;
}
}
.meeting {
&__container {
height: 1400px;
}
&__inputs {
width: 90%;
height: 46px;
border-radius: 10px;
border: 1px solid #000;
padding-left: 40px;
}
}
.container {
display: flex;
justify-content: center;
}
.select {
margin-right: 50px;
height: 35px;
border-radius: 10px;
border: 1px solid var(--gray_stroke, #D0D2D8);
width: 200px;
&__container {
display: flex;
width: 93%;
margin-top: 30px;
}
}
.NewContainer {
display: flex;
justify-content: flex-end;
margin-top: 40px;
}
.search_container {
display: flex;
align-items: center;
justify-content: center;
}
.search__descr {
margin-right: 25px;
}

41
src/components/TableMeets.jsx → src/Components/TableMeets/TableMeets.jsx
View File

@@ -1,25 +1,6 @@
import React, { useState } from 'react';
import styled from 'styled-components';
let Table = styled.div({
width: 1520,
border: '1px solid black'
});
let List = styled.div({
display: 'flex',
// justifyContent: 'center'
});
let Date = styled.span({
marginRight: 100
});
let Time = styled.span({
marginRight: 100
});
let Name = styled.span({
marginRight: 100
});
import styles from './style.module.scss';
import arrow from '../../img/homePage/downArrow.png';
const TableMeets = ({ events }) => {
const [isOpenMap, setIsOpenMap] = useState({});
@@ -32,17 +13,15 @@ const TableMeets = ({ events }) => {
};
return (
<Table>
<ul>
<div className={styles.meeting__container}>
<ul className={styles.meeting__cards}>
{events.map((event) => (
<li key={event.id}>
<div>
<Date>{event.date}</Date>
<Time>{event.time}</Time>
<Name>{event.title}</Name>
<span>
<button onClick={() => toggleDropdown(event.id)}>Показать список мероприятий</button>
</span>
<div className={styles.meeting__card}>
<span className={styles.date}>{event.date}</span>
<span className={styles.time}>{event.time}</span>
<span className={styles.title}>{event.title}</span>
<div className={styles.meeting__button} onClick={() => toggleDropdown(event.id)}><img className={styles.meeting__arrow} src={arrow} ></img></div>
{isOpenMap[event.id] && (
<div>
<span>{event.speaker}</span>
@@ -54,7 +33,7 @@ const TableMeets = ({ events }) => {
</li>
))}
</ul>
</Table>
</div>
);
};

16
src/Components/TableMeets/style.module.scss Normal file
View File

@@ -0,0 +1,16 @@
.meeting {
&__cards {
list-style-type: none;
width: 80%;
padding: 0;
}
&__container {
width: 100%;
display: flex;
justify-content: center;
align-items: center;
}
&__arrow {
}
}

1
src/Components/css/style.module.css Normal file
View File

@@ -0,0 +1 @@
.muza__container{height:700px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;width:100%}.muza__title{margin-top:150px;color:#000;font-family:Montserrat;font-size:143.016px;font-style:normal;font-weight:700;line-height:normal;text-align:left;display:-webkit-box;display:-ms-flexbox;display:flex;width:90%}.muza__descr{margin-top:50px;margin-left:70px;color:#000;font-family:Montserrat;font-size:46px;font-style:normal;font-weight:400;line-height:normal;text-align:left;display:-webkit-box;display:-ms-flexbox;display:flex;width:60%}.muza__descr_container{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end}.meeting__container{height:1400px}.meeting__inputs{width:90%;height:46px;border-radius:10px;border:1px solid #000;padding-left:40px}.container{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.select{margin-right:50px;height:35px;border-radius:10px;border:1px solid var(--gray_stroke, #D0D2D8);width:200px}.select__container{display:-webkit-box;display:-ms-flexbox;display:flex;width:93%;margin-top:30px}.NewContainer{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end;margin-top:40px}.search_container{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.search__descr{margin-right:25px}/*# sourceMappingURL=style.module.css.map */

1
src/Components/css/style.module.css.map Normal file
View File

@@ -0,0 +1 @@
{"version":3,"sources":["../HomePage/style.module.scss"],"names":[],"mappings":"AAII,iBACI,YAAA,CACA,mBAAA,CAAA,mBAAA,CAAA,YAAA,CACA,wBAAA,CAAA,qBAAA,CAAA,kBAAA,CACA,2BAAA,CAAA,4BAAA,CAAA,yBAAA,CAAA,qBAAA,CACA,UAAA,CAGJ,aACI,gBAAA,CACA,UAAA,CACA,sBAAA,CACA,mBAAA,CACA,iBAAA,CACA,eAAA,CACA,kBAAA,CACA,eAAA,CACA,mBAAA,CAAA,mBAAA,CAAA,YAAA,CACA,SAAA,CAGJ,aAKI,eAAA,CACA,gBAAA,CACA,UAAA,CACA,sBAAA,CACA,cAAA,CACA,iBAAA,CACA,eAAA,CACA,kBAAA,CACA,eAAA,CACA,mBAAA,CAAA,mBAAA,CAAA,YAAA,CACA,SAAA,CAdA,uBACI,mBAAA,CAAA,mBAAA,CAAA,YAAA,CACA,oBAAA,CAAA,iBAAA,CAAA,wBAAA,CAiBT,oBACC,aAAA,CAED,iBACK,SAAA,CACA,WAAA,CACA,kBAAA,CACA,qBAAA,CACA,iBAAA,CAIR,WACI,mBAAA,CAAA,mBAAA,CAAA,YAAA,CACA,uBAAA,CAAA,oBAAA,CAAA,sBAAA,CAGJ,QACI,iBAAA,CACA,WAAA,CACA,kBAAA,CACA,4CAAA,CACA,WAAA,CACA,mBACI,mBAAA,CAAA,mBAAA,CAAA,YAAA,CACA,SAAA,CACA,eAAA,CAGR,cACI,mBAAA,CAAA,mBAAA,CAAA,YAAA,CACA,oBAAA,CAAA,iBAAA,CAAA,wBAAA,CACA,eAAA,CAEJ,kBACI,mBAAA,CAAA,mBAAA,CAAA,YAAA,CACA,wBAAA,CAAA,qBAAA,CAAA,kBAAA,CACA,uBAAA,CAAA,oBAAA,CAAA,sBAAA,CAEJ,eACI,iBAAA","file":"style.module.css"}

BIN
src/img/headerImg/OgettoLogo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.9 KiB