reza started mobile

temp
Reza_ashrafi 3 years ago
parent e48a24c180
commit f92346b273
  1. 15
      src/App.js
  2. 14
      src/App.scss
  3. 9
      src/assets/icons/ar-blue.svg
  4. 9
      src/assets/icons/ar-white.svg
  5. 8
      src/assets/icons/hamburger-blue.svg
  6. 12
      src/assets/icons/hamburger.svg
  7. 9
      src/assets/icons/qr-blue.svg
  8. 5
      src/assets/icons/qr-white.svg
  9. 85
      src/components/Navbar/index.js
  10. 1
      src/constants/size.scss
  11. 9
      src/index.css
  12. 4
      src/redux/actions/public.js
  13. 8
      src/redux/reducers/public.js
  14. 53
      src/router.js
  15. 2
      src/views/Home/Landscape/Page1/Book/index.js
  16. 39
      src/views/Home/Landscape/Page1/Lights/index.js
  17. 0
      src/views/Home/Landscape/Page1/Lights/index.scss
  18. 32
      src/views/Home/Landscape/Page1/index.js
  19. 2
      src/views/Home/Landscape/Page1/index.scss
  20. 2
      src/views/Home/Landscape/Page2/Mobile/AR/index.js
  21. 2
      src/views/Home/Landscape/Page2/Mobile/QrResult/Link/index.js
  22. 2
      src/views/Home/Landscape/Page2/Mobile/QrResult/PDF/index.js
  23. 0
      src/views/Home/Landscape/Page2/Mobile/QrResult/Voice/index.js
  24. 2
      src/views/Home/Landscape/Page2/Mobile/QrResult/index.js
  25. 0
      src/views/Home/Landscape/Page2/Mobile/QrScanner/index.js
  26. 4
      src/views/Home/Landscape/Page2/Mobile/Video/index.js
  27. 0
      src/views/Home/Landscape/Page2/Mobile/index.js
  28. 0
      src/views/Home/Landscape/Page2/Mobile/index.scss
  29. 8
      src/views/Home/Landscape/Page2/index.js
  30. 5
      src/views/Home/Landscape/Page2/index.scss
  31. 4
      src/views/Home/Landscape/Page3/index.js
  32. 8
      src/views/Home/Landscape/Page4/index.js
  33. 0
      src/views/Home/Landscape/Test/Question.js
  34. 4
      src/views/Home/Landscape/Test/index.js
  35. 0
      src/views/Home/Landscape/VideoTube/AddComment/index.js
  36. 0
      src/views/Home/Landscape/VideoTube/Attachments/index.js
  37. 0
      src/views/Home/Landscape/VideoTube/Book/index.js
  38. 0
      src/views/Home/Landscape/VideoTube/Comment/index.js
  39. 2
      src/views/Home/Landscape/VideoTube/LessonPlayList/index.js
  40. 12
      src/views/Home/Landscape/VideoTube/index.js
  41. 45
      src/views/Home/Landscape/index.js
  42. 33
      src/views/Home/Page1/Header/index.js
  43. 5
      src/views/Home/Page2/index.scss
  44. 11
      src/views/Home/Portrait/Private/index.js
  45. 93
      src/views/Home/Portrait/Public/Header/index.js
  46. 12
      src/views/Home/Portrait/Public/index.js
  47. 19
      src/views/Home/Portrait/index.js
  48. 48
      src/views/Home/index.js
  49. 12
      tailwind.config.js

@ -1,14 +1,15 @@
import './App.scss';
import { Provider } from 'react-redux';
import store from './redux/store';
import Router from './router';
import "./App.scss";
import { Provider } from "react-redux";
import store from "./redux/store";
import Router from "./router";
function App() {
function App({theme}) {
return (
<Provider store={store} >
<Router />
<Provider store={store}>
<Router />
</Provider>
);
}
export default App;

@ -1,9 +1,9 @@
@import "./constants/size.scss";
@import "./constants/colors.scss";
@import "./views/Home/Page1/index.scss";
@import "./views/Home/Page2/index.scss";
@import "./views/Home/Page2/Mobile/index";
@import "./views/Home/Page1/Header/index.scss";
@import "./views/Home/Landscape/Page1/index.scss";
@import "./views/Home/Landscape/Page2/index.scss";
@import "./views/Home/Landscape/Page2/Mobile/index";
@import "./views/Home/Landscape/Page1/Lights/index.scss";
*{
font-family: Regular;
@ -68,6 +68,12 @@
margin : 0px auto;
}
@media screen and (min-width : $xs){
.container{
max-width: 80%;
}
}
@media screen and (min-width : $lg){
.container{
max-width: 100%;

@ -0,0 +1,9 @@
<svg xmlns="http://www.w3.org/2000/svg" width="28.908" height="28.908" viewBox="0 0 28.908 28.908">
<g id="Group_419" data-name="Group 419" transform="translate(-11 -20.092)">
<path id="Path_1864" data-name="Path 1864" d="M1.694,1.694H6.775V0H0V6.775H1.694Zm0,0" transform="translate(11 20.092)" fill="#196ec0"/>
<path id="Path_1863" data-name="Path 1863" d="M392,0V1.694h5.081V6.775h1.694V0Zm0,0" transform="translate(-358.868 20.092)" fill="#196ec0"/>
<path id="Path_1862" data-name="Path 1862" d="M397.081,397.081H392v1.694h6.775V392h-1.694Zm0,0" transform="translate(-358.868 -349.775)" fill="#196ec0"/>
<path id="Path_1861" data-name="Path 1861" d="M1.694,392H0v6.775H6.775v-1.694H1.694Zm0,0" transform="translate(11 -349.775)" fill="#196ec0"/>
<text id="AR" transform="translate(26 39.092)" fill="#196ec0" font-size="14" font-family="IRANSansX-Light, IRANSansX" font-weight="300"><tspan x="-8.841" y="0">AR</tspan></text>
</g>
</svg>

After

Width:  |  Height:  |  Size: 964 B

@ -0,0 +1,9 @@
<svg xmlns="http://www.w3.org/2000/svg" width="19.71" height="19.71" viewBox="0 0 19.71 19.71">
<g id="Group_419" data-name="Group 419" transform="translate(0)">
<path id="Path_1864" data-name="Path 1864" d="M1.155,1.155H4.619V0H0V4.619H1.155Zm0,0" transform="translate(0)" fill="#fff"/>
<path id="Path_1863" data-name="Path 1863" d="M392,0V1.155h3.465V4.619h1.155V0Zm0,0" transform="translate(-376.91)" fill="#fff"/>
<path id="Path_1862" data-name="Path 1862" d="M395.465,395.465H392v1.155h4.62V392h-1.155Zm0,0" transform="translate(-376.91 -376.91)" fill="#fff"/>
<path id="Path_1861" data-name="Path 1861" d="M1.155,392H0v4.62H4.619v-1.155H1.155Zm0,0" transform="translate(0 -376.91)" fill="#fff"/>
<text id="AR" transform="translate(9.31 13.31)" fill="#fff" font-size="11" font-family="IRANSansX-DemiBold, IRANSansX" font-weight="300"><tspan x="-7.117" y="0">AR</tspan></text>
</g>
</svg>

After

Width:  |  Height:  |  Size: 917 B

@ -0,0 +1,8 @@
<svg xmlns="http://www.w3.org/2000/svg" width="31.567" height="28.996" viewBox="0 0 31.567 28.996">
<g id="textalign-justifycenter" transform="translate(-367.969 -188.141)">
<path id="Vector" d="M0,0H29.567" transform="translate(368.969 189.141)" fill="none" stroke="#196ec0" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
<path id="Vector-2" data-name="Vector" d="M0,0H29.567" transform="translate(368.969 198.14)" fill="none" stroke="#196ec0" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
<path id="Vector-3" data-name="Vector" d="M0,0H29.567" transform="translate(368.969 207.139)" fill="none" stroke="#196ec0" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
<path id="Vector-4" data-name="Vector" d="M0,0H29.567" transform="translate(368.969 216.137)" fill="none" stroke="#196ec0" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 940 B

@ -0,0 +1,12 @@
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="29.212" viewBox="0 0 32 29.212">
<g id="Group_1796" data-name="Group 1796" transform="translate(-364 -20)">
<g id="vuesax_linear_textalign-justifycenter" data-name="vuesax/linear/textalign-justifycenter" transform="translate(-3.969 -168.141)">
<g id="textalign-justifycenter" transform="translate(368.969 189.141)">
<path id="Vector" d="M0,0H30" transform="translate(0 9.071)" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
<path id="Vector-2" data-name="Vector" d="M0,0H30" transform="translate(0 18.141)" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
<path id="Vector-3" data-name="Vector" d="M0,0H30" transform="translate(0 27.212)" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
</g>
</g>
<path id="Vector-4" data-name="Vector" d="M0,0H30" transform="translate(365 21)" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 1.1 KiB

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 6.1 KiB

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 8.9 KiB

@ -1,28 +1,37 @@
import React from "react";
import { Link } from "react-router-dom";
import { connect } from "react-redux";
import _ from "lodash";
import grayBagIcon from "../../assets/icons/gray-bag.svg";
import graySearchIcon from "../../assets/icons/gray-search.svg";
import logoIcon from '../../assets/icons/logo.svg';
import logoIcon from "../../assets/icons/logo.svg";
import qrIcon from "../../assets/icons/qr-white.svg";
import qrBlueIcon from "../../assets/icons/qr-blue.svg";
import arIcon from "../../assets/icons/ar-white.svg";
import arBlueIcon from "../../assets/icons/ar-blue.svg";
import hamburgerIcon from "../../assets/icons/hamburger.svg";
import hamburgerBlueIcon from "../../assets/icons/hamburger-blue.svg";
export default function Navbar({ pages }) {
function Navbar({ pages, isDark, isLogin }) {
return (
<div className="z-50 flex flex-1 flex-row fixed left-0 top-0 justify-between w-full bg-opacity-20 shadow-sm bg-white backdrop-filter backdrop-blur-md lg:px-5 xl:px-10">
<div className="flex flex-row items-center">
<div className="z-50 flex flex-1 flex-row fixed left-0 top-0 justify-between w-full bg-opacity-20 lg:shadow-sm lg:backdrop-filter lg:backdrop-blur-md lg:px-5 xl:px-10">
{/* landscape start */}
<div className="flex-row items-center hidden lg:flex">
<Link to="/">
{/* <strong className="ml-3 text-primary lg:text-md xl:text-xl">
Desing system
</strong> */}
<img src={logoIcon} alt="" className="w-9" />
</Link>
<ul className="list-none p-0 m-0 flex flex-row">
{pages.map((page, i) => (
<li key={i} className="lg:px-6 lg:text-sm xl:px-8 xl:text-md 2xl:px-10 py-4 text-primary ">
<li
key={i}
className="lg:px-6 lg:text-sm xl:px-8 xl:text-md 2xl:px-10 py-4 text-primary "
>
<Link to={page.link}>{page.name}</Link>
</li>
))}
</ul>
</div>
<div className="flex flex-1 flex-row items-center py-4 justify-end">
<div className="flex-1 flex-row items-center py-4 justify-end hidden lg:flex">
<button className="border-0 outline-none">
<img className="w-7 h-7" src={graySearchIcon} alt="" />
</button>
@ -30,13 +39,69 @@ export default function Navbar({ pages }) {
<img className="w-7 h-7" src={grayBagIcon} alt="" />
</button>
<button className="rounded-sm bg-gray mr-10 bg-blueC0 px-6 py-0.5 text-sm leading-7 text-white">
ثبت نام
ثبت نام
</button>
</div>
{/* landscape end */}
{/* portrait start */}
<div className="w-full h-full relative flex flex-row items-center justify-between lg:hidden pt-6 pb-2 px-4">
<div className="relative">
<span className="w-2.5 h-2.5 rounded-full bg-redFF1 absolute -left-1 -top-1 animate-bounce"></span>
<img
src={isDark ? hamburgerIcon : hamburgerBlueIcon}
alt=""
className="w-7 h-7.5"
/>
</div>
<Link
to="/"
className="absolute left-1/2 transform -translate-y-1/2 top-1/2 -translate-x-1/2"
>
<img src={logoIcon} className="w-6 h-8" />
</Link>
{isLogin && (
<div className="flex flex-row items-center">
<Link
to="/qr"
className={_.join(
["rounded-sm", isDark ? "bg-gray36 ml-2" : "ml-1.5"],
" "
)}
>
<img
src={isDark ? qrIcon : qrBlueIcon}
alt=""
className={_.join([isDark ? "w-5" : "w-7"], " ")}
/>
</Link>
<Link
to="/ar"
className={_.join(
["rounded-sm", isDark ? "bg-gray36 ml-2" : "ml-1.5"],
" "
)}
>
<img
src={isDark ? arIcon : arBlueIcon}
alt=""
className={_.join([isDark ? "w-5" : "w-7"], " ")}
/>
</Link>
</div>
)}
</div>
{/* portrait end */}
</div>
);
}
const mapStateToProps = (state) => ({
isDark: state.publicApi.isDark,
isLogin: state.user.status,
});
export default connect(mapStateToProps, {})(Navbar);
Navbar.defaultProps = {
pages: [
{

@ -1,3 +1,4 @@
$xs : 320px;
$sm : 640px;
$md : 768px;
$lg : 1024px;

@ -2,6 +2,15 @@
@tailwind components;
@tailwind utilities;
.bg-dark {
background: rgb(44, 73, 100);
background: radial-gradient(
circle,
rgba(44, 73, 100, 1) 0%,
rgba(6, 27, 48, 1) 100%
);
}
.rtl {
direction: rtl;
}

@ -1,7 +1,7 @@
import proxy from "../proxy";
const publicApi = {
setTheme: (data) => async (dispatch) =>
await dispatch({ type: "public/setTheme", data: data }),
setIsDark: (data) => async (dispatch) =>
await dispatch({ type: "public/setIsDark", data: data }),
getHomeData: (data) => async (dispatch) =>
await proxy.get("public/homePage", data, { dispatch }),

@ -1,7 +1,7 @@
import location from "../../utils/location";
const initialState = {
theme: localStorage.getItem("theme") || "light",
isDark: localStorage.getItem("isDark") || false,
homeData: [],
newProducts: [],
levels: [],
@ -70,9 +70,9 @@ const grades = [
export default function publicApi(state = initialState, action) {
let { type, data } = action;
switch (type) {
case "public/setTheme":
localStorage.setItem("theme", data);
return { ...state, location: false, error: null, theme: data };
case "public/setIsDark":
localStorage.setItem("isDark", data);
return { ...state, location: false, error: null, isDark: data };
case "active/video":
return {
...state,

@ -1,23 +1,44 @@
import React from "react";
import { BrowserRouter, Routes, Route } from "react-router-dom";
import { connect } from "react-redux";
import _ from "lodash";
import Home from "./views/Home";
import VideoTube from "./views/Home/VideoTube";
// import VideoTube from "./views/Home/VideoTube";
export default function router() {
function Router({ isDark }) {
return (
<BrowserRouter>
<Routes>
<Route path="/" element={<Home />} />
<Route path="/vod" element={<VideoTube />} />
<Route
path="*"
element={
<main>
<h1>No matches routes.</h1>
</main>
}
/>
</Routes>
</BrowserRouter>
<div className={_.join([isDark ? "dark" : ""], " ")}>
<div
className={_.join(
[
"min-h-screen min-w-screen rtl overflow-x-hidden",
isDark ? "bg-dark" : "bg-white",
],
" "
)}
>
<BrowserRouter>
<Routes>
<Route path="/" element={<Home />} />
{/* <Route path="/vod" element={<VideoTube />} /> */}
<Route
path="*"
element={
<main>
<h1>No matches routes.</h1>
</main>
}
/>
</Routes>
</BrowserRouter>
</div>
</div>
);
}
const mapStateToProps = (state) => ({
isDark: state.publicApi.isDark,
});
export default connect(mapStateToProps, {})(Router);

@ -5,7 +5,7 @@ import { Link } from "react-router-dom";
export default function Book({ book }) {
return (
<Link to={`{/products/${book.name}}`} className="flex group relative cursor-pointer">
<img src={book.imageUrl} alt={book.name} />
<img src={book.imageUrl} alt={book.name} className="w-40 lg:w-auto" />
<button className="py-1.5 px-5 border absolute border-white rounded-2xl group-hover:opacity-100 bottom-10 opacity-0 transition-all left-1/2 transform -translate-x-1/2 bg-blue90 bg-opacity-90 text-white text-sm">
مشاهده و خرید
</button>

@ -0,0 +1,39 @@
import React, { useEffect, useState } from "react";
import projectorIcon from "../../../../../assets/icons/projector.svg";
import lightIcon from "../../../../../assets/icons/light.svg";
import _ from "lodash";
export default function Lights({ degrees}) {
return (
<div className="w-full">
<header className="container hidden flex-row justify-between z-20 transform lg:-translate-y-24">
{degrees.map((light, index) => (
<Light degree={light} key={index} />
))}
</header>
</div>
);
}
const Light = ({ degree }) => {
return (
<div
className="flex flex-col items-center relative"
style={{ transform: `rotate(${degree}deg)` }}
draggable={false}
>
<img src={projectorIcon} alt="" className="w-6 h-6 lg:w-12 lg:h-12" draggable={false} />
<img
draggable={false}
src={lightIcon}
alt=""
className={_.join(["absolute z-50 light-animation opacity-50"], " ")}
style={{ transform: `scale(6) translateY(24%)`, pointerEvents: "none" }}
/>
</div>
);
};
Lights.defaultProps = {
degrees : [32, 17, 0, -17, -32]
}

@ -2,23 +2,23 @@ import React, { useState, useEffect } from "react";
import { Link } from "react-router-dom";
import { Carousel } from "@trendyol-js/react-carousel";
import Book from "./Book";
import FloatWithMouse from "../../../components/FloatWidthMouse";
import Header from "./Header";
import scroll from "../../../utils/scroll";
import FloatWithMouse from "../../../../components/FloatWidthMouse";
import Lights from "./Lights";
import scroll from "../../../../utils/scroll";
import _ from "lodash";
import olum1Image from "../../../assets/images/olum-1.svg";
import olum2Image from "../../../assets/images/olum-2.svg";
import olum4Image from "../../../assets/images/olum-4.svg";
import olum7Image from "../../../assets/images/olum-7.svg";
import zist11Image from "../../../assets/images/zist-11.svg";
import arrow from "../../../assets/icons/slider-arrow.svg";
import flatFlower from "../../../assets/icons/flat-flower-white.svg";
import line from "../../../assets/icons/line.svg";
import arrowBottomIcon from "../../../assets/icons/arrows-bottom-blue.svg";
import sheffImage from "../../../assets/images/sheff.svg";
import arrowLeftWhite from "../../../assets/icons/arrow-left-white.svg";
import olum1Image from "../../../../assets/images/olum-1.svg";
import olum2Image from "../../../../assets/images/olum-2.svg";
import olum4Image from "../../../../assets/images/olum-4.svg";
import olum7Image from "../../../../assets/images/olum-7.svg";
import zist11Image from "../../../../assets/images/zist-11.svg";
import arrow from "../../../../assets/icons/slider-arrow.svg";
import flatFlower from "../../../../assets/icons/flat-flower-white.svg";
import line from "../../../../assets/icons/line.svg";
import arrowBottomIcon from "../../../../assets/icons/arrows-bottom-blue.svg";
import sheffImage from "../../../../assets/images/sheff.svg";
import arrowLeftWhite from "../../../../assets/icons/arrow-left-white.svg";
export default function Page1({ list, page }) {
const [show, setShow] = useState(null);
@ -51,14 +51,14 @@ export default function Page1({ list, page }) {
<div
className={_.join(
[
"home-page1 w-full flex flex-col justify-center items-center h-screen fixed left-0",
"home-page1 w-full flex flex-col justify-center items-center h-screen fixed left-0 px-6",
],
" "
)}
style={{ top: top }}
>
<FloatWithMouse />
<Header />
<Lights />
<img
src={flatFlower}
alt=""

@ -16,7 +16,7 @@
hsla(221, 100%, 87%, 1) 100%
);
&__image {
background-image: url("../../../assets/images/home-page1.svg");
background-image: url("../../../../assets/images/home-page1.svg");
background-repeat: no-repeat;
background-size: contain;
background-color: transparent;

@ -1,5 +1,5 @@
import React from 'react';
import ARImage from '../../../../../assets/images/ar.jpg';
import ARImage from '../../../../../../assets/images/ar.jpg';
export default function AR() {

@ -1,5 +1,5 @@
import React from "react";
import linkIcon from "../../../../../../assets/icons/link.svg";
import linkIcon from "../../../../../../../assets/icons/link.svg";
export default function PDF({ link }) {
return (

@ -1,5 +1,5 @@
import React from "react";
import pdfIcon from '../../../../../../assets/icons/pdf.svg';
import pdfIcon from '../../../../../../../assets/icons/pdf.svg';
export default function PDF({ pdf }) {
return (

@ -1,5 +1,5 @@
import React, { useState } from "react";
import olum2Image from "../../../../../assets/images/olum-2.svg";
import olum2Image from "../../../../../../assets/images/olum-2.svg";
import { connect } from "react-redux";
import _ from "lodash";
import PDF from "./PDF";

@ -1,7 +1,7 @@
import React, { useState, useEffect } from "react";
import _ from "lodash";
import ARImage from "../../../../../assets/images/ar.jpg";
import scroll from "../../../../../utils/scroll";
import ARImage from "../../../../../../assets/images/ar.jpg";
import scroll from "../../../../../../utils/scroll";
export default function Video({ selectedVideo, videoPosition }) {
const height = window.innerHeight;

@ -1,10 +1,10 @@
import React, { useState, useEffect } from "react";
import _ from "lodash";
import scroll from "../../../utils/scroll";
import scroll from "../../../../utils/scroll";
import Mobile from "./Mobile";
import qrImage from "../../../assets/images/qrImage.png";
import rightBg from "../../../assets/images/page-bg.png";
import leftBg from "../../../assets/images/page-bg-1.png";
import qrImage from "../../../../assets/images/qrImage.png";
import rightBg from "../../../../assets/images/page-bg.png";
import leftBg from "../../../../assets/images/page-bg-1.png";
export default function Page2({ list, page, autoPlay }) {
const height = window.innerHeight;

@ -0,0 +1,5 @@
.home-page2{
background-image: url(../../../../assets/images/woody-background.svg);
background-repeat: no-repeat;
background-size: cover;
}

@ -1,7 +1,7 @@
import React, { useState, useEffect } from "react";
import _ from "lodash";
import scroll from "../../../utils/scroll";
import testResultImage from "../../../assets/images/test-result.svg";
import scroll from "../../../../utils/scroll";
import testResultImage from "../../../../assets/images/test-result.svg";
export default function Page3({ list, page }) {

@ -1,9 +1,9 @@
import React, { useState, useEffect } from "react";
import _ from "lodash";
import scroll from "../../../utils/scroll";
import bgImage from "../../../assets/images/page5-bg.svg";
import bazarImage from "../../../assets/images/bazar.svg";
import appStoreImage from "../../../assets/images/app-store.svg";
import scroll from "../../../../utils/scroll";
import bgImage from "../../../../assets/images/page5-bg.svg";
import bazarImage from "../../../../assets/images/bazar.svg";
import appStoreImage from "../../../../assets/images/app-store.svg";
export default function Page4({ list, page }) {
const [top, setTop] = useState(window.innerHeight);

@ -1,8 +1,8 @@
import React, { useEffect, useState } from "react";
import _ from "lodash";
import timerIcon from "../../../assets/icons/timer.svg";
import timerIcon from "../../../../assets/icons/timer.svg";
import QuestionBox from "./Question";
import scroll from "../../../utils/scroll";
import scroll from "../../../../utils/scroll";
export default function Test({ title, duration, questions }) {
const [translateY, setTranslateY] = useState(0);

@ -1,6 +1,6 @@
import React, { useEffect } from "react";
import { connect } from "react-redux";
import { publicApi } from "../../../../redux/actions";
import { publicApi } from "../../../../../redux/actions";
import { Link } from "react-router-dom";
import _ from "lodash";

@ -1,18 +1,18 @@
import React, { useState, useEffect, useRef } from "react";
import Navbar from "../../../components/Navbar";
import Navbar from "../../../../components/Navbar";
import LessonPlayList from "./LessonPlayList";
import Attachments from "./Attachments";
import Book from "./Book";
import Comment from "./Comment";
import AddComment from "./AddComment";
import Video from "../../../components/JolPlayer";
import Video from "../../../../components/JolPlayer";
import Test from "../Test";
import listIcon from "../../../assets/icons/list.png";
import listIcon from "../../../../assets/icons/list.png";
import { connect } from "react-redux";
import _ from "lodash";
import scroll from "../../../utils/scroll.js";
import location from "../../../utils/location.js";
import { book, publicApi } from "../../../redux/actions";
import scroll from "../../../../utils/scroll.js";
import location from "../../../../utils/location.js";
import { book, publicApi } from "../../../../redux/actions";
// import Loader from "../../components/Loader";
function VodTube({

@ -0,0 +1,45 @@
import React, { useEffect, useState } from "react";
import Page1 from "./Page1";
import Page2 from "./Page2";
import Page3 from "./Page3";
import Page4 from "./Page4";
import Dots from '../../../components/Dots';
import VideoTube from "./VideoTube";
export default function Home() {
const [autoPlay, setAutoPlay] = useState(false);
useEffect(() => {
window.addEventListener("scroll", () => {
if (window.scrollY > 3 * window.innerHeight) {
setAutoPlay(() => true);
} else {
setAutoPlay(() => false);
}
if (
!JSON.parse(localStorage.getItem("joiRect")) &&
window.scrollY > 1000
) {
localStorage.setItem(
"joiRect",
JSON.stringify(
document.getElementById("video-joi").getBoundingClientRect()
)
);
}
});
}, []);
return (
<div
className=" flex-col bg-white relative w-full rtl hidden lg:flex"
style={{ height: "850vh" }}
>
<Dots />
<Page1 page={1} />
<Page2 page={2} autoPlay={autoPlay} />
<VideoTube page={3} autoPlay={autoPlay} />
<Page3 page={4} />
<Page4 page={5} />
</div>
);
}

@ -1,33 +0,0 @@
import React, { useEffect, useState } from "react";
import projectorIcon from "../../../../assets/icons/projector.svg";
import lightIcon from "../../../../assets/icons/light.svg";
import _ from "lodash";
export default function Header() {
return (
<header className="container flex flex-row justify-between z-20 transform -translate-y-24">
{[32, 17, 0, -17, -32].map((light, index) => (
<Light degree={light} key={index} />
))}
</header>
);
}
const Light = ({ degree }) => {
return (
<div
className="flex flex-col items-center relative"
style={{ transform: `rotate(${degree}deg)` }}
draggable={false}
>
<img src={projectorIcon} alt="" className="w-12 h-12" draggable={false} />
<img
draggable={false}
src={lightIcon}
alt=""
className={_.join(["absolute z-50 light-animation opacity-50"], " ")}
style={{ transform: `scale(6) translateY(24%)`, pointerEvents : 'none' }}
/>
</div>
);
};

@ -1,5 +0,0 @@
.home-page2{
background-image: url(../../../assets/images/woody-background.svg);
background-repeat: no-repeat;
background-size: cover;
}

@ -0,0 +1,11 @@
import React from 'react'
function Private() {
return (
<div>
</div>
)
}
export default Private;

@ -0,0 +1,93 @@
import React, { useState } from "react";
import { Link } from "react-router-dom";
import { Carousel } from "@trendyol-js/react-carousel";
import Book from "../../../Landscape/Page1/Book";
import Lights from "../../../Landscape/Page1/Lights";
import arrow from "../../../../../assets/icons/slider-arrow.svg";
import olum1Image from "../../../../../assets/images/olum-1.svg";
import olum2Image from "../../../../../assets/images/olum-2.svg";
import olum4Image from "../../../../../assets/images/olum-4.svg";
import olum7Image from "../../../../../assets/images/olum-7.svg";
import zist11Image from "../../../../../assets/images/zist-11.svg";
function Header({ list }) {
const [show, setShow] = useState(2);
return (
<div
className="flex flex-col w-full rounded-md items-center justify-center"
style={{
height: "calc(100vh * 6 / 7)",
background:
"linear-gradient(135deg, rgba(147,176,255,0.3435749299719888) 0%, rgba(183,199,242,0.6264880952380952) 15%, rgba(67,207,227,0.27914915966386555) 68%, rgba(226,236,233,0.68531162464986) 100%)",
}}
>
<Lights degrees={[0,0]} />
<div className="flex flex-col lg:px-8">
<div className="container relative z-10 px-4" style={{ direction: "ltr" }}>
<Carousel
show={show}
slide={1}
swiping={true}
// useArrowKeys={true}
transition={0.5}
rightArrow={
<img
className="absolute top-1/2 transform -translate-y-1/2 cursor-pointer"
src={arrow}
alt=""
/>
}
leftArrow={
<img
className="absolute top-1/2 transform -translate-y-1/2 -translate-x-5 cursor-pointer -rotate-180"
src={arrow}
alt=""
/>
}
>
{list.map((book, index) => (
<Book book={book} key={index} />
))}
</Carousel>
</div>
</div>
</div>
);
}
export default Header;
Header.defaultProps = {
list: [
{
name: "زیست یازدهم",
imageUrl: zist11Image,
},
{
name: "علوم دوم",
imageUrl: olum2Image,
},
{
name: "علوم اول",
imageUrl: olum1Image,
},
{
name: "علوم هفتم",
imageUrl: olum7Image,
},
{
name: "علوم چهارم",
imageUrl: olum4Image,
},
{
name: "علوم چهارم",
imageUrl: olum4Image,
},
{
name: "علوم چهارم",
imageUrl: olum4Image,
},
],
}

@ -0,0 +1,12 @@
import React from 'react';
import Header from './Header';
function Public() {
return (
<div className="w-full flex-1 px-2 pt-2">
<Header />
</div>
)
}
export default Public;

@ -0,0 +1,19 @@
import React from "react";
import { connect } from "react-redux";
import Public from "./Public";
import Private from "./Private";
function Portrait({ isLogin }) {
return (
<div className="w-full min-h-screen lg:hidden">
{isLogin ? <Private /> : <Public />}
</div>
);
}
const mapStateToProps = (state) => ({
isLogin: state.user.status,
});
export default connect(mapStateToProps, {})(Portrait);

@ -1,47 +1,15 @@
import React, { useEffect, useState } from "react";
import React from 'react';
import Landscape from './Landscape';
import Portrait from './Portrait';
import Navbar from "../../components/Navbar";
import Page1 from "./Page1";
import Page2 from "./Page2";
import Page3 from "./Page3";
import Page4 from "./Page4";
import Dots from '../../components/Dots';
import VideoTube from "./VideoTube";
export default function Home() {
const [autoPlay, setAutoPlay] = useState(false);
useEffect(() => {
window.addEventListener("scroll", () => {
if (window.scrollY > 3 * window.innerHeight) {
setAutoPlay(() => true);
} else {
setAutoPlay(() => false);
}
if (
!JSON.parse(localStorage.getItem("joiRect")) &&
window.scrollY > 1000
) {
localStorage.setItem(
"joiRect",
JSON.stringify(
document.getElementById("video-joi").getBoundingClientRect()
)
);
}
});
}, []);
return (
<div
className="flex flex-col bg-white relative w-full rtl"
style={{ height: "850vh" }}
>
<Dots />
<>
<Navbar />
<Page1 page={1} />
<Page2 page={2} autoPlay={autoPlay} />
<VideoTube page={3} autoPlay={autoPlay} />
<Page3 page={4} />
<Page4 page={5} />
</div>
);
<Portrait />
<Landscape />
</>
)
}

@ -9,7 +9,9 @@ module.exports = {
blue90: "#235A90",
blueFF : '#E8FCFF',
redFF : '#FFE6E6',
yellow2 : '#FDFFDA'
redFF1 : '#FF2020',
yellow2 : '#FDFFDA',
gray36 : '#363636'
}),
textColor : (theme) => ({
...theme("colors"),
@ -26,7 +28,13 @@ module.exports = {
...theme("colors"),
blueC0: "#196EC0",
blueFE : "#C1E0FE"
})
}),
extend : {
borderRadius: {
'sm': '3px',
}
}
},
variants: {
extend: {},

Loading…
Cancel
Save