From cf7188b84abd1ffaa1459595af62c7344de7dd83 Mon Sep 17 00:00:00 2001
From: Son Nguyen <hoangson091104@gmail.com>
Date: Wed, 18 Dec 2024 06:41:01 +0700
Subject: [PATCH] Final: Enhance app functionalities (#196)

---
 .idea/dataSources.local.xml |   2 +-
 index.html                  | 319 +++++++++++++++++++-----------------
 index.js                    |  10 +-
 sitemap.xml                 |  54 +++---
 4 files changed, 209 insertions(+), 176 deletions(-)

diff --git a/.idea/dataSources.local.xml b/.idea/dataSources.local.xml
index bb108c86..ec152b22 100644
--- a/.idea/dataSources.local.xml
+++ b/.idea/dataSources.local.xml
@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <project version="4">
-  <component name="dataSourceStorageLocal" created-in="WS-243.21565.180">
+  <component name="dataSourceStorageLocal" created-in="WS-243.22562.112">
     <data-source name="MySQL" uuid="788cafbf-6cb6-424e-a1bc-51d30fb43a11">
       <database-info product="MySQL" version="8.3.0" jdbc-version="4.2" driver-name="MySQL Connector/J" driver-version="mysql-connector-j-8.2.0 (Revision: 06a1f724497fd81c6a659131fda822c9e5085b6c)" dbms="MYSQL" exact-version="8.3.0" exact-driver-version="8.2">
         <extra-name-characters>#@</extra-name-characters>
diff --git a/index.html b/index.html
index 74a10688..8f2cecd9 100644
--- a/index.html
+++ b/index.html
@@ -304,111 +304,6 @@
           bottom: 70px;
         }
       }
-      #githubLink {
-        color: white !important;
-      }
-      #githubLink:hover {
-        color: #ff8623 !important;
-        transition: 0.1s ease-in;
-      }
-      #githubLink7 {
-        color: white !important;
-      }
-      #githubLink7:hover {
-        color: #ff8623 !important;
-        transition: 0.1s ease-in;
-      }
-      #githubLink8 {
-        color: white !important;
-      }
-      #githubLink8:hover {
-        color: #ff8623 !important;
-        transition: 0.1s ease-in;
-      }
-      #githubLink9 {
-        color: white !important;
-      }
-      #githubLink9:hover {
-        color: #ff8623 !important;
-        transition: 0.1s ease-in;
-      }
-      #githubLink10 {
-        color: white !important;
-      }
-      #githubLink10:hover {
-        color: #ff8623 !important;
-        transition: 0.1s ease-in;
-      }
-      #githubLink11 {
-        color: white !important;
-      }
-      #githubLink11:hover {
-        color: #ff8623 !important;
-        transition: 0.1s ease-in;
-      }
-      #githubLink12 {
-        color: white !important;
-      }
-      #githubLink12:hover {
-        color: #ff8623 !important;
-        transition: 0.1s ease-in;
-      }
-      #githubLink14 {
-        color: white !important;
-      }
-      #githubLink14:hover {
-        color: #ff8623 !important;
-        transition: 0.1s ease-in;
-      }
-      #githubLink15 {
-        color: white !important;
-      }
-      #githubLink15:hover {
-        color: #ff8623 !important;
-        transition: 0.1s ease-in;
-      }
-      #githubLink16 {
-        color: white !important;
-      }
-      #githubLink16:hover {
-        color: #ff8623 !important;
-        transition: 0.1s ease-in;
-      }
-      #githubLink19 {
-        color: white !important;
-      }
-      #githubLink19:hover {
-        color: #ff8623 !important;
-        transition: 0.1s ease-in;
-      }
-      #githubLink3 {
-        color: white !important;
-      }
-      #githubLink3:hover {
-        color: #ff8623 !important;
-        transition: 0.1s ease-in;
-      }
-      #githubLink4 {
-        color: white !important;
-      }
-      #githubLink4:hover {
-        color: #ff8623 !important;
-        transition: 0.1s ease-in;
-      }
-      #githubLink5 {
-        color: white !important;
-      }
-      #githubLink5:hover {
-        color: #ff8623 !important;
-        transition: 0.1s ease-in;
-      }
-      #githubLink6 {
-        color: white !important;
-      }
-      #githubLink6:hover {
-        color: #ff8623 !important;
-        transition: 0.1s ease-in;
-      }
       #other {
         margin-top: 40px;
       }
@@ -419,30 +314,6 @@
         min-height: 54px;
         text-align: center;
       }
-      #ad-container {
-        display: block;
-      }
-      #ad-container1 {
-        display: block;
-      }
-      #ad-container2 {
-        display: block;
-      }
-      #ad-container3 {
-        display: block;
-      }
-      #ad-container4 {
-        display: block;
-      }
-      #ad-container5 {
-        display: block;
-      }
-      #ad-container6 {
-        display: block;
-      }
-      #ad-container7 {
-        display: block;
-      }
       #my-heading {
         margin-top: 19.5px !important;
       }
@@ -453,7 +324,6 @@
         #my-heading {
           margin-top: -5px !important;
         }
-
         #my-heading1 {
           margin-top: -5px !important;
         }
@@ -534,6 +404,36 @@
         opacity: 0;
         animation: dropIn 1s ease forwards 2s;
       }
+      #sticky-menu-button {
+        display: none;
+      }
+      @media (max-width: 767px) {
+        #sticky-menu-button {
+          position: fixed;
+          top: 50%;
+          left: 10px;
+          transform: translateY(-50%);
+          background-color: #7378c5;
+          color: white;
+          border: none;
+          border-radius: 8px;
+          padding: 10px;
+          font-size: 16px;
+          cursor: pointer;
+          z-index: 1001;
+          box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
+          display: flex;
+          align-items: center;
+          justify-content: center;
+        }
+        #sticky-menu-button:hover {
+          background-color: #ff8623;
+          transition: 0.2s ease-in-out;
+        }
+        #sticky-menu-button i {
+          font-size: 18px;
+        }
+      }
     </style>
   </head>
   <script async src="https://www.googletagmanager.com/gtag/js?id=G-CQKJ67FXZ4"></script>
@@ -559,6 +459,9 @@ <h1 id="my-heading" style="margin-bottom: -25px" class="notranslate">
       <button id="nav-toggle" style="z-index: 200000" class="nav-toggle" title="Toggle side navbar" onclick="toggleNav()">
         <i class="fas fa-bars"></i>
       </button>
+      <button id="sticky-menu-button" onclick="toggleNav()">
+        <i class="fas fa-arrow-right"></i>
+      </button>
       <button class="back-btn nav-btn notranslate" id="home-btn" title="Go back to homepage">Home</button>
       <button
         class="about nav-btn notranslate"
@@ -1234,8 +1137,7 @@ <h2 id="other" style="cursor: pointer">Timeless Classics: Trending Classic Movie
           { passive: true }
         );
       });
-    </script>
-    <script>
+
       window.onload = function () {
         const bottomBarAnchors = document.querySelectorAll('.mobile-bottom-bar a');
         let maxHeight = 0;
@@ -1337,8 +1239,7 @@ <h2 id="other" style="cursor: pointer">Timeless Classics: Trending Classic Movie
           });
         }
       });
-    </script>
-    <script>
+
       document.getElementById('settings-btn').addEventListener('click', () => {
         window.location.href = 'MovieVerse-Frontend/html/settings.html';
       });
@@ -1390,8 +1291,7 @@ <h2 id="other" style="cursor: pointer">Timeless Classics: Trending Classic Movie
           });
         });
       });
-    </script>
-    <script>
+
       if ('serviceWorker' in navigator) {
         window.addEventListener('load', function () {
           navigator.serviceWorker.register('MovieVerse-Frontend/js/service-worker.js').then(
@@ -1404,8 +1304,7 @@ <h2 id="other" style="cursor: pointer">Timeless Classics: Trending Classic Movie
           );
         });
       }
-    </script>
-    <script>
+
       document.addEventListener('DOMContentLoaded', function () {
         checkApiStatusWithRetry(5);
       });
@@ -1426,8 +1325,7 @@ <h2 id="other" style="cursor: pointer">Timeless Classics: Trending Classic Movie
             }
           });
       }
-    </script>
-    <script>
+
       document.addEventListener('DOMContentLoaded', function () {
         const bellIcon = document.getElementById('bellIcon');
         bellIcon.classList.add('shake-animation');
@@ -1435,8 +1333,7 @@ <h2 id="other" style="cursor: pointer">Timeless Classics: Trending Classic Movie
           bellIcon.classList.remove('shake-animation');
         }, 500);
       });
-    </script>
-    <script>
+
       document.addEventListener('DOMContentLoaded', function () {
         const searchBar = document.getElementById('search');
         const searchButton = document.getElementById('button-search');
@@ -1462,8 +1359,7 @@ <h2 id="other" style="cursor: pointer">Timeless Classics: Trending Classic Movie
         searchBar.addEventListener('input', toggleVisibility);
         toggleVisibility();
       });
-    </script>
-    <script>
+
       document.addEventListener('DOMContentLoaded', function () {
         const searchInput = document.getElementById('search');
         const viewAllResultsBtn = document.getElementById('view-all-results');
@@ -1494,8 +1390,7 @@ <h2 id="other" style="cursor: pointer">Timeless Classics: Trending Classic Movie
         toggleButtons();
         searchInput.addEventListener('input', toggleButtons);
       });
-    </script>
-    <script>
+
       function showSpinner() {
         document.getElementById('myModal').classList.add('modal-visible');
       }
@@ -1696,4 +1591,136 @@ <h2 id="other" style="cursor: pointer">Timeless Classics: Trending Classic Movie
       });
     </script>
   </body>
+
+  <style>
+    #githubLink {
+      color: white !important;
+    }
+    #githubLink:hover {
+      color: #ff8623 !important;
+      transition: 0.1s ease-in;
+    }
+    #githubLink7 {
+      color: white !important;
+    }
+    #githubLink7:hover {
+      color: #ff8623 !important;
+      transition: 0.1s ease-in;
+    }
+    #githubLink8 {
+      color: white !important;
+    }
+    #githubLink8:hover {
+      color: #ff8623 !important;
+      transition: 0.1s ease-in;
+    }
+    #githubLink9 {
+      color: white !important;
+    }
+    #githubLink9:hover {
+      color: #ff8623 !important;
+      transition: 0.1s ease-in;
+    }
+    #githubLink10 {
+      color: white !important;
+    }
+    #githubLink10:hover {
+      color: #ff8623 !important;
+      transition: 0.1s ease-in;
+    }
+    #githubLink11 {
+      color: white !important;
+    }
+    #githubLink11:hover {
+      color: #ff8623 !important;
+      transition: 0.1s ease-in;
+    }
+    #githubLink12 {
+      color: white !important;
+    }
+    #githubLink12:hover {
+      color: #ff8623 !important;
+      transition: 0.1s ease-in;
+    }
+    #githubLink14 {
+      color: white !important;
+    }
+    #githubLink14:hover {
+      color: #ff8623 !important;
+      transition: 0.1s ease-in;
+    }
+    #githubLink15 {
+      color: white !important;
+    }
+    #githubLink15:hover {
+      color: #ff8623 !important;
+      transition: 0.1s ease-in;
+    }
+    #githubLink16 {
+      color: white !important;
+    }
+    #githubLink16:hover {
+      color: #ff8623 !important;
+      transition: 0.1s ease-in;
+    }
+    #githubLink19 {
+      color: white !important;
+    }
+    #githubLink19:hover {
+      color: #ff8623 !important;
+      transition: 0.1s ease-in;
+    }
+    #githubLink3 {
+      color: white !important;
+    }
+    #githubLink3:hover {
+      color: #ff8623 !important;
+      transition: 0.1s ease-in;
+    }
+    #githubLink4 {
+      color: white !important;
+    }
+    #githubLink4:hover {
+      color: #ff8623 !important;
+      transition: 0.1s ease-in;
+    }
+    #githubLink5 {
+      color: white !important;
+    }
+    #githubLink5:hover {
+      color: #ff8623 !important;
+      transition: 0.1s ease-in;
+    }
+    #githubLink6 {
+      color: white !important;
+    }
+    #githubLink6:hover {
+      color: #ff8623 !important;
+      transition: 0.1s ease-in;
+    }
+    #ad-container {
+      display: block;
+    }
+    #ad-container1 {
+      display: block;
+    }
+    #ad-container2 {
+      display: block;
+    }
+    #ad-container3 {
+      display: block;
+    }
+    #ad-container4 {
+      display: block;
+    }
+    #ad-container5 {
+      display: block;
+    }
+    #ad-container6 {
+      display: block;
+    }
+    #ad-container7 {
+      display: block;
+    }
+  </style>
 </html>
diff --git a/index.js b/index.js
index f433a1cb..c1e39cd0 100644
--- a/index.js
+++ b/index.js
@@ -947,8 +947,14 @@ document.addEventListener('mousemove', function (event) {
 document.addEventListener('click', function (event) {
   const sideNav = document.getElementById('side-nav');
   const navToggle = document.getElementById('nav-toggle');
-
-  if (!sideNav.contains(event.target) && !navToggle.contains(event.target) && sideNav.classList.contains('manual-toggle')) {
+  const menuButton = document.getElementById('sticky-menu-button');
+
+  if (
+    !sideNav.contains(event.target) &&
+    !navToggle.contains(event.target) &&
+    sideNav.classList.contains('manual-toggle') &&
+    !menuButton.contains(event.target)
+  ) {
     sideNav.classList.remove('manual-toggle');
     adjustNavBar();
   }
diff --git a/sitemap.xml b/sitemap.xml
index d4ee6e8c..b9fe62d3 100644
--- a/sitemap.xml
+++ b/sitemap.xml
@@ -2,137 +2,137 @@
 <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
   <url>
     <loc>https://movie-verse.com/</loc>
-    <lastmod>2024-12-01</lastmod>
+    <lastmod>2024-12-18</lastmod>
     <priority>1.00</priority>
   </url>
   <url>
     <loc>https://movie-verse.com/MovieVerse-Frontend/html/about.html</loc>
-    <lastmod>2024-12-01</lastmod>
+    <lastmod>2024-12-18</lastmod>
     <priority>0.80</priority>
   </url>
   <url>
     <loc>https://movie-verse.com/MovieVerse-Frontend/html/favorites.html</loc>
-    <lastmod>2024-12-01</lastmod>
+    <lastmod>2024-12-18</lastmod>
     <priority>0.80</priority>
   </url>
   <url>
     <loc>https://movie-verse.com/MovieVerse-Frontend/html/movie-match.html</loc>
-    <lastmod>2024-12-01</lastmod>
+    <lastmod>2024-12-18</lastmod>
     <priority>0.80</priority>
   </url>
   <url>
     <loc>https://movie-verse.com/MovieVerse-Frontend/html/movie-timeline.html</loc>
-    <lastmod>2024-12-01</lastmod>
+    <lastmod>2024-12-18</lastmod>
     <priority>0.80</priority>
   </url>
   <url>
     <loc>https://movie-verse.com/MovieVerse-Frontend/html/notifications.html</loc>
-    <lastmod>2024-12-01</lastmod>
+    <lastmod>2024-12-18</lastmod>
     <priority>0.80</priority>
   </url>
   <url>
     <loc>https://movie-verse.com/MovieVerse-Frontend/html/chatbot.html</loc>
-    <lastmod>2024-12-01</lastmod>
+    <lastmod>2024-12-18</lastmod>
     <priority>0.80</priority>
   </url>
   <url>
     <loc>https://movie-verse.com/MovieVerse-Frontend/html/trivia.html</loc>
-    <lastmod>2024-12-01</lastmod>
+    <lastmod>2024-12-18</lastmod>
     <priority>0.80</priority>
   </url>
   <url>
     <loc>https://movie-verse.com/MovieVerse-Frontend/html/settings.html</loc>
-    <lastmod>2024-12-01</lastmod>
+    <lastmod>2024-12-18</lastmod>
     <priority>0.80</priority>
   </url>
   <url>
     <loc>https://movie-verse.com/MovieVerse-Frontend/html/chat.html</loc>
-    <lastmod>2024-12-01</lastmod>
+    <lastmod>2024-12-18</lastmod>
     <priority>0.80</priority>
   </url>
   <url>
     <loc>https://movie-verse.com/MovieVerse-Frontend/html/movie-details.html</loc>
-    <lastmod>2024-12-01</lastmod>
+    <lastmod>2024-12-18</lastmod>
     <priority>0.80</priority>
   </url>
   <url>
     <loc>https://movie-verse.com/MovieVerse-Frontend/html/director-details.html</loc>
-    <lastmod>2024-12-01</lastmod>
+    <lastmod>2024-12-18</lastmod>
     <priority>0.80</priority>
   </url>
   <url>
     <loc>https://movie-verse.com/MovieVerse-Frontend/html/actor-details.html</loc>
-    <lastmod>2024-12-01</lastmod>
+    <lastmod>2024-12-18</lastmod>
     <priority>0.80</priority>
   </url>
   <url>
     <loc>https://movie-verse.com/MovieVerse-Frontend/html/company-details.html</loc>
-    <lastmod>2024-12-01</lastmod>
+    <lastmod>2024-12-18</lastmod>
     <priority>0.80</priority>
   </url>
   <url>
     <loc>https://movie-verse.com/MovieVerse-Frontend/html/sign-in.html</loc>
-    <lastmod>2024-12-01</lastmod>
+    <lastmod>2024-12-18</lastmod>
     <priority>0.80</priority>
   </url>
   <url>
     <loc>https://movie-verse.com/MovieVerse-Frontend/html/create-account.html</loc>
-    <lastmod>2024-12-01</lastmod>
+    <lastmod>2024-12-18</lastmod>
     <priority>0.80</priority>
   </url>
   <url>
     <loc>https://movie-verse.com/MovieVerse-Frontend/html/reset-password.html</loc>
-    <lastmod>2024-12-01</lastmod>
+    <lastmod>2024-12-18</lastmod>
     <priority>0.80</priority>
   </url>
   <url>
     <loc>https://movie-verse.com/MovieVerse-Frontend/html/privacy-policy.html</loc>
-    <lastmod>2024-12-01</lastmod>
+    <lastmod>2024-12-18</lastmod>
     <priority>0.80</priority>
   </url>
   <url>
     <loc>https://movie-verse.com/MovieVerse-Frontend/html/terms-of-service.html</loc>
-    <lastmod>2024-12-01</lastmod>
+    <lastmod>2024-12-18</lastmod>
     <priority>0.80</priority>
   </url>
   <url>
     <loc>https://movie-verse.com/MovieVerse-Frontend/html/search.html</loc>
-    <lastmod>2024-12-01</lastmod>
+    <lastmod>2024-12-18</lastmod>
     <priority>0.80</priority>
   </url>
   <url>
     <loc>https://movie-verse.com/MovieVerse-Frontend/html/analytics.html</loc>
-    <lastmod>2024-12-01</lastmod>
+    <lastmod>2024-12-18</lastmod>
     <priority>0.80</priority>
   </url>
   <url>
     <loc>https://movie-verse.com/MovieVerse-Frontend/html/feedback.html</loc>
-    <lastmod>2024-12-01</lastmod>
+    <lastmod>2024-12-18</lastmod>
     <priority>0.80</priority>
   </url>
   <url>
     <loc>https://movie-verse.com/MovieVerse-Frontend/html/support.html</loc>
-    <lastmod>2024-12-01</lastmod>
+    <lastmod>2024-12-18</lastmod>
     <priority>0.80</priority>
   </url>
   <url>
     <loc>https://movie-verse.com/MovieVerse-Frontend/html/inception.html</loc>
-    <lastmod>2024-12-01</lastmod>
+    <lastmod>2024-12-18</lastmod>
     <priority>0.80</priority>
   </url>
   <url>
     <loc>https://movie-verse.com/MovieVerse-Frontend/html/user-profile.html</loc>
-    <lastmod>2024-12-01</lastmod>
+    <lastmod>2024-12-18</lastmod>
     <priority>0.80</priority>
   </url>
   <url>
     <loc>https://movie-verse.com/MovieVerse-Frontend/html/leonardo-dicaprio.html</loc>
-    <lastmod>2024-12-01</lastmod>
+    <lastmod>2024-12-18</lastmod>
     <priority>0.80</priority>
   </url>
   <url>
     <loc>https://movie-verse.com/MovieVerse-Frontend/html/christopher-nolan.html</loc>
-    <lastmod>2024-12-01</lastmod>
+    <lastmod>2024-12-18</lastmod>
     <priority>0.80</priority>
   </url>
 </urlset>