reza added last version1

master
RezaAshrafi77 3 years ago
parent 9368cfcf96
commit 1e2ab85cdc
  1. 99
      src/AppRouter.js
  2. 72
      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. 45
      src/views/Auth/Profile/Input/index.js
  19. 51
      src/views/Auth/Profile/Select/index.js
  20. 34
      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. 81
      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. 30
      src/views/QR/index.scss

@ -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={"/"}>
<Home /> {proxy.status() ? (
{/* {proxy.status() ? <Home /> : <Auth />} */} this.props.profile.username ? (
<Home />
) : (
<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);

@ -1,37 +1,53 @@
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 = {}) =>
dispatch, async (dispatch) =>
}), await proxy.get("user/domains", data, { dispatch }),
update: (data = {}, data2 = {}) => async (dispatch) => { getmothers:
await proxy.put('user/update', data); (data = {}) =>
await proxy.get('user/list', data2, { dispatch }); async (dispatch) =>
}, await proxy.get2("mothers/list", data, {
add: (data = {}, data2 = {}) => async (dispatch) => { dispatch,
await proxy.post('user/add', data); }),
await proxy.get('user/list', data2, { dispatch }); getProfile:
}, (data = {}) =>
del: (data = {}, data2 = {}) => async (dispatch) => { async (dispatch) =>
await proxy.delete('user/delete', data); await proxy.get("user/getProfile", data, { dispatch }),
await proxy.get('user/list', data2, { 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) => {
await proxy.post("user/add", data);
await proxy.get("user/list", data2, { dispatch });
},
del:
(data = {}, data2 = {}) =>
async (dispatch) => {
await proxy.delete("user/delete", data);
await proxy.get("user/list", data2, { dispatch });
},
}; };
export default user; export default user;

@ -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);

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.8 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 31 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 12 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 13 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.5 KiB

@ -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,
}, },

@ -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;

@ -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>

@ -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;
} }
} }

@ -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;
} }

@ -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>

@ -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 = () => {

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

@ -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) => ({
root: {
'& .MuiTextField-root': {
width: '100%',
position : 'relative',
marginRight : 10,
export default function FormPropsTextFields(props) {
const useStyles = makeStyles((theme) => ({
root: {
"& .MuiTextField-root": {
width: "100%",
position: "relative",
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",
};

@ -1,32 +1,31 @@
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,
position: "relative",
// backgroundColor: theme.palette.background.paper,
border: "1px solid #a5a5a5",
fontSize: window.innerWidth > 1000 ? 16 : "calc(100vw / 30)",
color: "#a5a5a5",
// maxWidth : 70,
minWidth: '100%',
padding: "0px",
transition: theme.transitions.create(["border-color", "box-shadow"]),
// Use the system font instead of the default Roboto font.
fontFamily: "numeralLight",
"&:focus": {
borderRadius: 4, borderRadius: 4,
position: "relative",
// backgroundColor: theme.palette.background.paper,
border: "1px solid #a5a5a5",
fontSize: window.innerWidth > 1000 ? 16 : "calc(100vw / 30)",
color: "#a5a5a5",
// maxWidth : 70,
minWidth: "100%",
padding: "0px",
// Use the system font instead of the default Roboto font.
fontFamily: "numeralLight",
"&:focus": {
borderRadius: 4,
},
}, },
}, },
}))(InputBase); }))(InputBase);
@ -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>

@ -1,32 +1,32 @@
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
id="outlined-multiline-static" id="outlined-multiline-static"
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"
/> />
</form> </form>
); );
} }

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

@ -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: "",
}, },

@ -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;
}

@ -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",
} };

@ -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;
} }
} }
} }
} }

@ -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;
} }
} }

@ -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",

@ -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;
} }

@ -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 {

@ -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;

@ -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;
{
window.innerWidth > 1000 ? const fontSize = {
<div className="links-box d-flex flex-column" id="links"> mobile: {
<h2>{props.data.title}</h2> h2: window.innerWidth > maxMobileSize ? 16 : window.innerWidth / 25,
</div> : null a: window.innerWidth > maxMobileSize ? 16 : window.innerWidth / 32,
} },
{ desktop: {
window.innerWidth < 1000 ? h2: window.innerWidth > maxMobileSize ? 16 : window.innerWidth / 75,
<div className="mobile-links-box d-flex flex-column" id="links"> a: window.innerWidth > maxMobileSize ? 16 : window.innerWidth / 95,
<h2><span></span>لینکها</h2> },
<ul> };
{props.data.links.map((item,i) => (
<Item data={item} key={i} /> export default function Links(props) {
) )} return (
</ul> <>
</div> : null {window.innerWidth > 1000 ? (
} <div className="links-box d-flex flex-column" id="links">
</> <h2 style={{ fontSize: fontSize.desktop.h2 }}>{props.data.title}</h2>
); </div>
) : null}
{window.innerWidth < 1000 ? (
<div className="mobile-links-box d-flex flex-column" id="links">
<h2 style={{ fontSize: fontSize.mobile.h2 }}>
<span></span>لینکها
</h2>
<ul>
{props.data.links.map((item, i) => (
<Item data={item} key={i} />
))}
</ul>
</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>
);
};

@ -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;
} }
} }

@ -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;
} }
} }
} }

@ -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;
} }
} }

@ -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;
@ -183,7 +183,7 @@
width: 130px; width: 130px;
justify-content: space-between; justify-content: space-between;
span { span {
cursor: pointer; cursor: pointer;
width: 30px; width: 30px;
height: 30px; height: 30px;
background-color: #ddd; background-color: #ddd;

Loading…
Cancel
Save