Exam For Mobile + mobile Side Menu Done

main
Pedram Keshavarzi 3 years ago
parent 6a9ec90704
commit 294ca885ac
  1. 4
      src/assets/img/group-9.svg
  2. 25
      src/components/header/Header.js
  3. 6
      src/components/header/MobileSideMenu/arrow-down.svg
  4. 6
      src/components/header/MobileSideMenu/book-1-active.svg
  5. 6
      src/components/header/MobileSideMenu/book-1.svg
  6. 7
      src/components/header/MobileSideMenu/element-equal-active.svg
  7. 7
      src/components/header/MobileSideMenu/element-equal.svg
  8. 125
      src/components/header/MobileSideMenu/index.js
  9. 5
      src/components/header/MobileSideMenu/logout.svg
  10. 7
      src/components/header/MobileSideMenu/map-active.svg
  11. 7
      src/components/header/MobileSideMenu/map.svg
  12. 4
      src/components/header/MobileSideMenu/profile-active.svg
  13. 4
      src/components/header/MobileSideMenu/profile.svg
  14. 7
      src/components/header/MobileSideMenu/radar-1-active.svg
  15. 7
      src/components/header/MobileSideMenu/radar-1.svg
  16. 4
      src/components/header/MobileSideMenu/sms-active.svg
  17. 4
      src/components/header/MobileSideMenu/sms.svg
  18. 7
      src/components/header/MobileSideMenu/task-square-active.svg
  19. 7
      src/components/header/MobileSideMenu/task-square.svg
  20. 6
      src/components/nav/Nav.js
  21. 15
      src/components/nav/empty-wallet.svg
  22. 9
      src/components/nav/home-2.svg
  23. 12
      src/components/nav/profile.svg
  24. 30
      src/components/nav/vuesax-bold-element-4-2.svg
  25. 17
      src/components/nav/vuesax-linear-logout.svg
  26. 67
      src/view/Exam/EnterExam/desktop/index.css
  27. 206
      src/view/Exam/EnterExam/desktop/index.js
  28. 4
      src/view/Exam/EnterExam/index.js
  29. 194
      src/view/Exam/EnterExam/mobile/index.js
  30. 749
      src/view/Exam/M_Exam.js
  31. 335
      src/view/Exam/M_Exam.scss
  32. 19
      src/view/Exam/index.js
  33. 1
      tailwind.config.js

@ -0,0 +1,4 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M8.5 15.5L15.5 8.5" stroke="#fff" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M15.5 15.5L8.5 8.5" stroke="#fff" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>

After

Width:  |  Height:  |  Size: 325 B

@ -8,7 +8,7 @@ import MobileSideMenu from './MobileSideMenu';
import { connect } from 'react-redux';
import { Link } from 'react-router-dom';
import exitIcon from '../../assets/img/group-9.svg'
const Header = ({
isMobile
@ -105,13 +105,28 @@ const Header = ({
{
isMobile && menuPopup &&
<>
<div className='h-screen top-0 w-full z-30 backdrop-blur fixed'></div>
<div className='h-screen top-0 w-full z-30 backdrop-blur bg-black bg-opacity-20 fixed'></div>
<div className='w-full flex'>
<MobileSideMenu />
<button className='flex items-center justify-center fixed z-40 top-10 left-5 text-xl font-bold text-red52 w-12 h-12 rounded-xl bg-pinkF5'
<MobileSideMenu profilePic={avatar1} users={[
{
name: 'کوروش زراندوز',
title: 'پایه ششم'
},
{
name: 'کوروش زراندوز',
title: 'پادشاه کوروش توپیا'
},
]}
close={() => setMenuPopup(false)}
/>
<button className='flex items-center justify-center fixed z-40 top-10 left-3 text-xl font-bold text-red52 w-12 h-12 rounded-xl '
onClick={() => setMenuPopup(false)}
>X</button>
>
<img src={exitIcon} className="w-full"/>
</button>
</div>
</>
}

@ -0,0 +1,6 @@
<svg xmlns="http://www.w3.org/2000/svg" width="15.231" height="15.231" viewBox="0 0 15.231 15.231">
<g id="arrow-down" transform="translate(0)">
<path id="Vector" d="M8.2,0H.685A.683.683,0,0,0,.2,1.168L3.49,4.455a1.352,1.352,0,0,0,1.91,0L6.65,3.2,8.687,1.168A.687.687,0,0,0,8.2,0Z" transform="translate(3.174 5.191)" fill="#df1452"/>
<path id="Vector-2" data-name="Vector" d="M0,0H15.231V15.231H0Z" transform="translate(15.231 15.231) rotate(180)" fill="none" opacity="0"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 498 B

@ -0,0 +1,6 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M22 16.7399V4.66994C22 3.46994 21.02 2.57994 19.83 2.67994H19.77C17.67 2.85994 14.48 3.92994 12.7 5.04994L12.53 5.15994C12.24 5.33994 11.76 5.33994 11.47 5.15994L11.22 5.00994C9.44 3.89994 6.26 2.83994 4.16 2.66994C2.97 2.56994 2 3.46994 2 4.65994V16.7399C2 17.6999 2.78 18.5999 3.74 18.7199L4.03 18.7599C6.2 19.0499 9.55 20.1499 11.47 21.1999L11.51 21.2199C11.78 21.3699 12.21 21.3699 12.47 21.2199C14.39 20.1599 17.75 19.0499 19.93 18.7599L20.26 18.7199C21.22 18.5999 22 17.6999 22 16.7399Z" stroke="#df1452" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M12 5.48999V20.49" stroke="#df1452" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M7.75 8.48999H5.5" stroke="#df1452" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M8.5 11.49H5.5" stroke="#df1452" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>

After

Width:  |  Height:  |  Size: 1.0 KiB

@ -0,0 +1,6 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M22 16.7399V4.66994C22 3.46994 21.02 2.57994 19.83 2.67994H19.77C17.67 2.85994 14.48 3.92994 12.7 5.04994L12.53 5.15994C12.24 5.33994 11.76 5.33994 11.47 5.15994L11.22 5.00994C9.44 3.89994 6.26 2.83994 4.16 2.66994C2.97 2.56994 2 3.46994 2 4.65994V16.7399C2 17.6999 2.78 18.5999 3.74 18.7199L4.03 18.7599C6.2 19.0499 9.55 20.1499 11.47 21.1999L11.51 21.2199C11.78 21.3699 12.21 21.3699 12.47 21.2199C14.39 20.1599 17.75 19.0499 19.93 18.7599L20.26 18.7199C21.22 18.5999 22 17.6999 22 16.7399Z" stroke="#818181" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M12 5.48999V20.49" stroke="#818181" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M7.75 8.48999H5.5" stroke="#818181" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M8.5 11.49H5.5" stroke="#818181" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>

After

Width:  |  Height:  |  Size: 1.0 KiB

@ -0,0 +1,7 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M22 8.27V4.23C22 2.64 21.36 2 19.77 2H15.73C14.14 2 13.5 2.64 13.5 4.23V8.27C13.5 9.86 14.14 10.5 15.73 10.5H19.77C21.36 10.5 22 9.86 22 8.27Z" stroke="#df1452" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M10.5 8.52V3.98C10.5 2.57 9.86 2 8.27 2H4.23C2.64 2 2 2.57 2 3.98V8.51C2 9.93 2.64 10.49 4.23 10.49H8.27C9.86 10.5 10.5 9.93 10.5 8.52Z" stroke="#df1452" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M10.5 19.77V15.73C10.5 14.14 9.86 13.5 8.27 13.5H4.23C2.64 13.5 2 14.14 2 15.73V19.77C2 21.36 2.64 22 4.23 22H8.27C9.86 22 10.5 21.36 10.5 19.77Z" stroke="#df1452" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M15 15.5H21" stroke="#df1452" stroke-width="1.5" stroke-linecap="round"/>
<path d="M15 19.5H21" stroke="#df1452" stroke-width="1.5" stroke-linecap="round"/>
</svg>

After

Width:  |  Height:  |  Size: 979 B

@ -0,0 +1,7 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M22 8.27V4.23C22 2.64 21.36 2 19.77 2H15.73C14.14 2 13.5 2.64 13.5 4.23V8.27C13.5 9.86 14.14 10.5 15.73 10.5H19.77C21.36 10.5 22 9.86 22 8.27Z" stroke="#818181" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M10.5 8.52V3.98C10.5 2.57 9.86 2 8.27 2H4.23C2.64 2 2 2.57 2 3.98V8.51C2 9.93 2.64 10.49 4.23 10.49H8.27C9.86 10.5 10.5 9.93 10.5 8.52Z" stroke="#818181" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M10.5 19.77V15.73C10.5 14.14 9.86 13.5 8.27 13.5H4.23C2.64 13.5 2 14.14 2 15.73V19.77C2 21.36 2.64 22 4.23 22H8.27C9.86 22 10.5 21.36 10.5 19.77Z" stroke="#818181" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M15 15.5H21" stroke="#818181" stroke-width="1.5" stroke-linecap="round"/>
<path d="M15 19.5H21" stroke="#818181" stroke-width="1.5" stroke-linecap="round"/>
</svg>

After

Width:  |  Height:  |  Size: 979 B

@ -1,9 +1,128 @@
import React from "react";
import React, {useState} from "react";
import arrowIcon from './arrow-down.svg';
import { Link } from "react-router-dom";
import { useLocation } from "react-router-dom";
//assets
import profileIcon from './profile.svg'
import elementIcon from './element-equal.svg';
import taskIcon from './task-square.svg';
import bookIcon from './book-1.svg';
import smsIcon from './sms.svg';
import mapIcon from './map.svg';
import radarIcon from './radar-1.svg';
import exitIcon from './logout.svg';
const MobileSideMenu = () => {
//active Icons
import profileIconActive from './profile-active.svg'
import elementIconActive from './element-equal-active.svg';
import taskIconActive from './task-square-active.svg';
import bookIconActive from './book-1-active.svg';
import smsIconActive from './sms-active.svg';
import mapIconActive from './map-active.svg';
import radarIconActive from './radar-1-active.svg';
const MobileSideMenu = ({
profilePic,
users,
close
}) => {
const location = useLocation();
const [showUsers, setShowUsers] = useState(false);
const options = [
{
icon: profileIcon,
activeIcon: profileIconActive,
title: 'مشخصات',
link: '/'
},
{
icon: elementIcon,
activeIcon: elementIconActive,
title: 'انتخاب خدمات',
link: '/services'
},
{
icon: taskIcon,
activeIcon: taskIconActive,
title: 'آزمون های من',
link: ''
},
{
icon: bookIcon,
activeIcon: bookIconActive,
title: 'وبلاگ',
link: ''
},
{
icon: elementIcon,
activeIcon: elementIconActive,
title: 'خدمات من',
link: ''
},
{
icon: smsIcon,
activeIcon: smsIconActive,
title: 'پشتیبانی',
link: ''
},
{
icon: mapIcon,
activeIcon: mapIconActive,
title: 'اطلاعات تماس',
link: '/contact'
},
{
icon: radarIcon,
activeIcon: radarIconActive,
title: 'گزارش ایراد یا نقص فنی',
link: ''
},
{
icon: exitIcon,
activeIcon: exitIcon,
title: 'خروج',
link: ''
},
]
return (
<div className="flex flex-col w-2/3 h-screen top-0 right-0 fixed bg-white z-40">
<div className="flex flex-col w-4/5 h-screen top-0 rtl right-0 fixed bg-white z-40">
<div className="w-full mt-6 px-2 h-2/12 flex items-start justify-between">
<img src={profilePic} className="rounded-full border border-green-600 w-1/5" />
<div className="w-full flex flex-col pb-3 text-right mx-3">
<div className="w-full flex justify-between border-b border-gray-300 pb-3">
<div className="w-full">
<h1 className="text-red52 text-xl">{users[0].name}</h1>
<h3 className="text-gray-400">{users[0].title}</h3>
</div>
<img src={arrowIcon} className={`w-8 ${showUsers && 'transform rotate-180 duration-900 transition'}`} onClick={() => setShowUsers(!showUsers)}/>
</div>
{
showUsers && users.slice(1, 100).map((user) => (
<div className="w-full flex justify-between border-b border-gray-300 py-2">
<div className="w-full">
<h1 className="text-blue3A text-md">{user.name}</h1>
<h3 className="text-gray-400 text-xs">{user.title}</h3>
</div>
</div>
))
}
</div>
</div>
{
options.map((item) => (
<Link to={item.link}
onClick={() => close()}
className={`w-full py-1 flex items-center ${location.pathname == item.link ? 'border-r-4 border-red52 text-red52 font-bold' : 'text-grayAB '}`}
style={{background: location.pathname == item.link && 'linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(223,20,82,0.2) 100%)', borderRight: location.pathname == item.link && '8px solid #df1452'}}
>
<img src={location.pathname == item.link ? item.activeIcon : item.icon} className="w-1/6 p-2"/>
<p className="mr-3">{item.title}</p>
</Link>
))
}
</div>
)
}

@ -0,0 +1,5 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M8.90002 7.55999C9.21002 3.95999 11.06 2.48999 15.11 2.48999H15.24C19.71 2.48999 21.5 4.27999 21.5 8.74999V15.27C21.5 19.74 19.71 21.53 15.24 21.53H15.11C11.09 21.53 9.24002 20.08 8.91002 16.54" stroke="#818181" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M15 12H3.62" stroke="#818181" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M5.85 8.6499L2.5 11.9999L5.85 15.3499" stroke="#818181" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>

After

Width:  |  Height:  |  Size: 632 B

@ -0,0 +1,7 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M22 9.00002V15C22 17.5 21.5 19.25 20.38 20.38L14 14L21.73 6.27002C21.91 7.06002 22 7.96002 22 9.00002Z" stroke="#df1452" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M21.73 6.27L6.26999 21.73C3.25999 21.04 2 18.96 2 15V9C2 4 4 2 9 2H15C18.96 2 21.04 3.26 21.73 6.27Z" stroke="#df1452" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M20.38 20.38C19.25 21.5 17.5 22 15 22H9.00003C7.96003 22 7.06002 21.91 6.27002 21.73L14 14L20.38 20.38Z" stroke="#df1452" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M6.24002 7.97997C6.92002 5.04997 11.32 5.04997 12 7.97997C12.39 9.69997 11.31 11.16 10.36 12.06C9.67001 12.72 8.58003 12.72 7.88003 12.06C6.93003 11.16 5.84002 9.69997 6.24002 7.97997Z" stroke="#df1452" stroke-width="1.5"/>
<path d="M9.0946 8.69995H9.10359" stroke="#df1452" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>

After

Width:  |  Height:  |  Size: 1.0 KiB

@ -0,0 +1,7 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M22 9.00002V15C22 17.5 21.5 19.25 20.38 20.38L14 14L21.73 6.27002C21.91 7.06002 22 7.96002 22 9.00002Z" stroke="#818181" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M21.73 6.27L6.26999 21.73C3.25999 21.04 2 18.96 2 15V9C2 4 4 2 9 2H15C18.96 2 21.04 3.26 21.73 6.27Z" stroke="#818181" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M20.38 20.38C19.25 21.5 17.5 22 15 22H9.00003C7.96003 22 7.06002 21.91 6.27002 21.73L14 14L20.38 20.38Z" stroke="#818181" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M6.24002 7.97997C6.92002 5.04997 11.32 5.04997 12 7.97997C12.39 9.69997 11.31 11.16 10.36 12.06C9.67001 12.72 8.58003 12.72 7.88003 12.06C6.93003 11.16 5.84002 9.69997 6.24002 7.97997Z" stroke="#818181" stroke-width="1.5"/>
<path d="M9.0946 8.69995H9.10359" stroke="#818181" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>

After

Width:  |  Height:  |  Size: 1.0 KiB

@ -0,0 +1,4 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12.1601 10.87C12.0601 10.86 11.9401 10.86 11.8301 10.87C9.45006 10.79 7.56006 8.84 7.56006 6.44C7.56006 3.99 9.54006 2 12.0001 2C14.4501 2 16.4401 3.99 16.4401 6.44C16.4301 8.84 14.5401 10.79 12.1601 10.87Z" stroke="#df1452" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M7.15997 14.56C4.73997 16.18 4.73997 18.82 7.15997 20.43C9.90997 22.27 14.42 22.27 17.17 20.43C19.59 18.81 19.59 16.17 17.17 14.56C14.43 12.73 9.91997 12.73 7.15997 14.56Z" stroke="#df1452" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>

After

Width:  |  Height:  |  Size: 673 B

@ -0,0 +1,4 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12.1601 10.87C12.0601 10.86 11.9401 10.86 11.8301 10.87C9.45006 10.79 7.56006 8.84 7.56006 6.44C7.56006 3.99 9.54006 2 12.0001 2C14.4501 2 16.4401 3.99 16.4401 6.44C16.4301 8.84 14.5401 10.79 12.1601 10.87Z" stroke="#818181" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M7.15997 14.56C4.73997 16.18 4.73997 18.82 7.15997 20.43C9.90997 22.27 14.42 22.27 17.17 20.43C19.59 18.81 19.59 16.17 17.17 14.56C14.43 12.73 9.91997 12.73 7.15997 14.56Z" stroke="#818181" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>

After

Width:  |  Height:  |  Size: 673 B

@ -0,0 +1,7 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12 14C13.1046 14 14 13.1046 14 12C14 10.8954 13.1046 10 12 10C10.8954 10 10 10.8954 10 12C10 13.1046 10.8954 14 12 14Z" stroke="#df1452" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M20 18C21.26 16.33 22 14.25 22 12C22 9.75 21.26 7.67 20 6" stroke="#df1452" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M4 6C2.74 7.67 2 9.75 2 12C2 14.25 2.74 16.33 4 18" stroke="#df1452" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M16.8 15.6C17.55 14.6 18.0001 13.35 18.0001 12C18.0001 10.65 17.55 9.40002 16.8 8.40002" stroke="#df1452" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M7.20001 8.40002C6.45001 9.40002 6 10.65 6 12C6 13.35 6.45001 14.6 7.20001 15.6" stroke="#df1452" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>

After

Width:  |  Height:  |  Size: 975 B

@ -0,0 +1,7 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12 14C13.1046 14 14 13.1046 14 12C14 10.8954 13.1046 10 12 10C10.8954 10 10 10.8954 10 12C10 13.1046 10.8954 14 12 14Z" stroke="#818181" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M20 18C21.26 16.33 22 14.25 22 12C22 9.75 21.26 7.67 20 6" stroke="#818181" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M4 6C2.74 7.67 2 9.75 2 12C2 14.25 2.74 16.33 4 18" stroke="#818181" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M16.8 15.6C17.55 14.6 18.0001 13.35 18.0001 12C18.0001 10.65 17.55 9.40002 16.8 8.40002" stroke="#818181" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M7.20001 8.40002C6.45001 9.40002 6 10.65 6 12C6 13.35 6.45001 14.6 7.20001 15.6" stroke="#818181" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>

After

Width:  |  Height:  |  Size: 975 B

@ -0,0 +1,4 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M17 20.5H7C4 20.5 2 19 2 15.5V8.5C2 5 4 3.5 7 3.5H17C20 3.5 22 5 22 8.5V15.5C22 19 20 20.5 17 20.5Z" stroke="#df1452" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M17 9L13.87 11.5C12.84 12.32 11.15 12.32 10.12 11.5L7 9" stroke="#df1452" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
</svg>

After

Width:  |  Height:  |  Size: 495 B

@ -0,0 +1,4 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M17 20.5H7C4 20.5 2 19 2 15.5V8.5C2 5 4 3.5 7 3.5H17C20 3.5 22 5 22 8.5V15.5C22 19 20 20.5 17 20.5Z" stroke="#818181" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M17 9L13.87 11.5C12.84 12.32 11.15 12.32 10.12 11.5L7 9" stroke="#818181" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
</svg>

After

Width:  |  Height:  |  Size: 495 B

@ -0,0 +1,7 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12.37 8.87988H17.62" stroke="#df1452" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M6.38 8.87988L7.13 9.62988L9.38 7.37988" stroke="#df1452" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M12.37 15.8799H17.62" stroke="#df1452" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M6.38 15.8799L7.13 16.6299L9.38 14.3799" stroke="#df1452" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M9 22H15C20 22 22 20 22 15V9C22 4 20 2 15 2H9C4 2 2 4 2 9V15C2 20 4 22 9 22Z" stroke="#df1452" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>

After

Width:  |  Height:  |  Size: 777 B

@ -0,0 +1,7 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12.37 8.87988H17.62" stroke="#818181" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M6.38 8.87988L7.13 9.62988L9.38 7.37988" stroke="#818181" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M12.37 15.8799H17.62" stroke="#818181" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M6.38 15.8799L7.13 16.6299L9.38 14.3799" stroke="#818181" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M9 22H15C20 22 22 20 22 15V9C22 4 20 2 15 2H9C4 2 2 4 2 9V15C2 20 4 22 9 22Z" stroke="#818181" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>

After

Width:  |  Height:  |  Size: 777 B

@ -6,7 +6,7 @@ import { defineLordIconElement } from "lord-icon-element";
import logo from "../../assets/img/logo.png";
import img1 from "../../assets/img/Group 1440.svg";
import { Link } from "react-router-dom";
import { Link, useLocation } from "react-router-dom";
import MinimalNav from "./minimalNav";
// defineLordIconElement(loadAnimation);
@ -21,7 +21,7 @@ const Nav = ({
}) => {
const [type, setType] = useState('default');
const location2 = useLocation();
useEffect(() => {
if(location.includes('adminpanel')){
setType('minimal');
@ -100,7 +100,9 @@ useEffect(() => {
document.querySelector(".back-item-img").style.top = `${top}%`;
};
if (isMobile) {
return (
location2.pathname.includes('azmoon_list') ? null :
<div className="w-full flex fixed bg-white justify-center z-20 py-4 bottom-0">
<div className="flex w-11/12 bg-white justify-between rtl border border-red82OP rounded-xl">
{

@ -1,9 +1,10 @@
<svg id="empty-wallet" xmlns="http://www.w3.org/2000/svg" width="46.091" height="46.091" viewBox="0 0 46.091 46.091">
<g id="Group" transform="translate(4.801 3.929)">
<path id="Vector" d="M29.844,11.139a3.857,3.857,0,0,0-1.152,3.13A4.1,4.1,0,0,0,32.84,17.86h3.649v2.285a7.237,7.237,0,0,1-7.221,7.221H7.221A7.237,7.237,0,0,1,0,20.146V7.221A7.237,7.237,0,0,1,7.221,0H29.268a7.237,7.237,0,0,1,7.221,7.221V9.986H32.61A3.827,3.827,0,0,0,29.844,11.139Z" transform="translate(0 10.955)" fill="none" stroke="#c82b5b" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2"/>
<path id="Vector-2" data-name="Vector" d="M0,19.9V11.128A5.469,5.469,0,0,1,3.534,6L18.782.239a3.649,3.649,0,0,1,4.936,3.418v7.3" transform="translate(0 0)" fill="none" stroke="#c82b5b" strokeLinecap="round" strokeLinejoin="round" strokeWidth="50"/>
<svg id="wallet-3" xmlns="http://www.w3.org/2000/svg" width="30.507" height="30.507" viewBox="0 0 30.507 30.507">
<path id="Vector" d="M7.627,0H0" transform="translate(8.898 14.173)" fill="none" stroke="#c82b5b" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
<path id="Vector-2" data-name="Vector" d="M0,10.563V4.691A4.687,4.687,0,0,1,4.691,0h7.144c2.593,0,4.691,1.614,4.691,4.207" transform="translate(2.542 3.61)" fill="none" stroke="#c82b5b" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
<path id="Vector-3" data-name="Vector" d="M19.677,7.69a2.559,2.559,0,0,0-.686,2.517A2.759,2.759,0,0,0,21.7,12.139h1.182v1.843A5.083,5.083,0,0,1,17.8,19.067H5.085A5.083,5.083,0,0,1,0,13.983v-8.9A5.083,5.083,0,0,1,5.085,0H17.8a5.1,5.1,0,0,1,5.085,5.085V6.928H21.508A2.533,2.533,0,0,0,19.677,7.69Z" transform="translate(2.542 7.818)" fill="none" stroke="#c82b5b" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
<path id="Vector-4" data-name="Vector" d="M6.52,1.3V3.915a1.3,1.3,0,0,1-1.309,1.3H2.757A2.71,2.71,0,0,1,.012,2.835,2.553,2.553,0,0,1,.774.763,2.533,2.533,0,0,1,2.6,0H5.211A1.3,1.3,0,0,1,6.52,1.3Z" transform="translate(21.445 14.745)" fill="none" stroke="#c82b5b" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
<g id="Vector-5" data-name="Vector" transform="translate(30.507 30.507) rotate(180)" fill="none" opacity="0">
<path d="M0,0H30.507V30.507H0Z" stroke="none"/>
<path d="M 1.000003814697266 0.9999942779541016 L 1.000003814697266 29.50746536254883 L 29.50744247436523 29.50746536254883 L 29.50744247436523 0.9999942779541016 L 1.000003814697266 0.9999942779541016 M 3.814697265625e-06 -5.7220458984375e-06 L 30.50744247436523 -5.7220458984375e-06 L 30.50744247436523 30.50746536254883 L 3.814697265625e-06 30.50746536254883 L 3.814697265625e-06 -5.7220458984375e-06 Z" stroke="none" fill="#c82b5b"/>
</g>
<path id="Vector-3" data-name="Vector" d="M9.85,1.959V5.915A1.972,1.972,0,0,1,7.93,7.874H4.166A4.1,4.1,0,0,1,.018,4.283,3.857,3.857,0,0,1,1.17,1.152,3.827,3.827,0,0,1,3.935,0H7.93A1.972,1.972,0,0,1,9.85,1.959Z" transform="translate(33.473 24.87)" fill="none" stroke="#c82b5b" strokeLinecap="round" strokeLinejoin="round" strokeWidth="50"/>
<path id="Vector-4" data-name="Vector" d="M0,0H13.443" transform="translate(13.443 23.046)" fill="none" stroke="#c82b5b" strokeLinecap="round" strokeLinejoin="round" strokeWidth="50"/>
<path id="Vector-5" data-name="Vector" d="M0,0H46.091V46.091H0Z" fill="none" opacity="0"/>
</svg>

Before

Width:  |  Height:  |  Size: 1.4 KiB

After

Width:  |  Height:  |  Size: 1.9 KiB

@ -1,4 +1,7 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M9.02 2.84004L3.63 7.04004C2.73 7.74004 2 9.23004 2 10.36V17.77C2 20.09 3.89 21.99 6.21 21.99H17.79C20.11 21.99 22 20.09 22 17.78V10.5C22 9.29004 21.19 7.74004 20.2 7.05004L14.02 2.72004C12.62 1.74004 10.37 1.79004 9.02 2.84004Z" stroke="#c82b5b" strokeWidth="5" strokeLinecap="round" strokeLinejoin="round"/>
<path d="M12 17.99V14.99" stroke="#c82b5b" strokeWidth="5" strokeLinecap="round" strokeLinejoin="round"/>
<svg id="vuesax_bulk_home-2" data-name="vuesax/bulk/home-2" xmlns="http://www.w3.org/2000/svg" width="33" height="33" viewBox="0 0 33 33">
<g id="home-2">
<path id="Vector" d="M24.819,6.624,16.9,1.083a6.672,6.672,0,0,0-7.549.179L2.461,6.638A7.085,7.085,0,0,0,0,11.643v9.487A6.367,6.367,0,0,0,6.352,27.5H21.175a6.355,6.355,0,0,0,6.353-6.352V11.822A7.017,7.017,0,0,0,24.819,6.624Z" transform="translate(2.736 2.753)" fill="#c82b5b"/>
<path id="Vector-2" data-name="Vector" d="M1.031,6.188A1.039,1.039,0,0,1,0,5.156V1.031A1.039,1.039,0,0,1,1.031,0,1.039,1.039,0,0,1,2.063,1.031V5.156A1.039,1.039,0,0,1,1.031,6.188Z" transform="translate(15.469 19.594)" fill="#e2eafc"/>
<path id="Vector-3" data-name="Vector" d="M0,0H33V33H0Z" fill="none" opacity="0"/>
</g>
</svg>

Before

Width:  |  Height:  |  Size: 528 B

After

Width:  |  Height:  |  Size: 785 B

@ -1,4 +1,10 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12.1601 10.87C12.0601 10.86 11.9401 10.86 11.8301 10.87C9.45006 10.79 7.56006 8.84 7.56006 6.44C7.56006 3.99 9.54006 2 12.0001 2C14.4501 2 16.4401 3.99 16.4401 6.44C16.4301 8.84 14.5401 10.79 12.1601 10.87Z" stroke="#c82b5b" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
<path d="M7.15997 14.56C4.73997 16.18 4.73997 18.82 7.15997 20.43C9.90997 22.27 14.42 22.27 17.17 20.43C19.59 18.81 19.59 16.17 17.17 14.56C14.43 12.73 9.91997 12.73 7.15997 14.56Z" stroke="#c82b5b" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
<svg id="vuesax_linear_profile" data-name="vuesax/linear/profile" xmlns="http://www.w3.org/2000/svg" width="31.174" height="31.174" viewBox="0 0 31.174 31.174">
<g id="profile" transform="translate(0 0)">
<path id="Vector" d="M5.975,11.521a2.361,2.361,0,0,0-.429,0,5.774,5.774,0,1,1,.429,0Z" transform="translate(9.82 2.598)" fill="none" stroke="#c82b5b" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
<path id="Vector-2" data-name="Vector" d="M2.358,1.783c-3.143,2.1-3.143,5.533,0,7.625a12.685,12.685,0,0,0,13,0c3.143-2.1,3.143-5.533,0-7.625A12.745,12.745,0,0,0,2.358,1.783Z" transform="translate(6.943 17.13)" fill="none" stroke="#c82b5b" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
<g id="Vector-3" data-name="Vector" transform="translate(31.174 31.174) rotate(180)" fill="none" opacity="0">
<path d="M0,0H31.174V31.174H0Z" stroke="none"/>
<path d="M 0.9999980926513672 1 L 0.9999980926513672 30.17421913146973 L 30.17419815063477 30.17421913146973 L 30.17419815063477 1 L 0.9999980926513672 1 M -1.9073486328125e-06 0 L 31.17419624328613 0 L 31.17419624328613 31.17421913146973 L -1.9073486328125e-06 31.17421913146973 L -1.9073486328125e-06 0 Z" stroke="none" fill="#c82b5b"/>
</g>
</g>
</svg>

Before

Width:  |  Height:  |  Size: 667 B

After

Width:  |  Height:  |  Size: 1.3 KiB

@ -1,24 +1,12 @@
<svg id="vuesax_bold_element-4-2" data-name="vuesax/bold/element-4-2" xmlns="http://www.w3.org/2000/svg" width="46.091" height="46.091" viewBox="0 0 46.091 46.091">
<g id="element-4">
<g id="Vector" transform="translate(24.966 3.841)" fill="none">
<path d="M16.324,17.092V4.033C16.324,1.152,15.095,0,12.041,0H4.283C1.229,0,0,1.152,0,4.033V17.092c0,2.881,1.229,4.033,4.283,4.033h7.759C15.095,21.125,16.324,19.973,16.324,17.092Z" stroke="none"/>
<path d="M 12.04132080078125 19.1251220703125 C 13.39364051818848 19.1251220703125 13.83173084259033 18.85034370422363 13.95730018615723 18.73219299316406 C 14.19375038146973 18.50976371765137 14.32396030426025 17.92731285095215 14.32396030426025 17.09214210510254 L 14.32396030426025 4.03298282623291 C 14.32396030426025 3.197813034057617 14.19375038146973 2.615362882614136 13.95730018615723 2.392932891845703 C 13.83173084259033 2.27478289604187 13.39364051818848 2.000002861022949 12.04132080078125 2.000002861022949 L 4.28264045715332 2.000002861022949 C 2.930320739746094 2.000002861022949 2.492230653762817 2.27478289604187 2.366660594940186 2.392932891845703 C 2.130210638046265 2.615362882614136 2.000000715255737 3.197813034057617 2.000000715255737 4.03298282623291 L 2.000000715255737 17.09214210510254 C 2.000000715255737 17.92731285095215 2.130210638046265 18.50976371765137 2.366660594940186 18.73219299316406 C 2.492230653762817 18.85034370422363 2.930320739746094 19.1251220703125 4.28264045715332 19.1251220703125 L 12.04132080078125 19.1251220703125 M 12.04132080078125 21.1251220703125 L 4.28264045715332 21.1251220703125 C 1.229100584983826 21.1251220703125 6.289673137871432e-07 19.97284317016602 6.289673137871432e-07 17.09214210510254 L 6.289673137871432e-07 4.03298282623291 C 6.289673137871432e-07 1.152282953262329 1.229100584983826 2.942504806924262e-06 4.28264045715332 2.942504806924262e-06 L 12.04132080078125 2.942504806924262e-06 C 15.09486103057861 2.942504806924262e-06 16.32396125793457 1.152282953262329 16.32396125793457 4.03298282623291 L 16.32396125793457 17.09214210510254 C 16.32396125793457 19.97284317016602 15.09486103057861 21.1251220703125 12.04132080078125 21.1251220703125 Z" stroke="none" fill="#c82b5b"/>
</g>
<g id="Vector-2" data-name="Vector" transform="translate(4.801 21.125)" fill="none">
<path d="M16.324,4.033V17.092c0,2.881-1.229,4.033-4.283,4.033H4.283C1.229,21.125,0,19.973,0,17.092V4.033C0,1.152,1.229,0,4.283,0h7.759C15.095,0,16.324,1.152,16.324,4.033Z" stroke="none"/>
<path d="M 4.28264045715332 2.000003814697266 C 2.930320739746094 2.000003814697266 2.492230415344238 2.274782180786133 2.366661071777344 2.392932891845703 C 2.130210876464844 2.615362167358398 2.000000953674316 3.197813034057617 2.000000953674316 4.032983779907227 L 2.000000953674316 17.09214401245117 C 2.000000953674316 17.92731285095215 2.130210876464844 18.50976371765137 2.366661071777344 18.73219299316406 C 2.492230415344238 18.85034370422363 2.930320739746094 19.1251220703125 4.28264045715332 19.1251220703125 L 12.04132080078125 19.1251220703125 C 13.39364051818848 19.1251220703125 13.83173084259033 18.85034370422363 13.95730018615723 18.73219299316406 C 14.19375038146973 18.50976371765137 14.32396030426025 17.92731285095215 14.32396030426025 17.09214401245117 L 14.32396030426025 4.032983779907227 C 14.32396030426025 3.197813034057617 14.19375038146973 2.615362167358398 13.95730018615723 2.392932891845703 C 13.83173084259033 2.274782180786133 13.39364051818848 2.000003814697266 12.04132080078125 2.000003814697266 L 4.28264045715332 2.000003814697266 M 4.28264045715332 3.814697265625e-06 L 12.04132080078125 3.814697265625e-06 C 15.09486103057861 3.814697265625e-06 16.32396125793457 1.15228271484375 16.32396125793457 4.032983779907227 L 16.32396125793457 17.09214401245117 C 16.32396125793457 19.97284317016602 15.09486103057861 21.1251220703125 12.04132080078125 21.1251220703125 L 4.28264045715332 21.1251220703125 C 1.229100227355957 21.1251220703125 0 19.97284317016602 0 17.09214401245117 L 0 4.032983779907227 C 0 1.15228271484375 1.229100227355957 3.814697265625e-06 4.28264045715332 3.814697265625e-06 Z" stroke="none" fill="#c82b5b"/>
</g>
<g id="Vector-3" data-name="Vector" transform="translate(46.091 46.091) rotate(180)" fill="none" opacity="0">
<path d="M0,0H46.091V46.091H0Z" stroke="none"/>
<path d="M 2 2 L 2 44.09118270874023 L 44.09118270874023 44.09118270874023 L 44.09118270874023 2 L 2 2 M 0 0 L 46.09118270874023 0 L 46.09118270874023 46.09118270874023 L 0 46.09118270874023 L 0 0 Z" stroke="none" fill="#c82b5b"/>
</g>
<g id="Vector-4" data-name="Vector" transform="translate(24.966 28.807)" fill="none">
<path d="M16.324,9.41V4.033C16.324,1.152,15.095,0,12.041,0H4.283C1.229,0,0,1.152,0,4.033V9.41c0,2.881,1.229,4.033,4.283,4.033h7.759C15.095,13.443,16.324,12.291,16.324,9.41Z" stroke="none"/>
<path d="M 12.04132080078125 11.44326114654541 C 13.39364051818848 11.44326114654541 13.83173084259033 11.16848087310791 13.95730018615723 11.05033111572266 C 14.19375038146973 10.82790088653564 14.32396030426025 10.24545097351074 14.32396030426025 9.410281181335449 L 14.32396030426025 4.032980918884277 C 14.32396030426025 3.197811126708984 14.19375038146973 2.615360975265503 13.95730018615723 2.39293098449707 C 13.83173084259033 2.274780988693237 13.39364051818848 2.000000953674316 12.04132080078125 2.000000953674316 L 4.28264045715332 2.000000953674316 C 2.930320739746094 2.000000953674316 2.492230653762817 2.274780988693237 2.366660594940186 2.39293098449707 C 2.130210638046265 2.615360975265503 2.000000715255737 3.197811126708984 2.000000715255737 4.032980918884277 L 2.000000715255737 9.410281181335449 C 2.000000715255737 10.24545097351074 2.130210638046265 10.82790088653564 2.366660594940186 11.05033111572266 C 2.492230653762817 11.16848087310791 2.930320739746094 11.44326114654541 4.28264045715332 11.44326114654541 L 12.04132080078125 11.44326114654541 M 12.04132080078125 13.44326114654541 L 4.28264045715332 13.44326114654541 C 1.229100584983826 13.44326114654541 6.289673137871432e-07 12.29098129272461 6.289673137871432e-07 9.410281181335449 L 6.289673137871432e-07 4.032980918884277 C 6.289673137871432e-07 1.152281045913696 1.229100584983826 1.050109858624637e-06 4.28264045715332 1.050109858624637e-06 L 12.04132080078125 1.050109858624637e-06 C 15.09486103057861 1.050109858624637e-06 16.32396125793457 1.152281045913696 16.32396125793457 4.032980918884277 L 16.32396125793457 9.410281181335449 C 16.32396125793457 12.29098129272461 15.09486103057861 13.44326114654541 12.04132080078125 13.44326114654541 Z" stroke="none" fill="#c82b5b"/>
</g>
<g id="Vector-5" data-name="Vector" transform="translate(4.801 3.841)" fill="none">
<path d="M16.324,9.41V4.033C16.324,1.152,15.095,0,12.041,0H4.283C1.229,0,0,1.152,0,4.033V9.41c0,2.881,1.229,4.033,4.283,4.033h7.759C15.095,13.443,16.324,12.291,16.324,9.41Z" stroke="none"/>
<path d="M 12.04132080078125 11.44326114654541 C 13.39364051818848 11.44326114654541 13.83173084259033 11.16848087310791 13.95730018615723 11.05033111572266 C 14.19375038146973 10.82790088653564 14.32396030426025 10.24545097351074 14.32396030426025 9.410281181335449 L 14.32396030426025 4.032980918884277 C 14.32396030426025 3.197811126708984 14.19375038146973 2.615360975265503 13.95730018615723 2.39293098449707 C 13.83173084259033 2.274780988693237 13.39364051818848 2.000000953674316 12.04132080078125 2.000000953674316 L 4.28264045715332 2.000000953674316 C 2.930320739746094 2.000000953674316 2.492230653762817 2.274780988693237 2.366660594940186 2.39293098449707 C 2.130210638046265 2.615360975265503 2.000000715255737 3.197811126708984 2.000000715255737 4.032980918884277 L 2.000000715255737 9.410281181335449 C 2.000000715255737 10.24545097351074 2.130210638046265 10.82790088653564 2.366660594940186 11.05033111572266 C 2.492230653762817 11.16848087310791 2.930320739746094 11.44326114654541 4.28264045715332 11.44326114654541 L 12.04132080078125 11.44326114654541 M 12.04132080078125 13.44326114654541 L 4.28264045715332 13.44326114654541 C 1.229100584983826 13.44326114654541 6.289673137871432e-07 12.29098129272461 6.289673137871432e-07 9.410281181335449 L 6.289673137871432e-07 4.032980918884277 C 6.289673137871432e-07 1.152281045913696 1.229100584983826 1.050109858624637e-06 4.28264045715332 1.050109858624637e-06 L 12.04132080078125 1.050109858624637e-06 C 15.09486103057861 1.050109858624637e-06 16.32396125793457 1.152281045913696 16.32396125793457 4.032980918884277 L 16.32396125793457 9.410281181335449 C 16.32396125793457 12.29098129272461 15.09486103057861 13.44326114654541 12.04132080078125 13.44326114654541 Z" stroke="none" fill="#c82b5b"/>
<svg id="vuesax_linear_element-3" data-name="vuesax/linear/element-3" xmlns="http://www.w3.org/2000/svg" width="30.507" height="30.507" viewBox="0 0 30.507 30.507">
<g id="element-3" transform="translate(0)">
<path id="Vector" d="M10.8,8.288V2.517C10.8.725,9.991,0,7.97,0H2.835C.814,0,0,.725,0,2.517V8.275c0,1.805.814,2.517,2.835,2.517H7.97C9.991,10.8,10.8,10.08,10.8,8.288Z" transform="translate(17.16 2.542)" fill="none" stroke="#c82b5b" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
<path id="Vector-2" data-name="Vector" d="M10.8,7.97V2.835C10.8.814,9.991,0,7.97,0H2.835C.814,0,0,.814,0,2.835V7.97C0,9.991.814,10.8,2.835,10.8H7.97C9.991,10.8,10.8,9.991,10.8,7.97Z" transform="translate(17.16 17.16)" fill="none" stroke="#c82b5b" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
<path id="Vector-3" data-name="Vector" d="M10.8,8.288V2.517C10.8.725,9.991,0,7.97,0H2.835C.814,0,0,.725,0,2.517V8.275c0,1.805.814,2.517,2.835,2.517H7.97C9.991,10.8,10.8,10.08,10.8,8.288Z" transform="translate(2.542 2.542)" fill="none" stroke="#c82b5b" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
<path id="Vector-4" data-name="Vector" d="M10.8,7.97V2.835C10.8.814,9.991,0,7.97,0H2.835C.814,0,0,.814,0,2.835V7.97C0,9.991.814,10.8,2.835,10.8H7.97C9.991,10.8,10.8,9.991,10.8,7.97Z" transform="translate(2.542 17.16)" fill="none" stroke="#c82b5b" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
<g id="Vector-5" data-name="Vector" fill="none" opacity="0">
<path d="M0,0H30.507V30.507H0Z" stroke="none"/>
<path d="M 1.000003814697266 0.9999942779541016 L 1.000003814697266 29.50746536254883 L 29.50744247436523 29.50746536254883 L 29.50744247436523 0.9999942779541016 L 1.000003814697266 0.9999942779541016 M 3.814697265625e-06 -5.7220458984375e-06 L 30.50744247436523 -5.7220458984375e-06 L 30.50744247436523 30.50746536254883 L 3.814697265625e-06 30.50746536254883 L 3.814697265625e-06 -5.7220458984375e-06 Z" stroke="none" fill="#c82b5b"/>
</g>
</g>
</svg>

Before

Width:  |  Height:  |  Size: 8.6 KiB

After

Width:  |  Height:  |  Size: 2.0 KiB

@ -1,8 +1,13 @@
<svg id="vuesax_linear_logout" data-name="vuesax/linear/logout" xmlns="http://www.w3.org/2000/svg" width="46.091" height="46.091" viewBox="0 0 46.091 46.091">
<g id="logout">
<path id="Vector" d="M0,9.737C.6,2.823,4.148,0,11.926,0h.25C20.76,0,24.2,3.438,24.2,12.022V24.544c0,8.585-3.438,12.022-12.022,12.022h-.25c-7.72,0-11.273-2.785-11.907-9.583" transform="translate(17.092 4.782)" fill="none" stroke="#c82b5b" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2.5"/>
<path id="Vector-2" data-name="Vector" d="M21.855,0H0" transform="translate(6.952 23.046)" fill="none" stroke="#c82b5b" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2.5"/>
<path id="Vector-3" data-name="Vector" d="M6.434,0,0,6.434l6.434,6.434" transform="translate(4.801 16.612)" fill="none" stroke="#c82b5b" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2.5"/>
<path id="Vector-4" data-name="Vector" d="M0,0H46.091V46.091H0Z" transform="translate(46.091 46.091) rotate(180)" fill="none" opacity="0"/>
<svg xmlns="http://www.w3.org/2000/svg" width="31.174" height="31.174" viewBox="0 0 31.174 31.174">
<g id="vuesax_linear_logout" data-name="vuesax/linear/logout" transform="translate(0)">
<g id="logout" transform="translate(0)">
<path id="Vector" d="M0,6.586C.4,1.909,2.806,0,8.066,0h.169c5.806,0,8.131,2.325,8.131,8.131V16.6c0,5.806-2.325,8.131-8.131,8.131H8.066c-5.222,0-7.625-1.883-8.053-6.482" transform="translate(11.56 3.234)" fill="none" stroke="#c82b5b" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
<path id="Vector-2" data-name="Vector" d="M14.782,0H0" transform="translate(4.702 15.587)" fill="none" stroke="#c82b5b" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
<path id="Vector-3" data-name="Vector" d="M4.351,0,0,4.351,4.351,8.7" transform="translate(3.247 11.236)" fill="none" stroke="#c82b5b" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
<g id="Vector-4" data-name="Vector" transform="translate(31.174 31.174) rotate(180)" fill="none" opacity="0">
<path d="M0,0H31.174V31.174H0Z" stroke="none"/>
<path d="M 1.000003814697266 0.9999980926513672 L 1.000003814697266 30.17419815063477 L 30.17416381835938 30.17419815063477 L 30.17416381835938 0.9999980926513672 L 1.000003814697266 0.9999980926513672 M 3.814697265625e-06 -1.9073486328125e-06 L 31.17416381835938 -1.9073486328125e-06 L 31.17416381835938 31.17419624328613 L 3.814697265625e-06 31.17419624328613 L 3.814697265625e-06 -1.9073486328125e-06 Z" stroke="none" fill="#c82b5b"/>
</g>
</g>
</g>
</svg>

Before

Width:  |  Height:  |  Size: 1.0 KiB

After

Width:  |  Height:  |  Size: 1.6 KiB

@ -22,29 +22,9 @@
--font3:IRANSansXFaNum-Regular;
} */
.enter-exam{
width: 98vw;
position: absolute;
top: 0;
left: 0;
display: flex;
align-items: center;
justify-content: center;
/* background-image: url(../../../assets/azmoon-list/Group895.png); */
background-size: 100% 100%;
}
.enter-exam-box{
/* width: 466px; */
/* height: 662px; */
height: 70vh;
aspect-ratio: 0.7/1;
margin-top: 110px;
padding: 25px;
border: 2px solid #EBEBEB;
border-radius: 8px;
background-color: white;
}
.eeb-title-box{
width: 100%;
@ -199,3 +179,44 @@
.eeb-timer div {
margin-left: 5px;
}
@media only screen and (max-width: 800px) {
.enter-exam-box{
height: auto;
aspect-ratio: 0.7/1;
margin-top: 50px;
padding: 25px;
border: 0px solid #EBEBEB;
border-radius: 8px;
background-color: white;
margin-bottom: 200px;
}
}
@media only screen and (min-width: 800px) {
.enter-exam{
width: 98vw;
position: absolute;
top: 0;
left: 0;
display: flex;
align-items: center;
justify-content: center;
/* background-image: url(../../../assets/azmoon-list/Group895.png); */
background-size: 100% 100%;
}
.enter-exam-box{
/* width: 466px; */
/* height: 662px; */
height: 70vh;
aspect-ratio: 0.7/1;
margin-top: 110px;
padding: 25px;
border: 2px solid #EBEBEB;
border-radius: 8px;
background-color: white;
}
}

@ -12,216 +12,12 @@ import icon6 from "../../../../assets/azmoon-list/people.png";
import icon7 from "../../../../assets/azmoon-list/profile-2user.png";
import icon8 from "../../../../assets/azmoon-list/message-text-2.png";
import avatar from "../../../../assets/azmoon-list/tushar-khandagale-dvtAuBHBAVQ-unsplash.jpg";
// import img1 from '../../assets/store/amazing-suggest/ella-olsson-KPDbRyFOTnE-unsplash.jpg';
// import img2 from '../../assets/store/amazing-suggest/antoine-dautry-_zsL306fDck-unsplash.jpg';
// import img3 from '../../assets/store/amazing-suggest/ahmed-almakhzanji-kshkB1i5_5o-unsplash.jpg';
import { Link } from "react-router-dom";
import moment from "jalali-moment";
import { useEffect } from "react";
import { state } from "../../../../components/exam/Carousel/state";
// let common_data = [
// {
// id:1,
// img:img1,
// title:"آزمون آشپزی شرق آسیا",
// // price:458.200,
// price:"450.200",
// discounted_price:"405.000",
// discount:"10%",
// date:"28 آبان 1400",
// level:"پایه 1 الی 12",
// type:"گروهی",
// filter: "discounted",
// exam_filter:"none",
// user_num:100,
// max_user:130,
// time:"9:30",
// negetive_point:"دارد",
// question_type:"تشریحی و تستی",
// guide_file:"دارد",
// guide_file_link:"#",
// creator:{
// avatar:avatar,
// name:"موسسه فرهنگی مصباح نور"
// },
// },
// {
// id:2,
// img:img3,
// title:"آزمون زیست شناسی دهم",
// // price:458.200,
// price:"350.000",
// discounted_price:"305.000",
// discount:"10%",
// date:"28 آبان 1400",
// level:"کارشناسی",
// type:"گروهی",
// filter: "discounted",
// exam_filter:"live",
// user_num:100,
// max_user:130,
// time:"12:30",
// negetive_point:"دارد",
// question_type:"تشریحی و تستی",
// guide_file:"دارد",
// guide_file_link:"#",
// creator:{
// avatar:avatar,
// name:"موسسه فرهنگی مصباح نور"
// },
// },
// {
// id:3,
// img:img1,
// title:"آزمون آشپزی شرق آسیا",
// // price:458.200,
// price:"350.200",
// discounted_price:"305.000",
// discount:"10%",
// date:"28 آبان 1400",
// level:"پایه 1 الی 12",
// type:"گروهی",
// filter: "discounted",
// exam_filter:"none",
// user_num:100,
// max_user:130,
// time:"12:30",
// negetive_point:"دارد",
// question_type:"تشریحی و تستی",
// guide_file:"دارد",
// guide_file_link:"#",
// creator:{
// avatar:avatar,
// name:"موسسه فرهنگی مصباح نور"
// },
// },
// {
// id:4,
// img:img3,
// title:"آزمون روان درمانی اگزیستانسیال",
// // price:458.200,
// price:"458.200",
// discounted_price:"",
// discount:"",
// date:"28 آبان 1400",
// level:"پایه 1 الی 12",
// type:"گروهی",
// filter: "none",
// exam_filter:"collegiate",
// user_num:100,
// max_user:130,
// time:"10:30",
// negetive_point:"دارد",
// question_type:"تشریحی و تستی",
// guide_file:"دارد",
// guide_file_link:"#",
// creator:{
// avatar:avatar,
// name:"موسسه فرهنگی مصباح نور"
// },
// },
// {
// id:5,
// img:img2,
// title:"آزمون آشپزی شرق آسیا",
// // price:458.200,
// price:"458.200",
// discounted_price:"",
// discount:"",
// date:"28 آبان 1400",
// level:"پایه 1 الی 12",
// type:"گروهی",
// filter: "none",
// exam_filter:"collegiate",
// user_num:90,
// max_user:100,
// time:"11:30",
// negetive_point:"دارد",
// question_type:"تشریحی و تستی",
// guide_file:"دارد",
// guide_file_link:"#",
// creator:{
// avatar:avatar,
// name:"موسسه فرهنگی مصباح نور"
// },
// },
// {
// id:6,
// img:img1,
// title:"آزمون آشپزی شرق آسیا",
// // price:458.200,
// price:"458.200",
// discounted_price:"",
// discount:"",
// date:"28 آبان 1400",
// level:"پایه 1 الی 12",
// type:"گروهی",
// filter: "none",
// exam_filter:"none",
// user_num:100,
// max_user:120,
// time:"12:30",
// negetive_point:"دارد",
// question_type:"تشریحی و تستی",
// guide_file:"دارد",
// guide_file_link:"#",
// creator:{
// avatar:avatar,
// name:"موسسه فرهنگی مصباح نور"
// },
// },
// {
// id:7,
// img:img1,
// title:"آزمون آشپزی شرق آسیا",
// // price:458.200,
// price:"350.000",
// discounted_price:"",
// discount:"",
// date:"28 آبان 1400",
// level:"پایه 1 الی 12",
// type:"گروهی",
// filter: "none",
// exam_filter:"collegiate",
// user_num:100,
// max_user:130,
// time:"12:30",
// negetive_point:"دارد",
// question_type:"تشریحی و تستی",
// guide_file:"دارد",
// guide_file_link:"#",
// creator:{
// avatar:avatar,
// name:"موسسه فرهنگی مصباح نور"
// },
// },
// {
// id:8,
// img:img2,
// title:"آزمون آشپزی شرق آسیا",
// // price:458.200,
// price:"458.200",
// discounted_price:"رایگان",
// discount:"100%",
// date:"28 آبان 1400",
// level:"پایه 1 الی 12",
// type:"گروهی",
// filter: "free",
// exam_filter:"none",
// user_num:100,
// max_user:130,
// time:"12:30",
// negetive_point:"دارد",
// question_type:"تشریحی و تستی",
// guide_file:"دارد",
// guide_file_link:"#",
// creator:{
// avatar:avatar,
// name:"موسسه فرهنگی مصباح نور"
// },
// }
// ]
const EnterExam = ({ ID }) => {
// const state = useSelector((state) => state.default);

@ -1,14 +1,14 @@
import EnterExam from "./desktop";
import { useParams } from "react-router-dom";
// import MobileEnterExam from "../../component/mobile/azmoon-list/M_EnterExam";
import MobileEnterExam from "./mobile";
const ENTER_EXAM = () => {
const { id } = useParams();
return (
<div className="ENTER_EXAM">
{window.innerWidth > 1000 && <EnterExam ID={id} />}
{/* {window.innerWidth < 1000 && <MobileEnterExam ID={id} />} */}
{window.innerWidth < 1000 && <MobileEnterExam ID={id} />}
</div>
);
};

@ -0,0 +1,194 @@
import "../desktop/index.js";
import { useSelector } from "react-redux";
import { useState } from "react";
import img0 from "../../../../assets/azmoon-list/test.png";
import icon1 from "../../../../assets/azmoon-list/stickynote.png";
import icon2 from "../../../../assets/azmoon-list/teacher.png";
import icon3 from "../../../../assets/azmoon-list/clock.png";
import icon4 from "../../../../assets/azmoon-list/message-minus.png";
import icon5 from "../../../../assets/azmoon-list/Group893.png";
import icon6 from "../../../../assets/azmoon-list/people.png";
import icon7 from "../../../../assets/azmoon-list/profile-2user.png";
import icon8 from "../../../../assets/azmoon-list/message-text-2.png";
import avatar from "../../../../assets/azmoon-list/tushar-khandagale-dvtAuBHBAVQ-unsplash.jpg";
import { Link } from "react-router-dom";
import moment from "jalali-moment";
import { useEffect } from "react";
import { state } from "../../../../components/exam/Carousel/state";
const MobileEnterExam = ({ ID }) => {
// const state = useSelector((state) => state.default);
const [common_data] = useState(state);
console.log(common_data);
let data;
for (let i = 0; i < common_data.length; i++) {
if (common_data[i].id === Number(ID)) {
data = common_data[i];
}
}
console.log("cc:"+data);
//--today date--and timer setting-----------------------------
let today = new Date();
let examDate = new Date(data.date)
console.log(today);
console.log(examDate);
let diff = (examDate-today)/1000;
let d = Math.floor(diff/86400);
console.log(d);
let h = Math.floor((diff-(86400*d))/3600);
console.log(h);
let m = Math.floor((diff-(86400*d)-(h*3600))/60);
console.log(m);
let s = Math.floor(diff-(86400*d)-(h*3600)-(m*60));
console.log(s);
const [timer,setTimer]=useState({
d,h,m,s
})
useEffect(() => {
// console.log(sec);
if (timer.s >= 0 && diff > 0) {
setTimeout(() => {
// console.log("okdkdokodkd");
setTimer({
d,
h,
m,
s:s-1
});
if (timer.s === 0) {
setTimer({
d,
h,
m:m-1,
s:59
});
}
if (timer.m === 0) {
setTimer({
d,
h:h-1,
m:59,
s:59
});
}
if (timer.h === 0) {
setTimer({
d:d-1,
h:23,
m:59,
s:59
});
}
}, 1000);
}
});
//-------------------------------------------
moment.locale("en");
return (
<div className="enter-exam">
<div className="enter-exam-box">
<div className="eeb-title-box">
<img className="eeb-title-box-img" src={img0} alt="title-box-img" />
<div className="eeb-title-box-title">به {data?.name}</div>
<div className="eeb-title-box-subtitle">خوش آمدید</div>
</div>
<div className="eeb-name-box">
<img className="eeb-name-box-icon" src={icon1} alt="name-icon" />
<div className="eeb-name-box-label">نام آزمون:</div>
<div className="eeb-name-box-name">{data?.name.substr(6)}</div>
</div>
<div className="eeb-level-box">
<img className="eeb-level-box-icon" src={icon2} alt="name-icon" />
<div className="eeb-level-box-label">پایه تحصیلی:</div>
<div className="eeb-level-box-level">{data?.level}</div>
</div>
<div className="eeb-date-box">
<img className="eeb-date-box-icon" src={icon3} alt="name-icon" />
<div className="eeb-date-box-label">زمان آزمون:</div>
<div className="eeb-date-box-date">
{moment(data?.date, 'YYYY/MM/DD').format('jYYYY/jM/jD')}
</div>
<div className="eeb-date-box-time">ساعت
{examDate.getHours()}:{examDate.getMinutes()}
</div>
</div>
<div className="eeb-negetive-point-and-question-type-box">
<div className="eeb-np-box">
<img className="eeb-np-box-icon" src={icon4} alt="name-icon" />
<div className="eeb-np-box-label">نمره منفی:</div>
<div className="eeb-np-box-have">
{data?.negattiveMode && "دارد"}
{!data?.negattiveMode && "ندارد"}
</div>
</div>
<div className="eeb-qt-box">
<img className="eeb-qt-box-icon" src={icon5} alt="name-icon" />
<div className="eeb-qt-box-label">نوع سوالات:</div>
<div className="eeb-qt-box-type">{data?.types}</div>
</div>
</div>
<div className="eeb-max-user-and-exam-type-box">
<div className="eeb-mu-box">
<img className="eeb-mu-box-icon" src={icon6} alt="name-icon" />
<div className="eeb-mu-box-label">حدنصاب شرکت کنندگان: </div>
<div className="eeb-mu-box-number">{data?.capacity} نفر</div>
</div>
<div className="eeb-et-box">
<img className="eeb-et-box-icon" src={icon7} alt="name-icon" />
<div className="eeb-et-box-label">نوع شرکت در آزمون:</div>
<div className="eeb-et-box-type">
{data?.type===1 && "انفرادی"}
{data?.type===2 && "گروهی"}
</div>
</div>
</div>
<div className="eeb-guide-box">
<img className="eeb-guide-box-icon" src={icon8} alt="name-icon" />
<div className="eeb-guide-box-label">فایل راهنما:</div>
<div className="eeb-guide-box-have">
{data?.guideFileId && "دارد"}
{!data?.guideFileId && "ندارد"} -</div>
<Link
to={data?.guideFileId || "#"}
className="eeb-guide-box-link"
>
دریافت فایل
</Link>
</div>
<div className="eeb-created-box">
<div className="eeb-created-box-img-container">
<img
className="eeb-created-box-icon"
src={avatar}
alt="name-icon"
/>
</div>
<div className="eeb-created-box-label">ایجاد شده توسط</div>
<div className="eeb-created-box-file">موسسه فرهنگی مصباح نور</div>
</div>
{(new Date(data.date)<today) &&<Link
to={`/dashboard/azmoon_list/exam/${data?.id}`}
className="eeb-btn"
>
شروع آزمون
</Link>}
{(new Date(data.date)>today) &&
<div className="eeb-timer">
<div>{timer.d} روز و </div>
<div>{timer.h} ساعت و </div>
<div>{timer.m} دقیقه و </div>
<div>{timer.s} ثانیه </div>
<div>تا شروع آزمون</div>
</div>
}
</div>
</div>
);
};
export default MobileEnterExam;

@ -0,0 +1,749 @@
import { VscCircleFilled } from "react-icons/vsc";
import "./M_Exam.scss";
import icon1 from "../../assets/azmoon-list/exam/Group 115.png";
import icon2 from "../../assets/azmoon-list/exam/Group 116.png";
import { useState } from "react";
import q_img1 from "../../assets/azmoon-list/exam/amanda-jones-oHVdj31R3F4-unsplash.jpg";
import { useSelector } from "react-redux";
let choice_badge_list = ["الف", "ب", "ج", "د"];
const M_Exam = ({ ID }) => {
const [data_list] = useState([
{
id: 1,
isActive: false,
question:
"نظر شما نسبت به تحولات جنوب غرب آسیا به ویژه حوزه دریای عمان و خلیج فارس چیست؟",
choices: [
{
id: 1,
sub_id: 1,
choice: "3",
isSelected: false,
},
{
id: 2,
sub_id: 1,
choice: "5",
isSelected: false,
},
{
id: 3,
sub_id: 1,
choice: "9",
isSelected: false,
},
{
id: 4,
sub_id: 1,
choice: "10",
isSelected: false,
},
],
},
{
id: 2,
isActive: false,
question:
"نظر شما نسبت به تحولات جنوب غرب آسیا به ویژه حوزه دریای عمان و خلیج فارس چیست؟",
choices: [
{
id: 1,
sub_id: 2,
choice: "امکان دارد شاید و یا یک چیز دیگر",
isSelected: false,
},
{
id: 2,
sub_id: 2,
choice: "امکان دارد گزینه اول درست باشد",
isSelected: false,
},
],
},
{
id: 3,
isActive: false,
question:
"نظر شما نسبت به تحولات جنوب غرب آسیا به ویژه حوزه دریای عمان و خلیج فارس چیست؟",
choices: [
{
id: 1,
sub_id: 3,
choice: "پاسخ الف درست است",
isSelected: false,
},
{
id: 2,
sub_id: 3,
choice: "پاسخ ب درست است",
isSelected: false,
},
{
id: 3,
sub_id: 3,
choice: "پاسخ ج درست است",
isSelected: false,
},
{
id: 4,
sub_id: 3,
choice: "پاسخ د درست است",
isSelected: false,
},
],
},
{
id: 4,
isActive: false,
question:
"نظر شما نسبت به تحولات جنوب غرب آسیا به ویژه حوزه دریای عمان و خلیج فارس چیست؟",
choices: [
{
id: 1,
sub_id: 4,
choice: "پاسخ الف",
isSelected: false,
},
{
id: 2,
sub_id: 4,
choice: "پاسخ ب",
isSelected: false,
},
{
id: 3,
sub_id: 4,
choice: "پاسخ ج",
isSelected: false,
},
{
id: 4,
sub_id: 4,
choice: "پاسخ د",
isSelected: false,
},
],
},
{
id: 5,
isActive: false,
question:
"نظر شما نسبت به تحولات جنوب غرب آسیا به ویژه حوزه دریای عمان و خلیج فارس چیست؟",
choices: [
{
id: 1,
sub_id: 5,
choice: "الف",
isSelected: false,
},
{
id: 2,
sub_id: 5,
choice: "ب",
isSelected: false,
},
{
id: 3,
sub_id: 5,
choice: "ج",
isSelected: false,
},
],
},
{
id: 6,
isActive: false,
question:
"نظر شما نسبت به تحولات جنوب غرب آسیا به ویژه حوزه دریای عمان و خلیج فارس چیست؟",
choices: [
{
id: 1,
sub_id: 6,
choice: "سال 2010",
isSelected: false,
},
{
id: 2,
sub_id: 6,
choice: "سال 2015",
isSelected: false,
},
{
id: 3,
sub_id: 6,
choice: "سال 2017",
isSelected: false,
},
{
id: 4,
sub_id: 6,
choice: "سال 2020",
isSelected: false,
},
],
},
{
id: 7,
isActive: false,
question:
"نظر شما نسبت به تحولات جنوب غرب آسیا به ویژه حوزه دریای عمان و خلیج فارس چیست؟",
choices: [
{
id: 1,
sub_id: 7,
choice: "امکان دارد شاید و یا یک چیز دیگر",
isSelected: false,
},
{
id: 2,
sub_id: 7,
choice: "امکان دارد گزینه اول درست باشد",
isSelected: false,
},
],
},
{
id: 8,
isActive: false,
question:
"نظر شما نسبت به تحولات جنوب غرب آسیا به ویژه حوزه دریای عمان و خلیج فارس چیست؟",
choices: [
{
id: 1,
sub_id: 8,
choice: "پاسخ الف درست است",
isSelected: false,
},
{
id: 2,
sub_id: 8,
choice: "پاسخ ب درست است",
isSelected: false,
},
{
id: 3,
sub_id: 8,
choice: "پاسخ ج درست است",
isSelected: false,
},
{
id: 4,
sub_id: 8,
choice: "پاسخ د درست است",
isSelected: false,
},
],
},
{
id: 9,
isActive: false,
question:
"نظر شما نسبت به تحولات جنوب غرب آسیا به ویژه حوزه دریای عمان و خلیج فارس چیست؟",
choices: [
{
id: 1,
sub_id: 9,
choice: "من نظری ندارم",
isSelected: false,
},
{
id: 2,
sub_id: 9,
choice: "سوال مبهم است",
isSelected: false,
},
{
id: 3,
sub_id: 9,
choice: "جواب تقریبی است",
isSelected: false,
},
{
id: 4,
sub_id: 9,
choice: "جواب قطعی است",
isSelected: false,
},
],
},
{
id: 10,
isActive: false,
question:
"نظر شما نسبت به تحولات جنوب غرب آسیا به ویژه حوزه دریای عمان و خلیج فارس چیست؟",
choices: [
{
id: 1,
sub_id: 10,
choice:
"این متنی آزمایشی برای تست این کد است و معنای دیگری ندارد و ادامه ای این متن نیز برای طولانی کردن پاسخ است و هدف دیگری ندارد",
isSelected: false,
},
{
id: 2,
sub_id: 10,
choice: "این متنی آزمایشی برای تست این کد و معنای دیگری ندارد",
isSelected: false,
},
{
id: 3,
sub_id: 10,
choice: "این متنی آزمایشی برای تست این کد و معنای دیگری ندارد",
isSelected: false,
},
{
id: 4,
sub_id: 10,
choice: "این متنی آزمایشی برای تست این کد و معنای دیگری ندارد",
isSelected: false,
},
],
},
{
id: 11,
isActive: false,
question:
"نظر شما نسبت به تحولات جنوب غرب آسیا به ویژه حوزه دریای عمان و خلیج فارس چیست؟",
choices: [
{
id: 1,
sub_id: 11,
choice: "پاسخ الف",
isSelected: false,
},
{
id: 2,
sub_id: 11,
choice: "پاسخ ب",
isSelected: false,
},
{
id: 3,
sub_id: 11,
choice: "پاسخ ج",
isSelected: false,
},
{
id: 4,
sub_id: 11,
choice: "پاسخ د",
isSelected: false,
},
],
},
{
id: 12,
isActive: false,
question:
"نظر شما نسبت به تحولات جنوب غرب آسیا به ویژه حوزه دریای عمان و خلیج فارس چیست؟",
choices: [
{
id: 1,
sub_id: 12,
choice: "پاسخ الف",
isSelected: false,
},
{
id: 2,
sub_id: 12,
choice: "پاسخ ب",
isSelected: false,
},
{
id: 3,
sub_id: 12,
choice: "پاسخ ج",
isSelected: false,
},
{
id: 4,
sub_id: 12,
choice: "پاسخ د",
isSelected: false,
},
],
},
{
id: 13,
isActive: false,
question:
"نظر شما نسبت به تحولات جنوب غرب آسیا به ویژه حوزه دریای عمان و خلیج فارس چیست؟",
choices: [
{
id: 1,
sub_id: 13,
choice: "پاسخ الف",
isSelected: false,
},
{
id: 2,
sub_id: 13,
choice: "پاسخ ب",
isSelected: false,
},
{
id: 3,
sub_id: 13,
choice: "پاسخ ج",
isSelected: false,
},
{
id: 4,
sub_id: 13,
choice: "پاسخ د",
isSelected: false,
},
],
},
{
id: 14,
isActive: false,
question:
"نظر شما نسبت به تحولات جنوب غرب آسیا به ویژه حوزه دریای عمان و خلیج فارس چیست؟",
choices: [
{
id: 1,
sub_id: 14,
choice: "پاسخ الف",
isSelected: false,
},
{
id: 2,
sub_id: 14,
choice: "پاسخ ب",
isSelected: false,
},
{
id: 3,
sub_id: 14,
choice: "پاسخ ج",
isSelected: false,
},
{
id: 4,
sub_id: 14,
choice: "پاسخ د",
isSelected: false,
},
],
},
{
id: 15,
isActive: false,
question:
"نظر شما نسبت به تحولات جنوب غرب آسیا به ویژه حوزه دریای عمان و خلیج فارس چیست؟",
choices: [
{
id: 1,
sub_id: 15,
choice: "پاسخ الف درست است",
isSelected: false,
},
{
id: 2,
sub_id: 15,
choice: "پاسخ ب درست است",
isSelected: false,
},
{
id: 3,
sub_id: 15,
choice: "پاسخ ج درست است",
isSelected: false,
},
{
id: 4,
sub_id: 15,
choice: "پاسخ د درست است",
isSelected: false,
},
],
},
{
id: 16,
isActive: false,
question:
"نظر شما نسبت به تحولات جنوب غرب آسیا به ویژه حوزه دریای عمان و خلیج فارس چیست؟",
choices: [
{
id: 1,
sub_id: 16,
choice: "پاسخ الف درست است",
isSelected: false,
},
{
id: 2,
sub_id: 16,
choice: "پاسخ ب درست است",
isSelected: false,
},
{
id: 3,
sub_id: 16,
choice: "پاسخ ج درست است",
isSelected: false,
},
{
id: 4,
sub_id: 16,
choice: "پاسخ د درست است",
isSelected: false,
},
],
},
{
id: 17,
isActive: false,
question:
"نظر شما نسبت به تحولات جنوب غرب آسیا به ویژه حوزه دریای عمان و خلیج فارس چیست؟",
choices: "",
},
{
id: 18,
isActive: false,
question: "",
question_img: q_img1,
choices: [
{
id: 1,
sub_id: 18,
choice: "پاسخ الف درست است",
isSelected: false,
},
{
id: 2,
sub_id: 18,
choice: "پاسخ ب درست است",
isSelected: false,
},
{
id: 3,
sub_id: 18,
choice: "پاسخ ج درست است",
isSelected: false,
},
{
id: 4,
sub_id: 18,
choice: "پاسخ د درست است",
isSelected: false,
},
],
},
]);
const state = useSelector((state) => state.default);
let data = []
for (let y = 0; y < data_list.length; y++) {
if (data_list[y].choices) {
data.push(0);
} else {
data.push(1);
}
}
//--answer list-------------------------------------------
let answer_list = [];
for (let i = 0; i < data_list.length; i++) {
answer_list.push(0);
}
// console.log(answer_list);
//--choice-index-list-------------------------------------
let choice_index_counter = 0;
let choice_index_list = [];
for (let i = 0; i < data_list.length; i++) {
choice_index_list.push(choice_index_counter);
for (let j = 0; j < data_list[i].choices.length; j++) {
choice_index_counter++;
}
}
// console.log(choice_index_list);
//--choose a choice setting--and movment-----------------------------------------------------
let visible_circles_number = Math.floor(window.innerWidth / 66.975);
const chooseChoice = (id, sub_id, index) => {
const choices = document.querySelectorAll(
".M-Exam-main-item-choices-item-text"
);
const badge_choices = document.querySelectorAll(
".M-Exam-main-item-choices-item-badge"
);
const progress_bar_circles = document.querySelectorAll(
".M-Exam-progress-bar-item-circle"
);
if (index + 1 > visible_circles_number) {
//movment --------------------------
let movement = (index + 1 - visible_circles_number) * 66.975;
document.querySelector(".M-Exam-progress-bar").scrollLeft = -movement;
} else {
document.querySelector(".M-Exam-progress-bar").scrollLeft = 0;
}
//------------------------------------------------------------------------
if (answer_list[sub_id - 1] !== 0) {
choices[
choice_index_list[sub_id - 1] + answer_list[sub_id - 1] - 1
].style.backgroundColor = "#F5F5F5";
choices[
choice_index_list[sub_id - 1] + answer_list[sub_id - 1] - 1
].style.color = "#132F52";
badge_choices[
choice_index_list[sub_id - 1] + answer_list[sub_id - 1] - 1
].style.backgroundColor = "#E7E7E7";
badge_choices[
choice_index_list[sub_id - 1] + answer_list[sub_id - 1] - 1
].style.color = "#132F52";
}
if (answer_list[sub_id - 1] === id) {
progress_bar_circles[sub_id - 1].style.backgroundColor = "#F5F5F5";
progress_bar_circles[sub_id - 1].style.color = "#A2B4CB";
answer_list[sub_id - 1] = 0;
// console.log(answer_list);
} else {
choices[choice_index_list[sub_id - 1] + id - 1].style.backgroundColor =
"#74DF2C";
choices[choice_index_list[sub_id - 1] + id - 1].style.color = "#FFF";
progress_bar_circles[sub_id - 1].style.backgroundColor = "#74DF2C";
progress_bar_circles[sub_id - 1].style.color = "#FFF";
badge_choices[
choice_index_list[sub_id - 1] + id - 1
].style.backgroundColor = "#63C81F";
badge_choices[choice_index_list[sub_id - 1] + id - 1].style.color =
"#FFF";
answer_list[sub_id - 1] = id;
// console.log(answer_list);
}
};
//------------------------------------------------------------
const updateProgressBar = (e, id) => {
let progress = document.querySelectorAll(
".M-Exam-progress-bar-item-circle"
);
// console.log(e);
if (e.target.value.length > 0) {
progress[id - 1].style.backgroundColor = "#74DF2C";
progress[id - 1].style.color = "#fff";
} else {
progress[id - 1].style.backgroundColor = "#F5F5F5";
progress[id - 1].style.color = "#A2B4CB";
}
};
//progress bar movement ---------------------------------------
const moverProgressBar = (index) => {
if (index + 1 > visible_circles_number) {
let movement = (index + 1 - visible_circles_number) * 66.975;
document.querySelector(".M-Exam-progress-bar").scrollLeft = -movement;
} else {
document.querySelector(".M-Exam-progress-bar").scrollLeft = 0;
}
};
return (
<div className="M-Exam mt-10">
<div className="M-Exam-top-cover"></div>
<div className="M-Exam-info ">
<div className="M-Exam-info-row1">
<div className="M-Exam-info-row1-title-and-subtitle-box">
<div className="M-Exam-info-row1-title-box">
<img src={icon1} alt="title-icon" />
<div className="M-Exam-info-row1-title-box-text">
{data.name}
</div>
</div>
<div className="M-Exam-info-row1-subtitle-box">
<VscCircleFilled className="M-Exam-info-row1-subtitle-box-icon" />
<div className="M-Exam-info-row1-subtitle-box-text">
{data.text}
</div>
</div>
</div>
<div className="M-Exam-info-row1-time">
<VscCircleFilled className="M-Exam-info-row1-time-icon" />
<div className="M-Exam-info-row1-time-text">
ساعت <span>14:41</span>
</div>
</div>
</div>
<div className="M-Exam-info-row2">
<img src={icon2} alt="clock icon" />
<div className="M-Exam-info-row2-text">زمان باقیمانده :</div>
<div className="M-Exam-info-row2-timer">48:29</div>
</div>
</div>
<div className="M-Exam-progress-bar mt-8 overflow-hidden overflow-x-hidden">
{data_list.map((item, index) => (
<div key={item.id} className="M-Exam-progress-bar-item">
<div className="M-Exam-progress-bar-item-circle">{index + 1}</div>
<div className="M-Exam-progress-bar-item-line">------</div>
</div>
))}
</div>
<div className="M-Exam-main">
{data_list.map((item, index1) => (
<div id={`${item.id}`} key={item.id} className="M-Exam-main-item">
<div className="M-Exam-main-item-number">سوال {index1 + 1}</div>
{item.question && (
<div className="M-Exam-main-item-question">{item.question}</div>
)}
{!item.question && (
<div className="M-Exam-main-item-question-img">
<img src={item.question_img} alt="تصویر سوال امتحانی" />
</div>
)}
<div className="M-Exam-main-item-choices">
{item.choices &&
item.choices.map((item, index) => (
<div
key={item.id}
className="M-Exam-main-item-choices-item"
onClick={() => chooseChoice(item.id, item.sub_id, index1)}
>
<div className="M-Exam-main-item-choices-item-badge">
{choice_badge_list[index]}
</div>
<div className="M-Exam-main-item-choices-item-text">
{item.choice}
</div>
</div>
))}
</div>
{!item.choices && (
<div className="M-Exam-main-item-answer-box">
<div className="M-Exam-main-item-answer-box-badge">
تشریح پاسخ
</div>
<textarea
name="answer-box"
id=""
cols="30"
rows="10"
className="M-Exam-main-item-answer-box-input"
placeholder="لطفا پاسخ خود را در این قسمت تایپ کنید و از امکانات شگرف این سامانه لذت ببرید"
onBlur={(e) => updateProgressBar(e, item.id)}
onFocus={() => moverProgressBar(index1)}
></textarea>
</div>
)}
<div className="M-Exam-main-item-line"></div>
</div>
))}
<div className="M-Exam-main-btn-container">
<div className="M-Exam-main-btn-container-line"></div>
<div className="M-Exam-main-btn-container-btn">
ذخیره اطلاعات و پایان آزمون
</div>
<div className="M-Exam-main-btn-container-line"></div>
</div>
</div>
</div>
);
};
export default M_Exam;

@ -0,0 +1,335 @@
// @font-face {
// font-family: IRANSansX-Bold;
// src: url(../../../../assets/font/IRANSansX/Webfonts/fonts/woff2/IRANSansX-Bold.woff2) format("woff2"),
// url(../../../../assets/font/IRANSansX/Webfonts/fonts/woff/IRANSansX-Bold.woff) format("woff");
// }
// @font-face {
// font-family: IRANSansX-Regular;
// src: url(../../../../assets/font/IRANSansX/Webfonts/fonts/woff2/IRANSansX-Regular.woff2) format("woff2"),
// url(../../../../assets/font/IRANSansX/Webfonts/fonts/woff/IRANSansX-Regular.woff) format("woff");
// }
// @font-face {
// font-family: IRANSansXFaNum-Regular;
// src: url(../../../../assets/font/IRANSansX/Farsi-numerals/IRANSansXFaNum-Regular.ttf) format("woff2"),
// url(../../../../assets/font/IRANSansX/Farsi-numerals/Webfonts/Woff/IRANSansXFaNum-Regular.woff) format("woff");
// }
// $font1:IRANSansX-Regular;
// $font2:IRANSansX-Bold;
// $font3:IRANSansXFaNum-Regular;
.M-Exam{
width: 100vw;
padding: 0 5px;
position: relative;
.M-Exam-top-cover{
width: 96%;
height: 200px;
position: fixed;
top: 0;
left: 50%;
transform: translateX(-50%);
background-color: white;
z-index: 4;
}
.M-Exam-info{
width: 96%;
padding: 5px 7px;
border-radius: 10px;
border: 2px solid #F1F1F1;
position: fixed;
top: 90px;
left: 50%;
transform: translateX(-50%);
background-color: white;
z-index: 5;
.M-Exam-info-row1{
width: 100%;
display: flex;
align-items: flex-start;
justify-content: space-between;
padding: 5px 0;
direction: rtl;
border-bottom: 1px solid #dfdfdf;
.M-Exam-info-row1-title-and-subtitle-box{
width: 65%;
.M-Exam-info-row1-title-box{
width: 100%;
display: flex;
align-items: flex-start;
direction: rtl;
.M-Exam-info-row1-title-box-text{
font-size: 13px;
margin-right: 3px;
// font-family: $font2;
color: #2E81E8;
}
}
.M-Exam-info-row1-subtitle-box{
width: 100%;
display: flex;
align-items: flex-start;
direction: rtl;
margin-top: 5px;
.M-Exam-info-row1-subtitle-box-icon{
margin-right: 16px;
color: #CEFDFF;
}
.M-Exam-info-row1-subtitle-box-text{
font-size: 10px;
// font-family: $font1;
color: #132F52;
margin-right: 3px;
}
}
}
.M-Exam-info-row1-time{
display: flex;
align-items: center;
padding: 2px 5px;
background-color: #E2EAF4;
direction: rtl;
border-radius: 3px;
.M-Exam-info-row1-time-icon{
color: #013273;
}
.M-Exam-info-row1-time-text{
font-size: 12px;
color: #013273;
margin-right: 3px;
}
}
}
.M-Exam-info-row2{
width: 100%;
display: flex;
align-items: center;
justify-content: center;
padding: 5px 0;
direction: rtl;
.M-Exam-info-row2-text{
font-size: 14px;
// font-family: $font2;
color: #2E81E8;
margin-right: 5px;
}
.M-Exam-info-row2-timer{
font-size: 16px;
// font-family: $font2;
color: #2E81E8;
margin-right: 5px;
}
}
}
&-progress-bar{
width: 96%;
height: 35px;
overflow-x: scroll;
display: flex;
align-items: center;
position: fixed;
top: 180px;
left: 50%;
transform: translateX(-50%);
direction: rtl;
background-color: white;
z-index: 5;
scroll-behavior: smooth;
&-item{
display: flex;
align-items: center;
height: 100%;
flex-shrink:0;
&-circle{
width: 35px !important;
height: 35px !important;
border-radius: 50%;
background-color: #F5F5F5;
display: flex;
align-items: center;
justify-content: center;
color: #A2B4CB;
// font-family: $font3;
}
&-line{
font-size: 16px;
color: #E0E0E0;
}
}
}
&-main{
width: 96%;
position: absolute;
top: 220px;
left: 50%;
transform: translateX(-50%);
&-item{
width: 100%;
direction: rtl;
margin-top: 15px;
&-number{
font-size: 15px;
// font-family: $font3;
color: #132F52;
padding: 2px 5px;
background-color: #E8FCFF;
display: inline;
}
&-question{
width: 100%;
font-size: 19px;
color: #132F52;
// font-family: $font1;
margin-top: 5px;
}
&-question-img{
width: 100%;
padding: 5px 5px;
border-radius: 5px;
overflow: hidden;
margin-top: 10px;
background-color: #F5F5F5;
img{
width: 100%;
height: auto;
}
}
&-choices{
width: 100%;
direction: rtl;
&-item{
width: 100%;
// height: 40px;
// padding: 10px 0;
display: flex;
margin-top: 10px;
&-badge{
width: 13%;
// height: 100%;
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
// font-family: $font2;
color: #132F52;
background-color: #E7E7E7;
padding: 6px 0;
border-radius: 0 5px 5px 0;
}
&-text{
width: 100%;
height: 100%;
display: flex;
align-items: center;
font-size: 16px;
color: #132F52;
// font-family: $font1;
background-color: #F5F5F5;
padding: 6px 0;
padding-right: 10px;
border-radius: 5px 0 0 5px;
}
}
}
&-answer-box{
width: 100%;
height: 150px;
display: flex;
align-items: center;
margin-top: 10px;
&-badge{
height: 100%;
width: 75px;
background-color: #E7E7E7;
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
// font-family: $font2;
color: #132F52;
border-radius: 0 5px 5px 0;
text-align: center;
}
&-input{
width: 100% !important;
height: 100%;
background-color: #F5F5F5;
border: none !important;
outline: none !important;
border-radius: 5px 0 0 5px;
resize: none;
font-size: 14px;
// font-family: $font1;
padding: 10px 10px;
}
}
&-line{
width: 100%;
height: 1px;
background-color: #D6E6F9;
margin-top: 20px;
}
}
&-btn-container{
width: 100%;
display: flex;
align-items: center;
margin-top: 20px;
margin-bottom: 20px;
&-line{
width: 20%;
height: 2px;
background-color: #2E81E8;
}
&-btn{
width: 60%;
height: 40px;
border-radius: 7px;
background-color: #2E81E8;
color: white;
font-size: 15px;
color: white;
// font-family: $font1;
display: flex;
align-items: center;
justify-content: center;
}
}
}
}

@ -8,6 +8,8 @@ import q_img1 from "../../assets/azmoon-list/exam/amanda-jones-oHVdj31R3F4-unspl
import React from "react";
import { Link } from "react-router-dom";
import {state} from '../../components/exam/Carousel/state'
import M_Exam from "./M_Exam";
import {connect} from 'react-redux'
// import img1 from '../../assets/store/amazing-suggest/ella-olsson-KPDbRyFOTnE-unsplash.jpg';
// import img2 from '../../assets/store/amazing-suggest/antoine-dautry-_zsL306fDck-unsplash.jpg';
@ -19,7 +21,7 @@ let l1 = [];
let i = 0;
let l2 = [];
const Exam = ({ ID }) => {
const Exam = ({ ID, isMobile }) => {
// const state = useSelector((state) => state.default);
const [common_data] = useState(state);
@ -845,6 +847,7 @@ const Exam = ({ ID }) => {
}
return (
isMobile ? <M_Exam /> :
<>
{data_list.map((item) => {
if (item.choices) {
@ -1039,5 +1042,17 @@ const Exam = ({ ID }) => {
</>
);
};
const mapStateToProps = (state) => ({
isDark: state.publicApi.isDark,
isMobile: state.publicApi.isMobile,
headerOptions: state.publicApi.headerOptions,
isLogin: state.user.status,
cartProductsLength: state.userProduct.list?.filter(
(product) => product.condition < 2
)?.length,
});
export default Exam;
const mapDispatchToProps = {
};
export default connect(mapStateToProps, mapDispatchToProps)(Exam);

@ -34,6 +34,7 @@ module.exports = {
gray81 : '#818181',
gray70 : '#707070',
gray37: '#373737',
grayAB: '#a5a8ab',
red82OP: 'rgba(223, 20, 82, 0.08)',
pinkF5: '#fff1f5',
pinkD6 : '#ffd6d6',

Loading…
Cancel
Save