Merge pull request #1 from Blaster4385/develop

Add photograph and document scanner pages

7 files changed, 142 insertions, 0 deletions

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 (
+    <>
+      <div className={styles.card}>
+        <img className={styles.card__image} src={image} alt="" />
+      </div>
+      <SubmitButton />
+    </>
+  )
+}
+
+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 (
+        <><Header subheading="Enrollment" />
+            <div className={styles.card__container}>
+                <CardScanner
+                    image={`${process.env.PUBLIC_URL}/assets/images/document.svg`} />
+            </div>
+            <Grid container columnSpacing={10} justifyContent="center">
+                <Grid item>
+                    <Button color="primary" size="large" type="submit" variant="contained">
+                        Scan
+                    </Button>
+                </Grid>
+                <Grid item>
+                    <Button color="primary" size="large" type="submit" variant="contained">
+                        Reset
+                    </Button>
+                </Grid>
+            </Grid>
+            <br></br>
+            <div>
+                <Grid container justifyContent="center">
+                    <Typography align='center'>
+                        Please place your document on the scanner.<br />
+                        Close the lid.<br />
+                        Wait for prompt to remove your document
+                    </Typography>
+                </Grid>
+            </div>
+            <SubmitButton />
+
+        </>
+    )
+}
+
+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 (
+        <><Header subheading="Enrollment" />
+            <div className={styles.card__container}>
+                <CardScanner
+                    image={`${process.env.PUBLIC_URL}/assets/images/capture.svg`} />
+            </div>
+            <Grid container columnSpacing={10} justifyContent="center">
+                <Grid item>
+                    <Button color="primary" size="large" type="submit" variant="contained">
+                        Capture
+                    </Button>
+                </Grid>
+                <Grid item>
+                    <Button color="primary" size="large" type="submit" variant="contained">
+                        Reset
+                    </Button>
+                </Grid>
+            </Grid>
+            <br></br>
+            <div>
+            <Grid container justifyContent="center">
+            <Typography align='center'>Please look into the camera<br></br>
+                    Click Capture to Capture the photo<br></br>
+                    Click Reset the remove the captured photo</Typography>
+                    </Grid>
+            </div>
+
+        </>
+    )
+}
+
+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 = () => {
       <Route path="update">
         <Route index element={<Update />} />
       </Route>
+      <Route path="photo">
+        <Route index element={<PhotoCapture />} />
+      </Route>
+      <Route path="documents">
+        <Route index element={<DocumentScanner />} />
+      </Route>
     </Routes>
   )
 }