Skip to content

S
SpeakEzy_Frontend
Commit abd1d45a authored by Shehan Liyanage's avatar Shehan Liyanage
2 Browse files
Options

Merge branch 'NewPages' into 'develop' 

New pages

See merge request !5
parents cb3bdc76 7fa5698a
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 43641 additions and 8512 deletions
.DS_Store 0 → 100644
View file @ abd1d45a
File added
.husky/pre-commit
View file @ abd1d45a
#!/usr/bin/env sh # #!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh" # . "$(dirname -- "$0")/_/husky.sh"
echo "\n Checking format, lint and types in your project before committing" # echo "\n Checking format, lint and types in your project before committing"
# Check Prettier standards # # Check Prettier standards
npm run format || # npm run format ||
( # (
echo "\n Prettier Check Failed.\n Run npm run format, add changes and try commit again.\n"; # echo "\n Prettier Check Failed.\n Run npm run format, add changes and try commit again.\n";
false; # false;
) # )
# Check ESLint Standards # # Check ESLint Standards
npm run lint-staged || # npm run lint-staged ||
( # (
echo "\n ESLint Check Failed. \n Make the required changes listed above, add changes and try to commit again.\n" # echo "\n ESLint Check Failed. \n Make the required changes listed above, add changes and try to commit again.\n"
false; # false;
) # )
# If everything passes... Now we can commit # # If everything passes... Now we can commit
echo "Build is completed... I am committing this now. \n" # echo "Build is completed... I am committing this now. \n"
package-lock.json 0 → 100644
View file @ abd1d45a
This diff is collapsed.
src/.DS_Store 0 → 100644
View file @ abd1d45a
File added
src/App.tsx
View file @ abd1d45a
...@@ -2,7 +2,9 @@ import './App.css' ...@@ -2,7 +2,9 @@ import './App.css'
import { ThemeProvider } from '@mui/material/styles' import { ThemeProvider } from '@mui/material/styles'
import { Routes, Route } from 'react-router-dom' import { Routes, Route } from 'react-router-dom'
import HomePage from './Pages/Home/Homepage'
import VideoCall from './Pages/VideoCall/VideoCall' import VideoCall from './Pages/VideoCall/VideoCall'
import SignInSide from './Pages/SignIn/SignInSide'
import { theme } from './Services/Utils/theme' import { theme } from './Services/Utils/theme'
import { Box } from '@mui/material' import { Box } from '@mui/material'
...@@ -12,7 +14,9 @@ function App() { ...@@ -12,7 +14,9 @@ function App() {
<ThemeProvider theme={theme}> <ThemeProvider theme={theme}>
<Box className='App'> <Box className='App'>
<Routes> <Routes>
<Route path='/' element={<VideoCall />} /> <Route path='/' element={<SignInSide />} />
<Route path='/home' element={<HomePage />} />
<Route path='/videocall' element={<VideoCall />} />
<Route path='/:channel' element={<VideoCall />} /> <Route path='/:channel' element={<VideoCall />} />
</Routes> </Routes>
</Box> </Box>
......
src/Pages/Home/Homepage.tsx 0 → 100644
View file @ abd1d45a
import * as React from 'react'
import {
AppBar,
Toolbar,
Typography,
CssBaseline,
Container,
Box,
Grid,
Card,
CardContent,
CardMedia,
Button,
Grow,
IconButton,
} from '@mui/material'
import { createTheme, ThemeProvider } from '@mui/material/styles'
import { useNavigate } from 'react-router-dom'
import VideoCallIcon from '@mui/icons-material/VideoCall'
import SchoolIcon from '@mui/icons-material/School'
import FacebookIcon from '@mui/icons-material/Facebook'
import YouTubeIcon from '@mui/icons-material/YouTube'
import BackgroundImage from '../../Assests/Images/Background.jpeg'
const defaultTheme = createTheme({
palette: {
primary: {
main: '#1976d2',
},
secondary: {
main: '#dc004e',
},
},
typography: {
fontFamily: 'Roboto, sans-serif',
},
})
// function Header() {
// return (
// <AppBar position='static' sx={{ backgroundColor: 'primary.main' }}>
// <Toolbar>
// <Typography
// variant='h4'
// component='div'
// sx={{ flexGrow: 1, fontFamily: 'Roboto', fontWeight: 'bold' }}
// >
// SPEAKEZY
// </Typography>
// <IconButton color='inherit' href='#'>
// <VideoCallIcon />
// </IconButton>
// <IconButton color='inherit' href='#'>
// <SchoolIcon />
// </IconButton>
// </Toolbar>
// </AppBar>
// )
// }
function Footer() {
return (
<Box
sx={{
bgcolor: 'transparent',
background: 'rgba(25, 118, 210, 0.8)',
p: 6,
color: 'white',
}}
component='footer'
>
<Container maxWidth='lg'>
<Grid container spacing={4} justifyContent='space-between'>
<Grid item xs={12} sm={4}>
<Typography
variant='h6'
gutterBottom
sx={{
transition: 'color 0.3s ease, transform 0.3s ease',
'&:hover': {
color: '#ffeb3b',
transform: 'scale(1.05)',
},
}}
>
About Us
</Typography>
<Typography
variant='subtitle1'
sx={{
transition: 'color 0.3s ease, transform 0.3s ease',
'&:hover': {
color: '#ffeb3b',
transform: 'scale(1.05)',
},
}}
>
Learn more about our mission to enhance digital accessibility and inclusivity.
</Typography>
</Grid>
<Grid item xs={12} sm={4}>
<Typography
variant='h6'
gutterBottom
sx={{
transition: 'color 0.3s ease, transform 0.3s ease',
'&:hover': {
color: '#ffeb3b',
transform: 'scale(1.05)',
},
}}
>
Contact
</Typography>
<Typography
variant='subtitle1'
sx={{
transition: 'color 0.3s ease, transform 0.3s ease',
'&:hover': {
color: '#ffeb3b',
transform: 'scale(1.05)',
},
}}
>
Email: contact@speakezy.com
</Typography>
</Grid>
<Grid item xs={12} sm={4}>
<Typography
variant='h6'
gutterBottom
sx={{
transition: 'color 0.3s ease, transform 0.3s ease',
'&:hover': {
color: '#ffeb3b',
transform: 'scale(1.05)',
},
}}
>
Follow Us
</Typography>
<Box sx={{ display: 'flex', justifyContent: 'center' }}>
<IconButton
color='inherit'
href='https://www.facebook.com'
sx={{
transition: 'transform 0.3s ease',
'&:hover': {
color: '#3b5998',
transform: 'scale(1.2)',
},
}}
>
<FacebookIcon fontSize='large' />
</IconButton>
<IconButton
color='inherit'
href='https://www.youtube.com'
sx={{
transition: 'transform 0.3s ease',
'&:hover': {
color: '#FF0000',
transform: 'scale(1.2)',
},
}}
>
<YouTubeIcon fontSize='large' />
</IconButton>
</Box>
</Grid>
</Grid>
<Typography
variant='body2'
align='center'
sx={{
mt: 4,
transition: 'color 0.3s ease, transform 0.3s ease',
'&:hover': { color: '#ffeb3b', transform: 'scale(1.05)' },
}}
>
{'© '}
{new Date().getFullYear()} {'SPEAKEZY. All rights reserved.'}
</Typography>
</Container>
</Box>
)
}
export default function HomePage() {
const navigate = useNavigate()
const handleVideoCallClick = () => {
navigate('/videocall')
}
const handleTrainingClick = () => {
navigate('/training')
}
return (
<ThemeProvider theme={defaultTheme}>
<CssBaseline />
<Box
sx={{
backgroundImage: `url(${BackgroundImage})`,
backgroundRepeat: 'no-repeat',
backgroundSize: 'cover',
backgroundPosition: 'center',
minHeight: '100vh',
display: 'flex',
flexDirection: 'column',
justifyContent: 'center',
alignItems: 'center',
padding: 2,
mb: 0, // Remove margin at the bottom to eliminate gap
}}
>
<Container component='main' maxWidth='lg' sx={{ textAlign: 'center' }}>
<Typography
variant='h2'
component='h1'
sx={{
color: 'white',
fontWeight: 'bold',
mb: 4,
textShadow: '2px 2px 4px rgba(0, 0, 0, 0.5)',
}}
>
Welcome to SPEAKEZY
</Typography>
<Grid container spacing={4} justifyContent='center'>
<Grow in={true} timeout={1000}>
<Grid item xs={12} sm={6} md={4}>
<Card
elevation={8}
sx={{
transition: 'transform 0.3s ease',
'&:hover': { transform: 'scale(1.05)' },
}}
>
<CardMedia>
<Box
sx={{
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
height: 200,
backgroundColor: 'primary.light',
}}
>
<VideoCallIcon sx={{ fontSize: 100, color: 'white' }} />
</Box>
</CardMedia>
<CardContent sx={{ textAlign: 'center' }}>
<Typography variant='h5' component='h2' sx={{ fontWeight: 'bold' }}>
Colloborate with Community
</Typography>
<Button
variant='contained'
color='primary'
sx={{ mt: 2 }}
onClick={handleVideoCallClick}
>
Start Video Call
</Button>
</CardContent>
</Card>
</Grid>
</Grow>
<Grow in={true} timeout={1500}>
<Grid item xs={12} sm={6} md={4}>
<Card
elevation={8}
sx={{
transition: 'transform 0.3s ease',
'&:hover': { transform: 'scale(1.05)' },
}}
>
<CardMedia>
<Box
sx={{
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
height: 200,
backgroundColor: 'secondary.light',
}}
>
<SchoolIcon sx={{ fontSize: 100, color: 'white' }} />
</Box>
</CardMedia>
<CardContent sx={{ textAlign: 'center' }}>
<Typography variant='h5' component='h2' sx={{ fontWeight: 'bold' }}>
Train Sign Language
</Typography>
<Button
variant='contained'
color='secondary'
sx={{ mt: 2 }}
onClick={handleTrainingClick}
>
Start Training
</Button>
</CardContent>
</Card>
</Grid>
</Grow>
</Grid>
</Container>
</Box>
<Footer />
</ThemeProvider>
)
}
src/Pages/SignIn/SignInSide.tsx 0 → 100644
View file @ abd1d45a
import * as React from 'react'
import Avatar from '@mui/material/Avatar'
import Button from '@mui/material/Button'
import CssBaseline from '@mui/material/CssBaseline'
import TextField from '@mui/material/TextField'
import FormControlLabel from '@mui/material/FormControlLabel'
import Checkbox from '@mui/material/Checkbox'
import Link from '@mui/material/Link'
import Paper from '@mui/material/Paper'
import Box from '@mui/material/Box'
import Grid from '@mui/material/Grid'
import LockOutlinedIcon from '@mui/icons-material/LockOutlined'
import Typography from '@mui/material/Typography'
import { createTheme, ThemeProvider } from '@mui/material/styles'
import { useNavigate } from 'react-router-dom'
import SignInSideImage from '../../Assests/Images/SignInSide.jpeg'
function Copyright(props: any) {
return (
<Typography variant='body2' color='text.secondary' align='center' {...props}>
{'Copyright © '}
<Link color='inherit' href='https://mui.com/'>
Your Website
</Link>{' '}
{new Date().getFullYear()}
{'.'}
</Typography>
)
}
const defaultTheme = createTheme()
export default function SignInSide() {
const navigate = useNavigate()
const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
event.preventDefault()
const data = new FormData(event.currentTarget)
console.log({
email: data.get('email'),
password: data.get('password'),
})
// Simulate authentication logic here
// If authentication is successful, navigate to VideoCall page
navigate('/home')
}
return (
<ThemeProvider theme={defaultTheme}>
<Grid container component='main' sx={{ height: '100vh' }}>
<CssBaseline />
<Grid
item
xs={false}
sm={4}
md={7}
sx={{
backgroundImage: `url(${SignInSideImage})`,
backgroundRepeat: 'no-repeat',
backgroundColor: (t) =>
t.palette.mode === 'light' ? t.palette.grey[50] : t.palette.grey[900],
backgroundSize: 'cover',
backgroundPosition: 'center',
}}
/>
<Grid item xs={12} sm={8} md={5} component={Paper} elevation={6} square>
<Box
sx={{
my: 8,
mx: 4,
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
}}
>
<Avatar sx={{ m: 1, bgcolor: 'secondary.main' }}>
<LockOutlinedIcon />
</Avatar>
<Typography component='h1' variant='h5'>
Sign in
</Typography>
<Box component='form' noValidate onSubmit={handleSubmit} sx={{ mt: 1 }}>
<TextField
margin='normal'
required
fullWidth
id='email'
label='Email Address'
name='email'
autoComplete='email'
autoFocus
/>
<TextField
margin='normal'
required
fullWidth
name='password'
label='Password'
type='password'
id='password'
autoComplete='current-password'
/>
<FormControlLabel
control={<Checkbox value='remember' color='primary' />}
label='Remember me'
/>
<Button type='submit' fullWidth variant='contained' sx={{ mt: 3, mb: 2 }}>
Sign In
</Button>
<Grid container>
<Grid item xs>
<Link href='#' variant='body2'>
Forgot password?
</Link>
</Grid>
<Grid item>
<Link href='#' variant='body2'>
{"Don't have an account? Sign Up"}
</Link>
</Grid>
</Grid>
<Copyright sx={{ mt: 5 }} />
</Box>
</Box>
</Grid>
</Grid>
</ThemeProvider>
)
}
yarn.lock
View file @ abd1d45a
This diff is collapsed.
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