Danovin
/
application_17
5
0
Fork 0
Code Issues 3 Pull Requests Projects Releases Wiki Activity

reza added some option

Browse Source
temp
Reza_ashrafi 3 years ago
parent 0fe08f3825
commit 1d113815e7
13 changed files with 351 additions and 257 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. BIN
      src/assets/images/ar.jpg
  2. 50
      src/components/JolPlayer/index.js
  3. 123
      src/redux/reducers/public.js
  4. 38
      src/utils/scroll.js
  5. 33
      src/views/Home/Page1/index.js
  6. 11
      src/views/Home/Page2/Mobile/AR/index.js
  7. 72
      src/views/Home/Page2/Mobile/QrResult/index.js
  8. 36
      src/views/Home/Page2/Mobile/QrScanner/index.js
  9. 162
      src/views/Home/Page2/Mobile/index.js
  10. 57
      src/views/Home/Page2/index.js
  11. 17
      src/views/Home/Test/index.js
  12. 6
      src/views/Home/index.js
  13. 3
      tailwind.config.js

BIN
src/assets/images/ar.jpg
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 27 KiB

50
src/components/JolPlayer/index.js
Unescape View File

@ -4,36 +4,36 @@ import JoLPlayer from "jol-player";
function Video({ fileIds, posterId, autoPlay }) {
const videoRef = useRef(null);
const [flag, setFlag] = useState(false);
useEffect(() => {
window.addEventListener("scroll", () => {
if (window.scrollY > 500) {
if (!localStorage.getItem("joiRect")) {
const jolRect = document
.getElementById("video-joi")
.getBoundingClientRect();
localStorage.setItem("joiRect", JSON.stringify(jolRect));
}
}
});
}, []);
// useEffect(() => {
// window.addEventListener("scroll", () => {
// if (window.scrollY > 500) {
// if (!localStorage.getItem("joiRect")) {
// const jolRect = document
// .getElementById("video-joi")
// .getBoundingClientRect();
// localStorage.setItem("joiRect", JSON.stringify(jolRect));
// }
// }
// });
// }, []);
const videoMethod = (status) => {
if (status === "play") {
videoRef.current.play();
setFlag(() => true);
}
};
// const videoMethod = (status) => {
// if (status === "play") {
// videoRef.current.play();
// setFlag(() => true);
// }
// };
// useEffect(() => {
// console.log(`videoRef.current`, videoRef.current);
// }, [videoRef.current]);
useEffect(() => {
if (window.scrollY > 3 * window.innerHeight) {
if (autoPlay && !flag) {
videoMethod("play");
}
}
}, [autoPlay]);
// useEffect(() => {
// if (window.scrollY > 3 * window.innerHeight) {
// if (autoPlay && !flag) {
// videoMethod("play");
// }
// }
// }, [autoPlay]);
return (

123
src/redux/reducers/public.js
Unescape View File

@ -1,7 +1,7 @@
import location from '../../utils/location';
import location from "../../utils/location";
const initialState = {
theme : localStorage.getItem('theme') || 'light',
theme: localStorage.getItem("theme") || "light",
homeData: [],
newProducts: [],
levels: [],
@ -35,6 +35,21 @@ const initialState = {
activeCategory: null,
categories: null,
bookSection: null,
grades: {
0: "پیش دبستان",
1: "اول",
2: "دوم",
3: "سوم",
4: "چهارم",
5: "پنجم",
6: "ششم",
7: "هفتم",
8: "هشتم",
9: "نهم",
10: "دهم",
11: "یازدهم",
12: "دوازدهم",
},
};
const grades = [
@ -57,7 +72,7 @@ export default function publicApi(state = initialState, action) {
switch (type) {
case "public/setTheme":
localStorage.setItem("theme", data);
return { ...state, location: false, error : null, theme: data };
return { ...state, location: false, error: null, theme: data };
case "active/video":
return {
...state,
@ -79,15 +94,13 @@ export default function publicApi(state = initialState, action) {
loading: false,
bookSection: data,
error: null,
selectedVideo: data.vods?.filter((item) => item.id !== videoId)[0]
selectedVideo: data.vods?.filter((item) => item.id !== videoId)[0],
};
case "public/vod/bookCourse":
let allCats;
allCats = Array.from(
new Set(
data.vods.map((item) => item.categoryId && item.categoryId)
)
new Set(data.vods.map((item) => item.categoryId && item.categoryId))
);
return {
...state,
@ -102,7 +115,9 @@ export default function publicApi(state = initialState, action) {
categories: allCats.map((item) =>
data.vods.filter((item1) => item1.categoryId === item)
),
selectedVideo: data.vods.filter((item ) => item.id !== location.getId())[0],
selectedVideo: data.vods.filter(
(item) => item.id !== location.getId()
)[0],
};
case "public/homePage":
let itemsLevel;
@ -124,101 +139,9 @@ export default function publicApi(state = initialState, action) {
error: null,
homeData: data,
};
// case "public/filter":
// const realList =
// state.newProducts.length === 0
// ? state.homeData.filter(
// (item) => item.title === "جدیدترین کتاب‌های دانوین"
// )[0].data
// : state.newProducts;
// if (state.newProducts.length === 0) {
// state = {
// ...state,
// newProducts: realList,
// };
// console.log("here1");
// }
// const level = data.levels;
// const search = data.search;
// if (level.length > 0 || search) {
// localStorage.setItem("filter", "ON");
// } else {
// return {
// ...state,
// loading: false,
// error: null,
// homeData: state.homeData.map((item) =>
// item.title === "جدیدترین کتاب‌های دانوین"
// ? { ...item, data: state.newProducts }
// : { ...item }
// ),
// newProducts: [],
// };
// }
// let byLevelFilter = [];
// if (level.length > 0) {
// level.map((item1) => {
// for (let i = 0; i < realList.length; i++) {
// if (grades[realList[i].book.gradeId] === item1) {
// byLevelFilter.push(realList[i]);
// }
// }
// });
// } else {
// byLevelFilter = realList;
// }
// // let bySubjectFilter = [];
// // if (subject.length > 0) {
// // subject.map((item1) => {
// // for (let i = 0; i < byLevelFilter.length; i++) {
// // if (byLevelFilter[i].name === item1) {
// // bySubjectFilter.push(byLevelFilter[i]);
// // }
// // }
// // });
// // } else {
// // bySubjectFilter = byLevelFilter;
// // }
// const bySearchFilter = search
// ? byLevelFilter.filter((item1) => item1.name.indexOf(search) !== -1)
// : byLevelFilter;
// // if (sort === "گران ترین") {
// // finalSort = bySearchFilter.sort((item1, item2) => {
// // return item1.product[0].price - item2.product[0].price;
// // });
// // } else {
// // finalSort = bySearchFilter;
// // }
// return {
// ...state,
// loading: false,
// error: null,
// homeData: state.homeData.map((item) =>
// item.title === "جدیدترین کتاب‌های دانوین"
// ? { ...item, data: bySearchFilter }
// : { ...item }
// ),
// };
// case "faq/list":
// return { ...state, loading: false, error: null, faqList: data };
// case "public/faq/search":
// return {
// ...state,
// loading: false,
// error: null,
// searchResult: state.faqList.filter(
// (item) =>
// item.title.indexOf(data) !== -1 ||
// item.description.indexOf(data) !== -1
// ),
// };
case "public/contact":
return { ...state, loading: false, error: null, contactData: data };
// case "public/ar":
// return { ...state, loading: false, error: null, arList: data };
case "public/blogList":
return { ...state, loading: false, error: null, blogList: data };
case "public/blogInfo":

38
src/utils/scroll.js
Unescape View File

@ -95,31 +95,36 @@ class scroll {
};
videoLinearFormula = (currentScroll) => {
if(!localStorage.getItem("htmlRect")){
localStorage.setItem("htmlRect", JSON.stringify(document.getElementById("video").getBoundingClientRect()));
if (!localStorage.getItem("htmlRect")) {
localStorage.setItem(
"htmlRect",
JSON.stringify(document.getElementById("video").getBoundingClientRect())
);
}
const htmlRect = JSON.parse(localStorage.getItem("htmlRect"));
const htmlRect =
JSON.parse(localStorage.getItem("htmlRect")) ||
document.getElementById("video").getBoundingClientRect();
const joiRect = JSON.parse(localStorage.getItem("joiRect"));
const currentWidth = this.linearFormula(
currentScroll,
htmlRect.width,
joiRect.width,
3 * window.innerHeight,
3.5 * window.innerHeight,
4 * window.innerHeight
);
const currentHeight = this.linearFormula(
currentScroll,
htmlRect.height,
joiRect.height,
3 * window.innerHeight,
3.5 * window.innerHeight,
4 * window.innerHeight
);
const currentLeft = this.linearFormula(
currentScroll,
htmlRect.left,
joiRect.left,
3 * window.innerHeight,
3.5 * window.innerHeight,
4 * window.innerHeight
);
@ -127,10 +132,9 @@ class scroll {
currentScroll,
htmlRect.top,
joiRect.top - window.innerHeight,
3 * window.innerHeight,
3.5 * window.innerHeight,
4 * window.innerHeight
);
return {
width: currentWidth,
height: currentHeight,
@ -145,30 +149,30 @@ class scroll {
currentScroll,
testRect.width,
window.innerWidth,
5.5 * window.innerHeight,
6 * window.innerHeight
4.5 * window.innerHeight,
5 * window.innerHeight
);
const currentHeight = this.linearFormula(
currentScroll,
testRect.height,
window.innerHeight,
5.5 * window.innerHeight,
6 * window.innerHeight
4.5 * window.innerHeight,
5 * window.innerHeight
);
const currentLeft = this.linearFormula(
currentScroll,
testRect.left,
0,
5.5 * window.innerHeight,
6 * window.innerHeight
4.5 * window.innerHeight,
5 * window.innerHeight
);
const currentTop = this.linearFormula(
currentScroll,
testRect.top,
0,
5.5 * window.innerHeight,
6 * window.innerHeight
4.5 * window.innerHeight,
5 * window.innerHeight
);
return {
@ -177,7 +181,7 @@ class scroll {
top: currentTop,
left: currentLeft,
};
}
};
}
const _scroll = new scroll();

33
src/views/Home/Page1/index.js
Unescape View File

@ -48,7 +48,12 @@ export default function Page1({ list, page }) {
useEffect(() => {}, [page]);
return (
<div
className={_.join(["home-page1 w-full pt-20 h-screen fixed left-0"], " ")}
className={_.join(
[
"home-page1 w-full flex flex-col justify-center items-center h-screen fixed left-0",
],
" "
)}
style={{ top: top }}
>
<FloatWithMouse />
@ -98,8 +103,8 @@ export default function Page1({ list, page }) {
className="absolute bottom-0 left-1/2 transform -translate-x-1/2 translate-y-7"
/>
</div>
<div className="container flex flex-row justify-between relative transform translate-y-9">
<div className="list-none flex flex-row items-center bg-blueB0 bg-opacity-40 p-2.5 rounded-md backdrop-filter backdrop-blur-md">
<div className="container flex flex-row justify-between relative transform translate-y-12" style={{ alignItems: 'start'}}>
<div className="list-none flex flex-row bg-blueB0 bg-opacity-40 p-2.5 rounded-md backdrop-filter backdrop-blur-md">
<strong className="text-white text-sm font-light ml-1 border-l-2 pl-2 border-gray-300">
لیست محصولات
</strong>
@ -113,12 +118,22 @@ export default function Page1({ list, page }) {
آزمون ها
</Link>
</div>
<Link
to="/products"
className="flex flex-row items-center text-white text-xs bg-blueB0 bg-opacity-40 px-4 rounded-md backdrop-filter backdrop-blur-md"
>
ورود به فروشگاه <img src={arrowLeftWhite} alt="" className="mr-2" />
</Link>
<div className="flex flex-col">
<h1 className="text-xl font-semibold text-blueC0">
لذت یادگیری را با دانوین تجربه کنید
</h1>
<p className="text-blue5F font-light text-sm w-64 mt-1 text-justify">
ما در دانوین با هدف ایجاد زیرساخت تعاملی و آموزشی با تولید محتوایی
جذاب بصورت کتاب قصد داریم تغییراتی بنیادین در نظام آموزش و پرورش
کشور ایجاد کنیم.
</p>
<Link
to="/products"
className="flex flex-row items-center text-white text-xs bg-blueB0 bg-opacity-40 px-4 py-3 rounded-md backdrop-filter backdrop-blur-md mt-5 self-end animate-bounce"
>
ورود به فروشگاه <img src={arrowLeftWhite} alt="" className="mr-2" />
</Link>
</div>
</div>
<img

11
src/views/Home/Page2/Mobile/AR/index.js
Unescape View File

@ -0,0 +1,11 @@
import React from 'react';
import ARImage from '../../../../../assets/images/ar.jpg';
export default function AR() {
return (
<div className="relative flex w-full h-full">
<img src={ARImage} className="w-full absolute bottom-0 left-0" />
</div>
)
}

72
src/views/Home/Page2/Mobile/QrResult/index.js
Unescape View File

@ -0,0 +1,72 @@
import React from "react";
import olum2Image from "../../../../../assets/images/olum-2.svg";
import { connect } from "react-redux";
import _ from "lodash";
function QrResult({ book, grades, checked }) {
return (
<div
className={_.join(
[
"relative w-full h-full min-h-full transition-all transform flex flex-col px-2 pt-10 bg-white",
],
" "
)}
>
<div className="w-full flex flex-row items-center">
<img src={book.imageUrl} alt={book.name} className="rounded-md w-1/3" />
<div className="flex flex-col">
<h1 className="font-semibold text-primary">{book.name}</h1>
<strong className="text-blueC0 font-light mt-2 text-sm">
{_.join(["پایه", grades[book.grade]], " ")}
</strong>
<p className="mt-1 text-blueC0 text-sm">{_.join(["شما در حال مطالعه صفحه", book.page, "هستید."], " ")}</p>
</div>
</div>
<div className="flex flex-column rounded-md border border-blueFE overflow-hidden">
<ul className="w-full flex flex-row list-none">
</ul>
</div>
</div>
);
}
export default connect((state) => ({
grades: state.publicApi.grades,
}))(QrResult);
QrResult.defaultProps = {
book: {
name: "علوم اجتماعی",
page: 67,
grade: 2,
imageUrl: olum2Image,
},
dataTypes : [
{
name : 'تمامی محتواها',
type : 'all'
},
{
name : 'صوت',
type : 'voice'
},
{
name : 'ویدئو',
type : 'video'
},
{
name : 'پی دی اف',
type : 'pdf'
},
{
name : 'پاور‌پوینت',
type : 'ppt'
},
{
name : 'لینک‌ها',
type : 'links'
},
]
};

36
src/views/Home/Page2/Mobile/QrScanner/index.js
Unescape View File

@ -0,0 +1,36 @@
import React from "react";
export default function QrScanner() {
return (
<div className="relative w-full h-full">
<div
className="absolute left-0 top-0 w-full backdrop-filter backdrop-blur-lg bg-black bg-opacity-40"
style={{ height: "10%" }}
></div>
<div
className="absolute left-0 top-40 backdrop-filter backdrop-blur-lg bg-black bg-opacity-40"
style={{
top: "10%",
height: "28%",
width: "25%",
}}
></div>
<div
className="absolute right-0 top-40 backdrop-filter backdrop-blur-lg bg-black bg-opacity-40"
style={{
top: "10%",
height: "28%",
width: "25%",
}}
></div>
<div
className="absolute left-0 bottom-0 w-full backdrop-filter backdrop-blur-lg bg-black bg-opacity-40"
style={{ height: "62%" }}
></div>
<div
className="scanner absolute bg-green-300"
style={{ height: 5, width: "50%", left: "25%", top: "10%" }}
></div>
</div>
);
}

162
src/views/Home/Page2/Mobile/index.js
Unescape View File

@ -1,25 +1,15 @@
import React, { useEffect, useState } from "react";
import _ from "lodash";
import {connect} from 'react-redux';
function Mobile({ mobilePosition, videoPosition, autoPlay, selectedVideo }) {
const [checked, setChecked] = useState(mobilePosition > 0 ? true : false);
useEffect(() => {
if (mobilePosition > 0) {
setChecked(true);
} else {
setChecked(false);
}
}, [mobilePosition]);
import { connect } from "react-redux";
import QrResult from "./QrResult";
import QrScanner from "./QrScanner";
import AR from "./AR";
function Mobile({ mobilePosition, videoPosition, autoPlay, selectedVideo, unit }) {
return (
<div
className={_.join(
[
"fixed rounded-2xl flex flex-col overflow-hidden shadow-2xl",
window.scrollY > 2500 ? "items-center justify-center" : "",
window.scrollY > 2500 ? "bg-black" : "",
],
["fixed rounded-2xl flex flex-col overflow-hidden shadow-2xl"],
" "
)}
style={{
@ -30,81 +20,93 @@ function Mobile({ mobilePosition, videoPosition, autoPlay, selectedVideo }) {
// transform: `translateX(-${(window.innerHeight * 7) / 40 - 84}px)`,
}}
>
<div
className={_.join(
[
"relative w-full h-full min-h-full",
window.scrollY > 2500 ? "hidden" : "",
],
" "
)}
>
<div
className="absolute left-0 top-0 w-full backdrop-filter backdrop-blur-lg bg-black bg-opacity-40"
style={{ height: "10%" }}
></div>
<div className="relative w-full h-full flex">
<div
className="absolute left-0 top-40 backdrop-filter backdrop-blur-lg bg-black bg-opacity-40"
style={{
top: "10%",
height: "28%",
width: "25%",
}}
></div>
className={_.join(
[
"absolute left-0 top-0 h-full w-full",
unit === 1 ? "opacity-100" : "opacity-0",
],
" "
)}
>
<QrScanner />
</div>
<div
className="absolute right-0 top-40 backdrop-filter backdrop-blur-lg bg-black bg-opacity-40"
style={{
top: "10%",
height: "28%",
width: "25%",
}}
></div>
className={_.join(
[
"absolute w-full h-full min-h-full transform",
unit === 2 ? "opacity-100" : "opacity-0",
],
" "
)}
>
<QrResult />
</div>
<div
className="absolute left-0 bottom-0 w-full backdrop-filter backdrop-blur-lg bg-black bg-opacity-40"
style={{ height: "62%" }}
></div>
className={_.join(
[
"absolute w-full h-full min-h-full transform",
unit === 3 ? "opacity-100" : "opacity-0",
],
" "
)}
>
<AR />
</div>
<div
className="scanner absolute bg-green-300"
style={{ height: 5, width: "50%", left: "25%", top: "10%" }}
></div>
</div>
<div
className={_.join(
[
"relative w-full h-full min-h-full bg-green-200 transition-all transform",
checked ? "-translate-y-full" : "",
window.scrollY > 2500 ? "hidden" : "",
],
" "
)}
></div>
{window.scrollY > 2500 ? (
<video
id="video"
className={_.join(
[
"video outline-none animation-puls bg-black",
window.scrollY > 3 * window.innerHeight ? "fixed" : "static",
"absolute left-0 top-0 h-full w-full flex justify-center items-center bg-black",
unit === 4 ? "opacity-100" : "opacity-0",
],
" "
)}
style={{
height: window.scrollY <= 3 * window.innerHeight ? (window.innerHeight * 9) / 25 : videoPosition?.height,
width: window.scrollY <= 3 * window.innerHeight ? "100%" : videoPosition?.width,
left : window.scrollY > 3 * window.innerHeight ? videoPosition?.left : 'auto',
top : window.scrollY > 3 * window.innerHeight ? videoPosition?.top : 'auto',
}}
controls
autoPlay={'true'}
>
<source src={`https://dnvn.ir/api/v1/file/${selectedVideo?.fileIds}`} type={"video/mp4"} />
</video>
) : null}
<video
id="video"
className={_.join(
[
"video outline-none animation-puls bg-black",
window.scrollY > 3.5 * window.innerHeight ? "fixed" : "static",
],
" "
)}
style={{
height:
window.scrollY < 3.5 * window.innerHeight
? (window.innerHeight * 9) / 25
: videoPosition?.height,
width:
window.scrollY < 3.5 * window.innerHeight
? "100%"
: videoPosition?.width,
left:
window.scrollY < 3.5 * window.innerHeight
? "auto"
: videoPosition?.left,
top:
window.scrollY < 3.5 * window.innerHeight
? "auto"
: videoPosition?.top,
}}
controls
autoPlay={"true"}
>
<source
src={`https://dnvn.ir/api/v1/file/${selectedVideo?.fileIds}`}
type={"video/mp4"}
/>
</video>
</div>
</div>
</div>
);
}
export default connect((state) => ({
selectedVideo : state.publicApi.selectedVideo
}), {})(Mobile);
export default connect(
(state) => ({
selectedVideo: state.publicApi.selectedVideo,
}),
{}
)(Mobile);

57
src/views/Home/Page2/index.js
Unescape View File

@ -8,6 +8,7 @@ export default function Page2({ list, page, autoPlay }) {
const height = window.innerHeight;
const [top, setTop] = useState(window.innerHeight);
const [videoPosition, setVideoPosition] = useState(null);
const [unit, setUnit] = useState(null);
const [boxPosition, setBoxPosition] = useState({
translateY: null,
translateX: null,
@ -15,6 +16,8 @@ export default function Page2({ list, page, autoPlay }) {
});
const [mobilePosition, setMobilePosition] = useState(null);
useEffect(() => {
// localStorage.removeItem('htmlRect');
// localStorage.removeItem('joiRect');
setMobilePosition(
scroll.linearFormula(
window.scrollY > 2.5 * height ? 2.5 * height : window.scrollY,
@ -24,11 +27,14 @@ export default function Page2({ list, page, autoPlay }) {
2.5 * height
)
);
setVideoPosition(
window.scrollY > 3 * height
? scroll.videoLinearFormula(window.scrollY)
: null
);
if (window.scrollY > 3.5 * height && window.scrollY < 4 * height) {
setVideoPosition(
window.scrollY > 4 * height
? scroll.videoLinearFormula(4 * height)
: scroll.videoLinearFormula(window.scrollY)
);
}
unitPositionHandler(window.scrollY);
if (window.scrollY < 2.5 * height) {
setBoxPosition({
translateY: scroll.linearFormula(
@ -81,13 +87,23 @@ export default function Page2({ list, page, autoPlay }) {
}
window.addEventListener("scroll", (e) => {
const scrollY = window.scrollY;
setTop(scroll.homeScrollHandler(page));
boxPositionHandler(window.scrollY);
mobilePositionHandler(window.scrollY);
videoPositionHandler(window.scrollY);
boxPositionHandler(scrollY);
mobilePositionHandler(scrollY);
if (window.scrollY > 2 * height && window.scrollY < 3.5 * height) {
unitPositionHandler(scrollY);
}
if (window.scrollY > 3.5 * height && window.scrollY < 4 * height) {
videoPositionHandler(scrollY);
}
});
}, []);
useEffect(() => {
unitPositionHandler(window.scrollY);
},[mobilePosition])
const boxPositionHandler = (scrollY) => {
if (scrollY <= height) {
setBoxPosition({
@ -142,17 +158,37 @@ export default function Page2({ list, page, autoPlay }) {
2.5 * height
)
);
}else{
setMobilePosition(6);
}
};
const videoPositionHandler = (scrollY) => {
if (scrollY <= 3 * height) {
if (scrollY <= 3.5 * height) {
setVideoPosition(() => null);
} else if (scrollY > 3 * height && scrollY < 4 * height) {
} else if (scrollY > 3.5 * height && scrollY < 4 * height) {
setVideoPosition(scroll.videoLinearFormula(scrollY));
} else {
}
};
const unitPositionHandler = (scrollY) => {
if (scrollY > 2 * height && scrollY <= 2.5 * height) {
if (mobilePosition > 0) {
setUnit(2);
} else {
setUnit(1);
}
}
else if(scrollY > 2.5 * height && scrollY <= 2.7 * height){
setUnit(2);
}
else if(scrollY > 2.7 * height && scrollY <= 3.2 * height){
setUnit(3);
}else if(scrollY > 3.2 * height && scrollY < 3.5 * height){
setUnit(4);
}
};
return (
<div
onClick={(e) => e.stopPropagation()}
@ -201,6 +237,7 @@ export default function Page2({ list, page, autoPlay }) {
mobilePosition={mobilePosition}
videoPosition={videoPosition}
autoPlay={autoPlay}
unit={unit}
/>
{/* video */}
</div>

17
src/views/Home/Test/index.js
Unescape View File

@ -35,17 +35,12 @@ export default function Test({ title, duration, questions }) {
const height = window.innerHeight;
if (scrollY <= 4.5 * height) {
setTranslateY(() => 0);
setTestPosition(() => null)
setTestPosition(() => null);
} else if (scrollY > 4.5 * height && scrollY < 5 * height) {
setTranslateY(() =>
scroll.linearFormula(scrollY, 0, -101, 4.5 * height, 5 * height)
);
setTestPosition(() => null);
} else if(scrollY > 5.5 * height && scrollY < 6 * height) {
setTestPosition(() => scroll.testLinearFolmula(scrollY));
setTranslateY(() => 0);
}else{
}
};
return (
@ -56,11 +51,11 @@ export default function Test({ title, duration, questions }) {
style={{
minHeight: window.innerHeight - 180,
transform: `translateY(${translateY}%)`,
position : testPosition ? 'fixed' : 'static',
left : testPosition?.left ? testPosition?.left : 'auto',
top : testPosition?.top ? testPosition?.top : 'auto',
width : testPosition?.width ? testPosition?.width : 'auto',
height : testPosition?.height ? testPosition?.height : 'auto'
position: testPosition ? "fixed" : "static",
left: testPosition?.left ? testPosition?.left : "auto",
top: testPosition?.top ? testPosition?.top : "auto",
width: testPosition?.width ? testPosition?.width : "auto",
height: testPosition?.height ? testPosition?.height : "auto",
}}
>
<header

6
src/views/Home/index.js
Unescape View File

@ -3,10 +3,7 @@ import Navbar from "../../components/Navbar";
import Page1 from "./Page1";
import Page2 from "./Page2";
// import Page3 from "./Page3";
// import Page4 from "./Page4";
import VideoTube from "./VideoTube";
// import Dots from "../../components/Dots";
export default function Home() {
const [autoPlay, setAutoPlay] = useState(false);
@ -14,7 +11,6 @@ export default function Home() {
window.addEventListener("scroll", () => {
if (window.scrollY > 3 * window.innerHeight) {
setAutoPlay(() => true);
// alert('here');
} else {
setAutoPlay(() => false);
}
@ -23,7 +19,7 @@ export default function Home() {
return (
<div
className="flex flex-col bg-white relative w-full rtl"
style={{ height: "700vh" }}
style={{ height: "900vh" }}
>
<Navbar />
<Page1 page={1} />

3
tailwind.config.js
Unescape View File

@ -12,13 +12,16 @@ module.exports = {
textColor : (theme) => ({
...theme("colors"),
primary: "#235A90",
blueC0: "#196EC0",
blueE8 : '#2E81E8',
green71 : '#067182',
blue52 : '#132F52',
blue5F : '#05335F'
}),
borderColor : (theme) => ({
...theme("colors"),
blueC0: "#196EC0",
blueFE : "#C1E0FE"
})
},
variants: {

Write Preview
Loading…
Cancel
Save