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