Commit 7291e176 authored by Sripath Roy Koganti's avatar Sripath Roy Koganti
Browse files

Merge branch 'master' into 'master'

Master

See merge request !1
parents ea2358f6 5274d9b0
Pipeline #19900 passed with stage
in 2 minutes and 25 seconds
/* THIS IS A BIT-AUTO-GENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY. */
{
"version": "14.0.1"
}
\ No newline at end of file
node_modules
\ No newline at end of file
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
# dependencies
/node_modules
/.pnp
.pnp.js
# testing
/coverage
# production
/build
# misc
.DS_Store
.env.local
.env.development.local
.env.test.local
.env.production.local
npm-debug.log*
yarn-debug.log*
yarn-error.log*
# Using the node alpine image to build the React app
image: node:latest
# Announce the URL as per CRA docs
# https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/template/README.md#advanced-configuration
variables:
PUBLIC_URL: /water-cycle
# Cache node modules - speeds up future builds
cache:
paths:
- node_modules
# Name the stages involved in the pipeline
stages:
- deploy
# Job name for gitlab to recognise this results in assets for Gitlab Pages
# https://docs.gitlab.com/ee/user/project/pages/introduction.html#gitlab-pages-requirements
pages:
stage: deploy
script:
- npm install # Install all dependencies
- CI=false npm run build --prod # Build for prod
- cp public/index.html public/404.html # Not necessary, but helps with https://medium.com/@pshrmn/demystifying-single-page-applications-3068d0555d46
- mv public _public # CRA and gitlab pages both use the public folder. Only do this in a build pipeline.
- mv build public # Move build files to public dir for Gitlab Pages
artifacts:
paths:
- public # The built files for Gitlab Pages to serve
only:
- master # Only run on master branch
\ No newline at end of file
# base image
FROM node:8.15.0
# set working directory
RUN mkdir /usr/src/app
WORKDIR /usr/src/app
# add `/usr/src/app/node_modules/.bin` to $PATH
ENV PATH /usr/src/app/node_modules/.bin:$PATH
# install and cache app dependencies
COPY package.json /usr/src/app/package.json
RUN npm install --silent
RUN npm install [email protected] -g --silent
# start app
CMD ["npm", "start"]
\ No newline at end of file
{
"env": {},
"dependencies": {},
"componentsDefaultDirectory": "components/{name}",
"packageManager": "npm"
}
version: '3.5'
services:
sample-app:
container_name: sample-app
build:
context: .
dockerfile: Dockerfile
volumes:
- '.:/usr/src/app'
- '/usr/src/app/node_modules'
ports:
- '3000:3000'
environment:
- NODE_ENV=development
\ No newline at end of file
This diff is collapsed.
{
"name": "e-litmus",
"version": "0.1.0",
"private": true,
"dependencies": {
"react": "^16.8.2",
"react-dom": "^16.8.2",
"react-grid-system": "^4.4.2",
"react-marquee": "^1.0.0",
"react-rain-animation": "^1.0.4",
"react-scripts": "2.1.5",
"react-spring": "^8.0.9",
"semantic-ui-react": "^0.85.0"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": [
">0.2%",
"not dead",
"not ie <= 11",
"not op_mini all"
]
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>
<meta name="theme-color" content="#000000" />
<!--
manifest.json provides metadata used when your web app is installed on a
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<!--
Notice the use of %PUBLIC_URL% in the tags above.
It will be replaced with the URL of the `public` folder during the build.
Only files inside the `public` folder can be referenced from the HTML.
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>React App</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag.
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
</body>
</html>
{
"short_name": "React App",
"name": "Create React App Sample",
"icons": [
{
"src": "favicon.ico",
"sizes": "64x64 32x32 24x24 16x16",
"type": "image/x-icon"
}
],
"start_url": ".",
"display": "standalone",
"theme_color": "#000000",
"background_color": "#ffffff"
}
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/Background.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";
class App extends Component {
constructor(){
super();
this.state = {
sun : true ,
cloud : false ,
rain : false,
}
}
Phase1() {
this.setState({sun: true});
this.setState({cloud : false});
this.setState({rain: false});
}
Phase2() {
this.setState({sun: true});
this.setState({cloud : true});
this.setState({rain: false});
}
Phase3() {
this.setState({sun: false});
this.setState({cloud : true});
this.setState({rain: true});
}
Phase4() {
this.setState({sun: false});
this.setState({cloud : true});
this.setState({rain: true});
}
render() {
return (
<div id="hero" className="Cycle" style={{backgroundImage:'url(' + Hill + ')'}}>
<Row>
<Col sm={10}>
<Container className='Container'>
<Row justify='start'>
{
this.state.rain ? <ReactRain numDrops="1000"></ReactRain> : null
}
</Row>
<Row>
<Col xs={0.4} sm={0.4}>
{
this.state.sun ? <Sun /> : null
}
</Col>
<Col xs={2} sm={2}>
{
this.state.cloud ? <Cloud5 /> : null
}
{
this.state.cloud ? <Cloud2 /> : null
}
</Col>
<Col xs={1} sm={1}>
{
this.state.cloud ? <Cloud2 /> : null
}
{
this.state.cloud ? <Cloud /> : null
}
</Col>
<Col xs={4} sm={4}>
{
this.state.cloud ? <Cloud /> : null
}
</Col>
</Row>
<Row>
<Col xs={8}> </Col>
<Col>
</Col>
</Row>
</Container>
</Col>
<Col sm={2}>
<Row>
<Col sm={12} xs={12}>
{
<Button onClick={() => this.Phase1()} className="B2"> Evaporation </Button>
}
</Col>
<Col sm={12} xs={12}>
{
<Button onClick={() => this.Phase2()} className="B2"> Condensation </Button>
}
</Col>
<Col sm={12} xs={12}>
{
<Button onClick={() => this.Phase3()} className="B2"> Precipitation </Button>
}
</Col>
<Col sm={12} xs={12}>
{
<Button onClick={() => this.Phase4()} className="B2"> Collection </Button>
}
</Col>
</Row>
</Col>
</Row>
</div>
);
}
}
export default App;
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
it('renders without crashing', () => {
const div = document.createElement('div');
ReactDOM.render(<App />, div);
ReactDOM.unmountComponentAtNode(div);
});
import React, { Component } from 'react';
//import logo from './logo.svg';
import a1up from './images/a1up.png';
class A1up extends Component {
render() {
return (
<div >
<header >
<img src={a1up} className="A1up" />
</header>
</div>
);
}
}
export default A1up;
\ No newline at end of file
.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 {
border-radius: 4px;
background-color: #f4511e;
border: none;
color: #FFFFFF;
text-align: left;
font-size: 28px;
padding: 100px;
width: 570px;
transition: all 0.5s;
cursor: pointer;
margin: 5px 5px;
}
.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;
cursor: pointer;
margin: 5px 2px;
}
.Cloud:hover{
float:right;
}
.hill{
align-items: center;
}
.Mountain {
width: 151px;
height: 41px;
margin-right: 10px;
-webkit-transition: margin .125s ease;
transition: margin .125s ease;
}
.App {
text-align: center;
}
.A1up:hover{
float: right;
}
.Sun {
animation: App-logo-spin infinite 20s linear;
height: 20vmin;
pointer-events: none;
}
.App-link {
color: #61dafb;
}
@keyframes App-logo-spin {
from {
transform: rotate(0deg);
}
to {
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;}
}
import React, { Component } from 'react';
import mount from './images/hill.png'
import './App.css';
class Button extends Component {
render() {
return (
<div >
<button className="B1">
Phase-1
</button>
</div>
);
}
}
export default Button;
\ No newline at end of file
import React, { Component } from 'react';
import cloud from './images/c1.png';
import './App.css';
class Cloud extends Component {
render() {
return (
<div>
<img className="Cloud" src={cloud}/>
</div>
);
}
}
export default Cloud;
\ No newline at end of file
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
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
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