Compare commits

...

8 Commits

  1. 15
      src/App.css
  2. 2
      src/App.js
  3. 12
      src/components/Calendar/CalendarComponents/Calendar.js
  4. 27
      src/components/Calendar/CalendarComponents/components/DaysList.js
  5. 4
      src/components/Calendar/CalendarComponents/components/Header.js
  6. 37
      src/components/Calendar/index.css
  7. 20
      src/components/Calendar/index.js
  8. 16
      src/components/Product/index.js
  9. 9
      src/components/Stepper/index.css
  10. 7
      src/components/Stepper/index.js
  11. 20
      src/components/exam/Carousel/index.css
  12. 34
      src/components/exam/Carousel/index.js
  13. 45
      src/components/header/Header.js
  14. 7
      src/components/header/Header.scss
  15. 2
      src/components/input/index.js
  16. 6
      src/components/nav/Nav.js
  17. 151
      src/redux/reducers/book.js
  18. 16
      src/redux/reducers/user.js
  19. 4
      src/redux/reducers/userProduct.js
  20. 12
      src/utils/separate.js
  21. 2
      src/view/addExam/index.js
  22. 10
      src/view/addExam/views/AddDescription.js
  23. 6
      src/view/addExam/views/AddQuestionsFromBank.js
  24. 2
      src/view/addProduct/Sidebar/index.js
  25. 26
      src/view/contact/index.js
  26. 52
      src/view/dashboard/Dashboard.js
  27. 24
      src/view/dashboard/cal.css
  28. 704
      src/view/services/index.js

@ -32,4 +32,19 @@ input::-webkit-inner-spin-button {
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
background: #b30000;
}
select {
-webkit-appearance: none;
-moz-appearance: none;
background: transparent;
background-image: url("data:image/svg+xml;utf8,<svg fill='black' height='30' viewBox='0 0 24 24' width='30' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z' fill='gray' /><path d='M0 0h24v24H0z' fill='none'/></svg>");
background-repeat: no-repeat;
background-position-x: 1%;
background-position-y: 50%;
border: 1px solid #dfdfdf;
border-radius: 2px;
/* margin-right: 2rem; */
padding: 1rem;
padding-right: 2rem;
cursor: pointer;
}

@ -669,7 +669,7 @@ function App() {
{LOGIN && <Header logOut={logOut} />}
{LOGIN && <Nav logOut={logOut} />}
<Routes>
<Route path="/" element={LOGIN ?
<Route path="/myServices" element={LOGIN ?
<Dashboard
ActiveUserFullInfo={ActiveUserFullInfo}
UserFullInfoData={UserFullInfoData}

@ -253,10 +253,10 @@ let active_list;
<div className="dbp1-month">{month}</div>،
<div className="dbp1-year">{year}</div>
</div>
<div className="date-box-p1-time">
{/* <div className="date-box-p1-time">
<Clock />
</div>
</div> */}
</div>
<MonthSelector
@ -309,14 +309,16 @@ let active_list;
type={type}
/>
<div className="Calendar__footer">
{/* <div className={`footer__Events ${type}`}>
{ eventInFooter !== null && eventInFooter !== undefined &&
<div className={`footer__Events ${type}`}>
{
type == 'dashboard' ? <><div className='text-xl font-black text-blue-400'>رویداد ها: </div><p className='text-blue-300 font-bold'>{eventInFooter ? eventInFooter : 'رویدادی در این روز وجود ندارد!'}</p></> : eventInFooter
type == 'dashboard' ? <><div className='text-xl font-black text-red52'>رویداد ها: </div><p className='text-red26 font-bold'>{eventInFooter ? eventInFooter : 'رویدادی در این روز وجود ندارد!'}</p></> : eventInFooter
}
</div>
{renderFooter()} */}
}
{renderFooter()}
</div>
</div>
);

@ -257,16 +257,24 @@ const DaysList = ({
isStandard,
});
// showing Dots Of Events
// showing Dots Of Events
const specialDate = (sDay, sMonth, sYear) => {
return events.map((e) => {
let hasEvents = events.find(itm => sDay == itm.day && sMonth == itm.month && sYear == itm.year);
console.log(hasEvents);
if (hasEvents !== undefined && hasEvents !== null ){
return <span> {events.map((e) => {
if (sDay == e.day && sMonth == e.month && sYear == e.year) {
return <span key={'dot' + e.id} style={{
color: e.color
}}>.</span>;
return(
<svg height="5" key={'dot' + e.id} width="5">
<circle cx="2.5" cy="2.5" r="2" stroke-width="3" fill="red" />
</svg>) ;
}
})
})}</span>
}
};
@ -299,6 +307,7 @@ const DaysList = ({
// console.log(specialDate(day));
// console.log(showEventDescription(day))
showEvent(showEventDescription(day, month, year))
// console.log(showEventDescription(day, month, year))
}}
onKeyDown={({ key }) => {
@ -316,9 +325,9 @@ const DaysList = ({
role="gridcell"
data-is-default-selectable={shouldEnableKeyboardNavigation}
>
<p className=''>{!isStandard ? '' : getLanguageDigits(day)}</p>
{/* Dots Of Events */}
<span>{specialDate(day, month, year)}</span>
<span className=''>{!isStandard ? '' : getLanguageDigits(day)}</span>
{/* Dots Of Events */}
{specialDate(day, month, year)}
</div>
);
};

@ -44,8 +44,8 @@ const Header = ({
const monthText = headerElement.current.querySelector(
'.Calendar__monthYear.-shown .Calendar__monthText',
);
const yearText = monthText.nextSibling;
const hasActiveBackground = element => element.classList.contains('-activeBackground');
const yearText = monthText?.nextSibling;
const hasActiveBackground = element => element?.classList.contains('-activeBackground');
const isInitialRender =
!isOpen && !hasActiveBackground(monthText) && !hasActiveBackground(yearText);
if (isInitialRender) return;

@ -590,8 +590,9 @@
.Calendar__day.dashboard {
width: calc(100% / 7 - 6px);
text-align: center;
padding: calc(0.25em - 1px);
font-size: 1.6em;
height:40px;
/* padding: calc(0.25em - 1px); */
/* font-size: 1.6em; */
border-radius: 7px;
transition: 0.2s;
border: 1px solid transparent;
@ -599,7 +600,7 @@
color: rgba(0, 0, 0, 0.8);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
vertical-align: middle;
background-color: transparent;
@ -607,32 +608,37 @@
}
.Calendar__day span{
padding: -10px;
margin-top: -30px;
font-size: 28px;
padding: 0px;
/* margin-top: -30px; */
margin: 0px;
display: flex;
justify-content: center;
height: 100%;
align-items: center;
/* font-size: 28px; */
}
.Calendar__day:focus {
outline: 1px dashed rgba(0, 0, 0, 0.4);
/* outline: 1px dashed rgba(0, 0, 0, 0.4); */
outline-offset: 2px;
}
.Calendar__day.-ltr {
min-height: 2.6em;
/* min-height: 2.6em; */
font-size: 1.45em;
}
.Calendar__day.-rtl {
font-size: 1.55em;
height: 40px;
/* height: 35px; */
}
.Calendar__day:not(.-blank):not(.-selectedStart):not(.-selectedEnd):not(.-selectedBetween):not(.-selected):hover {
background-color: rgba(223, 20, 82, 0.06);
color: #df1452;
border:1px solid #df1452;
/* border:1px solid #df1452; */
}
.Calendar__day.-selected,
@ -689,13 +695,12 @@
}
.Calendar__day.-today:not(.-selectedStart):not(.-selectedEnd):not(.-selectedBetween) {
font-weight: 600;
color: var(--cl-color-black);
color: #000;
position: relative;
background-color: rgba(223, 20, 82, 0.06);
color: #df1452;
/* border:1px solid #df1452; */
}
.Calendar__day.-today:not(.-selectedStart):not(.-selectedEnd):not(.-selectedBetween)::after {
/* .Calendar__day.-today:not(.-selectedStart):not(.-selectedEnd):not(.-selectedBetween)::after {
content: '';
position: absolute;
bottom: 0.2em;
@ -707,7 +712,7 @@
opacity: 0.5;
transform: translateX(-50%);
transition: 0.2s;
}
} */
.Calendar__day.-today:hover:not(.-selectedStart):not(.-selectedEnd):not(.-selectedBetween)::after {
opacity: 0;

@ -74,8 +74,8 @@ const eventsList = [
type: "global",
isHoliday: true,
date: "2022-01-12T00:00:00.000Z",
year: 1400,
month: 10,
year: 1401,
month: 1,
day: 1
},
{
@ -85,9 +85,9 @@ const eventsList = [
userId: "5",
date: "2022-01-12T00:00:00.000Z",
categoryId: 1,
year: 1400,
month: 10,
day: 3,
year: 1401,
month: 1,
day: 15,
color: 'blue'
},
{
@ -97,9 +97,9 @@ const eventsList = [
userId: "5",
date: "2022-01-08T00:00:00.000Z",
categoryId: 3,
year: 1400,
month: 11,
day: 6
year: 1401,
month: 1,
day: 3
},
{
id: 5,
@ -108,8 +108,8 @@ const eventsList = [
userId: "5",
date: "2022-01-12T00:00:00.000Z",
categoryId: 1,
year: 1400,
month: 10,
year: 1401,
month: 1,
day: 3
}
];

@ -77,7 +77,7 @@ const ProductDesign = ({
if (catId == 1) {
return (
<div className={`flex flex-col pt-4 text-right rounded-xl justify-start w-full m-4 border border-red82OP ${isMobile && 'w-11/12'}`}
<div className={`flex flex-col cursor-pointer pt-4 text-right rounded-xl justify-start w-full m-4 border border-red82OP ${isMobile && 'w-11/12'}`}
style={{ width: !isMobile && '375px' , direction: 'rtl' }}
onClick={onClick}
>
@ -104,7 +104,7 @@ const ProductDesign = ({
<div className="flex p-4 justify-between items-center">
<h1 className="font-black text-xl text-red52">{productPrice} تومان</h1>
<div
className={`bg-pinkF5 text-red26 w-32 border-2 border-red52 px-1 py-2 text-xs flex justify-center hover:bg-red52 hover:text-white
className={`bg-pinkF5 text-red26 rounded-md w-32 border-2 border-red52 px-1 py-2 text-xs flex justify-center hover:bg-red52 hover:text-white
`}
>
<button className="z-3" onClick={btnOnClick}>افزودن به سبد خرید</button>
@ -121,7 +121,7 @@ const ProductDesign = ({
}
if (catId == 2) {
return (
<div className="w-full flex justify-center">
<div className="w-full flex justify-center">
<div className={`flex ${isMobile ? 'flex-col w-11/12 border-red52' : 'border-red82OP pt-4'} border my-4 rounded-lg `} style={{width: !isMobile && '90%' }}>
<div className={` ${isMobile ? 'w-full h-24 ' : 'w-60 p-4 flex items-center justify-center' }`}>
{/* image */}
@ -173,7 +173,7 @@ const ProductDesign = ({
<div className={`flex px-4 ${isMobile ? 'w-full border-red82OP border-t' : 'w-2/5 py-4'} justify-between items-center`}>
<h1 className={`${isMobile && 'w-1/2 h-full flex items-center py-4 border-l border-red82OP'} font-black text-xl text-red52`}>{productPrice} تومان</h1>
<div
className={`bg-pinkF5 text-red26 w-32 border-2 border-red52 px-1 py-2 text-xs flex justify-center hover:bg-red52 hover:text-white
className={`bg-pinkF5 rounded-md text-red26 w-32 border-2 border-red52 px-1 py-2 text-xs flex justify-center hover:bg-red52 hover:text-white
`}
>
<button onClick={btnOnClick}> رزرو پیش ثبت نام </button>
@ -190,7 +190,7 @@ const ProductDesign = ({
}
if(catId == 3){
return(
<div className={`flex flex-col pt-4 text-right rounded-xl justify-start w-full m-4 border border-red82OP ${isMobile && 'w-11/12'}`}
<div className={`flex cursor-pointer flex-col pt-4 text-right rounded-xl justify-start w-full m-4 border border-red82OP ${isMobile && 'w-11/12'}`}
style={{ width: !isMobile && '375px', direction: 'rtl' }}
>
@ -233,7 +233,7 @@ const ProductDesign = ({
<div className="flex p-4 justify-between items-center">
<h1 className="font-black text-xl text-red52">{productPrice} تومان</h1>
<div
className={`bg-pinkF5 text-red26 w-32 border-2 border-red52 px-1 py-2 text-xs flex justify-center hover:bg-red52 hover:text-white
className={`bg-pinkF5 text-red26 w-32 border-2 rounded-md border-red52 px-1 py-2 text-xs flex justify-center hover:bg-red52 hover:text-white
`}
>
<button onClick={btnOnClick}>افزودن به سبد خرید</button>
@ -249,7 +249,7 @@ const ProductDesign = ({
}
if(catId == 4){
return (
<div className={`flex flex-col text-right rounded-xl justify-start w-full m-4 border border-red82OP ${isMobile && 'w-11/12'}`}
<div className={`flex flex-col cursor-pointer text-right rounded-xl justify-start w-full m-4 border border-red82OP ${isMobile && 'w-11/12'}`}
style={{ width: !isMobile && '375px', direction: 'rtl' }}
>
@ -270,7 +270,7 @@ const ProductDesign = ({
<h1 className={`font-black text-xl py-4 text-red52 ${isMobile && 'w-1/2 border-l border-red82OP text-center'}`}>{productPrice} تومان</h1>
<div
className={`bg-${isMobile ? 'blueFF border-blueDF rounded-lg py-3' : 'pinkF5 border-red52 py-2'} text-red26 w-32 border-2 px-1 text-xs flex justify-center hover:bg-red52 hover:text-white
className={`bg-${isMobile ? 'blueFF border-blueDF rounded-lg py-3' : 'pinkF5 border-red52 py-2'} rounded-md text-red26 w-32 border-2 px-1 text-xs flex justify-center hover:bg-red52 hover:text-white
`}
>
<button onClick={btnOnClick}>افزودن به سبد خرید</button>

@ -0,0 +1,9 @@
.giveMeEllipsis {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2; /* number of lines to show */
/* line-height: 1; /* fallback */
/* max-height: 1*2; fallback */
}

@ -1,4 +1,6 @@
import React, {useState} from "react";
import separate from "../../utils/separate";
import './index.css'
function Stepper({
direction,
@ -39,7 +41,10 @@ function Stepper({
: null
}
</div>
<p className={`mr-4 font-bold ${item.active ? 'text-red26' : 'text-gray-400'} ${direction === 'horizontal' && 'text-xs' }`}>{item.title}</p>
<div className="flex justify-center items-center">
<p className="mr-3 ml-1 text-xl font-bold text-red-500 text-opacity-50">{index + 1}</p>
<p className={` giveMeEllipsis font-bold ${item.active ? 'text-red26' : 'text-gray-400'} ${direction === 'horizontal' && 'text-xs' }`}> {item.title}</p>
</div>
</div>
{count !== (Number(index) + 1) && (
<span

@ -60,15 +60,20 @@
direction: ltr;
font-size: 15px;
font-family: IRANSans;
color: #df1452;
/* color: #df1452; */
}
.melc-h-move-btns *{
font-size: 30px;
color: #df1452;
/* color: #df1452; */
cursor: pointer;
}
.back-btn{
color:#df1452;
}
.forward-btn{
color:#ececec
}
.melc-content{
width: 100%;
@ -90,7 +95,7 @@
}
.melc-content-item{
/* width: 100%; */
width: 100%;
/* height: 280px; */
margin: 30px 0;
/* margin-top: 30px; */
@ -99,7 +104,7 @@
position: absolute;
top: 0;
right: 0;
transition: all 0.6s ease;
transition: all 0.4s ease;
}
.melc-content-item-more{
@ -146,6 +151,7 @@
.melc-c-i-i-exam-sit{
position: absolute;
z-index: 20;
top: 20px;
left: 10px;
padding: 5px 5px;
@ -181,7 +187,7 @@
right: 0;
transform: scaleY(0);
transform-origin: bottom;
transition: all 0.5s ease;
transition: all 0.1s ease;
}
.melc-c-i-item-info{
@ -256,7 +262,7 @@
transform: translateY(140px);
overflow: hidden;
text-overflow: ellipsis;
transition: all 0.5s ease;
transition: all 0.1s ease;
/* margin-top: 10px;
margin-bottom: 5px; */

@ -186,13 +186,27 @@ const MyExamList = ({isMobile}) => {
if (window.innerWidth < 1170) {
max_i--;
}
const move_left = () => {
if (i > max_i) {
i--;
let movment = i * 245;
document.querySelector(".melc-content-item").style.right = `${movment}px`;
console.log(document.querySelector(".melc-content-item").style.right)
if(document.querySelector(".melc-content-item").style.right !== 0){
// setRightBtnColor('#df1452')
document.querySelector('.forward-btn').style.color = '#df1452'
}else{
document.querySelector('.forward-btn').style.color = '#ececec'
}
if(i == max_i){
document.querySelector('.back-btn').style.color = '#ececec'
}else{
document.querySelector('.back-btn').style.color = '#df1452'
}
}
};
const move_right = () => {
@ -200,6 +214,18 @@ const MyExamList = ({isMobile}) => {
i++;
let movment = i * 245;
document.querySelector(".melc-content-item").style.right = `${movment}px`;
console.log(document.querySelector(".melc-content-item").style.right)
if(document.querySelector(".melc-content-item").style.right !== '0px'){
// setRightBtnColor('#df1452')
document.querySelector('.forward-btn').style.color = '#df1452'
}else{
document.querySelector('.forward-btn').style.color = '#ececec'
}
if(i == max_i){
document.querySelector('.back-btn').style.color = '#ececec'
}else{
document.querySelector('.back-btn').style.color = '#df1452'
}
}
};
let s = 0;
@ -260,7 +286,7 @@ const MyExamList = ({isMobile}) => {
<div className="my-exam-list">
<div className="my-exam-list-content rounded-lg">
<h1 className='text-right w-full text-red52 pt-4 px-6'>لیست آزمون های من</h1>
<h1 className='text-right w-full font-bold text-red52 pt-4 px-6'>لیست آزمون های من</h1>
<div className="melc-header">
{data.map((item, i) => (
<div
@ -276,8 +302,8 @@ const MyExamList = ({isMobile}) => {
</div>
))}
<div className="melc-h-move-btns">
<IoIosArrowBack onClick={move_left} />
<IoIosArrowForward onClick={move_right} />
<span className="back-btn"><IoIosArrowBack onClick={move_left}/></span>
<span className="forward-btn"> <IoIosArrowForward onClick={move_right}/></span>
</div>
</div>
<ScrollContainer className="melc-content">

@ -12,6 +12,7 @@ import { Link } from 'react-router-dom';
import arrowIcon from './MobileSideMenu/arrow-down.svg'
import exitIcon from '../../assets/img/group-9.svg'
import backIcon from './arrow-left-1.svg';
import profileIcon from './MobileSideMenu/profile-active.svg'
const Header = ({
isMobile, cart,
logOut
@ -36,14 +37,20 @@ const Header = ({
subMenu && <div className={`w-1/6 p-4 flex flex-col text-right bg-white shadow-xl absolute top-[108.5%] rounded-lg left-5 transition duration-700 ease-in-out ${subMenu && 'subMenu'}`}
>
<div className='flex items-center rtl text-right w-full py-2'>
<img src={profileIcon} />
کوروش زراندوز ( معلم شیمی )
</div>
<Link to='/adminpanel' onClick={() => setSubMenu(false)} className='w-full text-right border-b border-gray-200 py-2'>
ورود به پنل ادمین
</Link>
<Link to='/adminpanel/add-exam' onClick={() => setSubMenu(false)} className='w-full text-right border-b border-gray-200 py-2'>
{/* <Link to='/adminpanel/add-exam' onClick={() => setSubMenu(false)} className='w-full text-right border-b border-gray-200 py-2'>
ورود به صفحه افزودن آزمون
</Link>
<Link to='/adminpanel/add-product' onClick={() => setSubMenu(false)} className='w-full text-right border-b border-gray-200 py-2'>
ورود به صفحه افزودن محصول
</Link> */}
<Link to='/register' onClick={() => setSubMenu(false)} className='w-full text-right border-b border-gray-200 py-2'>
افزودن حساب کاربری جدید
</Link>
</div>
}
@ -61,22 +68,22 @@ const Header = ({
<Link to='/'> <img src={logoIcon} className="h-10" /> </Link>
{
location.pathname.includes('messages') ? (
<div onClick={() => navigate(-1)} className="w-8 h-8 bg-red-100 rounded-md flex items-center justify-center">
<img src={backIcon} className="h-4/5"/>
<div onClick={() => navigate(-1)} className="w-8 h-8 bg-red-100 rounded-md flex items-center justify-center">
<img src={backIcon} className="h-4/5" />
</div>
): (
) : (
<Link to='/shoppingCart'>
<div className='flex flex-col'>
<div className='absolute left-8 top-3 bg-red52 w-4 h-4 rounded-full text-xs flex items-center justify-center text-white'>{cart?.length}</div>
<svg width="35" height="35" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M7.5 7.67001V6.70001C7.5 4.45001 9.31 2.24001 11.56 2.03001C14.24 1.77001 16.5 3.88001 16.5 6.51001V7.89001" stroke="#df1452" strokeWidth="1.5" strokeMiterlimit="10" strokeLinecap="round" strokeLinejoin="round" />
<path d="M8.99999 22H15C19.02 22 19.74 20.39 19.95 18.43L20.7 12.43C20.97 9.99 20.27 8 16 8H7.99999C3.72999 8 3.02999 9.99 3.29999 12.43L4.04999 18.43C4.25999 20.39 4.97999 22 8.99999 22Z" stroke="#df1452" strokeWidth="1.5" strokeMiterlimit="10" strokeLinecap="round" strokeLinejoin="round" />
<path d="M15.4955 12H15.5045" stroke="#df1452" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
<path d="M8.49451 12H8.50349" stroke="#df1452" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
</svg>
</div>
</Link>
<div className='flex flex-col'>
<div className='absolute left-8 top-3 bg-red52 w-4 h-4 rounded-full text-xs flex items-center justify-center text-white'>{cart?.length}</div>
<svg width="35" height="35" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M7.5 7.67001V6.70001C7.5 4.45001 9.31 2.24001 11.56 2.03001C14.24 1.77001 16.5 3.88001 16.5 6.51001V7.89001" stroke="#df1452" strokeWidth="1.5" strokeMiterlimit="10" strokeLinecap="round" strokeLinejoin="round" />
<path d="M8.99999 22H15C19.02 22 19.74 20.39 19.95 18.43L20.7 12.43C20.97 9.99 20.27 8 16 8H7.99999C3.72999 8 3.02999 9.99 3.29999 12.43L4.04999 18.43C4.25999 20.39 4.97999 22 8.99999 22Z" stroke="#df1452" strokeWidth="1.5" strokeMiterlimit="10" strokeLinecap="round" strokeLinejoin="round" />
<path d="M15.4955 12H15.5045" stroke="#df1452" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
<path d="M8.49451 12H8.50349" stroke="#df1452" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
</svg>
</div>
</Link>
)
}
</div> :
@ -84,7 +91,7 @@ const Header = ({
{location.pathname.includes('adminpanel') ? <div></div> :
<>
<div className="header-profile h-full flex items-center">
<img src={arrowIcon} className=" ml-4 w-6" onClick={() => setSubMenu(!subMenu)} />
<img src={arrowIcon} className={`cursor-pointer ml-4 w-6 ${subMenu && 'transform rotate-180 duration-900 transition'}`} onClick={() => setSubMenu(!subMenu)} />
<div className="header-profile-img-container w-10 h-10 bg-color2 ml-2 rounded-full overflow-hidden">
<img src={avatar1} alt="avatar1" className='w-full' />
</div>

@ -26,11 +26,12 @@ $RegularFont:"IRANSansX-Regular";
@keyframes fadeInAnimation {
0% {
height: 0px;
// height: 0px;
opacity: 0;
}
100% {
height: 200px;
height: fit-content;
opacity: 1;
}
}

@ -51,7 +51,7 @@ const Input = ({
type={type ? type : 'text'}
name="Login-box-form-item-input-name"
id={`Login-box-form-item-input-name${id}`}
className={`Login-box-form-item-input w-full h-full px-4 outline-0 rounded-lg text-red52`}
className={`Login-box-form-item-input w-full h-full px-4 outline-0 rounded-lg text-gray-700 focus:text-red52`}
style={{ direction: direction ? direction : "ltr", backgroundColor: bg }}
onFocus={() => focusHandler(id ? id : 0)}
onBlur={() => blurHandler(id ? id : 0)}

@ -326,7 +326,7 @@ useEffect(() => {
<Link
to="/settings"
to="/myServices"
className="nav-menu-container-item w-full h-1/6 flex flex-col items-center justify-center hover:bg-color2_5 cursor-pointer"
onClick={() => chaneNav(3)}
>
@ -399,7 +399,7 @@ useEffect(() => {
className="nav-menu-container-item-title text-sm"
style={4 === navId ? { color: "#fff" } : { color: "#A5A8AB" }}
>
پشتیبانی
چت با اساتید
</div>
</Link>
{/* ---------- */}
@ -427,7 +427,7 @@ useEffect(() => {
className="nav-menu-container-item-title text-sm"
style={5 === navId ? { color: "#fff" } : { color: "#A5A8AB" }}
>
اطلاعات تماس
پشتیبانی
</div>
</Link>

@ -3,7 +3,156 @@ import { toast } from "react-toastify";
const initialState = {
loading: false,
error: null,
list: [],
list: [
{
id:1,
name: 'عربی دوازدهم',
price: 1000000,
vodTeacher: 'علی عبدالمالکی'
},
{
id:1,
name: 'عربی دوازدهم',
price: 1000000,
vodTeacher: 'علی عبدالمالکی'
},
{
id:1,
name: 'عربی دوازدهم',
price: 1000000,
vodTeacher: 'علی عبدالمالکی'
},
{
id:1,
name: 'عربی دوازدهم',
price: 1000000,
vodTeacher: 'علی عبدالمالکی'
},
{
id:1,
name: 'عربی دوازدهم',
price: 1000000,
vodTeacher: 'علی عبدالمالکی'
},
{
id:1,
name: 'عربی دوازدهم',
price: 1000000,
vodTeacher: 'علی عبدالمالکی'
},
{
id:1,
name: 'عربی دوازدهم',
price: 1000000,
vodTeacher: 'علی عبدالمالکی'
},
{
id:1,
name: 'عربی دوازدهم',
price: 1000000,
vodTeacher: 'علی عبدالمالکی'
},
{
id:1,
name: 'عربی دوازدهم',
price: 1000000,
vodTeacher: 'علی عبدالمالکی'
},
{
id:1,
name: 'عربی دوازدهم',
price: 1000000,
vodTeacher: 'علی عبدالمالکی'
},
{
id:1,
name: 'عربی دوازدهم',
price: 1000000,
vodTeacher: 'علی عبدالمالکی'
},
{
id:1,
name: 'عربی دوازدهم',
price: 1000000,
vodTeacher: 'علی عبدالمالکی'
},
{
id:1,
name: 'عربی دوازدهم',
price: 1000000,
vodTeacher: 'علی عبدالمالکی'
},
{
id:1,
name: 'عربی دوازدهم',
price: 1000000,
vodTeacher: 'علی عبدالمالکی'
},
{
id:1,
name: 'عربی دوازدهم',
price: 1000000,
vodTeacher: 'علی عبدالمالکی'
},
{
id:1,
name: 'عربی دوازدهم',
price: 1000000,
vodTeacher: 'علی عبدالمالکی'
},
{
id:1,
name: 'عربی دوازدهم',
price: 1000000,
vodTeacher: 'علی عبدالمالکی'
},
{
id:1,
name: 'عربی دوازدهم',
price: 1000000,
vodTeacher: 'علی عبدالمالکی'
},
{
id:1,
name: 'عربی دوازدهم',
price: 1000000,
vodTeacher: 'علی عبدالمالکی'
},
{
id:1,
name: 'عربی دوازدهم',
price: 1000000,
vodTeacher: 'علی عبدالمالکی'
},
{
id:1,
name: 'عربی دوازدهم',
price: 1000000,
vodTeacher: 'علی عبدالمالکی'
},
],
info: null,
searchResult: [],
filterResult: [],

@ -2,7 +2,21 @@ import proxy from "../proxy";
import { toast } from "react-toastify";
const initialState = {
status: proxy.status(),
status: {
name:'کوروش',
lastName: 'زراندوز',
roles: [],
rolesString: [
{
id:1,
roleName: 'پایه ششم',
},
{
id:2,
roleName: 'مدیر',
},
]
},
loading: false,
error: null,
list: null,

@ -33,9 +33,9 @@ export default function userFactor(state = initialState, action) {
case "userProduct/update":
return { ...state, loading: false, error: null };
case "userProduct/add":
if (window.location.pathname.indexOf("products") !== -1) {
toast.success("درخواست شما با موفقیت انجام شد.");
}
return { ...state, loading: false, error: null, sum: data.payPrice };
case "userProduct/delete":
return { ...state, loading: false, error: null };

@ -0,0 +1,12 @@
const separate = (number) => {
number += "";
number = number.replace(",", "");
let x = number.split(".");
let y = x[0];
let z = x.length > 1 ? "." + x[1] : "";
let rgx = /(\d+)(\d{3})/;
while (rgx.test(y)) y = y.replace(rgx, "$1" + "," + "$2");
return y + z;
};
export default separate;

@ -64,7 +64,7 @@ const AddExam = () => {
]
return(
<div className='flex flex-col w-[96%] py-[6%] bg-grayFD rtl'>
<div className='flex flex-col w-[96%] overflow-scroll overflow-x-hidden py-[6%] bg-grayFD rtl' style={{height: '100vh'}}>
<div className='flex w-full items-center py-4 pb-8 px-10 border-b border-gray-300'>
<h1 className="text-blue3A text-lg font-bold w-1/5 text-right px-4 border-r-4 border-blue65">
ساخت آزمون جدید

@ -47,6 +47,11 @@ const AddExamDescription = ({ grades, addExamState, dispatch, stepClick, backSte
range
calendar={persian}
locale={persian_fa}
renderButton={(direction, handleClick) => (
<button className="text-blue-500 font-bold mx-2" onClick={handleClick}>
{direction === "right" ? ">" : "<"}
</button>
)}
render={<CostumeDatePickerInput title='تاریخ و زمان شروع آزمون'/>}
plugins={[
@ -59,6 +64,11 @@ const AddExamDescription = ({ grades, addExamState, dispatch, stepClick, backSte
range
calendar={persian}
locale={persian_fa}
renderButton={(direction, handleClick) => (
<button className="text-blue-500 font-bold mx-2" onClick={handleClick}>
{direction === "right" ? ">" : "<"}
</button>
)}
render={<CostumeDatePickerInput title='تاریخ و زمان پایان آزمون'/>}
plugins={[

@ -262,11 +262,11 @@ const AddQuestionsFromBank = ({ grades, addExamState, dispatch, stepClick, backS
<div className=" rtl px-2 text-white bg-red52">
{item.selectedQuestions.length} سوال
</div>
{
selectedCourse.id == item.id && <p className=" text-left px-4" >
<p className=" text-left px-4" >
<span onClick={() => { dispatch({ type: 'REMOVE_EXAM_COURSE', payload: item }); setSelectedCourse(null); setFakeState(fakeState + 24) }}> x </span>
</p>
}
</div>
<p className="text-red52">

@ -12,7 +12,7 @@ const SideAP = () => {
انتشار محصول
</h1>
<div className="w-full px-6 flex rtl justify-between">
<button className="w-1/2 border border-blueED rounded-lg font-bold text-blueED py-4 ml-2" style={{background: 'rgba(16, 100, 205, 0.24)'}}>
<button className="w-1/2 border border-blueED rounded-lg font-bold text-blueED py-4 ml-2" >
ذخیره در پیشنویس
</button>
<button className="w-1/2 border border-blueCD rounded-lg font-bold text-white py-4 mr-2 bg-blueCD">

@ -52,7 +52,15 @@ const ContactUs = ({isMobile}) => {
<form className="flex flex-col w-full">
<Input title='نام' gapSize='8' id={0} style={{ width: '100%' }} />
<Input title='ایمیل' gapSize='8' id={1} style={{ width: '100%', background: 'rgba(249, 249, 249, 0.75)' }} />
<Input title='ایمیل' gapSize='8' id={1} style={{ width: '100%', background: 'rgba(249, 249, 249, 0.75)' }} type="email" onChange={(e) => {
let value = e.target.value
value = value.replace(/[^A-Za-z]/ig, '')
this.setState({
value,
})
}}/>
<select className="bg-white border border-solid border-gray-200 w-full my-4 p-3 rounded-lg text-gray-400 outline-red52">
{departments.map((item, index) => (
<option key={`Grade__${index}`}>{item.title}</option>
@ -114,12 +122,26 @@ const ContactUs = ({isMobile}) => {
<form className="flex flex-col w-full">
<Input title='نام' gapSize='8' id={0} style={{ width: '100%' }} />
<Input title='ایمیل' gapSize='8' id={1} style={{ width: '100%' }} />
<Input title='ایمیل' type={'email'} gapSize='8' id={1} style={{ width: '100%' }} onChange={(e) => {
let value = e.target.value
value = value.replace(/[^A-Za-z]/ig, '')
this.setState({
value,
})
}} />
<select className="bg-white border border-solid border-gray-200 w-full my-4 p-3 rounded-lg text-gray-400 outline-red52">
{departments.map((item, index) => (
<option key={`Grade__${index}`}>{item.title}</option>
))}
</select>
<select className="bg-white border border-solid border-gray-200 w-full my-4 mt-0 p-3 rounded-lg text-gray-400 outline-red52">
<option>انتخاب محصول / خدمات</option>
{departments.map((item, index) => (
<option key={`Grade__${index}`}>{item.title}</option>
))}
</select>
<textarea className="w-full border-gray-200 border p-3 rounded-lg text-gray-400 outline-red52" rows='7' cols='70' placeholder="متن پیام را اینجا تایپ کنید">
</textarea>

@ -12,7 +12,10 @@ import SimpleCalendar from '../../components/Calendar'
import MobileHome from "./mobile";
import { connect } from "react-redux";
import { publicApi } from "../../redux/actions";
// import { Calendar } from "react-multi-date-picker"
// import persian from "react-date-object/calendars/persian"
// import persian_fa from "react-date-object/locales/persian_fa"
import './cal.css';
const Dashboard = ({
ActiveUserFullInfo,
@ -48,7 +51,50 @@ const Dashboard = ({
/> */}
<div className="w-full mb-4">
<SimpleCalendar />
{/* <Calendar
calendar={persian}
locale={persian_fa}
className="custom-calendar red"
showOtherDays
format="YYYY/MM/dddd"
weekDays={['شنبه', 'یک شنبه', 'دو شنبه', 'سه شنبه' , 'چهار شنبه', 'پنج شنبه', 'جمعه']}
mapDays={({ date }) => {
let thisEvent;
if ([4, 5, 6, 7].includes(date.day)) {thisEvent = false}
if([{
day: 4,
event: 'جشن',
},
{
day: 8,
event: 'شادی',
},
{
day: 12,
event: 'پایکوبی',
},
{
day: 21,
event: 'خنده',
},
].filter(itm => itm.day)){
thisEvent = true
console.log('a+')
}
if (thisEvent == false) return {
className: "highlight border-solid border-b border-red-500 rounded-md",
// onClick: () => setEvents()
}
}}
>
</Calendar> */}
<SimpleCalendar />
</div>
@ -60,7 +106,7 @@ const Dashboard = ({
<div className="dashboard-right-part-row2 w-full mt-4 flex items-start justify-between flex-row-reverse">
<LastActivity />
{/* {ActiveUserFullInfo && (
{/* {ActiveUserFullInfo && (b
<div className="dashboard-blur-box w-full h-full absolute top-0 left-0 backdrop-blur z-40">
<UserFullInfo
buyBtn={true}

@ -0,0 +1,24 @@
.custom-calendar .rmdp-top-class,
.custom-calendar .rmdp-calendar > div:not(:first-child),
.custom-calendar .rmdp-day-picker {
width:100%;
padding: 1%;
/* height: 100%; */
}
.custom-calendar,
.custom-calendar .rmdp-calendar,
.custom-calendar .rmdp-day-picker > div {
width: 100%;
height: 100%;
}
.custom-calendar .rmdp-day {
width: unset;
flex: 1;
}
.custom-calendar .rmdp-week {
height: 14.5%;
}

@ -34,8 +34,8 @@ const Services = ({
videos,
pushToCart,
}) => {
const [filterCheck, setFilterCheck] = useState([false, false, false, false]);
const [filterCheck, setFilterCheck] = useState(null);
const [filter, setFilter] = useState({
search: "",
grade: "",
@ -105,27 +105,27 @@ const Services = ({
const chooseGame = (id) => {
setGameId(id);
};
if (!isMobile){
return (
<div
className="flex items-start justify-between"
style={{ width: "93.5%", direction: "rtl" }}
>
{popup ? (
<ServicePopUp
content={popUpContent}
closeOnClick={() => setPopUp(false)}
/>
) : null}
if (!isMobile) {
return (
<div
className="w-3/4 flex flex-col justify-center "
style={{ marginTop: "5.5%" }}
className="flex items-start justify-between"
style={{ width: "93.5%", direction: "rtl", height: '100vh' }}
>
{popup ? (
<ServicePopUp
content={popUpContent}
closeOnClick={() => setPopUp(false)}
/>
) : null}
<div
className="relative h-48 w-full border-b border-red82OP my-4 px-10"
style={{ direction: "ltr" }}
className="w-3/4 flex flex-col justify-center "
style={{ paddingTop:'5.5%', height: '100vh' }}
>
{/* {
<div
className="h-48 w-full border-b border-red82OP my-4 px-10"
style={{ direction: "ltr" }}
>
{/* {
services.map((item, index) => (
<div
className="flex flex-col justify-center items-center transition-all duration-200 m-4 rounded-xl border-2 border-red82OP hover:cursor-pointer hover:bg-pinkF5"
@ -154,295 +154,16 @@ if (!isMobile){
</div>
))
} */}
<Games
selectedGames={selectedGames}
gameId={gameId}
chooseGame={chooseGame}
/>
</div>
{/* filters */}
{gameId != 6 && <div className="flex mx-2 my-4 justify-center">
<div className="flex items-center ">
<svg
xmlns="http://www.w3.org/2000/svg"
width="40"
height="40"
viewBox="0 0 14.378 14.378"
>
<g
id="vuesax_linear_filter-tick"
data-name="vuesax/linear/filter-tick"
transform="translate(-620 -700)"
>
<g id="filter-tick" transform="translate(620 700)">
<path
id="Vector"
d="M5.691,2.846a2.8,2.8,0,0,1-.407,1.468A2.836,2.836,0,0,1,2.846,5.691,2.768,2.768,0,0,1,1.312,5.23a2.685,2.685,0,0,1-.9-.917A2.807,2.807,0,0,1,0,2.846,2.848,2.848,0,0,1,2.846,0a2.648,2.648,0,0,1,.623.072A2.84,2.84,0,0,1,5.691,2.846Z"
transform="translate(7.267 5.991)"
fill="none"
stroke="#696969"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="0.6"
/>
<path
id="Vector-2"
data-name="Vector"
d="M0,.7l.7.7L2.217,0"
transform="translate(9.004 8.136)"
fill="none"
stroke="#696969"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="0.6"
/>
<path
id="Vector-3"
data-name="Vector"
d="M0,0H14.378V14.378H0Z"
transform="translate(14.378 14.378) rotate(180)"
fill="none"
opacity="0"
/>
<g id="Group" transform="translate(1.983 1.198)">
<path
id="Vector-4"
data-name="Vector"
d="M10.412,1.21V2.54a2.292,2.292,0,0,1-.605,1.4l-1.054.929a2.648,2.648,0,0,0-.623-.072A2.848,2.848,0,0,0,5.284,7.638,2.807,2.807,0,0,0,5.7,9.106a2.685,2.685,0,0,0,.9.917v.2a1.336,1.336,0,0,1-.545,1.03l-.845.545a1.233,1.233,0,0,1-1.875-1.03V7.567A2.342,2.342,0,0,0,2.846,6.3l-2.3-2.42A2.041,2.041,0,0,1,0,2.666V1.27A1.229,1.229,0,0,1,1.21,0H9.2A1.215,1.215,0,0,1,10.412,1.21Z"
fill="none"
stroke="#696969"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="0.6"
/>
</g>
</g>
</g>
</svg>
</div>
<div className="flex items-center mx-4 pl-6 border-l-2 border-gray-300">
<div
className={`flex w-32 border-2 p-2 mx-2 justify-center items-center rounded-md cursor-pointer
hover:border-red52 hover:text-red52 hover:bg-pinkF5
${
filterCheck[0]
? "border-red52 text-red52 bg-pinkF5"
: "border-gray200 text-gray-400"
}`}
onClick={(prevState) =>
setFilterCheck([
...prevState,
(filterCheck[0] = !filterCheck[0]),
])
}
>
<h3>آنلاین</h3>
{filterCheck[0] && (
<div className="flex w-full" style={{ direction: "ltr" }}>
<div className="w-4 h-4 text-white text-sm rounded-full flex justify-center items-center bg-red52">
<svg
width="37"
height="37"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M7.75 12L10.58 14.83L16.25 9.17004"
stroke="#fff"
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
</div>
</div>
)}
</div>
<div
className={`flex w-32 border-2 p-2 mx-2 justify-center items-center rounded-md cursor-pointer
hover:border-red52 hover:text-red52 hover:bg-pinkF5
${
filterCheck[0]
? "border-red52 text-red52 bg-pinkF5"
: "border-gray200 text-gray-400"
}`}
onClick={(prevState) =>
setFilterCheck([
...prevState,
(filterCheck[0] = !filterCheck[0]),
])
}
>
<h3>حضوری</h3>
{filterCheck[0] && (
<div className="flex w-full" style={{ direction: "ltr" }}>
<div className="w-4 h-4 text-white text-sm rounded-full flex justify-center items-center bg-red52">
<svg
width="37"
height="37"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M7.75 12L10.58 14.83L16.25 9.17004"
stroke="#fff"
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
</div>
</div>
)}
</div>
</div>
<div className="flex items-center mx-4 pl-6">
<select className="bg-white border border-solid border-gray-300 w-72 p-3 rounded-lg text-gray-400 outline-red52">
{services.map((item, index) => (
<option key={`Grade__${index}`}>{item.title}</option>
))}
</select>
</div>
</div>}
<div
className={`flex ${
gameId == 2 && "flex-col"
} items-center w-full justify-center flex-wrap `}
>
{books?.map((product, index) => (
<Link
// to={"/class/" + product?.id}
to="#"
key={`PRODUCT__${gameId}__${index}`}
onClick={() => {
setPopUpContent({
id: gameId,
title: product?.name,
video: "",
teacher: product.vodTeacher,
description:
"در این قسمت یک توضیحات کوتاه در مورد دوره خواهد آمد که بصورت دو خط در این قسمت قرار میگیرد در این قسمت یک توضیحات کوتاه در مورد دوره خواهد آمد که بصورت دو خط در این قسمت",
price: product.product[0].price,
classHour: 21,
classMinute: 56,
image: 'https://narafella.ir/wp-content/uploads/2021/08/books-min.jpg',
examCont : [
{
title: 'بخش اول آزمون ' + product.name,
date: '۱۴۰۰/۱۲/۱۳',
time: '۱۴:۴۶',
numberOfQ: '۱۸',
price: 10000
},
{
title: 'بخش دوم آزمون ' + product.name,
date: '۱۴۰۰/۱۲/۱۴',
time: '۱۴:۴۶',
numberOfQ: '۱۸',
price: 10000
},
{
title: 'بخش سوم آزمون ' + product.name,
date: '۱۴۰۰/۱۲/۱۵',
time: '۱۴:۴۶',
numberOfQ: '۳۲',
price: 250000
},
]
});
if(gameId !== 2){
setPopUp(true)
}
console.log(gameId)
}}
>
{/* {console.log(product)} */}
<Product
key={index}
productsType={filter.productsType}
product={product}
index={Number(index)}
productName={`${product?.name}`}
productCat={`پایه ${grades[product?.gradeId]}`}
productPrice={product.product[0].price}
// productImg={"https://dnvn.ir/api/v1/file/" + product?.fileIds}
numberOfRegards={160}
productHolderBorder=""
productHolderHoverBorder="shadow-md"
teacher={product.vodTeacher}
catId={gameId}
onClick={() => null}
btnOnClick={() =>{
pushToCart({
productId: product?.id,
count: 1,
});
setTimeout(() => setPopUp(false), 1)
console.log(popup)
console.log(product.id)
}
}
/>
</Link>
))}
{
gameId == 6 &&
<div className="w-3/4 p-8 py-10 flex mt-10 justify-between items-center border-2 rounded-xl border-red52 " >
<div className="w-1/5">
<h1 className="text-red26 font-bold">افزایش مبلغ دلخواه</h1>
<p className="text-red26 text-sm">لطفا مبلغ دلخواه خود را در کادر روبرو وارد کنید</p>
</div>
<div className="flex">
<input
placeholder="12,000,000"
className="border border-red52 rounded-lg h-12 w-36 text-center rounded-l-none border-l-0 px-4 outline-none"
/><p className="border flex justify-center items-center border-red52 rounded-lg h-12 w-12 text-center rounded-r-none border-r-0 px-4">ریال</p>
</div>
<div className="flex">
<p className="border flex justify-center items-center border-red52 rounded-lg h-12 w-12 text-center rounded-l-none border-l-0 px-10">بابت</p>
<input
placeholder="شارژ حساب"
className="border border-red52 rounded-lg h-12 w-60 text-center rounded-r-none border-r-0 px-4 outline-none"
/>
</div>
<button className="cursor-pointer text-red26 border border-red52 rounded-lg bg-red82OP font-bold text-sm px-6 h-12">افزودن به اعتبار</button>
</div>
}
</div>
</div>
{!isMobile && <div className="w-1/4 fixed left-0" style={{ height: "100vh" }}>
<ShoppingCart />
</div> }
</div>
);}
// Mobile Version
else{
return(
<div className="flex flex-col items-center mt-16 mb-40 rtl">
<Games
selectedGames={selectedGames}
gameId={gameId}
chooseGame={chooseGame}
/>
<div className="w-11/12 border-b border-gray-200"></div>
{
gameId !== 6 && <div className="flex items-center mx-4 my-4">
<svg
<Games
selectedGames={selectedGames}
gameId={gameId}
chooseGame={chooseGame}
/>
</div>
{/* filters */}
{gameId != 6 && <div className="flex mx-10 my-4 justify-start">
<div className="flex items-center ">
<svg
xmlns="http://www.w3.org/2000/svg"
width="40"
height="40"
@ -498,23 +219,21 @@ if (!isMobile){
</g>
</g>
</svg>
</div>
<div className="flex items-center mx-6 pl-6 border-l-2 border-gray-300">
<div
className={`flex w-32 border-2 p-2 mx-2 justify-center items-center rounded-md cursor-pointer
hover:border-red52 hover:text-red52 hover:bg-pinkF5
${
filterCheck[0]
? "border-red52 text-red52 bg-pinkF5"
: "border-gray200 text-gray-400"
}`}
className={`flex w-32 border-2 p-2 px-4 mx-2 justify-center items-center rounded-md cursor-pointer
hover:border-red52 hover:text-red52 hover:bg-pinkF5
${filterCheck == 'Online'
? "border-red52 text-red52 bg-pinkF5"
: "border-gray200 text-gray-400"
}`}
onClick={(prevState) =>
setFilterCheck([
...prevState,
(filterCheck[0] = !filterCheck[0]),
])
setFilterCheck('Online')
}
>
<h3>آنلاین</h3>
{filterCheck[0] && (
{filterCheck == 'Online' && (
<div className="flex w-full" style={{ direction: "ltr" }}>
<div className="w-4 h-4 text-white text-sm rounded-full flex justify-center items-center bg-red52">
<svg
@ -534,27 +253,23 @@ if (!isMobile){
</svg>
</div>
</div>
)}
</div>
<div
className={`flex w-32 border-2 p-2 mx-2 justify-center items-center rounded-md cursor-pointer
hover:border-red52 hover:text-red52 hover:bg-pinkF5
${
filterCheck[1]
? "border-red52 text-red52 bg-pinkF5"
: "border-gray200 text-gray-400"
}`}
className={`flex w-32 border-2 p-2 mx-2 px-4 justify-center items-center rounded-md cursor-pointer
hover:border-red52 hover:text-red52 hover:bg-pinkF5
${filterCheck == 'Physical'
? "border-red52 text-red52 bg-pinkF5"
: "border-gray200 text-gray-400"
}`}
onClick={(prevState) =>
setFilterCheck([
...prevState,
(filterCheck[0] = !filterCheck[0]),
])
setFilterCheck('Physical')
}
>
<h3>حضوری</h3>
{filterCheck[0] && (
{filterCheck == 'Physical' && (
<div className="flex w-full" style={{ direction: "ltr" }}>
<div className="w-4 h-4 text-white text-sm rounded-full flex justify-center items-center bg-red52">
<svg
@ -574,15 +289,290 @@ if (!isMobile){
</svg>
</div>
</div>
)}
</div>
</div>
}
<div className="w-11/12 border-b border-gray-200"></div>
<div className="flex items-center mx-4 pl-6">
<select className="bg-white border border-solid border-gray-300 w-72 p-3 rounded-lg text-gray-400 outline-red52">
{services.map((item, index) => (
<option key={`Grade__${index}`}>{item.title}</option>
))}
</select>
</div>
</div>}
<div
className={`flex
} items-center w-full justify-center overflow-x-hidden overflow-scroll flex-wrap h-full `}
>
{books?.map((product, index) => (
<div
// to={"/class/" + product?.id}
key={`PRODUCT__${gameId}__${index}`}
onClick={() => {
setPopUpContent({
id: gameId,
title: product?.name,
video: "",
teacher: product?.vodTeacher,
description:
"در این قسمت یک توضیحات کوتاه در مورد دوره خواهد آمد که بصورت دو خط در این قسمت قرار میگیرد در این قسمت یک توضیحات کوتاه در مورد دوره خواهد آمد که بصورت دو خط در این قسمت",
price: product?.price,
classHour: 21,
classMinute: 56,
image: 'https://narafella.ir/wp-content/uploads/2021/08/books-min.jpg',
examCont: [
{
title: 'بخش اول آزمون ' + product.name,
date: '۱۴۰۰/۱۲/۱۳',
time: '۱۴:۴۶',
numberOfQ: '۱۸',
price: 10000
},
{
title: 'بخش دوم آزمون ' + product.name,
date: '۱۴۰۰/۱۲/۱۴',
time: '۱۴:۴۶',
numberOfQ: '۱۸',
price: 10000
},
{
title: 'بخش سوم آزمون ' + product.name,
date: '۱۴۰۰/۱۲/۱۵',
time: '۱۴:۴۶',
numberOfQ: '۳۲',
price: 250000
},
]
});
if (gameId !== 2) {
setPopUp(true)
}
console.log(gameId)
}}
>
{/* {console.log(product)} */}
<Product
key={index}
productsType={filter.productsType}
product={product}
index={Number(index)}
productName={`${product?.name}`}
productCat={`پایه ${grades[product?.gradeId]}`}
productPrice={product?.price}
// productImg={"https://dnvn.ir/api/v1/file/" + product?.fileIds}
numberOfRegards={160}
productHolderBorder=""
productHolderHoverBorder="shadow-md"
teacher={product.vodTeacher}
catId={gameId}
onClick={() => null}
btnOnClick={() => {
pushToCart({
productId: product?.id,
count: 1,
});
setTimeout(() => setPopUp(false), 1)
console.log(popup)
console.log(product.id)
}
}
/>
</div>
))}
{
gameId == 6 &&
<div className="w-3/4 p-8 py-10 flex mt-10 justify-between text-right items-center border-2 rounded-xl border-red52 " >
<div className="w-1/5">
<h1 className="text-red26 font-bold">افزایش مبلغ دلخواه</h1>
<p className="text-red26 text-sm">لطفا مبلغ دلخواه خود را در کادر روبرو وارد کنید</p>
</div>
<div className="flex">
<input
placeholder="12,000,000"
className="border border-red52 rounded-lg h-12 w-36 text-center rounded-l-none border-l-0 px-4 outline-none"
/><p className="border flex justify-center items-center border-red52 rounded-lg h-12 w-12 text-center rounded-r-none border-r-0 px-4">ریال</p>
</div>
<div className="flex">
<p className="border flex justify-center items-center border-red52 rounded-lg h-12 w-12 text-center rounded-l-none border-l-0 px-10">بابت</p>
<input
placeholder="شارژ حساب"
className="border border-red52 rounded-lg h-12 w-60 text-center rounded-r-none border-r-0 px-4 outline-none"
/>
</div>
<button className="cursor-pointer text-red26 border border-red52 rounded-lg bg-red82OP font-bold text-sm px-6 h-12">افزودن به اعتبار</button>
</div>
}
</div>
</div>
{!isMobile && <div className="w-1/4 left-0" style={{ height: "100vh" }}>
<ShoppingCart />
</div>}
</div>
);
}
// Mobile Version
else {
return (
<div className="flex flex-col items-center mt-16 mb-40 rtl">
<Games
selectedGames={selectedGames}
gameId={gameId}
chooseGame={chooseGame}
/>
<div className="w-11/12 border-b border-gray-200"></div>
{
gameId !== 6 && <div className="flex items-center mx-4 my-4">
<svg
xmlns="http://www.w3.org/2000/svg"
width="40"
height="40"
viewBox="0 0 14.378 14.378"
>
<g
id="vuesax_linear_filter-tick"
data-name="vuesax/linear/filter-tick"
transform="translate(-620 -700)"
>
<g id="filter-tick" transform="translate(620 700)">
<path
id="Vector"
d="M5.691,2.846a2.8,2.8,0,0,1-.407,1.468A2.836,2.836,0,0,1,2.846,5.691,2.768,2.768,0,0,1,1.312,5.23a2.685,2.685,0,0,1-.9-.917A2.807,2.807,0,0,1,0,2.846,2.848,2.848,0,0,1,2.846,0a2.648,2.648,0,0,1,.623.072A2.84,2.84,0,0,1,5.691,2.846Z"
transform="translate(7.267 5.991)"
fill="none"
stroke="#696969"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="0.6"
/>
<path
id="Vector-2"
data-name="Vector"
d="M0,.7l.7.7L2.217,0"
transform="translate(9.004 8.136)"
fill="none"
stroke="#696969"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="0.6"
/>
<path
id="Vector-3"
data-name="Vector"
d="M0,0H14.378V14.378H0Z"
transform="translate(14.378 14.378) rotate(180)"
fill="none"
opacity="0"
/>
<g id="Group" transform="translate(1.983 1.198)">
<path
id="Vector-4"
data-name="Vector"
d="M10.412,1.21V2.54a2.292,2.292,0,0,1-.605,1.4l-1.054.929a2.648,2.648,0,0,0-.623-.072A2.848,2.848,0,0,0,5.284,7.638,2.807,2.807,0,0,0,5.7,9.106a2.685,2.685,0,0,0,.9.917v.2a1.336,1.336,0,0,1-.545,1.03l-.845.545a1.233,1.233,0,0,1-1.875-1.03V7.567A2.342,2.342,0,0,0,2.846,6.3l-2.3-2.42A2.041,2.041,0,0,1,0,2.666V1.27A1.229,1.229,0,0,1,1.21,0H9.2A1.215,1.215,0,0,1,10.412,1.21Z"
fill="none"
stroke="#696969"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="0.6"
/>
</g>
</g>
</g>
</svg>
<div
className={`flex w-32 border-2 p-2 mx-2 justify-center items-center rounded-md cursor-pointer
hover:border-red52 hover:text-red52 hover:bg-pinkF5
${filterCheck[0]
? "border-red52 text-red52 bg-pinkF5"
: "border-gray200 text-gray-400"
}`}
onClick={(prevState) =>
setFilterCheck([
...prevState,
(filterCheck[0] = !filterCheck[0]),
])
}
>
<h3>آنلاین</h3>
{filterCheck[0] && (
<div className="flex w-full" style={{ direction: "ltr" }}>
<div className="w-4 h-4 text-white text-sm rounded-full flex justify-center items-center bg-red52">
<svg
width="37"
height="37"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M7.75 12L10.58 14.83L16.25 9.17004"
stroke="#fff"
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
</div>
</div>
)}
</div>
<div
className={`flex w-32 border-2 p-2 mx-2 justify-center items-center rounded-md cursor-pointer
hover:border-red52 hover:text-red52 hover:bg-pinkF5
${filterCheck[1]
? "border-red52 text-red52 bg-pinkF5"
: "border-gray200 text-gray-400"
}`}
onClick={(prevState) =>
setFilterCheck([
...prevState,
(filterCheck[0] = !filterCheck[0]),
])
}
>
<h3>حضوری</h3>
{filterCheck[0] && (
<div className="flex w-full" style={{ direction: "ltr" }}>
<div className="w-4 h-4 text-white text-sm rounded-full flex justify-center items-center bg-red52">
<svg
width="37"
height="37"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M7.75 12L10.58 14.83L16.25 9.17004"
stroke="#fff"
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
</div>
</div>
)}
</div>
</div>
}
<div className="w-11/12 border-b border-gray-200"></div>
<div
className={`flex items-center w-full justify-center flex-col `}
>
{books?.map((product, index) => (
@ -602,7 +592,7 @@ if (!isMobile){
classHour: 21,
classMinute: 56,
image: 'https://narafella.ir/wp-content/uploads/2021/08/books-min.jpg',
examCont : [
examCont: [
{
title: 'بخش اول آزمون ' + product.name,
date: '۱۴۰۰/۱۲/۱۳',
@ -651,42 +641,42 @@ if (!isMobile){
// userId: product?.userId,
count: 1,
})
}
/>
</Link>
))}
{
gameId == 6 &&
gameId == 6 &&
<div className="w-full p-8 py-10 flex flex-col justify-between items-center " >
<div className="w-full text-right mb-4">
<h1 className="text-red26 font-bold">افزایش مبلغ دلخواه</h1>
<p className="text-red26 text-sm">لطفا مبلغ دلخواه خود را در کادر روبرو وارد کنید</p>
</div>
<div className="flex w-full mb-4">
<input
</div>
<div className="flex w-full mb-4">
<input
placeholder="12,000,000"
className="border border-red5B rounded-lg h-14 w-3/4 text-center rounded-l-none border-l-0 px-4 outline-none"
/><p className="border flex justify-center items-center border-red5B rounded-lg h-14 w-1/4 text-center rounded-r-none border-r-0 px-4">ریال</p>
</div>
<div className="flex w-full mb-4">
/><p className="border flex justify-center items-center border-red5B rounded-lg h-14 w-1/4 text-center rounded-r-none border-r-0 px-4">ریال</p>
</div>
<div className="flex w-full mb-4">
<p className="border flex justify-center items-center border-red52 rounded-lg h-14 w-1/5 text-center rounded-l-none border-l-0 px-10">بابت</p>
<input
<input
placeholder="شارژ حساب"
className="border border-red52 rounded-lg h-14 w-4/5 text-center rounded-r-none border-r-0 px-4 outline-none"
/>
</div>
<button className="cursor-pointer text-blue52 border border-blueDF w-full rounded-lg font-bold text-sm px-6 h-14"
style={{background: 'rgba(211, 246, 255, 0.44)'}}>
افزودن به سبد خرید
</button>
/>
</div>
<button className="cursor-pointer text-blue52 border border-blueDF w-full rounded-lg font-bold text-sm px-6 h-14"
style={{ background: 'rgba(211, 246, 255, 0.44)' }}>
افزودن به سبد خرید
</button>
</div>
}
</div>
</div>
</div>
</div>
)
}

Loading…
Cancel
Save