You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
166 lines
6.3 KiB
166 lines
6.3 KiB
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 sciense_6 from "../../assets/images/sciense-6.png"; |
|
import analytics from "../../assets/icons/analytics.svg"; |
|
import danger from "../../assets/icons/danger.svg"; |
|
|
|
import "./index.scss"; |
|
|
|
const maxDesktopSize = 1250; |
|
const maxMobileSize = 550; |
|
|
|
const fontSize = { |
|
desktop: { |
|
h1: window.innerWidth > maxDesktopSize ? 25 : window.innerWidth / 45, |
|
h2: window.innerWidth > maxDesktopSize ? 21 : window.innerWidth / 65, |
|
p: window.innerWidth > maxDesktopSize ? 16 : window.innerWidth / 70, |
|
span: window.innerWidth > maxDesktopSize ? 18 : window.innerWidth / 75, |
|
form: window.innerWidth > maxDesktopSize ? 18 : window.innerWidth / 70, |
|
}, |
|
mobile: { |
|
h1: window.innerWidth > maxMobileSize ? 24 : window.innerWidth / 15, |
|
p: window.innerWidth > maxMobileSize ? 14 : window.innerWidth / 30, |
|
form: window.innerWidth > maxMobileSize ? 18 : window.innerWidth / 24, |
|
span: window.innerWidth > maxMobileSize ? 14 : window.innerWidth / 25, |
|
}, |
|
}; |
|
|
|
export default class Activation extends Component { |
|
state = { |
|
value: null, |
|
}; |
|
render() { |
|
const { data } = this.props; |
|
return ( |
|
<> |
|
{window.innerWidth > 1000 ? ( |
|
<> |
|
<div className="activation d-flex flex-column align-items-center"> |
|
<Navbar /> |
|
<header className="activation__header d-flex flex-column align-items-center"> |
|
<img src={analytics} alt="فعال سازی کتاب" /> |
|
<h1 style={{ fontSize: fontSize.desktop.h1 }}> |
|
فعال سازی کتاب الکترونیک |
|
</h1> |
|
</header> |
|
<div className="activation__description d-flex"> |
|
<span>.</span> |
|
<p style={{ fontSize: fontSize.desktop.p }}> |
|
کد فعال سازی در اختیار شما قرار گرفته است را در قسمت زیر وارد |
|
وارد تا کتاب الکترونیک آن فعالسازی شود |
|
</p> |
|
</div> |
|
<form |
|
className="activation__form d-flex" |
|
onSubmit={() => console.log()} |
|
> |
|
<input |
|
id="code" |
|
type="text" |
|
maxLength={9} |
|
autoComplete="off" |
|
onChange={(e) => this.setState({ code: e.target.value })} |
|
style={{ fontSize: fontSize.desktop.form }} |
|
/> |
|
<button |
|
style={{ fontSize: fontSize.desktop.form }} |
|
type="submit" |
|
> |
|
ثبت کد فعال سازی |
|
</button> |
|
</form> |
|
{/* <div className="activation__support d-flex align-center"> |
|
<span> |
|
<img src={danger} /> |
|
</span> |
|
<p style={{ fontSize: fontSize.desktop.p }}> |
|
کد فعال سازی در اختیار شما قرار گرفته است را در قسمت زیر وارد |
|
وارد تا کتاب الکترونیک آن فعالسازی شود |
|
</p> |
|
</div> |
|
<div className="activation__history d-flex flex-column"> |
|
<h2 style={{ fontSize: fontSize.desktop.h2 }}>آخرین مشاهدات</h2> |
|
{data.map((item, i) => ( |
|
<History data={item} key={i} /> |
|
))} |
|
</div> */} |
|
</div> |
|
<Footer /> |
|
</> |
|
) : null} |
|
{window.innerWidth < 1000 ? ( |
|
<div className="mobile-activation d-flex flex-column align-items-center"> |
|
<Navbar /> |
|
<div |
|
style={{ fontSize: fontSize.mobile.span }} |
|
className="mobile-activation__back d-flex" |
|
> |
|
<Link to="/" style={{ fontSize: fontSize.mobile.span }}> |
|
بازگشت |
|
</Link> |
|
</div> |
|
<header className="mobile-activation__header d-flex flex-column align-items-center"> |
|
<img src={analytics} alt="فعال سازی کتاب" /> |
|
<h1 style={{ fontSize: fontSize.mobile.h1 }}> |
|
فعال سازی کتاب الکترونیک |
|
</h1> |
|
</header> |
|
<div className="mobile-activation__description d-flex"> |
|
<span>.</span> |
|
<p style={{ fontSize: fontSize.mobile.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 })} |
|
placeholder={"FC5DFD : مثال"} |
|
style={{ fontSize: fontSize.mobile.form }} |
|
/> |
|
<button style={{ fontSize: fontSize.mobile.form }} 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: sciense_6, |
|
}, |
|
], |
|
};
|
|
|