parent
972912f961
commit
8557d48cf4
20 changed files with 496 additions and 141 deletions
|
After Width: | Height: | Size: 749 B |
|
After Width: | Height: | Size: 436 B |
|
After Width: | Height: | Size: 32 KiB |
|
After Width: | Height: | Size: 1.1 KiB |
|
After Width: | Height: | Size: 605 B |
|
After Width: | Height: | Size: 1.8 KiB |
|
After Width: | Height: | Size: 700 B |
@ -1,44 +1,96 @@ |
||||
import React, { Component } from "react"; |
||||
|
||||
import './index.scss'; |
||||
import logo from "../../../../assets/icons/logo.png"; |
||||
import iran from "../../../../assets/icons/iran.svg"; |
||||
|
||||
import "./index.scss"; |
||||
export default class Cellphone extends Component { |
||||
componentDidMount() { |
||||
this.inputRef1.focus(); |
||||
} |
||||
render() { |
||||
return ( |
||||
<div className="auth-cellphone d-flex"> |
||||
<form |
||||
onSubmit={() => |
||||
this.props.parent.setState({ |
||||
page: 1, |
||||
cellphone: "09" + this.state.cellphone, |
||||
}) |
||||
} |
||||
> |
||||
<label htmlFor="cellphone"> |
||||
شماره همراه |
||||
<input |
||||
id="cellphone" |
||||
type="text" |
||||
maxLength={9} |
||||
inputMode="numeric" |
||||
autoComplete="off" |
||||
ref={(input) => { |
||||
this.inputRef1 = input; |
||||
}} |
||||
onChange={(e) => this.setState({ cellphone: e.target.value })} |
||||
onInput={(e) => |
||||
(e.target.value = e.target.value |
||||
.replace(/[\u0660-\u0669\u06f0-\u06f9]/g, function (c) { |
||||
return c.charCodeAt(0) & 0xf; |
||||
}) |
||||
.replace(/[^\d]/, "")) |
||||
<> |
||||
{window.innerWidth > 1000 ? ( |
||||
<div className="auth-cellphone d-flex flex-column align-items-center"> |
||||
<img src={logo} alt="دانوین" /> |
||||
<div></div> |
||||
<form |
||||
onSubmit={() => |
||||
this.props.parent.setState({ |
||||
page: 1, |
||||
cellphone: "09" + this.state.cellphone, |
||||
}) |
||||
} |
||||
> |
||||
<input |
||||
id="cellphone" |
||||
type="text" |
||||
maxLength={9} |
||||
inputMode="numeric" |
||||
autoComplete="off" |
||||
ref={(input) => { |
||||
this.inputRef1 = input; |
||||
}} |
||||
onChange={(e) => this.setState({ cellphone: e.target.value })} |
||||
onInput={(e) => |
||||
(e.target.value = e.target.value |
||||
.replace(/[\u0660-\u0669\u06f0-\u06f9]/g, function (c) { |
||||
return c.charCodeAt(0) & 0xf; |
||||
}) |
||||
.replace(/[^\d]/, "")) |
||||
} |
||||
/> |
||||
</form> |
||||
</div> |
||||
) : null} |
||||
{window.innerWidth < 1000 ? ( |
||||
<div className="mobile-auth-cellphone d-flex flex-column align-items-center"> |
||||
<img src={logo} alt="دانوین" /> |
||||
<div className="d-flex flex-column"> |
||||
<h1>دانوین</h1> |
||||
<p> |
||||
به دانوین خوش اومدی برای عضویت و ادامه شماره موبایلت رو وارد کن |
||||
و روی گزینه ثبت بزن |
||||
</p> |
||||
</div> |
||||
<form |
||||
onSubmit={() => |
||||
this.props.parent.setState({ |
||||
page: 1, |
||||
cellphone: "09" + this.state.cellphone, |
||||
}) |
||||
} |
||||
/> |
||||
</label> |
||||
</form> |
||||
</div> |
||||
> |
||||
<span>+98</span> |
||||
<img src={iran} alt="پرچم" /> |
||||
<input |
||||
id="cellphone" |
||||
type="text" |
||||
maxLength={9} |
||||
inputMode="numeric" |
||||
autoComplete="off" |
||||
ref={(input) => { |
||||
this.inputRef1 = input; |
||||
}} |
||||
onChange={(e) => this.setState({ cellphone: e.target.value })} |
||||
onInput={(e) => |
||||
(e.target.value = e.target.value |
||||
.replace(/[\u0660-\u0669\u06f0-\u06f9]/g, function (c) { |
||||
return c.charCodeAt(0) & 0xf; |
||||
}) |
||||
.replace(/[^\d]/, "")) |
||||
} |
||||
/> |
||||
<button type="submit">ادامه</button> |
||||
</form> |
||||
<div className="mobile-auth-cellphone__footer d-flex flex-column justify-content-center align-items-center"> |
||||
<div> حساب کاربری ندارید ؟ همین حالا <button>ثبت نام کنید</button></div> |
||||
<div>شرایط استفاده و حریم خصوصی</div> |
||||
</div> |
||||
</div> |
||||
) : null} |
||||
</> |
||||
); |
||||
} |
||||
} |
||||
|
||||
@ -1,21 +1,111 @@ |
||||
.auth-cellphone{ |
||||
.auth-cellphone { |
||||
width: 100%; |
||||
height: 100%; |
||||
justify-content:center; |
||||
align-items:center; |
||||
label{ |
||||
text-align:right; |
||||
justify-content: center; |
||||
align-items: center; |
||||
label { |
||||
text-align: right; |
||||
display: flex; |
||||
flex-direction:column; |
||||
flex-direction: column; |
||||
color: white; |
||||
input{ |
||||
input { |
||||
background-color: inherit; |
||||
border : 0px; |
||||
border: 0px; |
||||
border-bottom: 2px solid white; |
||||
font-size: 24px; |
||||
color : white; |
||||
direction : ltr; |
||||
text-align:center; |
||||
color: white; |
||||
direction: ltr; |
||||
text-align: center; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
|
||||
.mobile-auth-cellphone { |
||||
width: 100%; |
||||
height: 100%; |
||||
justify-content: center; |
||||
align-items: center; |
||||
max-width: 360px; |
||||
margin: 0px auto; |
||||
img { |
||||
margin-bottom: 30px; |
||||
position: relative; |
||||
bottom: 40px; |
||||
} |
||||
h1 { |
||||
font-family: numeralBold; |
||||
font-size: calc(100vw / 15); |
||||
color: #6f7074; |
||||
position: relative; |
||||
bottom: 40px; |
||||
} |
||||
p { |
||||
font-family: numeralLight; |
||||
font-size: calc(100vw / 25); |
||||
color: #6f7074; |
||||
letter-spacing: -1px; |
||||
position: relative; |
||||
bottom: 40px; |
||||
} |
||||
form { |
||||
width: 100%; |
||||
position: relative; |
||||
bottom: 40px; |
||||
img{ |
||||
position: absolute; |
||||
left: 10px; |
||||
top: 6px; |
||||
width: 45px; |
||||
} |
||||
span{ |
||||
text-align: right; |
||||
position: absolute; |
||||
left: 65px; |
||||
top: 5px; |
||||
direction: ltr; |
||||
font-size: calc(100vw / 20); |
||||
color: #a5a5a5; |
||||
} |
||||
input { |
||||
width: 100%; |
||||
background-color: inherit; |
||||
color: #a5a5a5; |
||||
direction: ltr; |
||||
text-align: left; |
||||
background-color: #f2f2f2; |
||||
border: none; |
||||
font-size: calc(100vw / 20); |
||||
padding: 5px 5px 5px 105px; |
||||
border-radius: 5px; |
||||
&:focus { |
||||
outline: 0px; |
||||
} |
||||
} |
||||
button{ |
||||
margin-top: 20px; |
||||
width: 100%; |
||||
border: 0px; |
||||
font-family: numeralMedium; |
||||
background-color: #6CBE44; |
||||
color: white; |
||||
border-radius: 7px; |
||||
padding: 8px; |
||||
font-size: calc(100vw / 20); |
||||
} |
||||
} |
||||
&__footer{ |
||||
position: fixed; |
||||
bottom: 40px; |
||||
div{ |
||||
font-family: numeralMedium; |
||||
font-size: calc(100vw / 28); |
||||
color: #a5a5a5; |
||||
letter-spacing: -1px; |
||||
button{ |
||||
background-color: white; |
||||
border: 0px; |
||||
color: #02733C; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
|
||||
@ -1,11 +1,26 @@ |
||||
import React, { Component } from "react"; |
||||
|
||||
import logo from "../../../assets/icons/logo.png"; |
||||
|
||||
import './index.scss'; |
||||
export default class Profile extends Component { |
||||
render() { |
||||
return ( |
||||
<div className="auth-profile d-flex"> |
||||
<> |
||||
{ |
||||
window.innerWidth > 1000 ? |
||||
<div className="auth-profile d-flex"> |
||||
|
||||
</div> |
||||
</div> : null |
||||
} |
||||
{ |
||||
window.innerWidth < 1000 ? |
||||
<div className="mobile-auth-profile d-flex flex-column"> |
||||
<img src={logo} alt='دانوین' /> |
||||
</div> : null |
||||
} |
||||
</> |
||||
|
||||
); |
||||
} |
||||
} |
||||
|
||||
@ -0,0 +1,7 @@ |
||||
.mobile-auth-profile{ |
||||
width : 100%; |
||||
height : 100%; |
||||
overflow-y: scroll; |
||||
position: relative; |
||||
padding: 15px; |
||||
} |
||||
Loading…
Reference in new issue