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

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}
</>
);
}
}