@@ -29,7 +27,6 @@ export default class AppRouter extends Component {
{home}
- {/* */}
diff --git a/src/assets/icons/logo.svg b/src/assets/icons/logo.svg
new file mode 100644
index 0000000..e9c92e1
--- /dev/null
+++ b/src/assets/icons/logo.svg
@@ -0,0 +1,3 @@
+
+
+
diff --git a/src/views/Auth/Auth.js b/src/views/Auth/Auth.js
new file mode 100644
index 0000000..38dc521
--- /dev/null
+++ b/src/views/Auth/Auth.js
@@ -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(
+
+ {
+ this.state.page === 'logo' ? : null
+ }
+ {
+ this.state.page === 'bio' ? : null
+ }
+ {
+ this.state.page === 'login' ? : null
+ }
+
+ );
+ }
+}
\ No newline at end of file
diff --git a/src/views/Auth/Auth.scss b/src/views/Auth/Auth.scss
new file mode 100644
index 0000000..81de3a9
--- /dev/null
+++ b/src/views/Auth/Auth.scss
@@ -0,0 +1,9 @@
+@media screen and (max-width: 450px){
+ .auth{
+ width: 100vw;
+ height: 100vh;
+ direction: rtl;
+ overflow-x: hidden;
+ position: relative;
+ }
+}
\ No newline at end of file
diff --git a/src/views/Auth/Bio/Bio.js b/src/views/Auth/Bio/Bio.js
new file mode 100644
index 0000000..1581d84
--- /dev/null
+++ b/src/views/Auth/Bio/Bio.js
@@ -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(
+
+
+ {
+ this.state.section === 0 ? : null
+ }
+ {
+ this.state.section === 1 ? : null
+ }
+ {
+ this.state.section === 2 ? : null
+ }
+
+ {
+ this.state.section === 2 ?
+
this.props.setPage('login')}>
+ شروع
+ :
+
this.props.setPage('login')}>
+ رد کردن
+
+ }
+
+ );
+ }
+}
\ No newline at end of file
diff --git a/src/views/Auth/Bio/Bio.scss b/src/views/Auth/Bio/Bio.scss
new file mode 100644
index 0000000..f5d27a3
--- /dev/null
+++ b/src/views/Auth/Bio/Bio.scss
@@ -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);
+ }
+ }
+}
\ No newline at end of file
diff --git a/src/views/Auth/Bio/FirstBio/FirstBio.js b/src/views/Auth/Bio/FirstBio/FirstBio.js
new file mode 100644
index 0000000..0c2c5e9
--- /dev/null
+++ b/src/views/Auth/Bio/FirstBio/FirstBio.js
@@ -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(
+ <>
+
+ لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی میباشد.
+
+ this.props.setSection(1)}>
+
+
+
+ >
+ );
+ }
+}
\ No newline at end of file
diff --git a/src/views/Auth/Bio/SecondBio/SecondBio.js b/src/views/Auth/Bio/SecondBio/SecondBio.js
new file mode 100644
index 0000000..9633749
--- /dev/null
+++ b/src/views/Auth/Bio/SecondBio/SecondBio.js
@@ -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(
+ <>
+
+ لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی میباشد.
+
+ this.props.setSection(2)}>
+
+
+ this.props.setSection(0)}>
+
+
+
+ >
+ );
+ }
+}
\ No newline at end of file
diff --git a/src/views/Auth/Bio/ThirdBio/ThirdBio.js b/src/views/Auth/Bio/ThirdBio/ThirdBio.js
new file mode 100644
index 0000000..d3f63ce
--- /dev/null
+++ b/src/views/Auth/Bio/ThirdBio/ThirdBio.js
@@ -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(
+ <>
+
+ لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی میباشد.
+
+ this.props.setSection(1)}>
+
+
+
+ >
+ );
+ }
+}
\ No newline at end of file
diff --git a/src/views/Auth/Login/Code/Code.js b/src/views/Auth/Login/Code/Code.js
new file mode 100644
index 0000000..c8f4008
--- /dev/null
+++ b/src/views/Auth/Login/Code/Code.js
@@ -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(
+ <>
+
+
میخوام مطمئن شم که خودتی
+
کد تایید رو برات فرستادم. اینجا واردش کن
+
+
+ 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"
+ />
+ 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"
+ />
+ 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"
+ />
+ 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"
+ />
+
+ >
+ );
+ }
+}
\ No newline at end of file
diff --git a/src/views/Auth/Login/Login.js b/src/views/Auth/Login/Login.js
new file mode 100644
index 0000000..fc5af8b
--- /dev/null
+++ b/src/views/Auth/Login/Login.js
@@ -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(
+
+ {
+ this.state.section === 0 ?
+ : null
+ }
+ {
+ this.state.section === 1 ?
+ : null
+ }
+
+ );
+ }
+}
\ No newline at end of file
diff --git a/src/views/Auth/Login/Login.scss b/src/views/Auth/Login/Login.scss
new file mode 100644
index 0000000..1e8a652
--- /dev/null
+++ b/src/views/Auth/Login/Login.scss
@@ -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%;
+ }
+ }
+ }
+}
\ No newline at end of file
diff --git a/src/views/Auth/Login/Mobile/Mobile.js b/src/views/Auth/Login/Mobile/Mobile.js
new file mode 100644
index 0000000..26dbbda
--- /dev/null
+++ b/src/views/Auth/Login/Mobile/Mobile.js
@@ -0,0 +1,21 @@
+import React, { Component } from 'react';
+
+export default class Mobile extends Component {
+ render() {
+ return(
+ <>
+
+
منتظرت بودیم
+
شمارهتو بده تا کد تأیید رو برات بفرستم. دست دست نکن
+
+
+ this.props.setSection(1)}>
+ ادامه
+
+ >
+ );
+ }
+}
\ No newline at end of file
diff --git a/src/views/Auth/Logo/Logo.js b/src/views/Auth/Logo/Logo.js
new file mode 100644
index 0000000..283209c
--- /dev/null
+++ b/src/views/Auth/Logo/Logo.js
@@ -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(
+
+
+
+
ایما
+
+ داستانبازی
+
+
+
Eema
+ Entertainments
+
+
+ );
+ }
+}
\ No newline at end of file
diff --git a/src/views/Auth/Logo/Logo.scss b/src/views/Auth/Logo/Logo.scss
new file mode 100644
index 0000000..5c02e7f
--- /dev/null
+++ b/src/views/Auth/Logo/Logo.scss
@@ -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;
+ }
+ }
+ }
+}
\ No newline at end of file