You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
165 lines
6.2 KiB
165 lines
6.2 KiB
import React, { Component } from "react"; |
|
import { Link } from "react-router-dom"; |
|
import logo from "../../../../assets/icons/logo.png"; |
|
import iran from "../../../../assets/icons/iran.png"; |
|
import pic from "../../../../assets/images/pic.png"; |
|
|
|
import "./index.scss"; |
|
|
|
const maxDesktopSize = 1250; |
|
const maxMobileSize = 550; |
|
|
|
const fontSize = { |
|
desktop: { |
|
span: window.innerWidth > maxDesktopSize ? 18 : window.innerWidth / 80, |
|
input: window.innerWidth > maxDesktopSize ? 18 : window.innerWidth / 80, |
|
button: window.innerWidth > maxDesktopSize ? 18 : window.innerWidth / 85, |
|
div: window.innerWidth > maxDesktopSize ? 12 : window.innerWidth / 100, |
|
}, |
|
mobile: { |
|
span: window.innerWidth > maxMobileSize ? 18 : window.innerWidth / 22, |
|
input: window.innerWidth > maxMobileSize ? 18 : window.innerWidth / 22, |
|
button: window.innerWidth > maxMobileSize ? 20 : window.innerWidth / 24, |
|
div: window.innerWidth > maxMobileSize ? 14 : window.innerWidth / 30, |
|
h1: window.innerWidth > maxMobileSize ? 30 : window.innerWidth / 18, |
|
p: window.innerWidth > maxMobileSize ? 16 : window.innerWidth / 32, |
|
}, |
|
}; |
|
|
|
export default class Cellphone extends Component { |
|
render() { |
|
return ( |
|
<> |
|
{window.innerWidth > 1000 ? ( |
|
<div className="auth-cellphone d-flex justify-content-center align-items-center"> |
|
<div className="auth-cellphone__box d-flex"> |
|
<div |
|
style={{ width: "48%", height: "100%" }} |
|
className="d-flex flex-column justify-content-center align-items-center" |
|
> |
|
<img src={logo} alt="دانوین" /> |
|
<form |
|
className="mb-3" |
|
onSubmit={() => |
|
this.props.parent.setState({ |
|
page: 1, |
|
cellphone: "09" + this.state.cellphone, |
|
}) |
|
} |
|
> |
|
<span style={{ fontSize: fontSize.desktop.span }}>09</span> |
|
<img src={iran} alt=window.t("پرچم") /> |
|
<input |
|
style={{ fontSize: fontSize.desktop.span }} |
|
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 |
|
style={{ fontSize: fontSize.desktop.button }} |
|
type="submit" |
|
> |
|
ادامه |
|
</button> |
|
</form> |
|
<div className="auth-cellphone__box--footer d-flex flex-column justify-content-center align-items-center"> |
|
<Link |
|
style={{ |
|
fontSize: fontSize.desktop.div, |
|
textDecoration: "none", |
|
color: "gray", |
|
}} |
|
to="/page/privacy" |
|
> |
|
شرایط استفاده و حریم خصوصی |
|
</Link> |
|
</div> |
|
</div> |
|
<div style={{ width: "48%", height: "100%", opacity: 0 }}> |
|
<img |
|
src={pic} |
|
alt=window.t("عکس") |
|
style={{ width: "100%", height: "100%" }} |
|
/> |
|
</div> |
|
</div> |
|
</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 style={{ fontSize: fontSize.mobile.h1 }}>دانوین</h1> |
|
<p style={{ fontSize: fontSize.mobile.p }}> |
|
به دانوین خوش اومدی برای عضویت و ادامه شماره موبایلت رو وارد کن |
|
و روی گزینه ثبت بزن |
|
</p> |
|
</div> |
|
<form |
|
onSubmit={() => |
|
this.props.parent.setState({ |
|
page: 1, |
|
cellphone: "09" + this.state.cellphone, |
|
}) |
|
} |
|
> |
|
<span style={{ fontSize: fontSize.mobile.span }}>09</span> |
|
<img src={iran} alt=window.t("پرچم") /> |
|
<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]/, "")) |
|
} |
|
style={{ fontSize: fontSize.mobile.input }} |
|
/> |
|
<button |
|
style={{ fontSize: fontSize.mobile.button }} |
|
type="submit" |
|
> |
|
ادامه |
|
</button> |
|
</form> |
|
<Link |
|
to="/page/privacy" |
|
style={{ |
|
textDecoration: "none", |
|
color: "gray", |
|
fontSize: fontSize.mobile.div, |
|
}} |
|
className="mobile-auth-cellphone__footer d-flex flex-column justify-content-center align-items-center" |
|
> |
|
شرایط استفاده و حریم خصوصی |
|
</Link> |
|
</div> |
|
) : null} |
|
</> |
|
); |
|
} |
|
}
|
|
|