master
parent
69599d3c65
commit
d957786743
42 changed files with 857 additions and 194 deletions
@ -0,0 +1,3 @@ |
|||||||
|
import { createBrowserHistory } from "history"; |
||||||
|
|
||||||
|
export default createBrowserHistory(); |
||||||
@ -0,0 +1,45 @@ |
|||||||
|
import React from "react"; |
||||||
|
import { Link } from "react-router-dom"; |
||||||
|
|
||||||
|
import "./index.scss"; |
||||||
|
|
||||||
|
const grades = [ |
||||||
|
"اول", |
||||||
|
"دوم", |
||||||
|
"سوم", |
||||||
|
"چهارم", |
||||||
|
"پنجم", |
||||||
|
"ششم", |
||||||
|
"هفتم", |
||||||
|
"هشتم", |
||||||
|
"نهم", |
||||||
|
"دهم", |
||||||
|
"یازدهم", |
||||||
|
"دوازدهم", |
||||||
|
]; |
||||||
|
|
||||||
|
export default function LastQR(props) { |
||||||
|
const { data } = props; |
||||||
|
return ( |
||||||
|
<> |
||||||
|
{window.innerWidth > 1000 ? <div className="last-qr"></div> : null} |
||||||
|
{window.innerWidth < 1000 ? ( |
||||||
|
<Link to={`/qr${data.link}`} className="mobile-last-qr d-flex"> |
||||||
|
<div className="mobile-last-qr__right d-flex"> |
||||||
|
<img |
||||||
|
src={`https://dnvn.ir/api/v1/file/${data.fileIds}`} |
||||||
|
alt={data.name} |
||||||
|
/> |
||||||
|
<div className="d-flex flex-column"> |
||||||
|
<strong>{data.name}</strong> |
||||||
|
<span>{grades[data.gradeId]}</span> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div className="mobile-last-qr__left d-flex"> |
||||||
|
<button>صفحه {data.pagesNum}</button> |
||||||
|
</div> |
||||||
|
</Link> |
||||||
|
) : null} |
||||||
|
</> |
||||||
|
); |
||||||
|
} |
||||||
@ -0,0 +1,46 @@ |
|||||||
|
.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); |
||||||
|
text-decoration: none; |
||||||
|
&__right { |
||||||
|
align-items: center; |
||||||
|
img { |
||||||
|
height: 100px; |
||||||
|
border-radius: 10px; |
||||||
|
margin-left: 15px; |
||||||
|
} |
||||||
|
strong { |
||||||
|
font-family: numeralMedium; |
||||||
|
font-size: calc(100vw / 25); |
||||||
|
font-weight: 600; |
||||||
|
letter-spacing: -1px; |
||||||
|
color: #4e4e4e; |
||||||
|
} |
||||||
|
span { |
||||||
|
font-family: numeralMedium; |
||||||
|
font-size: calc(100vw / 30); |
||||||
|
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,47 @@ |
|||||||
|
import React, { Component } from "react"; |
||||||
|
import { Link } from "react-router-dom"; |
||||||
|
|
||||||
|
import "./index.scss"; |
||||||
|
|
||||||
|
const maxMobileSize = 550; |
||||||
|
|
||||||
|
const fontSize = { |
||||||
|
mobile: { |
||||||
|
span: window.innerWidth > maxMobileSize ? 20 : window.innerWidth / 17, |
||||||
|
a: window.innerWidth > maxMobileSize ? 20 : window.innerWidth / 20, |
||||||
|
}, |
||||||
|
}; |
||||||
|
export default class QRModal extends Component { |
||||||
|
render() { |
||||||
|
const { tail, parent } = this.props; |
||||||
|
return ( |
||||||
|
<> |
||||||
|
{window.innerWidth < 1000 ? ( |
||||||
|
<div className="mobile-qr-modal d-flex flex-column justify-content-center align-items-center"> |
||||||
|
<span style={{ fontSize: fontSize.mobile.span }}> |
||||||
|
اسکن کد QR موفقیت آمیز بود. |
||||||
|
</span> |
||||||
|
<Link style={{ fontSize: fontSize.mobile.a }} to={"/qr"}> |
||||||
|
{tail} |
||||||
|
</Link> |
||||||
|
<button onClick={() => parent.setState({ tail: null })}> |
||||||
|
انصراف |
||||||
|
</button> |
||||||
|
</div> |
||||||
|
) : ( |
||||||
|
<div className="qr-modal d-flex flex-column justify-content-center align-items-center"> |
||||||
|
<span style={{ fontSize: fontSize.mobile.span }}> |
||||||
|
اسکن کد QR موفقیت آمیز بود. |
||||||
|
</span> |
||||||
|
<Link style={{ fontSize: fontSize.mobile.a }} to={"/qr"}> |
||||||
|
{tail} |
||||||
|
</Link> |
||||||
|
<button onClick={() => parent.setState({ tail: null })}> |
||||||
|
انصراف |
||||||
|
</button> |
||||||
|
</div> |
||||||
|
)} |
||||||
|
</> |
||||||
|
); |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,92 @@ |
|||||||
|
.mobile-qr-modal { |
||||||
|
position: fixed; |
||||||
|
left: 0px; |
||||||
|
background-color: rgba(0, 0, 0, 0.856); |
||||||
|
top: 0px; |
||||||
|
width: 100vw; |
||||||
|
height: 100vh; |
||||||
|
z-index: 500; |
||||||
|
animation-name: qrModal; |
||||||
|
animation-duration: 0.4s; |
||||||
|
span { |
||||||
|
font-family: numeralLight; |
||||||
|
color: white; |
||||||
|
} |
||||||
|
a { |
||||||
|
text-decoration: none; |
||||||
|
width: 50%; |
||||||
|
margin: 25px auto; |
||||||
|
background-color: #00cc69; |
||||||
|
border: 2px solid white; |
||||||
|
padding: 20px 0px; |
||||||
|
text-align: center; |
||||||
|
color: white; |
||||||
|
font-family: numeralLight; |
||||||
|
border-radius: 25px; |
||||||
|
} |
||||||
|
button { |
||||||
|
text-decoration: none; |
||||||
|
width: 30%; |
||||||
|
min-width: 100px; |
||||||
|
margin: 15px auto; |
||||||
|
background-color: #cc001b; |
||||||
|
border: 2px solid white; |
||||||
|
padding: 5px 0px; |
||||||
|
text-align: center; |
||||||
|
color: white; |
||||||
|
font-family: numeralLight; |
||||||
|
border-radius: 25px; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.qr-modal { |
||||||
|
position: fixed; |
||||||
|
left: 0px; |
||||||
|
background-color: rgba(0, 0, 0, 0.925); |
||||||
|
top: 0px; |
||||||
|
width: 100vw; |
||||||
|
height: 100vh; |
||||||
|
z-index: 500; |
||||||
|
animation-name: qrModal; |
||||||
|
animation-duration: 0.4s; |
||||||
|
span { |
||||||
|
font-family: numeralLight; |
||||||
|
color: white; |
||||||
|
} |
||||||
|
a { |
||||||
|
text-decoration: none; |
||||||
|
width: 50%; |
||||||
|
margin: 25px auto; |
||||||
|
background-color: #00cc69; |
||||||
|
border: 2px solid white; |
||||||
|
padding: 20px 0px; |
||||||
|
text-align: center; |
||||||
|
color: white; |
||||||
|
font-family: numeralLight; |
||||||
|
border-radius: 25px; |
||||||
|
} |
||||||
|
button { |
||||||
|
text-decoration: none; |
||||||
|
width: 25%; |
||||||
|
max-width: 100px; |
||||||
|
margin: 15px auto; |
||||||
|
background-color: #cc001b; |
||||||
|
border: 2px solid white; |
||||||
|
padding: 10px 0px; |
||||||
|
text-align: center; |
||||||
|
color: white; |
||||||
|
font-family: numeralLight; |
||||||
|
border-radius: 25px; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
@keyframes qrModal { |
||||||
|
0% { |
||||||
|
left: -100vw; |
||||||
|
top: 0px; |
||||||
|
} |
||||||
|
100% { |
||||||
|
left: 0px; |
||||||
|
top: 0px; |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,57 @@ |
|||||||
|
import React, { Component } from "react"; |
||||||
|
//import QrReader from "react-camera-qr";
|
||||||
|
import QrReader from "react-qr-reader"; |
||||||
|
|
||||||
|
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() { |
||||||
|
let cam = this.props.parent.state.cameraId; |
||||||
|
|
||||||
|
let facingMode = this.props.parent.state.cameraId; |
||||||
|
return ( |
||||||
|
<> |
||||||
|
{window.innerWidth < 1000 ? ( |
||||||
|
<QrReader |
||||||
|
delay={800 + Math.random() * 10} |
||||||
|
onError={this.handleError} |
||||||
|
onScan={this.handleScan} |
||||||
|
style={{ width: "100%" }} |
||||||
|
cameraId={cam} |
||||||
|
facingMode={facingMode} |
||||||
|
/> |
||||||
|
) : null} |
||||||
|
{window.innerWidth > 1000 ? ( |
||||||
|
<QrReader |
||||||
|
delay={800 + Math.random() * 10} |
||||||
|
onError={this.handleError} |
||||||
|
onScan={this.handleScan} |
||||||
|
style={{ width: "100%" }} |
||||||
|
cameraId={cam} |
||||||
|
facingMode={facingMode} |
||||||
|
/> |
||||||
|
) : null} |
||||||
|
{/* <div>{facingMode[this.props.parent.state.facingMode]}</div> |
||||||
|
<div>{(this.state?.devices || []).join(",")}</div> */} |
||||||
|
</> |
||||||
|
); |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,242 @@ |
|||||||
|
import React, { Component } from "react"; |
||||||
|
import Navbar from "../Home/Navbar/index"; |
||||||
|
import Footer from "../Home/Footer/index"; |
||||||
|
|
||||||
|
import Scanner from "./Scanner/index"; |
||||||
|
import LastQr from "./LastQr/index"; |
||||||
|
import Modal from "./Modal/index"; |
||||||
|
import ReplayIcon from "@material-ui/icons/Replay"; |
||||||
|
import FlipCameraIosIcon from "@material-ui/icons/FlipCameraIos"; |
||||||
|
|
||||||
|
import { connect } from "react-redux"; |
||||||
|
import { qr } from "~/Redux/actions"; |
||||||
|
|
||||||
|
import sciense_6 from "../../assets/images/sciense-6.png"; |
||||||
|
|
||||||
|
import "./index.scss"; |
||||||
|
|
||||||
|
const maxDesktopSize = 1250; |
||||||
|
|
||||||
|
const fontSize = { |
||||||
|
desktop: { |
||||||
|
h1: window.innerWidth > maxDesktopSize ? 25 : window.innerWidth / 70, |
||||||
|
p: window.innerHeight > maxDesktopSize ? 15 : window.innerWidth / 90, |
||||||
|
}, |
||||||
|
}; |
||||||
|
|
||||||
|
class QRScan extends Component { |
||||||
|
state = { |
||||||
|
value: null, |
||||||
|
facingMode: 0, |
||||||
|
tail: null, |
||||||
|
cameraIds: [], |
||||||
|
cameraId: "rare", |
||||||
|
}; |
||||||
|
componentDidMount() { |
||||||
|
navigator.mediaDevices.enumerateDevices().then((devices) => { |
||||||
|
console.log({ devices }); |
||||||
|
var cameraIds = devices |
||||||
|
.filter(function (device) { |
||||||
|
return device.kind === "videoinput"; |
||||||
|
}) |
||||||
|
.map((e) => [e.label, e.deviceId]); |
||||||
|
|
||||||
|
var environmentPattern = /rear|back|environment/gi; |
||||||
|
var userPattern = /front|user|face/gi; |
||||||
|
var backs = cameraIds.filter((label) => environmentPattern.test(label)); |
||||||
|
var notFronts = cameraIds.filter((label) => !userPattern.test(label)); |
||||||
|
let cameraId = backs[0] || notFronts[0] || cameraIds[0]; |
||||||
|
let cameraIdx = cameraIds.findIndex((cam) => cam[1] === cameraId[1]); |
||||||
|
console.log({ |
||||||
|
cameraIds, |
||||||
|
cameraId: cameraId[0], |
||||||
|
cameraIdx, |
||||||
|
}); |
||||||
|
this.setState({ |
||||||
|
cameraIds, |
||||||
|
cameraId, |
||||||
|
cameraIdx, |
||||||
|
}); |
||||||
|
}); |
||||||
|
} |
||||||
|
async componentDidUpdate() { |
||||||
|
if (this.state.value) { |
||||||
|
let tail = this.state.value.slice( |
||||||
|
this.state.value.lastIndexOf("/") + 1, |
||||||
|
this.state.value.length |
||||||
|
); |
||||||
|
this.props.info({ tail: tail }); |
||||||
|
this.setState({ value: null, tail: tail }); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
render() { |
||||||
|
const { data } = this.props; |
||||||
|
return ( |
||||||
|
<> |
||||||
|
{window.innerWidth > 100 ? ( |
||||||
|
<> |
||||||
|
<div className="qr-scan d-flex flex-column align-items-center"> |
||||||
|
<Navbar /> |
||||||
|
<div className="qr-scan__box d-flex flex-column"> |
||||||
|
<header className="qr-scan__box--header d-flex flex-column"> |
||||||
|
<h1 style={{ fontSize: fontSize.desktop.h1 }}>نکته</h1> |
||||||
|
<p style={{ fontSize: fontSize.desktop.p }}> |
||||||
|
لطفا دوربین خود را روی کدی که در اختیار شما قرار گرفته قرار |
||||||
|
دهید تا اسکن دوربین انجام شود |
||||||
|
</p> |
||||||
|
</header> |
||||||
|
{this.state.cameraIds.length > 1 ? ( |
||||||
|
<div className="qr-scan__box--select d-flex"> |
||||||
|
<select |
||||||
|
value={this.state.cameraId} |
||||||
|
onChange={(e) => |
||||||
|
this.setState({ |
||||||
|
facingMode: Math.round() * 3, |
||||||
|
cameraId: e.target.value, |
||||||
|
}) |
||||||
|
} |
||||||
|
> |
||||||
|
{this.state.cameraIds.map((e) => ( |
||||||
|
<option value={e[1]}>{e[0] || e[1]}</option> |
||||||
|
))} |
||||||
|
</select> |
||||||
|
</div> |
||||||
|
) : null} |
||||||
|
<section className="qr-scan__box--camera d-flex justify-content-center align-items-center"> |
||||||
|
<FlipCameraIosIcon |
||||||
|
style={{ |
||||||
|
fontSize: 35, |
||||||
|
position: "absolute", |
||||||
|
left: 10, |
||||||
|
top: 10, |
||||||
|
zIndex: 100, |
||||||
|
color: "white", |
||||||
|
}} |
||||||
|
onClick={() => |
||||||
|
this.setState({ |
||||||
|
facingMode: (this.state.facingMode + 1) % 2, |
||||||
|
}) |
||||||
|
} |
||||||
|
/> |
||||||
|
{this.state.value !== null ? ( |
||||||
|
<div |
||||||
|
style={{ zIndex: 1000 }} |
||||||
|
onClick={() => this.setState({ value: null })} |
||||||
|
> |
||||||
|
<ReplayIcon style={{ fontSize: 40, color: "grey" }} /> |
||||||
|
</div> |
||||||
|
) : ( |
||||||
|
<Scanner parent={this} cameraId={this.state.cameraId} /> |
||||||
|
)} |
||||||
|
</section> |
||||||
|
{this.state.tail === null ? null : ( |
||||||
|
<Modal tail={this.state.tail} /> |
||||||
|
)} |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<Footer /> |
||||||
|
</> |
||||||
|
) : null} |
||||||
|
{window.innerWidth < 100 ? ( |
||||||
|
<> |
||||||
|
<div className="mobile-qr-scan d-flex flex-column"> |
||||||
|
<Navbar page="qr-scan" /> |
||||||
|
{/* <div className="mobile-qr-scan__back d-flex"> |
||||||
|
<Link to="/">بازگشت</Link> |
||||||
|
</div> */} |
||||||
|
<header className="mobile-qr-scan__header d-flex flex-column"></header> |
||||||
|
|
||||||
|
<section className="mobile-qr-scan__camera d-flex justify-content-center align-items-center"> |
||||||
|
{this.state.cameraIds.length > 1 ? ( |
||||||
|
<> |
||||||
|
<div |
||||||
|
className="qr-scan__box--select d-flex" |
||||||
|
style={{ position: "absolute", zIndex: 500 }} |
||||||
|
> |
||||||
|
<select |
||||||
|
value={this.state.cameraId} |
||||||
|
onChange={(e) => |
||||||
|
this.setState({ |
||||||
|
facingMode: Math.round() * 3, |
||||||
|
cameraId: e.target.value, |
||||||
|
}) |
||||||
|
} |
||||||
|
> |
||||||
|
{this.state.cameraIds.map((e) => ( |
||||||
|
<option value={e[1]}> |
||||||
|
{e[0]} |
||||||
|
{e[1]} |
||||||
|
</option> |
||||||
|
))} |
||||||
|
</select> |
||||||
|
</div> |
||||||
|
<FlipCameraIosIcon |
||||||
|
style={{ |
||||||
|
fontSize: 35, |
||||||
|
position: "absolute", |
||||||
|
left: 10, |
||||||
|
top: 10, |
||||||
|
zIndex: 100, |
||||||
|
color: "white", |
||||||
|
}} |
||||||
|
onClick={() => { |
||||||
|
let cameraIdx = |
||||||
|
(this.state.cameraIdx + 1) % |
||||||
|
this.state.cameraIds.length; |
||||||
|
|
||||||
|
this.setState({ |
||||||
|
cameraIdx, |
||||||
|
cameraId: this.state.cameraIds[cameraIdx], |
||||||
|
}); |
||||||
|
}} |
||||||
|
/> |
||||||
|
</> |
||||||
|
) : null} |
||||||
|
{false && this.state.cameraId === "" ? ( |
||||||
|
<div |
||||||
|
style={{ zIndex: 1000 }} |
||||||
|
onClick={() => this.setState({ value: null })} |
||||||
|
> |
||||||
|
<ReplayIcon style={{ fontSize: 40, color: "grey" }} /> |
||||||
|
</div> |
||||||
|
) : ( |
||||||
|
<Scanner parent={this} cameraId={this.state.cameraId} /> |
||||||
|
)} |
||||||
|
</section> |
||||||
|
{this.state.tail === null ? null : ( |
||||||
|
<Modal parent={this} tail={this.state.tail} /> |
||||||
|
)} |
||||||
|
{localStorage.getItem("latestQr") ? ( |
||||||
|
<section className="mobile-qr-scan__lasts d-flex flex-column"> |
||||||
|
<h2>آخرین مشاهدات</h2> |
||||||
|
{data.map((item, i) => ( |
||||||
|
<LastQr |
||||||
|
data={JSON.parse(localStorage.getItem("latestQr"))} |
||||||
|
key={i} |
||||||
|
/> |
||||||
|
))} |
||||||
|
</section> |
||||||
|
) : null} |
||||||
|
</div> |
||||||
|
</> |
||||||
|
) : null} |
||||||
|
</> |
||||||
|
); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
export default connect((state) => ({ list: state.qr.list }), { info: qr.info })( |
||||||
|
QRScan |
||||||
|
); |
||||||
|
|
||||||
|
QRScan.defaultProps = { |
||||||
|
data: [ |
||||||
|
{ |
||||||
|
title: "ریاضیات گسسته خیلی پیشرفته", |
||||||
|
subTitle: "پایه هفتم ابتدایی", |
||||||
|
page: 13, |
||||||
|
image: sciense_6, |
||||||
|
}, |
||||||
|
], |
||||||
|
}; |
||||||
@ -0,0 +1,167 @@ |
|||||||
|
.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: space-around; |
||||||
|
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 { |
||||||
|
width: 100%; |
||||||
|
h1 { |
||||||
|
font-family: numeralMedium; |
||||||
|
color: #4ce1be; |
||||||
|
font-size: calc(100vw / 13); |
||||||
|
} |
||||||
|
p { |
||||||
|
text-align: justify; |
||||||
|
font-family: numeralMedium; |
||||||
|
color: #4ce1be; |
||||||
|
font-size: calc(100vw / 28); |
||||||
|
} |
||||||
|
} |
||||||
|
&__select { |
||||||
|
select { |
||||||
|
margin-top: 10px; |
||||||
|
border-radius: 4px; |
||||||
|
position: relative; |
||||||
|
background-color: #efefef; |
||||||
|
border: 1px solid #a5a5a5; |
||||||
|
font-size: 16px; |
||||||
|
color: black; |
||||||
|
// maxWidth : 70; |
||||||
|
min-width: 80; |
||||||
|
height: 35px; |
||||||
|
padding: 5px; |
||||||
|
font-family: numeralLight; |
||||||
|
&:focus { |
||||||
|
border-radius: 4; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
&__camera { |
||||||
|
// margin-top: 20px; |
||||||
|
width: 100%; |
||||||
|
border-radius: 10px; |
||||||
|
margin: 5px auto; |
||||||
|
position: relative; |
||||||
|
&--shape { |
||||||
|
position: absolute; |
||||||
|
background-color: rgba(0, 0, 0, 0.8); |
||||||
|
} |
||||||
|
} |
||||||
|
&__text { |
||||||
|
text-align: justify; |
||||||
|
font-family: numeralMedium; |
||||||
|
color: #4ce1be; |
||||||
|
font-size: calc(100vw / 28); |
||||||
|
} |
||||||
|
&__lasts { |
||||||
|
width: 100%; |
||||||
|
margin: 15px 0px; |
||||||
|
h2 { |
||||||
|
font-family: numeralMedium; |
||||||
|
color: #02a255; |
||||||
|
font-size: calc(100vw / 24); |
||||||
|
margin-bottom: 20px; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.qr-scan { |
||||||
|
width: 100vw; |
||||||
|
max-width: 1250px; |
||||||
|
min-height: calc(100vh - 288px); |
||||||
|
margin: 0px auto; |
||||||
|
padding: 0px 10px; |
||||||
|
direction: rtl; |
||||||
|
overflow-x: hidden; |
||||||
|
padding-top: 80px; |
||||||
|
&__back { |
||||||
|
justify-content: flex-start; |
||||||
|
a { |
||||||
|
display: inline; |
||||||
|
font-family: numeralLight; |
||||||
|
text-decoration: none; |
||||||
|
padding: 5px 20px 3px; |
||||||
|
background-color: #00cc69; |
||||||
|
border-radius: 25px; |
||||||
|
font-size: calc(100vw / 70); |
||||||
|
color: white; |
||||||
|
&:focus:enabled { |
||||||
|
text-decoration: none; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
&__box { |
||||||
|
width: 100%; |
||||||
|
max-width: 700px; |
||||||
|
&--header { |
||||||
|
width: 100%; |
||||||
|
h1 { |
||||||
|
font-family: numeralMedium; |
||||||
|
color: #00cc69; |
||||||
|
} |
||||||
|
p { |
||||||
|
font-family: numeralLight; |
||||||
|
color: #4d4d4f; |
||||||
|
} |
||||||
|
} |
||||||
|
&--select { |
||||||
|
select { |
||||||
|
margin-top: 10px; |
||||||
|
border-radius: 4px; |
||||||
|
position: relative; |
||||||
|
background-color: #efefef; |
||||||
|
border: 1px solid #a5a5a5; |
||||||
|
font-size: 16px; |
||||||
|
color: black; |
||||||
|
// maxWidth : 70; |
||||||
|
min-width: 80; |
||||||
|
height: 35px; |
||||||
|
padding: 5px; |
||||||
|
font-family: numeralLight; |
||||||
|
&:focus { |
||||||
|
border-radius: 4; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
&--camera { |
||||||
|
margin-top: 20px; |
||||||
|
width: 100%; |
||||||
|
max-width: 300px; |
||||||
|
margin: 0px auto 40px; |
||||||
|
* { |
||||||
|
border-radius: 10px; |
||||||
|
} |
||||||
|
} |
||||||
|
&--text { |
||||||
|
margin-top: 30px; |
||||||
|
width: 100%; |
||||||
|
p { |
||||||
|
font-family: numeralLight; |
||||||
|
color: #4d4d4f; |
||||||
|
} |
||||||
|
} |
||||||
|
p { |
||||||
|
font-family: numeralLight; |
||||||
|
color: #4d4d4f; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
Loading…
Reference in new issue