taha12322
3 years ago
parent
1d1a7041c8
commit
aacf856aaa
29 changed files with 781 additions and 278 deletions
|
After Width: | Height: | Size: 979 B |
|
After Width: | Height: | Size: 26 KiB |
|
After Width: | Height: | Size: 4.1 KiB |
@ -0,0 +1,100 @@ |
||||
import React from "react"; |
||||
import { Route } from "react-router-dom"; |
||||
import { Link } from "react-router-dom"; |
||||
import { ChevronLeft } from "react-iconly"; |
||||
// import logo from "../assets/logo.png";
|
||||
import google from "../assets/google.svg"; |
||||
import "./logIn/login/login.scss"; |
||||
import TextInputN from "./logIn/login/InputN"; |
||||
import TextInputP from "./logIn/login/InputP"; |
||||
import HeaderDes from "./HeaderDes/Header"; |
||||
import Footer from "./FooterDes/Footer"; |
||||
|
||||
const DesktopLogin = () => { |
||||
return ( |
||||
<> |
||||
<Route path="/login"> |
||||
<HeaderDes /> |
||||
<div className="container mainCon" style={{ width: "30%" }}> |
||||
<header |
||||
style={{ |
||||
display: "flex", |
||||
justifyContent: "flex-end", |
||||
alignItems: "center", |
||||
}} |
||||
> |
||||
<Link to="/4" className="BackItems"> |
||||
<p>بازگشت به صفحه قبل</p> |
||||
<ChevronLeft set="curved" /> |
||||
</Link> |
||||
</header> |
||||
<nav className="mt-5 mb-5"> |
||||
<h4 style={{ fontSize: "17px" }}> |
||||
سلام |
||||
<br /> |
||||
خوش برگشتی ! |
||||
</h4> |
||||
</nav> |
||||
|
||||
<TextInputN /> |
||||
<TextInputP /> |
||||
|
||||
<nav |
||||
style={{ |
||||
display: "flex", |
||||
justifyContent: "space-between", |
||||
marginTop: "1rem", |
||||
marginBottom: "1rem", |
||||
}} |
||||
> |
||||
<nav |
||||
style={{ |
||||
display: "flex", |
||||
justifyContent: "space-between", |
||||
alignItems: "center", |
||||
}} |
||||
> |
||||
<input |
||||
type="checkbox" |
||||
style={{ |
||||
width: "20px", |
||||
height: "20px", |
||||
}} |
||||
/> |
||||
<lable style={{ fontSize: "10px", marginRight: "8px" }}> |
||||
مرا به خاطر بسپار |
||||
</lable> |
||||
</nav> |
||||
<p style={{ fontSize: "10px", fontWeight: "bold", margin: 0 }}> |
||||
رمز خود را فراموش کرده اید ؟ |
||||
</p> |
||||
</nav> |
||||
|
||||
<button className="logInBtn">ورود</button> |
||||
|
||||
<nav |
||||
style={{ |
||||
display: "flex", |
||||
justifyContent: "center", |
||||
alignItems: "center", |
||||
color: "#E0E0E0", |
||||
}} |
||||
> |
||||
<span className="line"></span> |
||||
<p className="m-4">یا</p> |
||||
<span className="line"></span> |
||||
</nav> |
||||
|
||||
<button className="logInBtnGoogle"> |
||||
<img alt='google' src={google} style={{ width: "30px" }} />{" "} |
||||
<p style={{ flex: 1, margin: 0 }}>ورود با اکانت گوگل</p> |
||||
</button> |
||||
</div> |
||||
|
||||
<Footer /> |
||||
</Route> |
||||
</> |
||||
); |
||||
}; |
||||
|
||||
export default DesktopLogin; |
||||
@ -0,0 +1,39 @@ |
||||
import React from "react"; |
||||
import { Link } from "react-router-dom"; |
||||
|
||||
const Footer = () => { |
||||
return ( |
||||
<> |
||||
<footer |
||||
style={{ |
||||
borderTop: "#E0E0E0 solid 1px", |
||||
direction: "rtl", |
||||
position: "fixed", |
||||
width: "100%", |
||||
bottom: 0, |
||||
paddingTop: '8px', |
||||
}} |
||||
> |
||||
<nav className="row text-center"> |
||||
<nav className="col-3"></nav> |
||||
<p className="col-6" style={{ fontSize: "13px", flex: 1, color: "#B5B5B5" }}> |
||||
تمامی حقوق مادی و معنوی متعلق به پلتفرم آزمون می باشد |
||||
</p> |
||||
<Link |
||||
className="col-3" |
||||
to={"/rule"} |
||||
style={{ |
||||
fontSize: "13px", |
||||
color: "#B5B5B5", |
||||
textDecoration: "none", |
||||
}} |
||||
> |
||||
قوانین و شرایط استفاده |
||||
</Link> |
||||
</nav> |
||||
</footer> |
||||
</> |
||||
); |
||||
}; |
||||
|
||||
export default Footer; |
||||
@ -0,0 +1,28 @@ |
||||
import React from "react"; |
||||
import logo from "../../assets/logo.png"; |
||||
import "./HeaderDes.scss"; |
||||
|
||||
const Header = () => { |
||||
return ( |
||||
<header className="HeaderNav"> |
||||
<nav> |
||||
<img alt='logo' src={logo} width='60%' /> |
||||
</nav> |
||||
<nav> |
||||
<ul className="ItemsNav"> |
||||
<li className="item">صفحه اصلی</li> |
||||
<li className="item">امکانات</li> |
||||
<li className="item">فروشگاه</li> |
||||
<li className="item">درباره ما </li> |
||||
<li className="item">تماس با ما </li> |
||||
</ul> |
||||
</nav> |
||||
<nav className='LoginBtnNav'> |
||||
<p >تازه وارد هستید ؟</p> |
||||
<button className='btn'>ساخت حساب کاربری</button> |
||||
</nav> |
||||
</header> |
||||
); |
||||
}; |
||||
|
||||
export default Header; |
||||
@ -0,0 +1,41 @@ |
||||
.HeaderNav { |
||||
padding: 1rem; |
||||
direction: rtl; |
||||
display: flex; |
||||
justify-content: space-between; |
||||
align-items: baseline; |
||||
|
||||
.ItemsNav { |
||||
display: flex; |
||||
justify-content: space-between; |
||||
align-items: center; |
||||
flex: 1; |
||||
|
||||
.item { |
||||
margin-right: 1rem; |
||||
list-style: none; |
||||
font-size: 13px; |
||||
color: #132F52; |
||||
} |
||||
} |
||||
|
||||
.LoginBtnNav { |
||||
display: flex; |
||||
justify-content: space-between; |
||||
align-items: baseline; |
||||
|
||||
p{ |
||||
color: #132F52; |
||||
font-size: 13px; |
||||
} |
||||
|
||||
button{ |
||||
margin-right: 8px; |
||||
border: #E0E0E0 solid 1px; |
||||
background-color: #F9F9F980; |
||||
color: #132F52; |
||||
font-size: 13px; |
||||
border-radius: 10px; |
||||
} |
||||
} |
||||
} |
||||
@ -1,51 +0,0 @@ |
||||
import React, { useState, useEffect } from "react"; |
||||
import { ArrowRight } from "react-iconly"; |
||||
import { Link } from "react-router-dom"; |
||||
import "./Footer.scss"; |
||||
|
||||
const Footer = () => { |
||||
const [active, setActive] = useState(1); |
||||
const [numCounter, setNumCounter] = useState(1); |
||||
localStorage.setItem("pathNum", numCounter); |
||||
|
||||
const counterHandler = () => { |
||||
setNumCounter(numCounter + 1); |
||||
}; |
||||
let I = localStorage.getItem("pathNum") |
||||
|
||||
useEffect(() => { |
||||
if (window.location.href === "http://localhost:3001/1") { |
||||
setActive(1); |
||||
} |
||||
if (window.location.href === "http://localhost:3001/2") { |
||||
setActive(2); |
||||
} |
||||
if (window.location.href === "http://localhost:3001/3") { |
||||
setActive(3); |
||||
} |
||||
if (window.location.href === "http://localhost:3001/4") { |
||||
setActive(4); |
||||
} |
||||
}); |
||||
|
||||
return ( |
||||
<footer className="navFooterItem container"> |
||||
<nav className="navCircles"> |
||||
<nav className={`circle ${active === 1 ? "active" : ""}`}></nav> |
||||
<nav className={`circle ${active === 2 ? "active" : ""}`}></nav> |
||||
<nav className={`circle ${active === 3 ? "active" : ""}`}></nav> |
||||
<nav className={`circle ${active === 4 ? "active" : ""}`}></nav> |
||||
</nav> |
||||
<nav onClick={counterHandler}> |
||||
<Link to={`/${I}`}> |
||||
<button className="btn nextBtn"> |
||||
<ArrowRight set="curved" /> |
||||
</button> |
||||
</Link> |
||||
{/* <button onClick={()=>setCount(count +1)}>counter</button> */} |
||||
</nav> |
||||
</footer> |
||||
); |
||||
}; |
||||
|
||||
export default Footer; |
||||
@ -1,11 +0,0 @@ |
||||
import React from 'react' |
||||
|
||||
const LogIn = () => { |
||||
return ( |
||||
<> |
||||
log in |
||||
</> |
||||
) |
||||
} |
||||
|
||||
export default LogIn |
||||
@ -1,105 +1,54 @@ |
||||
import React from "react"; |
||||
import "./panels.scss"; |
||||
|
||||
const Panel1 = () => { |
||||
const Panel2 = () => { |
||||
const rules = [ |
||||
{ |
||||
title: "نحوه استفاده از محصولات", |
||||
discription: |
||||
" ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان ک", |
||||
}, |
||||
{ |
||||
title: "نحوه استفاده از محصولات", |
||||
discription: |
||||
" ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان ک", |
||||
}, |
||||
{ |
||||
title: "نحوه استفاده از محصولات", |
||||
discription: |
||||
" ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان ک", |
||||
}, |
||||
{ |
||||
title: "نحوه استفاده از محصولات", |
||||
discription: |
||||
" ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان ک", |
||||
}, |
||||
{ |
||||
title: "نحوه استفاده از محصولات", |
||||
discription: |
||||
" ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان ک", |
||||
}, |
||||
{ |
||||
title: "نحوه استفاده از محصولات", |
||||
discription: |
||||
" ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان ک", |
||||
}, |
||||
{ |
||||
title: "نحوه استفاده از محصولات", |
||||
discription: |
||||
" ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان ک", |
||||
}, |
||||
]; |
||||
return ( |
||||
<div className='mt-3'> |
||||
<h4 |
||||
style={{ |
||||
backgroundColor: "#2E81E820", |
||||
with: "100%", |
||||
color: "#2E81E8", |
||||
borderRadius: "5px", |
||||
padding: '5px', |
||||
fontSize: '18px', |
||||
|
||||
}} |
||||
> |
||||
نحوه استفاده از محصولات |
||||
</h4> |
||||
<p style={{fontSize:'13px'}}> |
||||
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده |
||||
از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و |
||||
سطرآنچنان که لازم است، و برای شرایط فعلی تکنولوژی مورد نیاز، و کاربردهای |
||||
متنوع با هدف بهبود ابزارهای کاربردی می باشد |
||||
</p> |
||||
|
||||
<h4 |
||||
style={{ |
||||
backgroundColor: "#2E81E820", |
||||
with: "100%", |
||||
color: "#2E81E8", |
||||
borderRadius: "5px", |
||||
fontSize: "18px", |
||||
padding: "5px", |
||||
}} |
||||
> |
||||
نحوه استفاده از محصولات |
||||
</h4> |
||||
<p style={{ fontSize: "13px" }}> |
||||
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده |
||||
از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و |
||||
سطرآنچنان که لازم است، و برای شرایط فعلی تکنولوژی مورد نیاز، و کاربردهای |
||||
متنوع با هدف بهبود ابزارهای کاربردی می باشد |
||||
</p> |
||||
|
||||
<h4 |
||||
style={{ |
||||
backgroundColor: "#2E81E820", |
||||
with: "100%", |
||||
color: "#2E81E8", |
||||
borderRadius: "5px", |
||||
fontSize: "18px", |
||||
padding: "5px", |
||||
}} |
||||
> |
||||
نحوه استفاده از محصولات |
||||
</h4> |
||||
<p style={{ fontSize: "13px" }}> |
||||
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده |
||||
از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و |
||||
سطرآنچنان که لازم است، و برای شرایط فعلی تکنولوژی مورد نیاز، و کاربردهای |
||||
متنوع با هدف بهبود ابزارهای کاربردی می باشد |
||||
</p> |
||||
|
||||
<h4 |
||||
style={{ |
||||
backgroundColor: "#2E81E820", |
||||
with: "100%", |
||||
color: "#2E81E8", |
||||
borderRadius: "5px", |
||||
fontSize: "18px", |
||||
padding: "5px", |
||||
}} |
||||
> |
||||
نحوه استفاده از محصولات |
||||
</h4> |
||||
<p style={{ fontSize: "13px" }}> |
||||
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده |
||||
از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و |
||||
سطرآنچنان که لازم است، و برای شرایط فعلی تکنولوژی مورد نیاز، و کاربردهای |
||||
متنوع با هدف بهبود ابزارهای کاربردی می باشد |
||||
</p> |
||||
|
||||
<h4 |
||||
style={{ |
||||
backgroundColor: "#2E81E820", |
||||
with: "100%", |
||||
color: "#2E81E8", |
||||
borderRadius: "5px", |
||||
fontSize: "18px", |
||||
padding: "5px", |
||||
}} |
||||
> |
||||
نحوه استفاده از محصولات |
||||
</h4> |
||||
<p style={{ fontSize: "13px" }}> |
||||
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده |
||||
از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و |
||||
سطرآنچنان که لازم است، و برای شرایط فعلی تکنولوژی مورد نیاز، و کاربردهای |
||||
متنوع با هدف بهبود ابزارهای کاربردی می باشد |
||||
</p> |
||||
<div className="mt-3 scrollNav"> |
||||
{rules.map((item) => ( |
||||
<> |
||||
<h4 className="title">{item.title}</h4> |
||||
<p style={{ fontSize: "13px" }}>{item.discription}</p> |
||||
</> |
||||
))} |
||||
</div> |
||||
); |
||||
}; |
||||
|
||||
export default Panel1; |
||||
export default Panel2; |
||||
|
||||
@ -0,0 +1,25 @@ |
||||
.title { |
||||
background-color: #2e81e820; |
||||
width: 100%; |
||||
color: #2e81e8; |
||||
border-radius: 5px; |
||||
font-size: 16px; |
||||
padding: 5px; |
||||
} |
||||
|
||||
.scrollNav { |
||||
overflow-y: scroll; |
||||
height: 75vh; |
||||
} |
||||
|
||||
.scrollNav::-webkit-scrollbar { |
||||
width: 5px; |
||||
} |
||||
.scrollNav::-webkit-scrollbar-track { |
||||
border-radius: 10px; |
||||
} |
||||
.scrollNav::-webkit-scrollbar-thumb { |
||||
background-color: #2e81e8; |
||||
border-radius: 5px; |
||||
height: 5px; |
||||
} |
||||
@ -0,0 +1,25 @@ |
||||
import "./input.css"; |
||||
import { useState, useRef } from "react"; |
||||
|
||||
const TextInput = ({ name, label, required, inner_type }) => { |
||||
const [lc, setLc] = useState(""); |
||||
const inputRef = useRef(); |
||||
const a = () => { |
||||
setLc("label-with-focus"); |
||||
}; |
||||
const b = () => { |
||||
if (inputRef.current.value.length === 0) { |
||||
setLc(""); |
||||
} |
||||
}; |
||||
return ( |
||||
<> |
||||
<div className="text-input"> |
||||
<label className={lc}>{"نام کاربری"}</label> |
||||
<input ref={inputRef} type={"text"} onFocus={a} onBlur={b} /> |
||||
</div> |
||||
</> |
||||
); |
||||
}; |
||||
|
||||
export default TextInput; |
||||
@ -0,0 +1,25 @@ |
||||
import "./input.css"; |
||||
import { useState, useRef } from "react"; |
||||
|
||||
const TextInput = () => { |
||||
const [lc, setLc] = useState(""); |
||||
const inputRef = useRef(); |
||||
const a = () => { |
||||
setLc("label-with-focus"); |
||||
}; |
||||
const b = () => { |
||||
if (inputRef.current.value.length === 0) { |
||||
setLc(""); |
||||
} |
||||
}; |
||||
return ( |
||||
<> |
||||
<div className="text-input"> |
||||
<label className={lc}>{"رمز عبور"}</label> |
||||
<input ref={inputRef} type={"password"} onFocus={a} onBlur={b} /> |
||||
</div> |
||||
</> |
||||
); |
||||
}; |
||||
|
||||
export default TextInput; |
||||
@ -0,0 +1,94 @@ |
||||
import React from "react"; |
||||
import { Link } from "react-router-dom"; |
||||
import { ChevronLeft } from "react-iconly"; |
||||
import logo from "../../../assets/logo.png"; |
||||
import google from "../../../assets/google.svg"; |
||||
import "./login.scss"; |
||||
import TextInputN from "./InputN"; |
||||
import TextInputP from "./InputP"; |
||||
|
||||
const LogIn = () => { |
||||
return ( |
||||
<> |
||||
<div className="container mainCon "> |
||||
<header |
||||
style={{ |
||||
display: "flex", |
||||
justifyContent: "space-between", |
||||
alignItems: "center", |
||||
}} |
||||
> |
||||
<img alt='logo' src={logo}/> |
||||
<Link to="/4"> |
||||
<nav className="navBack"> |
||||
<ChevronLeft set="curved" /> |
||||
</nav> |
||||
</Link> |
||||
</header> |
||||
<nav className="mt-5 mb-5"> |
||||
<h4 style={{ fontSize: "17px" }}> |
||||
سلام |
||||
<br /> |
||||
خوش برگشتی ! |
||||
</h4> |
||||
</nav> |
||||
|
||||
<TextInputN /> |
||||
<TextInputP /> |
||||
|
||||
<nav |
||||
style={{ |
||||
display: "flex", |
||||
justifyContent: "space-between", |
||||
marginTop: "1rem", |
||||
marginBottom: "1rem", |
||||
}} |
||||
> |
||||
<nav |
||||
style={{ |
||||
display: "flex", |
||||
justifyContent: "space-between", |
||||
alignItems: "center", |
||||
}} |
||||
> |
||||
<input |
||||
type="checkbox" |
||||
style={{ |
||||
width: "20px", |
||||
height: "20px", |
||||
}} |
||||
/> |
||||
<lable style={{ fontSize: "10px", marginRight: "8px" }}> |
||||
مرا به خاطر بسپار |
||||
</lable> |
||||
</nav> |
||||
<p style={{ fontSize: "10px", fontWeight: "bold" , margin: 0, }}> |
||||
رمز خود را فراموش کرده اید ؟ |
||||
</p> |
||||
</nav> |
||||
|
||||
<button className="logInBtn">ورود</button> |
||||
|
||||
<nav |
||||
style={{ |
||||
display: "flex", |
||||
justifyContent: "center", |
||||
alignItems: "center", |
||||
color: '#E0E0E0', |
||||
}} |
||||
> |
||||
<span className="line"></span> |
||||
<p className="m-4">یا</p> |
||||
<span className="line"></span> |
||||
</nav> |
||||
|
||||
<button className="logInBtnGoogle"> |
||||
<img alt='google' src={google} style={{ width: "30px" }} />{" "} |
||||
<p style={{ flex: 1, margin: 0 }}>ورود با اکانت گوگل</p> |
||||
</button> |
||||
</div> |
||||
</> |
||||
); |
||||
}; |
||||
|
||||
export default LogIn; |
||||
@ -0,0 +1,35 @@ |
||||
.text-input { |
||||
width: 100%; |
||||
height: 8vh; |
||||
font-size: 15px; |
||||
margin-top: 15px; |
||||
position: relative; |
||||
} |
||||
.text-input input { |
||||
background-color: #f9f9f980; |
||||
font-size: 20px; |
||||
height: 100%; |
||||
border-radius: 10px; |
||||
width: 100%; |
||||
outline: none; |
||||
border: 1px solid #555; |
||||
padding: 1rem; |
||||
} |
||||
.text-input label { |
||||
position: absolute; |
||||
right: 20px; |
||||
top: 7px; |
||||
transition: all 0.2s; |
||||
} |
||||
|
||||
.text-input input:focus { |
||||
border: 2px solid #2e81e8; |
||||
} |
||||
|
||||
.label-with-focus { |
||||
/* display: none; */ |
||||
font-size: 15px; |
||||
transform: translate(8px, -18px); |
||||
background-color: white; |
||||
padding: 0 5px; |
||||
} |
||||
@ -0,0 +1,12 @@ |
||||
.line{ |
||||
width: 120px; |
||||
height: 1px; |
||||
background-color: #E0E0E0; |
||||
} |
||||
|
||||
.BackItems{ |
||||
display: flex; |
||||
justify-content: space-between; |
||||
text-decoration: none; |
||||
font-size: 14px; |
||||
} |
||||