reza added QR

src/AppRouter.js

@@ -8,7 +8,7 @@ import Contact from './views/Contact/index';
 import About from './views/About/index';
 import Products from './views/Products/index';
 import Product from './views/Product/index';
-import Sample from './views/Product/Sample/index';
+import QR from './views/QR/index';
 class AppRouter extends Component {
   constructor(props) {
     super(props);
@@ -45,8 +45,8 @@ class AppRouter extends Component {
           <Route exact path={'/products/:id'}>
             <Product />
           </Route>
-          <Route exact path={'/products/:id/sample'}>
+          <Route exact path={'/qr'}>
-            <Sample />
+            <QR />
           </Route>
         </Switch>
       </Router>

src/views/Product/Sample/index.js

@@ -1,113 +0,0 @@
-import React, { Component } from "react";
-import Navbar from "../../Home/Navbar/index";
-import Footer from "../../Home/Footer/index";
-
-import book2 from "../../../assets/images/book2.png";
-
-import './index.scss';
-export default class Sample extends Component {
-  render() {
-    const { product } = this.props;
-    return (
-      <>
-        {window.innerWidth > 1000 ? (
-          <>
-            <div className="product-sample d-flex">
-              <Navbar />
-            </div>
-            <Footer />
-          </>
-        ) : null}
-        {window.innerWidth < 1000 ? (
-          <>
-            <div className="mobile-product-sample d-flex flex-column">
-              <Navbar />
-              <header className="mobile-product-sample__header d-flex">
-                <div className="mobile-product-sample__header--right d-flex">
-                  <img src={product.image} alt={product.title} />
-                </div>
-                <div className="mobile-product-sample__header--left d-flex flex-column">
-                  <h1>{product.title}</h1>
-                  <h2>{product.subTitle}</h2>
-                  <div>
-                     شما در حال مطالعه  <strong>صفحه {product.sample.page}</strong> هستید. 
-                  </div>
-                  <div>
-                    پیشرفت شما در مطالعه کتاب به <span>{product.sample.percent} درصد</span>  رسیده است.
-                  </div>
-                </div>
-              </header>
-            </div>
-          </>
-        ) : null}
-      </>
-    );
-  }
-}
-
-Sample.defaultProps = {
-  product: {
-    id: 1,
-    image: book2,
-    title: "منفجر کردن مغز خود را به ما بسپارید",
-    subTitle: "پایه ششم ابتدایی",
-    price: "39.000",
-    oldPrice: "59.000",
-    date: new Date(),
-    sample: {
-      page: 67,
-      percent: 60,
-    },
-    abstraction:
-      "لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است، و برای شرایط فعلی تکنولوژی مورد نیاز، و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد، کتابهای زیادی در شصت و سه درصد گذشته حال و آینده، شناخت فراوان جامعه و متخصصان را می طلبد، تا با نرم افزارها شناخت بیشت",
-    modules: [
-      "پک هدیه شامل یک عدد جلد سخت",
-      "عینک واقعیت مجازی",
-      "کارت گرافیک مناسب جهت اجرای بازی",
-    ],
-    tips: [
-      "پک هدیه شامل یک عدد جلد سخت",
-      "عینک واقعیت مجازی",
-      "کارت گرافیک مناسب جهت اجرای بازی",
-    ],
-    description:
-      "لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است، و برای شرایط فعلی تکنولوژی مورد نیاز، و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد، کتابهای زیادی در شصت و سه درصد گذشته حال و آینده، شناخت فراوان جامعه و متخصصان را می طلبد، تا با نرم افزارها شناخت بیشت",
-    comments: [
-      {
-        id: 0,
-        username: "محمدرضا",
-        date: new Date(),
-        text: "عالی بود. ممنون از سایت زیباتون",
-        score: 4,
-      },
-      {
-        id: 1,
-        username: "محمدرضا",
-        date: new Date(),
-        text: "عالی بود. ممنون از سایت زیباتون",
-        score: 2.5,
-      },
-      {
-        id: 2,
-        username: "محمدرضا",
-        date: new Date(),
-        text: "عالی بود. ممنون از سایت زیباتون",
-        score: 5,
-      },
-      {
-        id: 3,
-        username: "محمدرضا",
-        date: new Date(),
-        text: "عالی بود. ممنون از سایت زیباتون",
-        score: 3.7,
-      },
-      {
-        id: 4,
-        username: "محمدرضا",
-        date: new Date(),
-        text: "عالی بود. ممنون از سایت زیباتون",
-        score: 2,
-      },
-    ],
-  },
-};

src/views/QR/Links/index.js

@@ -0,0 +1,32 @@
+import React from 'react';
+
+import './index.scss';
+export default function Links(props){
+    return(
+        <>
+            {
+                window.innerWidth > 1000 ? 
+                <div className="links-box d-flex flex-column"> 
+                    <h2>{props.data.title}</h2>
+                </div> : null
+            }
+            {
+                window.innerWidth < 1000 ? 
+                <div className="mobile-links-box d-flex flex-column"> 
+                    <h2><span></span>لینکها</h2>
+                    <ul>
+                        {props.data.links.map((item,i) => (
+                            <Item data={item} key={i} />
+                        ) )}
+                    </ul>
+                </div> : null
+            }   
+        </>
+    );
+}
+
+const Item = (props) => {
+    return(
+        <li><a href={props.data.link}>{props.data.title}</a></li>
+    );
+}

src/views/QR/Links/index.scss

@@ -0,0 +1,34 @@
+.mobile-links-box{
+  width: 100%;
+  border-radius: 10px;
+  background-color: #fffac948;
+  margin: 15px 0px;
+  text-decoration: none;
+  padding: 20px 10px;
+  h2{
+    font-family: numeralMedium;
+    font-size: calc(100vw / 32);
+    color: #72891edc;
+    padding: 5px;
+    span{
+      width: 10px;
+      height: 10px;
+      border-radius: 50%;
+      background-color: #72891e;
+      margin-left: 5px;
+    }
+  }
+  ul{
+    padding: 0px;
+    margin: 0px;
+    list-style: none;
+    padding-right: 15px;
+    li{
+      font-size: calc(100vw / 30);
+      a{
+        text-decoration: none;
+        color: #72891e;
+      }
+    }
+  }
+}

src/views/QR/PDF/index.js

@@ -0,0 +1,22 @@
+import React from 'react';
+
+import './index.scss';
+export default function PDF(props){
+    return(
+        <>
+            {
+                window.innerWidth > 1000 ? 
+                <div className="pdf-box d-flex flex-column"> 
+                    <h2>{props.data.title}</h2>
+                </div> : null
+            }
+            {
+                window.innerWidth < 1000 ? 
+                <a href={props.data.file} download className="mobile-pdf-box d-flex flex-column"> 
+                    <h2 className="d-flex align-items-center"><span></span>{props.data.title}</h2>
+                    <div></div>
+                </a> : null
+            }   
+        </>
+    );
+}

src/views/QR/PDF/index.scss

@@ -0,0 +1,23 @@
+.mobile-pdf-box{
+  width: 100%;
+  border-radius: 10px;
+  background-color:#ffa9a91e;
+  margin: 15px 0px;
+  text-decoration: none;
+  height: calc(100vh / 9);
+  padding: 20px 10px;
+  h2{
+    font-family: numeralMedium;
+    font-size: calc(100vw / 32);
+    color: #FF0808;
+    padding: 5px;
+    span{
+      width: 7px;
+      height: 7px;
+      border-radius: 50%;
+      background-color: #ffa9a925;
+      margin-left: 5px;
+    }
+  }
+
+}

src/views/QR/PowerPoint/index.js

@@ -0,0 +1,22 @@
+import React from 'react';
+
+import './index.scss';
+export default function PowerPoint(props){
+    return(
+        <>
+            {
+                window.innerWidth > 1000 ? 
+                <div className="ppt-box d-flex flex-column"> 
+                    <h2>{props.data.title}</h2>
+                </div> : null
+            }
+            {
+                window.innerWidth < 1000 ? 
+                <a href={props.data.file} download className="mobile-ppt-box d-flex flex-column"> 
+                    <h2 className="d-flex align-items-center"><span></span>{props.data.title}</h2>
+                    <div></div>
+                </a> : null
+            }   
+        </>
+    );
+}

src/views/QR/PowerPoint/index.scss

@@ -0,0 +1,23 @@
+.mobile-ppt-box{
+  width: 100%;
+  border-radius: 10px;
+  background-color : #8dfaf61f;
+  margin: 15px 0px;
+  text-decoration: none;
+  height: calc(100vh / 9);
+  padding: 20px 10px;
+  h2{
+    font-family: numeralMedium;
+    font-size: calc(100vw / 32);
+    color: #0D9189;
+    padding: 5px;
+    span{
+      width: 7px;
+      height: 7px;
+      border-radius: 50%;
+      background-color: #0D9189;
+      margin-left: 5px;
+    }
+  }
+
+}

src/views/QR/VideoBox/index.js

@@ -0,0 +1,22 @@
+import React from 'react';
+
+import './index.scss';
+export default function VideoBox(props){
+    return(
+        <>
+            {
+                window.innerWidth > 1000 ? 
+                <div className="video-box d-flex flex-column"> 
+                    <h2>{props.data.title}</h2>
+                </div> : null
+            }
+            {
+                window.innerWidth < 1000 ? 
+                <div className="mobile-video-box d-flex flex-column"> 
+                    <h2 className="d-flex align-items-center"><span></span>{props.data.title}</h2>
+                    <div></div>
+                </div> : null
+            }   
+        </>
+    );
+}

src/views/QR/VideoBox/index.scss

@@ -0,0 +1,19 @@
+.mobile-video-box{
+  width: 100%;
+  border-radius: 10px;
+  background-color: #eee;
+  margin: 15px 0px;
+  height: calc(100vh / 4);
+  position: relative;
+  h2{
+    font-family: numeralMedium;
+    font-size: calc(100vw / 35);
+    color: #02733C;
+    padding: 5px;
+    background-color: #FFFFFF;
+    color: #4D4D4F;
+    position: absolute;
+    right: 10px;
+    top: 20px;
+  }
+}

src/views/QR/VoiceBox/index.js

@@ -0,0 +1,22 @@
+import React from 'react';
+
+import './index.scss';
+export default function VoiceBox(props){
+    return(
+        <>
+            {
+                window.innerWidth > 1000 ? 
+                <div className="voice-box d-flex flex-column"> 
+                    <h2>{props.data.title}</h2>
+                </div> : null
+            }
+            {
+                window.innerWidth < 1000 ? 
+                <div className="mobile-voice-box d-flex flex-column"> 
+                    <h2 className="d-flex align-items-center"><span></span>{props.data.title}</h2>
+                    <div></div>
+                </div> : null
+            }   
+        </>
+    );
+}

src/views/QR/VoiceBox/index.scss

@@ -0,0 +1,24 @@
+.mobile-voice-box{
+  width: 100%;
+  border-radius: 10px;
+  background-color: #8dfac541;
+  padding: 10px 10px;
+  margin: 15px 0px;
+  h2{
+    font-family: numeralBold;
+    font-size: calc(100vw / 40);
+    color: #02733C;
+    span{
+      width: 7px;
+      height: 7px;
+      border-radius: 50%;
+      background-color: #00CC69;
+      margin-left: 5px;
+    }
+  }
+  div{
+    width: 100%;
+    height: 40px;
+    background-color: #02733C;
+  }
+}

src/views/QR/index.js

@@ -0,0 +1,180 @@
+import React, { Component } from "react";
+import Navbar from "../Home/Navbar/index";
+import Footer from "../Home/Footer/index";
+import VoiceBox from "./VoiceBox/index.js";
+import VideoBox from "./VideoBox/index";
+import PDF from './PDF/index';
+import PowerPoint from './PowerPoint/index';
+import Links from './Links/index';
+
+import book2 from "../../assets/images/book2.png";
+
+import './index.scss';
+export default class QR extends Component {
+  render() {
+    const { QR } = this.props;
+    return (
+      <>
+        {window.innerWidth > 1000 ? (
+          <>
+            <div className="product-sample d-flex">
+              <Navbar />
+            </div>
+            <Footer />
+          </>
+        ) : null}
+        {window.innerWidth < 1000 ? (
+          <>
+            <div className="mobile-qr d-flex flex-column">
+              <Navbar />
+              <header className="mobile-qr__header d-flex">
+                <div className="mobile-qr__header--right d-flex">
+                  <img src={QR.image} alt={QR.title} />
+                </div>
+                <div className="mobile-qr__header--left d-flex flex-column">
+                  <h1>{QR.title}</h1>
+                  <h2>{QR.subTitle}</h2>
+                  <div>
+                     شما در حال مطالعه  <strong>صفحه {QR.sample.page}</strong> هستید. 
+                  </div>
+                  <div>
+                    پیشرفت شما در مطالعه کتاب به <span>{QR.sample.percent} درصد</span>  رسیده است.
+                  </div>
+                </div>
+              </header>
+              <div className="d-flex pt-3">
+                <div className="mobile-qr__buttons">
+
+                </div>
+                <div className="mobile-qr__content d-flex flex-column">
+                  {
+                    QR.data.map((item, i) => (
+                      <Identifier data={item} />
+                    ))
+                  }
+                </div>
+              </div>
+            </div>
+          </>
+        ) : null}
+      </>
+    );
+  }
+}
+
+QR.defaultProps = {
+  QR: {
+    id: 1,
+    image: book2,
+    title: "منفجر کردن مغز خود را به ما بسپارید",
+    subTitle: "پایه ششم ابتدایی",
+    date: new Date(),
+    sample: {
+      page: 67,
+      percent: 60,
+
+    },
+    data: [
+      {
+        type: 'h1',
+        text: 'خلاصه کتاب'
+      },
+      {
+        type: 'p',
+        text: 'لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است، و برای شرایط فعلی تکنولوژی مورد نیاز، و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد، کتابهای زیادی در شصت و سه درصد گذشته حال و آینده، شناخت فراوان جامعه و متخصصان را می طلبد، تا با نرم افزارها شناخت بیشت',
+      },
+      {
+        type: 'h1',
+        text: 'خلاصه کتاب'
+      },
+      {
+        type: 'p',
+        text: 'لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است، و برای شرایط فعلی تکنولوژی مورد نیاز، و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد، کتابهای زیادی در شصت و سه درصد گذشته حال و آینده، شناخت فراوان جامعه و متخصصان را می طلبد، تا با نرم افزارها شناخت بیشت',
+      },
+      {
+        type: 'voice',
+        title: 'استاد رضایی:‌توضیح در مورد درس آتشفشان',
+        file: null,
+      },
+      {
+        type: 'p',
+        text: 'لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است، و برای شرایط فعلی تکنولوژی مورد نیاز، و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد، کتابهای زیادی در شصت و سه درصد گذشته حال و آینده، شناخت فراوان جامعه و متخصصان را می طلبد، تا با نرم افزارها شناخت بیشت',
+      },
+      {
+        type: 'video',
+        title: 'ویدئوی آزمایشی آتش فشان سرکه',
+        file: null
+      },
+      {
+        type: 'p',
+        text: 'لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است، و برای شرایط فعلی تکنولوژی مورد نیاز، و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد، کتابهای زیادی در شصت و سه درصد گذشته حال و آینده، شناخت فراوان جامعه و متخصصان را می طلبد، تا با نرم افزارها شناخت بیشت',
+      },
+      {
+        type: 'ppt',
+        title: 'فایل پاورپوینت ارائه درس آتشفشان',
+        link: ''
+      },
+      {
+        type: 'pdf',
+        title: 'فایل پی دی اف ارائه درس آتشفشان',
+        link: ''
+      },
+      {
+        type: 'p',
+        text: 'لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است، و برای شرایط فعلی تکنولوژی مورد نیاز، و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد، کتابهای زیادی در شصت و سه درصد گذشته حال و آینده، شناخت فراوان جامعه و متخصصان را می طلبد، تا با نرم افزارها شناخت بیشت',
+      },
+      {
+        type: 'links',
+        links: [
+          {
+            title: 'وبسایت آموزشی دانوین',
+            link: '',
+          },
+          {
+            title: 'وبسایت رسمی مدیریت راهبردی کشور',
+            link: ''
+          },
+          {
+            title: 'سازمان تبلیغات صنایع سبک',
+            link: ''
+          }
+        ]
+      }
+    ]
+  },
+};
+
+const Identifier = (props) => {
+  return(
+    <>
+      {
+        props.data.type === 'p' ? 
+        <p>{props.data.text}</p> : null
+      }
+      {
+        props.data.type === 'h1' ? 
+        <h1>{props.data.text}</h1> : null
+      }
+      {
+        props.data.type === 'voice'?
+        <VoiceBox data={props.data} /> : null
+      }
+      {
+        props.data.type === 'video'?
+        <VideoBox data={props.data} /> : null
+      }
+      {
+        props.data.type === 'pdf'?
+        <PDF data={props.data} /> : null
+      }
+      {
+        props.data.type === 'ppt'?
+        <PowerPoint data={props.data} /> : null
+      }
+      {
+        props.data.type === 'links'?
+        <Links data={props.data} /> : null
+      }
+    </>
+  );
+}

src/views/QR/index.scss

@@ -1,12 +1,13 @@
-.mobile-product-sample{
+.mobile-qr{
   width: 100vw;
   max-width: 1250px;
   margin: 0px auto;
-  padding : 0px 10px 40px;
+  padding : 0px 0px 40px;
   direction: rtl;
   padding-top: 70px;
   overflow-x: hidden;
   &__header{
+    padding: 0px 10px;
     width: 100%;
     &--right{
       img{
@@ -45,4 +46,25 @@
       }
     }
   }
+  &__buttons{
+    width: 35px;
+    background-color: #eee;
+  }
+  &__content{
+    width: calc(100% - 35px);
+    padding: 0px 10px;
+    h1{
+      font-family: numeralBold;
+      font-size: calc(100vw / 22);
+      color: #6f7074;
+      letter-spacing: -1px;
+    }
+    p{
+      font-family: numeralLight;
+      font-size: calc(100vw / 30);
+      color: #6f7074;
+      letter-spacing: -1px;
+      text-align: justify;
+    }
+  }
 }