Skip to content

GitLab

W
Water Cycle
Commit b5be08ce authored by kamasani.Harshitha's avatar kamasani.Harshitha
Browse files
Options

changed the code using REACT ROUTER ,changed the background of buttons,used... 

changed the code using REACT ROUTER ,changed the background of buttons,used side bar component ,removed unnecessary images
parent 066fc949
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 758 additions and 284 deletions
package-lock.json
View file @ b5be08ce
This diff is collapsed.
src/App.js
View file @ b5be08ce
import React, { Component } from 'react';
import './components/App.css';
import {Button} from 'semantic-ui-react';
import Button from './components/Button';
import { Container, Row, Col } from 'react-grid-system';
import Cloud from './components/Cloud';
import Cloud2 from './components/Cloud2';
import Cloud3 from './components/Cloud3';
import Cloud4 from './components/Cloud4';
import Cloud5 from './components/Cloud5';
import Hill from './components/images/bcollection.png';
import Mountain from './components/Mountain';
import Sun from './components/Sun';
import Bird from './components/Bird.js';
import A1up from './components/A1up';
import A2Down from './components/A2Down';
import A2Left from './components/A2Left';
import ReactRain from 'react-rain-animation';
import { BrowserRouter, Switch, Route, Redirect } from "react-router-dom";
import Home from './components/Home.js';
import Evaporation from './components/Evaporation.js';
import Precepetation from './components/Precepetation.js';
import Condensation from './components/Condensation.js';
import Collection from './components/Collection.js';
import "react-rain-animation/lib/style.css";
import Flippy, { FrontSide, BackSide } from 'react-flippy';
import P1 from './components/images/p1.png';
import P2 from './components/images/p2.png';
import P3 from './components/images/p3.png';
import P4 from './components/images/p4.png';
import Delay from 'react-delay';
class App extends Component {
constructor(){
super();
this.state = {
sun : false ,
cloud : false ,
cloud3 : false,
rain : false,
arrow : false,
arrow2 : false,
bird : false,
}
}
Phase1() {
this.setState({sun: true});
this.setState({cloud : true});
this.setState({cloud3 : false});
this.setState({rain: false});
this.setState({arrow: true});
this.setState({arrow2 : false});
this.setState({bird : false});
}
Phase2() {
this.setState({sun: true});
this.setState({cloud : true});
this.setState({cloud3 : false});
this.setState({rain: false});
this.setState({arrow: false});
this.setState({arroe22: false})
this.setState({bird : false});
}
Phase3() {
this.setState({sun: false});
this.setState({cloud : true});
this.setState({cloud3 : true});
this.setState({rain: true});
this.setState({arrow: false});
this.setState({arrow2: false});
this.setState({bird : false});
}
Phase4() {
this.setState({sun: false});
this.setState({cloud : false});
this.setState({cloud3 : false});
this.setState({rain: false});
this.setState({arrow: false });
this.setState({arrow2: true});
this.setState({bird : true});
}
render() {
return (
<div id="hero" className="Cycle" style={{backgroundImage:'url(' + Hill + ')'}}>
<Row>
<Col sm={10}>
<Container className='Container'>
<Row >
<Col xs={8}></Col>
<Col xs={2}>
{
this.state.rain ? <ReactRain numDrops="1000" />: null
}
</Col>
</Row>
<Row>
<Col xs ={12}>{this.state.bird ?<Bird /> : null}</Col>
</Row>
<Row>
<Col xs={0} sm={0} > { this.state.sun ? <Sun /> : null } </Col>
<Col xs={8} xs={10}>{this.state.cloud ? <Delay wait={3000}> <Cloud /> </Delay> : null} </Col>
</Row>
<Row>
<Col xs={9.8}> {this.state.cloud ? <Cloud />: null} </Col >
</Row>
<Row>
<Col xs={1.5}>
{this.state.arrow ? <A1up /> : null}
</Col >
<Col xs={1.5} >
{this.state.arrow ? <A1up /> : null}
</Col>
<Col xs={1.5}>
{this.state.arrow ? <A1up /> : null}
</Col>
</Row>
<Row>
<Col xs={8}>
</Col>
<Col xs={0}>
{this.state.arrow2 ? <A2Down /> : null }
</Col>
</Row>
<Row>
<Col xs={7}>
{this.state.arrow2 ? <Delay wait={1500}> <A2Left /> </Delay> : null }
</Col>
</Row>
</Container>
</Col>
<Col sm={2}>
<Row>
<Col sm={12} xs={12}>
{
<Button className='B2' onClick={() => this.Phase1()}>
<Flippy
style={{ width: '290px', height: '238px' }}
flipOnHover={false}
flipOnClick={true}
flipDirection="horizontal"
>
<FrontSide style={{backgroundColor: '#B0E0E6',borderWidth: '2px',borderStyle: 'solid',borderColor: 'orange'}}>
<img src={P1} style={{ maxWidth: '100%', maxHeight: '100%' }} />
</FrontSide>
<BackSide style={{ backgroundColor: '#175852'}}> EVAPORATION </BackSide>
</Flippy>
</Button>
}
</Col>
render(){
return(
<BrowserRouter>
<Row>
<Col xs={10}>
<Switch>
<Route path="/home" component={Home} />
<Route path="/evaporation" component={Evaporation} />
<Route path="/condensation" component={Condensation} />
<Route path="/precepetation" component={Precepetation} />
<Route path="/collection" component={Collection} />
<Redirect to="/home" />
</Switch>
</Col>
<Col sm={12} xs={12}>
{
<Button onClick={() => this.Phase2()} className="B2">
<Flippy
style={{ width: '290px', height: '238px' }}
flipOnHover={false}
flipOnClick={true}
flipDirection="horizontal"
>
<FrontSide style={{backgroundColor: '#B0E0E6',borderWidth: '2px',borderStyle: 'solid',borderColor: 'orange'}}>
<img src={P2} style={{maxWidth:'100%' ,maxHeight:'100%'}} />
</FrontSide>
<BackSide style={{ backgroundColor: '#175852'}}> CONDENSATION </BackSide>
</Flippy>
</Button>
}
</Col>
<Col sm={12} xs={12}>
{
<Button onClick={() => this.Phase3()} className="B2">
<Flippy
style={{ width: '290px', height: '238px' }}
flipOnHover={false}
flipOnClick={true}
flipDirection="horizontal"
>
<FrontSide style={{backgroundColor: '#B0E0E6',borderWidth: '2px',borderStyle: 'solid',borderColor: 'orange'}}>
<img src={P3} style={{ maxWidth: '100%', maxHeight: '100%' }} />
</FrontSide>
<BackSide style={{ backgroundColor: '#175852'}}> PRECIPITATION </BackSide>
</Flippy>
</Button>
}
</Col>
<Col sm={12} xs={12}>
{
<Button onClick={() => this.Phase4()} className="B2">
<Flippy
style={{ width: '290px', height: '238px' }}
flipOnHover={false}
flipOnClick={true}
flipDirection="horizontal"
>
<Col xs={2}>
<Button />
</Col>
</Row>
</BrowserRouter>
<FrontSide style={{backgroundColor: '#B0E0E6',borderWidth: '2px',borderStyle: 'solid',borderColor: 'orange'}}>
<img src={P4} style={{ maxWidth: '100%', maxHeight: '100%' }} />
</FrontSide>
<BackSide style={{ backgroundColor: '#175852'}}> COLLECTION </BackSide>
</Flippy>
</Button>
}
</Col>
</Row>
</Col>
</Row>
</div>
);
}
}
......
src/components/Button.js
View file @ b5be08ce
import React, { Component } from 'react';
import mount from './images/hill.png'
import './App.css';
import './button.css';
import {Link} from 'react-router-dom';
import posed from 'react-pose';
import P1 from './ReusableComponents/images/p1.png';
import P2 from './ReusableComponents/images/p2.png';
import P3 from './ReusableComponents/images/p3.png';
import P4 from './ReusableComponents/images/p4.png';
import { Container, Row, Col } from 'react-grid-system';
class Button extends Component {
render() {
const Sidebar = posed.div({
exit: {
x: '-100%'
},
enter: {
x: '0%',
beforeChildren: true,
staggerChildren: 50
}
});
const charPoses = {
exit: { opacity: 0 },
enter: { opacity: 1 }
};
return (
<div >
<button className="B1">
Phase-1
</button>
</div>
<div className="container">
<Sidebar class="sidebar" initialPose="exit" pose="enter">
<Row>
<Link to= 'evaporation'> <button class="Button" > <img src={P1} style={{ maxWidth: '100%', maxHeight: '100%' }}/></button> </Link>
</Row>
<Row>
<Link to= 'condensation'> <button class="Button" > <img src={P2} style={{ maxWidth: '100%', maxHeight: '100%' }}/></button> </Link>
</Row>
<Row>
<Link to= 'precepetation'> <button class="Button" > <img src={P3} style={{ maxWidth: '100%', maxHeight: '100%' }}/></button> </Link>
</Row>
<Row>
<Link to= 'collection'> <button class="Button" > <img src={P4} style={{ maxWidth: '100%', maxHeight: '100%' }}/></button> </Link>
</Row>
</Sidebar>
</div>
);
}
}
......
src/components/Collection.js 0 → 100644
View file @ b5be08ce
import React, { Component } from 'react';
import { Container, Row, Col } from 'react-grid-system';
import Sun from './ReusableComponents/Sun.js';
import A2Left from './ReusableComponents/A2Left.js';
import Bird from './ReusableComponents/Bird.js'
import Hill from './ReusableComponents/images/bcollection.png';
import './App.css';
class Collection extends Component {
render() {
return (
<div id="hero" className="Cycle" style={{backgroundImage:'url(' + Hill + ')'}}>
<Sun />
<Row align="center" style={{ height: '500px' }}>
<Bird />
</Row>
<Row>
<A2Left />
</Row>
</div>
);
}
}
export default Collection;
\ No newline at end of file
src/components/Condensation.js 0 → 100644
View file @ b5be08ce
import React, { Component } from 'react';
import { Container, Row, Col } from 'react-grid-system';
import Sun from './ReusableComponents/Sun.js';
import Cloud from './ReusableComponents/Cloud.js';
import Hill from './ReusableComponents/images/bcollection.png';
import './App.css';
class Evaporation extends Component {
render() {
return (
<div id="hero" className="Cycle" style={{backgroundImage:'url(' + Hill + ')'}}>
<Row>
<Sun />
<Col xs={12}><Cloud /></Col>
<Col xs={12}><Cloud /></Col>
</Row>
</div>
);
}
}
export default Evaporation;
\ No newline at end of file
src/components/Evaporation.js 0 → 100644
View file @ b5be08ce
import React, { Component } from 'react';
import { Container, Row, Col } from 'react-grid-system';
import Sun from './ReusableComponents/Sun.js';
import Cloud2 from './ReusableComponents/Cloud2.js';
import A1up from './ReusableComponents/A1up.js';
import Hill from './ReusableComponents/images/bcollection.png';
import './App.css';
class Evaporation extends Component {
render() {
return (
<div id="hero" className="Cycle" style={{backgroundImage:'url(' + Hill + ')'}}>
<Row>
<Col xs={2}> <Sun /> </Col>
<Col xs={3}> <Cloud2 /> </Col>
<Col xs={2}> <Cloud2 /> </Col>
</Row>
<Row>
<Col xs={3}> <Cloud2 /> </Col>
<Col xs={1}> <Cloud2 /> </Col>
</Row>
<Row>
<A1up />
<A1up />
<A1up />
<A1up />
<A1up />
<A1up />
</Row>
</div>
);
}
}
export default Evaporation;
\ No newline at end of file
src/components/Home.js 0 → 100644
View file @ b5be08ce
import React, { Component } from 'react';
import './App.css';
class Home extends Component {
render() {
return (
<div>
<p>Home</p>
</div>
);
}
}
export default Home;
\ No newline at end of file
src/components/Precepetation.js 0 → 100644
View file @ b5be08ce
import React, { Component } from 'react';
import { Container, Row, Col } from 'react-grid-system';
import Cloud from './ReusableComponents/Cloud.js';
import Cloud2 from './ReusableComponents/Cloud2.js';
import Hill from './ReusableComponents/images/bcollection.png';
import ReactRain from 'react-rain-animation';
import './App.css';
class Precepetation extends Component {
render() {
return (
<div id="hero" className="Cycle" style={{backgroundImage:'url(' + Hill + ')'}}>
<Row>
<Col xs={5}>
</Col>
<Col xs={5}>
<ReactRain numDrops="1000" />
</Col>
<Col xs={12}>
<Col xs={12}><Cloud2 /></Col>
<Col xs={10}><Cloud2 /></Col>
</Col>
<Col xs={12}><Cloud2 /></Col>
</Row>
</div>
);
}
}
export default Precepetation;
\ No newline at end of file
src/components/ReusableComponents/App.css 0 → 100755
View file @ b5be08ce
.arrow{
padding:0px;
font-size:20px;
}
.Analog{
background-color:grey;
text-align:left;
}
.Body{
background-color: #FFBD00;
text-align:left;
}
.Cycle{
width: 100%;
position: relative;
background-size: cover;
min-height: 1000px;
background-color:skyblue;
}
.Container
{
min-width:1920px;
align-items: left;
}
.B2 {
background-color: Transparent;
border: none;
color: #FFFFFF;
text-align: center;
font-size: 28px;
padding: 0px;
width: 290px;
height: 238px;
transition: all 0.5s;
cursor: pointer;
}
.B1 {
border-radius: 4px;
background-color: #FFBD00;
border: none;
color: #FFFFFF;
text-align: left;
font-size: 28px;
padding: 20px;
width: 570px;
transition: all 0.5s;