Commit b5be08ce authored by kamasani.Harshitha's avatar kamasani.Harshitha

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
This diff is collapsed.
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>
);
}
}
......
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>
);
}
}
......
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
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
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
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
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
.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;