Danovin
/
danovin
5
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

reza added last version1

Browse Source
master
RezaAshrafi77 3 years ago
parent 9368cfcf96
commit 1e2ab85cdc
35 changed files with 729 additions and 461 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 97
      src/AppRouter.js
  2. 60
      src/Redux/actions/user.js
  3. 70
      src/Redux/proxy.js
  4. BIN
      src/assets/icons/danger_lg.png
  5. BIN
      src/assets/icons/home_ar(2).png
  6. BIN
      src/assets/icons/home_ar.png
  7. BIN
      src/assets/icons/home_chat.png
  8. BIN
      src/assets/icons/ppt.png
  9. 4
      src/views/Auth/Login/Cellphone/index.js
  10. 16
      src/views/Auth/Login/Cellphone/index.scss
  11. 13
      src/views/Auth/Login/Code/index.js
  12. 48
      src/views/Auth/Login/Code/index.scss
  13. 5
      src/views/Auth/Login/Timer/index.css
  14. 22
      src/views/Auth/Login/Timer/index.js
  15. 8
      src/views/Auth/Login/index.js
  16. 20
      src/views/Auth/Profile/GenderSwitch/index.js
  17. 0
      src/views/Auth/Profile/GenderSwitch/index.scss
  18. 41
      src/views/Auth/Profile/Input/index.js
  19. 27
      src/views/Auth/Profile/Select/index.js
  20. 16
      src/views/Auth/Profile/TextArea/index.js
  21. 79
      src/views/Auth/Profile/Upload/index.js
  22. 140
      src/views/Auth/Profile/index.js
  23. 119
      src/views/Auth/Profile/index.scss
  24. 6
      src/views/Auth/index.js
  25. 46
      src/views/Home/HomeStatic/index.scss
  26. 60
      src/views/Home/Membership/index.scss
  27. 6
      src/views/Home/index.js
  28. 9
      src/views/Home/index.scss
  29. 4
      src/views/Product/index.js
  30. 3
      src/views/Product/index.scss
  31. 63
      src/views/QR/Links/index.js
  32. 20
      src/views/QR/Links/index.scss
  33. 29
      src/views/QR/PDF/index.scss
  34. 27
      src/views/QR/PowerPoint/index.scss
  35. 28
      src/views/QR/index.scss

97
src/AppRouter.js
Unescape View File

@ -1,21 +1,24 @@
import React, { Component } from 'react'; import React, { Component } from "react";
import './App.css'; import "./App.css";
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom'; import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
// import proxy from './Redux/proxy';
import Home from './views/Home/index'; import { connect } from "react-redux";
import Faq from './views/Faq/index';
import Contact from './views/Contact/index'; import proxy from "./Redux/proxy";
import About from './views/About/index'; import Home from "./views/Home/index";
import Products from './views/Products/index'; import Faq from "./views/Faq/index";
import Product from './views/Product/index'; import Contact from "./views/Contact/index";
import QR from './views/QR/index'; import About from "./views/About/index";
import Auth from './views/Auth/index'; import Products from "./views/Products/index";
import QRScan from './views/QRScan/index'; import Product from "./views/Product/index";
import Activation from './views/Activation/index'; import QR from "./views/QR/index";
import ChatList from './views/ChatList/index'; import Auth from "./views/Auth/index";
import Chatroom from './views/ChatRoom/index'; import QRScan from "./views/QRScan/index";
import Cart from './views/Cart/index'; import Activation from "./views/Activation/index";
import MyBooks from './views/MyBooks/index'; import ChatList from "./views/ChatList/index";
import Chatroom from "./views/ChatRoom/index";
import Cart from "./views/Cart/index";
import MyBooks from "./views/MyBooks/index";
class AppRouter extends Component { class AppRouter extends Component {
constructor(props) { constructor(props) {
@ -25,9 +28,16 @@ class AppRouter extends Component {
state = {}; state = {};
render() { render() {
let home = ( let home = (
<Route exact path={'/'}> <Route exact path={"/"}>
{proxy.status() ? (
this.props.profile.username ? (
<Home /> <Home />
{/* {proxy.status() ? <Home /> : <Auth />} */} ) : (
<Auth page={"profile"} />
)
) : (
<Auth />
)}
</Route> </Route>
); );
@ -35,58 +45,59 @@ class AppRouter extends Component {
<Router> <Router>
<Switch> <Switch>
{home} {home}
{/* <Route path={'/list'}> <Route path={"/faq"}>
<List />
</Route> */}
<Route path={'/faq'}>
<Faq /> <Faq />
</Route> </Route>
<Route path={'/contact'}> <Route path={"/contact"}>
<Contact /> <Contact />
</Route> </Route>
<Route path={'/about'}> <Route path={"/about"}>
<About /> <About />
</Route> </Route>
<Route exact path={'/products'}> <Route exact path={"/products"}>
<Products /> <Products />
</Route> </Route>
<Route exact path={'/products/:id'}> <Route exact path={"/products/:id"}>
<Product /> <Product />
</Route> </Route>
<Route exact path={'/qr'}> <Route exact path={"/qr"}>
<QR /> <QR />
</Route> </Route>
<Route exact path={'/auth'}> <Route exact path={"/auth"}>
<Auth /> <Auth />
</Route> </Route>
<Route exact path={'/profile'}> <Route exact path={"/profile"}>
<Auth page={'profile'} /> <Auth page={"profile"} />
</Route> </Route>
<Route exact path={'/qr-scan'}> <Route exact path={"/qr-scan"}>
<QRScan /> <QRScan />
</Route> </Route>
<Route exact path={'/activation'}> <Route exact path={"/activation"}>
<Activation /> <Activation />
</Route> </Route>
<Route exact path={'/chatroom'}> <Route exact path={"/chatroom"}>
<ChatList /> <ChatList />
</Route> </Route>
<Route exact path={'/cart'}> <Route exact path={"/cart"}>
<Cart /> <Cart />
</Route> </Route>
<Route exact path={'/mybooks'}> <Route exact path={"/mybooks"}>
<MyBooks /> <MyBooks />
</Route> </Route>
{ {window.innerWidth < 1000 ? (
window.innerWidth < 1000 ? <Route exact path={"/chatroom/:id"}>
<Route exact path={'/chatroom/:id'}>
<Chatroom /> <Chatroom />
</Route> : null </Route>
} ) : null}
</Switch> </Switch>
</Router> </Router>
); );
} }
} }
export default AppRouter; export default connect(
(state) => ({
profile: state.user.status.profile || {},
}),
{}
)(AppRouter);

60
src/Redux/actions/user.js
Unescape View File

@ -1,36 +1,52 @@
import proxy from '../proxy'; import proxy from "../proxy";
const user = { const user = {
otp: (data, history) => async (dispatch) => otp: (data, history) => async (dispatch) =>
await proxy.login('public/sendOTP', data, { history, dispatch }), await proxy.login("public/sendOTP", data, { history, dispatch }),
otp_login: (data, history) => async (dispatch) => otp_login: (data, history) => async (dispatch) =>
await proxy.login('user/otp/login', data, { history, dispatch }), await proxy.login("user/otp/login", data, { history, dispatch }),
register: (data, history) => async (dispatch) => register: (data, history) => async (dispatch) =>
await proxy.login('user/register', data, { history, dispatch }), await proxy.login("user/register", data, { history, dispatch }),
switchRole: (data, history) => async (dispatch) => switchRole: (data, history) => async (dispatch) =>
await proxy.login('user/switchRole', data, { history, dispatch }), await proxy.login("user/switchRole", data, { history, dispatch }),
logout: (data, history) => async (dispatch) => logout: (data, history) => async (dispatch) =>
await proxy.logout('user/logout', data, { history, dispatch }), await proxy.logout("user/logout", data, { history, dispatch }),
getUserRole: (data) => async (dispatch) => getUserRole: (data) => async (dispatch) =>
await proxy.get('user/getUserRole', data, { dispatch }), await proxy.get("user/getUserRole", data, { dispatch }),
list: (data = {}) => async (dispatch) => list:
await proxy.get('user/list', data, { dispatch }), (data = {}) =>
domains: (data = {}) => async (dispatch) => async (dispatch) =>
await proxy.get('user/domains', data, { dispatch }), await proxy.get("user/list", data, { dispatch }),
getmothers: (data = {}) => async (dispatch) => domains:
await proxy.get2('mothers/list', data, { (data = {}) =>
async (dispatch) =>
await proxy.get("user/domains", data, { dispatch }),
getmothers:
(data = {}) =>
async (dispatch) =>
await proxy.get2("mothers/list", data, {
dispatch, dispatch,
}), }),
update: (data = {}, data2 = {}) => async (dispatch) => { getProfile:
await proxy.put('user/update', data); (data = {}) =>
await proxy.get('user/list', data2, { dispatch }); async (dispatch) =>
await proxy.get("user/getProfile", data, { dispatch }),
setProfile:
(data = {}, data2 = {}) =>
async (dispatch) => {
await proxy.put("user/setProfile", data, { dispatch });
await proxy.get("user/getProfile", data2, { dispatch });
}, },
add: (data = {}, data2 = {}) => async (dispatch) => { add:
await proxy.post('user/add', data); (data = {}, data2 = {}) =>
await proxy.get('user/list', data2, { dispatch }); async (dispatch) => {
await proxy.post("user/add", data);
await proxy.get("user/list", data2, { dispatch });
}, },
del: (data = {}, data2 = {}) => async (dispatch) => { del:
await proxy.delete('user/delete', data); (data = {}, data2 = {}) =>
await proxy.get('user/list', data2, { dispatch }); async (dispatch) => {
await proxy.delete("user/delete", data);
await proxy.get("user/list", data2, { dispatch });
}, },
}; };

70
src/Redux/proxy.js
Unescape View File

@ -1,18 +1,15 @@
import { ApiConfig } from './../constants/defaultValues'; import { ApiConfig } from "./../constants/defaultValues";
import axios from 'axios'; import axios from "axios";
let { baseUrl, apiKey } = ApiConfig; let { baseUrl, apiKey } = ApiConfig;
baseUrl = baseUrl + '/'; let access = window.localStorage.getItem("access");
const baseUrl2 = 'https://dnvn.ir/api/v1'; baseUrl = baseUrl + "/";
const baseUrl2 = "https://dnvn.ir/api/v1";
const Axios = axios.create({ const Axios = axios.create({
withCredentials: true, withCredentials: true,
validateStatus: null, validateStatus: null,
baseURL: baseUrl, baseURL: baseUrl,
}); headers: access ? { Authorization: `Bearer ${access}` } : {},
const Axios2 = axios.create({
withCredentials: true,
validateStatus: null,
baseURL: baseUrl2,
}); });
class Proxy { class Proxy {
get = async (url, params, opt = {}) => get = async (url, params, opt = {}) =>
@ -21,12 +18,6 @@ class Proxy {
opt, opt,
async () => await Axios.get(url, { params, ...opt }) async () => await Axios.get(url, { params, ...opt })
); );
get2 = async (url, params, opt = {}) =>
await this.check2(
url,
opt,
async () => await Axios2.get(url, { params, ...opt })
);
post = async (url, params, opt = {}) => post = async (url, params, opt = {}) =>
await this.check(url, opt, async () => await Axios.post(url, params, opt)); await this.check(url, opt, async () => await Axios.post(url, params, opt));
put = async (url, params, opt = {}) => put = async (url, params, opt = {}) =>
@ -41,7 +32,7 @@ class Proxy {
check = async (url, { dispatch }, fetch) => { check = async (url, { dispatch }, fetch) => {
dispatch = dispatch || (() => {}); dispatch = dispatch || (() => {});
dispatch({ type: 'loading' }); dispatch({ type: "loading" });
let response = await fetch(); let response = await fetch();
switch (response.status) { switch (response.status) {
case 200: case 200:
@ -55,32 +46,14 @@ class Proxy {
} }
break; break;
default: default:
dispatch({ type: 'error', data: response.data }); dispatch({ type: "error", data: response.data });
}
return false;
};
check2 = async (url, { dispatch }, fetch) => {
dispatch({ type: 'loading' });
let response = await fetch();
switch (response.status) {
case 200:
dispatch({ type: url, data: response.data });
return response.data;
case 401:
if (await this.refresh()) {
let response = await fetch();
dispatch({ type: url, data: response.data });
return response.data;
}
break;
default:
dispatch({ type: 'error', data: response.data });
} }
return false; return false;
}; };
refresh = async () => { refresh = async () => {
let refresh = localStorage.getItem('refresh'); let refresh = localStorage.getItem("refresh");
if (!refresh) window.location.href = '/'; if (!refresh) window.location.href = "/";
let login = await this.login( let login = await this.login(
{}, {},
{ headers: { Authorization: `Bearer ${refresh}` } } { headers: { Authorization: `Bearer ${refresh}` } }
@ -92,10 +65,11 @@ class Proxy {
dispatch: (obj) => { dispatch: (obj) => {
let login = obj.data; let login = obj.data;
if (!login || !login.refreshToken) return false; if (!login || !login.refreshToken) return false;
localStorage.setItem('refresh', login.refreshToken); localStorage.setItem("refresh", login.refreshToken);
localStorage.setItem("access", login.accessToken);
delete login.refreshToken; delete login.refreshToken;
delete login.accessToken; delete login.accessToken;
localStorage.setItem('userData', JSON.stringify(login)); localStorage.setItem("userData", JSON.stringify(login));
dispatch(obj); dispatch(obj);
}, },
}); });
@ -103,19 +77,21 @@ class Proxy {
logout = async (url, params, { dispatch }) => { logout = async (url, params, { dispatch }) => {
this.post(url, params, { this.post(url, params, {
dispatch: (obj) => { dispatch: (obj) => {
localStorage.removeItem('refresh'); localStorage.removeItem("refresh");
localStorage.removeItem('userData'); localStorage.removeItem("access");
localStorage.removeItem("userData");
dispatch(obj); dispatch(obj);
}, },
}); });
}; };
status = () => { status = () => {
let refresh = localStorage.getItem('refresh'); let refresh = localStorage.getItem("refresh");
let userData = localStorage.getItem('userData'); let userData = localStorage.getItem("userData");
if (!refresh) return false; if (!refresh) return false;
if (refresh == 'undefined') { if (refresh == "undefined") {
localStorage.removeItem('refresh'); localStorage.removeItem("refresh");
localStorage.removeItem('userData'); localStorage.removeItem("access");
localStorage.removeItem("userData");
return false; return false;
} }
return JSON.parse(userData); return JSON.parse(userData);

BIN
src/assets/icons/danger_lg.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.8 KiB

BIN
src/assets/icons/home_ar(2).png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 31 KiB

BIN
src/assets/icons/home_ar.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 12 KiB

BIN
src/assets/icons/home_chat.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 13 KiB

BIN
src/assets/icons/ppt.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.5 KiB

4
src/views/Auth/Login/Cellphone/index.js
Unescape View File

@ -11,8 +11,8 @@ const maxMobileSize = 550;
const fontSize = { const fontSize = {
desktop: { desktop: {
span: window.innerWidth > maxDesktopSize ? 18 : window.innerWidth / 85, span: window.innerWidth > maxDesktopSize ? 18 : window.innerWidth / 80,
input: window.innerWidth > maxDesktopSize ? 18 : window.innerWidth / 85, input: window.innerWidth > maxDesktopSize ? 18 : window.innerWidth / 80,
button: window.innerWidth > maxDesktopSize ? 18 : window.innerWidth / 85, button: window.innerWidth > maxDesktopSize ? 18 : window.innerWidth / 85,
div: window.innerWidth > maxDesktopSize ? 12 : window.innerWidth / 100, div: window.innerWidth > maxDesktopSize ? 12 : window.innerWidth / 100,
}, },

16
src/views/Auth/Login/Cellphone/index.scss
Unescape View File

@ -19,27 +19,29 @@
} }
form { form {
width: 100%; width: 100%;
max-width: 400px;
position: relative; position: relative;
padding: 10px 40px;
img { img {
position: absolute; position: absolute;
left: 10px; left: 50px;
top: 6px; top: 17px;
width: 45px; width: 45px;
} }
span { span {
text-align: right; text-align: right;
position: absolute; position: absolute;
left: 65px; left: 108px;
top: 8px; top: 18px;
direction: ltr; direction: ltr;
color: #a5a5a5; color: #a5a5a5;
font-family: numeralLight;
} }
input { input {
font-family: numeralLight;
width: 100%; width: 100%;
max-width: 400px;
background-color: inherit; background-color: inherit;
color: #a5a5a5; color: #a5a5a5;
height: 43px;
direction: ltr; direction: ltr;
text-align: left; text-align: left;
background-color: #f2f2f2; background-color: #f2f2f2;
@ -53,7 +55,6 @@
button { button {
margin-top: 20px; margin-top: 20px;
width: 100%; width: 100%;
max-width: 400px;
border: 0px; border: 0px;
font-family: numeralLight; font-family: numeralLight;
background-color: #6cbe44; background-color: #6cbe44;
@ -63,7 +64,6 @@
} }
} }
&--footer { &--footer {
max-width: 400px;
div { div {
font-family: numeralLight; font-family: numeralLight;
color: #a5a5a5; color: #a5a5a5;

13
src/views/Auth/Login/Code/index.js
Unescape View File

@ -10,9 +10,9 @@ const maxDesktopSize = 1250;
const fontSize = { const fontSize = {
desktop: { desktop: {
input: window.innerWidth > maxDesktopSize ? 18 : window.innerWidth / 85, input: window.innerWidth > maxDesktopSize ? 20 : window.innerWidth / 85,
button: window.innerWidth > maxDesktopSize ? 18 : window.innerWidth / 85, button: window.innerWidth > maxDesktopSize ? 16 : window.innerWidth / 85,
div: window.innerWidth > maxDesktopSize ? 14 : window.innerWidth / 95, div: window.innerWidth > maxDesktopSize ? 12 : window.innerWidth / 95,
}, },
}; };
export default class Code extends Component { export default class Code extends Component {
@ -164,7 +164,9 @@ export default class Code extends Component {
/> />
</label> </label>
</div> </div>
<button style={{ fontSize: fontSize.desktop.button }}>ثبت</button> <button style={{ fontSize: fontSize.desktop.button }}>
ثبت
</button>
{!this.state.resendStatus ? ( {!this.state.resendStatus ? (
<Timer seconds={10} parent={this} /> <Timer seconds={10} parent={this} />
) : ( ) : (
@ -210,7 +212,8 @@ export default class Code extends Component {
<div style={{ maxHeight: 60 }} className="d-flex flex-column mb-3"> <div style={{ maxHeight: 60 }} className="d-flex flex-column mb-3">
<h1>دانوین</h1> <h1>دانوین</h1>
<p> <p>
یک کد تائیدیه به شماره <span>{this.props.parent.state.cellphone}</span> ارسال شد <br /> یک کد تائیدیه به شماره{" "}
<span>{this.props.parent.state.cellphone}</span> ارسال شد <br />
آن را در قسمت زیر وارد کنید. آن را در قسمت زیر وارد کنید.
</p> </p>
</div> </div>

48
src/views/Auth/Login/Code/index.scss
Unescape View File

@ -1,4 +1,4 @@
.auth-code{ .auth-code {
width: 100vw; width: 100vw;
height: 100vh; height: 100vh;
&__box { &__box {
@ -11,46 +11,48 @@
img { img {
margin-bottom: 30px; margin-bottom: 30px;
} }
button{ button {
margin-top: 20px; margin-top: 20px;
width: 100%; width: 100%;
max-width: 300px; max-width: 300px;
border: 0px; border: 0px;
font-family: numeralMedium; font-family: numeralLight;
background-color: #6CBE44; background-color: #6cbe44;
color: white; color: white;
border-radius: 7px; border-radius: 7px;
padding: 8px; padding: 8px;
} }
&--codes{ &--codes {
direction: ltr; direction: ltr;
input { input {
max-width: 60px; max-width: 60px;
max-height: 60px; max-height: 60px;
background-color: #f2f2f2; background-color: #f2f2f2;
border : 0px; border: 0px;
margin : 0px 10px; margin: 0px 10px;
color: #6F7074; color: #6f7074;
text-align: center; text-align: center;
direction : ltr; direction: ltr;
border-radius: 5px; border-radius: 5px;
padding: 10px 15px; padding: 10px 15px;
&:focus{ font-family: numeralLight;
&:focus {
outline: 0px; outline: 0px;
} }
} }
div{ div {
letter-spacing:-1px; letter-spacing: -1px;
font-family: numeralLight;
} }
} }
} }
} }
.mobile-auth-code{ .mobile-auth-code {
width: 100%; width: 100%;
height: 100%; height: 100%;
justify-content:center; justify-content: center;
align-items:center; align-items: center;
direction: ltr; direction: ltr;
position: relative; position: relative;
max-width: 360px; max-width: 360px;
@ -75,33 +77,33 @@
position: relative; position: relative;
bottom: 40px; bottom: 40px;
} }
button{ button {
margin-top: 20px; margin-top: 20px;
width: 100%; width: 100%;
max-width: 300px; max-width: 300px;
border: 0px; border: 0px;
font-family: numeralMedium; font-family: numeralMedium;
background-color: #6CBE44; background-color: #6cbe44;
color: white; color: white;
border-radius: 7px; border-radius: 7px;
padding: 8px; padding: 8px;
font-size: calc(100vw / 20); font-size: calc(100vw / 20);
} }
&__codes{ &__codes {
direction: ltr; direction: ltr;
input { input {
max-width: 60px; max-width: 60px;
max-height: 60px; max-height: 60px;
background-color: #f2f2f2; background-color: #f2f2f2;
border : 0px; border: 0px;
margin : 0px 10px; margin: 0px 10px;
color: #6F7074; color: #6f7074;
text-align: center; text-align: center;
direction : ltr; direction: ltr;
font-size: calc(100vw / 15); font-size: calc(100vw / 15);
border-radius: 5px; border-radius: 5px;
padding: 10px 15px; padding: 10px 15px;
&:focus{ &:focus {
outline: 0px; outline: 0px;
} }
} }

5
src/views/Auth/Login/Timer/index.css
Unescape View File

@ -1,6 +1,7 @@
.timer{ .timer {
flex-direction: row; flex-direction: row;
direction: rtl !important; direction: rtl !important;
margin-right: 10px; margin-right: 10px;
color: #6CBE44; color: #6cbe44;
font-family: numeralLight;
} }

22
src/views/Auth/Login/Timer/index.js
Unescape View File

@ -5,7 +5,7 @@ const maxDesktopSize = 1250;
const fontSize = { const fontSize = {
desktop: { desktop: {
div: window.innerWidth > maxDesktopSize ? 14 : window.innerWidth / 95, div: window.innerWidth > maxDesktopSize ? 12 : window.innerWidth / 95,
}, },
}; };
export default class Timer extends Component { export default class Timer extends Component {
@ -66,17 +66,29 @@ export default class Timer extends Component {
<> <>
{window.innerWidth > 1000 ? ( {window.innerWidth > 1000 ? (
<div className="timer d-flex mt-4"> <div className="timer d-flex mt-4">
<div style={{ color: "#a5a5a5", marginLeft: 5, fontSize: fontSize.desktop.div, fontFamily:'numeralMedium' }}> <div
style={{
color: "#a5a5a5",
marginLeft: 5,
fontSize: fontSize.desktop.div,
fontFamily: "numeralLight",
}}
>
زمان باقیمانده تا انقضای کد: زمان باقیمانده تا انقضای کد:
</div> </div>
<div style={{ fontSize: fontSize.desktop.div }}>{this.state.time.s}</div>: <div style={{ fontSize: fontSize.desktop.div }}>
<div style={{ fontSize: fontSize.desktop.div }}>{this.state.time.m + this.state.time.h * 60}</div> {this.state.time.s}
</div>
:
<div style={{ fontSize: fontSize.desktop.div }}>
{this.state.time.m + this.state.time.h * 60}
</div>
</div> </div>
) : null} ) : null}
{window.innerWidth < 1000 ? ( {window.innerWidth < 1000 ? (
<div className="timer d-flex mt-4"> <div className="timer d-flex mt-4">
<div style={{ color: "#a5a5a5", marginLeft: 5 }}> <div style={{ color: "#a5a5a5", marginLeft: 5 }}>
زمان باقیمانده تا انقضای کد: زمان باقیمانده تا انقضای کد
</div> </div>
<div>{this.state.time.s}</div>: <div>{this.state.time.s}</div>:
<div>{this.state.time.m + this.state.time.h * 60}</div> <div>{this.state.time.m + this.state.time.h * 60}</div>

8
src/views/Auth/Login/index.js
Unescape View File

@ -19,7 +19,13 @@ class Login extends Component {
async componentDidUpdate() { async componentDidUpdate() {
const { cellphone, otp, page } = this.state; const { cellphone, otp, page } = this.state;
if (cellphone && !otp) this.props.otp({ cellphone }); if (cellphone && !otp) this.props.otp({ cellphone });
if (page && cellphone && otp) this.props.otp_login({ cellphone, otp }); if (page && cellphone && otp)
this.props.otp_login({
cellphone,
otp,
userToken: "1",
applicationToken: "11",
});
} }
resend = () => { resend = () => {

20
src/views/Auth/Profile/GenderSwitch/index.js
Unescape View File

@ -0,0 +1,20 @@
import React from "react";
export default function GenderSwitch(props) {
return (
<>
{window.innerWidth > 1000 ? (
<div className="gender d-flex">
<button onClick={}>پسر</button>
<button>دختر</button>
</div>
) : null}
{window.innerWidth < 1000 ? (
<div className="mobile-gender d-flex">
<button>پسر</button>
<button>دختر</button>
</div>
) : null}
</>
);
}

0
src/views/Auth/Profile/GenderSwitch/index.scss
Unescape View File

41
src/views/Auth/Profile/Input/index.js
Unescape View File

@ -1,27 +1,40 @@
import React from 'react'; import React from "react";
import TextField from '@material-ui/core/TextField'; import TextField from "@material-ui/core/TextField";
import { makeStyles } from '@material-ui/core/styles'; import { makeStyles } from "@material-ui/core/styles";
const useStyles = makeStyles((theme) => ({ export default function FormPropsTextFields(props) {
const useStyles = makeStyles((theme) => ({
root: { root: {
'& .MuiTextField-root': { "& .MuiTextField-root": {
width: "100%",
width: '100%', position: "relative",
position : 'relative', marginRight: 10,
marginRight : 10, "& input": {
textAlign: props.align,
direction: props.align === "right" ? "rtl" : "ltr",
},
}, },
}, },
})); }));
export default function FormPropsTextFields(props) {
const classes = useStyles(); const classes = useStyles();
const { parent, defaultValue } = props;
return ( return (
<form className={classes.root} noValidate autoComplete="off"> <form className={classes.root} noValidate autoComplete="off">
<div> <div>
<TextField id="outlined-basic" name={props.name} label={props.label} variant="outlined" /> <TextField
id="outlined-basic"
name={props.name}
label={props.label}
variant="outlined"
onChange={(e) => parent.onChange(e.target.name, e.target.value)}
defaultValue={defaultValue}
/>
</div> </div>
</form> </form>
); );
} }
FormPropsTextFields.defaultProps = {
align: "right",
};

27
src/views/Auth/Profile/Select/index.js
Unescape View File

@ -1,17 +1,16 @@
import React from "react"; import React from "react";
import { makeStyles, withStyles } from "@material-ui/core/styles"; import { makeStyles, withStyles } from "@material-ui/core/styles";
import FormControl from "@material-ui/core/FormControl"; import FormControl from "@material-ui/core/FormControl";
import Select from '@material-ui/core/Select'; import Select from "@material-ui/core/Select";
import InputBase from "@material-ui/core/InputBase"; import InputBase from "@material-ui/core/InputBase";
import KeyboardArrowDownIcon from "@material-ui/icons/KeyboardArrowDown"; import KeyboardArrowDownIcon from "@material-ui/icons/KeyboardArrowDown";
import InputLabel from '@material-ui/core/InputLabel'; import InputLabel from "@material-ui/core/InputLabel";
const BootstrapInput = withStyles((theme) => ({ const BootstrapInput = withStyles((theme) => ({
root: { root: {
"label + &": { "label + &": {
marginTop: theme.spacing(3), marginTop: theme.spacing(3),
}, },
},
input: { input: {
borderRadius: 4, borderRadius: 4,
position: "relative", position: "relative",
@ -20,15 +19,15 @@ const BootstrapInput = withStyles((theme) => ({
fontSize: window.innerWidth > 1000 ? 16 : "calc(100vw / 30)", fontSize: window.innerWidth > 1000 ? 16 : "calc(100vw / 30)",
color: "#a5a5a5", color: "#a5a5a5",
// maxWidth : 70, // maxWidth : 70,
minWidth: '100%', minWidth: "100%",
padding: "0px", padding: "0px",
transition: theme.transitions.create(["border-color", "box-shadow"]),
// Use the system font instead of the default Roboto font. // Use the system font instead of the default Roboto font.
fontFamily: "numeralLight", fontFamily: "numeralLight",
"&:focus": { "&:focus": {
borderRadius: 4, borderRadius: 4,
}, },
}, },
},
}))(InputBase); }))(InputBase);
const useStyles = makeStyles((theme) => ({ const useStyles = makeStyles((theme) => ({
@ -40,21 +39,21 @@ const useStyles = makeStyles((theme) => ({
export default function CustomizedSelects(props) { export default function CustomizedSelects(props) {
const classes = useStyles(); const classes = useStyles();
const { parent } = props;
console.log(props);
return ( return (
<div style={{ position: "relative"}}> <div style={{ position: "relative" }}>
<FormControl variant="outlined" className={classes.marginLeft}> <FormControl variant="outlined" className={classes.marginLeft}>
<InputLabel id="demo-simple-select-outlined-label">{props.label}</InputLabel> <InputLabel id="demo-simple-select-outlined-label">
{props.label}
</InputLabel>
<Select <Select
labelId="demo-simple-select-outlined-label" labelId="demo-simple-select-outlined-label"
id="demo-simple-select-outlined" id="demo-simple-select-outlined"
value={props.parent.state[props.name]} // value={props.parent.state[props.name]}
onChange={(e) => onChange={(e) => parent.onChange(props.name, e.target.value)}
props.parent.setState({ [props.name]: e.target.value })
} label="Age"
> >
{props.options.map((item,i) => ( {/* 09366858119 */}
{props.options.map((item, i) => (
<option key={i} value={item}> <option key={i} value={item}>
{item} {item}
</option> </option>

16
src/views/Auth/Profile/TextArea/index.js
Unescape View File

@ -1,20 +1,20 @@
import React from 'react'; import React from "react";
import { makeStyles } from '@material-ui/core/styles'; import { makeStyles } from "@material-ui/core/styles";
import TextField from '@material-ui/core/TextField'; import TextField from "@material-ui/core/TextField";
const useStyles = makeStyles((theme) => ({ const useStyles = makeStyles((theme) => ({
root: { root: {
'& .MuiTextField-root': { "& .MuiTextField-root": {
margin: theme.spacing(0), margin: theme.spacing(0),
width: '100%', width: "100%",
}, },
}, },
})); }));
export default function MultilineTextFields(props) { export default function MultilineTextFields(props) {
const classes = useStyles(); const classes = useStyles();
const [value, setValue] = React.useState('Controlled'); const [value, setValue] = React.useState("Controlled");
const { parent } = props;
return ( return (
<form className={classes.root} noValidate autoComplete="off"> <form className={classes.root} noValidate autoComplete="off">
<TextField <TextField
@ -22,7 +22,7 @@ export default function MultilineTextFields(props) {
label={props.label} label={props.label}
multiline multiline
rows={4} rows={4}
onChange={(e) => props.parent.setState({[props.name] : e.target.value})} onChange={(e) => parent.onChange(e.target.name, e.target.value)}
name={props.name} name={props.name}
defaultValue="" defaultValue=""
variant="outlined" variant="outlined"

79
src/views/Auth/Profile/Upload/index.js
Unescape View File

@ -0,0 +1,79 @@
import React from "react";
import AddAPhotoIcon from "@material-ui/icons/AddAPhoto";
const maxDesktopSize = 1250;
const maxMobileSize = 550;
const fontSize = {
desktop: {
span: window.innerWidth > maxDesktopSize ? 14 : window.innerWidth / 80,
},
};
export default function Upload(props) {
const { parent } = props;
return (
<>
{window.innerWidth < 1000 ? (
<div className="mobile-auth-profile__upload d-flex justify-content-center align-items-center mb-3">
{parent.state.file === null ? (
<>
<input
type="file"
name="file"
onChange={(e) => parent.onChange(e.target.name, e.target.value)}
/>
<AddAPhotoIcon
style={{ width: 40, height: 40, color: "white" }}
/>
</>
) : (
<>
<input
type="file"
name="file"
onChange={(e) => parent.onChange(e.target.name, e.target.value)}
/>
<img src={this.props.user.icon} alt={"کاربر"} />
</>
)}
</div>
) : null}
{window.innerWidth > 1000 ? (
<div className="auth-profile__upload d-flex justify-content-center-align-items-center">
{parent.state.file === null ? (
<>
<input
label={props.label}
onChange={(e) => parent.onChange(e.target.name, e.target.value)}
name={props.name}
defaultValue=""
type="file"
/>
<AddAPhotoIcon
style={{
width: 40,
height: 40,
color: "grey",
position: "absolute",
left: "calc(50% - 20px)",
top: "calc(50% - 20px)",
}}
/>
</>
) : (
<>
<input
label={props.label}
onChange={(e) => parent.onChange(e.target.name, e.target.value)}
name={props.name}
defaultValue=""
type="file"
/>
</>
)}
</div>
) : null}
</>
);
}

140
src/views/Auth/Profile/index.js
Unescape View File

@ -1,11 +1,14 @@
import React, { Component } from "react"; import React, { Component } from "react";
import { user } from "~/Redux/actions";
import { connect } from "react-redux";
import Select from "./Select/index"; import Select from "./Select/index";
import Input from "./Input/index"; import Input from "./Input/index";
import TextArea from "./TextArea/index"; import TextArea from "./TextArea/index";
import Upload from "./Upload/index";
import logo from "../../../assets/icons/logo.png"; import logo from "../../../assets/icons/logo.png";
import pic from "../../../assets/images/pic.png"; import pic from "../../../assets/images/pic.png";
import AddAPhotoIcon from "@material-ui/icons/AddAPhoto";
import "./index.scss"; import "./index.scss";
@ -14,20 +17,54 @@ const maxDesktopSize = 1250;
const fontSize = { const fontSize = {
desktop: { desktop: {
h1: window.innerWidth > maxDesktopSize ? 25 : window.innerWidth / 55, h1: window.innerWidth > maxDesktopSize ? 25 : window.innerWidth / 55,
p: window.innerWidth > maxDesktopSize ? 18 : window.innerWidth / 85, p: window.innerWidth > maxDesktopSize ? 14 : window.innerWidth / 90,
}, },
}; };
export default class Profile extends Component { class Profile extends Component {
state = { state = {
file: null, file: null,
firstName: "",
lastName: "",
password: "",
username: "",
address: "",
gender: "",
userRoleId: "",
validation: {
firstName: { name: "نام", status: "" },
lastName: { name: "نام خانوادگی", status: "" },
username: { name: "نام کاربری", status: "" },
},
}; };
onChange = (e) => {
onChange = (name, value) => {
this.setState({ this.setState({
[e.target.name]: e.target.value, [name]: value,
}); });
}; };
componentDidMount() {
const { getProfile, profile } = this.props;
// if (!profile) {
// getProfile();
// }
}
onSubmit = (e) => {
e.preventDefault();
const { firstName, lastName, username, cellphone } = this.state;
const { profile, setProfile } = this.props;
const data = {
firstName: firstName || profile.firstName,
lastName: lastName || profile.lastName,
username: username || profile.username,
cellphone: profile.cellphone,
};
setProfile(data);
};
render() { render() {
const { user } = this.props; const { user, profile } = this.props;
return ( return (
<> <>
{window.innerWidth > 1000 ? ( {window.innerWidth > 1000 ? (
@ -37,19 +74,60 @@ export default class Profile extends Component {
<p style={{ fontSize: fontSize.desktop.p }}> <p style={{ fontSize: fontSize.desktop.p }}>
لطفا مشخصات خود را به صورت کامل نمایید. لطفا مشخصات خود را به صورت کامل نمایید.
</p> </p>
<form className="auth-profile__box--form d-flex"> <form
className="auth-profile__box--form d-flex"
onSubmit={(e) => this.onSubmit(e)}
>
<div style={{ width: "48%" }}> <div style={{ width: "48%" }}>
<div className="mb-2 d-flex justify-content-center">
<Upload name="file" parent={this} />
</div>
<div className="mb-2"> <div className="mb-2">
<Input name="name" label="نام و نام خانوادگی" /> <Input
name="firstName"
label="نام"
parent={this}
defaultValue={profile.firstName}
/>
</div> </div>
<div className="mb-2"> <div className="mb-2">
<Input name="username" label="نام کاربری" /> <Input
name="lastName"
label="نام و نام خانوادگی"
parent={this}
defaultValue={profile.lastName}
/>
</div> </div>
<div className="mb-2"> <div className="mb-2">
<Input name="password" label="رمز عبور" /> <Input
name="username"
label="نام کاربری"
parent={this}
defaultValue={profile.username}
align="left"
/>
</div> </div>
{/* <div className="mb-2">
<Input name="password" label="رمز عبور" parent={this} />
</div> */}
</div> </div>
<div style={{ width: "48%" }}> <div style={{ width: "48%" }}>
<div className="mb-2" style={{ minWidth: "100%" }}>
<Select
parent={this}
options={["معلم", "دانش آموز"]}
name="userRoleId"
label={"عنوان"}
/>
</div>
{this.state.userRoleId === "دانش آموز" ? (
<Select
parent={this}
options={["دختر", "پسر"]}
name="gender"
label={"جنسیت"}
/>
) : null}
<div className="mb-2" style={{ minWidth: "100%" }}> <div className="mb-2" style={{ minWidth: "100%" }}>
<Select <Select
parent={this} parent={this}
@ -66,13 +144,6 @@ export default class Profile extends Component {
label={"شهرستان"} label={"شهرستان"}
/> />
</div> </div>
<div className="mb-2">
<TextArea
parent={this}
label={"آدرس محل سکونت"}
name="address"
/>
</div>
<div className="auth-profile__box--form__footer d-flex justify-content-center"> <div className="auth-profile__box--form__footer d-flex justify-content-center">
<button>‌ذخیره</button> <button>‌ذخیره</button>
</div> </div>
@ -86,29 +157,7 @@ export default class Profile extends Component {
<img src={logo} alt="دانوین" /> <img src={logo} alt="دانوین" />
<h1>حساب کاربری</h1> <h1>حساب کاربری</h1>
<p>لطفا مشحصات خود را به صورت کامل وارد نمایید</p> <p>لطفا مشحصات خود را به صورت کامل وارد نمایید</p>
<div className="mobile-auth-profile__upload d-flex justify-content-center align-items-center mb-3"> <Upload name="file" />
{this.state.file === null ? (
<>
<input
type="file"
name="file"
onChange={(e) => this.onChange(e)}
/>
<AddAPhotoIcon
style={{ width: 40, height: 40, color: "white" }}
/>
</>
) : (
<>
<input
type="file"
name="file"
onChange={(e) => this.onChange(e)}
/>
<img src={this.props.user.icon} alt={"کاربر"} />
</>
)}
</div>
<Input name="name" label="نام و نام خانوادگی" /> <Input name="name" label="نام و نام خانوادگی" />
<Input name="username" label="نام کاربری" /> <Input name="username" label="نام کاربری" />
<Input name="password" label="رمز عبور" /> <Input name="password" label="رمز عبور" />
@ -126,7 +175,7 @@ export default class Profile extends Component {
/> />
<TextArea parent={this} label={"آدرس محل سکونت"} name="address" /> <TextArea parent={this} label={"آدرس محل سکونت"} name="address" />
<div className="mobile-auth-profile__footer d-flex justify-content-center"> <div className="mobile-auth-profile__footer d-flex justify-content-center">
<button>‌ذخیره</button> <button onClick={() => this.onSubmit()}>‌ذخیره</button>
</div> </div>
</div> </div>
) : null} ) : null}
@ -135,9 +184,16 @@ export default class Profile extends Component {
} }
} }
export default connect(
(state) => ({
profile: state.user.status.profile || {},
}),
{ getProfile: user.getProfile, setProfile: user.setProfile }
)(Profile);
Profile.defaultProps = { Profile.defaultProps = {
user: { user: {
name: "باربی", name: "اکبر",
icon: pic, icon: pic,
description: "", description: "",
}, },

119
src/views/Auth/Profile/index.scss
Unescape View File

@ -1,20 +1,20 @@
.mobile-auth-profile{ .mobile-auth-profile {
width : 100%; width: 100%;
height : 100%; height: 100%;
overflow-y: scroll; overflow-y: scroll;
position: relative; position: relative;
padding: 15px; padding: 15px;
img{ img {
width: calc(100% / 2.5); width: calc(100% / 2.5);
} }
h1{ h1 {
margin-top: 15px; margin-top: 15px;
font-family: numeralBold; font-family: numeralBold;
font-size: calc(100vw / 15); font-size: calc(100vw / 15);
color: #6F7074; color: #6f7074;
letter-spacing: -1px; letter-spacing: -1px;
} }
p{ p {
font-family: numeralLight; font-family: numeralLight;
font-size: calc(100vw / 22); font-size: calc(100vw / 22);
color: #6f7074; color: #6f7074;
@ -36,7 +36,7 @@
top: 0px; top: 0px;
opacity: 0; opacity: 0;
} }
img{ img {
width: 100%; width: 100%;
height: 100%; height: 100%;
object-fit: cover; object-fit: cover;
@ -62,13 +62,13 @@
// } // }
// } // }
.MuiFormControl-root{ .MuiFormControl-root {
width: 100%; width: 100%;
margin: 10px auto !important; margin: 10px auto !important;
.MuiSelect-iconOutlined{ .MuiSelect-iconOutlined {
display: none; display: none;
} }
.MuiSelect-outlined.MuiSelect-outlined{ .MuiSelect-outlined.MuiSelect-outlined {
padding-right: 15px; padding-right: 15px;
} }
color: #797979 !important; color: #797979 !important;
@ -110,7 +110,7 @@
label { label {
background-color: white; background-color: white;
max-width: 120px; width: fit-content;
text-align: center; text-align: center;
font-size: calc(100vw / 25) !important; font-size: calc(100vw / 25) !important;
color: #797979 !important; color: #797979 !important;
@ -119,10 +119,10 @@
.Mui-focused { .Mui-focused {
color: rgba(0, 0, 0, 0.54) !important; color: rgba(0, 0, 0, 0.54) !important;
border-color: #c4c4c5 !important; border-color: #c4c4c5 !important;
background-color:white; background-color: white;
} }
.MuiInputBase-input{ .MuiInputBase-input {
height: auto !important; height: auto !important;
} }
@ -144,38 +144,71 @@
} }
} }
.auth-profile {
.auth-profile{ width: 100vw;
width : 100vw;
height: 100vh; height: 100vh;
&__box{ &__box {
width: 100%; width: 100%;
max-width: 1000px; max-width: 1000px;
border: 1px solid #ddd; border: 1px solid #ddd;
border-radius: 20px; border-radius: 20px;
h1{ h1 {
margin-top: 15px; margin-top: 15px;
font-family: numeralBold; font-family: numeralBold;
color: #6F7074; color: #6f7074;
letter-spacing: -1px; letter-spacing: -1px;
} }
p{ p {
font-family: numeralLight; font-family: numeralLight;
color: #6f7074; color: #6f7074;
letter-spacing: -1px;
text-align: justify; text-align: justify;
} }
&--form{ &--form {
margin-top: 20px; margin-top: 20px;
width: 100%; width: 100%;
justify-content:space-between; justify-content: space-between;
.MuiFormControl-root{
.auth-profile__upload {
width: 150px;
height: 150px;
border-radius: 50%;
margin-top: 15px auto 0px;
// border: 2px dotted #ccc;
position: relative;
background-color: #eee;
input {
width: 100%;
height: 100%;
opacity: 0;
position: absolute;
left: 0px;
top: 0px;
z-index: 50;
}
span {
color: #505a82;
font-family: numeralLight;
height: 20px;
position: absolute;
left: 0px;
top: calc(50% - 10px);
width: 100%;
text-align: center;
z-index: 10;
}
}
.MuiMenu-list,
.MuiFormControl-root {
width: 100%; width: 100%;
margin: 10px auto !important; margin: 10px auto !important;
.MuiSelect-iconOutlined{ option {
font-family: numeralLight !important;
}
.MuiSelect-iconOutlined {
display: none; display: none;
} }
.MuiSelect-outlined.MuiSelect-outlined{ .MuiSelect-outlined.MuiSelect-outlined {
padding-right: 15px; padding-right: 15px;
} }
color: #797979 !important; color: #797979 !important;
@ -187,20 +220,18 @@
border-color: #cecece !important; border-color: #cecece !important;
border-width: 1px !important; border-width: 1px !important;
color: green !important; color: green !important;
font-size: calc(100vw / 80) !important;
border-radius: 10px !important; border-radius: 10px !important;
} }
.MuiOutlinedInput-input { .MuiOutlinedInput-input {
padding: 20px 14px !important; padding: 20px 14px !important;
font-size: calc(100vw / 85) !important;
} }
.MuiInputLabel-outlined { .MuiInputLabel-outlined {
font-family: numeralLight !important; font-family: numeralLight !important;
display: inline !important; display: inline !important;
position: absolute; position: absolute;
text-align: right !important; text-align: right !important;
right: 7px; right: 10px;
top: 20px; top: 20px;
padding: 0px !important; padding: 0px !important;
transform: translate(0px, 0px) scale(1) !important; transform: translate(0px, 0px) scale(1) !important;
@ -209,27 +240,28 @@
text-align: center !important; text-align: center !important;
display: inline; display: inline;
position: absolute; position: absolute;
right: 0px; right: 10px;
top: -8px; top: -8px;
transform: translate(0px, 0px) scale(0.85) !important; transform: translate(0px, 0px) scale(0.85) !important;
padding-right: 0px !important; padding: 0px 5px !important;
} }
label { label {
background-color: white; background-color: white;
max-width: 120px; width: fit-content !important;
text-align: center; text-align: center;
font-size: calc(100vw / 85) !important; color: #797979;
color: #797979 !important;
letter-spacing: -1px; letter-spacing: -1px;
padding: 0px 5px !important;
// transform: translateX(-20px);
} }
.Mui-focused { .Mui-focused {
color: rgba(0, 0, 0, 0.54) !important; color: rgba(0, 0, 0, 0.54) !important;
border-color: #c4c4c5 !important; border-color: #c4c4c5 !important;
background-color:white; background-color: white;
} }
.MuiInputBase-input{ .MuiInputBase-input {
height: auto !important; height: auto !important;
} }
&__footer { &__footer {
@ -239,10 +271,9 @@
button { button {
font-family: numeralLight; font-family: numeralLight;
border: 0px; border: 0px;
background-color: #00CC69; background-color: #00cc69;
border-radius: 7px; border-radius: 7px;
font-size: 18px; font-size: 18px;
font-weight: 600;
color: white; color: white;
padding: 12px 0px; padding: 12px 0px;
width: 100%; width: 100%;
@ -251,3 +282,13 @@
} }
} }
} }
.MuiMenu-list {
option {
font-family: numeralLight !important;
padding: 5px 5px !important;
}
}
.MuiSelect-root {
font-family: numeralLight !important;
}

6
src/views/Auth/index.js
Unescape View File

@ -1,5 +1,5 @@
import React, { Component } from "react"; import React, { Component } from "react";
import {ToastContainer} from "react-toastify"; import { ToastContainer } from "react-toastify";
import Profile from "./Profile/index"; import Profile from "./Profile/index";
import Login from "./Login/index"; import Login from "./Login/index";
@ -34,5 +34,5 @@ export default class Auth extends Component {
} }
Auth.defaultProps = { Auth.defaultProps = {
page: 'login' page: "login",
} };

46
src/views/Home/HomeStatic/index.scss
Unescape View File

@ -1,18 +1,18 @@
.home-static{ .home-static {
margin: 20px 0px; margin: 20px 0px;
width: 100%; width: 100%;
&__list{ &__list {
justify-content: space-between; justify-content: space-between;
width: 100%; width: 100%;
&--item{ &--item {
box-shadow: 0px 0px 5px rgb(200,200,200); box-shadow: 0px 0px 5px rgb(200, 200, 200);
font-family: numeralBold; font-family: numeralBold;
align-items: center; align-items: center;
border-radius: 10px; border-radius: 10px;
padding: 0px 10px; padding: 0px 10px;
justify-content: space-around; justify-content: space-around;
div{ div {
h2{ h2 {
font-size: calc(100vw / 95); font-size: calc(100vw / 95);
letter-spacing: -1px; letter-spacing: -1px;
} }
@ -26,47 +26,46 @@
} }
} }
.mobile-home-static {
.mobile-home-static{ &__flex {
&__flex{
padding: 20px 10px; padding: 20px 10px;
justify-content: space-around; justify-content: space-around;
text-decoration: none; text-decoration: none;
img { img {
// margin-right: 20px; // margin-right: 20px;
max-height: 55px; width: 30%;
max-width: 55px;
width: 40%;
height: 70%; height: 70%;
transform: scale(1.3);
} }
&--right{ &--right {
margin-left: 10px; margin-left: 10px;
h1{ h1 {
font-family: numeralBold; font-family: numeralBold;
text-align: justify; text-align: justify;
} }
span{ span {
letter-spacing: -1px; letter-spacing: -1px;
font-family: numeralLight;
} }
} }
} }
&__vitrin{ &__vitrin {
padding: 15px 5px; padding: 15px 5px;
h1{ h1 {
font-family: numeralBold; font-family: numeralBold;
text-align: justify; text-align: justify;
} }
&--product{ &--product {
width: 24%; width: 24%;
margin: 3px; margin: 3px;
border-radius: 10px; border-radius: 10px;
img{ img {
width: 100%; width: 100%;
height: 70px; height: 70px;
border-radius: 10px; border-radius: 10px;
} }
} }
a{ a {
text-decoration: none; text-decoration: none;
font-family: numeralLight; font-family: numeralLight;
align-items: flex-end; align-items: flex-end;
@ -76,20 +75,19 @@
color: white; color: white;
} }
} }
&__simple{ &__simple {
// padding: 0px 10px; // padding: 0px 10px;
text-decoration: none; text-decoration: none;
min-height: 50px; min-height: 50px;
div{ div {
width: 100%; width: 100%;
height: 100%; height: 100%;
padding: 0px 3px; padding: 0px 3px;
h1{ h1 {
font-family: numeralBold; font-family: numeralBold;
text-align: justify; text-align: justify;
margin: 0px; margin: 0px;
} }
} }
} }
} }

60
src/views/Home/Membership/index.scss
Unescape View File

@ -4,22 +4,22 @@
box-shadow: 0px 0px 5px rgb(200, 200, 200); box-shadow: 0px 0px 5px rgb(200, 200, 200);
border-radius: 7px; border-radius: 7px;
justify-content: space-between; justify-content: space-between;
align-items:center; align-items: center;
flex: 1; flex: 1;
margin-top: 20px; margin-top: 20px;
margin-bottom: 20px; margin-bottom: 20px;
h1{ h1 {
font-family: numeralBold; font-family: numeralBold;
font-size: calc(100vw / 50); font-size: calc(100vw / 50);
margin-bottom: 0px; margin-bottom: 0px;
color: #1bbc6e; color: #1bbc6e;
strong{ strong {
color: white; color: white;
background-color: #1bbc6e; background-color: #1bbc6e;
padding:0px 2px; padding: 0px 2px;
} }
} }
p{ p {
margin-top: 10px; margin-top: 10px;
font-family: numeralMedium; font-family: numeralMedium;
margin-bottom: 0px; margin-bottom: 0px;
@ -27,32 +27,33 @@
color: #6f7074; color: #6f7074;
} }
.MuiOutlinedInput-notchedOutline{ .MuiOutlinedInput-notchedOutline {
top: 0px !important; top: 0px !important;
} }
.MuiOutlinedInput-input{ .MuiOutlinedInput-input {
padding : 20px 14px !important; padding: 20px 14px !important;
} }
.MuiInputLabel-outlined{ .MuiInputLabel-outlined {
font-family: numeralLight !important; font-family: numeralLight !important;
display : inline; display: inline;
position: absolute; position: absolute;
right: 4px; right: 4px;
top: 12px; top: 12px;
transform: translate(0px, 0px) scale(1) !important; transform: translate(0px, 0px) scale(1) !important;
} }
.MuiInputLabel-shrink{ .MuiInputLabel-shrink {
display : inline; display: inline;
position: absolute; position: absolute;
right: -23px; right: -23px;
top: -8px; top: -8px;
transform: translate(0px, 0px) scale(0.75) !important; transform: translate(0px, 0px) scale(0.75) !important;
width: fit-content !important;
padding: 0px 5px !important;
} }
label{ label {
background-color: white; background-color: white;
max-width: 120px;
text-align: center; text-align: center;
font-size: 14px !important; font-size: 14px !important;
} }
@ -64,34 +65,33 @@
background-color: #1bbc6e; background-color: #1bbc6e;
color: white; color: white;
border-radius: 5px; border-radius: 5px;
padding : 7px 50px; padding: 7px 50px;
margin-right: 20px; margin-right: 20px;
} }
} }
.mobile-membership { .mobile-membership {
width: 100%; width: 100%;
padding: 15px 20px; padding: 15px 20px;
box-shadow: 0px 0px 5px rgb(200, 200, 200); box-shadow: 0px 0px 5px rgb(200, 200, 200);
border-radius: 7px; border-radius: 7px;
justify-content: space-between; justify-content: space-between;
align-items:center; align-items: center;
flex: 1; flex: 1;
margin-top: 20px; margin-top: 20px;
margin-bottom: 20px; margin-bottom: 20px;
h1{ h1 {
font-family: numeralBold; font-family: numeralBold;
font-size: calc(100vw / 20); font-size: calc(100vw / 20);
margin-bottom: 0px; margin-bottom: 0px;
color: #1bbc6e; color: #1bbc6e;
strong{ strong {
color: white; color: white;
background-color: #1bbc6e; background-color: #1bbc6e;
padding:0px 2px; padding: 0px 2px;
} }
} }
p{ p {
margin-top: 10px; margin-top: 10px;
font-family: numeralMedium; font-family: numeralMedium;
margin-bottom: 0px; margin-bottom: 0px;
@ -99,30 +99,30 @@
color: #6f7074; color: #6f7074;
} }
.MuiOutlinedInput-notchedOutline{ .MuiOutlinedInput-notchedOutline {
top: 0px !important; top: 0px !important;
} }
.MuiOutlinedInput-input{ .MuiOutlinedInput-input {
padding : 15px 14px !important; padding: 15px 14px !important;
} }
.MuiInputLabel-outlined{ .MuiInputLabel-outlined {
font-family: numeralLight !important; font-family: numeralLight !important;
display : inline; display: inline;
position: absolute; position: absolute;
right: 4px; right: 4px;
top: 12px; top: 12px;
transform: translate(0px, 0px) scale(1) !important; transform: translate(0px, 0px) scale(1) !important;
} }
.MuiInputLabel-shrink{ .MuiInputLabel-shrink {
display : inline; display: inline;
position: absolute; position: absolute;
right: -23px; right: -23px;
top: -8px; top: -8px;
transform: translate(0px, 0px) scale(0.75) !important; transform: translate(0px, 0px) scale(0.75) !important;
} }
label{ label {
background-color: white; background-color: white;
max-width: 120px; max-width: 120px;
text-align: center; text-align: center;
@ -136,7 +136,7 @@
background-color: #1bbc6e; background-color: #1bbc6e;
color: white; color: white;
border-radius: 5px; border-radius: 5px;
padding : 7px 50px; padding: 7px 50px;
margin-right: 20px; margin-right: 20px;
} }
} }

6
src/views/Home/index.js
Unescape View File

@ -29,6 +29,8 @@ import qr from "~/assets/icons/qr.svg";
import myBook from "~/assets/images/myBook.png"; import myBook from "~/assets/images/myBook.png";
import homeBlog from "~/assets/images/homeBlog.png"; import homeBlog from "~/assets/images/homeBlog.png";
import bookActivation from "~/assets/images/bookActivating.png"; import bookActivation from "~/assets/images/bookActivating.png";
import home_chat from "~/assets/icons/home_chat.png";
import home_ar from "~/assets/icons/home_ar(2).png";
import "./index.scss"; import "./index.scss";
export default class Home extends Component { export default class Home extends Component {
@ -185,7 +187,7 @@ Home.defaultProps = {
}, },
{ {
id: 1, id: 1,
imageUrl: ar, imageUrl: home_ar,
backgroundColor: { backgroundColor: {
first: "#09DA76", first: "#09DA76",
second: "#056D3B", second: "#056D3B",
@ -209,7 +211,7 @@ Home.defaultProps = {
data: [ data: [
{ {
id: 0, id: 0,
imageUrl: qr, imageUrl: home_chat,
backgroundColor: { backgroundColor: {
first: "#0AB81B", first: "#0AB81B",
second: "#6CFF61", second: "#6CFF61",

9
src/views/Home/index.scss
Unescape View File

@ -1,19 +1,18 @@
.home{ .home {
width: 100vw; width: 100vw;
max-width: 1250px; max-width: 1250px;
margin: 0px auto; margin: 0px auto;
padding : 0px 10px; padding: 0px 10px;
direction: rtl; direction: rtl;
padding-top: 100px; padding-top: 100px;
} }
.mobile-home {
.mobile-home{
width: 100vw; width: 100vw;
max-width: 600px; max-width: 600px;
margin: 0px auto; margin: 0px auto;
padding: 0px 10px; padding: 0px 10px;
direction: rtl; direction: rtl;
overflow-x: hidden; overflow-x: hidden;
padding-top: 70px; padding-top: 90px;
} }

4
src/views/Product/index.js
Unescape View File

@ -34,10 +34,10 @@ const fontSize = {
mobile: { mobile: {
h1: window.innerWidth > maxMobileSize ? 20 : window.innerWidth / 18, h1: window.innerWidth > maxMobileSize ? 20 : window.innerWidth / 18,
h2: window.innerWidth > maxMobileSize ? 14 : window.innerWidth / 24, h2: window.innerWidth > maxMobileSize ? 14 : window.innerWidth / 24,
h3: window.innerWidth > maxMobileSize ? 16 : window.innerWidth / 22, h3: window.innerWidth > maxMobileSize ? 16 : window.innerWidth / 26,
a: window.innerWidth > maxMobileSize ? 16 : window.innerWidth / 26, a: window.innerWidth > maxMobileSize ? 16 : window.innerWidth / 26,
p: window.innerWidth > maxMobileSize ? 13 : window.innerWidth / 30, p: window.innerWidth > maxMobileSize ? 13 : window.innerWidth / 30,
li: window.innerWidth > maxMobileSize ? 14 : window.innerWidth / 26, li: window.innerWidth > maxMobileSize ? 14 : window.innerWidth / 29,
}, },
}; };
export default class Product extends Component { export default class Product extends Component {

3
src/views/Product/index.scss
Unescape View File

@ -99,6 +99,9 @@
padding: 20px 10px; padding: 20px 10px;
background-color: #1f6fb528; background-color: #1f6fb528;
border-radius: 10px; border-radius: 10px;
background: url(../../assets/icons/danger_lg.png) no-repeat #1f6fb528;
background-size: 60px;
background-position: 18px 50%;
h3 { h3 {
font-family: numeralBold; font-family: numeralBold;
color: #074f8b; color: #074f8b;

63
src/views/QR/Links/index.js
Unescape View File

@ -1,32 +1,57 @@
import React from 'react'; import React from "react";
import './index.scss'; import "./index.scss";
export default function Links(props){
return( const maxDesktopSize = 1250;
const maxMobileSize = 550;
const fontSize = {
mobile: {
h2: window.innerWidth > maxMobileSize ? 16 : window.innerWidth / 25,
a: window.innerWidth > maxMobileSize ? 16 : window.innerWidth / 32,
},
desktop: {
h2: window.innerWidth > maxMobileSize ? 16 : window.innerWidth / 75,
a: window.innerWidth > maxMobileSize ? 16 : window.innerWidth / 95,
},
};
export default function Links(props) {
return (
<> <>
{ {window.innerWidth > 1000 ? (
window.innerWidth > 1000 ?
<div className="links-box d-flex flex-column" id="links"> <div className="links-box d-flex flex-column" id="links">
<h2>{props.data.title}</h2> <h2 style={{ fontSize: fontSize.desktop.h2 }}>{props.data.title}</h2>
</div> : null </div>
} ) : null}
{ {window.innerWidth < 1000 ? (
window.innerWidth < 1000 ?
<div className="mobile-links-box d-flex flex-column" id="links"> <div className="mobile-links-box d-flex flex-column" id="links">
<h2><span></span>لینکها</h2> <h2 style={{ fontSize: fontSize.mobile.h2 }}>
<span></span>لینکها
</h2>
<ul> <ul>
{props.data.links.map((item,i) => ( {props.data.links.map((item, i) => (
<Item data={item} key={i} /> <Item data={item} key={i} />
) )} ))}
</ul> </ul>
</div> : null </div>
} ) : null}
</> </>
); );
} }
const Item = (props) => { const Item = (props) => {
return( return (
<li><a href={props.data.link}>{props.data.title}</a></li> <li>
<a
style={{
fontSize:
window.innerWidth > 1000 ? fontSize.desktop.a : fontSize.mobile.a,
}}
href={props.data.link}
>
{props.data.title}
</a>
</li>
); );
} };

20
src/views/QR/Links/index.scss
Unescape View File

@ -1,16 +1,18 @@
.mobile-links-box{ .mobile-links-box {
width: 100%; width: 100%;
border-radius: 10px; border-radius: 10px;
background-color: #fffac948;
margin: 15px 0px; margin: 15px 0px;
background-color: #fffac948;
text-decoration: none; text-decoration: none;
padding: 20px 10px; padding: 20px 10px;
h2{ background: url(../../../assets/icons/attachment.svg) no-repeat #fffac948;
background-size: 50px 50px;
background-position: 10px 50%;
h2 {
font-family: numeralMedium; font-family: numeralMedium;
font-size: calc(100vw / 32);
color: #72891edc; color: #72891edc;
padding: 5px; padding: 5px;
span{ span {
width: 10px; width: 10px;
height: 10px; height: 10px;
border-radius: 50%; border-radius: 50%;
@ -18,15 +20,15 @@
margin-left: 5px; margin-left: 5px;
} }
} }
ul{ ul {
padding: 0px; padding: 0px;
margin: 0px; margin: 0px;
list-style: none; list-style: none;
padding-right: 15px; padding-right: 15px;
li{ li {
font-size: calc(100vw / 30); a {
a{
text-decoration: none; text-decoration: none;
font-family: numeralLight;
color: #72891e; color: #72891e;
} }
} }

29
src/views/QR/PDF/index.scss
Unescape View File

@ -1,32 +1,34 @@
.mobile-pdf-box{ .mobile-pdf-box {
width: 100%; width: 100%;
border-radius: 10px; border-radius: 10px;
background-color:#ffa9a91e; background-color: #ffa9a91e;
margin: 15px 0px; margin: 15px 0px;
text-decoration: none; text-decoration: none;
height: calc(100vh / 9); height: calc(100vh / 9);
padding: 20px 10px; padding: 20px 10px;
h2{ background: url(../../../assets/icons/pdf.svg) no-repeat #ffa9a91e;
background-size: 50px;
background-position: 18px 50%;
h2 {
font-family: numeralMedium; font-family: numeralMedium;
font-size: calc(100vw / 32); font-size: calc(100vw / 32);
color: #FF0808; color: #ff0808;
padding: 5px; padding: 5px;
span{ span {
width: 7px; width: 7px;
height: 7px; height: 7px;
border-radius: 50%; border-radius: 50%;
background-color: #ffa9a925; background-color: #ff0808;
margin-left: 5px; margin-left: 5px;
} }
} }
} }
.pdf-box {
.pdf-box{
width: 100%; width: 100%;
border-radius: 10px; border-radius: 10px;
max-width: 400px; max-width: 400px;
background-color:#ffa9a91e; background-color: #ffa9a91e;
margin: 15px auto; margin: 15px auto;
text-decoration: none; text-decoration: none;
height: calc(100vh / 9); height: calc(100vh / 9);
@ -34,17 +36,16 @@
background: url(../../../assets/icons/pdf.svg) no-repeat #ffa9a91e; background: url(../../../assets/icons/pdf.svg) no-repeat #ffa9a91e;
background-size: 45px; background-size: 45px;
background-position: 18px 50%; background-position: 18px 50%;
h2{ h2 {
font-family: numeralMedium; font-family: numeralMedium;
color: #FF0808; color: #ff0808;
padding: 5px; padding: 5px;
span{ span {
width: 7px; width: 7px;
height: 7px; height: 7px;
border-radius: 50%; border-radius: 50%;
background-color: #FF0808; background-color: #ff0808;
margin-left: 5px; margin-left: 5px;
} }
} }
} }

27
src/views/QR/PowerPoint/index.scss
Unescape View File

@ -1,31 +1,34 @@
.mobile-ppt-box{ .mobile-ppt-box {
width: 100%; width: 100%;
border-radius: 10px; border-radius: 10px;
background-color : #8dfaf61f; background-color: #8dfaf61f;
margin: 15px 0px; margin: 15px 0px;
text-decoration: none; text-decoration: none;
height: calc(100vh / 9); height: calc(100vh / 9);
padding: 20px 10px; padding: 20px 10px;
h2{ background: url(../../../assets/icons/ppt.png) no-repeat #8dfaf61f;
background-size: 50px;
background-position: 18px 50%;
h2 {
font-family: numeralMedium; font-family: numeralMedium;
font-size: calc(100vw / 32); font-size: calc(100vw / 32);
color: #0D9189; color: #0d9189;
padding: 5px; padding: 5px;
span{ span {
width: 7px; width: 7px;
height: 7px; height: 7px;
border-radius: 50%; border-radius: 50%;
background-color: #0D9189; background-color: #0d9189;
margin-left: 5px; margin-left: 5px;
} }
} }
} }
.ppt-box{ .ppt-box {
width: 100%; width: 100%;
max-width: 400px; max-width: 400px;
border-radius: 10px; border-radius: 10px;
background-color : #8dfaf61f; background-color: #8dfaf61f;
margin: 15px auto; margin: 15px auto;
text-decoration: none; text-decoration: none;
height: calc(100vh / 9); height: calc(100vh / 9);
@ -33,15 +36,15 @@
background: url(../../../assets/icons/ppt.svg) no-repeat #8dfaf61f; background: url(../../../assets/icons/ppt.svg) no-repeat #8dfaf61f;
background-size: 45px; background-size: 45px;
background-position: 18px 50%; background-position: 18px 50%;
h2{ h2 {
font-family: numeralMedium; font-family: numeralMedium;
color: #0D9189; color: #0d9189;
padding: 5px; padding: 5px;
span{ span {
width: 7px; width: 7px;
height: 7px; height: 7px;
border-radius: 50%; border-radius: 50%;
background-color: #0D9189; background-color: #0d9189;
margin-left: 5px; margin-left: 5px;
} }
} }

28
src/views/QR/index.scss
Unescape View File

@ -55,7 +55,7 @@
position: fixed; position: fixed;
top: 100px; top: 100px;
right: 0px; right: 0px;
&--media{ &--media {
width: 100%; width: 100%;
height: 50px; height: 50px;
border-top-left-radius: 8px; border-top-left-radius: 8px;
@ -63,35 +63,35 @@
transform: translateY(120px); transform: translateY(120px);
margin-top: 10px; margin-top: 10px;
} }
&--voice{ &--voice {
background: url(../../assets/icons/play.svg) no-repeat #A2FFC1; background: url(../../assets/icons/play.svg) no-repeat #a2ffc1;
background-size: 21px; background-size: 21px;
background-position: center center; background-position: center center;
} }
&--video{ &--video {
background: url(../../assets/icons/video-player.svg) no-repeat #88A7FF; background: url(../../assets/icons/video-player.svg) no-repeat #88a7ff;
background-size: 21px; background-size: 21px;
background-position: center center; background-position: center center;
} }
&--ppt{ &--ppt {
background: url(../../assets/icons/ppt.svg) no-repeat #BCFFEF; background: url(../../assets/icons/ppt.png) no-repeat #bcffef;
background-size: 21px; background-size: 21px;
background-position: center center; background-position: center center;
} }
&--pdf{ &--pdf {
background: url(../../assets/icons/pdf.svg) no-repeat #FFA9A9; background: url(../../assets/icons/pdf.svg) no-repeat #ffa9a9;
background-size: 21px; background-size: 21px;
background-position: center center; background-position: center center;
} }
&--attachment{ &--attachment {
background: url(../../assets/icons/attachment.svg) no-repeat #FBFF7C; background: url(../../assets/icons/attachment.svg) no-repeat #fbff7c;
background-size: 21px; background-size: 21px;
background-position: center center; background-position: center center;
} }
& button{ & button {
font-family: numeralLight; font-family: numeralLight;
color: #82791E; color: #82791e;
background-color: #FCFFA2; background-color: #fcffa2;
border: 0px; border: 0px;
padding: 10px 10px; padding: 10px 10px;
font-size: 14px; font-size: 14px;

Write Preview
Loading…
Cancel
Save