Final: Enhance app functionalities (#196)

hoangsonww · Jan 17, 2025 · e5a011a · e5a011a
1 parent bf5657d
commit e5a011a
Show file tree

Hide file tree

Showing 41 changed files with 2,406 additions and 165 deletions.
diff --git a/MovieVerse-Frontend/css/style.css b/MovieVerse-Frontend/css/style.css
@@ -788,6 +788,10 @@ header h1 {
   display: none;
 }
 
+#mobileGamesBtn {
+  display: none;
+}
+
 @media screen and (max-width: 900px) {
   #mobileGoogleSignInBtn {
     display: block;
@@ -796,6 +800,10 @@ header h1 {
   #mobileProfileBtn {
     display: block;
   }
+
+  #mobileGamesBtn {
+    display: block;
+  }
 }
 
 @media print {
@@ -806,6 +814,10 @@ header h1 {
   #mobileProfileBtn {
     display: none;
   }
+
+  #mobileGamesBtn {
+    display: none;
+  }
 }
 
 .back-btn:hover {
@@ -2466,6 +2478,7 @@ strong {
 }
 
 #chat-button,
+#games-button,
 #settings-btn,
 #movie-of-the-day-btn,
 #movie-match-btn,
@@ -2484,6 +2497,7 @@ strong {
 
 @media all and (min-width: 768px) {
   #chat-button,
+  #games-button,
   #settings-btn,
   #movie-of-the-day-btn,
   #movie-match-btn,
@@ -3340,6 +3354,11 @@ canvas {
   transition: 0.1s ease-in;
 }
 
+#mobileGamesBtn:hover {
+  background-color: #ff8623;
+  transition: 0.1s ease-in;
+}
+
 @media all and (max-width: 800px) {
   #my-heading {
     margin-left: 0;
@@ -3864,6 +3883,20 @@ body {
   margin-left: 5px;
 }
 
+#mobileGamesBtn {
+  background-color: #7378c5;
+  border: none;
+  color: white;
+  height: 40px;
+  text-align: center;
+  font: inherit;
+  font-size: 16px;
+  cursor: pointer;
+  border-radius: 8px;
+  padding: 0 10px;
+  margin-left: 5px;
+}
+
 #googleSignInBtn:hover {
   background-color: #ff8623;
   transition: 0.1s ease-in;
@@ -4424,13 +4457,11 @@ footer {
   text-align: center;
 }
 
-/* Icon in the card */
 .card i {
   font-size: 40px;
   margin-bottom: 10px;
 }
 
-/* Container for each game's canvas */
 .game-container {
   margin: 70px auto;
   max-width: 1000px;
@@ -4440,14 +4471,12 @@ footer {
   background-color: #2e2e3e;
 }
 
-/* Canvas styling */
 canvas {
   display: block;
   margin: 20px auto;
   background-color: #ffffff;
 }
 
-/* Responsive design tweaks (optional) */
 @media (max-width: 600px) {
   .card {
     max-width: 100%;

diff --git a/MovieVerse-Frontend/html/about.html b/MovieVerse-Frontend/html/about.html
@@ -176,6 +176,22 @@
       .highlight2:hover {
         color: #ff8623;
       }
+      #games-button {
+        background-color: #7378c5;
+        bottom: 265px;
+        right: 10px;
+        color: black;
+        border-radius: 8px;
+        border: none;
+        cursor: pointer;
+        font: inherit;
+        position: fixed;
+        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
+      }
+      #games-button:hover {
+        background-color: #ff8623;
+        transition: 0.1s ease-in;
+      }
     </style>
   </head>
   <body>
@@ -272,11 +288,19 @@ <h1 id="my-heading" style="margin-bottom: -9px" class="notranslate">
       <button
         id="chat-button"
         onclick="window.location.href='chat.html'"
-        style="bottom: 300px; right: 10px; z-index: 1001"
+        style="bottom: 335px; right: 10px; z-index: 1001"
         title="Chat with fellow MovieVerse users!"
       >
         Chat
       </button>
+      <button
+        id="games-button"
+        onclick="window.location.href='games.html'"
+        title="Play fun movie-related games!"
+        style="bottom: 300px; right: 10px; z-index: 1001"
+      >
+        Games
+      </button>
       <button id="settings-btn" style="position: fixed; bottom: 265px; right: 10px">Settings</button>
       <button
         id="movie-of-the-day-btn"
@@ -630,6 +654,7 @@ <h3 id="subheading4" style="cursor: pointer">Useful Links:</h3>
 
         const buttonIds = [
           'chat-button',
+          'games-button',
           'settings-btn',
           'movie-of-the-day-btn',
           'movie-match-btn3',
@@ -667,6 +692,7 @@ <h3 id="subheading4" style="cursor: pointer">Useful Links:</h3>
         if (window.innerWidth < 767) {
           const buttonIds = [
             'chat-button',
+            'games-button',
             'settings-btn',
             'movie-of-the-day-btn',
             'movie-match-btn3',

diff --git a/MovieVerse-Frontend/html/actor-details.html b/MovieVerse-Frontend/html/actor-details.html
@@ -83,6 +83,22 @@
           margin-right: 0;
         }
       }
+      #games-button {
+        background-color: #7378c5;
+        bottom: 265px;
+        right: 10px;
+        color: black;
+        border-radius: 8px;
+        border: none;
+        cursor: pointer;
+        font: inherit;
+        position: fixed;
+        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
+      }
+      #games-button:hover {
+        background-color: #ff8623;
+        transition: 0.1s ease-in;
+      }
       body {
         background-image: url('../../images/universe-1.webp');
         background-repeat: repeat-y;
@@ -396,11 +412,19 @@ <h2 id="actor-name" class="actor-header"></h2>
     <button
       id="chat-button"
       onclick="window.location.href='chat.html'"
-      style="bottom: 300px; right: 10px; z-index: 1001"
+      style="bottom: 335px; right: 10px; z-index: 1001"
       title="Chat with fellow MovieVerse users!"
     >
       Chat
     </button>
+    <button
+      id="games-button"
+      onclick="window.location.href='games.html'"
+      style="bottom: 300px; right: 10px; z-index: 1001"
+      title="Play games and have fun!"
+    >
+      Games
+    </button>
     <button id="settings-btn" style="position: fixed; bottom: 265px; right: 10px">Settings</button>
     <button
       id="movie-of-the-day-btn"
@@ -519,6 +543,7 @@ <h2 id="actor-name" class="actor-header"></h2>
 
         const buttonIds = [
           'chat-button',
+          'games-button',
           'settings-btn',
           'movie-of-the-day-btn',
           'movie-match-btn3',
@@ -600,6 +625,7 @@ <h2 id="actor-name" class="actor-header"></h2>
         if (window.innerWidth < 767) {
           const buttonIds = [
             'chat-button',
+            'games-button',
             'settings-btn',
             'movie-of-the-day-btn',
             'movie-match-btn3',

diff --git a/MovieVerse-Frontend/html/analytics.html b/MovieVerse-Frontend/html/analytics.html
@@ -236,6 +236,35 @@
       .highlight2:hover {
         color: #ff8623;
       }
+      #games-button {
+        background-color: #7378c5;
+        bottom: 265px;
+        right: 10px;
+        color: black;
+        border-radius: 8px;
+        border: none;
+        cursor: pointer;
+        font: inherit;
+        position: fixed;
+        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
+      }
+      #games-button:hover {
+        background-color: #ff8623;
+        transition: 0.1s ease-in;
+      }
+      #games-button {
+        transition:
+          transform 0.5s ease,
+          opacity 0.5s ease;
+        transform: translateY(20px);
+        opacity: 0;
+        display: none;
+      }
+      @media all and (min-width: 768px) {
+        #games-button {
+          display: block;
+        }
+      }
     </style>
   </head>
   <body>
@@ -330,11 +359,19 @@ <h1 id="my-heading" style="margin-bottom: -10px">The Mo<span class="highlight">v
       <button
         id="chat-button"
         onclick="window.location.href='chat.html'"
-        style="bottom: 300px; right: 10px; z-index: 1001"
+        style="bottom: 335px; right: 10px; z-index: 1001"
         title="Chat with fellow MovieVerse users!"
       >
         Chat
       </button>
+      <button
+        id="games-button"
+        onclick="window.location.href='games.html'"
+        style="bottom: 300px; right: 10px; z-index: 1001"
+        title="Play fun movie-related games!"
+      >
+        Games
+      </button>
       <button id="settings-btn" style="position: fixed; bottom: 265px; right: 10px">Settings</button>
       <button
         id="movie-of-the-day-btn"
@@ -571,6 +608,7 @@ <h2 class="chart-title" id="chart-title12" style="cursor: pointer">Highly Rated
 
         const buttonIds = [
           'chat-button',
+          'games-button',
           'settings-btn',
           'movie-of-the-day-btn',
           'movie-match-btn3',
@@ -608,6 +646,7 @@ <h2 class="chart-title" id="chart-title12" style="cursor: pointer">Highly Rated
         if (window.innerWidth < 767) {
           const buttonIds = [
             'chat-button',
+            'games-button',
             'settings-btn',
             'movie-of-the-day-btn',
             'movie-match-btn3',

diff --git a/MovieVerse-Frontend/html/api_fails.html b/MovieVerse-Frontend/html/api_fails.html
@@ -425,6 +425,35 @@
           bottom: 70px;
         }
       }
+      #games-button {
+        background-color: #7378c5;
+        bottom: 265px;
+        right: 10px;
+        color: black;
+        border-radius: 8px;
+        border: none;
+        cursor: pointer;
+        font: inherit;
+        position: fixed;
+        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
+      }
+      #games-button:hover {
+        background-color: #ff8623;
+        transition: 0.1s ease-in;
+      }
+      #games-button {
+        transition:
+          transform 0.5s ease,
+          opacity 0.5s ease;
+        transform: translateY(20px);
+        opacity: 0;
+        display: none;
+      }
+      @media all and (min-width: 768px) {
+        #games-button {
+          display: block;
+        }
+      }
     </style>
   </head>
   <body>
@@ -516,11 +545,19 @@ <h1 id="my-heading" style="margin-bottom: -10px; margin-top: 19px" class="notran
       <button
         id="chat-button"
         onclick="window.location.href='chat.html'"
-        style="bottom: 300px; right: 10px; z-index: 1001"
+        style="bottom: 335px; right: 10px; z-index: 1001"
         title="Chat with fellow MovieVerse users!"
       >
         Chat
       </button>
+      <button
+        id="games-button"
+        onclick="window.location.href='games.html'"
+        style="bottom: 300px; right: 10px; z-index: 1001"
+        title="Play fun movie-related games!"
+      >
+        Games
+      </button>
       <button id="settings-btn" style="position: fixed; bottom: 265px; right: 10px">Settings</button>
       <button
         id="movie-of-the-day-btn"
@@ -763,6 +800,7 @@ <h1 id="my-heading" style="margin-bottom: -10px; margin-top: 19px" class="notran
 
         const buttonIds = [
           'chat-button',
+          'games-button',
           'settings-btn',
           'movie-of-the-day-btn',
           'movie-match-btn3',
@@ -800,6 +838,7 @@ <h1 id="my-heading" style="margin-bottom: -10px; margin-top: 19px" class="notran
         if (window.innerWidth < 767) {
           const buttonIds = [
             'chat-button',
+            'games-button',
             'settings-btn',
             'movie-of-the-day-btn',
             'movie-match-btn3',