نسخ من RaghadAlkhous/RestaurantDash
Delete LoginForme and SidePanel from components
هذا الالتزام موجود في:
raghad
@@ -1,323 +0,0 @@
|
|||||||
import React, { useState } from 'react';
|
|
||||||
import {
|
|
||||||
TextField,
|
|
||||||
Button,
|
|
||||||
Typography,
|
|
||||||
Stack,
|
|
||||||
Box,
|
|
||||||
IconButton,
|
|
||||||
InputAdornment
|
|
||||||
} from '@mui/material';
|
|
||||||
import { useTheme } from '@mui/material/styles';
|
|
||||||
import VisibilityOffOutlinedIcon from '@mui/icons-material/VisibilityOffOutlined';
|
|
||||||
import { VisibilityOutlined } from '@mui/icons-material';
|
|
||||||
|
|
||||||
const LoginForm = () => {
|
|
||||||
const theme = useTheme();
|
|
||||||
const [showPassword, setShowPassword] = useState(false);
|
|
||||||
|
|
||||||
const handleTogglePassword = () => {
|
|
||||||
setShowPassword((prev) => !prev);
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Box
|
|
||||||
flex={1}
|
|
||||||
paddingTop={4}
|
|
||||||
paddingBottom={4}
|
|
||||||
paddingLeft={2}
|
|
||||||
paddingRight={2}
|
|
||||||
sx={{
|
|
||||||
backgroundColor: '#FFFFFF',
|
|
||||||
minHeight: '10vh',
|
|
||||||
display: 'flex',
|
|
||||||
justifyContent: 'center',
|
|
||||||
alignItems: 'center',
|
|
||||||
position: 'sticky',
|
|
||||||
|
|
||||||
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<Box
|
|
||||||
sx={{
|
|
||||||
width: {
|
|
||||||
xs: '120%',
|
|
||||||
sm: '100%',
|
|
||||||
md: '120%',
|
|
||||||
lg: '120%'
|
|
||||||
},
|
|
||||||
maxWidth: '600px'
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<Stack spacing={2}>
|
|
||||||
|
|
||||||
{/* Logo */}
|
|
||||||
<Box>
|
|
||||||
<img
|
|
||||||
src="/image.png"
|
|
||||||
alt="logo"
|
|
||||||
style={{
|
|
||||||
width: '4vw',
|
|
||||||
maxWidth: '80px',
|
|
||||||
height: 'auto',
|
|
||||||
objectFit: 'contain'
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
</Box>
|
|
||||||
|
|
||||||
<Typography
|
|
||||||
variant="h4"
|
|
||||||
fontWeight={700}
|
|
||||||
sx={{
|
|
||||||
fontSize: {
|
|
||||||
xs: '1.8rem',
|
|
||||||
sm: '2rem',
|
|
||||||
md: '2.2rem'
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
Login
|
|
||||||
</Typography>
|
|
||||||
|
|
||||||
<Typography
|
|
||||||
variant="body2"
|
|
||||||
color="text.secondary"
|
|
||||||
fontWeight={500}
|
|
||||||
sx={{ pb: 1 }}
|
|
||||||
>
|
|
||||||
Enter your username and password to access your account securely. Welcome back to our service!
|
|
||||||
</Typography>
|
|
||||||
|
|
||||||
{/* Email Input */}
|
|
||||||
<Box sx={{ display: 'flex', flexDirection: 'column', gap: 1 }}>
|
|
||||||
<Typography
|
|
||||||
variant="body2"
|
|
||||||
color="black"
|
|
||||||
sx={{
|
|
||||||
fontWeight: '500',
|
|
||||||
fontSize: '16px'
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
Email
|
|
||||||
</Typography>
|
|
||||||
<TextField
|
|
||||||
placeholder="Enter your email"
|
|
||||||
type="email"
|
|
||||||
variant="outlined"
|
|
||||||
fullWidth
|
|
||||||
sx={{
|
|
||||||
'& input': {
|
|
||||||
fontWeight: 500,
|
|
||||||
fontSize: '15px'
|
|
||||||
},
|
|
||||||
'& input::placeholder': {
|
|
||||||
color: '#969BA7'
|
|
||||||
},
|
|
||||||
'& .MuiOutlinedInput-root': {
|
|
||||||
borderRadius: '10px',
|
|
||||||
transition: '0.3s'
|
|
||||||
},
|
|
||||||
'& .MuiOutlinedInput-root.Mui-focused': {
|
|
||||||
borderColor: '#3f51b5',
|
|
||||||
boxShadow: '0 0 0 2px rgba(63,81,181,0.1)'
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
</Box>
|
|
||||||
|
|
||||||
{/* Password Input */}
|
|
||||||
<Box sx={{ display: 'flex', flexDirection: 'column', gap: 1 }}>
|
|
||||||
<Typography
|
|
||||||
variant="body2"
|
|
||||||
color="black"
|
|
||||||
sx={{
|
|
||||||
fontWeight: '500',
|
|
||||||
fontSize: '16px'
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
Password
|
|
||||||
</Typography>
|
|
||||||
<TextField
|
|
||||||
type={showPassword ? 'text' : 'password'}
|
|
||||||
placeholder="Enter your password"
|
|
||||||
fullWidth
|
|
||||||
variant="outlined"
|
|
||||||
autoComplete="new-password"
|
|
||||||
sx={{
|
|
||||||
'& input': {
|
|
||||||
fontWeight: 500,
|
|
||||||
fontSize: '15px'
|
|
||||||
},
|
|
||||||
'& input::placeholder': {
|
|
||||||
color: '#969BA7'
|
|
||||||
},
|
|
||||||
'& .MuiOutlinedInput-root': {
|
|
||||||
borderRadius: '10px',
|
|
||||||
transition: '0.3s'
|
|
||||||
},
|
|
||||||
'& .MuiOutlinedInput-root.Mui-focused': {
|
|
||||||
borderColor: '#3f51b5',
|
|
||||||
boxShadow: '0 0 0 2px rgba(63,81,181,0.1)'
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
InputProps={{
|
|
||||||
endAdornment: (
|
|
||||||
<InputAdornment position="end">
|
|
||||||
<IconButton onClick={handleTogglePassword} edge="end">
|
|
||||||
{showPassword ? <VisibilityOffOutlinedIcon /> : <VisibilityOutlined />}
|
|
||||||
</IconButton>
|
|
||||||
</InputAdornment>
|
|
||||||
)
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
</Box>
|
|
||||||
|
|
||||||
{/* Login Button */}
|
|
||||||
<Box sx={{ pt: 2 }}>
|
|
||||||
<Button
|
|
||||||
variant="contained"
|
|
||||||
fullWidth
|
|
||||||
sx={{
|
|
||||||
fontWeight: 600,
|
|
||||||
fontSize: {
|
|
||||||
xs: '14px',
|
|
||||||
sm: '16px'
|
|
||||||
},
|
|
||||||
height: {
|
|
||||||
xs: '45px',
|
|
||||||
sm: '52px'
|
|
||||||
},
|
|
||||||
borderRadius: '50px',
|
|
||||||
textTransform: 'none',
|
|
||||||
backgroundColor: '#FF914D',
|
|
||||||
'&:hover': {
|
|
||||||
backgroundColor: '#e57f3f'
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
Log in
|
|
||||||
</Button>
|
|
||||||
</Box>
|
|
||||||
|
|
||||||
{/* Divider */}
|
|
||||||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 2, py: 2 }}>
|
|
||||||
<Box sx={{ flex: 1, height: '1px', backgroundColor: '#E0E0E0' }} />
|
|
||||||
<Typography
|
|
||||||
variant="body1"
|
|
||||||
sx={{
|
|
||||||
fontWeight: 500,
|
|
||||||
fontSize: '16px',
|
|
||||||
color: 'black'
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
Or
|
|
||||||
</Typography>
|
|
||||||
<Box sx={{ flex: 1, height: '1px', backgroundColor: '#E0E0E0' }} />
|
|
||||||
</Box>
|
|
||||||
|
|
||||||
{/* Google Button */}
|
|
||||||
<Button
|
|
||||||
variant="outlined"
|
|
||||||
fullWidth
|
|
||||||
sx={{
|
|
||||||
fontWeight: 500,
|
|
||||||
fontSize: '16px',
|
|
||||||
borderRadius: '50px',
|
|
||||||
height: '50px',
|
|
||||||
textTransform: 'none',
|
|
||||||
gap: 1,
|
|
||||||
borderColor: '#E6E6E6',
|
|
||||||
color: 'black',
|
|
||||||
'&:hover': {
|
|
||||||
borderColor: 'black',
|
|
||||||
backgroundColor: 'transparent'
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<Box sx={{ display: 'flex', alignItems: 'center' }}>
|
|
||||||
<img
|
|
||||||
src="https://upload.wikimedia.org/wikipedia/commons/c/c1/Google_%22G%22_logo.svg"
|
|
||||||
alt="Google"
|
|
||||||
style={{ width: 25, height: 25 }}
|
|
||||||
/>
|
|
||||||
</Box>
|
|
||||||
Login with Google
|
|
||||||
</Button>
|
|
||||||
|
|
||||||
{/* Facebook Button */}
|
|
||||||
<Button
|
|
||||||
variant="outlined"
|
|
||||||
fullWidth
|
|
||||||
sx={{
|
|
||||||
fontWeight: 500,
|
|
||||||
fontSize: '16px',
|
|
||||||
borderRadius: '50px',
|
|
||||||
height: '50px',
|
|
||||||
textTransform: 'none',
|
|
||||||
gap: 1,
|
|
||||||
borderColor: '#E6E6E6',
|
|
||||||
color: 'black',
|
|
||||||
'&:hover': {
|
|
||||||
borderColor: 'black',
|
|
||||||
backgroundColor: 'transparent'
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<Box sx={{ display: 'flex', alignItems: 'center' }}>
|
|
||||||
<img
|
|
||||||
src="https://upload.wikimedia.org/wikipedia/commons/0/05/Facebook_Logo_%282019%29.png"
|
|
||||||
alt="Facebook"
|
|
||||||
style={{ width: 25, height: 25 }}
|
|
||||||
/>
|
|
||||||
</Box>
|
|
||||||
Login with Facebook
|
|
||||||
</Button>
|
|
||||||
|
|
||||||
{/* Register Link */}
|
|
||||||
<Typography
|
|
||||||
variant="body2"
|
|
||||||
sx={{
|
|
||||||
fontSize: '16px',
|
|
||||||
textAlign: 'center',
|
|
||||||
color: '#969BA7',
|
|
||||||
pt: 3
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
Don’t have an account?{' '}
|
|
||||||
<a
|
|
||||||
href="#"
|
|
||||||
style={{
|
|
||||||
color: '#2261FF',
|
|
||||||
textDecoration: 'none'
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
Register
|
|
||||||
</a>
|
|
||||||
</Typography>
|
|
||||||
|
|
||||||
{/* Terms */}
|
|
||||||
<Typography
|
|
||||||
variant="caption"
|
|
||||||
sx={{
|
|
||||||
fontSize: '14px',
|
|
||||||
textAlign: 'center',
|
|
||||||
color: '#969BA7',
|
|
||||||
pt: 5
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
By logging in, I agree to the{' '}
|
|
||||||
<a href="#" style={{ color: '#2261FF', textDecoration: 'none' }}>
|
|
||||||
Terms of Service
|
|
||||||
</a>{' '}
|
|
||||||
and{' '}
|
|
||||||
<a href="#" style={{ color: '#2261FF', textDecoration: 'none' }}>
|
|
||||||
Privacy Policy
|
|
||||||
</a>.
|
|
||||||
</Typography>
|
|
||||||
</Stack>
|
|
||||||
</Box>
|
|
||||||
</Box>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default LoginForm;
|
|
||||||
@@ -1,182 +0,0 @@
|
|||||||
import React, { useState, useEffect } from 'react';
|
|
||||||
|
|
||||||
|
|
||||||
import {
|
|
||||||
Button,
|
|
||||||
Typography,
|
|
||||||
Stack,
|
|
||||||
Box
|
|
||||||
} from '@mui/material';
|
|
||||||
|
|
||||||
import ArrowForwardIcon from '@mui/icons-material/ArrowForward'; // استيراد أيقونة السهم
|
|
||||||
|
|
||||||
const SidePanel = ({ setMode, mode }) => {
|
|
||||||
const [currentSlide, setCurrentSlide] = useState(0);
|
|
||||||
|
|
||||||
const slides = [
|
|
||||||
{
|
|
||||||
image: '/images/waitress3.png',
|
|
||||||
title: "Welcome to our cutting-edge postal application,",
|
|
||||||
description: "Welcome to our cutting-edge postal application, where sending and receiving mail has never been more convenient and efficient."
|
|
||||||
},
|
|
||||||
{
|
|
||||||
image: '/images/waitress3.png',
|
|
||||||
title: "Second Slide Title",
|
|
||||||
description: "Welcome to our cutting-edge postal application, where sending and receiving mail has never been more convenient and efficient."
|
|
||||||
},
|
|
||||||
{
|
|
||||||
image: '/images/waitress3.png',
|
|
||||||
title: "Third Slide Title",
|
|
||||||
description: "Welcome to our cutting-edge postal application, where sending and receiving mail has never been more convenient and efficient."
|
|
||||||
},
|
|
||||||
{
|
|
||||||
image: '/images/waitress3.png',
|
|
||||||
title: "Fourth Slide Title",
|
|
||||||
description: "Welcome to our cutting-edge postal application, where sending and receiving mail has never been more convenient and efficient."
|
|
||||||
}
|
|
||||||
];
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
const interval = setInterval(() => {
|
|
||||||
setCurrentSlide((prev) => (prev + 1) % slides.length);
|
|
||||||
}, 5000);
|
|
||||||
return () => clearInterval(interval);
|
|
||||||
}, [slides.length]);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Box
|
|
||||||
flex={1}
|
|
||||||
padding={2}
|
|
||||||
sx={{
|
|
||||||
display: { xs: "none", sm: "block" },
|
|
||||||
position: 'sticky',
|
|
||||||
height: 'calc(102vh - 40px)', // لضمان ملاءمته للشاشة
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
|
|
||||||
<Stack spacing={2} sx={{ width: '100%', height: '100%' }}>
|
|
||||||
<Box
|
|
||||||
sx={{
|
|
||||||
width: '100%',
|
|
||||||
height: '100vh',
|
|
||||||
position: 'relative',
|
|
||||||
overflow: 'hidden',
|
|
||||||
borderRadius: '20px',
|
|
||||||
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{/* الصورة الحالية */}
|
|
||||||
<img
|
|
||||||
src={slides[currentSlide].image}
|
|
||||||
alt={`Slide ${currentSlide + 1}`}
|
|
||||||
style={{
|
|
||||||
width: '100%',
|
|
||||||
height: '100%',
|
|
||||||
objectFit: 'cover',
|
|
||||||
display: 'block'
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
|
|
||||||
{/* مربع النص في الأسفل */}
|
|
||||||
<Box
|
|
||||||
sx={{
|
|
||||||
position: 'absolute',
|
|
||||||
bottom: 0,
|
|
||||||
left: 0,
|
|
||||||
width: '100%',
|
|
||||||
height: {
|
|
||||||
md: '37vh', // الافتراضي للشاشات الصغيرة
|
|
||||||
// xs: '5vh',
|
|
||||||
sm: '42vh',// عندما تكون الشاشة متوسطة أو أكبر
|
|
||||||
lg: '31vh', // من 1200px إلى أقل من 1536px
|
|
||||||
|
|
||||||
},
|
|
||||||
|
|
||||||
bgcolor: 'rgba(0, 0, 0, 0.2)',
|
|
||||||
color: 'white',
|
|
||||||
borderBottomLeftRadius: '20px',
|
|
||||||
borderBottomRightRadius: '20px',
|
|
||||||
p: 3,
|
|
||||||
boxSizing: 'border-box',
|
|
||||||
boxShadow: '0px -40px 20px rgba(0, 0, 0, 0.2)',
|
|
||||||
display: 'flex',
|
|
||||||
flexDirection: 'column',
|
|
||||||
justifyContent: 'flex-start',
|
|
||||||
alignItems: 'flex-start',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<Button
|
|
||||||
variant="contained"
|
|
||||||
size="small"
|
|
||||||
onClick={() => window.open('https://www.google.com', '_blank')}
|
|
||||||
sx={{
|
|
||||||
|
|
||||||
mb: 1,
|
|
||||||
bgcolor: 'rgba(255, 255, 255, 0.24)',
|
|
||||||
color: 'white',
|
|
||||||
textTransform: 'none',
|
|
||||||
borderRadius: '12px', // زاوية منحنية
|
|
||||||
display: 'flex', // لتوزيع الأيقونة والنص بشكل أفقي
|
|
||||||
alignItems: 'center', // لضبط الأيقونة والنص في المنتصف
|
|
||||||
padding: '6px 20px', // يمكن تعديل المسافة حول النص والأيقونة
|
|
||||||
borderRadius: '50px',
|
|
||||||
fontSize: '16px',
|
|
||||||
fontWeight: 500,
|
|
||||||
marginBottom: '20px'
|
|
||||||
}}
|
|
||||||
|
|
||||||
>
|
|
||||||
Plus
|
|
||||||
{/* إضافة أيقونة السهم مع تعديل زاوية الدوران */}
|
|
||||||
<ArrowForwardIcon sx={{ ml: 1, transform: 'rotate(-45deg)' }} /> {/* تعديل زاوية السهم */}
|
|
||||||
</Button>
|
|
||||||
|
|
||||||
<Typography
|
|
||||||
sx={{
|
|
||||||
wordBreak: 'break-word',
|
|
||||||
fontSize: '120%',
|
|
||||||
fontWeight: 400,
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{slides[currentSlide].description}
|
|
||||||
</Typography>
|
|
||||||
</Box>
|
|
||||||
|
|
||||||
{/* مؤشرات الشرائح */}
|
|
||||||
<Box
|
|
||||||
sx={{
|
|
||||||
position: 'absolute',
|
|
||||||
bottom: '1vh', // جعل المؤشرات تحت النص
|
|
||||||
left: '50%',
|
|
||||||
transform: 'translateX(-50%)',
|
|
||||||
display: 'flex',
|
|
||||||
gap: 1,
|
|
||||||
width: '100%',
|
|
||||||
justifyContent: 'center', // تأكد من أن المؤشرات تأخذ عرض الصورة بالكامل
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{slides.map((_, index) => (
|
|
||||||
<Box
|
|
||||||
key={index}
|
|
||||||
sx={{
|
|
||||||
width: '20%',
|
|
||||||
height: 5,
|
|
||||||
bgcolor: index === currentSlide ? 'white' : 'rgba(255, 255, 255, 0.5)',
|
|
||||||
borderRadius: 2,
|
|
||||||
cursor: 'pointer',
|
|
||||||
transition: 'background-color 0.3s',
|
|
||||||
}}
|
|
||||||
onClick={() => setCurrentSlide(index)}
|
|
||||||
/>
|
|
||||||
))}
|
|
||||||
</Box>
|
|
||||||
</Box>
|
|
||||||
</Stack>
|
|
||||||
<Box position="fixed">
|
|
||||||
|
|
||||||
</Box>
|
|
||||||
</Box>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
export default SidePanel;
|
|
||||||
المرجع في مشكلة جديدة
حظر مستخدم