Implement 'About' modal

QubitPi · Aug 21, 2024 · f9404db · f9404db
1 parent e9de991
commit f9404db
Show file tree

Hide file tree

Showing 4 changed files with 86 additions and 15 deletions.
diff --git a/README.md b/README.md
@@ -1,20 +1,15 @@
 Ancient Greek Vocabulary
 ========================
 
+vercel badge!
+
 ![Node Version][node version badge]
 [![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
+. Please try the
 <img src="https://github.com/QubitPi/QubitPi/blob/master/img/可莉-25.png?raw=true" width="70px"> [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 +21,6 @@ the other day and saw this horribly formatted Greek text:
     <img src="./bad-font.png" width="60%">
 </div>
 
-
 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
@@ -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`.
     -->
-    <title>Ancient Greek</title>
+    <title>Vocabularies</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

diff --git 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
@@ -40,6 +40,8 @@ function App() {
   const [hoveredItem, setHoveredItem] = useState<string>(ANCIENT_GREEK)
   const [vocabulary, setVocabulary] = useState(greekVocabulary)
 
+  const [aboutModalShow, setAboutModalShow] = useState<boolean>(false)
+
 
   const handleToggleClick = () => {
     setToggled(!toggled)
@@ -100,7 +102,20 @@ function App() {
               </div>
 
               <div className="about">
-                <About className="icon"/>
+                <About className="icon" onClick={() => setAboutModalShow(true)}/>
+                <div className={aboutModalShow ? "about-modal active" : "about-modal"}>
+                  <div className={aboutModalShow ? "overlay active" : "overlay"} onClick={() => setAboutModalShow(false)}></div>
+                  <div className={aboutModalShow ? "about-modal-content active" : "about-modal-content"}>
+                    <h2>About Wilhelm</h2>
+                    <p>
+                      All languages are unique, whether it's their fonts, areas of difficulties, or history.
+                    </p>
+
+                    <p>
+                      Wihelm is a Quizlet alternative to study vocabularies with a much better visual.
+                    </p>
+                  </div>
+                </div>
               </div>
             </div>
 
@@ -118,10 +133,10 @@ function App() {
 
                 <table>
                   <thead>
-                    <tr>
-                      <td>Word</td>
-                      <td>Definition</td>
-                      <td>Status</td>
+                  <tr>
+                    <td>Word</td>
+                    <td>Definition</td>
+                    <td>Status</td>
                     </tr>
                   </thead>