Skip to content
GitLab
Commit 1cae504c authored by NERUSU PRANEETH's avatar NERUSU PRANEETH
Browse files

changed the entire UI 

added new background and new components {clouds,background}
added analog sample view
parent 9e7c6f75
Hide whitespace changes
Inline Side-by-side
package-lock.json
View file @ 1cae504c
......@@ -929,6 +929,15 @@
"resolved": "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-1.1.3.tgz",
"integrity": "sha512-shAmDyaQC4H92APFoIaVDHCx5bStIocgvbwQyxPRrbUY20V1EYTbSDchWbuwlMG3V17cprZhA6+78JfB+3DTPw=="
},
"@semantic-ui-react/event-stack": {
"version": "3.1.0",
"resolved": "https://registry.npmjs.org/@semantic-ui-react/event-stack/-/event-stack-3.1.0.tgz",
"integrity": "sha512-WHtU9wutZByZtFZxzj4BVEk+rvWldZpZhRcyv6d84+XLSolm83zLHYJLTACGuSl6Xa/xpgVXquvm9GyMudkJYg==",
"requires": {
"exenv": "^1.2.2",
"prop-types": "^15.6.2"
}
},
"@svgr/babel-plugin-add-jsx-attribute": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/@svgr/babel-plugin-add-jsx-attribute/-/babel-plugin-add-jsx-attribute-4.0.0.tgz",
......@@ -3322,6 +3331,11 @@
}
}
},
"classnames": {
"version": "2.2.6",
"resolved": "https://registry.npmjs.org/classnames/-/classnames-2.2.6.tgz",
"integrity": "sha512-JR/iSQOSt+LQIWwrwEzJ9uk0xfN3mTVYMwt1Ir5mUcSN6pU+V4zQFFaJsclJbPuAUQH+yfWef6tm7l1quW3C8Q=="
},
"clean-css": {
"version": "4.2.1",
"resolved": "https://registry.npmjs.org/clean-css/-/clean-css-4.2.1.tgz",
......@@ -5040,6 +5054,11 @@
}
}
},
"exenv": {
"version": "1.2.2",
"resolved": "https://registry.npmjs.org/exenv/-/exenv-1.2.2.tgz",
"integrity": "sha1-KueOhdmJQVhnCwPUe+wfA72Ru50="
},
"exit": {
"version": "0.1.2",
"resolved": "https://registry.npmjs.org/exit/-/exit-0.1.2.tgz",
......@@ -8548,6 +8567,11 @@
"array-includes": "^3.0.3"
}
},
"keyboard-key": {
"version": "1.0.4",
"resolved": "https://registry.npmjs.org/keyboard-key/-/keyboard-key-1.0.4.tgz",
"integrity": "sha512-my04dE6BCwPpwoe4KYKfPxWiwgDYQOHrVmtzn1CfzmoEsGG/ef4oZGaXCzi1+iFhG7CN5JkOuxmei5OABY8/ag=="
},
"killable": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/killable/-/killable-1.0.1.tgz",
......@@ -13572,6 +13596,21 @@
"node-forge": "0.7.5"
}
},
"semantic-ui-react": {
"version": "0.85.0",
"resolved": "https://registry.npmjs.org/semantic-ui-react/-/semantic-ui-react-0.85.0.tgz",
"integrity": "sha512-rroRoux+MMmLaZCZfFX9xZfTo1cy+JiM55fVaaqbfPq0s0RupraBhamJhvTDz7idl3ionaXPW7knJyZAz4XMGg==",
"requires": {
"@babel/runtime": "^7.1.2",
"@semantic-ui-react/event-stack": "^3.0.1",
"classnames": "^2.2.6",
"keyboard-key": "^1.0.4",
"lodash": "^4.17.11",
"prop-types": "^15.6.2",
"react-is": "^16.7.0",
"shallowequal": "^1.1.0"
}
},
"semver": {
"version": "5.6.0",
"resolved": "https://registry.npmjs.org/semver/-/semver-5.6.0.tgz",
......@@ -13710,6 +13749,11 @@
}
}
},
"shallowequal": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/shallowequal/-/shallowequal-1.1.0.tgz",
"integrity": "sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ=="
},
"shebang-command": {
"version": "1.2.0",
"resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-1.2.0.tgz",
......
package.json
View file @ 1cae504c
......@@ -9,7 +9,8 @@
"react-marquee": "^1.0.0",
"react-rain-animation": "^1.0.4",
"react-scripts": "2.1.5",
"react-spring": "^8.0.9"
"react-spring": "^8.0.9",
"semantic-ui-react": "^0.85.0"
},
"scripts": {
"start": "react-scripts start",
......
src/App.js
View file @ 1cae504c
import React, { Component } from 'react';
import './components/App.css';
import {Button} from 'semantic-ui-react';
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/w.png';
import Mountain from './components/Mountain';
import Sun from './components/Sun';
import Rain from './components/Rain';
import Button from './components/Button';
import Bird from './components/images/Bird.gif';
class App extends Component {
render() {
return (
<div className='Cycle'>
<div id="hero" className="Cycle" style={{backgroundImage:'url(' + Hill + ')'}}>
<Container className='Container'>
<Row justify='start'>
<Container className='Container' >
<Row>
<Col sm={4} xs={12} md={4} >
<Button/>
<Button/><br/><br/><br/>
<Cloud />
<Mountain />
</Col>
<Col xs={4} >
<h1 className='Body'>aaaaaaaaaaaaaa</h1>
</Col>
<Col xs={4}>
<h1 className='Body'>aaaaaaaaaaaaaa</h1>
</Col>
<Col xs={4} >
<h1 className='Body'>aaaaaaaaaaaaaa</h1>
</Col>
</Row>
<Row>
<Col xs={0.4}>
<Sun />
</Col>
<Col xs={2}>
<Cloud5 />
<Cloud2 />
</Col>
<Col xs={1.}>
<Cloud2 />
<Cloud />
</Col>
<Col xs={4} >
<Cloud/>
<Cloud5 />
</Col>
</Row>
<Row>
<Col xs={8}> </Col>
<Col>
<Button className="B1"></Button>
</Col>
</Row>
<Row>
<Col xs={8}> </Col>
<Col>
<Button className="B2">PHASE 1</Button>
</Col>
</Row>
<Row>
<Col xs={8}> </Col>
<Col>
<Button className="B2">PHASE 2</Button>
</Col>
</Row>
<Row>
<Col xs={8}> </Col>
<Col>
<Button className="B2">PHASE 3</Button>
</Col>
</Row>
<Row>
<Col xs={8}> </Col>
<Col>
<Button className="B2">PHASE 4</Button>
</Col>
</Row>
<Row>
<Col xs={8}>
</Col>
<Col>
<Button className="B2">PHASE-5</Button>
</Col>
</Row>
<Row>
<Col xs={8}> </Col>
<Col>
<Button className="B1"></Button>
</Col>
</Row>
<Col sm={4} xs={12} md={4}>
<Cloud />
<Cloud/><br/><br/>
</Col>
<Col sm={4} xs={12} md={4}>
<Sun />
<Cloud/>
</Col>
</Container>
</Row>
</Container>
</div>
</div>
);
}
}
......
src/components/App.css
View file @ 1cae504c
.Analog{
background-color:grey;
text-align:left;
}
.Body{
background-color: #FFBD00;
text-align:left;
}
.Cycle{
background-color: #282c34;
width: 100%;
position: relative;
background-size: cover;
min-height: 1000px;
background-color:skyblue;
}
.Container
{
background-color: white;
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: calc(10px + 2vmin);
color: #282c34;
min-width:1920px;
align-items: left;
}
.B2 {
border-radius: 4px;
background-color: #f4511e;
border: none;
color: #FFFFFF;
text-align: left;
font-size: 28px;
padding: 20px;
width: 570px;
transition: all 0.5s;
cursor: pointer;
margin: 5px 2px;
}
.B1 {
background-color: #4CAF50;
border-radius: 4px;
background-color: #FFBD00;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
color: #FFFFFF;
text-align: left;
font-size: 28px;
padding: 20px;
width: 570px;
transition: all 0.5s;
cursor: pointer;
margin: 5px 2px;
}
.Cloud:hover{
......@@ -36,9 +61,12 @@ float:right;
}
.Mountain {
width: 1000px;
height:600px;
bottom:0;
width: 151px;
height: 41px;
margin-right: 10px;
-webkit-transition: margin .125s ease;
transition: margin .125s ease;
}
.App {
......@@ -49,6 +77,7 @@ float:right;
animation: App-logo-spin infinite 20s linear;
height: 20vmin;
pointer-events: none;
}
......@@ -64,3 +93,40 @@ float:right;
transform: rotate(360deg);
}
}
body {
background:#0D343A;
background:-webkit-gradient(linear,0% 0%,0% 100%, from(rgba(13,52,58,1) ), to(#000000) );
background: -moz-linear-gradient(top, rgba(13,52,58,1) 0%, rgba(0,0,0,1) 100%);
overflow:hidden;}
.drop {
background:-webkit-gradient(linear,0% 0%,0% 100%, from(rgba(13,52,58,1) ), to(rgba(255,255,255,0.6)) );
background: -moz-linear-gradient(top, rgba(13,52,58,1) 0%, rgba(255,255,255,.6) 100%);
width:1px;
height:89px;
position: absolute;
bottom:200px;
-webkit-animation: fall .63s linear infinite;
-moz-animation: fall .63s linear infinite;
}
/* animate the drops*/
@-webkit-keyframes fall {
to {margin-top:900px;}
}
@-moz-keyframes fall {
to {margin-top:900px;}
}
src/components/Cloud.js
View file @ 1cae504c
import React, { Component } from 'react';
import cloud from './images/cloud.gif';
import cloud from './images/c1.png';
import './App.css';
class Cloud extends Component {
render() {
return (
......
src/components/Cloud2.js 0 → 100644
View file @ 1cae504c
import React, { Component } from 'react';
import cloud2 from './images/c2.png';
import './App.css';
class Cloud2 extends Component {
render() {
return (
<div>
<img className="Cloud" src={cloud2}/>
</div>
);
}
}
export default Cloud2;
\ No newline at end of file
src/components/Cloud3.js 0 → 100644
View file @ 1cae504c
import React, { Component } from 'react';
import cloud3 from './images/c3.png';
import './App.css';
class Cloud3 extends Component {
render() {
return (
<div>
<img className="Cloud" src={cloud3}/>
</div>
);
}
}
export default Cloud3;
\ No newline at end of file
src/components/Cloud4.js 0 → 100644
View file @ 1cae504c
import React, { Component } from 'react';
import cloud4 from './images/c4.png';
import './App.css';
class Cloud4 extends Component {
render() {
return (
<div>
<img className="Cloud" src={cloud4}/>
</div>
);
}
}
export default Cloud4;
\ No newline at end of file
src/components/Cloud5.js 0 → 100644
View file @ 1cae504c
import React, { Component } from 'react';
import cloud5 from './images/c6.png';
import './App.css';
class Cloud5 extends Component {
render() {
return (
<div>
<img className="Cloud" src={cloud5}/>
</div>
);
}
}
export default Cloud5;
\ No newline at end of file
src/components/Mountain.js
View file @ 1cae504c
import React, { Component } from 'react';
import mount from './images/hill.png'
import mount from './images/narcos.logo.png'
import './App.css';
class Mountain extends Component {
render() {
......
src/components/Sun.js
View file @ 1cae504c
import React, { Component } from 'react';
//import logo from './logo.svg';
import sun from './images/Sun.png';
import sun from './images/s.png';
class Sun extends Component {
render() {
......@@ -8,10 +8,6 @@ class Sun extends Component {
<div >
<header >
<img src={sun} className="Sun" />
</header>
</div>
);
......
Supports Markdown
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