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