diff --git a/src/StartScreen.tsx b/src/StartScreen.tsx index 90f36e9..6a801c8 100644 --- a/src/StartScreen.tsx +++ b/src/StartScreen.tsx @@ -4,86 +4,211 @@ import map from "./assets/map.png"; import mapExample from "./assets/map_example.png"; import timelineExample from "./assets/timeline.png"; import quizExample from "./assets/QuizExample.png"; +import ArrowsRight from "./assets/DoubleGreenArrows.png"; +import { useEffect, useRef, useState } from "react"; interface StartScreenProps { - goToPage: (page: AppPage) => void; + goToPage: (page: AppPage) => void; } -const StartScreen = ({ goToPage}: StartScreenProps) => { - return ( -
-
{ + const scrollRef = useRef(null); + const [bgOpacity, setBgOpacity] = useState(1); + const bgImgRef = useRef(null); + const [scrollClicked, setScrollClicked] = useState(false); + + useEffect(() => { + const el = scrollRef.current; + + if (!el) return; + + function onScroll() { + const scrollTop = el!.scrollTop; + const fadeDistance = window.innerHeight * 3/4; // px before it fully fades + const newOpacity = Math.max(0, 1 - scrollTop / fadeDistance); + setBgOpacity(newOpacity); + setScrollClicked(scrollTop!=0); + } + + el.addEventListener("scroll", onScroll); + return () => el.removeEventListener("scroll", onScroll); + }, []); + + async function scroll(y: number, time: number) { + if (!scrollRef) return; + const start = performance.now() + const startY = scrollRef.current!.scrollTop; + const endY = startY + y + while (performance.now() < start + time) { + const progress = (performance.now() - start) / time + scrollRef.current!.scrollTo(0, startY + y * progress) + await new Promise((resolve) => requestAnimationFrame(resolve)); + } + scrollRef.current!.scrollTo(0, endY) + } + + return ( + <> + {!scrollClicked && ( + + )} +
+
+

+ AP World Study Website +

+

+ World History at a Glance +

+ +
+
+

About

+

+ AP World can be a really difficult class, covering dozens of empires + all around the world across roughly eight centuries of history. + Built by two students who earned 5s on the AP Exam, this website is + designed to help you understand and synthesize the content in a + visual, intuitive, and interactive way. And yet - content alone + isn't enough to prepare yourself for success in AP World History - + the exam is built on themes and historical thinking skills. What + helped us most wasn't understanding every fact, but understanding + how societies compare, change, and influence one another - and this + website was built with that in mind. Whether your goal is to deepen + your understanding of world history or score 5 on the AP Exam, this + study tool offers a simple and effective path to get there. Click{" "} + goToPage(AppPage.EXPLANATION)} + className="text-blue-600 hover:underline mb-2" > -

AP World Study Website

-

World History at a Glance

- -
-
-

About

-

AP World can be a really difficult class, covering dozens of empires all around the world across roughly eight centuries of history. Built by two students who earned 5s on the AP Exam, this website is designed to help you understand and synthesize the content in a visual, intuitive, and interactive way. And yet - content alone isn't enough to prepare yourself for success in AP World History - the exam is built on themes and historical thinking skills. What helped us most wasn't understanding every fact, but understanding how societies compare, change, and influence one another - and this website was built with that in mind. Whether your goal is to deepen your understanding of world history or score 5 on the AP Exam, this study tool offers a simple and effective path to get there. Click{" "} - goToPage(AppPage.EXPLANATION)} - className="text-blue-600 hover:underline mb-2" - > - here - - {" "}to learn how to get started.

-
-
-

Interactive Map

-
- -

Explore world history with our interactive map, organized by the 6 Collegeboard themes. You can see what was happening across regions at the same time, making connections and trends clearer. This feature helps you recognize broader global patterns and understand how different societies developed in relation to one another.

-
-
-
-

Timeline

-
- -

Track historical events in chronological order with our interactive timeline. Read about the Collegeboard theme, causes, and effects to gain a richer understanding of each event. By following the sequence of developments, you can see how one moment leads to the next and strengthen your sense of historical cause and effect.

-
-
-
-

Quiz

-
- -

Test your historical thinking skills with our quiz feature, which gives you two randomly selected countries from a time period and challenges you to compare them. After you come up with similarities and differences, check your answer with each country's notes. It’s a simple way to practice comparison and reinforce thematic understanding.

-
-
-
-
-

Have suggestions?

-
- - - -
-
-
-
-

Notes were taken from The Earth and Its Peoples - AP Edition - 4th ED, World History: Modern (1200-Present) AP ED, and class materials. Images were sourced from Unsplash and Pixabay

-
-
- - ) -} + here + {" "} + to learn how to get started.{" "} +

+
+
+

Interactive Map

+
+ +

+ Explore world history with our interactive map, organized by the 6 + Collegeboard themes. You can see what was happening across regions + at the same time, making connections and trends clearer. This + feature helps you recognize broader global patterns and understand + how different societies developed in relation to one another. +

+
+
+
+

Timeline

+
+ +

+ Track historical events in chronological order with our + interactive timeline. Read about the Collegeboard theme, causes, + and effects to gain a richer understanding of each event. By + following the sequence of developments, you can see how one moment + leads to the next and strengthen your sense of historical cause + and effect. +

+
+
+
+

Quiz

+
+ +

+ Test your historical thinking skills with our quiz feature, which + gives you two randomly selected countries from a time period and + challenges you to compare them. After you come up with + similarities and differences, check your answer with each + country's notes. It’s a simple way to practice comparison and + reinforce thematic understanding. +

+
+
+
+
+

+ Have suggestions? +

+
+ + + +
+
+
+
+

+ Notes were taken from The Earth and Its Peoples - AP Edition - 4th + ED, World History: Modern (1200-Present) AP ED, and class materials. + Images were sourced from Unsplash and Pixabay +

+
+
+ + ); +}; -export default StartScreen; \ No newline at end of file +export default StartScreen;