Reza_ashrafi
3 years ago
parent
e48a24c180
commit
f92346b273
49 changed files with 483 additions and 166 deletions
|
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 |
@ -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 React from 'react'; |
||||||
import ARImage from '../../../../../assets/images/ar.jpg'; |
import ARImage from '../../../../../../assets/images/ar.jpg'; |
||||||
|
|
||||||
|
|
||||||
export default function AR() { |
export default function AR() { |
||||||
@ -1,5 +1,5 @@ |
|||||||
import React from "react"; |
import React from "react"; |
||||||
import linkIcon from "../../../../../../assets/icons/link.svg"; |
import linkIcon from "../../../../../../../assets/icons/link.svg"; |
||||||
|
|
||||||
export default function PDF({ link }) { |
export default function PDF({ link }) { |
||||||
return ( |
return ( |
||||||
@ -1,5 +1,5 @@ |
|||||||
import React from "react"; |
import React from "react"; |
||||||
import pdfIcon from '../../../../../../assets/icons/pdf.svg'; |
import pdfIcon from '../../../../../../../assets/icons/pdf.svg'; |
||||||
|
|
||||||
export default function PDF({ pdf }) { |
export default function PDF({ pdf }) { |
||||||
return ( |
return ( |
||||||
@ -1,5 +1,5 @@ |
|||||||
import React, { useState } from "react"; |
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 { connect } from "react-redux"; |
||||||
import _ from "lodash"; |
import _ from "lodash"; |
||||||
import PDF from "./PDF"; |
import PDF from "./PDF"; |
||||||
@ -1,7 +1,7 @@ |
|||||||
import React, { useState, useEffect } from "react"; |
import React, { useState, useEffect } from "react"; |
||||||
import _ from "lodash"; |
import _ from "lodash"; |
||||||
import ARImage from "../../../../../assets/images/ar.jpg"; |
import ARImage from "../../../../../../assets/images/ar.jpg"; |
||||||
import scroll from "../../../../../utils/scroll"; |
import scroll from "../../../../../../utils/scroll"; |
||||||
|
|
||||||
export default function Video({ selectedVideo, videoPosition }) { |
export default function Video({ selectedVideo, videoPosition }) { |
||||||
const height = window.innerHeight; |
const height = window.innerHeight; |
||||||
@ -1,10 +1,10 @@ |
|||||||
import React, { useState, useEffect } from "react"; |
import React, { useState, useEffect } from "react"; |
||||||
import _ from "lodash"; |
import _ from "lodash"; |
||||||
import scroll from "../../../utils/scroll"; |
import scroll from "../../../../utils/scroll"; |
||||||
import Mobile from "./Mobile"; |
import Mobile from "./Mobile"; |
||||||
import qrImage from "../../../assets/images/qrImage.png"; |
import qrImage from "../../../../assets/images/qrImage.png"; |
||||||
import rightBg from "../../../assets/images/page-bg.png"; |
import rightBg from "../../../../assets/images/page-bg.png"; |
||||||
import leftBg from "../../../assets/images/page-bg-1.png"; |
import leftBg from "../../../../assets/images/page-bg-1.png"; |
||||||
|
|
||||||
export default function Page2({ list, page, autoPlay }) { |
export default function Page2({ list, page, autoPlay }) { |
||||||
const height = window.innerHeight; |
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 React, { useState, useEffect } from "react"; |
||||||
import _ from "lodash"; |
import _ from "lodash"; |
||||||
import scroll from "../../../utils/scroll"; |
import scroll from "../../../../utils/scroll"; |
||||||
import testResultImage from "../../../assets/images/test-result.svg"; |
import testResultImage from "../../../../assets/images/test-result.svg"; |
||||||
|
|
||||||
|
|
||||||
export default function Page3({ list, page }) { |
export default function Page3({ list, page }) { |
||||||
@ -1,9 +1,9 @@ |
|||||||
import React, { useState, useEffect } from "react"; |
import React, { useState, useEffect } from "react"; |
||||||
import _ from "lodash"; |
import _ from "lodash"; |
||||||
import scroll from "../../../utils/scroll"; |
import scroll from "../../../../utils/scroll"; |
||||||
import bgImage from "../../../assets/images/page5-bg.svg"; |
import bgImage from "../../../../assets/images/page5-bg.svg"; |
||||||
import bazarImage from "../../../assets/images/bazar.svg"; |
import bazarImage from "../../../../assets/images/bazar.svg"; |
||||||
import appStoreImage from "../../../assets/images/app-store.svg"; |
import appStoreImage from "../../../../assets/images/app-store.svg"; |
||||||
|
|
||||||
export default function Page4({ list, page }) { |
export default function Page4({ list, page }) { |
||||||
const [top, setTop] = useState(window.innerHeight); |
const [top, setTop] = useState(window.innerHeight); |
||||||
@ -1,8 +1,8 @@ |
|||||||
import React, { useEffect, useState } from "react"; |
import React, { useEffect, useState } from "react"; |
||||||
import _ from "lodash"; |
import _ from "lodash"; |
||||||
import timerIcon from "../../../assets/icons/timer.svg"; |
import timerIcon from "../../../../assets/icons/timer.svg"; |
||||||
import QuestionBox from "./Question"; |
import QuestionBox from "./Question"; |
||||||
import scroll from "../../../utils/scroll"; |
import scroll from "../../../../utils/scroll"; |
||||||
|
|
||||||
export default function Test({ title, duration, questions }) { |
export default function Test({ title, duration, questions }) { |
||||||
const [translateY, setTranslateY] = useState(0); |
const [translateY, setTranslateY] = useState(0); |
||||||
@ -1,6 +1,6 @@ |
|||||||
import React, { useEffect } from "react"; |
import React, { useEffect } from "react"; |
||||||
import { connect } from "react-redux"; |
import { connect } from "react-redux"; |
||||||
import { publicApi } from "../../../../redux/actions"; |
import { publicApi } from "../../../../../redux/actions"; |
||||||
import { Link } from "react-router-dom"; |
import { Link } from "react-router-dom"; |
||||||
import _ from "lodash"; |
import _ from "lodash"; |
||||||
|
|
||||||
@ -1,18 +1,18 @@ |
|||||||
import React, { useState, useEffect, useRef } from "react"; |
import React, { useState, useEffect, useRef } from "react"; |
||||||
import Navbar from "../../../components/Navbar"; |
import Navbar from "../../../../components/Navbar"; |
||||||
import LessonPlayList from "./LessonPlayList"; |
import LessonPlayList from "./LessonPlayList"; |
||||||
import Attachments from "./Attachments"; |
import Attachments from "./Attachments"; |
||||||
import Book from "./Book"; |
import Book from "./Book"; |
||||||
import Comment from "./Comment"; |
import Comment from "./Comment"; |
||||||
import AddComment from "./AddComment"; |
import AddComment from "./AddComment"; |
||||||
import Video from "../../../components/JolPlayer"; |
import Video from "../../../../components/JolPlayer"; |
||||||
import Test from "../Test"; |
import Test from "../Test"; |
||||||
import listIcon from "../../../assets/icons/list.png"; |
import listIcon from "../../../../assets/icons/list.png"; |
||||||
import { connect } from "react-redux"; |
import { connect } from "react-redux"; |
||||||
import _ from "lodash"; |
import _ from "lodash"; |
||||||
import scroll from "../../../utils/scroll.js"; |
import scroll from "../../../../utils/scroll.js"; |
||||||
import location from "../../../utils/location.js"; |
import location from "../../../../utils/location.js"; |
||||||
import { book, publicApi } from "../../../redux/actions"; |
import { book, publicApi } from "../../../../redux/actions"; |
||||||
// import Loader from "../../components/Loader";
|
// import Loader from "../../components/Loader";
|
||||||
|
|
||||||
function VodTube({ |
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 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() { |
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 ( |
return ( |
||||||
<div |
<> |
||||||
className="flex flex-col bg-white relative w-full rtl" |
|
||||||
style={{ height: "850vh" }} |
|
||||||
> |
|
||||||
<Dots /> |
|
||||||
<Navbar /> |
<Navbar /> |
||||||
<Page1 page={1} /> |
<Portrait /> |
||||||
<Page2 page={2} autoPlay={autoPlay} /> |
<Landscape /> |
||||||
<VideoTube page={3} autoPlay={autoPlay} /> |
</> |
||||||
<Page3 page={4} /> |
) |
||||||
<Page4 page={5} /> |
|
||||||
</div> |
|
||||||
); |
|
||||||
} |
} |
||||||
|
|||||||
Loading…
Reference in new issue