Merge branch 'master' of https://git.wmi.amu.edu.pl/s442783/HighNeed_projekt_inz
This commit is contained in:
Mikhail Ronchyk
commit
5f10a6f405
@ -5,10 +5,13 @@ import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
|
||||
import NavBar from './components/NavBar';
|
||||
import Home from './Pages/Home';
|
||||
import Login from './Pages/Login';
|
||||
import Register from './Pages/Register';
|
||||
import ResetPWD from './Pages/ResetPWD';
|
||||
import SearchEvent from './Pages/SearchEvent';
|
||||
import Calendar from './Pages/Calendar';
|
||||
import FBfanpage from './Pages/FBfanpage';
|
||||
|
||||
import EventDetails from './Pages/EventDetails';
|
||||
import EventDetails2 from './Pages/EventDetails2';
|
||||
|
||||
function App() {
|
||||
return (
|
||||
@ -19,8 +22,12 @@ function App() {
|
||||
<Route path='/' exact component={Home} />
|
||||
<Route path='/login' exact component={Login} />
|
||||
<Route path='/search-events' exact component={SearchEvent} />
|
||||
<Route path='/register' exact component={Register} />
|
||||
<Route path='/reset' exact component={ResetPWD} />
|
||||
<Route path='/calendar' exact component={Calendar} />
|
||||
<Route path='/fanpage' exact component={FBfanpage} />
|
||||
<Route path='/EventDetails' exact component={EventDetails} />
|
||||
<Route path='/EventDetails2' exact component={EventDetails2} />
|
||||
</Switch>
|
||||
</Router>
|
||||
</>
|
||||
|
||||
@ -1,11 +1,17 @@
|
||||
import React from 'react';
|
||||
import '../App.css';
|
||||
import './WIP.css'
|
||||
|
||||
function Calendar() {
|
||||
return (
|
||||
<>
|
||||
Calendar
|
||||
</>
|
||||
<div className='wip'>
|
||||
<div className='wip-content'>
|
||||
<div class='line'></div>
|
||||
|
||||
<h3> Strona w budowie </h3>
|
||||
|
||||
<div class='line'></div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
13
highneed_react/src/Pages/EventDetails.js
Normal file
13
highneed_react/src/Pages/EventDetails.js
Normal file
@ -0,0 +1,13 @@
|
||||
import React from 'react';
|
||||
import '../App.css';
|
||||
import StocksDetails from '../components/StocksDetails';
|
||||
|
||||
function EventDetails() {
|
||||
return (
|
||||
<>
|
||||
<StocksDetails/>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export default EventDetails;
|
||||
13
highneed_react/src/Pages/EventDetails2.js
Normal file
13
highneed_react/src/Pages/EventDetails2.js
Normal file
@ -0,0 +1,13 @@
|
||||
import React from 'react';
|
||||
import '../App.css';
|
||||
import StocksDetails2 from '../components/StocksDetails2';
|
||||
|
||||
function EventDetails2() {
|
||||
return (
|
||||
<>
|
||||
<StocksDetails2/>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export default EventDetails2;
|
||||
@ -1,11 +1,17 @@
|
||||
import React from 'react';
|
||||
import '../App.css';
|
||||
import './WIP.css'
|
||||
|
||||
function FBfanpage() {
|
||||
return (
|
||||
<>
|
||||
FB fanpage
|
||||
</>
|
||||
<div className='wip'>
|
||||
<div className='wip-content'>
|
||||
<div class='line'></div>
|
||||
|
||||
<h3> Strona w budowie </h3>
|
||||
|
||||
<div class='line'></div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
@ -50,6 +50,7 @@
|
||||
padding-left: 1%;
|
||||
padding-right: 1%;
|
||||
display: flex;
|
||||
align-items:center;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
@ -97,11 +98,10 @@ p {
|
||||
}
|
||||
|
||||
.searching {
|
||||
padding-top: 10%;
|
||||
margin-top: 10%;
|
||||
}
|
||||
|
||||
.search-components {
|
||||
width: 205px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
@ -84,8 +84,9 @@ function Home() {
|
||||
<h1>Wyszukiwanie wydarzeń w Twojej okolicy</h1>
|
||||
<p>Znajdź grupy i wydarzenia na terenie Poznania, dzięki którym Twoje dziecko rozwinie swoje zainteresowania oraz zawrze nowe znajomości. </p>
|
||||
|
||||
<Link className='center searching' to={'/search-events'}>
|
||||
<button className='button'>
|
||||
|
||||
<button className='button searching'>
|
||||
<Link to={'/search-events'}>
|
||||
<div className='search-components'>
|
||||
<div className='search button-icon'>
|
||||
<svg width="25" height="25" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
@ -96,8 +97,9 @@ function Home() {
|
||||
Wyszukaj wydarzenia
|
||||
</div>
|
||||
</div>
|
||||
</Link>
|
||||
</button>
|
||||
</Link>
|
||||
|
||||
</div>
|
||||
|
||||
<div className='article-img2'>
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
.signup {
|
||||
padding-top:5%;
|
||||
.login {
|
||||
padding-top: 5%;
|
||||
padding-bottom: 5%;
|
||||
}
|
||||
|
||||
.login-container {
|
||||
@ -14,40 +15,41 @@ h3 {
|
||||
display:flex;
|
||||
justify-content:center;
|
||||
padding: 5%;
|
||||
font-size: 40px;
|
||||
font-size: 35px;
|
||||
color: #347945;
|
||||
}
|
||||
|
||||
.login{
|
||||
p2{
|
||||
margin: 5% 0%;
|
||||
text-align:center;
|
||||
}
|
||||
|
||||
form {
|
||||
width: 100%;
|
||||
width:75%;
|
||||
}
|
||||
|
||||
.input-container{
|
||||
padding: 5% 5%
|
||||
padding: 0% 5%;
|
||||
display:flex;
|
||||
flex-direction:column;
|
||||
}
|
||||
|
||||
|
||||
input {
|
||||
border-color: #347945;
|
||||
border-color: #64BE7B;
|
||||
border-radius: 5px;
|
||||
|
||||
height:20px;
|
||||
width: 100%;
|
||||
|
||||
padding:1% 0%;
|
||||
margin:2% 0%;
|
||||
height: 20px;
|
||||
padding: 1% 0%;
|
||||
margin: 4% 0%;
|
||||
}
|
||||
|
||||
.login-bottom {
|
||||
padding: 5% 5%;
|
||||
|
||||
.login-bottom {
|
||||
padding: 5% 0%;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
|
||||
.text-button{
|
||||
@ -55,4 +57,35 @@ input {
|
||||
display:flex;
|
||||
flex-direction:column;
|
||||
justify-content:center;
|
||||
}
|
||||
|
||||
.register
|
||||
{
|
||||
min-width:165px;
|
||||
}
|
||||
|
||||
.reset {
|
||||
min-width: 165px;
|
||||
}
|
||||
|
||||
|
||||
@media screen and (max-width: 416px) {
|
||||
form{
|
||||
width:90%;
|
||||
}
|
||||
|
||||
.register {
|
||||
min-width: 120px;
|
||||
}
|
||||
|
||||
.reset {
|
||||
min-width: 120px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 801px) {
|
||||
|
||||
form{
|
||||
width:60%;
|
||||
}
|
||||
}
|
||||
@ -1,39 +1,47 @@
|
||||
import React from 'react'
|
||||
import React from 'react';
|
||||
import { Link } from 'react-router-dom';
|
||||
import './Login.css'
|
||||
|
||||
function Login() {
|
||||
return (
|
||||
<div className='signup' >
|
||||
<div className='login' >
|
||||
|
||||
<div className='login-container'>
|
||||
<div class='line'></div>
|
||||
|
||||
<form>
|
||||
|
||||
<h3>Logowanie</h3>
|
||||
<div className='input-container'>
|
||||
<p>E-mail:</p>
|
||||
<input type='tekst' />
|
||||
|
||||
<p>Hasło:</p>
|
||||
|
||||
<p>Hasło:</p>
|
||||
<input type='tekst' />
|
||||
|
||||
<button className='button login'>
|
||||
Zaloguj sie
|
||||
</button>
|
||||
<button className='button sign-in' Link to={'/'}>
|
||||
Zaloguj się
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className='login-bottom'>
|
||||
<div className='text-button'>
|
||||
<p>Pierwszy raz na stronie?</p>
|
||||
<p2>Pierwszy raz na stronie?</p2>
|
||||
|
||||
<Link to='/register'>
|
||||
<button className='button register'>
|
||||
Zarejestruj się
|
||||
Zarejestruj się
|
||||
</button>
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
<div className='text-button'>
|
||||
<p>Nie pamiętasz hasła?</p>
|
||||
<p2>Nie pamiętasz hasła?</p2>
|
||||
<Link to='/reset'>
|
||||
<button className='button reset'>
|
||||
Zresetuj hasło
|
||||
Zresetuj hasło
|
||||
</button>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -41,6 +49,6 @@ function Login() {
|
||||
<div class='line'></div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
)
|
||||
}
|
||||
export default Login;
|
||||
export default Login
|
||||
110
highneed_react/src/Pages/Register.css
Normal file
110
highneed_react/src/Pages/Register.css
Normal file
@ -0,0 +1,110 @@
|
||||
.register {
|
||||
padding-top: 5%;
|
||||
padding-bottom: 5%;
|
||||
}
|
||||
|
||||
.register-container {
|
||||
background-color: #F0FAF3;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.register2-container {
|
||||
background-color: #F0FAF3;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.register-top{
|
||||
padding:5%;
|
||||
display:flex;
|
||||
flex-direction:row;
|
||||
justify-content:space-between;
|
||||
align-items:center;
|
||||
}
|
||||
|
||||
.register-bottom {
|
||||
padding: 5% 0%;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
|
||||
.address
|
||||
{
|
||||
display:flex;
|
||||
flex-direction:row;
|
||||
}
|
||||
|
||||
.address-input {
|
||||
width:100%;
|
||||
}
|
||||
|
||||
h4{
|
||||
font-size: 35px;
|
||||
color: #347945;
|
||||
}
|
||||
|
||||
p2 {
|
||||
margin: 5% 0%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.form-1 {
|
||||
padding-bottom:5%;
|
||||
width: 75%;
|
||||
}
|
||||
|
||||
.form-2 {
|
||||
width: 75%;
|
||||
}
|
||||
|
||||
.undo {
|
||||
min-width: 165px;
|
||||
}
|
||||
|
||||
.sign-up {
|
||||
min-width: 165px;
|
||||
}
|
||||
|
||||
|
||||
@media screen and (max-width: 416px) {
|
||||
.form-1 {
|
||||
width: 90%;
|
||||
}
|
||||
.form-2 {
|
||||
width: 90%;
|
||||
}
|
||||
|
||||
.undo {
|
||||
min-width: 120px;
|
||||
}
|
||||
|
||||
.sign-up {
|
||||
min-width: 120px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 801px) {
|
||||
|
||||
.form-1 {
|
||||
width: 60%;
|
||||
}
|
||||
.form-2 {
|
||||
width: 60%;
|
||||
}
|
||||
|
||||
.undo {
|
||||
min-width: 175px;
|
||||
}
|
||||
|
||||
.sign-up {
|
||||
min-width: 175px;
|
||||
}
|
||||
|
||||
}
|
||||
93
highneed_react/src/Pages/Register.js
Normal file
93
highneed_react/src/Pages/Register.js
Normal file
@ -0,0 +1,93 @@
|
||||
import React from 'react';
|
||||
import { Link } from 'react-router-dom';
|
||||
import './Register.css'
|
||||
|
||||
function Register() {
|
||||
return (
|
||||
<div className='register' >
|
||||
|
||||
<div className='register-container'>
|
||||
<div class='line'></div>
|
||||
|
||||
<form className='form-1'>
|
||||
<div className='register-top'>
|
||||
<h4>Rejestracja</h4>
|
||||
<svg width="80" height="35" viewBox="0 0 80 35" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<circle cx="17.5" cy="17.5" r="16.5" fill="#64BE7B" stroke="#347945" stroke-width="2" />
|
||||
<path d="M18.3617 11.4C18.6617 11.4 18.9137 11.508 19.1177 11.724C19.3217 11.928 19.4237 12.186 19.4237 12.498V22.902C19.4237 23.214 19.3097 23.478 19.0817 23.694C18.8537 23.898 18.5717 24 18.2357 24C17.8997 24 17.6237 23.898 17.4077 23.694C17.1917 23.478 17.0837 23.214 17.0837 22.902V14.37L15.9677 15.054C15.7877 15.162 15.5957 15.216 15.3917 15.216C15.0917 15.216 14.8337 15.102 14.6177 14.874C14.4137 14.646 14.3117 14.394 14.3117 14.118C14.3117 13.926 14.3597 13.746 14.4557 13.578C14.5637 13.41 14.7017 13.278 14.8697 13.182L17.5877 11.562C17.7917 11.454 18.0497 11.4 18.3617 11.4Z" fill="#347945" />
|
||||
<circle cx="62.5" cy="17.5" r="16.5" fill="#D7FBDF" stroke="#347945" stroke-width="2" />
|
||||
<path d="M65.7748 22.02C66.0628 22.02 66.3028 22.116 66.4948 22.308C66.6868 22.5 66.7828 22.74 66.7828 23.028C66.7828 23.304 66.6868 23.538 66.4948 23.73C66.3028 23.91 66.0628 24 65.7748 24H59.6548C59.3428 24 59.0968 23.904 58.9168 23.712C58.7368 23.52 58.6468 23.274 58.6468 22.974C58.6468 22.674 58.7548 22.41 58.9708 22.182L62.8948 17.988C63.3388 17.508 63.6868 17.028 63.9388 16.548C64.2028 16.056 64.3348 15.606 64.3348 15.198C64.3348 14.658 64.1428 14.19 63.7588 13.794C63.3748 13.398 62.9308 13.2 62.4268 13.2C62.0788 13.2 61.7248 13.32 61.3648 13.56C61.0168 13.788 60.6988 14.094 60.4108 14.478C60.1948 14.766 59.9188 14.91 59.5828 14.91C59.3188 14.91 59.0728 14.808 58.8448 14.604C58.6288 14.4 58.5208 14.172 58.5208 13.92C58.5208 13.74 58.5808 13.56 58.7008 13.38C58.8208 13.188 59.0008 12.972 59.2408 12.732C59.6968 12.276 60.2248 11.91 60.8248 11.634C61.4248 11.358 62.0008 11.22 62.5528 11.22C63.3448 11.22 64.0408 11.388 64.6408 11.724C65.2408 12.06 65.7028 12.522 66.0268 13.11C66.3508 13.698 66.5128 14.364 66.5128 15.108C66.5128 15.84 66.3148 16.596 65.9188 17.376C65.5348 18.144 65.0128 18.882 64.3528 19.59L62.0668 22.02H65.7748Z" fill="#347945" />
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<div className='input-container'>
|
||||
<p>E-mail:</p>
|
||||
<input type='tekst' />
|
||||
<p>Hasło:</p>
|
||||
<input type='tekst' />
|
||||
<p>Powtórz hasło:</p>
|
||||
<input type='tekst' />
|
||||
|
||||
<button className='button'>
|
||||
Dalej
|
||||
</button>
|
||||
|
||||
</div>
|
||||
</form>
|
||||
<div class='line'></div>
|
||||
</div>
|
||||
|
||||
<div className='register2-container'>
|
||||
<div class='line'></div>
|
||||
<form className='form-2'>
|
||||
<div className='register-top'>
|
||||
<h4>Rejestracja</h4>
|
||||
<svg width="80" height="35" viewBox="0 0 80 35" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<circle cx="17.5" cy="17.5" r="16.5" fill="#D7FBDF" stroke="#347945" stroke-width="2" />
|
||||
<path d="M18.3617 11.4C18.6617 11.4 18.9137 11.508 19.1177 11.724C19.3217 11.928 19.4237 12.186 19.4237 12.498V22.902C19.4237 23.214 19.3097 23.478 19.0817 23.694C18.8537 23.898 18.5717 24 18.2357 24C17.8997 24 17.6237 23.898 17.4077 23.694C17.1917 23.478 17.0837 23.214 17.0837 22.902V14.37L15.9677 15.054C15.7877 15.162 15.5957 15.216 15.3917 15.216C15.0917 15.216 14.8337 15.102 14.6177 14.874C14.4137 14.646 14.3117 14.394 14.3117 14.118C14.3117 13.926 14.3597 13.746 14.4557 13.578C14.5637 13.41 14.7017 13.278 14.8697 13.182L17.5877 11.562C17.7917 11.454 18.0497 11.4 18.3617 11.4Z" fill="#347945" />
|
||||
<circle cx="62.5" cy="17.5" r="16.5" fill="#64BE7B" stroke="#347945" stroke-width="2" />
|
||||
<path d="M65.7748 22.02C66.0628 22.02 66.3028 22.116 66.4948 22.308C66.6868 22.5 66.7828 22.74 66.7828 23.028C66.7828 23.304 66.6868 23.538 66.4948 23.73C66.3028 23.91 66.0628 24 65.7748 24H59.6548C59.3428 24 59.0968 23.904 58.9168 23.712C58.7368 23.52 58.6468 23.274 58.6468 22.974C58.6468 22.674 58.7548 22.41 58.9708 22.182L62.8948 17.988C63.3388 17.508 63.6868 17.028 63.9388 16.548C64.2028 16.056 64.3348 15.606 64.3348 15.198C64.3348 14.658 64.1428 14.19 63.7588 13.794C63.3748 13.398 62.9308 13.2 62.4268 13.2C62.0788 13.2 61.7248 13.32 61.3648 13.56C61.0168 13.788 60.6988 14.094 60.4108 14.478C60.1948 14.766 59.9188 14.91 59.5828 14.91C59.3188 14.91 59.0728 14.808 58.8448 14.604C58.6288 14.4 58.5208 14.172 58.5208 13.92C58.5208 13.74 58.5808 13.56 58.7008 13.38C58.8208 13.188 59.0008 12.972 59.2408 12.732C59.6968 12.276 60.2248 11.91 60.8248 11.634C61.4248 11.358 62.0008 11.22 62.5528 11.22C63.3448 11.22 64.0408 11.388 64.6408 11.724C65.2408 12.06 65.7028 12.522 66.0268 13.11C66.3508 13.698 66.5128 14.364 66.5128 15.108C66.5128 15.84 66.3148 16.596 65.9188 17.376C65.5348 18.144 65.0128 18.882 64.3528 19.59L62.0668 22.02H65.7748Z" fill="#347945" />
|
||||
</svg>
|
||||
</div>
|
||||
<div className='input-container'>
|
||||
<p>Imię:</p>
|
||||
<input type='tekst' />
|
||||
|
||||
<p>Nazwisko:</p>
|
||||
<input type='tekst' />
|
||||
|
||||
<p>Adres:</p>
|
||||
<input type='tekst' />
|
||||
|
||||
<p>Kod pocztowy:</p>
|
||||
<div className='address'>
|
||||
<input className='address-input' type='tekst'/>
|
||||
<input className='address-input' type='tekst' />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='register-bottom'>
|
||||
<div className='text-button'>
|
||||
<Link to='/register'>
|
||||
<button className='button undo'>
|
||||
Cofnij
|
||||
</button>
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
<div className='text-button'>
|
||||
<Link to='/login'>
|
||||
<button className='button sign-up'>
|
||||
Zarejestruj się
|
||||
</button>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
<div class='line'></div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
)
|
||||
}
|
||||
export default Register
|
||||
33
highneed_react/src/Pages/ResetPWD.js
Normal file
33
highneed_react/src/Pages/ResetPWD.js
Normal file
@ -0,0 +1,33 @@
|
||||
import React from 'react';
|
||||
import { Link } from 'react-router-dom';
|
||||
import './Register.css'
|
||||
|
||||
function ResetPWD() {
|
||||
return (
|
||||
<div className='register' >
|
||||
|
||||
<div className='register-container'>
|
||||
<div class='line'></div>
|
||||
<form className='form-1'>
|
||||
|
||||
<h3>Resetowanie hasła</h3>
|
||||
<div className='input-container'>
|
||||
<p>Podaj adres e-mail:</p>
|
||||
<input type='tekst' />
|
||||
|
||||
<button className='button reset'>
|
||||
<Link className='center' to={'/'}>
|
||||
<div className='search-text'>
|
||||
Zresetuj hasło
|
||||
</div>
|
||||
</Link>
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<div class='line'></div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
export default ResetPWD
|
||||
@ -1,11 +1,193 @@
|
||||
import React from 'react';
|
||||
import '../App.css';
|
||||
import Events from '../components/Events';
|
||||
import React, { useState } from 'react';import '../App.css';
|
||||
|
||||
import '../components/ToggleSwitch.css'
|
||||
import Stocks from '../components/Stocks';
|
||||
import Stocks2 from '../components/Stocks2';
|
||||
|
||||
function SearchEvent() {
|
||||
|
||||
const [click, setClick] = useState(false);
|
||||
const handleClick = () => setClick(!click);
|
||||
const closeMobileMenu = () => setClick(false);
|
||||
|
||||
return (
|
||||
<>
|
||||
<Events/>
|
||||
|
||||
<div className='calendar-line'>
|
||||
<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M19.6201 5.99006C19.1301 5.50006 18.3401 5.50006 17.8501 5.99006L9.54006 14.3001C9.15006 14.6901 9.15006 15.3201 9.54006 15.7101L17.8501 24.0201C18.3401 24.5101 19.1301 24.5101 19.6201 24.0201C20.1101 23.5301 20.1101 22.7401 19.6201 22.2501L12.3801 15.0001L19.6301 7.75006C20.1101 7.27006 20.1101 6.47006 19.6201 5.99006Z" fill="black" fill-opacity="0.8" />
|
||||
</svg>
|
||||
|
||||
<p>Pon. 14.06</p>
|
||||
<p>Wt. 15.06</p>
|
||||
<p>Śr. 16.06</p>
|
||||
<p>Czw. 17.06</p>
|
||||
<p>Pt. 18.06</p>
|
||||
<p>Sob. 19.06</p>
|
||||
<p>Ndz. 20.06</p>
|
||||
|
||||
<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M10.3799 5.99006C10.8699 5.50006 11.6599 5.50006 12.1499 5.99006L20.4599 14.3001C20.8499 14.6901 20.8499 15.3201 20.4599 15.7101L12.1499 24.0201C11.6599 24.5101 10.8699 24.5101 10.3799 24.0201C9.88994 23.5301 9.88994 22.7401 10.3799 22.2501L17.6199 15.0001L10.3699 7.75006C9.88994 7.27006 9.88994 6.47006 10.3799 5.99006Z" fill="black" fill-opacity="0.8" />
|
||||
</svg>
|
||||
|
||||
</div>
|
||||
<div className='line'></div>
|
||||
|
||||
<div className='filter-checkboxes'>
|
||||
|
||||
<div className='toggle-text'>
|
||||
<p3>Lokalizacja</p3>
|
||||
<label className="switch">
|
||||
<input type="checkbox" />
|
||||
<span class="slider g round"></span>
|
||||
</label>
|
||||
</div>
|
||||
<div className='toggle-text'>
|
||||
<p3>Wiek</p3>
|
||||
<label className="switch">
|
||||
<input type="checkbox" />
|
||||
<span class="slider round bl"></span>
|
||||
</label>
|
||||
</div>
|
||||
<div className='toggle-text'>
|
||||
<p3>Kategoria</p3>
|
||||
<label className="switch">
|
||||
<input type="checkbox" />
|
||||
<span class="slider round r"></span>
|
||||
</label>
|
||||
</div>
|
||||
<div className='toggle-text'>
|
||||
<p3>Rodzaj</p3>
|
||||
<label className="switch">
|
||||
<input type="checkbox" />
|
||||
<span class="slider round p"></span>
|
||||
</label>
|
||||
</div>
|
||||
<div className='toggle-text'>
|
||||
<p3>Ocena</p3>
|
||||
<label className="switch">
|
||||
<input type="checkbox" />
|
||||
<span class="slider round y"></span>
|
||||
</label>
|
||||
</div>
|
||||
<div className='toggle-text'>
|
||||
<p3>Cena</p3>
|
||||
<label className="switch">
|
||||
<input type="checkbox" />
|
||||
<span class="slider round v"></span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div className='line'></div>
|
||||
|
||||
<nav className='filter-nav'>
|
||||
<div className='filter'>
|
||||
|
||||
<div className='filter-icon ' onClick={handleClick}>
|
||||
<div className={click ? 'menu-icon-01' : 'menu-icon-02'}>
|
||||
|
||||
<svg className='icon-01' width="25" height="25" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M3.11456 7.6875C2.60415 8.19792 2.60415 9.02083 3.11456 9.53125L11.7708 18.1875C12.1771 18.5937 12.8333 18.5937 13.2396 18.1875L21.8958 9.53125C22.4062 9.02083 22.4062 8.19792 21.8958 7.6875C21.3854 7.17708 20.5625 7.17708 20.0521 7.6875L12.5 15.2292L4.9479 7.67708C4.4479 7.17708 3.61456 7.17708 3.11456 7.6875Z" fill="#323232" />
|
||||
</svg>
|
||||
<svg className='icon-02' width="25" height="25" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M21.8854 17.3125C22.3958 16.8021 22.3958 15.9792 21.8854 15.4688L13.2291 6.8125C12.8229 6.40625 12.1666 6.40625 11.7604 6.8125L3.10413 15.4687C2.59371 15.9792 2.59371 16.8021 3.10413 17.3125C3.61454 17.8229 4.43746 17.8229 4.94788 17.3125L12.5 9.77083L20.052 17.3229C20.552 17.8229 21.3854 17.8229 21.8854 17.3125Z" fill="black" />
|
||||
</svg>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h2>Filtruj</h2>
|
||||
</div>
|
||||
<div className='line'></div>
|
||||
</nav>
|
||||
|
||||
<nav className={click ? 'filterbar' : 'filterbar disable'}>
|
||||
<div className='filter-categories'>
|
||||
|
||||
<div className='category-checkbox g'>
|
||||
<h2>Lokalizacja</h2>
|
||||
<div className='checkbox-text'>
|
||||
<input type='checkbox' />
|
||||
<p3>Nowe miasto</p3>
|
||||
</div>
|
||||
<div className='checkbox-text'>
|
||||
<input type='checkbox' />
|
||||
<p3>Stare miasto</p3>
|
||||
</div>
|
||||
<div className='checkbox-text'>
|
||||
<input type='checkbox' />
|
||||
<p3>Jeżyce</p3>
|
||||
</div>
|
||||
<div className='checkbox-text'>
|
||||
<input type='checkbox' />
|
||||
<p3>Grunwald</p3>
|
||||
</div>
|
||||
</div>
|
||||
<div className='category-checkbox bl'>
|
||||
<h2>Wiek</h2>
|
||||
<div className='checkbox-text'>
|
||||
<input type='text' />
|
||||
<p3>-</p3>
|
||||
<input type='text' />
|
||||
</div>
|
||||
</div>
|
||||
<div className='category-checkbox r'>
|
||||
<h2>Kategorie</h2>
|
||||
<div className='checkbox-text'>
|
||||
<input type='checkbox' />
|
||||
<p3>Sport</p3>
|
||||
</div>
|
||||
<div className='checkbox-text'>
|
||||
<input type='checkbox' />
|
||||
<p3>Zabawa</p3>
|
||||
</div>
|
||||
<div className='checkbox-text'>
|
||||
<input type='checkbox' />
|
||||
<p3>Edukacja</p3>
|
||||
</div>
|
||||
<div className='checkbox-text'>
|
||||
<input type='checkbox' />
|
||||
<p3>Muzyka</p3>
|
||||
</div>
|
||||
</div>
|
||||
<div className='category-checkbox v'>
|
||||
<h2>Cena</h2>
|
||||
<div className='checkbox-text'>
|
||||
<input type='text' />
|
||||
<p3>-</p3>
|
||||
<input type='text' />
|
||||
</div>
|
||||
</div>
|
||||
<div className='category-checkbox p'>
|
||||
<h2>Rodzaj</h2>
|
||||
<div className='checkbox-text'>
|
||||
<input type='checkbox' />
|
||||
<p3>Online</p3>
|
||||
</div>
|
||||
<div className='checkbox-text'>
|
||||
<input type='checkbox' />
|
||||
<p3>Na miejscu</p3>
|
||||
</div>
|
||||
<div className='checkbox-text'>
|
||||
<input type='checkbox' />
|
||||
<p3>Jednodniowe</p3>
|
||||
</div>
|
||||
<div className='checkbox-text'>
|
||||
<input type='checkbox' />
|
||||
<p3>Kilkudniowe</p3>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='category-checkbox y'>
|
||||
<h2>Ocena</h2>
|
||||
<div className='checkbox-text'>
|
||||
<input type='text' />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
<Stocks/>
|
||||
<Stocks2/>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
8
highneed_react/src/Pages/WIP.css
Normal file
8
highneed_react/src/Pages/WIP.css
Normal file
@ -0,0 +1,8 @@
|
||||
.wip {
|
||||
padding-top: 5%;
|
||||
padding-bottom: 5%;
|
||||
}
|
||||
|
||||
.wip-content {
|
||||
background-color: #F0FAF3;
|
||||
}
|
||||
@ -22,7 +22,6 @@ function EventItem(props) {
|
||||
<Link className='events__item__link' to={props.path}>
|
||||
<h4 className='content events__item__title'>{props.title}</h4>
|
||||
</Link>
|
||||
<<<<<<< HEAD
|
||||
<h5 className='content events__item__category'>{props.category}</h5>
|
||||
<h5 className='content events__item__age'>{props.age}</h5>
|
||||
<h5 className='content events__item__address'>{props.address}</h5>
|
||||
@ -40,18 +39,6 @@ function EventItem(props) {
|
||||
</Link>
|
||||
|
||||
</div>
|
||||
=======
|
||||
<h5 className='events__item__category'>{props.category}</h5>
|
||||
<h5 className='events__item__age'>{props.age}</h5>
|
||||
<h5 className='events__item__address'>{props.address}</h5>
|
||||
|
||||
<Link className='events__item__link' to={props.path}>
|
||||
<button className='button button-details'>Szczegóły</button>
|
||||
</Link>
|
||||
<Link className='events__item__link' to={props.path}>
|
||||
<button className='button button-add'>Dodaj do listy</button>
|
||||
</Link>
|
||||
>>>>>>> 26686fee423d80e0080a6a14b61d8f4a759a7540
|
||||
</div>
|
||||
|
||||
</li>
|
||||
|
||||
@ -1,188 +1,198 @@
|
||||
.events
|
||||
{
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.events__container
|
||||
{
|
||||
.events {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.filter {
|
||||
background-color: #64BE7B;
|
||||
height: 50px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
padding: 0% 1%;
|
||||
}
|
||||
|
||||
.filter-icon {
|
||||
padding-right: 2%;
|
||||
}
|
||||
|
||||
.calendar-line {
|
||||
background-color: white;
|
||||
height: 50px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
padding: 0% 1%;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.filter-checkboxes {
|
||||
background-color: #F0FAF3;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
padding: 0% 2%;
|
||||
justify-content: space-evenly;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.toggle-text{
|
||||
padding-left:10px;
|
||||
padding-right:10px;
|
||||
padding-bottom:10px;
|
||||
display:flex;
|
||||
align-items:center;
|
||||
flex-direction:column;
|
||||
}
|
||||
|
||||
p3{
|
||||
font-weight:bold;
|
||||
margin: 10px 1%;
|
||||
}
|
||||
|
||||
|
||||
.menu-icon-01 {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
}
|
||||
|
||||
.menu-icon-02 {
|
||||
position: relative;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
}
|
||||
|
||||
.icon-01, .icon-02 {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.menu-icon-02 .icon-02 {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.menu-icon-01 .icon-01 {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
|
||||
.filterbar {
|
||||
background-color: white;
|
||||
padding: 0% 5%;
|
||||
}
|
||||
|
||||
.filterbar.disable {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.filter-categories {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap:wrap;
|
||||
justify-content:space-between;
|
||||
}
|
||||
|
||||
.category-checkbox {
|
||||
width:50%;
|
||||
margin: 2% 0%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.checkbox-text {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items:center;
|
||||
}
|
||||
|
||||
|
||||
.events__container {
|
||||
width: 85%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.events__items
|
||||
{
|
||||
.events__items {
|
||||
display: block;
|
||||
margin: 3%;
|
||||
|
||||
|
||||
}
|
||||
|
||||
.content
|
||||
{
|
||||
padding: 2px;
|
||||
}
|
||||
|
||||
.events__item__img
|
||||
{
|
||||
width:500px;
|
||||
height:500px;
|
||||
|
||||
.events__item__img {
|
||||
max-width: 100%;
|
||||
height:auto;
|
||||
|
||||
|
||||
|
||||
height: auto;
|
||||
}
|
||||
|
||||
|
||||
.events__item__info
|
||||
{
|
||||
.events__item__info {
|
||||
padding: 20px 30px 30px;
|
||||
width: 80%;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.events__item__img__link
|
||||
{
|
||||
|
||||
}
|
||||
|
||||
a
|
||||
.events__item__img__link {
|
||||
}
|
||||
|
||||
a {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.button-container
|
||||
{
|
||||
color: black;
|
||||
margin-top: 10px;;
|
||||
}
|
||||
|
||||
.button {
|
||||
background-color: #64BE7B; /* Green */
|
||||
background-color: #64BE7B;
|
||||
border: none;
|
||||
color: white;
|
||||
padding: 8px 16px;
|
||||
padding: 6px 16px;
|
||||
text-align: center;
|
||||
display: inline-block;
|
||||
font-size: 16px;
|
||||
border-radius: 40px;
|
||||
cursor: pointer;
|
||||
margin-right: 20px;
|
||||
|
||||
}
|
||||
|
||||
.button:hover {background-color: #347945}
|
||||
.button:hover {
|
||||
background-color: #347945
|
||||
}
|
||||
|
||||
.event_line {
|
||||
height: 2px;
|
||||
width: 100%;
|
||||
background-color: #347945;
|
||||
margin-top: 10px;
|
||||
|
||||
.g {
|
||||
color: #347945;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 701px) {
|
||||
.button{
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.events__item
|
||||
{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.bl {
|
||||
color: dodgerblue;
|
||||
}
|
||||
|
||||
/*.events {
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.events__container {
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
align-items: center;
|
||||
max-width: 2120px;
|
||||
width: 100%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.events__wrapper {
|
||||
width: 100%;
|
||||
position: relative;
|
||||
margin: 50px 0 45px;
|
||||
}
|
||||
|
||||
.events__items {
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.events__item {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
margin: 0 1rem;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.events__item__link {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
box-shadow: 0 6px 20px rgba(56, 125, 255, 0.17);
|
||||
-webkit-filter: drop-shadow(0 6px 20px rgba(56, 125, 255, 0.017));
|
||||
filter: drop-shadow(0 6px 20px rgba(56, 125, 255, 0.017));
|
||||
border-radius: 10px;
|
||||
overflow: hidden;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.events__item__pic-wrap {
|
||||
position: relative;
|
||||
width: 50%;
|
||||
padding-top: 27%; wysokość karty
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.fade-img {
|
||||
animation-name: fade-img;
|
||||
animation-duration: 2s;
|
||||
}
|
||||
|
||||
.events__item__pic-wrap::after {
|
||||
content: attr(data-category);
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
margin-left: 10px;
|
||||
padding: 6px 8px;
|
||||
max-width: calc((100%) - 60px);
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
color: #fff;
|
||||
background-color: #1f98f4;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.events__item__img {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
display: block;
|
||||
width: 90%;
|
||||
max-width: 100%;
|
||||
height: 100%;
|
||||
max-height: 100%;
|
||||
object-fit: cover;
|
||||
transition: all 0.2s linear;
|
||||
}
|
||||
|
||||
.events__item__img:hover {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
.events__item__info {
|
||||
padding: 20px 30px 30px;
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.events__item__text {
|
||||
color: #252e48;
|
||||
font-size: 18px;
|
||||
line-height: 24px;
|
||||
}
|
||||
|
||||
*/
|
||||
.r {
|
||||
color: red;
|
||||
}
|
||||
|
||||
.p {
|
||||
color: hotpink;
|
||||
}
|
||||
|
||||
.bl {
|
||||
color: dodgerblue;
|
||||
}
|
||||
|
||||
.y {
|
||||
color: #F6BB43;
|
||||
}
|
||||
|
||||
.v {
|
||||
color: #967BDC;
|
||||
}
|
||||
|
||||
|
||||
@media screen and (max-width: 800px) {
|
||||
.filter-categories{
|
||||
flex-direction:column;
|
||||
align-content:center;
|
||||
}
|
||||
|
||||
.category-checkbox{
|
||||
align-items:center;
|
||||
}
|
||||
}
|
||||
74
highneed_react/src/components/ToggleSwitch.css
Normal file
74
highneed_react/src/components/ToggleSwitch.css
Normal file
@ -0,0 +1,74 @@
|
||||
.switch {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
min-width: 70px;
|
||||
height: 25px;
|
||||
}
|
||||
|
||||
.switch input {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.slider {
|
||||
position: absolute;
|
||||
cursor: pointer;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-color: #BDBDBD;
|
||||
-webkit-transition: .4s;
|
||||
transition: .4s;
|
||||
}
|
||||
|
||||
.slider:before {
|
||||
position: absolute;
|
||||
content: "";
|
||||
height: 30px;
|
||||
width: 30px;
|
||||
top: -3px;
|
||||
background-color: #5F6368;
|
||||
-webkit-transition: .4s;
|
||||
transition: .4s;
|
||||
}
|
||||
|
||||
input:checked + .slider {
|
||||
background-color: #2196F3;
|
||||
}
|
||||
|
||||
input:checked + .slider:before {
|
||||
-webkit-transform: translateX(40px);
|
||||
-ms-transform: translateX(50px);
|
||||
transform: translateX(50px);
|
||||
}
|
||||
|
||||
.slider.round {
|
||||
border-radius: 34px;
|
||||
}
|
||||
|
||||
.slider.round:before {
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
|
||||
input:checked + .slider.g {
|
||||
background-color: #64BE7B;
|
||||
}
|
||||
input:checked + .slider.bl {
|
||||
background-color: dodgerblue;
|
||||
}
|
||||
input:checked + .slider.r {
|
||||
background-color: red;
|
||||
}
|
||||
input:checked + .slider.p {
|
||||
background-color: hotpink;
|
||||
}
|
||||
input:checked + .slider.bl {
|
||||
background-color: dodgerblue;
|
||||
}
|
||||
input:checked + .slider.y {
|
||||
background-color: #F6BB43;
|
||||
}
|
||||
input:checked + .slider.v {
|
||||
background-color: #967BDC;
|
||||
}
|
||||
10
highneed_react/src/components/event_0.json
Normal file
10
highneed_react/src/components/event_0.json
Normal file
@ -0,0 +1,10 @@
|
||||
{"startDate": "2021-06-16T22:15:00+0200\"",
|
||||
"name": "Darmowy webinar \"Jak odzwyczai\u0107 dziecko korzystania z urz\u0105dze\u0144 mobilnych?\"\"",
|
||||
"description": "Ju\u017c 16.06.2021 (\u015broda) o godzinie 22:15 wyj\u0105tkowy webinar\n \"Jak odzwyczai\u0107 dziecko korzystania z urz\u0105dze\u0144 mobilnych?\"\n\nPodczas webinaru:\n Dowiedz\u0105 si\u0119 Pa\u0144stwo co zrobi\u0107, gdy dziecko sp\u0119dza sw\u00f3j ca\u0142y wolny czas przed tabletem, telefonem czy komputerem,\n\n Otrzymaj\u0105 Pa\u0144stwo wskaz\u00f3wki jak odzwyczai\u0107 dziecko korzystania z urz\u0105dze\u0144 mobilnych\n\nGo\u015bciem specjalnym b\u0119dzie mgr Sonia Michalik, psycholog, coach, familiolog\n\nSzanowni Pa\u0144stwo\u2757\ufe0f\n\nMusicie by\u0107 z nami \n\nZapisuj\u0105c si\u0119 na webinar - otrzymuj\u0105 Pa\u0144stwo darmowego e-booka !\n\u27a1\ufe0f https://webinar.misjarodzic.com/jak-odzwyczaic-dziecko-korzystania-zurzadzen-mobilnych/\n\nSpotkajmy si\u0119 na BEZP\u0141ATNYM webinarze z cyklu Misja Rodzic TV \u2764\n\nDo zobaczenia ! \"",
|
||||
"organizer": " Sonia Michalik - psycholog dzieci\u0119cy",
|
||||
"online": "true",
|
||||
"price": "za darmo",
|
||||
"category": ["Film"]}
|
||||
|
||||
|
||||
|
||||
8
highneed_react/src/components/event_1.json
Normal file
8
highneed_react/src/components/event_1.json
Normal file
@ -0,0 +1,8 @@
|
||||
{"startDate": "2021-06-13T10:30:00+0200\"",
|
||||
"name": "Rodzinna joga na \u015bwie\u017cym powietrzu\"",
|
||||
"description": "Joga rodzinna, czyli co? Czego si\u0119 mo\u017cesz spodziewa\u0107?... Postawimy las drzew, b\u0119dziemy si\u0119 rusza\u0107 jak koty i psy, zrobimy or\u0142a cie\u0144 i wiele innych pozycji b\u0119dzie du\u017co ruchu i wsp\u00f3lnej zabawy z dzie\u0107mi! Przyjd\u017a i sprawd\u017a czy i Wam si\u0119 spodoba!\n\n\nZapisy pod numerem 780044816 (mo\u017cna SMSem). Op\u0142ata za zaj\u0119cia:\nKa\u017cda \u0107wicz\u0105ca osoba (r\u00f3wnie\u017c dzieci) - 10 z\u0142:)\n...przelewem na konto:\nFundacja Pozna\u0144czycy\nSantander Bank Polska\n511090136200000001 34828100\n\n\nNale\u017cy mie\u0107 mat\u0119 lub karimat\u0119 (je\u015bli nie ma si\u0119 maty). Warto zabezpieczy\u0107 si\u0119 przed kleszczami \nWej\u015bcie na teren od ul. Smardzewskiej. W razie deszczu przeniesiemy si\u0119 do sali w \nMinor Studio Aktywno\u015bci ul. Podchor\u0105\u017cych 15. \n\"",
|
||||
"organizer": " Kalejdoskop jogi i Grunwaldzki Park Spo\u0142eczny",
|
||||
"online": "false",
|
||||
"place": ["Projekt schron"],
|
||||
"price": "za darmo",
|
||||
"category": ["Wellness"]}
|
||||
Loading…
Reference in New Issue
Block a user