Reza_ashrafi
3 years ago
parent
e48a24c180
commit
f92346b273
49 changed files with 483 additions and 166 deletions
@ -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; |
||||
|
||||
|
After Width: | Height: | Size: 964 B |
|
After Width: | Height: | Size: 917 B |
|
After Width: | Height: | Size: 940 B |
|
After Width: | Height: | Size: 1.1 KiB |
|
After Width: | Height: | Size: 6.1 KiB |
|
After Width: | Height: | Size: 8.9 KiB |
@ -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); |
||||
|
||||
@ -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] |
||||
} |
||||
@ -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 /> |
||||
</> |
||||
) |
||||
} |
||||
|
||||
Loading…
Reference in new issue