diff options
Diffstat (limited to 'client/src')
35 files changed, 692 insertions, 0 deletions
diff --git a/client/src/App.js b/client/src/App.js new file mode 100644 index 0000000..c39f14e --- /dev/null +++ b/client/src/App.js @@ -0,0 +1,12 @@ +import React from 'react' +import Index from './routes' + +const App = () => { + return ( + <> + <Index /> + </> + ) +} + +export default App diff --git a/client/src/components/Card/Card.jsx b/client/src/components/Card/Card.jsx new file mode 100644 index 0000000..3d66067 --- /dev/null +++ b/client/src/components/Card/Card.jsx @@ -0,0 +1,13 @@ +import React from 'react' +import styles from './Card.module.css' + +const Card = ({ title, image }) => { + return ( + <div className={styles.card}> + <img className={styles.card__image} src={image} alt="" /> + <h2 className={styles.card__title}>{title}</h2> + </div> + ) +} + +export default Card diff --git a/client/src/components/Card/Card.module.css b/client/src/components/Card/Card.module.css new file mode 100644 index 0000000..e351fd5 --- /dev/null +++ b/client/src/components/Card/Card.module.css @@ -0,0 +1,26 @@ +@import '../../styles/GlobalVariables.css'; + +.card { + height: 300px; + width: 300px; + 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; +} diff --git a/client/src/components/Card/CardScanner.jsx b/client/src/components/Card/CardScanner.jsx new file mode 100644 index 0000000..29caf39 --- /dev/null +++ b/client/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/client/src/components/Card/CardScanner.module.css b/client/src/components/Card/CardScanner.module.css new file mode 100644 index 0000000..af237e2 --- /dev/null +++ b/client/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/client/src/components/Header/Header.jsx b/client/src/components/Header/Header.jsx new file mode 100644 index 0000000..d90aafe --- /dev/null +++ b/client/src/components/Header/Header.jsx @@ -0,0 +1,13 @@ +import React from 'react' +import styles from './Header.module.css' + +const Header = ({ subheading }) => { + return ( + <header className={styles.header}> + <h1 className={styles.header__heading}>AADHAAR</h1> + <h3 className={styles.header__subheading}>{subheading}</h3> + </header> + ) +} + +export default Header diff --git a/client/src/components/Header/Header.module.css b/client/src/components/Header/Header.module.css new file mode 100644 index 0000000..8e6084f --- /dev/null +++ b/client/src/components/Header/Header.module.css @@ -0,0 +1,20 @@ +@import '../../styles/GlobalVariables.css'; + +.header { + font-family: 'Fredoka One', cursive; + display: flex; + flex-direction: column; + align-items: center; + margin: 20px; + padding: 20px; +} + +.header__heading { + font-size: var(--font-large); + font-weight: 400; +} + +.header__subheading { + font-size: var(--font-medium); + font-weight: 400; +} diff --git a/client/src/components/Input/Input.jsx b/client/src/components/Input/Input.jsx new file mode 100644 index 0000000..ee79f3b --- /dev/null +++ b/client/src/components/Input/Input.jsx @@ -0,0 +1,22 @@ +import React from 'react' +import styles from './Input.module.css' + +const Input = ({ label, id, value, type, name }) => { + return ( + <div className={styles.input}> + <div className={styles.input__container}> + <label htmlFor={id}>{label}</label> + <input + className={styles.input__field} + type={type} + id={id} + name={name} + value={value} + required + /> + </div> + </div> + ) +} + +export default Input diff --git a/client/src/components/Input/Input.module.css b/client/src/components/Input/Input.module.css new file mode 100644 index 0000000..cafb5f1 --- /dev/null +++ b/client/src/components/Input/Input.module.css @@ -0,0 +1,19 @@ +.input { + display: flex; + justify-content: center; + font-family: 'Barlow'; + font-size: var(--font-medium-s); +} + +.input__container { + display: flex; + flex-direction: column; +} + +.input__field { + width: 300px; + margin: 10px 0px; + padding: 20px 10px; + border: 3px solid; + border-radius: 10px; +} diff --git a/client/src/components/LabelCard/LabelCard.jsx b/client/src/components/LabelCard/LabelCard.jsx new file mode 100644 index 0000000..be02f01 --- /dev/null +++ b/client/src/components/LabelCard/LabelCard.jsx @@ -0,0 +1,23 @@ +import React from 'react' +import styles from './LabelCard.module.css' + +const LabelCard = ({ id, name, value, title, image }) => { + return ( + <div className={styles.labelcard}> + <label htmlFor={id} className={styles.card}> + <img className={styles.card__image} src={image} alt="" /> + <h4 className={styles.card__title}>{title}</h4> + </label> + <input + className={styles.labelcard__radio} + type="radio" + id={id} + name={name} + value={value} + required + /> + </div> + ) +} + +export default LabelCard diff --git a/client/src/components/LabelCard/LabelCard.module.css b/client/src/components/LabelCard/LabelCard.module.css new file mode 100644 index 0000000..8511596 --- /dev/null +++ b/client/src/components/LabelCard/LabelCard.module.css @@ -0,0 +1,19 @@ +.labelcard { + text-align: center; +} + +.card { + display: flex; + flex-direction: column; + align-items: center; + margin: 5px; +} + +.card__image { + border: 3px solid var(--color-black); + border-radius: 10px; +} + +.card__title { + margin: 5px 0px; +} diff --git a/client/src/components/RadioSelect/RadioSelect.jsx b/client/src/components/RadioSelect/RadioSelect.jsx new file mode 100644 index 0000000..e69de29 --- /dev/null +++ b/client/src/components/RadioSelect/RadioSelect.jsx diff --git a/client/src/components/RadioSelect/RadioSelect.module.css b/client/src/components/RadioSelect/RadioSelect.module.css new file mode 100644 index 0000000..e69de29 --- /dev/null +++ b/client/src/components/RadioSelect/RadioSelect.module.css diff --git a/client/src/components/SubmitButton/SubmitButton.jsx b/client/src/components/SubmitButton/SubmitButton.jsx new file mode 100644 index 0000000..567d923 --- /dev/null +++ b/client/src/components/SubmitButton/SubmitButton.jsx @@ -0,0 +1,18 @@ +import React from 'react' +import styles from './SubmitButton.module.css' + +const SubmitButton = ({ onClick }) => { + return ( + <> + <button onClick={onClick} className={styles.submit}> + <img + className={styles.submit__image} + src={`${process.env.PUBLIC_URL}/assets/images/white-check.svg`} + alt="" + /> + </button> + </> + ) +} + +export default SubmitButton diff --git a/client/src/components/SubmitButton/SubmitButton.module.css b/client/src/components/SubmitButton/SubmitButton.module.css new file mode 100644 index 0000000..bb1b015 --- /dev/null +++ b/client/src/components/SubmitButton/SubmitButton.module.css @@ -0,0 +1,20 @@ +.submit { + position: absolute; + bottom: 100px; + right: 150px; + background: transparent; + border: none; + border-radius: 50%; + transition: 0.2s all; + cursor: pointer; +} + +.submit:active { + transform: scale(0.98); + box-shadow: 3px 2px 22px 1px var(--color-shadow); +} + +.submit__image { + height: 75px; + width: 75px; +} diff --git a/client/src/index.css b/client/src/index.css new file mode 100644 index 0000000..c05147c --- /dev/null +++ b/client/src/index.css @@ -0,0 +1,19 @@ +* { + margin: 0; + padding: 0; +} + +body { + 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; + height: 100%; + width: 100%; +} + +code { + font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", + monospace; +} diff --git a/client/src/index.js b/client/src/index.js new file mode 100644 index 0000000..08cf3d2 --- /dev/null +++ b/client/src/index.js @@ -0,0 +1,14 @@ +import React from 'react' +import ReactDOM from 'react-dom/client' +import { BrowserRouter } from 'react-router-dom' +import './index.css' +import App from './App' + +const root = ReactDOM.createRoot(document.getElementById('root')) +root.render( + <React.StrictMode> + <BrowserRouter> + <App /> + </BrowserRouter> + </React.StrictMode> +) diff --git a/client/src/pages/Enrollment/Address/Address.jsx b/client/src/pages/Enrollment/Address/Address.jsx new file mode 100644 index 0000000..6a32bcf --- /dev/null +++ b/client/src/pages/Enrollment/Address/Address.jsx @@ -0,0 +1,47 @@ +import React from 'react' +import Header from '../../../components/Header/Header' +import Input from '../../../components/Input/Input' +import SubmitButton from '../../../components/SubmitButton/SubmitButton' + +import styles from './Address.module.css' + +const Address = () => { + return ( + <> + <Header subheading="Enrollment" /> + <div className={styles.address}> + <div className={styles.address__container}> + <Input + id="houseNo" + label="House Number/ Apartment" + value="house" + type="text" + /> + <Input + id="locality" + label="Area / Locality" + value="locality" + type="text" + /> + <Input id="town" label="Village / Town" value="town" type="text" /> + <Input + id="postOffice" + label="Post Office" + value="postOffice" + type="text" + /> + </div> + <div className={styles.address__container}> + <Input id="street" label="Street / Road" value="street" type="text" /> + <Input id="landmark" label="Landmark" value="landmark" type="text" /> + <Input id="district" label="District" value="district" type="text" /> + <Input id="pincode" label="Pincode" value="pincode" type="text" /> + </div> + </div> + <Input id="state" label="State" value="state" type="text" /> + <SubmitButton /> + </> + ) +} + +export default Address diff --git a/client/src/pages/Enrollment/Address/Address.module.css b/client/src/pages/Enrollment/Address/Address.module.css new file mode 100644 index 0000000..60958ba --- /dev/null +++ b/client/src/pages/Enrollment/Address/Address.module.css @@ -0,0 +1,8 @@ +.address { + display: flex; + justify-content: center; +} + +.address__container { + margin: 0px 20px; +} diff --git a/client/src/pages/Enrollment/DocumentScanner/DocumentScanner.jsx b/client/src/pages/Enrollment/DocumentScanner/DocumentScanner.jsx new file mode 100644 index 0000000..1ca2558 --- /dev/null +++ b/client/src/pages/Enrollment/DocumentScanner/DocumentScanner.jsx @@ -0,0 +1,56 @@ +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/client/src/pages/Enrollment/DocumentScanner/DocumentScanner.module.css b/client/src/pages/Enrollment/DocumentScanner/DocumentScanner.module.css new file mode 100644 index 0000000..ec59f61 --- /dev/null +++ b/client/src/pages/Enrollment/DocumentScanner/DocumentScanner.module.css @@ -0,0 +1,5 @@ +.card__container { + display: flex; + justify-content: center; + } +
\ No newline at end of file diff --git a/client/src/pages/Enrollment/Enrollment.jsx b/client/src/pages/Enrollment/Enrollment.jsx new file mode 100644 index 0000000..b8bbc81 --- /dev/null +++ b/client/src/pages/Enrollment/Enrollment.jsx @@ -0,0 +1,16 @@ +import React from 'react' +import Header from '../../components/Header/Header' +import SubmitButton from '../../components/SubmitButton/SubmitButton' +import FormOne from './FormOne/FormOne' + +const Enrollment = () => { + return ( + <> + <Header subheading="Enrollment" /> + <FormOne /> + <SubmitButton /> + </> + ) +} + +export default Enrollment diff --git a/client/src/pages/Enrollment/Enrollment.module.css b/client/src/pages/Enrollment/Enrollment.module.css new file mode 100644 index 0000000..e69de29 --- /dev/null +++ b/client/src/pages/Enrollment/Enrollment.module.css diff --git a/client/src/pages/Enrollment/FormOne/FormOne.jsx b/client/src/pages/Enrollment/FormOne/FormOne.jsx new file mode 100644 index 0000000..4ba274c --- /dev/null +++ b/client/src/pages/Enrollment/FormOne/FormOne.jsx @@ -0,0 +1,72 @@ +import React from 'react' +import Input from '../../../components/Input/Input' +import LabelCard from '../../../components/LabelCard/LabelCard' +import styles from './FormOne.module.css' + +const FormOne = () => { + return ( + <div className={styles.formone}> + <div className={styles.formone__radio}> + <span className={styles.formone__resident}> + <input + type="radio" + id="indian" + name="resident" + value="Indian Resident" + required + /> + <label htmlFor="indian">Indian Resident</label> + </span> + <span className={styles.formone__resident}> + <input + type="radio" + id="indian" + name="resident" + value="Indian Resident" + required + /> + <label htmlFor="indian">Non-Residential Indian</label> + </span> + </div> + + <Input type="text" id="fullName" label="Full Name" value="Full Name" /> + + <div className={styles.formone__gender}> + <LabelCard + id="male" + name="gender" + title="Male" + image={`${process.env.PUBLIC_URL}/assets/images/male.svg`} + /> + <LabelCard + id="female" + name="gender" + value="female" + title="Female" + image={`${process.env.PUBLIC_URL}/assets/images/female.svg`} + /> + <LabelCard + id="trans" + name="gender" + value="trans" + title="Transgender" + image={`${process.env.PUBLIC_URL}/assets/images/trans.svg`} + /> + </div> + + <div className={styles.formone__dob}> + <label htmlFor="dob">Date of Birth</label> + <input + className={styles.formone__dob_input} + type="date" + id="dob" + name="dob" + value="Date of Birth" + required + /> + </div> + </div> + ) +} + +export default FormOne diff --git a/client/src/pages/Enrollment/FormOne/FormOne.module.css b/client/src/pages/Enrollment/FormOne/FormOne.module.css new file mode 100644 index 0000000..35d1e49 --- /dev/null +++ b/client/src/pages/Enrollment/FormOne/FormOne.module.css @@ -0,0 +1,46 @@ +.formone { + display: flex; + flex-direction: column; + align-items: center; + font-family: 'Barlow'; + font-size: var(--font-medium-s); +} + +.formone__radio { + display: flex; + align-items: center; +} + +.formone__resident { + display: flex; + align-items: center; + margin: 15px; +} + +.formone__resident input[type='radio'] { + width: 1.5rem; + height: 1.5rem; +} + +.formone__gender { + display: flex; +} + +.formone__dob { + display: flex; + flex-direction: column; +} + +.formone__dob input[type='date']::-webkit-calendar-picker-indicator { + width: 30px; + height: 30px; + margin: 0; +} + +.formone__dob_input { + width: 300px; + margin: 10px 0px; + padding: 11px 10px; + border: 3px solid; + border-radius: 10px; +} diff --git a/client/src/pages/Enrollment/FormTwo/FormTwo.jsx b/client/src/pages/Enrollment/FormTwo/FormTwo.jsx new file mode 100644 index 0000000..56bcd70 --- /dev/null +++ b/client/src/pages/Enrollment/FormTwo/FormTwo.jsx @@ -0,0 +1,17 @@ +import React from 'react' +import Input from '../../../components/Input/Input' +import Header from '../../../components/Header/Header' +import SubmitButton from '../../../components/SubmitButton/SubmitButton' + +const FormTwo = () => { + return ( + <div className="formtwo"> + <Header subheading="Enrollment" /> + <Input id="mobile" value="Mobile" label="Mobile" type="text" /> + <Input id="email" value="Email" label="Email" type="email" /> + <SubmitButton /> + </div> + ) +} + +export default FormTwo diff --git a/client/src/pages/Enrollment/FormTwo/FormTwo.module.css b/client/src/pages/Enrollment/FormTwo/FormTwo.module.css new file mode 100644 index 0000000..8b13789 --- /dev/null +++ b/client/src/pages/Enrollment/FormTwo/FormTwo.module.css @@ -0,0 +1 @@ + diff --git a/client/src/pages/Enrollment/PhotoCapture/PhotoCapture.jsx b/client/src/pages/Enrollment/PhotoCapture/PhotoCapture.jsx new file mode 100644 index 0000000..0b30848 --- /dev/null +++ b/client/src/pages/Enrollment/PhotoCapture/PhotoCapture.jsx @@ -0,0 +1,52 @@ +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/client/src/pages/Enrollment/PhotoCapture/PhotoCapture.module.css b/client/src/pages/Enrollment/PhotoCapture/PhotoCapture.module.css new file mode 100644 index 0000000..ec59f61 --- /dev/null +++ b/client/src/pages/Enrollment/PhotoCapture/PhotoCapture.module.css @@ -0,0 +1,5 @@ +.card__container { + display: flex; + justify-content: center; + } +
\ No newline at end of file diff --git a/client/src/pages/Home/Home.jsx b/client/src/pages/Home/Home.jsx new file mode 100644 index 0000000..b132f12 --- /dev/null +++ b/client/src/pages/Home/Home.jsx @@ -0,0 +1,30 @@ +import React from 'react' +import { Link } from 'react-router-dom' + +import Card from '../../components/Card/Card' +import Header from '../../components/Header/Header' +import styles from './Home.module.css' + +const Home = () => { + return ( + <> + <Header subheading="Mera Aadhaar Meri Pehchan" /> + <div className={styles.card__container}> + <Link to="/enrollment"> + <Card + title="Enrollment" + image={`${process.env.PUBLIC_URL}/assets/images/enrollment.svg`} + /> + </Link> + <Link to="/update"> + <Card + title="Update" + image={`${process.env.PUBLIC_URL}/assets/images/update.svg`} + /> + </Link> + </div> + </> + ) +} + +export default Home diff --git a/client/src/pages/Home/Home.module.css b/client/src/pages/Home/Home.module.css new file mode 100644 index 0000000..de1cead --- /dev/null +++ b/client/src/pages/Home/Home.module.css @@ -0,0 +1,4 @@ +.card__container { + display: flex; + justify-content: center; +} diff --git a/client/src/pages/Update/Update.jsx b/client/src/pages/Update/Update.jsx new file mode 100644 index 0000000..0b448cf --- /dev/null +++ b/client/src/pages/Update/Update.jsx @@ -0,0 +1,7 @@ +import React from 'react' + +const Update = () => { + return <div>Update</div> +} + +export default Update diff --git a/client/src/pages/Update/Update.module.css b/client/src/pages/Update/Update.module.css new file mode 100644 index 0000000..e69de29 --- /dev/null +++ b/client/src/pages/Update/Update.module.css diff --git a/client/src/routes/index.js b/client/src/routes/index.js new file mode 100644 index 0000000..fc2aeea --- /dev/null +++ b/client/src/routes/index.js @@ -0,0 +1,38 @@ +import React from 'react' +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/Enrollment/PhotoCapture/PhotoCapture' +import DocumentScanner from '../pages/Enrollment/DocumentScanner/DocumentScanner' +import FormTwo from '../pages/Enrollment/FormTwo/FormTwo' +import Address from '../pages/Enrollment/Address/Address' + +const Index = () => { + return ( + <Routes> + <Route exact path="/" element={<Home />} /> + <Route path="enrollment"> + <Route index element={<Enrollment />} /> + <Route path="form2"> + <Route index element={<FormTwo />} /> + </Route> + <Route path="address"> + <Route index element={<Address />} /> + </Route> + <Route path="photo"> + <Route index element={<PhotoCapture />} /> + </Route> + <Route path="documents"> + <Route index element={<DocumentScanner />} /> + </Route> + </Route> + <Route path="update"> + <Route index element={<Update />} /> + </Route> + </Routes> + ) +} + +export default Index diff --git a/client/src/styles/GlobalVariables.css b/client/src/styles/GlobalVariables.css new file mode 100644 index 0000000..a1e3384 --- /dev/null +++ b/client/src/styles/GlobalVariables.css @@ -0,0 +1,8 @@ +:root { + --color-black: #000; + --color-shadow: rgba(0, 0, 0, 0.24); + + --font-large: 4rem; + --font-medium: 2rem; + --font-medium-s: 1.25rem; +} |