Final: Enhance app functionalities (#196)

hoangsonww · Jan 17, 2025 · 2dab2db · 2dab2db
1 parent 87b6735
commit 2dab2db
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 8 deletions.
diff --git a/MovieVerse-Frontend/html/about.html b/MovieVerse-Frontend/html/about.html
@@ -364,14 +364,14 @@ <h1 id="my-heading" style="margin-bottom: -9px" class="notranslate">
       </ul>
     </nav>
     <main id="main2" style="margin: 0 auto">
-      <h2 id="aboutHeader" style="align-self: center; cursor: pointer; animation: fadeIn 1.5s ease-in-out;">About The MovieVerse</h2>
-      <p style="color: white; text-align: center; animation: fadeIn 1.5s ease-in-out;">
+      <h2 id="aboutHeader" style="align-self: center; cursor: pointer; animation: fadeIn 1.5s ease-in-out">About The MovieVerse</h2>
+      <p style="color: white; text-align: center; animation: fadeIn 1.5s ease-in-out">
         Welcome to The MovieVerse, your ultimate database for exploring the magic of movies. Created by
         <strong><a id="profileLink" href="http://github.com/hoangsonww">Son Nguyen</a></strong>
         in 2023 with a vision to celebrate cinematic art, MovieVerse offers a unique but comprehensive platform for nearly
         <strong>one million</strong> movie lovers worldwide to discover, engage, and immerse themselves in the world of film.
       </p>
-      <div style="width: 100%; animation: fadeIn 1.5s ease-in-out;">
+      <div style="width: 100%; animation: fadeIn 1.5s ease-in-out">
         <img
           id="logo"
           src="../../images/uwu.webp"
@@ -380,9 +380,9 @@ <h2 id="aboutHeader" style="align-self: center; cursor: pointer; animation: fade
         />
       </div>
       <p style="animation: fadeIn 1.5s ease-in-out; color: white; text-align: center; width: 100%">Thank you for visiting MovieVerse today! 🎬🍿</p>
-      <h3 id="subheading1" style="cursor: pointer; animation: fadeIn 1.5s ease-in-out;">Core Features:</h3>
+      <h3 id="subheading1" style="cursor: pointer; animation: fadeIn 1.5s ease-in-out">Core Features:</h3>
       <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" />
-      <ul style="align-content: center; color: white; animation: fadeIn 1.5s ease-in-out;">
+      <ul style="align-content: center; color: white; animation: fadeIn 1.5s ease-in-out">
         <li>
           <i style="margin-right: 3px" class="fas fa-film"></i>
           <strong>Curated Movie Collections:</strong> Explore an array of movies categorized by genre, director, language, and era, including
@@ -453,7 +453,7 @@ <h3 id="subheading1" style="cursor: pointer; animation: fadeIn 1.5s ease-in-out;
         </li>
       </ul>
       <h3 id="subheading2" style="animation: fadeIn 1.5s ease-in-out; cursor: pointer">Explore Our Other Apps:</h3>
-      <p style="color: white; text-align: center; margin-bottom: 12px; animation: fadeIn 1.5s ease-in-out;">
+      <p style="color: white; text-align: center; margin-bottom: 12px; animation: fadeIn 1.5s ease-in-out">
         Like MovieVerse, our other apps are designed to enhance your daily life and help you stay organized, focused, and informed. Check out our
         other apps below, or visit my
         <a style="text-decoration: underline" id="githubLink" href="https://github.com/hoangsonww">GitHub profile</a>

diff --git a/MovieVerse-Frontend/html/games.html b/MovieVerse-Frontend/html/games.html
@@ -83,7 +83,7 @@
         grid-template-columns: repeat(3, 1fr);
         grid-template-rows: repeat(3, auto);
         justify-items: center;
-        gap: 10px;
+        gap: 20px;
         padding: 20px;
         animation: fadeIn 1.5s ease-in-out;
       }
@@ -323,6 +323,17 @@
         #games-button {
           display: block;
         }
+        #c1 {
+          padding: 0 !important;
+        }
+      }
+      #c1 {
+        width: 100%;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        animation: fadeIn 1.5s ease-in-out;
+        padding: 20px;
       }
     </style>
   </head>
@@ -460,7 +471,7 @@ <h2 style="margin-top: 50px !important">Mini Games</h2>
     </div>
 
     <!-- How to Play -->
-    <div style="width: 100%; display: flex; justify-content: center; align-items: center; animation: fadeIn 1.5s ease-in-out;">
+    <div id="c1">
       <div class="card">
         <i class="fas fa-question-circle"></i>
         <p>How to Play</p>