|
|
|
import React, {useEffect, useState, useRef} from "react";
|
|
|
|
import { Link } from "react-router-dom";
|
|
|
|
import logo from "../../assets/img/big-logo.svg";
|
|
|
|
import firstPic from '../../assets/img/undraw_professor_-8-lrt.svg';
|
|
|
|
import secondPic from '../../assets/img/undraw_quiz_nlyh.svg';
|
|
|
|
import thirdPic from '../../assets/img/undraw_certificate_re_yadi.svg';
|
|
|
|
import { Slide } from 'react-slideshow-image';
|
|
|
|
import './index.css';
|
|
|
|
|
|
|
|
const LoginSignUp = ({ activeLogin }) => {
|
|
|
|
const [index, setIndex] = useState(0);
|
|
|
|
const timeoutRef = useRef(null);
|
|
|
|
|
|
|
|
function resetTimeout() {
|
|
|
|
if (timeoutRef.current) {
|
|
|
|
clearTimeout(timeoutRef.current);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
useEffect(() => {
|
|
|
|
resetTimeout();
|
|
|
|
timeoutRef.current = setTimeout(
|
|
|
|
() =>
|
|
|
|
setIndex((prevIndex) =>
|
|
|
|
prevIndex === slideContents.length - 1 ? 0 : prevIndex + 1
|
|
|
|
),
|
|
|
|
delay
|
|
|
|
);
|
|
|
|
|
|
|
|
return () => {
|
|
|
|
resetTimeout();
|
|
|
|
};
|
|
|
|
}, [index]);
|
|
|
|
const slideContents = [
|
|
|
|
{
|
|
|
|
id:0,
|
|
|
|
image: firstPic,
|
|
|
|
title: 'یک معلم دیوانه در کمین شما نشسته است مراقب باشید' ,
|
|
|
|
description: 'معلمی که دانش آموزانش رو شب ها شکار می کند و این متن شاید باعث تعجب شما شده باشد که آیا طراح دیوانه شده است یا خیر ؟ ',
|
|
|
|
},
|
|
|
|
{
|
|
|
|
id:1,
|
|
|
|
image: secondPic,
|
|
|
|
title: 'یک آزمون سخت و افتضاح در راه هست!' ,
|
|
|
|
description: 'لورم ایپسوم نمیخواستم استفاده کنم برای همین این متنای عجیب رو مینویسم ببینم چجوری میشه تهش بالاخره اونا هم قراره یه متن عجیب بنویسن ',
|
|
|
|
},
|
|
|
|
{
|
|
|
|
id:1,
|
|
|
|
image: thirdPic,
|
|
|
|
title: 'یک اسلاید عجیب غریب دیگر در راه هست' ,
|
|
|
|
description: 'معلمی که دانش آموزانش رو شب ها شکار می کند و این متن شاید باعث تعجب شما شده باشد که آیا طراح دیوانه شده است یا خیر ؟ ',
|
|
|
|
},
|
|
|
|
];
|
|
|
|
const delay = 2500;
|
|
|
|
return (
|
|
|
|
<div className="w-full flex items-center justify-center" style={{ height: '100vh', direction: 'rtl' }}>
|
|
|
|
<div className="w-3/4 border border-solid border-gray-200 flex rounded-xl">
|
|
|
|
{/* form */}
|
|
|
|
|
|
|
|
<div className="flex w-2/5 border-0 border-l border-solid border flex-col items-center p-6">
|
|
|
|
<img src={logo} className="w-1/2 m-4" />
|
|
|
|
<div className="flex flex-col items-start justify-start leading-normal">
|
|
|
|
<h1 className="text-red26 text-lg font-bold">ورود یا ثبت نام</h1>
|
|
|
|
<h1 className="text-red26 text-lg font-bold">سامانه ثبت نام مدارس موسسه علمی اندیشمند</h1>
|
|
|
|
<p className="text-gray-500 text-sm mt-2">
|
|
|
|
کاربر گرامی لطفا یکی از دو گزینه زیر را انتخاب نمایید.
|
|
|
|
<br />
|
|
|
|
در صورتی که عضو نیستید روی دکمه ثبت نام بزنید
|
|
|
|
</p>
|
|
|
|
<Link
|
|
|
|
to="/dashboard"
|
|
|
|
className="Login-box-form-btn w-full h-12 rounded-lg bg-red52 text-white flex items-center justify-center mt-6"
|
|
|
|
onClick={activeLogin}
|
|
|
|
>
|
|
|
|
ورود
|
|
|
|
</Link>
|
|
|
|
<Link
|
|
|
|
to="/dashboard"
|
|
|
|
className="Login-box-form-btn w-full h-12 rounded-lg border border-solid border-red52 text-red52 flex items-center justify-center mt-4"
|
|
|
|
onClick={activeLogin}
|
|
|
|
>
|
|
|
|
ثبت نام
|
|
|
|
</Link>
|
|
|
|
<div className="w-full flex flex-col items-center justify-center">
|
|
|
|
<p className="w-3/5 text-xs my-20 text-center text-red26">
|
|
|
|
ثبت نام شما در سامانه به منزله قبول
|
|
|
|
<Link to="" className="font-bold"> شرایط و قوانین استفاده </Link>
|
|
|
|
میباشد
|
|
|
|
</p>
|
|
|
|
<p className="text-gray-300 text-xs">1401 - 1400</p>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
{/* Slider */}
|
|
|
|
|
|
|
|
<div className="bg-grayEC w-3/5 rounded-tl-xl rounded-bl-xl flex flex-col items-center justify-center" >
|
|
|
|
<div className="slideshow" style={{direction: 'ltr'}}>
|
|
|
|
<div
|
|
|
|
className="slideshowSlider"
|
|
|
|
style={{ transform: `translate3d(${-index * 100}%, 0, 0)` }}
|
|
|
|
>
|
|
|
|
{slideContents.map((item, index) => (
|
|
|
|
<div
|
|
|
|
className="slide"
|
|
|
|
key={`sildeNo${index}`}
|
|
|
|
|
|
|
|
>
|
|
|
|
<div className="w-full flex flex-col justify-center items-center">
|
|
|
|
<img src={item.image} style={{height: '500px'}}/>
|
|
|
|
<h1 className="w-4/5 text-xl my-2 text-red26 font-bold">{item.title}</h1>
|
|
|
|
<p className=" px-12 text-right text-sm whitespace-normal">{item.description}</p>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
))}
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<div className="slideshowDots">
|
|
|
|
{slideContents.map((_, idx) => (
|
|
|
|
<div
|
|
|
|
key={idx}
|
|
|
|
className={`slideshowDot${index === idx ? " active" : ""}`}
|
|
|
|
onClick={() => {
|
|
|
|
setIndex(idx);
|
|
|
|
}}
|
|
|
|
></div>
|
|
|
|
))}
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
);
|
|
|
|
};
|
|
|
|
|
|
|
|
export default LoginSignUp;
|