Basic UI Completed

mohitb35 · Jul 25, 2019 · d9f9e4f · d9f9e4f
1 parent cedb5d6
commit d9f9e4f
Show file tree

Hide file tree

Showing 20 changed files with 296 additions and 50 deletions.
diff --git a/.gitignore b/.gitignore
@@ -4,6 +4,7 @@
 /node_modules
 /.pnp
 .pnp.js
+*copy*.*
 
 # testing
 /coverage

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -5,7 +5,9 @@
   "dependencies": {
     "react": "^16.8.6",
     "react-dom": "^16.8.6",
-    "react-scripts": "3.0.1"
+    "react-scripts": "3.0.1",
+    "react-tilt": "^0.1.4",
+    "tachyons": "^4.11.1"
   },
   "scripts": {
     "start": "react-scripts start",

diff --git a/public/index.html b/public/index.html
@@ -19,7 +19,7 @@
       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>
+    <title>Face Reco Brain</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

diff --git a/src/App.js b/src/App.js
diff --git a/src/App.test.js b/src/App.test.js
diff --git a/src/components/ImageLinkForm/ImageLinkForm.css b/src/components/ImageLinkForm/ImageLinkForm.css
@@ -0,0 +1,6 @@
+.formbox {
+	max-width: 80%;
+	width: 800px; 
+	background-image: url("congruent_pentagon.png");
+	/* This is mostly intended for prototyping; please download the pattern and re-host for production environments. Thank you! */
+}
diff --git a/src/components/ImageLinkForm/ImageLinkForm.js b/src/components/ImageLinkForm/ImageLinkForm.js
@@ -0,0 +1,18 @@
+import React from 'react';
+import './ImageLinkForm.css'
+
+const ImageLinkForm = () => {
+	return(
+		<div >
+			<p className="f3">
+				{'This magic brain will detect faces in your pictures!'}
+			</p>
+			<div className="formbox center shadow-5 pa5">
+				<input type="text" className="f4 pa2 w-70 center" name="" id=""/>
+				<button className="w-30 tc grow f4 link ph3 pv2 dib white bg-green b--white-05">Detect</button>
+			</div>
+		</div>
+	)
+}
+
+export default ImageLinkForm;
diff --git a/src/components/ImageLinkForm/congruent_pentagon.png b/src/components/ImageLinkForm/congruent_pentagon.png
diff --git a/src/components/Logo/Logo.css b/src/components/Logo/Logo.css
@@ -0,0 +1,8 @@
+.Tilt-inner img{
+	height: auto;
+	width: 80%;
+}
+
+.Tilt {
+	background: linear-gradient(90deg, rgba(0,166,141,1) 0%, rgba(10,176,241,1) 100%);
+}
diff --git a/src/components/Logo/Logo.js b/src/components/Logo/Logo.js
@@ -0,0 +1,18 @@
+import React from 'react';
+import './Logo.css';
+import brain from './brain.svg';
+import Tilt from 'react-tilt';
+
+const Logo = () => {
+	return(
+		<div className="ma4 mt0">
+			<Tilt className="Tilt br2 shadow-2 flex items-center justify-center" options={{ max : 50 }} style={{ height: 150, width: 150 }} >
+				<div className="Tilt-inner">
+					<img src={brain} alt="logo" className=""/>
+				</div>
+			</Tilt>
+		</div>
+	)
+}
+
+export default Logo;
diff --git a/src/components/Logo/brain.svg b/src/components/Logo/brain.svg
diff --git a/src/components/Navigation/Navigation.css b/src/components/Navigation/Navigation.css
@@ -0,0 +1,4 @@
+.nav-style {
+	display: flex;
+	justify-content: flex-end;
+}
diff --git a/src/components/Navigation/Navigation.js b/src/components/Navigation/Navigation.js
@@ -0,0 +1,12 @@
+import React from 'react';
+import './Navigation.css'
+
+const Navigation = () => {
+	return(
+		<nav className = "nav-style">
+			<p className="f3 link dim black underline pa3 pointer">Sign Out</p>
+		</nav>
+	)
+}
+
+export default Navigation;
diff --git a/src/components/Rank/Rank.js b/src/components/Rank/Rank.js
@@ -0,0 +1,16 @@
+import React from 'react';
+
+const Rank = () => {
+	return(
+		<div className="white">
+			<div className="f3">
+				{'Mohit, your current rank is ....'}
+			</div>
+			<div className="f2 pa2">
+				{'#5'}
+			</div>
+		</div>
+	)
+}
+
+export default Rank;
diff --git a/src/App.css → src/containers/App.css b/src/App.css → src/containers/App.css
diff --git a/src/containers/App.js b/src/containers/App.js
@@ -0,0 +1,26 @@
+import React, { Component } from 'react';
+import Navigation from '../components/Navigation/Navigation';
+import Logo from '../components/Logo/Logo';
+import ImageLinkForm from '../components/ImageLinkForm/ImageLinkForm';
+import Rank from '../components/Rank/Rank';
+import './App.css';
+
+class App extends Component {
+	constructor() {
+		super();
+	}
+
+	render(){
+		return (
+			<div className="App">
+				<Navigation />
+				<Logo />
+				<Rank />
+				<ImageLinkForm />
+				{/* <FaceRecognition /> */}
+			</div>
+		  );
+	}
+}
+
+export default App;
diff --git a/src/index.css b/src/index.css
@@ -1,13 +1,16 @@
 body {
   margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
-    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
-    sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
+  padding: 0;
+  background: rgb(0,166,141);
+  background: linear-gradient(90deg, rgba(0,166,141,1) 0%, rgba(10,176,241,1) 100%);
+  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
 }
 
 code {
   font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
     monospace;
 }
+
+button {
+	cursor: pointer;
+}