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 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 { |
export default class Cellphone extends Component { |
||||||
componentDidMount() { |
componentDidMount() { |
||||||
this.inputRef1.focus(); |
this.inputRef1.focus(); |
||||||
} |
} |
||||||
render() { |
render() { |
||||||
return ( |
return ( |
||||||
<div className="auth-cellphone d-flex"> |
<> |
||||||
<form |
{window.innerWidth > 1000 ? ( |
||||||
onSubmit={() => |
<div className="auth-cellphone d-flex flex-column align-items-center"> |
||||||
this.props.parent.setState({ |
<img src={logo} alt="دانوین" /> |
||||||
page: 1, |
<div></div> |
||||||
cellphone: "09" + this.state.cellphone, |
<form |
||||||
}) |
onSubmit={() => |
||||||
} |
this.props.parent.setState({ |
||||||
> |
page: 1, |
||||||
<label htmlFor="cellphone"> |
cellphone: "09" + this.state.cellphone, |
||||||
شماره همراه |
}) |
||||||
<input |
} |
||||||
id="cellphone" |
> |
||||||
type="text" |
<input |
||||||
maxLength={9} |
id="cellphone" |
||||||
inputMode="numeric" |
type="text" |
||||||
autoComplete="off" |
maxLength={9} |
||||||
ref={(input) => { |
inputMode="numeric" |
||||||
this.inputRef1 = input; |
autoComplete="off" |
||||||
}} |
ref={(input) => { |
||||||
onChange={(e) => this.setState({ cellphone: e.target.value })} |
this.inputRef1 = input; |
||||||
onInput={(e) => |
}} |
||||||
(e.target.value = e.target.value |
onChange={(e) => this.setState({ cellphone: e.target.value })} |
||||||
.replace(/[\u0660-\u0669\u06f0-\u06f9]/g, function (c) { |
onInput={(e) => |
||||||
return c.charCodeAt(0) & 0xf; |
(e.target.value = e.target.value |
||||||
}) |
.replace(/[\u0660-\u0669\u06f0-\u06f9]/g, function (c) { |
||||||
.replace(/[^\d]/, "")) |
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> |
<span>+98</span> |
||||||
</form> |
<img src={iran} alt="پرچم" /> |
||||||
</div> |
<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%; |
width: 100%; |
||||||
height: 100%; |
height: 100%; |
||||||
justify-content:center; |
justify-content: center; |
||||||
align-items:center; |
align-items: center; |
||||||
label{ |
label { |
||||||
text-align:right; |
text-align: right; |
||||||
display: flex; |
display: flex; |
||||||
flex-direction:column; |
flex-direction: column; |
||||||
color: white; |
color: white; |
||||||
input{ |
input { |
||||||
background-color: inherit; |
background-color: inherit; |
||||||
border : 0px; |
border: 0px; |
||||||
border-bottom: 2px solid white; |
border-bottom: 2px solid white; |
||||||
font-size: 24px; |
font-size: 24px; |
||||||
color : white; |
color: white; |
||||||
direction : ltr; |
direction: ltr; |
||||||
text-align:center; |
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 React, { Component } from "react"; |
||||||
|
|
||||||
|
import logo from "../../../assets/icons/logo.png"; |
||||||
|
|
||||||
|
import './index.scss'; |
||||||
export default class Profile extends Component { |
export default class Profile extends Component { |
||||||
render() { |
render() { |
||||||
return ( |
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