Skip to content

2
2023-029
Commit 2863b5ab authored by Ridma Dilshan's avatar Ridma Dilshan
Browse files
Options

start the emotion detection frontend side

parent 27ddbbc0
Hide whitespace changes
Inline Side-by-side
Showing with 197 additions and 0 deletions
Project/Frontend/Web_App/src/layouts/main/Footer.tsx
View file @ 2863b5ab
......@@ -20,6 +20,7 @@ const LINKS = [
{ name: 'About us', href: PATH_PAGE.about },
{ name: 'Contact us', href: PATH_PAGE.contact },
{ name: 'FAQs', href: PATH_PAGE.faqs },
{ name: 'Emotion Detection', href: PATH_PAGE.emotion },
],
},
{
......
Project/Frontend/Web_App/src/layouts/main/nav/config.tsx
View file @ 2863b5ab
......@@ -33,6 +33,7 @@ const navConfig = [
{ title: 'Payment', path: PATH_PAGE.payment },
{ title: 'Maintenance', path: PATH_PAGE.maintenance },
{ title: 'Coming Soon', path: PATH_PAGE.comingSoon },
{ title: 'Emotion Detection', path: PATH_PAGE.emotion },
],
},
{
......
Project/Frontend/Web_App/src/pages/emotion-detection.tsx 0 → 100644
View file @ 2863b5ab
// next
import Head from 'next/head';
// @mui
import { Container, Box } from '@mui/material';
// layouts
import MainLayout from '../layouts/main';
// _mock
// import { _mapEmotion } from '../_mock/arrays';
// sections
import { EmotionHero, EmotionForm, } from '../sections/emotion';
// ----------------------------------------------------------------------
EmotionDetection.getLayout = (page: React.ReactElement) => <MainLayout>{page}</MainLayout>;
// ----------------------------------------------------------------------
export default function EmotionDetection() {
return (
<>
<Head>
<title> Emotion Detection </title>
</Head>
<EmotionHero />
<Container sx={{ py: 10 }}>
<Box
gap={10}
display="grid"
gridTemplateColumns={{
xs: 'repeat(1, 1fr)',
md: 'repeat(2, 1fr)',
}}
>
<EmotionForm />
{/* <EmotionMap emotions={_mapEmotion} /> */}
</Box>
</Container>
</>
);
}
Project/Frontend/Web_App/src/routes/paths.ts
View file @ 2863b5ab
......@@ -27,6 +27,7 @@ export const PATH_PAGE = {
payment: '/payment',
about: '/about-us',
contact: '/contact-us',
emotion : '/emotion-detection',
faqs: '/faqs',
page403: '/403',
page404: '/404',
......
Project/Frontend/Web_App/src/sections/emotion/EmotionForm.tsx 0 → 100644
View file @ 2863b5ab
import { m } from 'framer-motion';
// @mui
import { Button, Typography, TextField, Stack } from '@mui/material';
// components
import { MotionViewport, varFade } from '../../components/animate';
// ----------------------------------------------------------------------
export default function EmotionForm() {
return (
<Stack component={MotionViewport} spacing={5}>
<m.div variants={varFade().inUp}>
<Typography variant="h3">
Feel free to contact us. <br />
We'll be glad to hear from you, buddy.
</Typography>
</m.div>
<Stack spacing={3}>
<m.div variants={varFade().inUp}>
<TextField fullWidth label="Name" />
</m.div>
<m.div variants={varFade().inUp}>
<TextField fullWidth label="Email" />
</m.div>
<m.div variants={varFade().inUp}>
<TextField fullWidth label="Subject" />
</m.div>
<m.div variants={varFade().inUp}>
<TextField fullWidth label="Enter your message here." multiline rows={4} />
</m.div>
</Stack>
<m.div variants={varFade().inUp}>
<Button size="large" variant="contained">
Submit Now
</Button>
</m.div>
</Stack>
);
}
Project/Frontend/Web_App/src/sections/emotion/EmotionHero.tsx 0 → 100644
View file @ 2863b5ab
import { m } from 'framer-motion';
// @mui
import { styled } from '@mui/material/styles';
import { Stack, Container, Typography, Grid } from '@mui/material';
//
import { TextAnimate, MotionContainer, varFade } from '../../components/animate';
// ----------------------------------------------------------------------
const EMOTIONS = [
{
country: 'Bali',
address: '508 Bridle Avenue Newnan, GA 30263',
phoneNumber: '(239) 555-0108',
},
{
country: 'London',
address: '508 Bridle Avenue Newnan, GA 30263',
phoneNumber: '(319) 555-0115',
},
{
country: 'Prague',
address: '508 Bridle Avenue Newnan, GA 30263',
phoneNumber: '(252) 555-0126',
},
{
country: 'Moscow',
address: '508 Bridle Avenue Newnan, GA 30263',
phoneNumber: '(307) 555-0133',
},
];
const StyledRoot = styled('div')(({ theme }) => ({
position: 'relative',
backgroundSize: 'cover',
backgroundPosition: 'center',
backgroundImage: 'url(/assets/background/overlay_1.svg), url(/assets/images/contact/hero.jpg)',
padding: theme.spacing(10, 0),
[theme.breakpoints.up('md')]: {
height: 560,
padding: 0,
},
}));
const StyledContent = styled('div')(({ theme }) => ({
textAlign: 'center',
[theme.breakpoints.up('md')]: {
bottom: 80,
textAlign: 'left',
position: 'absolute',
},
}));
// ----------------------------------------------------------------------
export default function EmotionHero() {
return (
<StyledRoot>
<Container component={MotionContainer}>
<StyledContent>
<TextAnimate text="Emotion" sx={{ color: 'primary.main' }} variants={varFade().inRight} />
<br />
<Stack spacing={2} display="inline-flex" direction="row" sx={{ color: 'common.white' }}>
<TextAnimate text="Detection" />
<TextAnimate text="find" />
<TextAnimate text="us?" />
</Stack>
<Grid container spacing={5} sx={{ mt: 5, color: 'common.white' }}>
{EMOTIONS.map((emotion) => (
<Grid
key={emotion.country}
item
xs={12}
sm={6}
md={3}
lg={2}
sx={{
pr: {
md: 5,
},
}}
>
<m.div variants={varFade().in}>
<Typography variant="h6" paragraph>
{emotion.country}
</Typography>
</m.div>
<m.div variants={varFade().inRight}>
<Typography variant="body2">
{emotion.address}
<br /> {emotion.phoneNumber}
</Typography>
</m.div>
</Grid>
))}
</Grid>
</StyledContent>
</Container>
</StyledRoot>
);
}
Project/Frontend/Web_App/src/sections/emotion/index.ts 0 → 100644
View file @ 2863b5ab
// export { default as EmotionMap } from './EmotionMap';
export { default as EmotionHero } from './EmotionHero';
export { default as EmotionForm } from './EmotionForm';
Markdown is supported
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