parent
5e28e53d1a
commit
811431a9ed
19 changed files with 701 additions and 65 deletions
|
After Width: | Height: | Size: 4.7 KiB |
|
After Width: | Height: | Size: 639 B |
|
After Width: | Height: | Size: 11 KiB |
|
After Width: | Height: | Size: 4.4 KiB |
@ -0,0 +1,31 @@ |
|||||||
|
import React, { Component } from 'react'; |
||||||
|
|
||||||
|
import './index.scss'; |
||||||
|
export default function History(props){ |
||||||
|
const {data} = props; |
||||||
|
return( |
||||||
|
<> |
||||||
|
{ |
||||||
|
window.innerWidth > 1000 ? |
||||||
|
<div className="last-qr"> |
||||||
|
|
||||||
|
</div> : null |
||||||
|
} |
||||||
|
{ |
||||||
|
window.innerWidth < 1000 ? |
||||||
|
<div className="mobile-activation-history d-flex"> |
||||||
|
<div className="mobile-activation-history__right d-flex"> |
||||||
|
<img src={data.image} alt={data.title} /> |
||||||
|
<div className="d-flex flex-column"> |
||||||
|
<strong>{data.title}</strong> |
||||||
|
<span>{data.subTitle}</span> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div className="mobile-activation-history__left d-flex"> |
||||||
|
<button>{data.status}</button> |
||||||
|
</div> |
||||||
|
</div> : null |
||||||
|
} |
||||||
|
</> |
||||||
|
); |
||||||
|
} |
||||||
@ -0,0 +1,44 @@ |
|||||||
|
.mobile-activation-history{ |
||||||
|
width: 100%; |
||||||
|
padding: 15px 10px; |
||||||
|
justify-content: space-between; |
||||||
|
background-color:white; |
||||||
|
align-items:center; |
||||||
|
border-radius: 10px; |
||||||
|
box-shadow: 0px 0px 10px rgb(226, 226, 226); |
||||||
|
&__right{ |
||||||
|
align-items:center; |
||||||
|
img{ |
||||||
|
height: 100px; |
||||||
|
border-radius: 10px; |
||||||
|
margin-left: 15px; |
||||||
|
} |
||||||
|
strong{ |
||||||
|
font-family: numeralMedium; |
||||||
|
font-size: calc(100vw / 30); |
||||||
|
font-weight: 600; |
||||||
|
letter-spacing: -1px; |
||||||
|
} |
||||||
|
span{ |
||||||
|
font-family: numeralMedium; |
||||||
|
font-size: calc(100vw / 35); |
||||||
|
color: #00CC69; |
||||||
|
} |
||||||
|
} |
||||||
|
&__left{ |
||||||
|
button{ |
||||||
|
display: inline; |
||||||
|
font-family: numeralLight; |
||||||
|
text-decoration: none; |
||||||
|
padding: 5px 20px 3px; |
||||||
|
color: #00CC69; |
||||||
|
border-radius: 25px; |
||||||
|
font-size: calc(100vw / 26); |
||||||
|
border: 1px solid #00cc69; |
||||||
|
background-color: white; |
||||||
|
&:focus:enabled{ |
||||||
|
text-decoration: none; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,87 @@ |
|||||||
|
import React, { Component } from "react"; |
||||||
|
import Navbar from "../Home/Navbar/index"; |
||||||
|
import Footer from "../Home/Footer/index"; |
||||||
|
import {Link} from 'react-router-dom'; |
||||||
|
import History from './History/index'; |
||||||
|
|
||||||
|
import book1 from '../../assets/images/book1.png'; |
||||||
|
import analytics from '../../assets/icons/analytics.svg'; |
||||||
|
import danger from '../../assets/icons/danger.svg'; |
||||||
|
|
||||||
|
import './index.scss'; |
||||||
|
export default class Activation extends Component { |
||||||
|
state= { |
||||||
|
value: null, |
||||||
|
} |
||||||
|
render() { |
||||||
|
const { data } = this.props; |
||||||
|
return ( |
||||||
|
<> |
||||||
|
{window.innerWidth > 1000 ? ( |
||||||
|
<> |
||||||
|
<div className="mobile-activation d-flex"> |
||||||
|
<Navbar /> |
||||||
|
</div> |
||||||
|
<Footer /> |
||||||
|
</> |
||||||
|
) : null} |
||||||
|
{window.innerWidth < 1000 ? ( |
||||||
|
<> |
||||||
|
<div className="mobile-activation d-flex flex-column align-items-center"> |
||||||
|
<Navbar /> |
||||||
|
<div className="mobile-activation__back d-flex"> |
||||||
|
<Link to="/">بازگشت</Link> |
||||||
|
</div> |
||||||
|
<header className="mobile-activation__header d-flex flex-column align-items-center"> |
||||||
|
<img src={analytics} alt="فعال سازی کتاب" /> |
||||||
|
<h1>فعال سازی کتاب الکترونیک</h1> |
||||||
|
</header> |
||||||
|
<div className="mobile-activation__description d-flex"> |
||||||
|
<span>.</span> |
||||||
|
<p>کد فعال سازی در اختیار شما قرار گرفته است را در قسمت زیر وارد وارد تا کتاب الکترونیک آن فعالسازی شود</p> |
||||||
|
</div> |
||||||
|
<form |
||||||
|
className="mobile-activation__form d-flex flex-column" |
||||||
|
onSubmit={() => |
||||||
|
console.log() |
||||||
|
} |
||||||
|
> |
||||||
|
<input |
||||||
|
id="code" |
||||||
|
type="text" |
||||||
|
maxLength={9} |
||||||
|
autoComplete="off" |
||||||
|
onChange={(e) => this.setState({ code: e.target.value })} |
||||||
|
/> |
||||||
|
<button type="submit">ثبت کد فعال سازی</button> |
||||||
|
</form> |
||||||
|
<div className="mobile-activation__support d-flex align-center"> |
||||||
|
<span><img src={danger} /></span> |
||||||
|
<p>کد فعال سازی در اختیار شما قرار گرفته است را در قسمت زیر وارد وارد تا کتاب الکترونیک آن فعالسازی شود</p> |
||||||
|
</div> |
||||||
|
<div className="mobile-activation__history d-flex flex-column"> |
||||||
|
<h2>آخرین مشاهدات</h2> |
||||||
|
{ |
||||||
|
data.map((item, i) => ( |
||||||
|
<History data={item} key={i} /> |
||||||
|
)) |
||||||
|
} |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</> |
||||||
|
) : null} |
||||||
|
</> |
||||||
|
); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
Activation.defaultProps = { |
||||||
|
data: [ |
||||||
|
{ |
||||||
|
title : 'ریاضیات گسسته خیلی پیشرفته', |
||||||
|
subTitle: 'پایه هفتم ابتدایی', |
||||||
|
status: 'انجام شد', |
||||||
|
image : book1 |
||||||
|
} |
||||||
|
] |
||||||
|
} |
||||||
@ -0,0 +1,111 @@ |
|||||||
|
.mobile-activation{ |
||||||
|
width: 100vw; |
||||||
|
max-width: 1250px; |
||||||
|
margin: 0px auto; |
||||||
|
padding : 0px 10px 40px; |
||||||
|
direction: rtl; |
||||||
|
padding-top: 70px; |
||||||
|
overflow-x: hidden; |
||||||
|
&__back{ |
||||||
|
width: 100%; |
||||||
|
justify-content:flex-end; |
||||||
|
a{ |
||||||
|
display: inline; |
||||||
|
font-family: numeralLight; |
||||||
|
text-decoration: none; |
||||||
|
padding: 5px 20px 3px; |
||||||
|
background-color: #00CC69; |
||||||
|
border-radius: 25px; |
||||||
|
font-size: calc(100vw / 26); |
||||||
|
color: white; |
||||||
|
&:focus:enabled{ |
||||||
|
text-decoration: none; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
&__header{ |
||||||
|
margin-top: 30px; |
||||||
|
h1{ |
||||||
|
font-size: calc(100vw / 16); |
||||||
|
font-family: numeralBold; |
||||||
|
margin-top: 15px; |
||||||
|
color: #00CC69; |
||||||
|
letter-spacing: -2px; |
||||||
|
} |
||||||
|
} |
||||||
|
&__description{ |
||||||
|
width: 100%; |
||||||
|
margin-top: 30px; |
||||||
|
span{ |
||||||
|
font-size: 50px; |
||||||
|
color: #00CC69; |
||||||
|
margin-left: 10px; |
||||||
|
position: relative; |
||||||
|
bottom: 35px; |
||||||
|
} |
||||||
|
p{ |
||||||
|
font-size: calc(100vw / 30); |
||||||
|
color: #6F7074; |
||||||
|
font-family: numeralMedium; |
||||||
|
} |
||||||
|
} |
||||||
|
&__form{ |
||||||
|
width: 100%; |
||||||
|
font-family: numeralMedium; |
||||||
|
input{ |
||||||
|
width: 100%; |
||||||
|
background-color: #F6F6F6; |
||||||
|
color: #4D4D4F; |
||||||
|
text-align: center; |
||||||
|
direction: ltr; |
||||||
|
font-size: calc(100vw / 18); |
||||||
|
border: 0px; |
||||||
|
padding: 15px 0px; |
||||||
|
border-radius: 10px; |
||||||
|
&:focus{ |
||||||
|
outline: 0px; |
||||||
|
} |
||||||
|
} |
||||||
|
button{ |
||||||
|
display: inline; |
||||||
|
font-family: numeralLight; |
||||||
|
text-decoration: none; |
||||||
|
padding: 14px 20px 14px; |
||||||
|
background-color: #00CC69; |
||||||
|
border-radius: 10px; |
||||||
|
font-size: calc(100vw / 18); |
||||||
|
color: white; |
||||||
|
border: 0px; |
||||||
|
margin-top: 10px; |
||||||
|
letter-spacing: -1px; |
||||||
|
&:focus:enabled{ |
||||||
|
text-decoration: none; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
} |
||||||
|
&__support{ |
||||||
|
width: 80%; |
||||||
|
margin-top: 30px; |
||||||
|
span{ |
||||||
|
color: #00CC69; |
||||||
|
margin-left: 10px; |
||||||
|
} |
||||||
|
p{ |
||||||
|
font-size: calc(100vw / 30); |
||||||
|
color: #6F7074; |
||||||
|
font-family: numeralMedium; |
||||||
|
text-align: center; |
||||||
|
} |
||||||
|
} |
||||||
|
&__history{ |
||||||
|
width: 100%; |
||||||
|
margin: 30px 0px; |
||||||
|
h2{ |
||||||
|
font-family: numeralBold; |
||||||
|
color: #02A255; |
||||||
|
font-size: calc(100vw / 24); |
||||||
|
margin-bottom: 20px; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,31 @@ |
|||||||
|
import React, { Component } from 'react'; |
||||||
|
|
||||||
|
import './index.scss'; |
||||||
|
export default function LastQR(props){ |
||||||
|
const {data} = props; |
||||||
|
return( |
||||||
|
<> |
||||||
|
{ |
||||||
|
window.innerWidth > 1000 ? |
||||||
|
<div className="last-qr"> |
||||||
|
|
||||||
|
</div> : null |
||||||
|
} |
||||||
|
{ |
||||||
|
window.innerWidth < 1000 ? |
||||||
|
<div className="mobile-last-qr d-flex"> |
||||||
|
<div className="mobile-last-qr__right d-flex"> |
||||||
|
<img src={data.image} alt={data.title} /> |
||||||
|
<div className="d-flex flex-column"> |
||||||
|
<strong>{data.title}</strong> |
||||||
|
<span>{data.subTitle}</span> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div className="mobile-last-qr__left d-flex"> |
||||||
|
<button>صفحه {data.page}</button> |
||||||
|
</div> |
||||||
|
</div> : null |
||||||
|
} |
||||||
|
</> |
||||||
|
); |
||||||
|
} |
||||||
@ -0,0 +1,44 @@ |
|||||||
|
.mobile-last-qr{ |
||||||
|
width: 100%; |
||||||
|
padding: 15px 10px; |
||||||
|
justify-content: space-between; |
||||||
|
background-color:white; |
||||||
|
align-items:center; |
||||||
|
border-radius: 10px; |
||||||
|
box-shadow: 0px 0px 10px rgb(226, 226, 226); |
||||||
|
&__right{ |
||||||
|
align-items:center; |
||||||
|
img{ |
||||||
|
height: 100px; |
||||||
|
border-radius: 10px; |
||||||
|
margin-left: 15px; |
||||||
|
} |
||||||
|
strong{ |
||||||
|
font-family: numeralMedium; |
||||||
|
font-size: calc(100vw / 30); |
||||||
|
font-weight: 600; |
||||||
|
letter-spacing: -1px; |
||||||
|
} |
||||||
|
span{ |
||||||
|
font-family: numeralMedium; |
||||||
|
font-size: calc(100vw / 35); |
||||||
|
color: #00CC69; |
||||||
|
} |
||||||
|
} |
||||||
|
&__left{ |
||||||
|
button{ |
||||||
|
display: inline; |
||||||
|
font-family: numeralLight; |
||||||
|
text-decoration: none; |
||||||
|
padding: 5px 20px 3px; |
||||||
|
border: 1px solid #00cc69; |
||||||
|
background-color: white; |
||||||
|
border-radius: 25px; |
||||||
|
font-size: calc(100vw / 26); |
||||||
|
color: #00cc69; |
||||||
|
&:focus:enabled{ |
||||||
|
text-decoration: none; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,40 @@ |
|||||||
|
import React, { Component } from 'react' |
||||||
|
import QrReader from 'react-qr-scanner' |
||||||
|
|
||||||
|
export default class Scanner extends Component { |
||||||
|
constructor(props){ |
||||||
|
super(props) |
||||||
|
this.state = { |
||||||
|
delay: 100, |
||||||
|
result: '', |
||||||
|
} |
||||||
|
|
||||||
|
this.handleScan = this.handleScan.bind(this) |
||||||
|
} |
||||||
|
handleScan(data){ |
||||||
|
this.props.parent.setState({ |
||||||
|
value: data, |
||||||
|
}) |
||||||
|
} |
||||||
|
|
||||||
|
handleError(err){ |
||||||
|
console.error(err) |
||||||
|
} |
||||||
|
render(){ |
||||||
|
const previewStyle = { |
||||||
|
height: 300, |
||||||
|
width: 300, |
||||||
|
} |
||||||
|
|
||||||
|
return( |
||||||
|
<div> |
||||||
|
<QrReader |
||||||
|
delay={this.state.delay} |
||||||
|
style={previewStyle} |
||||||
|
onError={this.handleError} |
||||||
|
onScan={this.handleScan} |
||||||
|
/> |
||||||
|
</div> |
||||||
|
) |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,82 @@ |
|||||||
|
import React, { Component } from "react"; |
||||||
|
import Navbar from "../Home/Navbar/index"; |
||||||
|
import Footer from "../Home/Footer/index"; |
||||||
|
import {Link} from 'react-router-dom'; |
||||||
|
import Scanner from './Scanner/index'; |
||||||
|
import LastQr from './LastQr/index'; |
||||||
|
|
||||||
|
import book1 from '../../assets/images/book1.png'; |
||||||
|
|
||||||
|
import './index.scss'; |
||||||
|
export default class QRScan extends Component { |
||||||
|
state= { |
||||||
|
value: null, |
||||||
|
} |
||||||
|
render() { |
||||||
|
const { data } = this.props; |
||||||
|
return ( |
||||||
|
<> |
||||||
|
{window.innerWidth > 1000 ? ( |
||||||
|
<> |
||||||
|
<div className="product-sample d-flex"> |
||||||
|
<Navbar /> |
||||||
|
</div> |
||||||
|
<Footer /> |
||||||
|
</> |
||||||
|
) : null} |
||||||
|
{window.innerWidth < 1000 ? ( |
||||||
|
<> |
||||||
|
<div className="mobile-qr-scan d-flex flex-column"> |
||||||
|
<Navbar /> |
||||||
|
<div className="mobile-qr-scan__back d-flex"> |
||||||
|
<Link to="/">بازگشت</Link> |
||||||
|
</div> |
||||||
|
<header className="mobile-qr-scan__header d-flex flex-column"> |
||||||
|
<h1>اسکن بارکد</h1> |
||||||
|
<p>لطفا دوربین گوشی خود را روی کدی که در اختیار شما قرار گرفته قرار دهید تا اسکن دوربین انجام شود</p> |
||||||
|
</header> |
||||||
|
<section className="mobile-qr-scan__camera d-flex justify-content-center align-items-center"> |
||||||
|
<div className="mobile-qr-scan__camera--shapeTop mobile-qr-scan__camera--shape d-flex"> |
||||||
|
|
||||||
|
</div> |
||||||
|
<div className="mobile-qr-scan__camera--shapeBottom mobile-qr-scan__camera--shape d-flex"> |
||||||
|
|
||||||
|
</div> |
||||||
|
<div className="mobile-qr-scan__camera--shapeLeft mobile-qr-scan__camera--shape d-flex"> |
||||||
|
|
||||||
|
</div> |
||||||
|
<div className="mobile-qr-scan__camera--shapeRight mobile-qr-scan__camera--shape d-flex"> |
||||||
|
|
||||||
|
</div> |
||||||
|
<div className="mobile-qr-scan__camera--shapeCenter d-flex"> |
||||||
|
|
||||||
|
</div> |
||||||
|
<Scanner /> |
||||||
|
</section> |
||||||
|
<p className="mobile-qr-scan__text d-flex">لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای</p> |
||||||
|
<section className="mobile-qr-scan__lasts d-flex flex-column"> |
||||||
|
<h2>آخرین مشاهدات</h2> |
||||||
|
{ |
||||||
|
data.map((item, i) => ( |
||||||
|
<LastQr data={item} key={i} /> |
||||||
|
)) |
||||||
|
} |
||||||
|
</section> |
||||||
|
</div> |
||||||
|
</> |
||||||
|
) : null} |
||||||
|
</> |
||||||
|
); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
QRScan.defaultProps = { |
||||||
|
data: [ |
||||||
|
{ |
||||||
|
title : 'ریاضیات گسسته خیلی پیشرفته', |
||||||
|
subTitle: 'پایه هفتم ابتدایی', |
||||||
|
page: 13, |
||||||
|
image : book1 |
||||||
|
} |
||||||
|
] |
||||||
|
} |
||||||
@ -0,0 +1,104 @@ |
|||||||
|
.mobile-qr-scan{ |
||||||
|
width: 100vw; |
||||||
|
max-width: 1250px; |
||||||
|
margin: 0px auto; |
||||||
|
padding : 0px 10px 40px; |
||||||
|
direction: rtl; |
||||||
|
padding-top: 70px; |
||||||
|
overflow-x: hidden; |
||||||
|
&__back{ |
||||||
|
justify-content:flex-end; |
||||||
|
a{ |
||||||
|
display: inline; |
||||||
|
font-family: numeralLight; |
||||||
|
text-decoration: none; |
||||||
|
padding: 5px 20px 3px; |
||||||
|
background-color: #00CC69; |
||||||
|
border-radius: 25px; |
||||||
|
font-size: calc(100vw / 26); |
||||||
|
color: white; |
||||||
|
&:focus:enabled{ |
||||||
|
text-decoration: none; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
&__header{ |
||||||
|
margin-top: 30px; |
||||||
|
width: 100%; |
||||||
|
h1{ |
||||||
|
font-family: numeralBold; |
||||||
|
color: #4CE1BE; |
||||||
|
font-size: calc(100vw / 13); |
||||||
|
} |
||||||
|
p{ |
||||||
|
text-align: justify; |
||||||
|
font-family: numeralMedium; |
||||||
|
color: #4CE1BE; |
||||||
|
font-size: calc(100vw / 28); |
||||||
|
} |
||||||
|
} |
||||||
|
&__camera{ |
||||||
|
margin-top: 20px; |
||||||
|
width: 300px; |
||||||
|
height: 300px; |
||||||
|
border-radius: 10px; |
||||||
|
margin: 30px auto; |
||||||
|
position: relative; |
||||||
|
&--shape{ |
||||||
|
position: absolute; |
||||||
|
background-color: rgba(80, 80, 80, 0.541); |
||||||
|
} |
||||||
|
&--shapeTop{ |
||||||
|
width: calc(100% - 100px); |
||||||
|
height: 50px; |
||||||
|
left: 50px; |
||||||
|
top: 0px; |
||||||
|
} |
||||||
|
&--shapeBottom{ |
||||||
|
width: calc(100% - 100px); |
||||||
|
height: 50px; |
||||||
|
left: 50px; |
||||||
|
bottom: 0px; |
||||||
|
} |
||||||
|
&--shapeLeft{ |
||||||
|
width: 50px; |
||||||
|
height: 100%; |
||||||
|
left: 0px; |
||||||
|
bottom: 0px; |
||||||
|
border-top-left-radius: 10px; |
||||||
|
border-bottom-left-radius: 10px; |
||||||
|
} |
||||||
|
&--shapeRight{ |
||||||
|
width: 50px; |
||||||
|
height: 100%; |
||||||
|
right: 0px; |
||||||
|
bottom: 0px; |
||||||
|
border-top-right-radius: 10px; |
||||||
|
border-bottom-right-radius: 10px; |
||||||
|
} |
||||||
|
&--shapeCenter{ |
||||||
|
position: absolute; |
||||||
|
width: calc(100% - 100px); |
||||||
|
height: calc(100% - 100px); |
||||||
|
right: 50px; |
||||||
|
bottom: 50px; |
||||||
|
border: 3px solid red; |
||||||
|
} |
||||||
|
} |
||||||
|
&__text{ |
||||||
|
text-align: justify; |
||||||
|
font-family: numeralMedium; |
||||||
|
color: #4CE1BE; |
||||||
|
font-size: calc(100vw / 28); |
||||||
|
} |
||||||
|
&__lasts{ |
||||||
|
width: 100%; |
||||||
|
margin: 30px 0px; |
||||||
|
h2{ |
||||||
|
font-family: numeralBold; |
||||||
|
color: #02A255; |
||||||
|
font-size: calc(100vw / 24); |
||||||
|
margin-bottom: 20px; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
Loading…
Reference in new issue