uodate #2
@@ -82,7 +82,7 @@ define(['./workbox-54d0af47'], (function (workbox) { 'use strict';
|
||||
"revision": "3ca0b8505b4bec776b69afdba2768812"
|
||||
}, {
|
||||
"url": "index.html",
|
||||
"revision": "0.jlpvaemfr1"
|
||||
"revision": "0.7mpt2f2te58"
|
||||
}], {});
|
||||
workbox.cleanupOutdatedCaches();
|
||||
workbox.registerRoute(new workbox.NavigationRoute(workbox.createHandlerBoundToURL("index.html"), {
|
||||
|
||||
@@ -1,30 +0,0 @@
|
||||
export const getTitle = (loactions:string) =>{
|
||||
|
||||
if (loactions==='/') {
|
||||
return 'Dashboard'
|
||||
}else if (loactions==='/register-user') {
|
||||
return 'Manage User - Register User'
|
||||
} else if (loactions==='/deactivate-accounts') {
|
||||
return 'Manage User - Deactivated User'
|
||||
} else if (loactions==='/manage-post') {
|
||||
return 'Manage Post'
|
||||
} else if (loactions==='/manage-sub-admin') {
|
||||
return 'Manage Sub Admin'
|
||||
} else if (loactions==='/manage-jobs') {
|
||||
return 'Manage Jobs'
|
||||
} else if (loactions==='/manage-contact-us') {
|
||||
return 'Manage Contact Us'
|
||||
} else if (loactions==='/manage-contact-us') {
|
||||
return 'Manage Contact Us'
|
||||
}else if (loactions==='/faq') {
|
||||
return 'Manage CMS - FAQ'
|
||||
}else if (loactions==='/about-us') {
|
||||
return 'Manage CMS - About Us'
|
||||
}else if (loactions==='/privacy-policy') {
|
||||
return 'Manage CMS - Privacy Policy'
|
||||
}else if (loactions==='/terms-and-condition') {
|
||||
return 'Manage CMS - Tems And Condition'
|
||||
}else if (loactions==='/profile') {
|
||||
return 'My Profile'
|
||||
}
|
||||
}
|
||||
19
src/Constants/Constants.tsx
Normal file
19
src/Constants/Constants.tsx
Normal file
@@ -0,0 +1,19 @@
|
||||
export const getTitle = (location: string): string => {
|
||||
const titles: { [key: string]: string } = {
|
||||
'/': 'Dashboard',
|
||||
'/manage-user/register-user': 'Manage User',
|
||||
'/manage-user/deactivate-accounts': 'Manage User',
|
||||
'/manage-post': 'Manage Post',
|
||||
'/manage-sub-admin': 'Manage Sub Admin',
|
||||
'/manage-jobs': 'Manage Jobs',
|
||||
'/manage-contact-us': 'Manage Contact Us',
|
||||
'/manage-cms/faq': 'Manage CMS',
|
||||
'/manage-cms/about-us': 'Manage CMS',
|
||||
'/manage-cms/privacy-policy': 'Manage CMS',
|
||||
'/manage-cms/terms-and-condition': 'Manage CMS',
|
||||
'/profile': 'My Profile',
|
||||
};
|
||||
|
||||
return titles[location] || 'Page Not Found';
|
||||
};
|
||||
|
||||
@@ -6,12 +6,14 @@ import { nav } from "../Routes/Nav";
|
||||
import logo from '../assets/logo.svg';
|
||||
import { AccordionItem, AccordionItemContent, AccordionItemTrigger, AccordionRoot } from "../components/ui/accordion";
|
||||
import { Avatar } from "../components/ui/avatar";
|
||||
import { getTitle } from "../Constants/Constaants";
|
||||
import { getTitle } from "../Constants/Constants";
|
||||
|
||||
const DefaultLayout: FC<{ children: React.ReactNode }> = ({ children }) => {
|
||||
const navigate = useNavigate()
|
||||
const location = useLocation()
|
||||
const headerTitle = getTitle(location?.pathname)
|
||||
console.log(location);
|
||||
|
||||
|
||||
|
||||
|
||||
@@ -19,27 +21,27 @@ const DefaultLayout: FC<{ children: React.ReactNode }> = ({ children }) => {
|
||||
|
||||
|
||||
return (
|
||||
<HStack position={'relative'} bg="#F2F2F2" backgroundPosition="center" backgroundRepeat="repeat" backgroundSize="cover" gap={0} w="100%" h="100vh" >
|
||||
<HStack position={'relative'} bg="#F2F2F2" backgroundPosition="center" backgroundRepeat="repeat" backgroundSize="cover" gap={0} pt={2} w="100%" h="100vh" >
|
||||
|
||||
<VStack zIndex={1} gap={0} rounded={'lg'} h="100%" w="15%" >
|
||||
<HStack w={'100%'} p={3} h={'6.5%'} justifyContent={'center'}>
|
||||
<Image w={55} src={logo} />
|
||||
</HStack>
|
||||
<VStack w={'100%'} p={3}>
|
||||
{nav?.map(({ title, path, Icon, type, children }, index) => type === 'single' ?
|
||||
<NavLink className="link" key={index} to={path} style={{ cursor: 'pointer', borderRadius: '8px', padding: '6px', width: '100%', display: 'flex', alignItems: 'center', gap: 6, border: '1px solid #ffffff', backgroundColor:'#fff', color:'#000', boxShadow:'rgba(99, 99, 99, 0.2) 0px 2px 8px 0px'}} ><Icon style={{ fontSize: '20px' }} /> <Text fontSize={'xs'} w={'100%'}>{title}</Text></NavLink> :
|
||||
<VStack overflow={'scroll'} w={'100%'} p={3}>
|
||||
{nav?.map(({ title, path, Icon, type, children, initPath }, index) => type === 'single' ?
|
||||
<NavLink className="link" key={index} to={path} style={{ cursor: 'pointer', borderRadius: '8px', padding: '6px', width: '100%', display: 'flex', alignItems: 'center', gap: 6, border: '1px solid #ffffff', backgroundColor:'#fff', color:'#000', boxShadow:'rgba(99, 99, 99, 0.2) 0px 2px 8px 0px'}} ><Icon style={{ fontSize: '20px', backgroundColor:'#fff', width:28, color:location?.pathname === path ? '#02A0A0':'#000', padding:2, borderRadius:'50%' }} /> <Text fontSize={'xs'} w={'100%'}>{title}</Text></NavLink> :
|
||||
<AccordionRoot bg={'#fff'} rounded={'lg'} collapsible>
|
||||
<AccordionItem boxShadow={'rgba(99, 99, 99, 0.2) 0px 2px 8px 0px'} rounded={'lg'} borderBottom={'none'} p={0} key={index} value={title}>
|
||||
<AccordionItemTrigger color={'#fff'} onClick={() => navigate(path)} gap={0} style={{ cursor: 'pointer', borderRadius: '8px', padding: '5px', width: '100%', display: 'flex', alignItems: 'center', border: '1px solid #ffffff', backgroundColor:'#fff',color:'#000', fontSize: '14px', fontWeight:'normal' }}> <Text fontSize={'xs'} gap={1} display={'flex'} alignItems={'center'} ><Icon style={{ fontSize: '20px' }} />{title}</Text></AccordionItemTrigger>
|
||||
<AccordionItem boxShadow={'rgba(99, 99, 99, 0.2) 0px 2px 8px 0px'} rounded={'lg'} borderBottom={'none'} p={0} key={index} value={title}>
|
||||
<AccordionItemTrigger className={`link ${location?.pathname.startsWith(initPath??'') && 'active'}`} color={'#fff'} onClick={() => navigate(path)} gap={0} style={{ cursor: 'pointer', borderRadius: '8px', padding: '5px', width: '100%', display: 'flex', alignItems: 'center', border: '1px solid #ffffff', backgroundColor:'#fff',color:'#000', fontSize: '14px', fontWeight:'normal' }}> <Text fontSize={'xs'} gap={1} display={'flex'} alignItems={'center'} ><Icon style={{ fontSize: '20px', backgroundColor:'#fff', width:23, color:location?.pathname.startsWith(initPath??'') ? '#02A0A0':'#000', padding:2, borderRadius:'50%' }} />{title}</Text></AccordionItemTrigger>
|
||||
{children?.map(({ title, path, Icon }, index) => <AccordionItemContent className={`linkChild ${location?.pathname === path && 'activeChild'}`} key={index} onClick={()=>navigate(path)} style={{ marginTop: 6, cursor: 'pointer', borderRadius: '8px', padding: '6px', width: '100%', display: 'flex', alignItems: 'center', gap: 6, border: '1px solid #ffffff', backgroundColor:'#fff',color:'#000' }} ><Icon style={{ fontSize: '16px' }} /> <Text fontSize={'xs'} w={'100%'}>{title}</Text></AccordionItemContent>)}
|
||||
</AccordionItem>
|
||||
</AccordionRoot>)}
|
||||
</VStack>
|
||||
</VStack>
|
||||
<VStack gap={0} h="100%" w="85%" >
|
||||
<HStack h={'6.5%'} w={'100%'} justifyContent={'space-between'} pe={3} gap={6}>
|
||||
<Text fontSize={'sm'} ms={1} fontWeight={600} color={'#013e3e'}>{headerTitle}</Text>
|
||||
<HStack justifyContent={'center'}>
|
||||
<HStack h={'6.5%'} w={'100%'} justifyContent={'space-between'} alignItems={'flex-end'} pe={3} gap={6}>
|
||||
<Text mb={1} fontSize={'sm'} ms={1} fontWeight={600} color={'#013e3e'}>{headerTitle}</Text>
|
||||
<HStack bg={'#fff'} h={'100%'} justifyContent={'center'} p={2} rounded={'md'} boxShadow={'rgba(99, 99, 99, 0.2) 0px 2px 8px 0px'}>
|
||||
<RiNotificationLine color="#013e3e" cursor={'pointer'} style={{ fontSize: '22px' }} />
|
||||
<HStack cursor={'pointer'} onClick={() => navigate('/profile')} >
|
||||
<Avatar size={'sm'} src="https://i.pinimg.com/736x/d6/cd/0f/d6cd0ffd4634b0763d3958a7325ce26e.jpg" />
|
||||
|
||||
@@ -1,7 +1,10 @@
|
||||
import MainFrame from "../../components/MainFrame"
|
||||
|
||||
const ManagePost = () => {
|
||||
return (
|
||||
<div>ManagePost</div>
|
||||
<MainFrame>
|
||||
|
||||
</MainFrame>
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
@@ -1,9 +1,234 @@
|
||||
import { Box, HStack, Input, Stack, Table, Text } from '@chakra-ui/react'
|
||||
import MainFrame from '../../../components/MainFrame'
|
||||
import { InputGroup } from '../../../components/ui/input-group'
|
||||
import { LuSearch } from 'react-icons/lu'
|
||||
import DataTable from '../../../components/DataTable'
|
||||
|
||||
|
||||
|
||||
|
||||
// Table setup
|
||||
const tableHeadRow = [
|
||||
"Sr. No",
|
||||
"First Name",
|
||||
"Mobile number",
|
||||
"Gender",
|
||||
"DOB",
|
||||
"Type of User",
|
||||
"Language",
|
||||
"Status",
|
||||
"Action",
|
||||
];
|
||||
|
||||
|
||||
|
||||
const usersData:any[] = [
|
||||
{
|
||||
"Sr. No": 1,
|
||||
"First Name": "Ritesh",
|
||||
"Mobile number": "9876543210",
|
||||
"Gender": "Male",
|
||||
"DOB": "15-01-1990",
|
||||
"Type of User": "Admin",
|
||||
"Language": "English",
|
||||
"Status": "Active",
|
||||
"Action": "Edit/Delete",
|
||||
},
|
||||
{
|
||||
'Sr. No': 2,
|
||||
"First Name": "Anjali",
|
||||
"Mobile number": "9123456789",
|
||||
"Gender": "Female",
|
||||
"DOB": "21-06-1995",
|
||||
"Type of User": "Customer",
|
||||
"Language": "Hindi",
|
||||
"Status": "Inactive",
|
||||
"Action": "Edit/Delete",
|
||||
},
|
||||
{
|
||||
'Sr. No': 3,
|
||||
"First Name": "Rajesh",
|
||||
"Mobile number": "9871234560",
|
||||
"Gender": "Male",
|
||||
"DOB": "12-12-1985",
|
||||
"Type of User": "Vendor",
|
||||
"Language": "English",
|
||||
"Status": "Active",
|
||||
"Action": "Edit/Delete",
|
||||
},
|
||||
{
|
||||
'Sr. No': 4,
|
||||
"First Name": "Priya",
|
||||
"Mobile number": "9988776655",
|
||||
"Gender": "Female",
|
||||
"DOB": "05-05-1998",
|
||||
"Type of User": "Customer",
|
||||
"Language": "Tamil",
|
||||
"Status": "Active",
|
||||
"Action": "Edit/Delete",
|
||||
},
|
||||
{
|
||||
'Sr. No': 5,
|
||||
"First Name": "Amit",
|
||||
"Mobile number": "8899665544",
|
||||
"Gender": "Male",
|
||||
"DOB": "03-03-1992",
|
||||
"Type of User": "Admin",
|
||||
"Language": "Gujarati",
|
||||
"Status": "Inactive",
|
||||
"Action": "Edit/Delete",
|
||||
},
|
||||
{
|
||||
'Sr. No': 6,
|
||||
"First Name": "Amit",
|
||||
"Mobile number": "8899665544",
|
||||
"Gender": "Male",
|
||||
"DOB": "03-03-1992",
|
||||
"Type of User": "Admin",
|
||||
"Language": "Gujarati",
|
||||
"Status": "Inactive",
|
||||
"Action": "Edit/Delete",
|
||||
},
|
||||
{
|
||||
'Sr. No': 7,
|
||||
"First Name": "Amit",
|
||||
"Mobile number": "8899665544",
|
||||
"Gender": "Male",
|
||||
"DOB": "03-03-1992",
|
||||
"Type of User": "Admin",
|
||||
"Language": "Gujarati",
|
||||
"Status": "Inactive",
|
||||
"Action": "Edit/Delete",
|
||||
},
|
||||
{
|
||||
'Sr. No': 5,
|
||||
"First Name": "Amit",
|
||||
"Mobile number": "8899665544",
|
||||
"Gender": "Male",
|
||||
"DOB": "03-03-1992",
|
||||
"Type of User": "Admin",
|
||||
"Language": "Gujarati",
|
||||
"Status": "Inactive",
|
||||
"Action": "Edit/Delete",
|
||||
},
|
||||
{
|
||||
'Sr. No': 6,
|
||||
"First Name": "Amit",
|
||||
"Mobile number": "8899665544",
|
||||
"Gender": "Male",
|
||||
"DOB": "03-03-1992",
|
||||
"Type of User": "Admin",
|
||||
"Language": "Gujarati",
|
||||
"Status": "Inactive",
|
||||
"Action": "Edit/Delete",
|
||||
},
|
||||
{
|
||||
'Sr. No': 7,
|
||||
"First Name": "Amit",
|
||||
"Mobile number": "8899665544",
|
||||
"Gender": "Male",
|
||||
"DOB": "03-03-1992",
|
||||
"Type of User": "Admin",
|
||||
"Language": "Gujarati",
|
||||
"Status": "Inactive",
|
||||
"Action": "Edit/Delete",
|
||||
},
|
||||
{
|
||||
'Sr. No': 8,
|
||||
"First Name": "Amit",
|
||||
"Mobile number": "8899665544",
|
||||
"Gender": "Male",
|
||||
"DOB": "03-03-1992",
|
||||
"Type of User": "Admin",
|
||||
"Language": "Gujarati",
|
||||
"Status": "Inactive",
|
||||
"Action": "Edit/Delete",
|
||||
},
|
||||
{
|
||||
'Sr. No': 9,
|
||||
"First Name": "Amit",
|
||||
"Mobile number": "8899665544",
|
||||
"Gender": "Male",
|
||||
"DOB": "03-03-1992",
|
||||
"Type of User": "Admin",
|
||||
"Language": "Gujarati",
|
||||
"Status": "Inactive",
|
||||
"Action": "Edit/Delete",
|
||||
},
|
||||
{
|
||||
'Sr. No': 10,
|
||||
"First Name": "Amit",
|
||||
"Mobile number": "8899665544",
|
||||
"Gender": "Male",
|
||||
"DOB": "03-03-1992",
|
||||
"Type of User": "Admin",
|
||||
"Language": "Gujarati",
|
||||
"Status": "Inactive",
|
||||
"Action": "Edit/Delete",
|
||||
},
|
||||
{
|
||||
'Sr. No': 11,
|
||||
"First Name": "Amit",
|
||||
"Mobile number": "8899665544",
|
||||
"Gender": "Male",
|
||||
"DOB": "03-03-1992",
|
||||
"Type of User": "Admin",
|
||||
"Language": "Gujarati",
|
||||
"Status": "Inactive",
|
||||
"Action": "Edit/Delete",
|
||||
},
|
||||
{
|
||||
'Sr. No': 12,
|
||||
"First Name": "Amit",
|
||||
"Mobile number": "8899665544",
|
||||
"Gender": "Male",
|
||||
"DOB": "03-03-1992",
|
||||
"Type of User": "Admin",
|
||||
"Language": "Gujarati",
|
||||
"Status": "Inactive",
|
||||
"Action": "Edit/Delete",
|
||||
},
|
||||
{
|
||||
'Sr. No': 13,
|
||||
"First Name": "Amit",
|
||||
"Mobile number": "8899665544",
|
||||
"Gender": "Male",
|
||||
"DOB": "03-03-1992",
|
||||
"Type of User": "Admin",
|
||||
"Language": "Gujarati",
|
||||
"Status": "Inactive",
|
||||
"Action": "Edit/Delete",
|
||||
},
|
||||
];
|
||||
|
||||
|
||||
const RegisterUsers = () => {
|
||||
|
||||
return (
|
||||
<MainFrame>
|
||||
<HStack w={'100%'} justifyContent={'space-between'} p={3}>
|
||||
<Text as={'span'} fontSize={'sm'} fontWeight={'bolder'} color={'#000'}>Register User</Text>
|
||||
|
||||
|
||||
<Box w={'30%'}>
|
||||
<InputGroup
|
||||
bgSize={'xs'}
|
||||
flex="1"
|
||||
startElement={<LuSearch />}
|
||||
w={'100%'}
|
||||
color={'#000'}
|
||||
>
|
||||
<Input w={'100%'} bg={'#EEEEEE'} _focus={{border:'1px #02A0A0 solid'}} border={'1px #EEEEEE solid'} rounded={'full'} size={'sm'} placeholder="Search..." />
|
||||
</InputGroup>
|
||||
</Box>
|
||||
</HStack>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<DataTable tableHeadRow={tableHeadRow} data={usersData} />
|
||||
</MainFrame>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -17,18 +17,19 @@ export const nav = [
|
||||
},
|
||||
{
|
||||
title: "Manage Users",
|
||||
path: "/register-user",
|
||||
path: "/manage-user/register-user",
|
||||
initPath:'/manage-user',
|
||||
Icon: TiUserOutline,
|
||||
type:'multiple',
|
||||
children: [
|
||||
{
|
||||
title: "Register Users",
|
||||
path: "/register-user",
|
||||
path: "/manage-user/register-user",
|
||||
Icon: GoDotFill,
|
||||
},
|
||||
{
|
||||
title: "Deactivated Accounts",
|
||||
path: "/deactivate-accounts",
|
||||
path: "/manage-user/deactivate-accounts",
|
||||
Icon: GoDotFill,
|
||||
},
|
||||
],
|
||||
@@ -60,28 +61,29 @@ export const nav = [
|
||||
|
||||
{
|
||||
title: "Manage CMS",
|
||||
path: "/faq",
|
||||
initPath:'/manage-cms',
|
||||
path: "/manage-cms/faq",
|
||||
Icon: TiDocumentText,
|
||||
type:'multiple',
|
||||
children: [
|
||||
{
|
||||
title: "FAQ",
|
||||
path: "/faq",
|
||||
path: "/manage-cms/faq",
|
||||
Icon: GoDotFill,
|
||||
},
|
||||
{
|
||||
title: "About Us",
|
||||
path: "/about-us",
|
||||
path: "/manage-cms/about-us",
|
||||
Icon: GoDotFill,
|
||||
},
|
||||
{
|
||||
title: "Privacy Policy",
|
||||
path: "/privacy-policy",
|
||||
path: "/manage-cms/privacy-policy",
|
||||
Icon: GoDotFill,
|
||||
},
|
||||
{
|
||||
title: "Terms And Conditions",
|
||||
path: "/terms-and-condition",
|
||||
path: "/manage-cms/terms-and-condition",
|
||||
Icon: GoDotFill,
|
||||
},
|
||||
],
|
||||
|
||||
@@ -12,24 +12,24 @@ import RegisterUsers from "../Pages/ManageUser/RegisterUsers/RegisterUsers";
|
||||
import Profile from "../Pages/Profile/Profile";
|
||||
export const RouteLink = [
|
||||
{ path: "/", Component: Dashboard },
|
||||
{ path: "/register-user", Component: RegisterUsers },
|
||||
{ path: "/deactivate-accounts", Component: DeactivatedAccounts },
|
||||
{ path: "/manage-user/register-user", Component: RegisterUsers },
|
||||
{ path: "/manage-user/deactivate-accounts", Component: DeactivatedAccounts },
|
||||
{ path: "/manage-post", Component: ManagePost },
|
||||
{ path: "/manage-sub-admin", Component: ManageSubAdmin },
|
||||
{ path: "/manage-jobs", Component: ManageJobs },
|
||||
{ path: "/manage-contact-us", Component: ManageContactUs },
|
||||
{ path: "/faq", Component: FreqAskQuestion },
|
||||
{ path: "/manage-cms/faq", Component: FreqAskQuestion },
|
||||
|
||||
|
||||
|
||||
{ path: "/about-us", Component: AboutUs },
|
||||
{ path: "/manage-cms/about-us", Component: AboutUs },
|
||||
|
||||
|
||||
|
||||
{ path: "/privacy-policy", Component: PrivacyPolicy },
|
||||
{ path: "/manage-cms/privacy-policy", Component: PrivacyPolicy },
|
||||
|
||||
|
||||
{ path: "/terms-and-condition", Component: PrivacyPolicy },
|
||||
{ path: "/manage-cms/terms-and-condition", Component: PrivacyPolicy },
|
||||
|
||||
|
||||
|
||||
|
||||
35
src/components/DataTable.tsx
Normal file
35
src/components/DataTable.tsx
Normal file
@@ -0,0 +1,35 @@
|
||||
import { Stack, Table } from "@chakra-ui/react"
|
||||
|
||||
|
||||
interface TableProps {
|
||||
tableHeadRow: string[];
|
||||
data: Record<string, any>[];
|
||||
}
|
||||
|
||||
|
||||
|
||||
const DataTable: React.FC<TableProps> = ({ tableHeadRow, data }) => {
|
||||
return (
|
||||
<Stack mt={4} color={'#000000CC'} gap="10">
|
||||
<Table.Root key={'line'} size="sm" variant={'line'}>
|
||||
<Table.Header >
|
||||
<Table.Row bg={'#02A0A0'} >
|
||||
{tableHeadRow.map((item, index)=><Table.ColumnHeader fontSize={'xs'} fontWeight={700} key={index} border={'none'}>{item}</Table.ColumnHeader>)}
|
||||
|
||||
</Table.Row>
|
||||
</Table.Header>
|
||||
<Table.Body>
|
||||
{data.map((item:any, index) => (
|
||||
<Table.Row
|
||||
bg={index % 2 === 0 ? "#fff" : "#02A0A020"} >
|
||||
{tableHeadRow.map((heading)=><Table.Cell key={index} fontSize={'xs'} fontWeight={500} border={'none'}>{item[heading]}</Table.Cell> )}
|
||||
|
||||
</Table.Row>))}
|
||||
|
||||
</Table.Body>
|
||||
</Table.Root>
|
||||
</Stack>
|
||||
)
|
||||
}
|
||||
|
||||
export default DataTable
|
||||
@@ -1,4 +1,4 @@
|
||||
*{
|
||||
body{
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
@@ -21,7 +21,12 @@
|
||||
/* background-color: #e2e8f01c !important; */
|
||||
}
|
||||
|
||||
|
||||
.active>.css-1ic543h {
|
||||
-webkit-transition: rotate 0.2s;
|
||||
transition: rotate 0.2s;
|
||||
transform-origin: center;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.linkChild:hover{
|
||||
color: #02A0A0 !important;
|
||||
@@ -48,71 +53,3 @@
|
||||
/* background-color: #e2e8f01c !important; */
|
||||
}
|
||||
|
||||
|
||||
/* Sphere.css */
|
||||
|
||||
/* ✅ Red Spheres */
|
||||
.red-sphere-1,
|
||||
.red-sphere-2,
|
||||
.red-sphere-3{
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
background-color: #D90B2E46;
|
||||
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
|
||||
filter: blur(100px);
|
||||
}
|
||||
|
||||
/* ✅ Blue Spheres */
|
||||
.blue-sphere-1,
|
||||
.blue-sphere-2,
|
||||
.blue-sphere-3{
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
background-color: #009DAB46;
|
||||
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
|
||||
filter: blur(100px);
|
||||
}
|
||||
|
||||
/* 🔧 Positioning for Spheres */
|
||||
.red-sphere-1 {
|
||||
width: 250px;
|
||||
height: 250px;
|
||||
top: 10%;
|
||||
left: 5%;
|
||||
}
|
||||
|
||||
.blue-sphere-1 {
|
||||
width: 320px;
|
||||
height: 320px;
|
||||
top: 30%;
|
||||
right: 0%;
|
||||
}
|
||||
|
||||
.red-sphere-2 {
|
||||
width: 180px;
|
||||
height: 180px;
|
||||
bottom: 15%;
|
||||
left: 20%;
|
||||
}
|
||||
|
||||
.blue-sphere-2 {
|
||||
width: 140px;
|
||||
height: 140px;
|
||||
bottom: 5%;
|
||||
right: 25%;
|
||||
}
|
||||
|
||||
.red-sphere-3 {
|
||||
width: 480px;
|
||||
height: 480px;
|
||||
bottom: 55%;
|
||||
left: 40%;
|
||||
}
|
||||
|
||||
.blue-sphere-3{
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
bottom: 10%;
|
||||
right: 40%;
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user