From 7c7acdd4109b7feebd9a6d2d228d12955b6cfa89 Mon Sep 17 00:00:00 2001 From: Jack Date: Wed, 21 Aug 2024 20:13:40 +0800 Subject: [PATCH] Implement 'About' modal --- README.md | 11 --------- public/index.html | 2 +- src/App.css | 62 +++++++++++++++++++++++++++++++++++++++++++++++ src/App.tsx | 25 +++++++++++++++---- 4 files changed, 83 insertions(+), 17 deletions(-) diff --git a/README.md b/README.md index 07d0416..2fc16b4 100644 --- a/README.md +++ b/README.md @@ -5,16 +5,6 @@ Ancient Greek Vocabulary [![License][License badge]][License URL] ![Last Commit][last commit badge] -A Quizlet alternative to study Ancient Greek vocabulary with a much better visual. Please try the - [App](https://qubitpi.github.io/ancient-greek-vocabulary/) - -The essence of this project is to implement the philosophy that __all languages are different__, whether it's their -fonts, areas of difficulties, or history. - -I was stuyding German and wanted some movie to sharpen my listening skills. So I watched this movie called "Generation War". It is this movie that teach me there were also great people in Nazi Germany. -I name this project: (...) - - How Did the Project Start ------------------------- @@ -26,7 +16,6 @@ the other day and saw this horribly formatted Greek text: - The Greek font looks terribly uncomfortable, because Quizlet uses the same font for all languages and I certainly don't like it. So I decided to make my own flash card with a much better font (see the Note below) that results something like this: diff --git a/public/index.html b/public/index.html index deabd7a..437cf7e 100644 --- a/public/index.html +++ b/public/index.html @@ -24,7 +24,7 @@ work correctly both with client-side routing and a non-root public URL. Learn how to configure a non-root public URL by running `npm run build`. --> - Ancient Greek + Wilhelm diff --git a/src/App.css b/src/App.css index 4f0824c..1902274 100644 --- a/src/App.css +++ b/src/App.css @@ -256,6 +256,68 @@ body { height: 50px; width: 50px; fill: var(--blue); + z-index: 99999; +} + +.about-modal { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + transition: z-index 0.3s step-end, top 0ms ease-in-out 300ms; + z-index: -1000; +} + +.about-modal .overlay { + position: fixed; + width: 100%; + height: 100%; + background: rgba(0, 0, 0, 0.5); + opacity: 0; + transition: opacity 100ms ease-in-out 200ms; +} + +.about-modal .about-modal-content { + position: absolute; + top: 30%; + left: 50%; + transform: translate(-50%, -50%) scale(1.15); + width: 95%; + max-width: 350px; + background: #fff; + padding: 25px; + opacity: 0; + border-radius: 20px; + box-shadow: 0 2px 2px 5px rgba(0, 0, 0, 0.05); + transition: all 300ms ease-in-out; +} + +.about-modal .about-modal-content h2 { + margin: 10px 0; + font-size: 25px; + color: var(--black1); + text-align: center; +} + +.about-modal .about-modal-content p { + margin: 15px 0; + font-size: 16px; + color:var(--black1); +} + +.about-modal.active { + top: 0; + transition: top 0ms ease-in-out 0ms; + z-index: 99999; +} +.about-modal.active .overlay { + opacity: 1; + transition: all 300ms ease-in-out; +} +.about-modal.active .about-modal-content { + transform: translate(-50%, -50%) scale(1); + opacity: 1; } /* ================== Word List ============== */ diff --git a/src/App.tsx b/src/App.tsx index fc7ebed..dc6eaba 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -40,6 +40,8 @@ function App() { const [hoveredItem, setHoveredItem] = useState(ANCIENT_GREEK) const [vocabulary, setVocabulary] = useState(greekVocabulary) + const [aboutModalShow, setAboutModalShow] = useState(false) + const handleToggleClick = () => { setToggled(!toggled) @@ -100,7 +102,20 @@ function App() {
- + setAboutModalShow(true)}/> +
+
setAboutModalShow(false)}>
+
+

About Wilhelm

+

+ All languages are unique, whether it's their fonts, areas of difficulties, or history. +

+ +

+ Wihelm is a Quizlet alternative to study vocabularies with a much better visual. +

+
+
@@ -118,10 +133,10 @@ function App() { - - - - + + + +
WordDefinitionStatus
WordDefinitionStatus