From 3fd257b4fce2da8ffe56b1100e0f73448d89453b Mon Sep 17 00:00:00 2001 From: Blaster4385 Date: Fri, 22 Jul 2022 08:48:41 +0530 Subject: Add photograph and document scanner pages --- .eslintrc.js | 3 +- public/assets/images/capture.svg | 9 +++++ public/assets/images/document.svg | 9 +++++ src/components/Card/CardScanner.jsx | 16 ++++++++ src/components/Card/CardScanner.module.css | 26 +++++++++++++ src/pages/DocumentScanner/DocumentScanner.jsx | 43 ++++++++++++++++++++++ .../DocumentScanner/DocumentScanner.module.css | 5 +++ src/pages/PhotoCapture/PhotoCapture.jsx | 39 ++++++++++++++++++++ src/pages/PhotoCapture/PhotoCapture.module.css | 5 +++ src/routes/index.js | 8 ++++ 10 files changed, 162 insertions(+), 1 deletion(-) create mode 100644 public/assets/images/capture.svg create mode 100644 public/assets/images/document.svg create mode 100644 src/components/Card/CardScanner.jsx create mode 100644 src/components/Card/CardScanner.module.css create mode 100644 src/pages/DocumentScanner/DocumentScanner.jsx create mode 100644 src/pages/DocumentScanner/DocumentScanner.module.css create mode 100644 src/pages/PhotoCapture/PhotoCapture.jsx create mode 100644 src/pages/PhotoCapture/PhotoCapture.module.css diff --git a/.eslintrc.js b/.eslintrc.js index 5abad38..d85199d 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -13,6 +13,7 @@ module.exports = { }, plugins: ['react'], rules: { - 'react/prop-types': 'off' + 'react/prop-types': 'off', + 'indent': 'off' } } diff --git a/public/assets/images/capture.svg b/public/assets/images/capture.svg new file mode 100644 index 0000000..c272091 --- /dev/null +++ b/public/assets/images/capture.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/public/assets/images/document.svg b/public/assets/images/document.svg new file mode 100644 index 0000000..2393ad7 --- /dev/null +++ b/public/assets/images/document.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/components/Card/CardScanner.jsx b/src/components/Card/CardScanner.jsx new file mode 100644 index 0000000..29caf39 --- /dev/null +++ b/src/components/Card/CardScanner.jsx @@ -0,0 +1,16 @@ +import React from 'react' +import styles from './CardScanner.module.css' +import SubmitButton from '../SubmitButton/SubmitButton' + +const CardScanner = ({ title, image }) => { + return ( + <> +
+ +
+ + + ) +} + +export default CardScanner diff --git a/src/components/Card/CardScanner.module.css b/src/components/Card/CardScanner.module.css new file mode 100644 index 0000000..af237e2 --- /dev/null +++ b/src/components/Card/CardScanner.module.css @@ -0,0 +1,26 @@ +@import '../../styles/GlobalVariables.css'; + +.card { + height: 300px; + width: 600px; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + border: 3px solid var(--color-black); + border-radius: 10px; + margin: 30px; + transition: 0.2s all; + cursor: pointer; + color: var(--color-black); + text-decoration-line: none; +} + +.card:active { + transform: scale(0.98); + box-shadow: 3px 2px 22px 1px var(--color-shadow); +} + +.card__title { + margin: 15px 0px; +} \ No newline at end of file diff --git a/src/pages/DocumentScanner/DocumentScanner.jsx b/src/pages/DocumentScanner/DocumentScanner.jsx new file mode 100644 index 0000000..2b757f4 --- /dev/null +++ b/src/pages/DocumentScanner/DocumentScanner.jsx @@ -0,0 +1,43 @@ +import React from 'react' +import Header from '../../components/Header/Header' +import CardScanner from '../../components/Card/CardScanner' +import styles from './DocumentScanner.module.css' +import { Button, Grid, Typography } from '@mui/material' +import SubmitButton from '../../components/SubmitButton/SubmitButton' + +const DocumentScanner = () => { + return ( + <>
+
+ +
+ + + + + + + + +

+
+ + + Please place your document on the scanner.
+ Close the lid.
+ Wait for prompt to remove your document + + +
+ + + + ) +} + +export default DocumentScanner diff --git a/src/pages/DocumentScanner/DocumentScanner.module.css b/src/pages/DocumentScanner/DocumentScanner.module.css new file mode 100644 index 0000000..ec59f61 --- /dev/null +++ b/src/pages/DocumentScanner/DocumentScanner.module.css @@ -0,0 +1,5 @@ +.card__container { + display: flex; + justify-content: center; + } + \ No newline at end of file diff --git a/src/pages/PhotoCapture/PhotoCapture.jsx b/src/pages/PhotoCapture/PhotoCapture.jsx new file mode 100644 index 0000000..c16b4d0 --- /dev/null +++ b/src/pages/PhotoCapture/PhotoCapture.jsx @@ -0,0 +1,39 @@ +import React from 'react' +import Header from '../../components/Header/Header' +import CardScanner from '../../components/Card/CardScanner' +import styles from './PhotoCapture.module.css' +import { Button, Grid, Typography } from '@mui/material' + +const PhotoCapture = () => { + return ( + <>
+
+ +
+ + + + + + + + +

+
+ + Please look into the camera

+ Click Capture to Capture the photo

+ Click Reset the remove the captured photo + +
+ + + ) +} + +export default PhotoCapture diff --git a/src/pages/PhotoCapture/PhotoCapture.module.css b/src/pages/PhotoCapture/PhotoCapture.module.css new file mode 100644 index 0000000..ec59f61 --- /dev/null +++ b/src/pages/PhotoCapture/PhotoCapture.module.css @@ -0,0 +1,5 @@ +.card__container { + display: flex; + justify-content: center; + } + \ No newline at end of file diff --git a/src/routes/index.js b/src/routes/index.js index d6688c8..2a2669b 100644 --- a/src/routes/index.js +++ b/src/routes/index.js @@ -4,6 +4,8 @@ import { Route, Routes } from 'react-router-dom' import Home from '../pages/Home/Home' import Enrollment from '../pages/Enrollment/Enrollment' import Update from '../pages/Update/Update' +import PhotoCapture from '../pages/PhotoCapture/PhotoCapture' +import DocumentScanner from '../pages/DocumentScanner/DocumentScanner' const Index = () => { return ( @@ -15,6 +17,12 @@ const Index = () => { } /> + + } /> + + + } /> + ) } -- cgit