parent
9fc4c07336
commit
b6f8d89567
5 changed files with 176 additions and 5 deletions
|
After Width: | Height: | Size: 656 B |
@ -0,0 +1,161 @@ |
||||
|
||||
|
||||
import React, { useEffect, useState, useRef } from "react"; |
||||
import { Link } from "react-router-dom"; |
||||
import logo from "../../assets/img/logo.png"; |
||||
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 VerificationInput from "../../components/verificationInput"; |
||||
import Input from "../../components/input"; |
||||
import FileInput from "../../components/fileInput"; |
||||
|
||||
|
||||
const Register = ({ activeLogin }) => { |
||||
const [steps, setSteps] = useState(0); |
||||
const [index, setIndex] = useState(1); |
||||
const [register, setRegister] = useState(false); |
||||
const timeoutRef = useRef(null); |
||||
|
||||
const focusHandler = (id) => { |
||||
let inputs = document.querySelectorAll(".Login-box-form-item"); |
||||
let label = document.querySelectorAll(".Login-box-form-item-label"); |
||||
let line = document.querySelectorAll(".Login-box-form-item-line"); |
||||
inputs[id].style.borderColor = "#df1452"; |
||||
inputs[id].style.backgroundColor = "#fff"; |
||||
label[id].style.transform = "translate(-10px,-27px)"; |
||||
label[id].style.color = "#df1452"; |
||||
line[id].style.backgroundColor = "#fff"; |
||||
} |
||||
|
||||
const blurHandler = (id) => { |
||||
let inputsBox = document.querySelectorAll(".Login-box-form-item"); |
||||
let inputs = document.querySelectorAll(".Login-box-form-item-input"); |
||||
let label = document.querySelectorAll(".Login-box-form-item-label"); |
||||
let line = document.querySelectorAll(".Login-box-form-item-line"); |
||||
if (inputs[id].value === "") { |
||||
inputsBox[id].style.borderColor = "#EBEBEB"; |
||||
label[id].style.transform = "translate(0px,0px)"; |
||||
label[id].style.color = "#959595"; |
||||
line[id].style.backgroundColor = "#EBEBEB"; |
||||
} |
||||
}; |
||||
|
||||
const stepCont = [ |
||||
{ |
||||
title: 'اطلاعات هویتی', |
||||
step: 0 |
||||
}, |
||||
{ |
||||
title: 'مشخصات والدین', |
||||
step: 1 |
||||
}, |
||||
{ |
||||
title: 'قوانین و مقررات', |
||||
step: 2 |
||||
}, |
||||
{ |
||||
title: 'تایید اطلاعات', |
||||
step: 3 |
||||
}, |
||||
] |
||||
|
||||
|
||||
return ( |
||||
<div className="w-full flex items-center justify-center" style={{ height: '100vh', direction: 'rtl' }}> |
||||
<div className="w-11/12 flex "> |
||||
{/* form */} |
||||
|
||||
<div className="flex w-1/5 border-0 border-l border-solid border flex-col items-center p-6"> |
||||
|
||||
<img src={logo} className="w-1/2 m-4 mt-0" /> |
||||
<div className="flex flex-col items-center justify-start leading-normal"> |
||||
<p className="w-3/5 text-red26"> |
||||
سامانه ثبت نام مدارس موسسه علمی اندیشمند |
||||
</p> |
||||
|
||||
<div className="flex flex-col mt-6"> |
||||
{ |
||||
stepCont.map((item) => ( |
||||
|
||||
<div key={`step__${item.step}`} className="flex my-2 items-center "> |
||||
<div className="ml-2"> |
||||
<div className={`w-6 h-6 rounded-full border border-solid border-gray-200 ${steps == item.step ? 'bg-red52' : ''}`}> |
||||
|
||||
</div> |
||||
<span |
||||
className=" w-2 mt-2 border-r-4 border-solid border-red46OP" |
||||
style={{ |
||||
|
||||
// transform: "translateX(-1px)",
|
||||
}} |
||||
></span> |
||||
</div> |
||||
<h1 className="text-gray-400 font-bold">{item.title}</h1> |
||||
</div> |
||||
|
||||
) |
||||
) |
||||
} |
||||
</div> |
||||
|
||||
|
||||
|
||||
|
||||
</div> |
||||
</div> |
||||
|
||||
{/* Content */} |
||||
|
||||
<div className="w-4/5 mx-10 flex flex-col items-start text-right b"> |
||||
{ |
||||
steps == 0 && |
||||
<> |
||||
<div className="w-full px-10 pb-6 border-b border-solid border-gray-200">
|
||||
<div className="mb-4"> |
||||
<h1 className="font-black">مشخصات هویتی دانش آموز</h1> |
||||
<p className="font-bold text-gray-300 text-sm">اطلاعات هویتی دانش آموز را با دقت تکمیل و عکس مدارک را بارگزاری نمایید</p> |
||||
</div> |
||||
<div className="flex"> |
||||
<div className="flex w-2/5 "> |
||||
<div className="ml-2"> |
||||
<Input title="نام" borderType="rounded" gapSize="8" direction='rtl'/> |
||||
<Input title="کدملی" borderType="rounded" gapSize="12" id={1} type='number'/> |
||||
</div> |
||||
<div className="mr-2"> |
||||
<Input title="نام خانوادگی" borderType="rounded" id={2} direction='rtl'/> |
||||
<Input title="تاریخ تولد" borderType="rounded" gapSize="16" id={3} type='number'/> |
||||
</div> |
||||
</div> |
||||
<div className="w-3/5 flex justify-center"> |
||||
<div className="w-2/5 mx-4"> |
||||
<FileInput title="بارگزای صفحه اول شناسنامه" /> |
||||
</div> |
||||
<div className="w-2/5 mx-4"> |
||||
<FileInput title="بارگزای صفحه اول شناسنامه" /> |
||||
</div> |
||||
</div> |
||||
|
||||
<div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<div className="w-full px-10 py-6 border-b flex items-center border-solid border-gray-200">
|
||||
<div className="mb-4"> |
||||
<h1 className="font-black">پایه تحصیلی</h1> |
||||
<p className="font-bold text-gray-300 text-sm">لطفا پایه تحصیلی دانش آموز را وارد کنید</p> |
||||
</div> |
||||
</div> |
||||
|
||||
</> |
||||
} |
||||
</div> |
||||
|
||||
</div> |
||||
|
||||
</div> |
||||
|
||||
); |
||||
}; |
||||
|
||||
export default Register; |
||||
Loading…
Reference in new issue