From 65312543980c0bcbd9b1da2465c828ae4a456eb6 Mon Sep 17 00:00:00 2001 From: yasen5 <167659798+yasen5@users.noreply.github.com> Date: Thu, 27 Nov 2025 20:49:56 -1000 Subject: [PATCH 1/4] Format --- src/StartScreen.tsx | 215 ++++++++++++++++++++++++++++---------------- 1 file changed, 138 insertions(+), 77 deletions(-) diff --git a/src/StartScreen.tsx b/src/StartScreen.tsx index 90f36e9..65f3733 100644 --- a/src/StartScreen.tsx +++ b/src/StartScreen.tsx @@ -6,84 +6,145 @@ import timelineExample from "./assets/timeline.png"; import quizExample from "./assets/QuizExample.png"; interface StartScreenProps { - goToPage: (page: AppPage) => void; + goToPage: (page: AppPage) => void; } -const StartScreen = ({ goToPage}: StartScreenProps) => { - return ( -
-
-

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

-
+const StartScreen = ({ goToPage }: StartScreenProps) => { + return ( +
+
+

+ 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 +

+
+
+ ); +}; -export default StartScreen; \ No newline at end of file +export default StartScreen; From 1a0680dbd787e5d2c2319ce9ebede89360fe9491 Mon Sep 17 00:00:00 2001 From: yasen5 <167659798+yasen5@users.noreply.github.com> Date: Thu, 27 Nov 2025 21:48:22 -1000 Subject: [PATCH 2/4] Add animation and arrows --- src/StartScreen.tsx | 314 ++++++++++++++++++++++++++------------------ 1 file changed, 189 insertions(+), 125 deletions(-) diff --git a/src/StartScreen.tsx b/src/StartScreen.tsx index 65f3733..ae4d388 100644 --- a/src/StartScreen.tsx +++ b/src/StartScreen.tsx @@ -4,146 +4,210 @@ 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; } const StartScreen = ({ goToPage }: StartScreenProps) => { + 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; // 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 ( -
-
-

- AP World Study Website -

-

- World History at a Glance -

+ <> + {!scrollClicked && ( -
-
-

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. + )} +

+
+

+ AP World Study Website +

+

+ World History at a Glance

-
-
-
-

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. + +

+
+

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.{" "}

-
- -
-

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. +

+
+

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

-
- -
-
-

- 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 -

-
- + + + ); }; From 284260720f9f63c1961e90486bf014552e7b959a Mon Sep 17 00:00:00 2001 From: yasen5 <167659798+yasen5@users.noreply.github.com> Date: Thu, 27 Nov 2025 21:52:36 -1000 Subject: [PATCH 3/4] Slight tuning --- src/StartScreen.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/StartScreen.tsx b/src/StartScreen.tsx index ae4d388..ccc6d7f 100644 --- a/src/StartScreen.tsx +++ b/src/StartScreen.tsx @@ -24,7 +24,7 @@ const StartScreen = ({ goToPage }: StartScreenProps) => { function onScroll() { const scrollTop = el!.scrollTop; - const fadeDistance = window.innerHeight; // px before it fully fades + const fadeDistance = window.innerHeight * 3/4; // px before it fully fades const newOpacity = Math.max(0, 1 - scrollTop / fadeDistance); setBgOpacity(newOpacity); setScrollClicked(scrollTop!=0); From 0c22aded163516fb99d68afb8642840e729475bd Mon Sep 17 00:00:00 2001 From: yasen5 <167659798+yasen5@users.noreply.github.com> Date: Thu, 27 Nov 2025 22:03:13 -1000 Subject: [PATCH 4/4] Fix up stuff with the google form --- src/StartScreen.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/StartScreen.tsx b/src/StartScreen.tsx index ccc6d7f..6a801c8 100644 --- a/src/StartScreen.tsx +++ b/src/StartScreen.tsx @@ -75,7 +75,7 @@ const StartScreen = ({ goToPage }: StartScreenProps) => {

@@ -85,7 +85,7 @@ const StartScreen = ({ goToPage }: StartScreenProps) => { World History at a Glance