parent
c7872dd9e8
commit
de82826d86
15 changed files with 577 additions and 8 deletions
After Width: | Height: | Size: 18 KiB |
@ -0,0 +1,36 @@ |
|||||||
|
import React, { Component } from 'react'; |
||||||
|
|
||||||
|
import Logo from './Logo/Logo'; |
||||||
|
import Bio from './Bio/Bio'; |
||||||
|
import Login from './Login/Login'; |
||||||
|
|
||||||
|
import './Auth.scss'; |
||||||
|
export default class Auth extends Component { |
||||||
|
constructor(props) { |
||||||
|
super(props); |
||||||
|
this.state = { |
||||||
|
page : 'logo', |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
setPage = (val) => { |
||||||
|
this.setState({
|
||||||
|
page : val, |
||||||
|
}) |
||||||
|
} |
||||||
|
render() { |
||||||
|
return( |
||||||
|
<div className="auth"> |
||||||
|
{ |
||||||
|
this.state.page === 'logo' ? <Logo setPage={this.setPage} /> : null |
||||||
|
} |
||||||
|
{ |
||||||
|
this.state.page === 'bio' ? <Bio setPage={this.setPage} /> : null |
||||||
|
} |
||||||
|
{ |
||||||
|
this.state.page === 'login' ? <Login /> : null |
||||||
|
} |
||||||
|
</div> |
||||||
|
); |
||||||
|
} |
||||||
|
} |
@ -0,0 +1,9 @@ |
|||||||
|
@media screen and (max-width: 450px){ |
||||||
|
.auth{ |
||||||
|
width: 100vw; |
||||||
|
height: 100vh; |
||||||
|
direction: rtl; |
||||||
|
overflow-x: hidden; |
||||||
|
position: relative; |
||||||
|
} |
||||||
|
} |
@ -0,0 +1,46 @@ |
|||||||
|
import React, { Component } from 'react'; |
||||||
|
|
||||||
|
import FirstBio from './FirstBio/FirstBio'; |
||||||
|
import SecondBio from './SecondBio/SecondBio'; |
||||||
|
import ThirdBio from './ThirdBio/ThirdBio'; |
||||||
|
|
||||||
|
import './Bio.scss'; |
||||||
|
export default class Bio extends Component { |
||||||
|
constructor(props) { |
||||||
|
super(props); |
||||||
|
this.state = { |
||||||
|
section : 0, |
||||||
|
} |
||||||
|
} |
||||||
|
setSection = (val) => { |
||||||
|
this.setState({ |
||||||
|
section : val, |
||||||
|
}) |
||||||
|
} |
||||||
|
render() { |
||||||
|
return( |
||||||
|
<div className="bio d-flex flex-column"> |
||||||
|
<div className="bio__box d-flex flex-column justify-content-center align-items-center"> |
||||||
|
{ |
||||||
|
this.state.section === 0 ? <FirstBio setSection={this.setSection} /> : null |
||||||
|
} |
||||||
|
{ |
||||||
|
this.state.section === 1 ? <SecondBio setSection={this.setSection} /> : null |
||||||
|
} |
||||||
|
{ |
||||||
|
this.state.section === 2 ? <ThirdBio setSection={this.setSection} /> : null |
||||||
|
} |
||||||
|
</div> |
||||||
|
{ |
||||||
|
this.state.section === 2 ?
|
||||||
|
<button onClick={() => this.props.setPage('login')}> |
||||||
|
شروع |
||||||
|
</button> : |
||||||
|
<button onClick={() => this.props.setPage('login')}> |
||||||
|
رد کردن |
||||||
|
</button> |
||||||
|
} |
||||||
|
</div> |
||||||
|
); |
||||||
|
} |
||||||
|
} |
@ -0,0 +1,48 @@ |
|||||||
|
@media screen and (max-width: 450px){ |
||||||
|
.bio{ |
||||||
|
width: 100%; |
||||||
|
height: 100%; |
||||||
|
background-color: #efefef; |
||||||
|
&__box{ |
||||||
|
direction : rtl; |
||||||
|
width: 100%; |
||||||
|
height: 75%; |
||||||
|
background: rgb(111,108,255); |
||||||
|
background: linear-gradient(180deg, rgba(111,108,255,1) 0%, rgba(105,73,186,1) 52%); |
||||||
|
border-bottom-right-radius: 40px; |
||||||
|
border-bottom-left-radius: 40px; |
||||||
|
box-shadow: 0 0 80px rgba(0,0,0,1); |
||||||
|
position: relative; |
||||||
|
p{ |
||||||
|
font-size: 16px; |
||||||
|
color: white; |
||||||
|
max-width: 200px; |
||||||
|
text-align: justify; |
||||||
|
font-family: IRANSansNumeralLight; |
||||||
|
} |
||||||
|
.three-dots{ |
||||||
|
align-items: center; |
||||||
|
justify-content: space-around; |
||||||
|
& div{ |
||||||
|
width : 9px; |
||||||
|
height : 9px; |
||||||
|
border-radius: 8px; |
||||||
|
background-color : #afafaf; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
} |
||||||
|
& button{ |
||||||
|
background: rgb(176, 73, 186); |
||||||
|
background: linear-gradient(180deg,rgb(163, 73, 186) 0%, rgb(108, 72, 191) 52%); |
||||||
|
min-width: 200px; |
||||||
|
margin : 50px auto 0px; |
||||||
|
border : none; |
||||||
|
padding : 10px 0px; |
||||||
|
font-size: 22px; |
||||||
|
border-radius: 15px; |
||||||
|
color : white; |
||||||
|
box-shadow: 0 0 30px rgba(0,0,0,1); |
||||||
|
} |
||||||
|
} |
||||||
|
} |
@ -0,0 +1,26 @@ |
|||||||
|
import React, { Component } from 'react'; |
||||||
|
import NavigateNextIcon from '@material-ui/icons/NavigateNext'; |
||||||
|
import { Divider } from '@material-ui/core'; |
||||||
|
|
||||||
|
export default class FirstBio extends Component { |
||||||
|
render() { |
||||||
|
return( |
||||||
|
<> |
||||||
|
<p> |
||||||
|
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی میباشد.
|
||||||
|
</p> |
||||||
|
<div style={{position: 'absolute', right : -5 }} onClick={() => this.props.setSection(1)}> |
||||||
|
<NavigateNextIcon style={{color : "#cfcfcf" , width : 50, height : 50, fontWeight : 900}} /> |
||||||
|
</div> |
||||||
|
<div className="three-dots d-flex" style={{width: 60 , height: 20, position : 'absolute', bottom : 20}}> |
||||||
|
<div>
|
||||||
|
</div> |
||||||
|
<div>
|
||||||
|
</div> |
||||||
|
<div style={{backgroundColor : 'white', width : 11, height : 11}}>
|
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</> |
||||||
|
); |
||||||
|
} |
||||||
|
} |
@ -0,0 +1,29 @@ |
|||||||
|
import React, { Component } from 'react'; |
||||||
|
import NavigateNextIcon from '@material-ui/icons/NavigateNext'; |
||||||
|
import NavigateBeforeIcon from '@material-ui/icons/NavigateBefore'; |
||||||
|
|
||||||
|
export default class SecondBio extends Component { |
||||||
|
render() { |
||||||
|
return( |
||||||
|
<> |
||||||
|
<p> |
||||||
|
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی میباشد.
|
||||||
|
</p> |
||||||
|
<div style={{position: 'absolute', right : -5 }} onClick={() => this.props.setSection(2)}> |
||||||
|
<NavigateNextIcon style={{color : "#cfcfcf" , width : 50, height : 50}} /> |
||||||
|
</div> |
||||||
|
<div style={{position: 'absolute', left : -5 }} onClick={() => this.props.setSection(0)}> |
||||||
|
<NavigateBeforeIcon style={{color : "#cfcfcf" , width : 50, height : 50}} /> |
||||||
|
</div> |
||||||
|
<div className="three-dots d-flex" style={{width: 60 , height: 20, position : 'absolute', bottom : 20}}> |
||||||
|
<div>
|
||||||
|
</div> |
||||||
|
<div style={{backgroundColor : 'white', width : 11, height : 11}}>
|
||||||
|
</div> |
||||||
|
<div>
|
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</> |
||||||
|
); |
||||||
|
} |
||||||
|
} |
@ -0,0 +1,26 @@ |
|||||||
|
import React, { Component } from 'react'; |
||||||
|
import NavigateNextIcon from '@material-ui/icons/NavigateNext'; |
||||||
|
import NavigateBeforeIcon from '@material-ui/icons/NavigateBefore'; |
||||||
|
|
||||||
|
export default class SecondBio extends Component { |
||||||
|
render() { |
||||||
|
return( |
||||||
|
<> |
||||||
|
<p> |
||||||
|
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی میباشد.
|
||||||
|
</p> |
||||||
|
<div style={{position: 'absolute', left : -5 }} onClick={() => this.props.setSection(1)}> |
||||||
|
<NavigateBeforeIcon style={{color : "#cfcfcf" , width : 50, height : 50}} /> |
||||||
|
</div> |
||||||
|
<div className="three-dots d-flex" style={{width: 60 , height: 20, position : 'absolute', bottom : 20}}> |
||||||
|
<div style={{backgroundColor : 'white', width : 11, height : 11}}>
|
||||||
|
</div> |
||||||
|
<div>
|
||||||
|
</div> |
||||||
|
<div>
|
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</> |
||||||
|
); |
||||||
|
} |
||||||
|
} |
@ -0,0 +1,109 @@ |
|||||||
|
import React, { Component } from 'react'; |
||||||
|
|
||||||
|
export default class Code extends Component { |
||||||
|
constructor(props) { |
||||||
|
super(props); |
||||||
|
this.state = { |
||||||
|
auth_code1: '', |
||||||
|
auth_code2: '', |
||||||
|
auth_code3: '', |
||||||
|
auth_code4: '', |
||||||
|
flag: false, |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
flagSetter = () => { |
||||||
|
this.setState({ |
||||||
|
flag: true, |
||||||
|
}) |
||||||
|
} |
||||||
|
|
||||||
|
changeValue = (name, value) => { |
||||||
|
if (value.match("^[0-9]{1}$") !== null) { |
||||||
|
this.setState({ |
||||||
|
[name]: value, |
||||||
|
}) |
||||||
|
} else { |
||||||
|
return; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
componentDidMount() { |
||||||
|
this.inputRef1.focus(); |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
componentDidUpdate() { |
||||||
|
if (this.state.auth_code1) { |
||||||
|
this.inputRef2.focus(); |
||||||
|
} |
||||||
|
if (this.state.auth_code2) { |
||||||
|
this.inputRef3.focus(); |
||||||
|
} |
||||||
|
if (this.state.auth_code3) { |
||||||
|
this.inputRef4.focus(); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
onKeyDown = (e) => { |
||||||
|
if (e.keyCode === 8) { |
||||||
|
this.setState({ |
||||||
|
[e.target.name]: '', |
||||||
|
}) |
||||||
|
} |
||||||
|
} |
||||||
|
render() { |
||||||
|
return( |
||||||
|
<> |
||||||
|
<div className="login-code__top d-flex flex-column"> |
||||||
|
<div>میخوام مطمئن شم که خودتی</div> |
||||||
|
<p>کد تایید رو برات فرستادم. اینجا واردش کن</p> |
||||||
|
</div> |
||||||
|
<div className="login-code__bottom d-flex"> |
||||||
|
<input |
||||||
|
name="auth_code1" |
||||||
|
type="number" |
||||||
|
onChange={(e) => this.changeValue(e.target.name, e.target.value)} |
||||||
|
maxLength="1" |
||||||
|
ref={(input) => { this.inputRef1 = input }} |
||||||
|
value={this.state.auth_code1} |
||||||
|
onKeyDown={this.onKeyDown} |
||||||
|
autoComplete="false" |
||||||
|
/> |
||||||
|
<input |
||||||
|
name="auth_code2" |
||||||
|
type="number" |
||||||
|
onChange={(e) => this.changeValue(e.target.name, e.target.value)} |
||||||
|
value={this.state.auth_code2} |
||||||
|
maxLength="1" |
||||||
|
ref={(input) => { this.inputRef2 = input }} |
||||||
|
onKeyDown={this.onKeyDown} |
||||||
|
autoComplete="false" |
||||||
|
/> |
||||||
|
<input |
||||||
|
name="auth_code3" |
||||||
|
type="number" |
||||||
|
onChange={(e) => this.changeValue(e.target.name, e.target.value)} |
||||||
|
maxLength="1" |
||||||
|
ref={(input) => { this.inputRef3 = input }} |
||||||
|
value={this.state.auth_code3} |
||||||
|
onKeyDown={this.onKeyDown} |
||||||
|
autoComplete="false" |
||||||
|
/> |
||||||
|
<input |
||||||
|
name="auth_code4" |
||||||
|
type="number" |
||||||
|
onChange={(e) => this.changeValue(e.target.name, e.target.value)} |
||||||
|
maxLength="1" |
||||||
|
ref={(input) => { this.inputRef4 = input }} |
||||||
|
value={this.state.auth_code4} |
||||||
|
onKeyDown={this.onKeyDown} |
||||||
|
autoComplete="false" |
||||||
|
/> |
||||||
|
</div> |
||||||
|
</> |
||||||
|
); |
||||||
|
} |
||||||
|
} |
@ -0,0 +1,33 @@ |
|||||||
|
import React, { Component } from 'react'; |
||||||
|
|
||||||
|
import Mobile from './Mobile/Mobile'; |
||||||
|
import Code from './Code/Code'; |
||||||
|
|
||||||
|
import './Login.scss'; |
||||||
|
export default class Login extends Component { |
||||||
|
constructor(props) { |
||||||
|
super(props); |
||||||
|
this.state = { |
||||||
|
section : 0, |
||||||
|
} |
||||||
|
} |
||||||
|
setSection = (val) => { |
||||||
|
this.setState({ |
||||||
|
section : val, |
||||||
|
}) |
||||||
|
} |
||||||
|
render() { |
||||||
|
return( |
||||||
|
<div className="login d-flex flex-column"> |
||||||
|
{ |
||||||
|
this.state.section === 0 ?
|
||||||
|
<Mobile setSection={this.setSection} /> : null |
||||||
|
} |
||||||
|
{ |
||||||
|
this.state.section === 1 ?
|
||||||
|
<Code setSection={this.setSection}/> : null |
||||||
|
} |
||||||
|
</div> |
||||||
|
); |
||||||
|
} |
||||||
|
} |
@ -0,0 +1,120 @@ |
|||||||
|
@media screen and (max-width: 450px){ |
||||||
|
.login{ |
||||||
|
width: 100%; |
||||||
|
height: 100%; |
||||||
|
background-color: #efefef; |
||||||
|
position: relative; |
||||||
|
& button{ |
||||||
|
background: rgb(176, 73, 186); |
||||||
|
background: linear-gradient(180deg,rgb(163, 73, 186) 0%, rgb(108, 72, 191) 52%); |
||||||
|
min-width: 200px; |
||||||
|
margin : 50px auto 0px; |
||||||
|
border : none; |
||||||
|
padding : 10px 0px; |
||||||
|
font-size: 22px; |
||||||
|
border-radius: 15px; |
||||||
|
color : white; |
||||||
|
box-shadow: 0 0 30px rgb(119, 118, 118); |
||||||
|
} |
||||||
|
&-mobile__top{ |
||||||
|
width: 100%; |
||||||
|
height: 40%; |
||||||
|
flex-direction: column; |
||||||
|
align-items: center; |
||||||
|
justify-content: flex-end; |
||||||
|
background-color: rgba(111,108,255,1); |
||||||
|
text-align: right; |
||||||
|
color: white; |
||||||
|
box-shadow: 0 0 80px rgba(77, 75, 75, 0.8); |
||||||
|
& div{ |
||||||
|
width: 200px; |
||||||
|
text-align: right; |
||||||
|
position: relative; |
||||||
|
left : 30px; |
||||||
|
} |
||||||
|
& p{ |
||||||
|
width: 200px; |
||||||
|
position: relative; |
||||||
|
left : 30px; |
||||||
|
} |
||||||
|
} |
||||||
|
&-mobile__input{ |
||||||
|
width:280px; |
||||||
|
margin : 30px auto 0px; |
||||||
|
position: relative; |
||||||
|
input{ |
||||||
|
width: 100%; |
||||||
|
border-radius: 20px; |
||||||
|
border : 2px solid rgb(113, 88, 177); |
||||||
|
background :rgb(194, 185, 220); |
||||||
|
padding : 2px 0px 2px 85px; |
||||||
|
text-align: left; |
||||||
|
direction :ltr; |
||||||
|
font-size: 25px; |
||||||
|
color: white; |
||||||
|
&:focus{ |
||||||
|
outline : none; |
||||||
|
} |
||||||
|
} |
||||||
|
div{ |
||||||
|
position : absolute; |
||||||
|
left : 65px; |
||||||
|
top :4px; |
||||||
|
font-size: 25px; |
||||||
|
color : rgb(113, 88, 177); |
||||||
|
} |
||||||
|
} |
||||||
|
&-code__bottom{ |
||||||
|
position: absolute; |
||||||
|
bottom: 0px; |
||||||
|
left: 0px; |
||||||
|
width : 100%; |
||||||
|
height : 50%; |
||||||
|
background-color: white; |
||||||
|
border-top-left-radius: 40px; |
||||||
|
border-top-right-radius: 40px; |
||||||
|
justify-content: center; |
||||||
|
z-index: 200; |
||||||
|
direction: ltr; |
||||||
|
input{ |
||||||
|
width: 40px; |
||||||
|
border : 0px; |
||||||
|
border-bottom : 2px solid rgb(113, 88, 177); |
||||||
|
height : 40px; |
||||||
|
margin : 60px 7px 0px; |
||||||
|
text-align: center; |
||||||
|
direction : ltr; |
||||||
|
font-size: 24px; |
||||||
|
color : rgb(101, 61, 196); |
||||||
|
&:focus{ |
||||||
|
outline : none; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
&-code__top{ |
||||||
|
position: relative; |
||||||
|
direction: rtl; |
||||||
|
width : 100%; |
||||||
|
height : 60%; |
||||||
|
justify-content: flex-end; |
||||||
|
align-items: center; |
||||||
|
background: rgb(176, 73, 186); |
||||||
|
background: linear-gradient(180deg,rgb(163, 73, 186) 0%, rgb(108, 72, 191) 52%); |
||||||
|
text-align:right; |
||||||
|
font-size: 14px; |
||||||
|
color: white; |
||||||
|
& div{ |
||||||
|
width: 200px; |
||||||
|
position: relative; |
||||||
|
right: -10%; |
||||||
|
bottom: 20%; |
||||||
|
} |
||||||
|
& p{ |
||||||
|
width: 200px; |
||||||
|
position: relative; |
||||||
|
right: -10%; |
||||||
|
bottom: 20%; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
@ -0,0 +1,28 @@ |
|||||||
|
import React, { Component } from 'react'; |
||||||
|
|
||||||
|
import logo from '../../../assets/icons/logo.svg'; |
||||||
|
|
||||||
|
import './Logo.scss'; |
||||||
|
export default class Logo extends Component { |
||||||
|
componentDidMount() { |
||||||
|
setTimeout(() =>{ |
||||||
|
this.props.setPage('bio'); |
||||||
|
},2000); |
||||||
|
} |
||||||
|
render() { |
||||||
|
return( |
||||||
|
<div className="logo d-flex flex-column"> |
||||||
|
<img src={logo} style={{width : 150, height :150}}/> |
||||||
|
<div className="logo__title d-flex"> |
||||||
|
<h1 style={{fontFamily : 'IRANSansNumeralBold'}}>ایما</h1> |
||||||
|
<span></span> |
||||||
|
<h1 style={{fontSize :20}}>داستانبازی</h1> |
||||||
|
</div> |
||||||
|
<div className="logo__footer d-flex"> |
||||||
|
<h2 style={{fontFamily : 'IRANSansNumeralBold',marginRight : 10}}>Eema</h2> |
||||||
|
<h2 style={{fontSize :17}}>Entertainments</h2> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
); |
||||||
|
} |
||||||
|
} |
@ -0,0 +1,38 @@ |
|||||||
|
@media screen and (max-width: 450px){ |
||||||
|
.logo{ |
||||||
|
width: 100%; |
||||||
|
height: 100%; |
||||||
|
justify-content:center; |
||||||
|
align-items:center; |
||||||
|
background: rgb(111,108,255); |
||||||
|
background: linear-gradient(180deg, rgba(111,108,255,1) 0%, rgba(105,73,186,1) 52%); |
||||||
|
position: relative; |
||||||
|
&__title{ |
||||||
|
position: relative; |
||||||
|
right: 10px; |
||||||
|
margin-top: 25px; |
||||||
|
align-items:center; |
||||||
|
& h1{ |
||||||
|
font-size: 25px; |
||||||
|
color: white; |
||||||
|
} |
||||||
|
& span{ |
||||||
|
margin : 0px 5px; |
||||||
|
width: 2px; |
||||||
|
height:22px; |
||||||
|
background-color:white; |
||||||
|
position: relative; |
||||||
|
bottom: 5px; |
||||||
|
} |
||||||
|
} |
||||||
|
&__footer{ |
||||||
|
direction: ltr; |
||||||
|
position: absolute; |
||||||
|
bottom: 55px; |
||||||
|
& h2{ |
||||||
|
font-size: 16px; |
||||||
|
color: white; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
Loading…
Reference in new issue