Commit 38ae12ca authored by NERUSU PRANEETH's avatar NERUSU PRANEETH

added analog icons ,added flip animation to analog ,complete transparency in background

parent 5274d9b0
Pipeline #19905 passed with stage
in 2 minutes and 35 seconds
......@@ -12469,6 +12469,11 @@
"resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-5.1.3.tgz",
"integrity": "sha512-GoqeM3Xadie7XUApXOjkY3Qhs8RkwB/Za4WMedBGrOKH1eTuKGyoAECff7jiVonJchOx6KZ9i8ILO5XIoHB+Tg=="
},
"react-flippy": {
"version": "0.1.2",
"resolved": "https://registry.npmjs.org/react-flippy/-/react-flippy-0.1.2.tgz",
"integrity": "sha512-ldShzh+XC3ts15DOwuYl9QJQ03bn6k6QcDwUHQcuui8l47vH5B7gxpBYLg3ybtj+0li/4Zc4UUr8VwdDX7G/bQ=="
},
"react-grid-system": {
"version": "4.4.2",
"resolved": "https://registry.npmjs.org/react-grid-system/-/react-grid-system-4.4.2.tgz",
......@@ -12550,6 +12555,14 @@
"workbox-webpack-plugin": "3.6.3"
}
},
"react-smooth-image": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/react-smooth-image/-/react-smooth-image-1.1.0.tgz",
"integrity": "sha512-eAbsUr554PbQq3Z/DG2t4tnlPf7cEEiSR2o1L3fuKloLey0uZRk8/Ta41xX3b07yW0T1PDW/+FWO6Ns/v1TJvQ==",
"requires": {
"prop-types": "^15.6.2"
}
},
"react-spring": {
"version": "8.0.9",
"resolved": "https://registry.npmjs.org/react-spring/-/react-spring-8.0.9.tgz",
......
......@@ -8,46 +8,56 @@ 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/Background.png';
import Hill from './components/images/bcollection.png';
import Mountain from './components/Mountain';
import Sun from './components/Sun';
import Bird from './components/images/Bird.gif';
import A1up from './components/A1up';
import ReactRain from 'react-rain-animation';
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';
class App extends Component {
constructor(){
super();
this.state = {
sun : true ,
sun : false ,
cloud : false ,
rain : false,
arrow : false,
}
}
Phase1() {
this.setState({sun: true});
this.setState({cloud : false});
this.setState({rain: false});
this.setState({arrow: true});
}
Phase2() {
this.setState({sun: true});
this.setState({cloud : true});
this.setState({rain: false});
this.setState({arrow: false});
}
Phase3() {
this.setState({sun: false});
this.setState({cloud : true});
this.setState({rain: true});
this.setState({arrow: false});
}
Phase4() {
this.setState({sun: false});
this.setState({cloud : true});
this.setState({rain: true});
this.setState({rain: false});
this.setState({arrow: false });
}
render() {
......@@ -105,10 +115,70 @@ Phase4() {
<Row>
<Col xs={8}> </Col>
<Col xs={2}>
{this.state.arrow ? <A1up /> : null}
</Col >
<Col>
<Col xs={2}>
{this.state.arrow ? <A1up /> : null}
</Col>
<Col xs={2}>
{this.state.arrow ? <A1up /> : null}
</Col>
<Col xs={2}>
{this.state.arrow ? <A1up /> : null}
</Col>
<Col xs={2}>
{this.state.arrow ? <A1up /> : null}
</Col>
</Row>
<Row>
<Col xs={2}>
{this.state.arrow ? <A1up /> : null}
</Col >
<Col xs={2}>
{this.state.arrow ? <A1up /> : null}
</Col>
<Col xs={2}>
{this.state.arrow ? <A1up /> : null}
</Col>
<Col xs={2}>
{this.state.arrow ? <A1up /> : null}
</Col>
<Col xs={2}>
{this.state.arrow ? <A1up /> : null}
</Col>
</Row>
<Row>
<Col xs={2}>
{this.state.arrow ? <A1up /> : null}
</Col >
<Col xs={2}>
{this.state.arrow ? <A1up /> : null}
</Col>
<Col xs={2}>
{this.state.arrow ? <A1up /> : null}
</Col>
<Col xs={2}>
{this.state.arrow ? <A1up /> : null}
</Col>
<Col xs={2}>
{this.state.arrow ? <A1up /> : null}
</Col>
</Row>
......@@ -120,23 +190,100 @@ Phase4() {
<Col sm={12} xs={12}>
{
<Button onClick={() => this.Phase1()} className="B2"> Evaporation </Button>
<Button className='B2' onClick={() => this.Phase1()}>
<Flippy
style={{ width: '290px', height: '238px' }}
flipOnHover={false} // default false
flipOnClick={true} // default false
flipDirection="horizontal" // horizontal or vertical
ref={(r) => this.flippy = r} // to use toggle method like this.flippy.toggle()
// if you pass isFlipped prop component will be controlled component.
// and other props, which will go to div
/// these are optional style, it is not necessary
>
<FrontSide style={{backgroundColor: '#B0E0E6',borderWidth: '2px',borderStyle: 'solid',borderColor: 'orange'}}>
<img src={P1} style={{ maxWidth: '100%', maxHeight: '100%' }} />
</FrontSide>
<BackSide style={{ backgroundColor: '#175852'}}> DATA </BackSide>
</Flippy>
</Button>
}
</Col>
<Col sm={12} xs={12}>
{
<Button onClick={() => this.Phase2()} className="B2"> Condensation </Button>
<Button onClick={() => this.Phase2()} className="B2">
<Flippy
style={{ width: '290px', height: '238px' }}
flipOnHover={false} // default false
flipOnClick={true} // default false
flipDirection="horizontal" // horizontal or vertical
ref={(r) => this.flippy = r} // to use toggle method like this.flippy.toggle()
// if you pass isFlipped prop component will be controlled component.
// and other props, which will go to div
/// these are optional style, it is not necessary
>
<FrontSide style={{backgroundColor: '#B0E0E6',borderWidth: '2px',borderStyle: 'solid',borderColor: 'orange'}}>
<img src={P2} style={{maxWidth:'100%' ,maxHeight:'100%'}} />
</FrontSide>
<BackSide style={{ backgroundColor: '#175852'}}> DATA </BackSide>
</Flippy>
</Button>
}
</Col>
<Col sm={12} xs={12}>
{
<Button onClick={() => this.Phase3()} className="B2"> Precipitation </Button>
<Button onClick={() => this.Phase3()} className="B2">
<Flippy
style={{ width: '290px', height: '238px' }}
flipOnHover={false} // default false
flipOnClick={true} // default false
flipDirection="horizontal" // horizontal or vertical
ref={(r) => this.flippy = r} // to use toggle method like this.flippy.toggle()
// if you pass isFlipped prop component will be controlled component.
// and other props, which will go to div
/// these are optional style, it is not necessary
>
<FrontSide style={{backgroundColor: '#B0E0E6',borderWidth: '2px',borderStyle: 'solid',borderColor: 'orange'}}>
<img src={P3} style={{ maxWidth: '100%', maxHeight: '100%' }} />
</FrontSide>
<BackSide style={{ backgroundColor: '#175852'}}> DATA </BackSide>
</Flippy>
</Button>
}
</Col>
<Col sm={12} xs={12}>
{
<Button onClick={() => this.Phase4()} className="B2"> Collection </Button>
<Button onClick={() => this.Phase4()} className="B2">
<Flippy
style={{ width: '290px', height: '238px' }}
flipOnHover={false} // default false
flipOnClick={true} // default false
flipDirection="horizontal" // horizontal or vertical
ref={(r) => this.flippy = r} // to use toggle method like this.flippy.toggle()
// if you pass isFlipped prop component will be controlled component.
// and other props, which will go to div
/// these are optional style, it is not necessary
>
<FrontSide style={{backgroundColor: '#B0E0E6',borderWidth: '2px',borderStyle: 'solid',borderColor: 'orange'}}>
<img src={P4} style={{ maxWidth: '100%', maxHeight: '100%' }} />
</FrontSide>
<BackSide style={{ backgroundColor: '#175852'}}> DATA </BackSide>
</Flippy>
</Button>
}
</Col>
......
import React, { Component } from 'react';
import SmoothImage from 'react-smooth-image';
//import logo from './logo.svg';
import a1up from './images/a1up.png';
......@@ -7,7 +8,7 @@ class A1up extends Component {
return (
<div >
<header >
<img src={a1up} className="A1up" />
<img src={a1up} className="A1up" />
</header>
</div>
);
......
......@@ -26,17 +26,18 @@
}
.B2 {
border-radius: 4px;
background-color: #f4511e;
background-color: Transparent;
border: none;
color: #FFFFFF;
text-align: left;
text-align: center;
font-size: 28px;
padding: 100px;
width: 570px;
padding: 0px;
width: 290px;
height: 238px;
transition: all 0.5s;
cursor: pointer;
margin: 5px 5px;
}
.B1 {
......@@ -75,6 +76,9 @@ float:right;
.A1up:hover{
float: right;
align-items:left;
-webkit-animation-name: mymove; /* Safari 4.0 - 8.0 */
-webkit-animation-duration: 5s;
}
.Sun {
......
src/components/images/hill.png

391 KB | W: | H:

src/components/images/hill.png

915 KB | W: | H:

src/components/images/hill.png
src/components/images/hill.png
src/components/images/hill.png
src/components/images/hill.png
  • 2-up
  • Swipe
  • Onion skin
src/components/images/sky2.jpg

247 KB | W: | H:

src/components/images/sky2.jpg

229 KB | W: | H:

src/components/images/sky2.jpg
src/components/images/sky2.jpg
src/components/images/sky2.jpg
src/components/images/sky2.jpg
  • 2-up
  • Swipe
  • Onion skin
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment